From 464f482e8fe12c44b37d3a196e1456078c425eb9 Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Wed, 28 Sep 2022 23:00:44 +0900
Subject: [PATCH 1/8] divide api wrapper

---
 src/utils/api/auth/index.ts | 53 +++++++++++++++++++++++++++++++++++++
 src/utils/api/blog/index.ts | 36 +++++++++++++++++++++++++
 2 files changed, 89 insertions(+)
 create mode 100644 src/utils/api/auth/index.ts
 create mode 100644 src/utils/api/blog/index.ts

diff --git a/src/utils/api/auth/index.ts b/src/utils/api/auth/index.ts
new file mode 100644
index 0000000..4131f4f
--- /dev/null
+++ b/src/utils/api/auth/index.ts
@@ -0,0 +1,53 @@
+import type { ContactContentType } from '#src/components/SelfIntroduction/ContactForm';
+import type { Blog, Category, User } from '#src/types';
+
+import axios, { AxiosResponse } from 'axios';
+
+const BACKEND_ORIGIN = process.env.NEXT_PUBLIC_BACKEND_ORIGIN;
+
+const axiosWithCredentials = axios.create({
+    withCredentials: true,
+});
+
+export async function adminLogin(userData: User) {
+    const REQUEST_URL = new URL('/api/admin/login/', BACKEND_ORIGIN).href;
+    const response: AxiosResponse = await axiosWithCredentials.post(
+        REQUEST_URL,
+        userData,
+    );
+    return response;
+}
+
+export async function adminVerifyTokens() {
+    const REQUEST_URL = new URL('/api/admin/tokens/verify/', BACKEND_ORIGIN)
+        .href;
+    const response: AxiosResponse = await axiosWithCredentials.post(
+        REQUEST_URL,
+    );
+    return response;
+}
+
+export async function adminPostBlog(blog: Blog) {
+    const REQUEST_URL = new URL('/api/admin/blogs/post/', BACKEND_ORIGIN).href;
+    const response: AxiosResponse = await axiosWithCredentials.post(
+        REQUEST_URL,
+        blog,
+    );
+    return response;
+}
+
+export async function adminPostCategory(category: Category) {
+    const REQUEST_URL = new URL('/api/admin/categories/post/', BACKEND_ORIGIN)
+        .href;
+    const response: AxiosResponse = await axiosWithCredentials.post(
+        REQUEST_URL,
+        category,
+    );
+    return response;
+}
+
+export async function postContactForm(content: ContactContentType) {
+    const REQUEST_URL = new URL('/api/contact-form/', BACKEND_ORIGIN).href;
+    const response: AxiosResponse = await axios.post(REQUEST_URL, content);
+    return response.status;
+}
diff --git a/src/utils/api/blog/index.ts b/src/utils/api/blog/index.ts
new file mode 100644
index 0000000..8ffc802
--- /dev/null
+++ b/src/utils/api/blog/index.ts
@@ -0,0 +1,36 @@
+import axios, { AxiosResponse } from 'axios';
+
+import type { Blog, Category } from '#src/types';
+
+const BACKEND_ORIGIN = process.env.NEXT_PUBLIC_BACKEND_ORIGIN;
+
+const axiosWithCredentials = axios.create({
+    withCredentials: true,
+});
+
+export async function fetchBlogList(onlyPublished = true) {
+    const REQUEST_URL = onlyPublished
+        ? new URL('/api/blogs/', BACKEND_ORIGIN).href
+        : new URL('/api/admin/blogs/', BACKEND_ORIGIN).href;
+    const response: AxiosResponse<Blog[]> = await axiosWithCredentials.get(
+        REQUEST_URL,
+    );
+    const blogList = response.data.sort((a, b) => b.updated_at - a.updated_at);
+    return blogList;
+}
+
+export async function fetchBlog(id: string) {
+    const REQUEST_URL = new URL(`/api/blogs/${id}`, BACKEND_ORIGIN).href;
+    const response: AxiosResponse<Blog> = await axios.get(REQUEST_URL);
+    return response.data;
+}
+
+export async function fetchCategories() {
+    const REQUEST_URL = new URL('/api/categories/', BACKEND_ORIGIN).href;
+    const response: AxiosResponse<Category[]> = await axios.get(REQUEST_URL);
+    const categoryList = response.data;
+    categoryList.forEach((value) => {
+        value.key = Number(value.key);
+    });
+    return categoryList;
+}

From e32d1c048b979175991a148e3e575953cd2658df Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Wed, 28 Sep 2022 23:01:02 +0900
Subject: [PATCH 2/8] update

---
 src/components/BlogDetail/BlogNotFound.tsx    |  28 ----
 src/components/BlogDetail/index.tsx           |  43 ++---
 src/components/BlogList/BlogListItem.tsx      | 154 ++++++++----------
 src/components/BlogList/index.tsx             |  43 ++---
 src/components/Editor/AddCategoryModal.tsx    |   2 +-
 src/components/Editor/MarkdownEditor.tsx      |   2 +-
 src/components/Editor/MetaDataEditor.tsx      |   3 +-
 src/components/Footer/index.tsx               |   2 +-
 src/components/LoginForm/index.tsx            |   6 +-
 src/components/MarkdownView/CodeContainer.tsx |   6 +-
 src/components/Navbar/index.tsx               |   4 +-
 .../SelfIntroduction/ContactForm/index.tsx    |   2 +-
 .../SkillList/CertificationsList.tsx          |   3 -
 .../SkillList/ProgrammingSkillList.tsx        |   2 +-
 src/components/SelfIntroduction/index.tsx     |   2 +-
 src/components/ShareButtons/index.tsx         |   4 +-
 src/layouts/client.tsx                        |   2 +-
 src/pages/_app.tsx                            |   1 +
 src/pages/admin/[uuid].tsx                    |   4 +-
 src/pages/admin/index.tsx                     |   4 +-
 src/pages/blogs/[uuid].tsx                    |  39 ++---
 src/pages/blogs/index.tsx                     |  17 +-
 src/pages/index.tsx                           |   2 +-
 src/utils/backendApi.ts                       |  71 --------
 src/utils/hooks.ts                            |   6 +-
 25 files changed, 160 insertions(+), 292 deletions(-)
 delete mode 100644 src/components/BlogDetail/BlogNotFound.tsx
 delete mode 100644 src/utils/backendApi.ts

diff --git a/src/components/BlogDetail/BlogNotFound.tsx b/src/components/BlogDetail/BlogNotFound.tsx
deleted file mode 100644
index 5308990..0000000
--- a/src/components/BlogDetail/BlogNotFound.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { Box, Typography } from '@mui/material';
-
-export const BlogNotFound: React.FC<{ redirectUrl?: string }> = ({
-  redirectUrl = '/',
-}) => {
-  const router = useRouter();
-  const [time, setTime] = useState(10);
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    const timer = setInterval(async () => {
-      setTime((prev) => Math.max(prev - 1, 0));
-      if (time === 0) {
-        await router.replace(redirectUrl);
-      }
-    }, 1000);
-    return () => {
-      clearInterval(timer);
-    };
-  }, [time, router, redirectUrl]);
-  return (
-    <Box>
-      <Typography variant="h5">Not Found...</Typography>
-      <Typography variant="h5">{time}秒後にリダイレクトします</Typography>
-    </Box>
-  );
-};
diff --git a/src/components/BlogDetail/index.tsx b/src/components/BlogDetail/index.tsx
index c78229c..f4759ef 100644
--- a/src/components/BlogDetail/index.tsx
+++ b/src/components/BlogDetail/index.tsx
@@ -2,61 +2,42 @@ import dayjs from 'dayjs';
 import Head from 'next/head';
 import { Box, Container, Divider, Typography } from '@mui/material';
 
-import { Loader, MarkdownView, ShareButtons } from '#src/components';
-import { useBlogListState } from '#src/utils/hooks';
+import { MarkdownView, ShareButtons } from '#src/components';
 import { BlogIndex } from './BlogIndex';
-import { BlogNotFound } from './BlogNotFound';
-
-export const BlogDetail: React.FC<{ uuid: string }> = ({ uuid }) => {
-  const { data } = useBlogListState();
-  if (!data) {
-    return <Loader />;
-  }
-  const blogData = data.find((blog) => blog.uuid === uuid);
-  if (!blogData) {
-    return (
-      <>
-        <Head>
-          <title>ブログが存在しません</title>
-        </Head>
-
-        <Container>
-          <BlogNotFound />
-        </Container>
-      </>
-    );
-  }
+import { Blog } from '#src/types';
+
+export const BlogDetail: React.FC<{ blog: Blog }> = ({ blog }) => {
   return (
     <>
       <Head>
-        <title>{blogData.title}</title>
-        <meta name="description" content={blogData.description} />
+        <title>{blog.title}</title>
+        <meta name="description" content={blog.description} />
       </Head>
 
       <Container>
         <ShareButtons />
 
         <Box paddingTop={3} textAlign="center">
-          <Typography variant="h2">{blogData.title}</Typography>
-          <Typography variant="h5">{blogData.sub_title}</Typography>
+          <Typography variant="h2">{blog.title}</Typography>
+          <Typography variant="h5">{blog.sub_title}</Typography>
         </Box>
 
         <Box textAlign="right">
           <Typography variant="caption" display="block">
             作成日時:&nbsp;
-            {dayjs.unix(blogData.created_at).format('YYYY年MM月DD日')}
+            {dayjs.unix(blog.created_at).format('YYYY年MM月DD日')}
           </Typography>
           <Typography variant="caption" display="block">
             更新日時:&nbsp;
-            {dayjs.unix(blogData.updated_at).format('YYYY年MM月DD日')}
+            {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
           </Typography>
         </Box>
 
-        <BlogIndex body={blogData.content} />
+        <BlogIndex body={blog.content} />
 
         <Divider sx={{ borderWidth: 'thin' }} />
 
-        <MarkdownView body={blogData.content} />
+        <MarkdownView body={blog.content} />
       </Container>
     </>
   );
diff --git a/src/components/BlogList/BlogListItem.tsx b/src/components/BlogList/BlogListItem.tsx
index d90e155..715f1e5 100644
--- a/src/components/BlogList/BlogListItem.tsx
+++ b/src/components/BlogList/BlogListItem.tsx
@@ -6,98 +6,86 @@ import Link from 'next/link';
 import path from 'path';
 import { useState } from 'react';
 import {
-  Box,
-  Card,
-  Chip,
-  Container,
-  Link as MuiLink,
-  Skeleton,
-  Stack,
+    Box,
+    Card,
+    Chip,
+    Container,
+    Link as MuiLink,
+    Skeleton,
+    Stack,
 } from '@mui/material';
 
 import { COLORS } from '#src/styles';
 
 export const BlogListItem: React.FC<{
-  blogData?: Blog;
-  categoryData?: Category[];
-}> = ({ blogData, categoryData }) => {
-  const [isHovering, setIsHovering] = useState(false);
+    blog: Blog;
+    categoryData?: Category[];
+}> = ({ blog, categoryData }) => {
+    const [isHovering, setIsHovering] = useState(false);
 
-  function getBlogUrl(uuid: string) {
-    return path.join('/blogs/', uuid);
-  }
+    function getBlogUrl(uuid: string) {
+        return path.join('/blogs/', uuid);
+    }
 
-  return (
-    <Card
-      elevation={isHovering ? 10 : 2}
-      sx={{ backgroundColor: COLORS.whiteColor, p: 1 }}
-      onClick={() => {
-        setIsHovering(true);
-      }}
-      onMouseEnter={() => {
-        setIsHovering(true);
-      }}
-      onMouseLeave={() => setIsHovering(false)}
-    >
-      <Container>
-        <Box component="h1" paddingTop="15px" margin={0}>
-          {blogData ? (
-            <Link href={getBlogUrl(blogData.uuid)} passHref>
-              <MuiLink underline="hover" color={COLORS.baseColor}>
-                {blogData.title}
-              </MuiLink>
-            </Link>
-          ) : (
-            <Skeleton animation="wave" />
-          )}
-        </Box>
+    return (
+        <Card
+            elevation={isHovering ? 10 : 2}
+            sx={{ backgroundColor: COLORS.whiteColor, p: 1 }}
+            onClick={() => {
+                setIsHovering(true);
+            }}
+            onMouseEnter={() => {
+                setIsHovering(true);
+            }}
+            onMouseLeave={() => setIsHovering(false)}
+        >
+            <Container>
+                <Box component="h1" paddingTop="15px" margin={0}>
+                    <Link href={getBlogUrl(blog.uuid)} passHref>
+                        <MuiLink underline="hover" color={COLORS.baseColor}>
+                            {blog.title}
+                        </MuiLink>
+                    </Link>
+                </Box>
 
-        <Box component="h3" margin="8px">
-          {blogData?.sub_title || <Skeleton animation="wave" />}
-        </Box>
+                <Box component="h3" margin="8px">
+                    {blog.sub_title}
+                </Box>
 
-        <Box
-          component="div"
-          margin="8px"
-          sx={{
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-          }}
-        >
-          {blogData ? (
-            markdownToTxt(blogData.content)
-          ) : (
-            <Skeleton animation="wave" />
-          )}
-        </Box>
+                <Box
+                    component="div"
+                    margin="8px"
+                    sx={{
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                    }}
+                >
+                    {markdownToTxt(blog.content)}
+                </Box>
 
-        <Stack direction="row">
-          {blogData && categoryData ? (
-            blogData.categories.map((val) => (
-              <Chip
-                key={categoryData[val].key}
-                label={categoryData[val].label}
-                sx={{
-                  color: COLORS.whiteColor,
-                  backgroundColor: COLORS.accentDarkColor,
-                }}
-              />
-            ))
-          ) : (
-            <Skeleton animation="wave" />
-          )}
-        </Stack>
+                <Stack direction="row">
+                    {blog && categoryData ? (
+                        blog.categories.map((val) => (
+                            <Chip
+                                key={categoryData[val].key}
+                                label={categoryData[val].label}
+                                sx={{
+                                    color: COLORS.whiteColor,
+                                    backgroundColor: COLORS.accentDarkColor,
+                                }}
+                            />
+                        ))
+                    ) : (
+                        <Skeleton animation="wave" />
+                    )}
+                </Stack>
 
-        <Stack direction="row" justifyContent="end">
-          最終更新:&nbsp;
-          {blogData ? (
-            dayjs.unix(blogData.updated_at).format('YYYY年MM月DD日')
-          ) : (
-            <Skeleton width="130px" animation="wave" />
-          )}
-        </Stack>
-      </Container>
-    </Card>
-  );
+                <Stack direction="row" justifyContent="end">
+                    最終更新:&nbsp;
+                    {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
+                </Stack>
+            </Container>
+        </Card>
+    );
 };
diff --git a/src/components/BlogList/index.tsx b/src/components/BlogList/index.tsx
index aaf3894..cc3c096 100644
--- a/src/components/BlogList/index.tsx
+++ b/src/components/BlogList/index.tsx
@@ -1,16 +1,14 @@
-import lodash from 'lodash';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { Box, Container, Stack, Typography } from '@mui/material';
 
 import { BlogListItem } from './BlogListItem';
-import { useBlogListState, useCategoriesState } from '#src/utils/hooks';
+import { useCategoriesState } from '#src/utils/hooks';
+import { Blog } from '#src/types';
+import { Loader } from '#src/components';
 
 // ブログ一覧
-export const BlogList: React.FC = () => {
-  // 全blogデータ
-  const { data, error } = useBlogListState();
-
+export const BlogList: React.FC<{ blogs: Blog[] }> = ({ blogs }) => {
   // 全カテゴリーデータ
   const { data: categoryData } = useCategoriesState();
 
@@ -20,43 +18,34 @@ export const BlogList: React.FC = () => {
   // 参照と参照先が画面内に表示されているか
   // 表示されたらブログを追加表示
   const [ref, isDisplayed] = useInView();
+  const LOAD_BLOG_COUNT = 10
   useEffect(() => {
     if (isDisplayed) {
-      setBlogDisplay((prev) => prev + 10);
+      setBlogDisplay((prev) => prev + LOAD_BLOG_COUNT);
     }
   }, [isDisplayed]);
 
   return (
     <Container sx={{ flex: 1 }}>
       {/* ブログ一覧 */}
-      <Stack gap={5}>
-        {data ? (
-          data
-            .slice(0, blogsDisplay)
-            .map((blogData) => (
-              <BlogListItem
-                blogData={blogData}
-                categoryData={categoryData}
-                key={blogData.uuid}
-              />
-            ))
-        ) : (
-          <>
-            {lodash.range(blogsDisplay).map((val) => (
-              <BlogListItem key={val} />
-            ))}
-          </>
-        )}
+      <Stack gap={4}>
+        {blogs.slice(0, blogsDisplay).map((blogData) => (
+          <BlogListItem
+            blog={blogData}
+            categoryData={categoryData}
+            key={blogData.uuid}
+          />
+        ))}
       </Stack>
 
       {/* 無限スクロール */}
-      {blogsDisplay >= (data?.length || 0) ? (
+      {blogsDisplay >= (blogs.length || 0) ? (
         <Typography textAlign="center" variant="h4" pt={5}>
           No More Contents...
         </Typography>
       ) : (
         <Box ref={ref}>
-          <BlogListItem />
+          <Loader />
         </Box>
       )}
     </Container>
diff --git a/src/components/Editor/AddCategoryModal.tsx b/src/components/Editor/AddCategoryModal.tsx
index afef61a..e5a84af 100644
--- a/src/components/Editor/AddCategoryModal.tsx
+++ b/src/components/Editor/AddCategoryModal.tsx
@@ -13,7 +13,7 @@ import {
   Typography,
 } from '@mui/material';
 
-import { adminPostCategory } from '#src/utils/backendApi';
+import { adminPostCategory } from '#src/utils/api/auth';
 
 // Categoryを追加するためのモーダル
 export const AddCategoryModal: React.FC = () => {
diff --git a/src/components/Editor/MarkdownEditor.tsx b/src/components/Editor/MarkdownEditor.tsx
index 6ab386c..55ad9e4 100644
--- a/src/components/Editor/MarkdownEditor.tsx
+++ b/src/components/Editor/MarkdownEditor.tsx
@@ -4,7 +4,7 @@ import { useState, useContext, useRef } from 'react';
 import { Alert, Box, Button, Snackbar, TextareaAutosize } from '@mui/material';
 
 import { blogDataContext } from './contexts';
-import { adminPostBlog } from '#src/utils/backendApi';
+import { adminPostBlog } from '#src/utils/api/auth';
 
 export const MarkdownEditor: React.FC = () => {
   // saveされたか
diff --git a/src/components/Editor/MetaDataEditor.tsx b/src/components/Editor/MetaDataEditor.tsx
index bcec210..5269320 100644
--- a/src/components/Editor/MetaDataEditor.tsx
+++ b/src/components/Editor/MetaDataEditor.tsx
@@ -19,7 +19,7 @@ import {
 } from '@mui/lab';
 import AdapterDayjs from '@mui/lab/AdapterDayjs';
 
-import { adminPostBlog } from '#src/utils/backendApi';
+import { adminPostBlog } from '#src/utils/api/auth';
 import { useCategoriesState } from '#src/utils/hooks';
 import { AddCategoryModal } from './AddCategoryModal';
 import { blogDataContext, BlogDataContextType } from './contexts';
@@ -49,6 +49,7 @@ export const MetaDataEditor: React.FC = () => {
     data.content = blogData.blogDataContextValue.content;
     data.created_at = dayjs(data.created_at).unix();
     data.updated_at = dayjs(data.updated_at).unix();
+    console.log(data);
 
     await adminPostBlog(data);
     blogData.setBlogDataContextValue(() => data);
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 512ddb2..778ff11 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,7 +1,7 @@
 import dayjs from 'dayjs';
 import { Box, Container } from '@mui/material';
 
-import { COLORS } from '../../styles';
+import { COLORS } from '#src/styles';
 
 export const Footer: React.FC = () => {
   return (
diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx
index 01e157d..03f8fff 100644
--- a/src/components/LoginForm/index.tsx
+++ b/src/components/LoginForm/index.tsx
@@ -1,12 +1,12 @@
-import type { User } from '../../types';
+import type { User } from '#src/types';
 
 import assert from 'assert';
 import { useForm } from 'react-hook-form';
 import { useSetRecoilState } from 'recoil';
 import { FormControl, InputLabel, Input, Button, Box } from '@mui/material';
 
-import { isAuthenticatedState } from '../../atoms/authAtom';
-import { adminLogin } from '../../utils/backendApi';
+import { isAuthenticatedState } from '#src/atoms/authAtom';
+import { adminLogin } from '#src/utils/api/auth';
 
 export const LoginForm: React.FC = () => {
   const setIsAuthed = useSetRecoilState(isAuthenticatedState);
diff --git a/src/components/MarkdownView/CodeContainer.tsx b/src/components/MarkdownView/CodeContainer.tsx
index f8d8603..759fd21 100644
--- a/src/components/MarkdownView/CodeContainer.tsx
+++ b/src/components/MarkdownView/CodeContainer.tsx
@@ -3,9 +3,9 @@ import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
-import { isDarkState } from '../../atoms/codeStyleAtom';
-import { COLORS } from '../../styles';
-import { useCurrentAbsUrl } from '../../utils/hooks';
+import { isDarkState } from '#src/atoms/codeStyleAtom';
+import { COLORS } from '#src/styles';
+import { useCurrentAbsUrl } from '#src/utils/hooks';
 
 const FILE_EXTENSIONS: { [lang: string]: string } = {
   python: '.py',
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 934ec45..57e83fc 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,10 +1,10 @@
-import type { navItem } from '../../types';
+import type { navItem } from '#src/types';
 
 import Link from 'next/link';
 import { AppBar, Box, Container, Link as MuiLink, Stack } from '@mui/material';
 
 import { NavItem } from './NavItem';
-import { COLORS } from '../../styles';
+import { COLORS } from '#src/styles';
 
 // 画面上部のナビゲーションバー
 export const Navbar: React.FC = () => {
diff --git a/src/components/SelfIntroduction/ContactForm/index.tsx b/src/components/SelfIntroduction/ContactForm/index.tsx
index 144b543..044cdf3 100644
--- a/src/components/SelfIntroduction/ContactForm/index.tsx
+++ b/src/components/SelfIntroduction/ContactForm/index.tsx
@@ -3,7 +3,7 @@ import { Box, Button, TextField } from '@mui/material';
 import SendIcon from '@mui/icons-material/Send';
 
 import { COLORS } from '#src/styles';
-import { postContactForm } from '#src/utils/backendApi';
+import { postContactForm } from '#src/utils/api/auth';
 
 export type ContactContentType = {
   subject?: string;
diff --git a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
index ddcb044..fbcbc2f 100644
--- a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
+++ b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
@@ -19,9 +19,6 @@ export const CertificationsList: React.FC = () => {
       <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
         <Typography component="span">HSK 5級</Typography>
       </ListItem>
-      <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
-        <Typography component="span">応用情報技術者試験(AP) 勉強中</Typography>
-      </ListItem>
       <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
         <Typography component="span">E資格 勉強中</Typography>
       </ListItem>
diff --git a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
index 8b10319..a03b922 100644
--- a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
+++ b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
@@ -24,7 +24,7 @@ import {
   SvelteIcon,
   TypeScriptIcon,
   VueIcon,
-} from '../../Icons';
+} from '#src/components';
 
 export const ProgrammingSkillList: React.FC = () => {
   const [openPython, setOpenPython] = useState(false);
diff --git a/src/components/SelfIntroduction/index.tsx b/src/components/SelfIntroduction/index.tsx
index fc62ef3..36df8d3 100644
--- a/src/components/SelfIntroduction/index.tsx
+++ b/src/components/SelfIntroduction/index.tsx
@@ -1,6 +1,6 @@
 import { Box, Container, Stack, Typography } from '@mui/material';
 
-import { SkillList } from '#src/components/SelfIntroduction/SkillList';
+import { SkillList } from '#src/components';
 import { ContactForm } from './ContactForm';
 
 export const SelfIntroduction: React.FC = () => {
diff --git a/src/components/ShareButtons/index.tsx b/src/components/ShareButtons/index.tsx
index b9e3e0b..17da562 100644
--- a/src/components/ShareButtons/index.tsx
+++ b/src/components/ShareButtons/index.tsx
@@ -6,8 +6,8 @@ import ShareIcon from '@mui/icons-material/Share';
 import TwitterIcon from '@mui/icons-material/Twitter';
 
 import { LineIcon } from '..';
-import { COLORS } from '../../styles';
-import { useCurrentAbsUrl } from '../../utils/hooks';
+import { COLORS } from '#src/styles';
+import { useCurrentAbsUrl } from '#src/utils/hooks';
 
 export const ShareButtons: React.FC = () => {
   const [isClicked, setIsClicked] = useState(false);
diff --git a/src/layouts/client.tsx b/src/layouts/client.tsx
index 7010be7..4049f4e 100644
--- a/src/layouts/client.tsx
+++ b/src/layouts/client.tsx
@@ -24,6 +24,7 @@ export const ClientLayout: React.FC<ClientLayoutPropType> = ({
         }}
       />
       <Script
+        id='admax-ads'
         type="text/javascript"
         dangerouslySetInnerHTML={{
           __html:
@@ -32,7 +33,6 @@ export const ClientLayout: React.FC<ClientLayoutPropType> = ({
       />
       <Script
         type="text/javascript"
-        charSet="utf-8"
         src="https://adm.shinobi.jp/st/t.js"
         async
       />
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6fd6c55..62edef8 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import '../../styles/global.scss';
 import type { AppProps } from 'next/app';
 
diff --git a/src/pages/admin/[uuid].tsx b/src/pages/admin/[uuid].tsx
index f7f0733..32e29d2 100644
--- a/src/pages/admin/[uuid].tsx
+++ b/src/pages/admin/[uuid].tsx
@@ -2,8 +2,8 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
-import { LoginForm, Editor, Loader } from '../../components';
-import { isAuthenticatedState } from '../../atoms/authAtom';
+import { LoginForm, Editor, Loader } from '#src/components';
+import { isAuthenticatedState } from '#src/atoms/authAtom';
 
 const CreateBlogPage = () => {
   const isAuthed = useRecoilValue(isAuthenticatedState);
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index 8679ef2..f9dbbb5 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -1,7 +1,7 @@
 import { useRecoilValue } from 'recoil';
 
-import { isAuthenticatedState } from '../../atoms/authAtom';
-import { LoginForm, DashBoard } from '../../components';
+import { isAuthenticatedState } from '#src/atoms/authAtom';
+import { LoginForm, DashBoard } from '#src/components';
 
 const LoginPage = () => {
   const isAuthed = useRecoilValue(isAuthenticatedState);
diff --git a/src/pages/blogs/[uuid].tsx b/src/pages/blogs/[uuid].tsx
index 8495c6c..42dd3e3 100644
--- a/src/pages/blogs/[uuid].tsx
+++ b/src/pages/blogs/[uuid].tsx
@@ -1,26 +1,27 @@
-import type { NextPage } from 'next';
-
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import type { Blog } from '#src/types';
+import type { GetServerSideProps, NextPage } from 'next';
 
 import { BlogDetail } from '#src/components';
 import { ClientLayout } from '#src/layouts/client';
+import { fetchBlog } from '#src/utils/api/blog';
 
-const BlogDetailPage: NextPage = () => {
-  const router = useRouter();
-  const [uuid, setUuid] = useState<string | undefined>(undefined);
-  useEffect(() => {
-    if (router.isReady) {
-      const uuid = router.query.uuid as string;
-      setUuid(uuid);
-    }
-  }, [router]);
-
-  return (
-    <ClientLayout isAdsExist>
-      <>{uuid && <BlogDetail uuid={uuid} />}</>
-    </ClientLayout>
-  );
+const BlogDetailPage: NextPage<{ blog: Blog }> = ({ blog }) => {
+    return (
+        <ClientLayout isAdsExist>
+            <BlogDetail blog={blog} />
+        </ClientLayout>
+    );
 };
 
 export default BlogDetailPage;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+    try {
+        const blog = await fetchBlog(context.query.uuid as string);
+        return {
+            props: { blog },
+        };
+    } catch (error) {
+        return { notFound: true };
+    }
+};
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index 7cca570..a9a834d 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -1,23 +1,32 @@
-import type { NextPage } from 'next';
+import type { GetServerSideProps, NextPage } from 'next';
 
 import Head from 'next/head';
 
 import { BlogList } from '#src/components';
 import { ClientLayout } from '#src/layouts/client';
+import { fetchBlogList } from '#src/utils/api/blog';
+import { Blog } from '#src/types';
 
-const BlogListPage: NextPage = () => {
+const BlogListPage: NextPage<{ blogs: Blog[] }> = ({ blogs }) => {
   return (
     <>
       <Head>
         <title>ブログ一覧</title>
-        <meta name="description" content="The list of all blogs" />
+        <meta name="description" content="List of all blogs" />
       </Head>
 
       <ClientLayout isAdsExist>
-        <BlogList />
+        <BlogList blogs={blogs}/>
       </ClientLayout>
     </>
   );
 };
 
 export default BlogListPage;
+
+export const getServerSideProps: GetServerSideProps = async () => {
+  const blogs = await fetchBlogList();
+  return {
+    props: { blogs },
+  };
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 26ba416..d5f50fb 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -3,7 +3,7 @@ import type { NextPage } from 'next';
 
 import Head from 'next/head';
 
-import { SelfIntroduction } from '../components';
+import { SelfIntroduction } from '#src/components';
 
 const HomePage: NextPage = () => {
   return (
diff --git a/src/utils/backendApi.ts b/src/utils/backendApi.ts
deleted file mode 100644
index 372ac8f..0000000
--- a/src/utils/backendApi.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { ContactContentType } from '#src/components/SelfIntroduction/ContactForm';
-import type { Blog, Category, User } from '#src/types';
-
-import axios, { AxiosResponse } from 'axios';
-
-const BACKEND_ORIGIN = process.env.NEXT_PUBLIC_BACKEND_ORIGIN;
-
-const axiosWithCredentials = axios.create({
-  withCredentials: true,
-});
-
-export async function adminLogin(userData: User) {
-  const REQUEST_URL = new URL('/api/admin/login/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse = await axiosWithCredentials.post(
-    REQUEST_URL,
-    userData,
-  );
-  return response;
-}
-
-export async function adminVerifyTokens() {
-  const REQUEST_URL = new URL('/api/admin/tokens/verify/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse = await axiosWithCredentials.post(REQUEST_URL);
-  return response;
-}
-
-export async function adminPostBlog(blog: Blog) {
-  const REQUEST_URL = new URL('/api/admin/blogs/post/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse = await axiosWithCredentials.post(
-    REQUEST_URL,
-    blog,
-  );
-  return response;
-}
-
-export async function adminPostCategory(category: Category) {
-  const REQUEST_URL = new URL('/api/admin/categories/post/', BACKEND_ORIGIN)
-    .href;
-  const response: AxiosResponse = await axiosWithCredentials.post(
-    REQUEST_URL,
-    category,
-  );
-  return response;
-}
-
-export async function fetchBlogList(onlyPublished = true) {
-  const REQUEST_URL = onlyPublished
-    ? new URL('/api/blogs/', BACKEND_ORIGIN).href
-    : new URL('/api/admin/blogs/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse<Blog[]> = await axiosWithCredentials.get(
-    REQUEST_URL,
-  );
-  const blogList = response.data.sort((a, b) => b.updated_at - a.updated_at);
-  return blogList;
-}
-
-export async function fetchCategories() {
-  const REQUEST_URL = new URL('/api/categories/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse<Category[]> = await axios.get(REQUEST_URL);
-  const categoryList = response.data;
-  categoryList.forEach((value) => {
-    value.key = Number(value.key);
-  });
-  return categoryList;
-}
-
-export async function postContactForm(content: ContactContentType) {
-  const REQUEST_URL = new URL('/api/contact-form/', BACKEND_ORIGIN).href;
-  const response: AxiosResponse = await axios.post(REQUEST_URL, content);
-  return response.status;
-}
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index ec4b2ff..f0b7e3b 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 
-import { fetchBlogList, fetchCategories } from '#src/utils/backendApi';
+import { fetchBlogList, fetchCategories } from '#src/utils/api/blog';
 
 export const useBlogListState = (onlyPublished = true) => {
   return useSWR<Blog[], Error>('blogList', () => fetchBlogList(onlyPublished));
@@ -17,10 +17,10 @@ export const useCategoriesState = () => {
 
 export const useCurrentAbsUrl = () => {
   const router = useRouter();
-  const { origin } = nextAbsoluteUrl();
   const [currentUrl, setCurrentUrl] = useState<string>('');
   useEffect(() => {
+    const { origin } = nextAbsoluteUrl();
     setCurrentUrl(new URL(router.asPath, origin).href);
-  }, [router, origin]);
+  }, [router]);
   return currentUrl;
 };

From 3ee4241d53613bb877834e4e07019376425c2e7b Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Wed, 28 Sep 2022 23:01:36 +0900
Subject: [PATCH 3/8] add lint

---
 .eslintrc.json |  1 +
 .prettierrc    | 13 +++++++------
 tsconfig.json  |  3 ++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 6ccc92e..a841de2 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -16,6 +16,7 @@
     "no-var": "error",
     "prefer-const": "error",
     "no-console": "warn",
+    "no-restricted-imports": ["error", {"patterns": ["../"]}],
     "@typescript-eslint/no-non-null-assertion": "off",
     "@typescript-eslint/no-misused-promises": [
       "error",
diff --git a/.prettierrc b/.prettierrc
index 0c6bbd6..85aa1e7 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,7 +1,8 @@
 {
-    "semi": true,
-    "trailingComma": "all",
-    "singleQuote": true,
-    "jsxSingleQuote": false,
-    "bracketSameLine": false
-  }
\ No newline at end of file
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSameLine": false,
+  "tabWidth": 4
+}
diff --git a/tsconfig.json b/tsconfig.json
index 9a888df..b885405 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,8 @@
     "incremental": true,
     "baseUrl": "./",
     "paths": {
-      "#src/*": ["src/*"]
+      "#src/*": ["src/*"],
+      "#/*": ["./*"],
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "./src/*"],

From 9f5f7ad417ff4a0d7c3e5d80fb0c619f21278170 Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Wed, 28 Sep 2022 23:18:56 +0900
Subject: [PATCH 4/8] fmt

---
 src/atoms/authAtom.ts                         |   4 +-
 src/atoms/codeStyleAtom.ts                    |   4 +-
 src/components/BlogDetail/BlogIndex.tsx       | 135 +++---
 src/components/BlogDetail/index.tsx           |  68 +--
 src/components/BlogList/index.tsx             |  74 ++--
 src/components/DashBoard/BlogTable.tsx        | 374 ++++++++--------
 src/components/DashBoard/index.tsx            |  68 +--
 src/components/Editor/AddCategoryModal.tsx    | 148 +++----
 src/components/Editor/EditorBase.tsx          | 176 ++++----
 src/components/Editor/MarkdownEditor.tsx      | 162 +++----
 src/components/Editor/MetaDataEditor.tsx      | 404 +++++++++---------
 src/components/Editor/contexts.ts             |   6 +-
 src/components/Editor/index.tsx               |  38 +-
 src/components/Editor/md-editor.module.scss   |  12 +-
 src/components/Footer/index.tsx               |  22 +-
 src/components/Icons/index.tsx                |  54 +--
 src/components/Loader/index.tsx               |  16 +-
 src/components/LoginForm/index.tsx            |  93 ++--
 src/components/MarkdownView/CodeContainer.tsx | 160 +++----
 src/components/MarkdownView/index.tsx         | 101 ++---
 .../MarkdownView/md-view.module.scss          | 124 +++---
 src/components/Navbar/NavItem.tsx             |  70 +--
 src/components/Navbar/index.tsx               |  66 +--
 .../SelfIntroduction/ContactForm/index.tsx    | 110 ++---
 .../SkillList/CertificationsList.tsx          |  42 +-
 .../SkillList/ProgrammingSkillList.tsx        | 268 ++++++------
 .../SelfIntroduction/SkillList/index.tsx      |  12 +-
 src/components/SelfIntroduction/index.tsx     |  62 +--
 src/components/ShareButtons/index.tsx         | 149 +++----
 src/components/index.ts                       |  32 +-
 src/layouts/client.tsx                        |  75 ++--
 src/pages/_app.tsx                            |  28 +-
 src/pages/admin/[uuid].tsx                    |  26 +-
 src/pages/admin/index.tsx                     |  12 +-
 src/pages/blogs/index.tsx                     |  30 +-
 src/pages/index.tsx                           |  20 +-
 src/styles/index.ts                           |  10 +-
 src/types/index.ts                            |  34 +-
 src/utils/hooks.ts                            |  20 +-
 39 files changed, 1691 insertions(+), 1618 deletions(-)

diff --git a/src/atoms/authAtom.ts b/src/atoms/authAtom.ts
index 6e349af..b80b680 100644
--- a/src/atoms/authAtom.ts
+++ b/src/atoms/authAtom.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
 export const isAuthenticatedState = atom<boolean>({
-  key: 'isAuthenticatedState',
-  default: false,
+    key: 'isAuthenticatedState',
+    default: false,
 });
diff --git a/src/atoms/codeStyleAtom.ts b/src/atoms/codeStyleAtom.ts
index 577927a..cdefa59 100644
--- a/src/atoms/codeStyleAtom.ts
+++ b/src/atoms/codeStyleAtom.ts
@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
 export const isDarkState = atom<boolean>({
-  key: 'isDarkState',
-  default: true,
+    key: 'isDarkState',
+    default: true,
 });
diff --git a/src/components/BlogDetail/BlogIndex.tsx b/src/components/BlogDetail/BlogIndex.tsx
index 4fe236b..0cf5a6f 100644
--- a/src/components/BlogDetail/BlogIndex.tsx
+++ b/src/components/BlogDetail/BlogIndex.tsx
@@ -2,14 +2,14 @@ import Link from 'next/link';
 import { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import {
-  Box,
-  Collapse,
-  IconButton,
-  Link as MuiLink,
-  List,
-  ListItem,
-  Stack,
-  Typography,
+    Box,
+    Collapse,
+    IconButton,
+    Link as MuiLink,
+    List,
+    ListItem,
+    Stack,
+    Typography,
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import ListIcon from '@mui/icons-material/List';
@@ -17,60 +17,69 @@ import ListIcon from '@mui/icons-material/List';
 import { COLORS } from '#src/styles';
 
 export const BlogIndex: React.FC<{ body: string }> = ({ body }) => {
-  const [isHidden, setIsHidden] = useState(true);
-  return (
-    <Box>
-      <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Typography fontSize="24px" color={COLORS.baseColor}>
-          目次
-        </Typography>
-        {isHidden ? (
-          <IconButton onClick={() => setIsHidden(false)}>
-            <ListIcon
-              sx={{
-                fontSize: '40px',
-                color: COLORS.accentDarkColor,
-                cursor: 'pointer',
-              }}
-            />
-          </IconButton>
-        ) : (
-          <IconButton onClick={() => setIsHidden(true)}>
-            <CloseIcon
-              sx={{
-                fontSize: '40px',
-                color: COLORS.accentDarkColor,
-                cursor: 'pointer',
-              }}
-            />
-          </IconButton>
-        )}
-      </Stack>
-      <Collapse in={!isHidden}>
-        <List>
-          <ReactMarkdown
-            allowedElements={['h1']}
-            includeElementIndex
-            components={{
-              h1: ({ children, node, index }) => (
-                <ListItem dense>
-                  <Link href={`#${node.position!.start.line}`} passHref>
-                    <MuiLink
-                      underline="none"
-                      color={COLORS.baseColor}
-                      fontSize="18px"
+    const [isHidden, setIsHidden] = useState(true);
+    return (
+        <Box>
+            <Stack
+                direction="row"
+                justifyContent="space-between"
+                alignItems="center"
+            >
+                <Typography fontSize="24px" color={COLORS.baseColor}>
+                    目次
+                </Typography>
+                {isHidden ? (
+                    <IconButton onClick={() => setIsHidden(false)}>
+                        <ListIcon
+                            sx={{
+                                fontSize: '40px',
+                                color: COLORS.accentDarkColor,
+                                cursor: 'pointer',
+                            }}
+                        />
+                    </IconButton>
+                ) : (
+                    <IconButton onClick={() => setIsHidden(true)}>
+                        <CloseIcon
+                            sx={{
+                                fontSize: '40px',
+                                color: COLORS.accentDarkColor,
+                                cursor: 'pointer',
+                            }}
+                        />
+                    </IconButton>
+                )}
+            </Stack>
+            <Collapse in={!isHidden}>
+                <List>
+                    <ReactMarkdown
+                        allowedElements={['h1']}
+                        includeElementIndex
+                        components={{
+                            h1: ({ children, node, index }) => (
+                                <ListItem dense>
+                                    <Link
+                                        href={`#${node.position!.start.line}`}
+                                        passHref
+                                    >
+                                        <MuiLink
+                                            underline="none"
+                                            color={COLORS.baseColor}
+                                            fontSize="18px"
+                                        >
+                                            {`${
+                                                index! + 1
+                                            }. ${children.toString()}`}
+                                        </MuiLink>
+                                    </Link>
+                                </ListItem>
+                            ),
+                        }}
                     >
-                      {`${index! + 1}. ${children.toString()}`}
-                    </MuiLink>
-                  </Link>
-                </ListItem>
-              ),
-            }}
-          >
-            {body}
-          </ReactMarkdown>
-        </List>
-      </Collapse>
-    </Box>
-  );
+                        {body}
+                    </ReactMarkdown>
+                </List>
+            </Collapse>
+        </Box>
+    );
 };
diff --git a/src/components/BlogDetail/index.tsx b/src/components/BlogDetail/index.tsx
index f4759ef..c3806a4 100644
--- a/src/components/BlogDetail/index.tsx
+++ b/src/components/BlogDetail/index.tsx
@@ -7,38 +7,38 @@ import { BlogIndex } from './BlogIndex';
 import { Blog } from '#src/types';
 
 export const BlogDetail: React.FC<{ blog: Blog }> = ({ blog }) => {
-  return (
-    <>
-      <Head>
-        <title>{blog.title}</title>
-        <meta name="description" content={blog.description} />
-      </Head>
-
-      <Container>
-        <ShareButtons />
-
-        <Box paddingTop={3} textAlign="center">
-          <Typography variant="h2">{blog.title}</Typography>
-          <Typography variant="h5">{blog.sub_title}</Typography>
-        </Box>
-
-        <Box textAlign="right">
-          <Typography variant="caption" display="block">
-            作成日時:&nbsp;
-            {dayjs.unix(blog.created_at).format('YYYY年MM月DD日')}
-          </Typography>
-          <Typography variant="caption" display="block">
-            更新日時:&nbsp;
-            {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
-          </Typography>
-        </Box>
-
-        <BlogIndex body={blog.content} />
-
-        <Divider sx={{ borderWidth: 'thin' }} />
-
-        <MarkdownView body={blog.content} />
-      </Container>
-    </>
-  );
+    return (
+        <>
+            <Head>
+                <title>{blog.title}</title>
+                <meta name="description" content={blog.description} />
+            </Head>
+
+            <Container>
+                <ShareButtons />
+
+                <Box paddingTop={3} textAlign="center">
+                    <Typography variant="h2">{blog.title}</Typography>
+                    <Typography variant="h5">{blog.sub_title}</Typography>
+                </Box>
+
+                <Box textAlign="right">
+                    <Typography variant="caption" display="block">
+                        作成日時:&nbsp;
+                        {dayjs.unix(blog.created_at).format('YYYY年MM月DD日')}
+                    </Typography>
+                    <Typography variant="caption" display="block">
+                        更新日時:&nbsp;
+                        {dayjs.unix(blog.updated_at).format('YYYY年MM月DD日')}
+                    </Typography>
+                </Box>
+
+                <BlogIndex body={blog.content} />
+
+                <Divider sx={{ borderWidth: 'thin' }} />
+
+                <MarkdownView body={blog.content} />
+            </Container>
+        </>
+    );
 };
diff --git a/src/components/BlogList/index.tsx b/src/components/BlogList/index.tsx
index cc3c096..3fae5ef 100644
--- a/src/components/BlogList/index.tsx
+++ b/src/components/BlogList/index.tsx
@@ -9,45 +9,45 @@ import { Loader } from '#src/components';
 
 // ブログ一覧
 export const BlogList: React.FC<{ blogs: Blog[] }> = ({ blogs }) => {
-  // 全カテゴリーデータ
-  const { data: categoryData } = useCategoriesState();
+    // 全カテゴリーデータ
+    const { data: categoryData } = useCategoriesState();
 
-  // 表示されるブログ数
-  const [blogsDisplay, setBlogDisplay] = useState(10);
+    // 表示されるブログ数
+    const [blogsDisplay, setBlogDisplay] = useState(10);
 
-  // 参照と参照先が画面内に表示されているか
-  // 表示されたらブログを追加表示
-  const [ref, isDisplayed] = useInView();
-  const LOAD_BLOG_COUNT = 10
-  useEffect(() => {
-    if (isDisplayed) {
-      setBlogDisplay((prev) => prev + LOAD_BLOG_COUNT);
-    }
-  }, [isDisplayed]);
+    // 参照と参照先が画面内に表示されているか
+    // 表示されたらブログを追加表示
+    const [ref, isDisplayed] = useInView();
+    const LOAD_BLOG_COUNT = 10;
+    useEffect(() => {
+        if (isDisplayed) {
+            setBlogDisplay((prev) => prev + LOAD_BLOG_COUNT);
+        }
+    }, [isDisplayed]);
 
-  return (
-    <Container sx={{ flex: 1 }}>
-      {/* ブログ一覧 */}
-      <Stack gap={4}>
-        {blogs.slice(0, blogsDisplay).map((blogData) => (
-          <BlogListItem
-            blog={blogData}
-            categoryData={categoryData}
-            key={blogData.uuid}
-          />
-        ))}
-      </Stack>
+    return (
+        <Container sx={{ flex: 1 }}>
+            {/* ブログ一覧 */}
+            <Stack gap={4}>
+                {blogs.slice(0, blogsDisplay).map((blogData) => (
+                    <BlogListItem
+                        blog={blogData}
+                        categoryData={categoryData}
+                        key={blogData.uuid}
+                    />
+                ))}
+            </Stack>
 
-      {/* 無限スクロール */}
-      {blogsDisplay >= (blogs.length || 0) ? (
-        <Typography textAlign="center" variant="h4" pt={5}>
-          No More Contents...
-        </Typography>
-      ) : (
-        <Box ref={ref}>
-          <Loader />
-        </Box>
-      )}
-    </Container>
-  );
+            {/* 無限スクロール */}
+            {blogsDisplay >= (blogs.length || 0) ? (
+                <Typography textAlign="center" variant="h4" pt={5}>
+                    No More Contents...
+                </Typography>
+            ) : (
+                <Box ref={ref}>
+                    <Loader />
+                </Box>
+            )}
+        </Container>
+    );
 };
diff --git a/src/components/DashBoard/BlogTable.tsx b/src/components/DashBoard/BlogTable.tsx
index ceb1762..cb64fe6 100644
--- a/src/components/DashBoard/BlogTable.tsx
+++ b/src/components/DashBoard/BlogTable.tsx
@@ -4,28 +4,28 @@ import dayjs from 'dayjs';
 import Link from 'next/link';
 import { useState } from 'react';
 import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TableSortLabel,
-  Paper,
+    Box,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TablePagination,
+    TableRow,
+    TableSortLabel,
+    Paper,
 } from '@mui/material';
 
 // Array.prototype.sort(compareFn?)の引数の関数生成関数
 // ソートの仕組みを制定
 function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
+    if (b[orderBy] < a[orderBy]) {
+        return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+        return 1;
+    }
+    return 0;
 }
 
 // 降順、昇順のUnion型
@@ -33,190 +33,206 @@ type Order = 'asc' | 'desc';
 
 // Array.prototype.sort(compareFn?)の引数用関数
 function getComparator<Key extends keyof BlogTableData>(
-  order: Order,
-  orderBy: Key,
+    order: Order,
+    orderBy: Key,
 ): (
-  a: { [key in Key]: number | string | Date | boolean },
-  b: { [key in Key]: number | string | Date | boolean },
+    a: { [key in Key]: number | string | Date | boolean },
+    b: { [key in Key]: number | string | Date | boolean },
 ) => number {
-  return order === 'desc'
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy);
 }
 
 // tableのヘッダー用の型
 interface HeadCell {
-  id: keyof BlogTableData;
-  label: string;
+    id: keyof BlogTableData;
+    label: string;
 }
 
 // tableヘッダーの生成
 const headCells: readonly HeadCell[] = [
-  {
-    id: 'title',
-    label: 'Titles',
-  },
-  {
-    id: 'created_at',
-    label: '作成日時',
-  },
-  {
-    id: 'updated_at',
-    label: '更新日時',
-  },
+    {
+        id: 'title',
+        label: 'Titles',
+    },
+    {
+        id: 'created_at',
+        label: '作成日時',
+    },
+    {
+        id: 'updated_at',
+        label: '更新日時',
+    },
 ];
 
 // tableの機能の型(tableヘッダーと組み合わせる)
 interface EnhancedTableProps {
-  onRequestSort: (
-    event: React.MouseEvent,
-    property: keyof BlogTableData,
-  ) => void;
-  order: Order;
-  orderBy: string;
-  rowCount: number;
+    onRequestSort: (
+        event: React.MouseEvent,
+        property: keyof BlogTableData,
+    ) => void;
+    order: Order;
+    orderBy: string;
+    rowCount: number;
 }
 
 // 機能付きtableヘッダーのコンポーネント
 const EnhancedTableHead: React.FC<EnhancedTableProps> = (
-  props: EnhancedTableProps,
+    props: EnhancedTableProps,
 ) => {
-  const { order, orderBy, onRequestSort } = props;
-
-  // TableSortLabelがclickされたらonRequestSortが呼ばれる
-  const createSortHandler =
-    (property: keyof BlogTableData) => (event: React.MouseEvent) => {
-      onRequestSort(event, property);
-    };
-
-  return (
-    <TableHead>
-      <TableRow>
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id}
-            align="left"
-            sortDirection={orderBy === headCell.id ? order : false}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : 'asc'}
-              onClick={createSortHandler(headCell.id)}
-            >
-              {headCell.label}
-            </TableSortLabel>
-          </TableCell>
-        ))}
-      </TableRow>
-    </TableHead>
-  );
+    const { order, orderBy, onRequestSort } = props;
+
+    // TableSortLabelがclickされたらonRequestSortが呼ばれる
+    const createSortHandler =
+        (property: keyof BlogTableData) => (event: React.MouseEvent) => {
+            onRequestSort(event, property);
+        };
+
+    return (
+        <TableHead>
+            <TableRow>
+                {headCells.map((headCell) => (
+                    <TableCell
+                        key={headCell.id}
+                        align="left"
+                        sortDirection={orderBy === headCell.id ? order : false}
+                    >
+                        <TableSortLabel
+                            active={orderBy === headCell.id}
+                            direction={orderBy === headCell.id ? order : 'asc'}
+                            onClick={createSortHandler(headCell.id)}
+                        >
+                            {headCell.label}
+                        </TableSortLabel>
+                    </TableCell>
+                ))}
+            </TableRow>
+        </TableHead>
+    );
 };
 
 export const BlogTable: React.FC<{ rows: BlogTableData[] }> = ({
-  rows,
+    rows,
 }: {
-  rows: BlogTableData[];
+    rows: BlogTableData[];
 }) => {
-  // 1ページあたりの行数一覧
-  const ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
-  // 降順、昇順の指定
-  const [order, setOrder] = useState<Order>('desc');
-  // ソート列
-  const [orderBy, setOrderBy] = useState<keyof BlogTableData>('updated_at');
-  // 現在のページ
-  const [currentPage, setCurrentPage] = useState(0);
-  // 1ページあたりの行数
-  const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]);
-
-  const handleRequestSort = (
-    event: React.MouseEvent,
-    property: keyof BlogTableData,
-  ) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setCurrentPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setCurrentPage(0);
-  };
-
-  // 空白である行数
-  const emptyRows =
-    currentPage > 0
-      ? Math.max(0, (1 + currentPage) * rowsPerPage - rows.length)
-      : 0;
-
-  return (
-    <Box sx={{ width: '100%' }}>
-      <Paper sx={{ width: '100%', mb: 2 }}>
-        <TableContainer>
-          <Table
-            sx={{ minWidth: 750 }}
-            aria-labelledby="tableTitle"
-            size="medium"
-          >
-            <EnhancedTableHead
-              order={order}
-              orderBy={orderBy}
-              onRequestSort={handleRequestSort}
-              rowCount={rows.length}
-            />
-            <TableBody>
-              {rows
-                .slice()
-                .sort(getComparator(order, orderBy))
-                .slice(
-                  currentPage * rowsPerPage,
-                  currentPage * rowsPerPage + rowsPerPage,
-                )
-                .map((row, index) => {
-                  const labelId = `enhanced-table-checkbox-${index}`;
-
-                  return (
-                    <TableRow hover tabIndex={-1} key={index}>
-                      <TableCell id={labelId}>
-                        <Link href={`/admin/${row.uuid}`}>
-                          <a style={{ fontSize: 'large' }}>{row.title}</a>
-                        </Link>
-                      </TableCell>
-                      <TableCell align="left">
-                        {dayjs.unix(row.updated_at).format('YYYY年MM月DD日')}
-                      </TableCell>
-                      <TableCell align="left">
-                        {dayjs.unix(row.created_at).format('YYYY年MM月DD日')}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              {emptyRows > 0 && (
-                <TableRow
-                  style={{
-                    height: 53 * emptyRows,
-                  }}
-                ></TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        <TablePagination
-          rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
-          component="div"
-          count={rows.length}
-          rowsPerPage={rowsPerPage}
-          page={currentPage}
-          onPageChange={handleChangePage}
-          onRowsPerPageChange={handleChangeRowsPerPage}
-          showFirstButton={true}
-        />
-      </Paper>
-    </Box>
-  );
+    // 1ページあたりの行数一覧
+    const ROWS_PER_PAGE_OPTIONS = [10, 20, 50, 100];
+    // 降順、昇順の指定
+    const [order, setOrder] = useState<Order>('desc');
+    // ソート列
+    const [orderBy, setOrderBy] = useState<keyof BlogTableData>('updated_at');
+    // 現在のページ
+    const [currentPage, setCurrentPage] = useState(0);
+    // 1ページあたりの行数
+    const [rowsPerPage, setRowsPerPage] = useState(ROWS_PER_PAGE_OPTIONS[0]);
+
+    const handleRequestSort = (
+        event: React.MouseEvent,
+        property: keyof BlogTableData,
+    ) => {
+        const isAsc = orderBy === property && order === 'asc';
+        setOrder(isAsc ? 'desc' : 'asc');
+        setOrderBy(property);
+    };
+
+    const handleChangePage = (event: unknown, newPage: number) => {
+        setCurrentPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (
+        event: React.ChangeEvent<HTMLInputElement>,
+    ) => {
+        setRowsPerPage(parseInt(event.target.value, 10));
+        setCurrentPage(0);
+    };
+
+    // 空白である行数
+    const emptyRows =
+        currentPage > 0
+            ? Math.max(0, (1 + currentPage) * rowsPerPage - rows.length)
+            : 0;
+
+    return (
+        <Box sx={{ width: '100%' }}>
+            <Paper sx={{ width: '100%', mb: 2 }}>
+                <TableContainer>
+                    <Table
+                        sx={{ minWidth: 750 }}
+                        aria-labelledby="tableTitle"
+                        size="medium"
+                    >
+                        <EnhancedTableHead
+                            order={order}
+                            orderBy={orderBy}
+                            onRequestSort={handleRequestSort}
+                            rowCount={rows.length}
+                        />
+                        <TableBody>
+                            {rows
+                                .slice()
+                                .sort(getComparator(order, orderBy))
+                                .slice(
+                                    currentPage * rowsPerPage,
+                                    currentPage * rowsPerPage + rowsPerPage,
+                                )
+                                .map((row, index) => {
+                                    const labelId = `enhanced-table-checkbox-${index}`;
+
+                                    return (
+                                        <TableRow
+                                            hover
+                                            tabIndex={-1}
+                                            key={index}
+                                        >
+                                            <TableCell id={labelId}>
+                                                <Link
+                                                    href={`/admin/${row.uuid}`}
+                                                >
+                                                    <a
+                                                        style={{
+                                                            fontSize: 'large',
+                                                        }}
+                                                    >
+                                                        {row.title}
+                                                    </a>
+                                                </Link>
+                                            </TableCell>
+                                            <TableCell align="left">
+                                                {dayjs
+                                                    .unix(row.updated_at)
+                                                    .format('YYYY年MM月DD日')}
+                                            </TableCell>
+                                            <TableCell align="left">
+                                                {dayjs
+                                                    .unix(row.created_at)
+                                                    .format('YYYY年MM月DD日')}
+                                            </TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            {emptyRows > 0 && (
+                                <TableRow
+                                    style={{
+                                        height: 53 * emptyRows,
+                                    }}
+                                ></TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={ROWS_PER_PAGE_OPTIONS}
+                    component="div"
+                    count={rows.length}
+                    rowsPerPage={rowsPerPage}
+                    page={currentPage}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                    showFirstButton={true}
+                />
+            </Paper>
+        </Box>
+    );
 };
diff --git a/src/components/DashBoard/index.tsx b/src/components/DashBoard/index.tsx
index b605576..465dbd7 100644
--- a/src/components/DashBoard/index.tsx
+++ b/src/components/DashBoard/index.tsx
@@ -9,44 +9,44 @@ import { useBlogListState } from '#src/utils/hooks';
 import { BlogTable } from './BlogTable';
 
 export const DashBoard: React.FC = () => {
-  const { data, error } = useBlogListState(false);
+    const { data, error } = useBlogListState(false);
 
-  const rows: BlogTableData[] = data || [];
+    const rows: BlogTableData[] = data || [];
 
-  function getNewUuid() {
-    let uuidCreated = uuid1();
-    while (rows.findIndex((blog) => blog.uuid === uuidCreated) !== -1) {
-      uuidCreated = uuid1();
+    function getNewUuid() {
+        let uuidCreated = uuid1();
+        while (rows.findIndex((blog) => blog.uuid === uuidCreated) !== -1) {
+            uuidCreated = uuid1();
+        }
+        return uuidCreated;
     }
-    return uuidCreated;
-  }
 
-  if (error) {
+    if (error) {
+        return (
+            <Snackbar
+                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+                open={error ? true : false}
+            >
+                <Alert variant="filled" severity="error" sx={{ width: '100%' }}>
+                    読み込みに失敗しました。
+                </Alert>
+            </Snackbar>
+        );
+    }
+    if (!data) {
+        return <Loader />;
+    }
     return (
-      <Snackbar
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        open={error ? true : false}
-      >
-        <Alert variant="filled" severity="error" sx={{ width: '100%' }}>
-          読み込みに失敗しました。
-        </Alert>
-      </Snackbar>
+        <>
+            <BlogTable rows={rows} />
+            <Fab
+                href={`admin/${getNewUuid()}`}
+                size="large"
+                color="primary"
+                sx={{ left: 40, bottom: 30, position: 'fixed' }}
+            >
+                <AddIcon color="inherit" />
+            </Fab>
+        </>
     );
-  }
-  if (!data) {
-    return <Loader />;
-  }
-  return (
-    <>
-      <BlogTable rows={rows} />
-      <Fab
-        href={`admin/${getNewUuid()}`}
-        size="large"
-        color="primary"
-        sx={{ left: 40, bottom: 30, position: 'fixed' }}
-      >
-        <AddIcon color="inherit" />
-      </Fab>
-    </>
-  );
 };
diff --git a/src/components/Editor/AddCategoryModal.tsx b/src/components/Editor/AddCategoryModal.tsx
index e5a84af..a7634c7 100644
--- a/src/components/Editor/AddCategoryModal.tsx
+++ b/src/components/Editor/AddCategoryModal.tsx
@@ -2,88 +2,90 @@ import React, { RefObject, useRef, useState } from 'react';
 import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
 import {
-  Box,
-  Button,
-  IconButton,
-  Modal,
-  Paper,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography,
+    Box,
+    Button,
+    IconButton,
+    Modal,
+    Paper,
+    Stack,
+    TextField,
+    Tooltip,
+    Typography,
 } from '@mui/material';
 
 import { adminPostCategory } from '#src/utils/api/auth';
 
 // Categoryを追加するためのモーダル
 export const AddCategoryModal: React.FC = () => {
-  // Modalが表示されているか
-  const [isDisplayed, setIsDisplayed] = useState(false);
+    // Modalが表示されているか
+    const [isDisplayed, setIsDisplayed] = useState(false);
 
-  // inputの参照
-  const ref = useRef(null) as RefObject<HTMLInputElement>;
-  return (
-    <>
-      <IconButton
-        onClick={() => {
-          setIsDisplayed((prev) => !prev);
-        }}
-      >
-        <AddIcon />
-      </IconButton>
+    // inputの参照
+    const ref = useRef(null) as RefObject<HTMLInputElement>;
+    return (
+        <>
+            <IconButton
+                onClick={() => {
+                    setIsDisplayed((prev) => !prev);
+                }}
+            >
+                <AddIcon />
+            </IconButton>
 
-      <Modal
-        open={isDisplayed}
-        onClose={(e, r) => {
-          if (r !== 'backdropClick') {
-            setIsDisplayed(false);
-          }
-        }}
-      >
-        <Paper
-          sx={{
-            position: 'absolute',
-            width: '50%',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            padding: '20px',
-          }}
-        >
-          <Stack>
-            <Box sx={{ margin: '0 0 0 auto' }}>
-              <Tooltip title="Close">
-                <IconButton onClick={() => setIsDisplayed(false)}>
-                  <CloseIcon />
-                </IconButton>
-              </Tooltip>
-            </Box>
+            <Modal
+                open={isDisplayed}
+                onClose={(e, r) => {
+                    if (r !== 'backdropClick') {
+                        setIsDisplayed(false);
+                    }
+                }}
+            >
+                <Paper
+                    sx={{
+                        position: 'absolute',
+                        width: '50%',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        padding: '20px',
+                    }}
+                >
+                    <Stack>
+                        <Box sx={{ margin: '0 0 0 auto' }}>
+                            <Tooltip title="Close">
+                                <IconButton
+                                    onClick={() => setIsDisplayed(false)}
+                                >
+                                    <CloseIcon />
+                                </IconButton>
+                            </Tooltip>
+                        </Box>
 
-            <Typography variant="h4">Add Categories</Typography>
+                        <Typography variant="h4">Add Categories</Typography>
 
-            <TextField
-              autoFocus
-              margin="normal"
-              label="New Category"
-              type="text"
-              placeholder="Python"
-              inputRef={ref}
-            />
+                        <TextField
+                            autoFocus
+                            margin="normal"
+                            label="New Category"
+                            type="text"
+                            placeholder="Python"
+                            inputRef={ref}
+                        />
 
-            <Button
-              variant="contained"
-              onClick={async () => {
-                await adminPostCategory({
-                  label: ref.current?.value.trim() || '',
-                  key: -1,
-                });
-              }}
-            >
-              add
-            </Button>
-          </Stack>
-        </Paper>
-      </Modal>
-    </>
-  );
+                        <Button
+                            variant="contained"
+                            onClick={async () => {
+                                await adminPostCategory({
+                                    label: ref.current?.value.trim() || '',
+                                    key: -1,
+                                });
+                            }}
+                        >
+                            add
+                        </Button>
+                    </Stack>
+                </Paper>
+            </Modal>
+        </>
+    );
 };
diff --git a/src/components/Editor/EditorBase.tsx b/src/components/Editor/EditorBase.tsx
index e0f7e1e..b6e816f 100644
--- a/src/components/Editor/EditorBase.tsx
+++ b/src/components/Editor/EditorBase.tsx
@@ -10,106 +10,108 @@ import { MarkdownEditor } from './MarkdownEditor';
 import { MetaDataEditor } from './MetaDataEditor';
 
 type TabPanelProps = {
-  children: React.ReactNode;
-  index: number;
-  focus: number;
-  sx?: SxProps<Theme>;
+    children: React.ReactNode;
+    index: number;
+    focus: number;
+    sx?: SxProps<Theme>;
 };
 
 const TabPanel: React.FC<TabPanelProps> = ({
-  children,
-  index,
-  focus,
-  sx = {},
+    children,
+    index,
+    focus,
+    sx = {},
 }: TabPanelProps) => {
-  return (
-    <div hidden={focus !== index} id={`blog-tabpanel-${index}`}>
-      {focus === index && <Box sx={sx}>{children}</Box>}
-    </div>
-  );
+    return (
+        <div hidden={focus !== index} id={`blog-tabpanel-${index}`}>
+            {focus === index && <Box sx={sx}>{children}</Box>}
+        </div>
+    );
 };
 
 export const EditorBase: React.FC<{ blogData: Blog }> = ({ blogData }) => {
-  // フォーカスされているタブ
-  const [focus, setfocus] = useState(0);
+    // フォーカスされているタブ
+    const [focus, setfocus] = useState(0);
 
-  // ブログコンテクスト
-  const [blogDataContextValue, setBlogDataContextValue] = useState(blogData);
+    // ブログコンテクスト
+    const [blogDataContextValue, setBlogDataContextValue] = useState(blogData);
 
-  // タブ切り換え
-  const handleTabChange = (event: React.SyntheticEvent, newfocus: number) => {
-    setfocus(newfocus);
-  };
-
-  function a11yProps(index: number) {
-    return {
-      id: `blog-tab-${index}`,
-      'aria-controls': `blog-tabpanel-${index}`,
+    // タブ切り換え
+    const handleTabChange = (event: React.SyntheticEvent, newfocus: number) => {
+        setfocus(newfocus);
     };
-  }
 
-  return (
-    <Box
-      sx={{
-        width: '100%',
-        height: '100vh',
-        backgroundColor: COLORS.whiteColor,
-      }}
-    >
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs
-          variant="fullWidth"
-          value={focus}
-          onChange={handleTabChange}
-          TabIndicatorProps={{ style: { background: COLORS.baseColor } }}
-          aria-label="Editor tabs"
+    function a11yProps(index: number) {
+        return {
+            id: `blog-tab-${index}`,
+            'aria-controls': `blog-tabpanel-${index}`,
+        };
+    }
+
+    return (
+        <Box
+            sx={{
+                width: '100%',
+                height: '100vh',
+                backgroundColor: COLORS.whiteColor,
+            }}
         >
-          <Tab
-            label="Editor"
-            sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
-            {...a11yProps(0)}
-          />
-          <Tab
-            label="Preview"
-            sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
-            {...a11yProps(1)}
-          />
-          <Tab
-            label="Meta"
-            sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
-            {...a11yProps(2)}
-          />
-        </Tabs>
-      </Box>
+            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+                <Tabs
+                    variant="fullWidth"
+                    value={focus}
+                    onChange={handleTabChange}
+                    TabIndicatorProps={{
+                        style: { background: COLORS.baseColor },
+                    }}
+                    aria-label="Editor tabs"
+                >
+                    <Tab
+                        label="Editor"
+                        sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
+                        {...a11yProps(0)}
+                    />
+                    <Tab
+                        label="Preview"
+                        sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
+                        {...a11yProps(1)}
+                    />
+                    <Tab
+                        label="Meta"
+                        sx={{ '&.Mui-selected': { color: COLORS.baseColor } }}
+                        {...a11yProps(2)}
+                    />
+                </Tabs>
+            </Box>
 
-      <blogDataContext.Provider
-        value={{
-          blogDataContextValue,
-          setBlogDataContextValue,
-        }}
-      >
-        <TabPanel focus={focus} index={0}>
-          <Container>
-            <MarkdownEditor />
-          </Container>
-        </TabPanel>
+            <blogDataContext.Provider
+                value={{
+                    blogDataContextValue,
+                    setBlogDataContextValue,
+                }}
+            >
+                <TabPanel focus={focus} index={0}>
+                    <Container>
+                        <MarkdownEditor />
+                    </Container>
+                </TabPanel>
 
-        <TabPanel
-          focus={focus}
-          index={1}
-          sx={{ backgroundColor: COLORS.mainColor }}
-        >
-          <Container>
-            <MarkdownView body={blogDataContextValue.content} />
-          </Container>
-        </TabPanel>
+                <TabPanel
+                    focus={focus}
+                    index={1}
+                    sx={{ backgroundColor: COLORS.mainColor }}
+                >
+                    <Container>
+                        <MarkdownView body={blogDataContextValue.content} />
+                    </Container>
+                </TabPanel>
 
-        <TabPanel focus={focus} index={2}>
-          <Container>
-            <MetaDataEditor />
-          </Container>
-        </TabPanel>
-      </blogDataContext.Provider>
-    </Box>
-  );
+                <TabPanel focus={focus} index={2}>
+                    <Container>
+                        <MetaDataEditor />
+                    </Container>
+                </TabPanel>
+            </blogDataContext.Provider>
+        </Box>
+    );
 };
diff --git a/src/components/Editor/MarkdownEditor.tsx b/src/components/Editor/MarkdownEditor.tsx
index 55ad9e4..7c46fca 100644
--- a/src/components/Editor/MarkdownEditor.tsx
+++ b/src/components/Editor/MarkdownEditor.tsx
@@ -7,89 +7,95 @@ import { blogDataContext } from './contexts';
 import { adminPostBlog } from '#src/utils/api/auth';
 
 export const MarkdownEditor: React.FC = () => {
-  // saveされたか
-  const [isSaved, setIsSaved] = useState(false);
+    // saveされたか
+    const [isSaved, setIsSaved] = useState(false);
 
-  // markdown textareaの参照
-  const contentRef = useRef<HTMLTextAreaElement>(null!);
+    // markdown textareaの参照
+    const contentRef = useRef<HTMLTextAreaElement>(null!);
 
-  const blogData = useContext(blogDataContext);
+    const blogData = useContext(blogDataContext);
 
-  // バックエンドへ保存
-  const saveBlogData = async () => {
-    if (blogData) {
-      blogData.setBlogDataContextValue((prev) => {
-        prev.content = contentRef.current.value;
-        return prev;
-      });
-      await adminPostBlog(blogData.blogDataContextValue);
-      setIsSaved(() => true);
-    }
-  };
+    // バックエンドへ保存
+    const saveBlogData = async () => {
+        if (blogData) {
+            blogData.setBlogDataContextValue((prev) => {
+                prev.content = contentRef.current.value;
+                return prev;
+            });
+            await adminPostBlog(blogData.blogDataContextValue);
+            setIsSaved(() => true);
+        }
+    };
 
-  // ショートカットキー
-  const handleShortcutKey = async (e: React.KeyboardEvent) => {
-    // ctrl + sでsave
-    if (e.ctrlKey && e.key === 's') {
-      e.preventDefault();
-      await saveBlogData();
-    }
-    // ctrl + ]でインデント
-    if (e.ctrlKey && e.key === ']') {
-      let cursorPosition = contentRef.current.selectionStart;
-      const cursorRow = contentRef.current.value
-        .substring(0, cursorPosition)
-        .split('\n').length;
-      const bodies = contentRef.current.value.split('\n');
-      bodies[cursorRow - 1] = '  ' + bodies[cursorRow - 1];
-      cursorPosition += 2;
-      contentRef.current.value = bodies.join('\n');
-      contentRef.current.setSelectionRange(cursorPosition, cursorPosition);
-    }
-    // ctrl + [でインデント削除
-    if (e.ctrlKey && e.key === '[') {
-      let cursorPosition = contentRef.current.selectionStart;
-      const cursorRow = contentRef.current.value
-        .substring(0, cursorPosition)
-        .split('\n').length;
-      const bodies = contentRef.current.value.split('\n');
-      if ('  ' === bodies[cursorRow - 1].substring(0, 2)) {
-        bodies[cursorRow - 1] = bodies[cursorRow - 1].substring(2);
-        cursorPosition -= 2;
-      }
-      contentRef.current.value = bodies.join('\n');
-      contentRef.current.setSelectionRange(cursorPosition, cursorPosition);
-    }
-  };
+    // ショートカットキー
+    const handleShortcutKey = async (e: React.KeyboardEvent) => {
+        // ctrl + sでsave
+        if (e.ctrlKey && e.key === 's') {
+            e.preventDefault();
+            await saveBlogData();
+        }
+        // ctrl + ]でインデント
+        if (e.ctrlKey && e.key === ']') {
+            let cursorPosition = contentRef.current.selectionStart;
+            const cursorRow = contentRef.current.value
+                .substring(0, cursorPosition)
+                .split('\n').length;
+            const bodies = contentRef.current.value.split('\n');
+            bodies[cursorRow - 1] = '  ' + bodies[cursorRow - 1];
+            cursorPosition += 2;
+            contentRef.current.value = bodies.join('\n');
+            contentRef.current.setSelectionRange(
+                cursorPosition,
+                cursorPosition,
+            );
+        }
+        // ctrl + [でインデント削除
+        if (e.ctrlKey && e.key === '[') {
+            let cursorPosition = contentRef.current.selectionStart;
+            const cursorRow = contentRef.current.value
+                .substring(0, cursorPosition)
+                .split('\n').length;
+            const bodies = contentRef.current.value.split('\n');
+            if ('  ' === bodies[cursorRow - 1].substring(0, 2)) {
+                bodies[cursorRow - 1] = bodies[cursorRow - 1].substring(2);
+                cursorPosition -= 2;
+            }
+            contentRef.current.value = bodies.join('\n');
+            contentRef.current.setSelectionRange(
+                cursorPosition,
+                cursorPosition,
+            );
+        }
+    };
 
-  return (
-    <Box>
-      <Snackbar
-        open={isSaved}
-        autoHideDuration={6000}
-        onClose={() => setIsSaved(() => false)}
-      >
-        <Alert
-          variant="filled"
-          onClose={() => setIsSaved(() => false)}
-          severity="success"
-        >
-          Saved Successfully!
-        </Alert>
-      </Snackbar>
+    return (
+        <Box>
+            <Snackbar
+                open={isSaved}
+                autoHideDuration={6000}
+                onClose={() => setIsSaved(() => false)}
+            >
+                <Alert
+                    variant="filled"
+                    onClose={() => setIsSaved(() => false)}
+                    severity="success"
+                >
+                    Saved Successfully!
+                </Alert>
+            </Snackbar>
 
-      <TextareaAutosize
-        className={style.mdEditor}
-        maxRows={25}
-        minRows={25}
-        ref={contentRef}
-        defaultValue={blogData?.blogDataContextValue.content}
-        onKeyDown={handleShortcutKey}
-      />
+            <TextareaAutosize
+                className={style.mdEditor}
+                maxRows={25}
+                minRows={25}
+                ref={contentRef}
+                defaultValue={blogData?.blogDataContextValue.content}
+                onKeyDown={handleShortcutKey}
+            />
 
-      <Button onClick={saveBlogData} variant="contained" color="error">
-        save
-      </Button>
-    </Box>
-  );
+            <Button onClick={saveBlogData} variant="contained" color="error">
+                save
+            </Button>
+        </Box>
+    );
 };
diff --git a/src/components/Editor/MetaDataEditor.tsx b/src/components/Editor/MetaDataEditor.tsx
index 5269320..3a1019e 100644
--- a/src/components/Editor/MetaDataEditor.tsx
+++ b/src/components/Editor/MetaDataEditor.tsx
@@ -4,18 +4,18 @@ import dayjs from 'dayjs';
 import { useContext } from 'react';
 import { useForm } from 'react-hook-form';
 import {
-  Autocomplete,
-  Box,
-  Button,
-  FormControlLabel,
-  Stack,
-  Switch,
-  TextField,
+    Autocomplete,
+    Box,
+    Button,
+    FormControlLabel,
+    Stack,
+    Switch,
+    TextField,
 } from '@mui/material';
 import {
-  LocalizationProvider,
-  MobileDatePicker,
-  MobileDateTimePicker,
+    LocalizationProvider,
+    MobileDatePicker,
+    MobileDateTimePicker,
 } from '@mui/lab';
 import AdapterDayjs from '@mui/lab/AdapterDayjs';
 
@@ -25,198 +25,208 @@ import { AddCategoryModal } from './AddCategoryModal';
 import { blogDataContext, BlogDataContextType } from './contexts';
 
 export const MetaDataEditor: React.FC = () => {
-  // Blogについてのform設定
-  const {
-    register,
-    handleSubmit,
-    watch,
-    setValue,
-    formState: { errors },
-  } = useForm<Blog>({ mode: 'onTouched' });
-
-  // blogDataの読み込み
-  const blogData = useContext(blogDataContext) as BlogDataContextType;
-
-  // categoryDataの読み込み
-  const { data: categoryData } = useCategoriesState();
-
-  // submitした際の処理
-  // 初期値無しや型キャスト対応
-  const onSubmit = handleSubmit(async (data) => {
-    data.categories =
-      data.categories || blogData.blogDataContextValue.categories;
-    data.uuid = blogData.blogDataContextValue.uuid;
-    data.content = blogData.blogDataContextValue.content;
-    data.created_at = dayjs(data.created_at).unix();
-    data.updated_at = dayjs(data.updated_at).unix();
-    console.log(data);
-
-    await adminPostBlog(data);
-    blogData.setBlogDataContextValue(() => data);
-  });
-
-  return (
-    <Box component="form" onSubmit={onSubmit}>
-      <TextField
-        disabled
-        label="UUID"
-        value={blogData.blogDataContextValue.uuid}
-        type="text"
-        fullWidth
-        variant="outlined"
-        margin="normal"
-        {...register('uuid')}
-      />
-
-      <TextField
-        autoFocus
-        label="Title"
-        defaultValue={blogData.blogDataContextValue.title}
-        type="text"
-        fullWidth
-        autoComplete="off"
-        variant="outlined"
-        margin="normal"
-        helperText="max length 30."
-        required
-        error={errors.title ? true : false}
-        {...register('title', {
-          maxLength: 30,
-          required: true,
-        })}
-      />
-
-      <TextField
-        label="Sub Title"
-        defaultValue={blogData.blogDataContextValue.sub_title}
-        type="text"
-        fullWidth
-        autoComplete="off"
-        variant="outlined"
-        margin="normal"
-        helperText="max length 100."
-        error={errors.sub_title ? true : false}
-        {...register('sub_title', {
-          maxLength: 100,
-        })}
-      />
-
-      <TextField
-        label="Description(for SEO)"
-        defaultValue={blogData.blogDataContextValue.description}
-        type="text"
-        fullWidth
-        autoComplete="off"
-        variant="outlined"
-        margin="normal"
-        helperText="max length: 200."
-        error={errors.description ? true : false}
-        {...register('description', {
-          maxLength: 200,
-        })}
-      />
-
-      <Stack direction="row" alignItems="center" gap={1}>
-        <AddCategoryModal />
-        <Autocomplete
-          multiple
-          fullWidth
-          autoComplete
-          options={categoryData ? categoryData.map((value) => value.label) : []}
-          defaultValue={
-            categoryData
-              ? blogData.blogDataContextValue.categories.map(
-                  (value) => categoryData[value].label,
-                )
-              : []
-          }
-          filterSelectedOptions
-          onChange={(e, val) => {
-            setValue(
-              'categories',
-              val.map(
-                (categoryLabel) =>
-                  categoryData!.find((value) => value.label === categoryLabel)!
-                    .key,
-              ),
-            );
-          }}
-          renderInput={(params) => (
+    // Blogについてのform設定
+    const {
+        register,
+        handleSubmit,
+        watch,
+        setValue,
+        formState: { errors },
+    } = useForm<Blog>({ mode: 'onTouched' });
+
+    // blogDataの読み込み
+    const blogData = useContext(blogDataContext) as BlogDataContextType;
+
+    // categoryDataの読み込み
+    const { data: categoryData } = useCategoriesState();
+
+    // submitした際の処理
+    // 初期値無しや型キャスト対応
+    const onSubmit = handleSubmit(async (data) => {
+        data.categories =
+            data.categories || blogData.blogDataContextValue.categories;
+        data.uuid = blogData.blogDataContextValue.uuid;
+        data.content = blogData.blogDataContextValue.content;
+        data.created_at = dayjs(data.created_at).unix();
+        data.updated_at = dayjs(data.updated_at).unix();
+
+        await adminPostBlog(data);
+        blogData.setBlogDataContextValue(() => data);
+    });
+
+    return (
+        <Box component="form" onSubmit={onSubmit}>
             <TextField
-              autoFocus={false}
-              {...params}
-              label="Categories"
-              placeholder="Python, JavaScript, ..."
-              margin="normal"
+                disabled
+                label="UUID"
+                value={blogData.blogDataContextValue.uuid}
+                type="text"
+                fullWidth
+                variant="outlined"
+                margin="normal"
+                {...register('uuid')}
             />
-          )}
-        />
-      </Stack>
-
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
-        <Box sx={{ display: 'flex' }}>
-          <MobileDatePicker
-            disableFuture={true}
-            label="作成日時"
-            value={watch(
-              'created_at',
-              blogData.blogDataContextValue.created_at * 1000,
-            )}
-            onChange={(newDate) => {
-              setValue('created_at', newDate!);
-            }}
-            renderInput={(p) => (
-              <TextField
+
+            <TextField
+                autoFocus
+                label="Title"
+                defaultValue={blogData.blogDataContextValue.title}
+                type="text"
                 fullWidth
+                autoComplete="off"
+                variant="outlined"
                 margin="normal"
-                {...p}
-                {...register('created_at')}
-              />
-            )}
-          />
-
-          <MobileDateTimePicker
-            disableFuture={true}
-            label="更新日時"
-            value={watch(
-              'updated_at',
-              blogData.blogDataContextValue.updated_at * 1000,
-            )}
-            onChange={(newDate) => {
-              setValue('updated_at', newDate!);
-            }}
-            renderInput={(p) => (
-              <TextField
+                helperText="max length 30."
+                required
+                error={errors.title ? true : false}
+                {...register('title', {
+                    maxLength: 30,
+                    required: true,
+                })}
+            />
+
+            <TextField
+                label="Sub Title"
+                defaultValue={blogData.blogDataContextValue.sub_title}
+                type="text"
                 fullWidth
+                autoComplete="off"
+                variant="outlined"
                 margin="normal"
-                {...p}
-                {...register('updated_at')}
-              />
-            )}
-          />
+                helperText="max length 100."
+                error={errors.sub_title ? true : false}
+                {...register('sub_title', {
+                    maxLength: 100,
+                })}
+            />
+
+            <TextField
+                label="Description(for SEO)"
+                defaultValue={blogData.blogDataContextValue.description}
+                type="text"
+                fullWidth
+                autoComplete="off"
+                variant="outlined"
+                margin="normal"
+                helperText="max length: 200."
+                error={errors.description ? true : false}
+                {...register('description', {
+                    maxLength: 200,
+                })}
+            />
+
+            <Stack direction="row" alignItems="center" gap={1}>
+                <AddCategoryModal />
+                <Autocomplete
+                    multiple
+                    fullWidth
+                    autoComplete
+                    options={
+                        categoryData
+                            ? categoryData.map((value) => value.label)
+                            : []
+                    }
+                    defaultValue={
+                        categoryData
+                            ? blogData.blogDataContextValue.categories.map(
+                                  (value) => categoryData[value].label,
+                              )
+                            : []
+                    }
+                    filterSelectedOptions
+                    onChange={(e, val) => {
+                        setValue(
+                            'categories',
+                            val.map(
+                                (categoryLabel) =>
+                                    categoryData!.find(
+                                        (value) =>
+                                            value.label === categoryLabel,
+                                    )!.key,
+                            ),
+                        );
+                    }}
+                    renderInput={(params) => (
+                        <TextField
+                            autoFocus={false}
+                            {...params}
+                            label="Categories"
+                            placeholder="Python, JavaScript, ..."
+                            margin="normal"
+                        />
+                    )}
+                />
+            </Stack>
+
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <Box sx={{ display: 'flex' }}>
+                    <MobileDatePicker
+                        disableFuture={true}
+                        label="作成日時"
+                        value={watch(
+                            'created_at',
+                            blogData.blogDataContextValue.created_at * 1000,
+                        )}
+                        onChange={(newDate) => {
+                            setValue('created_at', newDate!);
+                        }}
+                        renderInput={(p) => (
+                            <TextField
+                                fullWidth
+                                margin="normal"
+                                {...p}
+                                {...register('created_at')}
+                            />
+                        )}
+                    />
+
+                    <MobileDateTimePicker
+                        disableFuture={true}
+                        label="更新日時"
+                        value={watch(
+                            'updated_at',
+                            blogData.blogDataContextValue.updated_at * 1000,
+                        )}
+                        onChange={(newDate) => {
+                            setValue('updated_at', newDate!);
+                        }}
+                        renderInput={(p) => (
+                            <TextField
+                                fullWidth
+                                margin="normal"
+                                {...p}
+                                {...register('updated_at')}
+                            />
+                        )}
+                    />
+                </Box>
+            </LocalizationProvider>
+
+            <FormControlLabel
+                label={
+                    watch(
+                        'is_published',
+                        blogData.blogDataContextValue.is_published,
+                    )
+                        ? '公開'
+                        : '非公開'
+                }
+                control={
+                    <Switch
+                        color="info"
+                        defaultChecked={
+                            blogData.blogDataContextValue.is_published
+                        }
+                    />
+                }
+                {...register('is_published')}
+            />
+
+            <br />
+
+            <Button type="submit" variant="contained" color="error">
+                save
+            </Button>
         </Box>
-      </LocalizationProvider>
-
-      <FormControlLabel
-        label={
-          watch('is_published', blogData.blogDataContextValue.is_published)
-            ? '公開'
-            : '非公開'
-        }
-        control={
-          <Switch
-            color="info"
-            defaultChecked={blogData.blogDataContextValue.is_published}
-          />
-        }
-        {...register('is_published')}
-      />
-
-      <br />
-
-      <Button type="submit" variant="contained" color="error">
-        save
-      </Button>
-    </Box>
-  );
+    );
 };
diff --git a/src/components/Editor/contexts.ts b/src/components/Editor/contexts.ts
index 5b463b2..8a4cf6c 100644
--- a/src/components/Editor/contexts.ts
+++ b/src/components/Editor/contexts.ts
@@ -3,10 +3,10 @@ import type { Blog } from '#src/types';
 import { createContext, Dispatch, SetStateAction } from 'react';
 
 export type BlogDataContextType = {
-  blogDataContextValue: Blog;
-  setBlogDataContextValue: Dispatch<SetStateAction<Blog>>;
+    blogDataContextValue: Blog;
+    setBlogDataContextValue: Dispatch<SetStateAction<Blog>>;
 };
 
 export const blogDataContext = createContext<BlogDataContextType | undefined>(
-  undefined,
+    undefined,
 );
diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx
index 0bba1f4..18eeb9c 100644
--- a/src/components/Editor/index.tsx
+++ b/src/components/Editor/index.tsx
@@ -7,23 +7,23 @@ import { useBlogListState } from '#src/utils/hooks';
 import { EditorBase } from './EditorBase';
 
 export const Editor: React.FC<Pick<Blog, 'uuid'>> = ({ uuid }) => {
-  function createNewBlog(): Blog {
-    return {
-      uuid: uuid,
-      title: 'default',
-      sub_title: '',
-      description: '',
-      content: '',
-      created_at: dayjs().unix(),
-      updated_at: dayjs().unix(),
-      is_published: false,
-      categories: [],
-    };
-  }
-  const { data } = useBlogListState();
-  if (!data) {
-    return <Loader />;
-  }
-  const blogData = data.find((blog) => blog.uuid === uuid) || createNewBlog();
-  return <EditorBase blogData={blogData} />;
+    function createNewBlog(): Blog {
+        return {
+            uuid: uuid,
+            title: 'default',
+            sub_title: '',
+            description: '',
+            content: '',
+            created_at: dayjs().unix(),
+            updated_at: dayjs().unix(),
+            is_published: false,
+            categories: [],
+        };
+    }
+    const { data } = useBlogListState();
+    if (!data) {
+        return <Loader />;
+    }
+    const blogData = data.find((blog) => blog.uuid === uuid) || createNewBlog();
+    return <EditorBase blogData={blogData} />;
 };
diff --git a/src/components/Editor/md-editor.module.scss b/src/components/Editor/md-editor.module.scss
index 0e4c9bb..915c3f9 100644
--- a/src/components/Editor/md-editor.module.scss
+++ b/src/components/Editor/md-editor.module.scss
@@ -1,10 +1,10 @@
 @use '../../../styles/globals.module.scss' as g;
 
 .mdEditor {
-  line-height: 22px;
-  width: stretch;
-  resize: none;
-  font-size: large;
-  border-radius: 8px;
-  font-family: sans-serif;
+    line-height: 22px;
+    width: stretch;
+    resize: none;
+    font-size: large;
+    border-radius: 8px;
+    font-family: sans-serif;
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index 778ff11..00456e1 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -4,15 +4,15 @@ import { Box, Container } from '@mui/material';
 import { COLORS } from '#src/styles';
 
 export const Footer: React.FC = () => {
-  return (
-    <Box
-      textAlign="right"
-      bgcolor={COLORS.baseColor}
-      color={COLORS.whiteColor}
-      mt={5}
-      p={2}
-    >
-      <Container>&copy;{dayjs().year()} - CaCaCa Blog</Container>
-    </Box>
-  );
+    return (
+        <Box
+            textAlign="right"
+            bgcolor={COLORS.baseColor}
+            color={COLORS.whiteColor}
+            mt={5}
+            p={2}
+        >
+            <Container>&copy;{dayjs().year()} - CaCaCa Blog</Container>
+        </Box>
+    );
 };
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index e952b28..cc33ae1 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -2,79 +2,79 @@ import { BsLine } from 'react-icons/bs';
 import { FaPython, FaReact } from 'react-icons/fa';
 import { IoLogoJavascript, IoLogoVue } from 'react-icons/io5';
 import {
-  SiDjango,
-  SiFastapi,
-  SiNextdotjs,
-  SiNumpy,
-  SiNuxtdotjs,
-  SiPandas,
-  SiPytorch,
-  SiScikitlearn,
-  SiSelenium,
-  SiSvelte,
-  SiTypescript,
+    SiDjango,
+    SiFastapi,
+    SiNextdotjs,
+    SiNumpy,
+    SiNuxtdotjs,
+    SiPandas,
+    SiPytorch,
+    SiScikitlearn,
+    SiSelenium,
+    SiSvelte,
+    SiTypescript,
 } from 'react-icons/si';
 
 export const LineIcon: React.FC = () => {
-  return <BsLine size={24} color="#06C755" />;
+    return <BsLine size={24} color="#06C755" />;
 };
 
 export const PythonIcon: React.FC = () => {
-  return <FaPython fontSize={26} />;
+    return <FaPython fontSize={26} />;
 };
 
 export const JavaScriptIcon: React.FC = () => {
-  return <IoLogoJavascript fontSize={24} />;
+    return <IoLogoJavascript fontSize={24} />;
 };
 
 export const DjangoIcon: React.FC = () => {
-  return <SiDjango fontSize={24} />;
+    return <SiDjango fontSize={24} />;
 };
 
 export const FastapiIcon: React.FC = () => {
-  return <SiFastapi fontSize={24} />;
+    return <SiFastapi fontSize={24} />;
 };
 
 export const SeleniumIcon: React.FC = () => {
-  return <SiSelenium fontSize={24} />;
+    return <SiSelenium fontSize={24} />;
 };
 
 export const PytorchIcon: React.FC = () => {
-  return <SiPytorch fontSize={24} />;
+    return <SiPytorch fontSize={24} />;
 };
 
 export const NumpyIcon: React.FC = () => {
-  return <SiNumpy fontSize={24} />;
+    return <SiNumpy fontSize={24} />;
 };
 
 export const PandasIcon: React.FC = () => {
-  return <SiPandas fontSize={24} />;
+    return <SiPandas fontSize={24} />;
 };
 
 export const ScikitLearnIcon: React.FC = () => {
-  return <SiScikitlearn fontSize={28} />;
+    return <SiScikitlearn fontSize={28} />;
 };
 
 export const ReactIcon: React.FC = () => {
-  return <FaReact fontSize={24} />;
+    return <FaReact fontSize={24} />;
 };
 
 export const NextjsIcon: React.FC = () => {
-  return <SiNextdotjs fontSize={24} />;
+    return <SiNextdotjs fontSize={24} />;
 };
 
 export const SvelteIcon: React.FC = () => {
-  return <SiSvelte fontSize={24} />;
+    return <SiSvelte fontSize={24} />;
 };
 
 export const VueIcon: React.FC = () => {
-  return <IoLogoVue fontSize={24} />;
+    return <IoLogoVue fontSize={24} />;
 };
 
 export const NuxtIcon: React.FC = () => {
-  return <SiNuxtdotjs fontSize={24} />;
+    return <SiNuxtdotjs fontSize={24} />;
 };
 
 export const TypeScriptIcon: React.FC = () => {
-  return <SiTypescript fontSize={22} />;
+    return <SiTypescript fontSize={22} />;
 };
diff --git a/src/components/Loader/index.tsx b/src/components/Loader/index.tsx
index c127be0..8da405c 100644
--- a/src/components/Loader/index.tsx
+++ b/src/components/Loader/index.tsx
@@ -1,9 +1,15 @@
 import { Box, CircularProgress } from '@mui/material';
 
 export const Loader: React.FC = () => {
-  return (
-    <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: '40vh' }}>
-      <CircularProgress size={120} sx={{ animationDuration: '2s' }} />
-    </Box>
-  );
+    return (
+        <Box
+            sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                marginTop: '40vh',
+            }}
+        >
+            <CircularProgress size={120} sx={{ animationDuration: '2s' }} />
+        </Box>
+    );
 };
diff --git a/src/components/LoginForm/index.tsx b/src/components/LoginForm/index.tsx
index 03f8fff..87c15c0 100644
--- a/src/components/LoginForm/index.tsx
+++ b/src/components/LoginForm/index.tsx
@@ -9,58 +9,65 @@ import { isAuthenticatedState } from '#src/atoms/authAtom';
 import { adminLogin } from '#src/utils/api/auth';
 
 export const LoginForm: React.FC = () => {
-  const setIsAuthed = useSetRecoilState(isAuthenticatedState);
+    const setIsAuthed = useSetRecoilState(isAuthenticatedState);
 
-  // Userに関してのform設定
-  const { register, handleSubmit } = useForm<User & { securityCode: string }>();
+    // Userに関してのform設定
+    const { register, handleSubmit } = useForm<
+        User & { securityCode: string }
+    >();
 
-  // submit時
-  const onSubmit = handleSubmit(async (data) => {
-    // security codeチェック
-    assert(
-      data.securityCode === process.env.ENV_SECURITY_CODE,
-      'Invalid Security Code!',
-    );
+    // submit時
+    const onSubmit = handleSubmit(async (data) => {
+        // security codeチェック
+        assert(
+            data.securityCode === process.env.ENV_SECURITY_CODE,
+            'Invalid Security Code!',
+        );
 
-    const response = await adminLogin({
-      username: data.username,
-      password: data.password,
-    });
+        const response = await adminLogin({
+            username: data.username,
+            password: data.password,
+        });
 
-    if (response.status === 200) {
-      setIsAuthed(() => true);
-    }
-  });
+        if (response.status === 200) {
+            setIsAuthed(() => true);
+        }
+    });
 
-  return (
-    <Box textAlign="center">
-      <form onSubmit={onSubmit}>
-        <FormControl>
-          <InputLabel htmlFor="username">username:</InputLabel>
-          <Input type="text" {...register('username')} />
-        </FormControl>
+    return (
+        <Box textAlign="center">
+            <form onSubmit={onSubmit}>
+                <FormControl>
+                    <InputLabel htmlFor="username">username:</InputLabel>
+                    <Input type="text" {...register('username')} />
+                </FormControl>
 
-        <br />
+                <br />
 
-        <FormControl>
-          <InputLabel htmlFor="password">password:</InputLabel>
-          <Input type="password" {...register('password')} />
-        </FormControl>
+                <FormControl>
+                    <InputLabel htmlFor="password">password:</InputLabel>
+                    <Input type="password" {...register('password')} />
+                </FormControl>
 
-        <br />
+                <br />
 
-        <FormControl>
-          <InputLabel htmlFor="securityCode">security code:</InputLabel>
-          <Input
-            type="number"
-            {...register('securityCode', { maxLength: 3, pattern: /[0-9]{3}/ })}
-          />
-        </FormControl>
+                <FormControl>
+                    <InputLabel htmlFor="securityCode">
+                        security code:
+                    </InputLabel>
+                    <Input
+                        type="number"
+                        {...register('securityCode', {
+                            maxLength: 3,
+                            pattern: /[0-9]{3}/,
+                        })}
+                    />
+                </FormControl>
 
-        <br />
+                <br />
 
-        <Button type="submit">login</Button>
-      </form>
-    </Box>
-  );
+                <Button type="submit">login</Button>
+            </form>
+        </Box>
+    );
 };
diff --git a/src/components/MarkdownView/CodeContainer.tsx b/src/components/MarkdownView/CodeContainer.tsx
index 759fd21..f7c9375 100644
--- a/src/components/MarkdownView/CodeContainer.tsx
+++ b/src/components/MarkdownView/CodeContainer.tsx
@@ -8,93 +8,93 @@ import { COLORS } from '#src/styles';
 import { useCurrentAbsUrl } from '#src/utils/hooks';
 
 const FILE_EXTENSIONS: { [lang: string]: string } = {
-  python: '.py',
-  py: '.py',
-  javascript: '.js',
-  js: '.js',
-  jsx: '.jsx',
-  typescript: '.ts',
-  ts: '.ts',
-  tsx: '.tsx',
-  html: '.html',
-  css: '.css',
-  scss: '.scss',
+    python: '.py',
+    py: '.py',
+    javascript: '.js',
+    js: '.js',
+    jsx: '.jsx',
+    typescript: '.ts',
+    ts: '.ts',
+    tsx: '.tsx',
+    html: '.html',
+    css: '.css',
+    scss: '.scss',
 };
 
 type PropType = {
-  filename?: string;
-  fileExtension: string;
-  node: Element;
+    filename?: string;
+    fileExtension: string;
+    node: Element;
 };
 
 export const CodeContainer: React.FC<PropType> = (props) => {
-  const [isDark, setIsDark] = useRecoilState(isDarkState);
-  const filename: string | undefined = props.filename;
-  const fileExtension: string | undefined = filename
-    ? filename.slice(1, -1)
-    : FILE_EXTENSIONS[props.fileExtension.toLocaleLowerCase()];
-  const currentUrl = useCurrentAbsUrl();
+    const [isDark, setIsDark] = useRecoilState(isDarkState);
+    const filename: string | undefined = props.filename;
+    const fileExtension: string | undefined = filename
+        ? filename.slice(1, -1)
+        : FILE_EXTENSIONS[props.fileExtension.toLocaleLowerCase()];
+    const currentUrl = useCurrentAbsUrl();
 
-  return (
-    <Box position="relative" sx={{ marginTop: '60px' }} {...props}>
-      {fileExtension && (
-        <Typography
-          variant="subtitle2"
-          sx={{
-            padding: '1px 5px',
-            top: '0px',
-            right: 'calc(6% - 20px)',
-            position: 'absolute',
-            border: `2px solid ${COLORS.mainColor}`,
-            borderTop: 'none',
-            borderRadius: '0 0 5px 5px',
-            zIndex: 500,
-          }}
-        >
-          {fileExtension}
-        </Typography>
-      )}
+    return (
+        <Box position="relative" sx={{ marginTop: '60px' }} {...props}>
+            {fileExtension && (
+                <Typography
+                    variant="subtitle2"
+                    sx={{
+                        padding: '1px 5px',
+                        top: '0px',
+                        right: 'calc(6% - 20px)',
+                        position: 'absolute',
+                        border: `2px solid ${COLORS.mainColor}`,
+                        borderTop: 'none',
+                        borderRadius: '0 0 5px 5px',
+                        zIndex: 500,
+                    }}
+                >
+                    {fileExtension}
+                </Typography>
+            )}
 
-      <Tooltip title="invert style" placement="top">
-        <IconButton
-          onClick={() => setIsDark((prev) => !prev)}
-          sx={{
-            top: '20px',
-            right: 'calc(13% - 20px)',
-            position: 'absolute',
-            zIndex: 500,
-            color: isDark ? 'rgb(248, 248, 242)' : 'default',
-          }}
-        >
-          <LightModeIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
+            <Tooltip title="invert style" placement="top">
+                <IconButton
+                    onClick={() => setIsDark((prev) => !prev)}
+                    sx={{
+                        top: '20px',
+                        right: 'calc(13% - 20px)',
+                        position: 'absolute',
+                        zIndex: 500,
+                        color: isDark ? 'rgb(248, 248, 242)' : 'default',
+                    }}
+                >
+                    <LightModeIcon fontSize="small" />
+                </IconButton>
+            </Tooltip>
 
-      <Tooltip title="copy" placement="top">
-        <IconButton
-          onClick={async () => {
-            const code = (
-              props.node.children[0] as unknown as {
-                type: string;
-                value: string;
-              }
-            ).value;
-            await navigator.clipboard.writeText(
-              `"Copied from ${currentUrl}"\n\n${code}`,
-            );
-          }}
-          sx={{
-            top: '20px',
-            right: 'calc(14% + 11px)',
-            position: 'absolute',
-            zIndex: 500,
-            color: isDark ? 'rgb(248, 248, 242)' : 'default',
-          }}
-        >
-          <ContentCopyIcon fontSize="small" />
-        </IconButton>
-      </Tooltip>
-      {props.children}
-    </Box>
-  );
+            <Tooltip title="copy" placement="top">
+                <IconButton
+                    onClick={async () => {
+                        const code = (
+                            props.node.children[0] as unknown as {
+                                type: string;
+                                value: string;
+                            }
+                        ).value;
+                        await navigator.clipboard.writeText(
+                            `"Copied from ${currentUrl}"\n\n${code}`,
+                        );
+                    }}
+                    sx={{
+                        top: '20px',
+                        right: 'calc(14% + 11px)',
+                        position: 'absolute',
+                        zIndex: 500,
+                        color: isDark ? 'rgb(248, 248, 242)' : 'default',
+                    }}
+                >
+                    <ContentCopyIcon fontSize="small" />
+                </IconButton>
+            </Tooltip>
+            {props.children}
+        </Box>
+    );
 };
diff --git a/src/components/MarkdownView/index.tsx b/src/components/MarkdownView/index.tsx
index 225dd09..7abe406 100644
--- a/src/components/MarkdownView/index.tsx
+++ b/src/components/MarkdownView/index.tsx
@@ -8,57 +8,60 @@ import remarkGfm from 'remark-gfm';
 import { Box } from '@mui/material';
 
 import { CodeContainer } from './CodeContainer';
-import { isDarkState } from '../../atoms/codeStyleAtom';
+import { isDarkState } from '#src/atoms/codeStyleAtom';
 
 export const MarkdownView: React.FC<{ body: string }> = ({ body }) => {
-  // codeのカラーモード
-  const isDark = useRecoilValue(isDarkState);
+    // codeのカラーモード
+    const isDark = useRecoilValue(isDarkState);
 
-  return (
-    <Box>
-      <ReactMarkdown
-        className={style.mdView}
-        remarkPlugins={[remarkGfm]}
-        components={{
-          code({ inline, className, children, ...props }) {
-            const match = /^language-(\w+)(\[[\x20-\x7e]+?\])?$/.exec(
-              className || '',
-            );
-            return !inline && match ? (
-              // codeblockの時
-              <SyntaxHighlighter
-                style={(isDark ? okaidia : prism) as string}
-                language={match[1]}
-                PreTag={CodeContainer}
-                showLineNumbers={true}
-                filename={match[2]}
-                fileExtension={match[1]}
-                customStyle={{ padding: '25px 1rem 22px 1rem' }}
-                {...props}
-              >
-                {String(children).replace(/\n$/, '')}
-              </SyntaxHighlighter>
-            ) : (
-              // inlinecodeの時
-              <code className={style['inline-code']} {...props}>
-                {children}
-              </code>
-            );
-          },
-          // h1は目次用にid付加・headerに隠れないようにsx設定
-          h1: ({ children, node }) => (
-            <Box
-              component="h1"
-              id={String(node.position?.start.line)}
-              sx={{ scrollMarginTop: { xs: '135px', sm: '95px' } }}
+    return (
+        <Box>
+            <ReactMarkdown
+                className={style.mdView}
+                remarkPlugins={[remarkGfm]}
+                components={{
+                    code({ inline, className, children, ...props }) {
+                        const match =
+                            /^language-(\w+)(\[[\x20-\x7e]+?\])?$/.exec(
+                                className || '',
+                            );
+                        return !inline && match ? (
+                            // codeblockの時
+                            <SyntaxHighlighter
+                                style={(isDark ? okaidia : prism) as string}
+                                language={match[1]}
+                                PreTag={CodeContainer}
+                                showLineNumbers={true}
+                                filename={match[2]}
+                                fileExtension={match[1]}
+                                customStyle={{ padding: '25px 1rem 22px 1rem' }}
+                                {...props}
+                            >
+                                {String(children).replace(/\n$/, '')}
+                            </SyntaxHighlighter>
+                        ) : (
+                            // inlinecodeの時
+                            <code className={style['inline-code']} {...props}>
+                                {children}
+                            </code>
+                        );
+                    },
+                    // h1は目次用にid付加・headerに隠れないようにsx設定
+                    h1: ({ children, node }) => (
+                        <Box
+                            component="h1"
+                            id={String(node.position?.start.line)}
+                            sx={{
+                                scrollMarginTop: { xs: '135px', sm: '95px' },
+                            }}
+                        >
+                            {String(children)}
+                        </Box>
+                    ),
+                }}
             >
-              {String(children)}
-            </Box>
-          ),
-        }}
-      >
-        {body}
-      </ReactMarkdown>
-    </Box>
-  );
+                {body}
+            </ReactMarkdown>
+        </Box>
+    );
 };
diff --git a/src/components/MarkdownView/md-view.module.scss b/src/components/MarkdownView/md-view.module.scss
index 742bafe..bf11423 100644
--- a/src/components/MarkdownView/md-view.module.scss
+++ b/src/components/MarkdownView/md-view.module.scss
@@ -1,71 +1,71 @@
 @use '../../../styles/globals.module.scss' as g;
 
 .mdView {
-  background-color: g.$main-color;
-  color: g.$base-color;
-  min-height: 100vh;
-  & > :nth-child(1) {
-    margin-top: 0;
-  }
-  & > :nth-last-child(1) {
-    margin-bottom: 0;
-  }
-
-  .inline-code {
-    background-color: rgb(238, 187, 195, 0.6);
+    background-color: g.$main-color;
     color: g.$base-color;
-    border-radius: 0.3em;
-    padding: 4px 5px;
-    white-space: nowrap;
-    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  }
-  table {
-    border-collapse: collapse;
-    th,
-    td {
-      padding: 15px;
-      border: 1pt solid g.$base-color;
+    min-height: 100vh;
+    & > :nth-child(1) {
+        margin-top: 0;
     }
-  }
-  blockquote {
-    position: relative;
-    padding: 5px 15px 5px 55px;
-    box-sizing: border-box;
-    color: g.$base-color;
-    background: g.$accent-color;
-    border-radius: 8px;
-    &::before {
-      display: inline-block;
-      position: absolute;
-      top: -2px;
-      left: 9px;
-      width: 38px;
-      height: 32px;
-      text-align: center;
-      content: '☆';
-      color: g.$white-color;
-      font-size: 18px;
-      line-height: 30px;
-      background: g.$accent-dark-color;
-      font-weight: 100;
+    & > :nth-last-child(1) {
+        margin-bottom: 0;
+    }
+
+    .inline-code {
+        background-color: rgb(238, 187, 195, 0.6);
+        color: g.$base-color;
+        border-radius: 0.3em;
+        padding: 4px 5px;
+        white-space: nowrap;
+        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     }
-    &::after {
-      content: '';
-      position: absolute;
-      left: 9px;
-      top: 30px;
-      height: 0;
-      width: 0;
-      border-left: 19px solid g.$accent-dark-color;
-      border-right: 19px solid g.$accent-dark-color;
-      border-bottom: 10px solid transparent;
+    table {
+        border-collapse: collapse;
+        th,
+        td {
+            padding: 15px;
+            border: 1pt solid g.$base-color;
+        }
     }
-    p {
-      position: relative;
-      padding: 0;
-      margin: 10px 0;
-      z-index: 3;
-      line-height: 1.7;
+    blockquote {
+        position: relative;
+        padding: 5px 15px 5px 55px;
+        box-sizing: border-box;
+        color: g.$base-color;
+        background: g.$accent-color;
+        border-radius: 8px;
+        &::before {
+            display: inline-block;
+            position: absolute;
+            top: -2px;
+            left: 9px;
+            width: 38px;
+            height: 32px;
+            text-align: center;
+            content: '☆';
+            color: g.$white-color;
+            font-size: 18px;
+            line-height: 30px;
+            background: g.$accent-dark-color;
+            font-weight: 100;
+        }
+        &::after {
+            content: '';
+            position: absolute;
+            left: 9px;
+            top: 30px;
+            height: 0;
+            width: 0;
+            border-left: 19px solid g.$accent-dark-color;
+            border-right: 19px solid g.$accent-dark-color;
+            border-bottom: 10px solid transparent;
+        }
+        p {
+            position: relative;
+            padding: 0;
+            margin: 10px 0;
+            z-index: 3;
+            line-height: 1.7;
+        }
     }
-  }
 }
diff --git a/src/components/Navbar/NavItem.tsx b/src/components/Navbar/NavItem.tsx
index 47cbae4..9581141 100644
--- a/src/components/Navbar/NavItem.tsx
+++ b/src/components/Navbar/NavItem.tsx
@@ -1,42 +1,42 @@
-import type { navItem as navItemType } from '../../types';
+import type { navItem as navItemType } from '#src/types';
 
 import Link from 'next/link';
 import { Link as MuiLink, Typography } from '@mui/material';
 
-import { COLORS } from '../../styles';
+import { COLORS } from '#src/styles';
 
 export const NavItem: React.FC<{ navItem: navItemType }> = ({ navItem }) => {
-  return (
-    <Link href={navItem.url} passHref>
-      <MuiLink
-        color={COLORS.whiteColor}
-        underline="none"
-        padding="4px"
-        width={{ xs: '120px', sm: '80px', md: '120px' }}
-        position="relative"
-        sx={{
-          '&::after': {
-            position: 'absolute',
-            content: '""',
-            left: '0',
-            bottom: '2px',
-            height: '1px',
-            width: '100%',
-            backgroundColor: COLORS.accentColor,
-            transform: 'scale(0, 1)',
-            transformOrigin: 'right',
-            transition: 'transform 0.3s, bottom 0.1s',
-          },
-          '&:hover::after': {
-            transformOrigin: 'left',
-            transform: 'scale(1, 1)',
-          },
-        }}
-      >
-        <Typography fontSize="23px" textAlign="center">
-          {navItem.label}
-        </Typography>
-      </MuiLink>
-    </Link>
-  );
+    return (
+        <Link href={navItem.url} passHref>
+            <MuiLink
+                color={COLORS.whiteColor}
+                underline="none"
+                padding="4px"
+                width={{ xs: '120px', sm: '80px', md: '120px' }}
+                position="relative"
+                sx={{
+                    '&::after': {
+                        position: 'absolute',
+                        content: '""',
+                        left: '0',
+                        bottom: '2px',
+                        height: '1px',
+                        width: '100%',
+                        backgroundColor: COLORS.accentColor,
+                        transform: 'scale(0, 1)',
+                        transformOrigin: 'right',
+                        transition: 'transform 0.3s, bottom 0.1s',
+                    },
+                    '&:hover::after': {
+                        transformOrigin: 'left',
+                        transform: 'scale(1, 1)',
+                    },
+                }}
+            >
+                <Typography fontSize="23px" textAlign="center">
+                    {navItem.label}
+                </Typography>
+            </MuiLink>
+        </Link>
+    );
 };
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 57e83fc..128fa29 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -8,40 +8,40 @@ import { COLORS } from '#src/styles';
 
 // 画面上部のナビゲーションバー
 export const Navbar: React.FC = () => {
-  const navItems: navItem[] = [
-    { label: 'Home', url: '/' },
-    { label: 'Blog', url: '/blogs' },
-  ];
+    const navItems: navItem[] = [
+        { label: 'Home', url: '/' },
+        { label: 'Blog', url: '/blogs' },
+    ];
 
-  return (
-    <AppBar
-      position="sticky"
-      sx={{
-        backgroundColor: COLORS.baseColor,
-        mb: 5,
-      }}
-    >
-      <Container>
-        <Stack
-          direction={{ sm: 'row', xs: 'column' }}
-          justifyContent="space-between"
-          alignItems="center"
+    return (
+        <AppBar
+            position="sticky"
+            sx={{
+                backgroundColor: COLORS.baseColor,
+                mb: 5,
+            }}
         >
-          <Box component="h1">
-            <Link href="/" passHref>
-              <MuiLink color={COLORS.whiteColor} underline="none">
-                CaCaCa Blog
-              </MuiLink>
-            </Link>
-          </Box>
+            <Container>
+                <Stack
+                    direction={{ sm: 'row', xs: 'column' }}
+                    justifyContent="space-between"
+                    alignItems="center"
+                >
+                    <Box component="h1">
+                        <Link href="/" passHref>
+                            <MuiLink color={COLORS.whiteColor} underline="none">
+                                CaCaCa Blog
+                            </MuiLink>
+                        </Link>
+                    </Box>
 
-          <Stack direction="row" justifyContent="space-between">
-            {navItems.map((navItem, idx) => (
-              <NavItem navItem={navItem} key={idx} />
-            ))}
-          </Stack>
-        </Stack>
-      </Container>
-    </AppBar>
-  );
+                    <Stack direction="row" justifyContent="space-between">
+                        {navItems.map((navItem, idx) => (
+                            <NavItem navItem={navItem} key={idx} />
+                        ))}
+                    </Stack>
+                </Stack>
+            </Container>
+        </AppBar>
+    );
 };
diff --git a/src/components/SelfIntroduction/ContactForm/index.tsx b/src/components/SelfIntroduction/ContactForm/index.tsx
index 044cdf3..22d9e43 100644
--- a/src/components/SelfIntroduction/ContactForm/index.tsx
+++ b/src/components/SelfIntroduction/ContactForm/index.tsx
@@ -6,61 +6,65 @@ import { COLORS } from '#src/styles';
 import { postContactForm } from '#src/utils/api/auth';
 
 export type ContactContentType = {
-  subject?: string;
-  email: string;
-  body: string;
+    subject?: string;
+    email: string;
+    body: string;
 };
 
 export const ContactForm = () => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<ContactContentType>({ mode: 'onBlur' });
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<ContactContentType>({ mode: 'onBlur' });
 
-  async function submit(data: ContactContentType) {
-    await postContactForm(data);
-  }
-  return (
-    <Box component="form" onSubmit={handleSubmit(submit)} textAlign="center">
-      <TextField
-        fullWidth
-        label="件名"
-        margin="dense"
-        {...register('subject')}
-      />
-      <TextField
-        fullWidth
-        label="メールアドレス"
-        margin="dense"
-        type="email"
-        helperText={errors.email && '必須項目です'}
-        required
-        error={errors.email !== undefined}
-        {...register('email', { required: true })}
-      />
-      <TextField
-        fullWidth
-        label="問い合わせ内容"
-        multiline
-        minRows={5}
-        maxRows={25}
-        margin="dense"
-        placeholder="問い合わせ内容"
-        helperText={errors.body && '必須項目です'}
-        required
-        error={errors.body !== undefined}
-        {...register('body', { required: true })}
-      />
-      <Button
-        variant="contained"
-        startIcon={<SendIcon />}
-        size="large"
-        sx={{ background: COLORS.accentDarkColor, width: '80%', mt:1}}
-        type="submit"
-      >
-        送信
-      </Button>
-    </Box>
-  );
+    async function submit(data: ContactContentType) {
+        await postContactForm(data);
+    }
+    return (
+        <Box
+            component="form"
+            onSubmit={handleSubmit(submit)}
+            textAlign="center"
+        >
+            <TextField
+                fullWidth
+                label="件名"
+                margin="dense"
+                {...register('subject')}
+            />
+            <TextField
+                fullWidth
+                label="メールアドレス"
+                margin="dense"
+                type="email"
+                helperText={errors.email && '必須項目です'}
+                required
+                error={errors.email !== undefined}
+                {...register('email', { required: true })}
+            />
+            <TextField
+                fullWidth
+                label="問い合わせ内容"
+                multiline
+                minRows={5}
+                maxRows={25}
+                margin="dense"
+                placeholder="問い合わせ内容"
+                helperText={errors.body && '必須項目です'}
+                required
+                error={errors.body !== undefined}
+                {...register('body', { required: true })}
+            />
+            <Button
+                variant="contained"
+                startIcon={<SendIcon />}
+                size="large"
+                sx={{ background: COLORS.accentDarkColor, width: '80%', mt: 1 }}
+                type="submit"
+            >
+                送信
+            </Button>
+        </Box>
+    );
 };
diff --git a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
index fbcbc2f..94c11e5 100644
--- a/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
+++ b/src/components/SelfIntroduction/SkillList/CertificationsList.tsx
@@ -3,25 +3,25 @@ import ListItem from '@mui/material/ListItem';
 import { Divider, Typography } from '@mui/material';
 
 export const CertificationsList: React.FC = () => {
-  return (
-    <List
-      component="nav"
-      subheader={
-        <>
-          <Typography variant="h5">Certifications</Typography>
-          <Divider />
-        </>
-      }
-    >
-      <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
-        <Typography component="span">英検 2級</Typography>
-      </ListItem>
-      <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
-        <Typography component="span">HSK 5級</Typography>
-      </ListItem>
-      <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
-        <Typography component="span">E資格 勉強中</Typography>
-      </ListItem>
-    </List>
-  );
+    return (
+        <List
+            component="nav"
+            subheader={
+                <>
+                    <Typography variant="h5">Certifications</Typography>
+                    <Divider />
+                </>
+            }
+        >
+            <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
+                <Typography component="span">英検 2級</Typography>
+            </ListItem>
+            <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
+                <Typography component="span">HSK 5級</Typography>
+            </ListItem>
+            <ListItem sx={{ listStyle: 'disc', display: 'list-item' }}>
+                <Typography component="span">E資格 勉強中</Typography>
+            </ListItem>
+        </List>
+    );
 };
diff --git a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
index a03b922..f2d8c86 100644
--- a/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
+++ b/src/components/SelfIntroduction/SkillList/ProgrammingSkillList.tsx
@@ -9,148 +9,148 @@ import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
 import { Divider, Typography } from '@mui/material';
 import {
-  DjangoIcon,
-  FastapiIcon,
-  JavaScriptIcon,
-  NextjsIcon,
-  NumpyIcon,
-  NuxtIcon,
-  PandasIcon,
-  PythonIcon,
-  PytorchIcon,
-  ReactIcon,
-  ScikitLearnIcon,
-  SeleniumIcon,
-  SvelteIcon,
-  TypeScriptIcon,
-  VueIcon,
+    DjangoIcon,
+    FastapiIcon,
+    JavaScriptIcon,
+    NextjsIcon,
+    NumpyIcon,
+    NuxtIcon,
+    PandasIcon,
+    PythonIcon,
+    PytorchIcon,
+    ReactIcon,
+    ScikitLearnIcon,
+    SeleniumIcon,
+    SvelteIcon,
+    TypeScriptIcon,
+    VueIcon,
 } from '#src/components';
 
 export const ProgrammingSkillList: React.FC = () => {
-  const [openPython, setOpenPython] = useState(false);
-  const [openJavaScript, setOpenJavaScript] = useState(false);
+    const [openPython, setOpenPython] = useState(false);
+    const [openJavaScript, setOpenJavaScript] = useState(false);
 
-  const handleClickPython = () => {
-    setOpenPython((prev) => !prev);
-  };
+    const handleClickPython = () => {
+        setOpenPython((prev) => !prev);
+    };
 
-  const handleClickJavaScript = () => {
-    setOpenJavaScript((prev) => !prev);
-  };
+    const handleClickJavaScript = () => {
+        setOpenJavaScript((prev) => !prev);
+    };
 
-  return (
-    <List
-      component="nav"
-      subheader={
-        <>
-          <Typography variant="h5">Programming</Typography>
-          <Divider />
-        </>
-      }
-    >
-      <ListItemButton onClick={handleClickPython}>
-        <ListItemIcon>
-          <PythonIcon />
-        </ListItemIcon>
-        <ListItemText primary="Python" />
-        {openPython ? <ExpandLess /> : <ExpandMore />}
-      </ListItemButton>
+    return (
+        <List
+            component="nav"
+            subheader={
+                <>
+                    <Typography variant="h5">Programming</Typography>
+                    <Divider />
+                </>
+            }
+        >
+            <ListItemButton onClick={handleClickPython}>
+                <ListItemIcon>
+                    <PythonIcon />
+                </ListItemIcon>
+                <ListItemText primary="Python" />
+                {openPython ? <ExpandLess /> : <ExpandMore />}
+            </ListItemButton>
 
-      <Collapse in={openPython} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <FastapiIcon />
-            </ListItemIcon>
-            <ListItemText primary="FastAPI" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <DjangoIcon />
-            </ListItemIcon>
-            <ListItemText primary="Django" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <SeleniumIcon />
-            </ListItemIcon>
-            <ListItemText primary="Selenium" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <NumpyIcon />
-            </ListItemIcon>
-            <ListItemText primary="NumPy" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <PandasIcon />
-            </ListItemIcon>
-            <ListItemText primary="Pandas" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <ScikitLearnIcon />
-            </ListItemIcon>
-            <ListItemText primary="Scikit-learn" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <PytorchIcon />
-            </ListItemIcon>
-            <ListItemText primary="PyTorch" />
-          </ListItem>
-        </List>
-      </Collapse>
+            <Collapse in={openPython} timeout="auto" unmountOnExit>
+                <List component="div" disablePadding>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <FastapiIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="FastAPI" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <DjangoIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Django" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <SeleniumIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Selenium" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <NumpyIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="NumPy" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <PandasIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Pandas" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <ScikitLearnIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Scikit-learn" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <PytorchIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="PyTorch" />
+                    </ListItem>
+                </List>
+            </Collapse>
 
-      <ListItemButton onClick={handleClickJavaScript}>
-        <ListItemIcon>
-          <JavaScriptIcon />
-        </ListItemIcon>
-        <ListItemText primary="JavaScript" />
-        {openJavaScript ? <ExpandLess /> : <ExpandMore />}
-      </ListItemButton>
+            <ListItemButton onClick={handleClickJavaScript}>
+                <ListItemIcon>
+                    <JavaScriptIcon />
+                </ListItemIcon>
+                <ListItemText primary="JavaScript" />
+                {openJavaScript ? <ExpandLess /> : <ExpandMore />}
+            </ListItemButton>
 
-      <Collapse in={openJavaScript} timeout="auto" unmountOnExit>
-        <List component="div" disablePadding>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <TypeScriptIcon />
-            </ListItemIcon>
-            <ListItemText primary="TypeScript" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <ReactIcon />
-            </ListItemIcon>
-            <ListItemText primary="React" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <NextjsIcon />
-            </ListItemIcon>
-            <ListItemText primary="Next" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <SvelteIcon />
-            </ListItemIcon>
-            <ListItemText primary="Svelte / SvelteKit" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <VueIcon />
-            </ListItemIcon>
-            <ListItemText primary="Vue" />
-          </ListItem>
-          <ListItem sx={{ pl: 4 }}>
-            <ListItemIcon>
-              <NuxtIcon />
-            </ListItemIcon>
-            <ListItemText primary="Nuxt" />
-          </ListItem>
+            <Collapse in={openJavaScript} timeout="auto" unmountOnExit>
+                <List component="div" disablePadding>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <TypeScriptIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="TypeScript" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <ReactIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="React" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <NextjsIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Next" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <SvelteIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Svelte / SvelteKit" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <VueIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Vue" />
+                    </ListItem>
+                    <ListItem sx={{ pl: 4 }}>
+                        <ListItemIcon>
+                            <NuxtIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Nuxt" />
+                    </ListItem>
+                </List>
+            </Collapse>
         </List>
-      </Collapse>
-    </List>
-  );
+    );
 };
diff --git a/src/components/SelfIntroduction/SkillList/index.tsx b/src/components/SelfIntroduction/SkillList/index.tsx
index 2df2afd..1e30406 100644
--- a/src/components/SelfIntroduction/SkillList/index.tsx
+++ b/src/components/SelfIntroduction/SkillList/index.tsx
@@ -2,10 +2,10 @@ import { ProgrammingSkillList } from './ProgrammingSkillList';
 import { CertificationsList } from './CertificationsList';
 
 export const SkillList: React.FC = () => {
-  return (
-    <>
-      <ProgrammingSkillList />
-      <CertificationsList />
-    </>
-  );
+    return (
+        <>
+            <ProgrammingSkillList />
+            <CertificationsList />
+        </>
+    );
 };
diff --git a/src/components/SelfIntroduction/index.tsx b/src/components/SelfIntroduction/index.tsx
index 36df8d3..fdc20fe 100644
--- a/src/components/SelfIntroduction/index.tsx
+++ b/src/components/SelfIntroduction/index.tsx
@@ -4,36 +4,38 @@ import { SkillList } from '#src/components';
 import { ContactForm } from './ContactForm';
 
 export const SelfIntroduction: React.FC = () => {
-  return (
-    <Stack>
-      <Container>
-        <Typography variant="h3" textAlign="center">
-          About
-        </Typography>
-        <Box component="p">CaCaCa Blogをご覧いただきありがとうございます。</Box>
-        <Box component="p">
-          初めまして、現在東京工業大学生命理工学系に所属している大学3年生(2022年4月時点)で、専攻とは別に趣味の一つとしてプログラミングをしており、Web開発をメインにしています。
-          AtCoder(緑)にて競技プログラミングに参加したり、機械学習も勉強しています。
-          <br />
-          現在はLancers・CrowdWorksでのクラウドソーシング、ITベンチャー2社にてインターン、またプログラミングスクール1社にてメンターとして活動しています。
-        </Box>
-        <Box component="p">
-          今回は、Next.js + TypeScript +
-          FastAPIをメインに当サイトを作成しました。
-          当サイトはポートフォリオ兼ブログサイトとなっています。
-          プログラミングのことが主になると思いますが、その他のこともブログに作成していきたいと思います。
-        </Box>
+    return (
+        <Stack>
+            <Container>
+                <Typography variant="h3" textAlign="center">
+                    About
+                </Typography>
+                <Box component="p">
+                    CaCaCa Blogをご覧いただきありがとうございます。
+                </Box>
+                <Box component="p">
+                    初めまして、現在東京工業大学生命理工学系に所属している大学3年生(2022年4月時点)で、専攻とは別に趣味の一つとしてプログラミングをしており、Web開発をメインにしています。
+                    AtCoder(緑)にて競技プログラミングに参加したり、機械学習も勉強しています。
+                    <br />
+                    現在はLancers・CrowdWorksでのクラウドソーシング、ITベンチャー2社にてインターン、またプログラミングスクール1社にてメンターとして活動しています。
+                </Box>
+                <Box component="p">
+                    今回は、Next.js + TypeScript +
+                    FastAPIをメインに当サイトを作成しました。
+                    当サイトはポートフォリオ兼ブログサイトとなっています。
+                    プログラミングのことが主になると思いますが、その他のこともブログに作成していきたいと思います。
+                </Box>
 
-        <Typography variant="h3" textAlign="center">
-          Skill
-        </Typography>
-        <SkillList />
+                <Typography variant="h3" textAlign="center">
+                    Skill
+                </Typography>
+                <SkillList />
 
-        <Typography variant="h3" textAlign="center">
-          Contact
-        </Typography>
-        <ContactForm />
-      </Container>
-    </Stack>
-  );
+                <Typography variant="h3" textAlign="center">
+                    Contact
+                </Typography>
+                <ContactForm />
+            </Container>
+        </Stack>
+    );
 };
diff --git a/src/components/ShareButtons/index.tsx b/src/components/ShareButtons/index.tsx
index 17da562..d43a777 100644
--- a/src/components/ShareButtons/index.tsx
+++ b/src/components/ShareButtons/index.tsx
@@ -10,82 +10,87 @@ import { COLORS } from '#src/styles';
 import { useCurrentAbsUrl } from '#src/utils/hooks';
 
 export const ShareButtons: React.FC = () => {
-  const [isClicked, setIsClicked] = useState(false);
+    const [isClicked, setIsClicked] = useState(false);
 
-  const shareUrlBase = useCurrentAbsUrl();
-  const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${shareUrlBase}`;
-  const lineShareUrl = `https://social-plugins.line.me/lineit/share?url=${shareUrlBase}`;
-  const twitterShareUrl = `https://twitter.com/intent/tweet?text=${shareUrlBase}`;
+    const shareUrlBase = useCurrentAbsUrl();
+    const fbShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${shareUrlBase}`;
+    const lineShareUrl = `https://social-plugins.line.me/lineit/share?url=${shareUrlBase}`;
+    const twitterShareUrl = `https://twitter.com/intent/tweet?text=${shareUrlBase}`;
 
-  return (
-    <>
-      <Tooltip title={'Share!'} placement="top">
-        <Fab
-          onClick={() => setIsClicked((prev) => !prev)}
-          aria-label="share"
-          sx={{ top: '50vh', right: '6vw', position: 'fixed', zIndex: 10000 }}
-        >
-          {isClicked ? (
-            <CloseIcon sx={{ color: COLORS.accentDarkColor }} />
-          ) : (
-            <ShareIcon sx={{ color: COLORS.accentDarkColor }} />
-          )}
-        </Fab>
-      </Tooltip>
-      {isClicked && (
+    return (
         <>
-          <Grow in={isClicked} timeout={1500}>
-            <Fab
-              aria-label="share"
-              href={twitterShareUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                top: 'calc(50vh - 108px)',
-                right: 'calc(6vw + 10px)',
-                position: 'fixed',
-                zIndex: 10000,
-              }}
-            >
-              <TwitterIcon sx={{ color: '#1DA1F2' }} />
-            </Fab>
-          </Grow>
+            <Tooltip title={'Share!'} placement="top">
+                <Fab
+                    onClick={() => setIsClicked((prev) => !prev)}
+                    aria-label="share"
+                    sx={{
+                        top: '50vh',
+                        right: '6vw',
+                        position: 'fixed',
+                        zIndex: 10000,
+                    }}
+                >
+                    {isClicked ? (
+                        <CloseIcon sx={{ color: COLORS.accentDarkColor }} />
+                    ) : (
+                        <ShareIcon sx={{ color: COLORS.accentDarkColor }} />
+                    )}
+                </Fab>
+            </Tooltip>
+            {isClicked && (
+                <>
+                    <Grow in={isClicked} timeout={1500}>
+                        <Fab
+                            aria-label="share"
+                            href={twitterShareUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                                top: 'calc(50vh - 108px)',
+                                right: 'calc(6vw + 10px)',
+                                position: 'fixed',
+                                zIndex: 10000,
+                            }}
+                        >
+                            <TwitterIcon sx={{ color: '#1DA1F2' }} />
+                        </Fab>
+                    </Grow>
 
-          <Grow in={isClicked} timeout={750}>
-            <Fab
-              aria-label="share"
-              href={fbShareUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                top: 'calc(50vh - 76px)',
-                right: 'calc(6vw + 76px)',
-                position: 'fixed',
-                zIndex: 10000,
-              }}
-            >
-              <FacebookIcon sx={{ color: '#4267B2' }} />
-            </Fab>
-          </Grow>
+                    <Grow in={isClicked} timeout={750}>
+                        <Fab
+                            aria-label="share"
+                            href={fbShareUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                                top: 'calc(50vh - 76px)',
+                                right: 'calc(6vw + 76px)',
+                                position: 'fixed',
+                                zIndex: 10000,
+                            }}
+                        >
+                            <FacebookIcon sx={{ color: '#4267B2' }} />
+                        </Fab>
+                    </Grow>
 
-          <Grow in={isClicked}>
-            <Fab
-              aria-label="share"
-              href={lineShareUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                top: 'calc(50vh - 10px)',
-                right: 'calc(6vw + 108px)',
-                position: 'fixed',
-                zIndex: 10000,
-              }}
-            >
-              <LineIcon />
-            </Fab>
-          </Grow>
+                    <Grow in={isClicked}>
+                        <Fab
+                            aria-label="share"
+                            href={lineShareUrl}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            sx={{
+                                top: 'calc(50vh - 10px)',
+                                right: 'calc(6vw + 108px)',
+                                position: 'fixed',
+                                zIndex: 10000,
+                            }}
+                        >
+                            <LineIcon />
+                        </Fab>
+                    </Grow>
+                </>
+            )}
         </>
-      )}
-    </>
-  );
+    );
 };
diff --git a/src/components/index.ts b/src/components/index.ts
index e4bca8c..6a3c77a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -3,22 +3,22 @@ export { BlogList } from './BlogList';
 export { Editor } from './Editor';
 export { Footer } from './Footer';
 export {
-  LineIcon,
-  PythonIcon,
-  JavaScriptIcon,
-  DjangoIcon,
-  FastapiIcon,
-  NextjsIcon,
-  NumpyIcon,
-  NuxtIcon,
-  PandasIcon,
-  PytorchIcon,
-  ReactIcon,
-  ScikitLearnIcon,
-  SeleniumIcon,
-  SvelteIcon,
-  TypeScriptIcon,
-  VueIcon,
+    LineIcon,
+    PythonIcon,
+    JavaScriptIcon,
+    DjangoIcon,
+    FastapiIcon,
+    NextjsIcon,
+    NumpyIcon,
+    NuxtIcon,
+    PandasIcon,
+    PytorchIcon,
+    ReactIcon,
+    ScikitLearnIcon,
+    SeleniumIcon,
+    SvelteIcon,
+    TypeScriptIcon,
+    VueIcon,
 } from './Icons';
 export { DashBoard } from './DashBoard';
 export { Loader } from './Loader';
diff --git a/src/layouts/client.tsx b/src/layouts/client.tsx
index 4049f4e..d282751 100644
--- a/src/layouts/client.tsx
+++ b/src/layouts/client.tsx
@@ -4,46 +4,45 @@ import { Stack } from '@mui/material';
 import { Footer, Navbar } from '#src/components';
 
 type ClientLayoutPropType = {
-  isAdsExist?: boolean;
+    isAdsExist?: boolean;
 };
 
 export const ClientLayout: React.FC<ClientLayoutPropType> = ({
-  children,
-  isAdsExist,
+    children,
+    isAdsExist,
 }) => {
-  const AdmaxAd = (
-    <>
-      <div
-        className="admax-ads"
-        data-admax-id="f11b860d747ce3037ea1083fec43a96b"
-        style={{
-          display: 'inline-block',
-          width: '728px',
-          height: '90px',
-          margin: '0 auto',
-        }}
-      />
-      <Script
-        id='admax-ads'
-        type="text/javascript"
-        dangerouslySetInnerHTML={{
-          __html:
-            '(admaxads = window.admaxads || []).push({admax_id: "f11b860d747ce3037ea1083fec43a96b",type: "banner"});',
-        }}
-      />
-      <Script
-        type="text/javascript"
-        src="https://adm.shinobi.jp/st/t.js"
-        async
-      />
-    </>
-  );
-  return (
-    <Stack minHeight="100vh">
-      <Navbar />
-      {children}
-      {isAdsExist && AdmaxAd}
-      <Footer />
-    </Stack>
-  );
+    const AdmaxAd = (
+        <>
+            <div
+                className="admax-ads"
+                data-admax-id="f11b860d747ce3037ea1083fec43a96b"
+                style={{
+                    display: 'inline-block',
+                    width: '728px',
+                    height: '90px',
+                    margin: '0 auto',
+                }}
+            />
+            <Script
+                id="admax-ads"
+                type="text/javascript"
+                dangerouslySetInnerHTML={{
+                    __html: '(admaxads = window.admaxads || []).push({admax_id: "f11b860d747ce3037ea1083fec43a96b",type: "banner"});',
+                }}
+            />
+            <Script
+                type="text/javascript"
+                src="https://adm.shinobi.jp/st/t.js"
+                async
+            />
+        </>
+    );
+    return (
+        <Stack minHeight="100vh">
+            <Navbar />
+            {children}
+            {isAdsExist && AdmaxAd}
+            <Footer />
+        </Stack>
+    );
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 62edef8..610daa2 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -6,20 +6,20 @@ import Head from 'next/head';
 import { RecoilRoot } from 'recoil';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <>
-      <RecoilRoot>
-        <Head>
-          <meta charSet="utf-8" />
-          <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-          />
-        </Head>
-        <Component {...pageProps} />
-      </RecoilRoot>
-    </>
-  );
+    return (
+        <>
+            <RecoilRoot>
+                <Head>
+                    <meta charSet="utf-8" />
+                    <meta
+                        name="viewport"
+                        content="width=device-width, initial-scale=1.0"
+                    />
+                </Head>
+                <Component {...pageProps} />
+            </RecoilRoot>
+        </>
+    );
 }
 
 export default MyApp;
diff --git a/src/pages/admin/[uuid].tsx b/src/pages/admin/[uuid].tsx
index 32e29d2..0f969fd 100644
--- a/src/pages/admin/[uuid].tsx
+++ b/src/pages/admin/[uuid].tsx
@@ -6,22 +6,22 @@ import { LoginForm, Editor, Loader } from '#src/components';
 import { isAuthenticatedState } from '#src/atoms/authAtom';
 
 const CreateBlogPage = () => {
-  const isAuthed = useRecoilValue(isAuthenticatedState);
+    const isAuthed = useRecoilValue(isAuthenticatedState);
 
-  const [uuid, setUuid] = useState<undefined | string>(undefined);
+    const [uuid, setUuid] = useState<undefined | string>(undefined);
 
-  const router = useRouter();
-  useEffect(() => {
-    if (router.isReady) {
-      setUuid(router.query.uuid as string);
-    }
-  }, [router]);
+    const router = useRouter();
+    useEffect(() => {
+        if (router.isReady) {
+            setUuid(router.query.uuid as string);
+        }
+    }, [router]);
 
-  if (isAuthed) {
-    return <>{uuid ? <Editor uuid={uuid} /> : <Loader />}</>;
-  } else {
-    return <LoginForm />;
-  }
+    if (isAuthed) {
+        return <>{uuid ? <Editor uuid={uuid} /> : <Loader />}</>;
+    } else {
+        return <LoginForm />;
+    }
 };
 
 export default CreateBlogPage;
diff --git a/src/pages/admin/index.tsx b/src/pages/admin/index.tsx
index f9dbbb5..510aa57 100644
--- a/src/pages/admin/index.tsx
+++ b/src/pages/admin/index.tsx
@@ -4,13 +4,13 @@ import { isAuthenticatedState } from '#src/atoms/authAtom';
 import { LoginForm, DashBoard } from '#src/components';
 
 const LoginPage = () => {
-  const isAuthed = useRecoilValue(isAuthenticatedState);
+    const isAuthed = useRecoilValue(isAuthenticatedState);
 
-  if (isAuthed) {
-    return <DashBoard />;
-  } else {
-    return <LoginForm />;
-  }
+    if (isAuthed) {
+        return <DashBoard />;
+    } else {
+        return <LoginForm />;
+    }
 };
 
 export default LoginPage;
diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index a9a834d..fa45dcf 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -8,25 +8,25 @@ import { fetchBlogList } from '#src/utils/api/blog';
 import { Blog } from '#src/types';
 
 const BlogListPage: NextPage<{ blogs: Blog[] }> = ({ blogs }) => {
-  return (
-    <>
-      <Head>
-        <title>ブログ一覧</title>
-        <meta name="description" content="List of all blogs" />
-      </Head>
+    return (
+        <>
+            <Head>
+                <title>ブログ一覧</title>
+                <meta name="description" content="List of all blogs" />
+            </Head>
 
-      <ClientLayout isAdsExist>
-        <BlogList blogs={blogs}/>
-      </ClientLayout>
-    </>
-  );
+            <ClientLayout isAdsExist>
+                <BlogList blogs={blogs} />
+            </ClientLayout>
+        </>
+    );
 };
 
 export default BlogListPage;
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const blogs = await fetchBlogList();
-  return {
-    props: { blogs },
-  };
+    const blogs = await fetchBlogList();
+    return {
+        props: { blogs },
+    };
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index d5f50fb..3cdf247 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -6,17 +6,17 @@ import Head from 'next/head';
 import { SelfIntroduction } from '#src/components';
 
 const HomePage: NextPage = () => {
-  return (
-    <>
-      <Head>
-        <title>Home</title>
-      </Head>
+    return (
+        <>
+            <Head>
+                <title>Home</title>
+            </Head>
 
-      <ClientLayout>
-        <SelfIntroduction />
-      </ClientLayout>
-    </>
-  );
+            <ClientLayout>
+                <SelfIntroduction />
+            </ClientLayout>
+        </>
+    );
 };
 
 export default HomePage;
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8482572..e954eb0 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,7 +1,7 @@
 export const COLORS = {
-  baseColor: '#232946',
-  mainColor: '#b6bfec',
-  accentColor: '#eebbc3',
-  accentDarkColor: '#ee7587',
-  whiteColor: '#fffffe',
+    baseColor: '#232946',
+    mainColor: '#b6bfec',
+    accentColor: '#eebbc3',
+    accentDarkColor: '#ee7587',
+    whiteColor: '#fffffe',
 };
diff --git a/src/types/index.ts b/src/types/index.ts
index 6b5ca1e..3e30602 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,35 +1,35 @@
 export type navItem = {
-  label: string;
-  url: string;
+    label: string;
+    url: string;
 };
 
 export type User = {
-  username: string;
-  password: string;
+    username: string;
+    password: string;
 };
 
 export type Blog = {
-  uuid: string;
-  title: string;
-  sub_title: string;
-  description: string;
-  content: string;
-  created_at: number;
-  updated_at: number;
-  is_published: boolean;
-  categories: number[];
+    uuid: string;
+    title: string;
+    sub_title: string;
+    description: string;
+    content: string;
+    created_at: number;
+    updated_at: number;
+    is_published: boolean;
+    categories: number[];
 };
 
 // Blogのtable表示用データの型
 export type BlogTableData = Pick<
-  Blog,
-  'uuid' | 'title' | 'created_at' | 'updated_at'
+    Blog,
+    'uuid' | 'title' | 'created_at' | 'updated_at'
 >;
 
 // Blogのメタデータの型
 export type BlogMetaData = Omit<Blog, 'content'>;
 
 export type Category = {
-  key: number;
-  label: string;
+    key: number;
+    label: string;
 };
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index f0b7e3b..456019f 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -8,19 +8,21 @@ import useSWR from 'swr';
 import { fetchBlogList, fetchCategories } from '#src/utils/api/blog';
 
 export const useBlogListState = (onlyPublished = true) => {
-  return useSWR<Blog[], Error>('blogList', () => fetchBlogList(onlyPublished));
+    return useSWR<Blog[], Error>('blogList', () =>
+        fetchBlogList(onlyPublished),
+    );
 };
 
 export const useCategoriesState = () => {
-  return useSWR<Category[], Error>('categories', () => fetchCategories());
+    return useSWR<Category[], Error>('categories', () => fetchCategories());
 };
 
 export const useCurrentAbsUrl = () => {
-  const router = useRouter();
-  const [currentUrl, setCurrentUrl] = useState<string>('');
-  useEffect(() => {
-    const { origin } = nextAbsoluteUrl();
-    setCurrentUrl(new URL(router.asPath, origin).href);
-  }, [router]);
-  return currentUrl;
+    const router = useRouter();
+    const [currentUrl, setCurrentUrl] = useState<string>('');
+    useEffect(() => {
+        const { origin } = nextAbsoluteUrl();
+        setCurrentUrl(new URL(router.asPath, origin).href);
+    }, [router]);
+    return currentUrl;
 };

From e90ffbf82904b9fc461db24f1b496e987c0b2573 Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Thu, 29 Sep 2022 03:36:36 +0900
Subject: [PATCH 5/8] update

---
 package.json |   6 +-
 yarn.lock    | 445 ++++++++++++++++++---------------------------------
 2 files changed, 160 insertions(+), 291 deletions(-)

diff --git a/package.json b/package.json
index 44d96d4..8c608b9 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,10 @@
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "markdown-to-txt": "^2.0.0",
-    "next": "^12.0.8",
+    "next": "^12.3.1",
     "next-absolute-url": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.22.2",
     "react-icons": "^4.3.1",
     "react-intersection-observer": "^8.33.1",
diff --git a/yarn.lock b/yarn.lock
index c6e263f..9b62a39 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,12 +16,12 @@
   dependencies:
     "@babel/types" "^7.16.7"
 
-"@babel/helper-plugin-utils@^7.14.5", "@babel/helper-plugin-utils@^7.16.7":
+"@babel/helper-plugin-utils@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
-"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.16.7":
+"@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
   integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
@@ -35,13 +35,6 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/plugin-syntax-jsx@7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
-  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
 "@babel/plugin-syntax-jsx@^7.12.13":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
@@ -64,14 +57,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/types@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
-  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.9"
-    to-fast-properties "^2.0.0"
-
 "@babel/types@^7.16.7":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
@@ -412,10 +397,10 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
-"@next/env@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.8.tgz#a32ca0a97d464307f2e6ff106ce09b19aac108cf"
-  integrity sha512-Wa0gOeioB9PHap9wtZDZEhgOSE3/+qE/UALWjJHuNvH4J3oE+13EjVOiEsr1JcPCXUN8ESQE+phDKlo6qJ8P9g==
+"@next/env@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.3.1.tgz#18266bd92de3b4aa4037b1927aa59e6f11879260"
+  integrity sha512-9P9THmRFVKGKt9DYqeC2aKIxm8rlvkK38V1P1sRE7qyoPBIs8l9oo79QoSdPtOWfzkbDAVUqvbQGgTMsb8BtJg==
 
 "@next/eslint-plugin-next@12.0.7":
   version "12.0.7"
@@ -424,65 +409,70 @@
   dependencies:
     glob "7.1.7"
 
-"@next/react-refresh-utils@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-12.0.8.tgz#481760a95ef442abd091663db6582d4dc1b31f06"
-  integrity sha512-Bq4T/aOOFQUkCF9b8k9x+HpjOevu65ZPxsYJOpgEtBuJyvb+sZREtDDLKb/RtjUeLMrWrsGD0aLteyFFtiS8Og==
-
-"@next/swc-android-arm64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.8.tgz#f8dc9663da367a75982730cac058339fb310d79a"
-  integrity sha512-BiXMcOZNnXSIXv+FQvbRgbMb+iYayLX/Sb2MwR0wja+eMs46BY1x/ssXDwUBADP1M8YtrGTlSPHZqUiCU94+Mg==
-
-"@next/swc-darwin-arm64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.8.tgz#d6aced7d0a04815dd1324e7982accb3de6a643e8"
-  integrity sha512-6EGMmvcIwPpwt0/iqLbXDGx6oKHAXzbowyyVXK8cqmIvhoghRFjqfiNGBs+ar6wEBGt68zhwn/77vE3iQWoFJw==
-
-"@next/swc-darwin-x64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.8.tgz#f4fe58d2ed852538410b15a0c80d78908050c716"
-  integrity sha512-todxgQOGP/ucz5UH2kKR3XGDdkWmWr0VZAAbzgTbiFm45Ol4ih602k2nNR3xSbza9IqNhxNuUVsMpBgeo19CFQ==
-
-"@next/swc-linux-arm-gnueabihf@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.8.tgz#2c02d824fb46e8c6094d7e758c5d7e965070f574"
-  integrity sha512-KULmdrfI+DJxBuhEyV47MQllB/WpC3P2xbwhHezxL/LkC2nkz5SbV4k432qpx2ebjIRf9SjdQ5Oz1FjD8Urayw==
-
-"@next/swc-linux-arm64-gnu@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.8.tgz#fc32caf3373b299558ede1d889e8555b9ba10ffb"
-  integrity sha512-1XO87wgIVPvt5fx5i8CqdhksRdcpqyzCOLW4KrE0f9pUCIT04EbsFiKdmsH9c73aqjNZMnCMXpbV+cn4hN8x1w==
-
-"@next/swc-linux-arm64-musl@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.8.tgz#c2d3d7bc2c34da81412b74bdd6e11d0615ae1886"
-  integrity sha512-NStRZEy/rkk2G18Yhc/Jzi1Q2Dv+zH176oO8479zlDQ5syRfc6AvRHVV4iNRc8Pai58If83r/nOJkwFgGwkKLw==
-
-"@next/swc-linux-x64-gnu@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.8.tgz#029d84f856801b818e5525ab1406f2446821d48c"
-  integrity sha512-rHxTGtTEDFsdT9/VjewzxE19S7W1NE+aZpm4TwbT1pSNGK9KQxQGcXjqoHMeB+VZCFknzNEoIU/vydbjZMlAuw==
-
-"@next/swc-linux-x64-musl@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.8.tgz#db572da90ab3bce0bc58595c6b8c2d32ec64a2d3"
-  integrity sha512-1F4kuFRQE10GSx7LMSvRmjMXFGpxT30g8rZzq9r/p/WKdErA4WB4uxaKEX0P8AINfuN63i4luKdR+LoacgBhYw==
-
-"@next/swc-win32-arm64-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.8.tgz#f33e2e56a96489935f87c6dd28f79a7b7ed3778f"
-  integrity sha512-QuRe49jqCV61TysGopC1P0HPqFAMZMWe1nbIQLyOkDLkULmZR8N2eYZq7fwqvZE5YwhMmJA/grwWFVBqSEh5Kg==
-
-"@next/swc-win32-ia32-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.8.tgz#0f6c7f3e50fc1a4752aed5c862f53c86ce77e3b8"
-  integrity sha512-0RV3/julybJr1IlPCowIWrJJZyAl+sOakJEM15y1NOOsbwTQ5eKZZXSi+7e23TN4wmy5HwNvn2dKzgOEVJ+jbA==
-
-"@next/swc-win32-x64-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.8.tgz#eae6d4c94dc8aae8ba177e2de02080339d0d4563"
-  integrity sha512-tTga6OFfO2JS+Yt5hdryng259c/tzNgSWkdiU2E+RBHiysAIOta57n4PJ8iPahOSqEqjaToPI76wM+o441GaNQ==
+"@next/swc-android-arm-eabi@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.3.1.tgz#b15ce8ad376102a3b8c0f3c017dde050a22bb1a3"
+  integrity sha512-i+BvKA8tB//srVPPQxIQN5lvfROcfv4OB23/L1nXznP+N/TyKL8lql3l7oo2LNhnH66zWhfoemg3Q4VJZSruzQ==
+
+"@next/swc-android-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.3.1.tgz#85d205f568a790a137cb3c3f720d961a2436ac9c"
+  integrity sha512-CmgU2ZNyBP0rkugOOqLnjl3+eRpXBzB/I2sjwcGZ7/Z6RcUJXK5Evz+N0ucOxqE4cZ3gkTeXtSzRrMK2mGYV8Q==
+
+"@next/swc-darwin-arm64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.3.1.tgz#b105457d6760a7916b27e46c97cb1a40547114ae"
+  integrity sha512-hT/EBGNcu0ITiuWDYU9ur57Oa4LybD5DOQp4f22T6zLfpoBMfBibPtR8XktXmOyFHrL/6FC2p9ojdLZhWhvBHg==
+
+"@next/swc-darwin-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.3.1.tgz#6947b39082271378896b095b6696a7791c6e32b1"
+  integrity sha512-9S6EVueCVCyGf2vuiLiGEHZCJcPAxglyckTZcEwLdJwozLqN0gtS0Eq0bQlGS3dH49Py/rQYpZ3KVWZ9BUf/WA==
+
+"@next/swc-freebsd-x64@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-freebsd-x64/-/swc-freebsd-x64-12.3.1.tgz#2b6c36a4d84aae8b0ea0e0da9bafc696ae27085a"
+  integrity sha512-qcuUQkaBZWqzM0F1N4AkAh88lLzzpfE6ImOcI1P6YeyJSsBmpBIV8o70zV+Wxpc26yV9vpzb+e5gCyxNjKJg5Q==
+
+"@next/swc-linux-arm-gnueabihf@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.3.1.tgz#6e421c44285cfedac1f4631d5de330dd60b86298"
+  integrity sha512-diL9MSYrEI5nY2wc/h/DBewEDUzr/DqBjIgHJ3RUNtETAOB3spMNHvJk2XKUDjnQuluLmFMloet9tpEqU2TT9w==
+
+"@next/swc-linux-arm64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.3.1.tgz#8863f08a81f422f910af126159d2cbb9552ef717"
+  integrity sha512-o/xB2nztoaC7jnXU3Q36vGgOolJpsGG8ETNjxM1VAPxRwM7FyGCPHOMk1XavG88QZSQf+1r+POBW0tLxQOJ9DQ==
+
+"@next/swc-linux-arm64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.3.1.tgz#0038f07cf0b259d70ae0c80890d826dfc775d9f3"
+  integrity sha512-2WEasRxJzgAmP43glFNhADpe8zB7kJofhEAVNbDJZANp+H4+wq+/cW1CdDi8DqjkShPEA6/ejJw+xnEyDID2jg==
+
+"@next/swc-linux-x64-gnu@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.3.1.tgz#c66468f5e8181ffb096c537f0dbfb589baa6a9c1"
+  integrity sha512-JWEaMyvNrXuM3dyy9Pp5cFPuSSvG82+yABqsWugjWlvfmnlnx9HOQZY23bFq3cNghy5V/t0iPb6cffzRWylgsA==
+
+"@next/swc-linux-x64-musl@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.3.1.tgz#c6269f3e96ac0395bc722ad97ce410ea5101d305"
+  integrity sha512-xoEWQQ71waWc4BZcOjmatuvPUXKTv6MbIFzpm4LFeCHsg2iwai0ILmNXf81rJR+L1Wb9ifEke2sQpZSPNz1Iyg==
+
+"@next/swc-win32-arm64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.3.1.tgz#83c639ee969cee36ce247c3abd1d9df97b5ecade"
+  integrity sha512-hswVFYQYIeGHE2JYaBVtvqmBQ1CppplQbZJS/JgrVI3x2CurNhEkmds/yqvDONfwfbttTtH4+q9Dzf/WVl3Opw==
+
+"@next/swc-win32-ia32-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.3.1.tgz#52995748b92aa8ad053440301bc2c0d9fbcf27c2"
+  integrity sha512-Kny5JBehkTbKPmqulr5i+iKntO5YMP+bVM8Hf8UAmjSMVo3wehyLVc9IZkNmcbxi+vwETnQvJaT5ynYBkJ9dWA==
+
+"@next/swc-win32-x64-msvc@12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.3.1.tgz#27d71a95247a9eaee03d47adee7e3bd594514136"
+  integrity sha512-W1ijvzzg+kPEX6LAc+50EYYSEo0FVu7dmTE+t+DM4iOLqgGHoW9uYSz9wCVdkXOEEMP9xhXfGpcSxsfDucyPkA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -515,6 +505,13 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
   integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
 
+"@swc/helpers@0.4.11":
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.11.tgz#db23a376761b3d31c26502122f349a21b592c8de"
+  integrity sha512-rEUrBSGIoSFuYxwBYtlUFMlE2CwGhmW+w9355/5oduSw8e5h2+Tj4UrAGNNgP9915++wj5vkQo0UuOBqOAq4nw==
+  dependencies:
+    tslib "^2.4.0"
+
 "@types/debug@^4.0.0":
   version "4.1.7"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.7.tgz#7cc0ea761509124709b8b2d1090d8f6c17aadb82"
@@ -561,11 +558,6 @@
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
   integrity sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==
 
-"@types/node@*":
-  version "17.0.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.8.tgz#50d680c8a8a78fe30abe6906453b21ad8ab0ad7b"
-  integrity sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==
-
 "@types/node@17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.0.tgz#62797cee3b8b497f6547503b2312254d4fe3c2bb"
@@ -904,11 +896,6 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -942,10 +929,10 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-caniuse-lite@^1.0.30001283:
-  version "1.0.30001299"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
-  integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
+caniuse-lite@^1.0.30001406:
+  version "1.0.30001412"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz#30f67d55a865da43e0aeec003f073ea8764d5d7c"
+  integrity sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==
 
 ccount@^2.0.0:
   version "2.0.1"
@@ -1033,11 +1020,6 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^1.2.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
-  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
 comma-separated-tokens@^1.0.0:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz#632b80b6117867a158f1080ad498b2fbe7e3f5ea"
@@ -1053,13 +1035,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-convert-source-map@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
 convert-source-map@^1.5.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -1204,11 +1179,6 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
 enquirer@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.3.6.tgz#2a7fe5dd634a1e4125a975ec994ff5456dc3734d"
@@ -1798,7 +1768,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.3, inherits@~2.0.4:
+inherits@2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1969,15 +1939,6 @@ isexe@^2.0.0:
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-jest-worker@27.0.0-next.5:
-  version "27.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
-  integrity sha512-mk0umAQ5lT+CaOJ+Qp01N6kz48sJG2kr2n1rX0koqKf6FIygQV0qLOdN9SCYID4IVeSigDOcPeGLozdMLYfb5g==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -2120,15 +2081,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-loader-utils@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -2332,11 +2284,6 @@ mdurl@^1.0.0:
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
   integrity sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
 
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -2656,10 +2603,10 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-nanoid@^3.1.23:
-  version "3.1.32"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.32.tgz#8f96069e6239cc0a9ae8c0d3b41a3b4933a88c0a"
-  integrity sha512-F8mf7R3iT9bvThBoW4tGXhXFHCctyCiUUPrWF8WaTqa3h96d9QybkSeba43XVOOE3oiLfkVDe4bT8MeGmkrTxw==
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -2671,39 +2618,31 @@ next-absolute-url@^1.2.2:
   resolved "https://registry.yarnpkg.com/next-absolute-url/-/next-absolute-url-1.2.2.tgz#9aba5adcee8effcffd63271d99e13213ad04c23b"
   integrity sha512-Z2+LZXQTthhw2je9u4eq8QWXxXd57a6b54x9exBfQX4Dct6YxaMjcXZWNLHd9AOlCue84EsMpdSGP7wACqUnPg==
 
-next@^12.0.8:
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.0.8.tgz#29138f7cdd045e4bbba466af45bf430e769634b4"
-  integrity sha512-g5c1Kuh1F8tSXJn2rVvzYBzqe9EXaR6+rY3/KrQ7y0D9FueRLfHI35wM0DRadDcPSc3+vncspfhYH3jnYE/KjA==
-  dependencies:
-    "@next/env" "12.0.8"
-    "@next/react-refresh-utils" "12.0.8"
-    caniuse-lite "^1.0.30001283"
-    jest-worker "27.0.0-next.5"
-    node-fetch "2.6.1"
-    postcss "8.2.15"
-    react-is "17.0.2"
-    react-refresh "0.8.3"
-    stream-browserify "3.0.0"
-    styled-jsx "5.0.0-beta.6"
-    use-subscription "1.5.1"
+next@^12.3.1:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/next/-/next-12.3.1.tgz#127b825ad2207faf869b33393ec8c75fe61e50f1"
+  integrity sha512-l7bvmSeIwX5lp07WtIiP9u2ytZMv7jIeB8iacR28PuUEFG5j0HGAPnMqyG5kbZNBG2H7tRsrQ4HCjuMOPnANZw==
+  dependencies:
+    "@next/env" "12.3.1"
+    "@swc/helpers" "0.4.11"
+    caniuse-lite "^1.0.30001406"
+    postcss "8.4.14"
+    styled-jsx "5.0.7"
+    use-sync-external-store "1.2.0"
   optionalDependencies:
-    "@next/swc-android-arm64" "12.0.8"
-    "@next/swc-darwin-arm64" "12.0.8"
-    "@next/swc-darwin-x64" "12.0.8"
-    "@next/swc-linux-arm-gnueabihf" "12.0.8"
-    "@next/swc-linux-arm64-gnu" "12.0.8"
-    "@next/swc-linux-arm64-musl" "12.0.8"
-    "@next/swc-linux-x64-gnu" "12.0.8"
-    "@next/swc-linux-x64-musl" "12.0.8"
-    "@next/swc-win32-arm64-msvc" "12.0.8"
-    "@next/swc-win32-ia32-msvc" "12.0.8"
-    "@next/swc-win32-x64-msvc" "12.0.8"
-
-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+    "@next/swc-android-arm-eabi" "12.3.1"
+    "@next/swc-android-arm64" "12.3.1"
+    "@next/swc-darwin-arm64" "12.3.1"
+    "@next/swc-darwin-x64" "12.3.1"
+    "@next/swc-freebsd-x64" "12.3.1"
+    "@next/swc-linux-arm-gnueabihf" "12.3.1"
+    "@next/swc-linux-arm64-gnu" "12.3.1"
+    "@next/swc-linux-arm64-musl" "12.3.1"
+    "@next/swc-linux-x64-gnu" "12.3.1"
+    "@next/swc-linux-x64-musl" "12.3.1"
+    "@next/swc-win32-arm64-msvc" "12.3.1"
+    "@next/swc-win32-ia32-msvc" "12.3.1"
+    "@next/swc-win32-x64-msvc" "12.3.1"
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -2862,6 +2801,11 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -2872,14 +2816,14 @@ popper.js@1.16.1-lts:
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
   integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
 
-postcss@8.2.15:
-  version "8.2.15"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
-  integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
+postcss@8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
   dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map "^0.6.1"
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -2937,14 +2881,13 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.0"
 
 react-hook-form@^7.22.2:
   version "7.23.0"
@@ -2961,16 +2904,16 @@ react-intersection-observer@^8.33.1:
   resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.33.1.tgz#8e6442cac7052ed63056e191b7539e423e7d5c64"
   integrity sha512-3v+qaJvp3D1MlGHyM+KISVg/CMhPiOlO6FgPHcluqHkx4YFCLuyXNlQ/LE6UkbODXlQcLOppfX6UMxCEkUhDLw==
 
-react-is@17.0.2, "react-is@^16.8.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.0, react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-markdown@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-7.1.2.tgz#c9fa9d1c87e24529f028e1cdf731e81ccdd8e547"
@@ -2991,11 +2934,6 @@ react-markdown@^7.1.2:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-react-refresh@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
-  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
-
 react-syntax-highlighter@^15.4.5:
   version "15.4.5"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz#db900d411d32a65c8e90c39cd64555bf463e712e"
@@ -3017,22 +2955,12 @@ react-transition-group@^4.4.0, react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-readable-stream@^3.5.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
 
 readdirp@~3.6.0:
   version "3.6.0"
@@ -3162,11 +3090,6 @@ safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
 sass@^1.45.0:
   version "1.48.0"
   resolved "https://registry.yarnpkg.com/sass/-/sass-1.48.0.tgz#b53cfccc1b8ab4be375cc54f306fda9d4711162c"
@@ -3176,13 +3099,12 @@ sass@^1.45.0:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.0:
+  version "0.23.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 semver@^6.3.0:
   version "6.3.0"
@@ -3227,21 +3149,16 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.1.tgz#a1741c131e3c77d048252adfa24e23b908670caf"
   integrity sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==
 
-source-map@0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 space-separated-tokens@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
@@ -3252,19 +3169,6 @@ space-separated-tokens@^2.0.0:
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.1.tgz#43193cec4fb858a2ce934b7f98b7f2c18107098b"
   integrity sha512-ekwEbFp5aqSPKaqeY1PGrlGQxPNaq+Cnx4+bE2D8sciBQrHpbwoBbawqTN2+6jPs9IdWxxiUcN0K2pkczD3zmw==
 
-stream-browserify@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
-  integrity sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==
-  dependencies:
-    inherits "~2.0.4"
-    readable-stream "^3.5.0"
-
-string-hash@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
-
 string.prototype.matchall@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.6.tgz#5abb5dabc94c7b0ea2380f65ba610b3a544b15fa"
@@ -3295,13 +3199,6 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
 strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
@@ -3326,29 +3223,10 @@ style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-jsx@5.0.0-beta.6:
-  version "5.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.6.tgz#666552f8831a06f80c9084a47afc4b32b0c9f461"
-  integrity sha512-b1cM7Xyp2r1lsNpvoZ6wmTI8qxD0557vH2feHakNU8LMkzfJDgTQMul6O7sSYY0GxQ73pKEN69hCDp71w6Q0nA==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "7.14.5"
-    "@babel/types" "7.15.0"
-    convert-source-map "1.7.0"
-    loader-utils "1.2.3"
-    source-map "0.7.3"
-    string-hash "1.1.3"
-    stylis "3.5.4"
-    stylis-rule-sheet "0.0.10"
-
-stylis-rule-sheet@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@3.5.4:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
+styled-jsx@5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.7.tgz#be44afc53771b983769ac654d355ca8d019dff48"
+  integrity sha512-b3sUzamS086YLRuvnaDigdAewz1/EFYlHpYBP5mZovKEdQQOIIYq8lApylub3HHZ6xFjV051kkGU7cudJmrXEA==
 
 stylis@4.0.13:
   version "4.0.13"
@@ -3369,13 +3247,6 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -3428,6 +3299,11 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -3545,17 +3421,10 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-use-subscription@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
-
-util-deprecate@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
+use-sync-external-store@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
 uuid@^8.3.2:
   version "8.3.2"

From bcab21ec48ad7fd2389d44626f5d2509f51a4957 Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Thu, 29 Sep 2022 03:37:11 +0900
Subject: [PATCH 6/8] change to ISR

---
 src/pages/blogs/[uuid].tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/blogs/[uuid].tsx b/src/pages/blogs/[uuid].tsx
index 42dd3e3..65c4278 100644
--- a/src/pages/blogs/[uuid].tsx
+++ b/src/pages/blogs/[uuid].tsx
@@ -1,25 +1,35 @@
 import type { Blog } from '#src/types';
-import type { GetServerSideProps, NextPage } from 'next';
+import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 
-import { BlogDetail } from '#src/components';
+import { BlogDetail, Loader } from '#src/components';
 import { ClientLayout } from '#src/layouts/client';
 import { fetchBlog } from '#src/utils/api/blog';
+import { useRouter } from 'next/router';
 
 const BlogDetailPage: NextPage<{ blog: Blog }> = ({ blog }) => {
+    const router = useRouter();
     return (
         <ClientLayout isAdsExist>
-            <BlogDetail blog={blog} />
+            {router.isFallback ? <Loader /> : <BlogDetail blog={blog} />}
         </ClientLayout>
     );
 };
 
 export default BlogDetailPage;
 
-export const getServerSideProps: GetServerSideProps = async (context) => {
+export const getStaticPaths: GetStaticPaths = () => {
+    return {
+        paths: [],
+        fallback: true,
+    };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
     try {
-        const blog = await fetchBlog(context.query.uuid as string);
+        const blog = await fetchBlog(context.params?.uuid as string);
         return {
             props: { blog },
+            revalidate: 60,
         };
     } catch (error) {
         return { notFound: true };

From 06ea84873c476dc818f0e0b15eea9eb8bd161b22 Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Thu, 29 Sep 2022 03:37:20 +0900
Subject: [PATCH 7/8] change to CSR

---
 src/pages/blogs/index.tsx | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx
index fa45dcf..cd1339f 100644
--- a/src/pages/blogs/index.tsx
+++ b/src/pages/blogs/index.tsx
@@ -1,13 +1,14 @@
-import type { GetServerSideProps, NextPage } from 'next';
+import type { NextPage } from 'next';
 
 import Head from 'next/head';
 
-import { BlogList } from '#src/components';
+import { BlogList, Loader } from '#src/components';
 import { ClientLayout } from '#src/layouts/client';
-import { fetchBlogList } from '#src/utils/api/blog';
-import { Blog } from '#src/types';
+import { useBlogListState } from '#src/utils/hooks';
+import { Suspense } from 'react';
 
-const BlogListPage: NextPage<{ blogs: Blog[] }> = ({ blogs }) => {
+const BlogListPage: NextPage = () => {
+    const { data: blogs } = useBlogListState();
     return (
         <>
             <Head>
@@ -16,17 +17,12 @@ const BlogListPage: NextPage<{ blogs: Blog[] }> = ({ blogs }) => {
             </Head>
 
             <ClientLayout isAdsExist>
-                <BlogList blogs={blogs} />
+                <Suspense fallback={<Loader />}>
+                    <BlogList blogs={blogs ?? []} />
+                </Suspense>
             </ClientLayout>
         </>
     );
 };
 
 export default BlogListPage;
-
-export const getServerSideProps: GetServerSideProps = async () => {
-    const blogs = await fetchBlogList();
-    return {
-        props: { blogs },
-    };
-};

From e7c1ca804cc1ed853eb9b0930014fe2fe526f63b Mon Sep 17 00:00:00 2001
From: calliope <calliope183@gmail.com>
Date: Thu, 29 Sep 2022 03:37:32 +0900
Subject: [PATCH 8/8] `suspense: true`

---
 src/utils/hooks.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index 456019f..17d4f96 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -8,8 +8,10 @@ import useSWR from 'swr';
 import { fetchBlogList, fetchCategories } from '#src/utils/api/blog';
 
 export const useBlogListState = (onlyPublished = true) => {
-    return useSWR<Blog[], Error>('blogList', () =>
-        fetchBlogList(onlyPublished),
+    return useSWR<Blog[], Error>(
+        'blogList',
+        () => fetchBlogList(onlyPublished),
+        { suspense: true },
     );
 };