Change: 編集メニューを表示しない ArticleSummaryPaper を実装して記事一覧で表示する

apps/web/src/app/[subDomain]/page.tsx

@@ -2,14 +2,10 @@ import { Stack, Typography } from '@mui/material';
 import { notFound } from 'next/navigation';
 import { getBlogsBySubDomain } from '~/actions/blog';
 import { getPublishArticles } from '~/actions/publishArticle';
-import { getCurrentUser } from '~/actions/user';
-import { ArticlePaper } from '~/components/models/article/ArticlePaper';
+import { ArticleSummaryPaper } from '~/components/models/article/ArticleSummaryPaper';
 
 export default async function Page({ params }: { params: { subDomain: string } }) {
-  const [blog, { currentUser }] = await Promise.all([
-    getBlogsBySubDomain({ subDomain: params.subDomain }),
-    getCurrentUser(),
-  ]);
+  const blog = await getBlogsBySubDomain({ subDomain: params.subDomain });
 
   if (!blog) {
     return notFound();
@@ -23,7 +19,7 @@ export default async function Page({ params }: { params: { subDomain: string } }
         {blog.name}
       </Typography>
       {articles.map(article => (
-        <ArticlePaper key={article.id} currentUser={currentUser} article={article} blog={blog} />
+        <ArticleSummaryPaper key={article.id} article={article} blog={blog} />
       ))}
     </Stack>
   );

apps/web/src/components/models/article/ArticleSummaryPaper/ArticleSummaryPaper.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { Box, Link, Paper, Typography } from '@mui/material';
+import type { Blog, PublishArticle } from '@repo/types';
+import { format } from 'date-fns';
+import type { FC } from 'react';
+import urlJoin from 'url-join';
+import { appUrls } from '~/constants/appUrls';
+import { generateMainUrl } from '~/utils/generateMainUrl';
+
+type Props = {
+  blog: Blog;
+  article: PublishArticle;
+};
+
+export const ArticleSummaryPaper: FC<Props> = ({ blog, article }) => {
+  return (
+    <Paper key={article.id} variant='outlined' sx={{ p: 2, display: 'flex', flexDirection: 'column', rowGap: 0.5 }}>
+      <Box display='flex' alignItems='center' justifyContent='space-between'>
+        <Link
+          href={urlJoin(generateMainUrl(), appUrls.dashboard.blogs.articles.edit(blog.id, article.id))}
+          underline='hover'
+          color='inherit'
+        >
+          <Typography variant='h5' component='div'>
+            {article.title === '' ? '無題' : article.title}
+          </Typography>
+        </Link>
+      </Box>
+      <Box sx={{ display: 'flex', flexDirection: 'column', rowGap: 3 }}>
+        <Box display='flex' columnGap={2}>
+          <Typography variant='caption' component='h6'>
+            作成日：{format(article.createdAt, 'yyyy-MM-dd HH:mm')}
+          </Typography>
+          <Typography variant='caption' component='h6'>
+            更新日：{format(article.updatedAt, 'yyyy-MM-dd HH:mm')}
+          </Typography>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};

apps/web/src/components/models/article/ArticleSummaryPaper/index.ts

@@ -0,0 +1 @@
+export { ArticleSummaryPaper } from './ArticleSummaryPaper';