Implement magazine detail page

packages/web/src/components/base/atoms/Icon/icon.tsx

@@ -252,6 +252,13 @@ const ArrowClockwise: FC = () => (
   </>
 );
 
+const Eye = (
+  <>
+    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" />
+    <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" />
+  </>
+);
+
 const PlayCircle: FC = () => (
   <>
     <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
@@ -301,6 +308,7 @@ export const IconComponentMapping = {
   ARROW_CLOCKWISE: <ArrowClockwise />,
   ARROW_RIGHT: <ArrowRightIcon />,
   ARROW_DOWN: <ArrowDownIcon />,
+  EYE: Eye,
   BOOK: <Book />,
   CARET_RIGHT: <CaretRight />,
   CARET_DOWN: <CaretDown />,

packages/web/src/components/page/Magazine/MagazinesList/MagazinesList.tsx

@@ -1,22 +1,26 @@
 import { FC, useCallback, useState } from 'react';
+import { useRouter } from 'next/router';
 
 import { Button, Grid, Pagination, Table } from '@nextui-org/react';
 import { format } from 'date-fns';
 import { useLocale } from './useLocale';
 import { WebevOgpHead } from '@webev/web/components/common/WebevOgpHead';
 
 import { LoginRequiredWrapper } from '@webev/web/components/common/Authentication/LoginRequiredWrapper';
-import { Text } from '@webev/web/components/uiParts';
+import { Text, Tooltip } from '@webev/web/components/uiParts';
 import { Icon } from '@webev/web/components/base/atoms/Icon';
 import { useModal } from '@webev/web/hooks/useModal';
 import { useMagazinePagination } from '@webev/web/stores/Magazine';
 import { StatusLabel } from '@webev/web/components/domain/Magazine';
 import { Magazine } from '@webev/web/domains/Magazine';
+import { URLS } from '@webev/web/libs/constants/urls';
 
 type Props = {};
 
 export const MagazinesList: FC<Props> = () => {
   const { t } = useLocale();
+  const router = useRouter();
+
   const [activePage, setActivePage] = useState(1);
   const {
     data: magazinePagination,
@@ -120,9 +124,16 @@ export const MagazinesList: FC<Props> = () => {
                   <Table.Cell css={{ minWidth: '100px' }}>{format(new Date(magazine.createdAt), 'yyyy/MM/dd')}</Table.Cell>
                   <Table.Cell css={{ minWidth: '100px' }}>
                     <Grid css={{ display: 'flex', gridGap: '16px', alignItems: 'center' }}>
-                      <Text css={{ cursor: 'pointer' }} onClick={() => handleClickEditMagazineButton(magazine)}>
-                        <Icon icon="PENCIL" width={16} height={16} />
-                      </Text>
+                      <Tooltip content={t.watch}>
+                        <Text css={{ cursor: 'pointer', color: '$warning' }} onClick={() => router.push(URLS.MAGAZINE(magazine.id || ''))}>
+                          <Icon icon="EYE" width={16} height={16} />
+                        </Text>
+                      </Tooltip>
+                      <Tooltip content={t.edit}>
+                        <Text css={{ cursor: 'pointer' }} onClick={() => handleClickEditMagazineButton(magazine)}>
+                          <Icon icon="PENCIL" width={16} height={16} />
+                        </Text>
+                      </Tooltip>
                       {/* TODO: implement */}
                       {/* <Text css={{ cursor: 'pointer', color: '$error' }}>
                         <Icon icon="TRASH" />

packages/web/src/components/page/Magazine/MagazinesList/useLocale.ts

@@ -3,21 +3,25 @@ import { useRouter } from 'next/router';
 const ja = {
   add: '追加',
   description: '説明',
+  edit: 'マガジンを編集する',
   magazine: 'マガジン',
   manage: '操作',
   status: 'ステータス',
   title: 'タイトル',
   update: '更新日',
+  watch: 'マガジンをみる',
 };
 
 const en = {
   add: 'add',
   description: 'description',
+  edit: 'edit magazine',
   magazine: 'magazine',
   manage: 'manage',
   status: 'status',
   title: 'title',
   update: 'update at',
+  watch: 'watch magazine',
 };
 
 export const useLocale = (): { locale?: string; t: typeof ja } => {

src/pages/magazines/[id].tsx

@@ -0,0 +1,65 @@
+import { useRouter } from 'next/router';
+import { ReactNode } from 'react';
+
+import { Button, Grid, Loading, Text } from '@nextui-org/react';
+import Link from 'next/link';
+import { usePageByPageId } from '~/stores/Page';
+import { WebevNextPage } from '~/libs/interfaces/webevNextPage';
+import { useLocale } from '~/hooks/useLocale';
+import { URLS } from '~/libs/constants/urls';
+
+import { WebevOgpHead } from '~/components/common/WebevOgpHead';
+import { DashBoardLayout } from '~/components/common/Layout/DashBoardLayout';
+import { PageManageDropdown } from '~/components/domain/Page/PageManageDropdown';
+
+const Page: WebevNextPage = () => {
+  const router = useRouter();
+
+  const { id } = router.query;
+
+  const { t } = useLocale();
+  const { data: page, isLoading: isLoadingPage } = usePageByPageId({ pageId: id as string });
+
+  if (isLoadingPage) {
+    return (
+      <Grid css={{ width: '100%', py: '$8', display: 'flex', justifyContent: 'center' }}>
+        <Loading size="xl" color="secondary" />
+      </Grid>
+    );
+  }
+
+  if (!page) {
+    return (
+      <Grid css={{ textAlign: 'center', width: '100%' }}>
+        <Text h3>{t.data_not_found}</Text>
+        <Link href={URLS.HOME_URL}>
+          <a>
+            <Button color="secondary" css={{ mx: 'auto', mt: '24px' }}>
+              {t.return_button}
+            </Button>
+          </a>
+        </Link>
+      </Grid>
+    );
+  }
+
+  return (
+    <>
+      <WebevOgpHead title={`Webev | ${page.title}`} />
+
+      <Grid css={{ maxWidth: '800px', width: '100%' }}>
+        <Grid css={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mb: '16px', gap: '8px' }}>
+          <Text h2 css={{ textAlign: 'center', mb: '$0', mx: 'auto', '@smMax': { fontSize: '$lg', textAlign: 'left' } }}>
+            {page.title}
+          </Text>
+          <PageManageDropdown page={page} />
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+
+const getLayout = (page: ReactNode) => <DashBoardLayout>{page}</DashBoardLayout>;
+
+Page.getLayout = getLayout;
+export default Page;