Change: リンクを表示した

apps/web/src/app/dashboards/blogs/[blogId]/articles/[articleId]/edit/page.tsx

@@ -1,8 +1,9 @@
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { notFound } from 'next/navigation';
 import { getArticle } from '~/actions/article';
 import { getBlog } from '~/actions/blog';
 import { ArticleForm } from '~/components/models/article/ArticleForm';
+import { DashBoardArticleBackLink } from '~/components/models/article/DashBoardArticleBackLink/DashBoardArticleBackLink';
 import { generateWisblogMetadata } from '~/libs/generateWisblogMetadata';
 
 export const metadata = generateWisblogMetadata({ title: '記事の編集' });
@@ -16,7 +17,12 @@ export default async function Page({ params }: { params: { blogId: string; artic
 
   return (
     <Stack maxWidth={1260} mx='auto' pt={2} pb={4} px={2} gap={2}>
-      <ArticleForm existingArticle={article} subDomain={blog.subDomain} />
+      <Stack gap='16px'>
+        <Box display='flex' alignItems='center' justifyContent='space-between'>
+          <DashBoardArticleBackLink blogId={blog.id} />
+        </Box>
+        <ArticleForm existingArticle={article} subDomain={blog.subDomain} />
+      </Stack>
     </Stack>
   );
 }

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

@@ -14,6 +14,7 @@ import { convertStatus } from '~/actions/article';
 import { updateDraftArticle } from '~/actions/draftArticle';
 import { updatePublishArticle } from '~/actions/publishArticle';
 import { Editor } from '~/components/uiParts/Editor';
+import { LoadingBox } from '~/components/uiParts/LoadingBox';
 import { mutateArticle, useArticle } from '~/hooks/article/useArticle/useArticle';
 import { AccessArticlePageIcon } from '../AccessArticlePageIcon';
 
@@ -34,8 +35,8 @@ export const ArticleForm: FC<Props> = ({ subDomain, existingArticle: _existingAr
     fallbackData: _existingArticle,
   });
 
-  if (isLoading) return null;
-  if (!existingArticle) return null;
+  if (isLoading) return <LoadingBox />;
+  if (!existingArticle) return <LoadingBox />;
 
   return <ArticleFormCore subDomain={subDomain} existingArticle={existingArticle} />;
 };

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

@@ -0,0 +1,37 @@
+'use client';
+
+import { ArrowBack } from '@mui/icons-material';
+import { Link } from '@mui/material';
+import type { FC } from 'react';
+import { appUrls } from '~/constants/appUrls';
+
+type Props = {
+  blogId: string;
+};
+
+export const DashBoardArticleBackLink: FC<Props> = ({ blogId }) => {
+  return (
+    <Link
+      color='inherit'
+      sx={{
+        textDecoration: 'none',
+        width: 'fit-content',
+        display: 'flex',
+        alignItems: 'center',
+        color: 'text.secondary',
+        ':hover': {
+          color: 'text.primary',
+        },
+      }}
+      href={appUrls.dashboard.blogs.articles.list(blogId)}
+    >
+      <ArrowBack
+        sx={{
+          fontSize: '1rem',
+          marginRight: '0.5rem',
+        }}
+      />
+      記事一覧
+    </Link>
+  );
+};

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

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