From 7586bbb709831fa4d26e49f3e91aa9dc76e8a78b Mon Sep 17 00:00:00 2001
From: typhoon0678 <typhoon0678@gmail.com>
Date: Thu, 7 Aug 2025 06:20:38 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=A1=B0=ED=9A=8C=EC=88=98=20?=
 =?UTF-8?q?=EC=A6=9D=EA=B0=80,=20=EC=A1=B0=ED=9A=8C=20api=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/apis/post.tsx        | 12 ++++-
 src/common/types/post.tsx       |  1 +
 src/components/post/TagCard.tsx |  4 +-
 src/pages/blog/BlogTagPage.tsx  | 31 ++++++-------
 src/pages/post/PostPage.tsx     | 79 ++++++++++++++++++++-------------
 5 files changed, 78 insertions(+), 49 deletions(-)

diff --git a/src/common/apis/post.tsx b/src/common/apis/post.tsx
index 83bc9c7..445916c 100644
--- a/src/common/apis/post.tsx
+++ b/src/common/apis/post.tsx
@@ -5,7 +5,7 @@ import {
     PostListTagRequest,
     PostRequest,
     PostSearchRequest,
-    PostUpdateRequest
+    PostUpdateRequest,
 } from "../types/post.tsx";
 import {
     postListRequestToParameter,
@@ -35,4 +35,12 @@ export const getMemberTagPosts = async (postListTagRequest: PostListTagRequest)
     await axiosApi.get(`/post/member/tag${postListTagRequestToParameter(postListTagRequest)}`);
 
 export const searchPost = async (postSearchRequest: PostSearchRequest) =>
-    await axiosApi.get(`/post/search${postListSearchRequestToParameter(postSearchRequest)}`);
\ No newline at end of file
+    await axiosApi.get(`/post/search${postListSearchRequestToParameter(postSearchRequest)}`);
+
+export const incrementPostViewCount = async (id: string) =>
+    await axiosApi.post(`/post/view/increment`, { 
+        postId: id 
+    });
+
+export const getPostViewCount = async (id: string) =>
+    await axiosApi.get(`/post/view/${id}`);
\ No newline at end of file
diff --git a/src/common/types/post.tsx b/src/common/types/post.tsx
index 3398dc3..a3674b4 100644
--- a/src/common/types/post.tsx
+++ b/src/common/types/post.tsx
@@ -52,6 +52,7 @@ export interface PostResponse {
     username: string;
     folder?: PostFolderResponse;
     tags: TagResponse[];
+    viewCount: number;
     createdAt: Date;
 }
 
diff --git a/src/components/post/TagCard.tsx b/src/components/post/TagCard.tsx
index f0c2c60..af46502 100644
--- a/src/components/post/TagCard.tsx
+++ b/src/components/post/TagCard.tsx
@@ -1,6 +1,6 @@
-import {TagResponse} from "../../common/types/post.tsx";
+import { TagResponse } from "../../common/types/post.tsx";
 
-function TagCard({tag, onClick}: { tag: TagResponse, onClick: () => void }) {
+function TagCard({ tag, onClick }: { tag: TagResponse, onClick: () => void }) {
     return (
         <button
             className="border border-lime-50 shadow text-lime-700 rounded-4xl px-4 py-2 font-semibold text-sm
diff --git a/src/pages/blog/BlogTagPage.tsx b/src/pages/blog/BlogTagPage.tsx
index e49610c..e4c0bf5 100644
--- a/src/pages/blog/BlogTagPage.tsx
+++ b/src/pages/blog/BlogTagPage.tsx
@@ -1,21 +1,21 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import {useEffect, useState} from "react";
-import {PostResponse, TagResponse} from "../../common/types/post.tsx";
-import {PageResponse} from "../../common/types/common.tsx";
-import {getMemberTags} from "../../common/apis/blog.tsx";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { PostResponse, TagResponse } from "../../common/types/post.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
+import { getMemberTags } from "../../common/apis/blog.tsx";
 import TagCard from "../../components/post/TagCard.tsx";
 import PostCard from "../../components/post/PostCard.tsx";
-import {getMemberTagPosts} from "../../common/apis/post.tsx";
+import { getMemberTagPosts } from "../../common/apis/post.tsx";
 import PaginationButton from "../../components/common/PaginationButton.tsx";
-import {TextLink} from "../../components/common/TextButton.tsx";
+import { TextLink } from "../../components/common/TextButton.tsx";
 
 function BlogTagPage() {
 
-    const {username} = useParams();
+    const { username } = useParams();
     const navigate = useNavigate();
-    const {state} = useLocation();
-    const {tagId} = state;
+    const { state } = useLocation();
+    const { tagId } = state;
 
 
     const [tags, setTags] = useState<TagResponse[]>([]);
@@ -77,22 +77,23 @@ function BlogTagPage() {
         <BasicLayout>
             <div className="w-full flex flex-col gap-y-8">
                 <TextLink text={`${username}의 블로그`}
-                          to={`/blog/${username}`}
-                          addStyle="flex justify-start !text-xl !font-jalnan"/>
+                    to={`/blog/${username}`}
+                    addStyle="flex justify-start !text-xl !font-jalnan" />
                 <div className="flex gap-x-4">
                     {tags.map(tag =>
                         <TagCard
+                            key={tag.id}
                             tag={tag}
-                            onClick={() => handleSelectedTag(tag)}/>)}
+                            onClick={() => handleSelectedTag(tag)} />)}
                 </div>
                 <p>
                     {selectedTag && <span className="mr-2 font-bold">"{selectedTag.name}"</span>}
                     {pageInfo.totalElements}개의 게시글
                 </p>
                 <div className="w-full flex flex-col items-center gap-x-4">
-                    {posts.map(post => <PostCard post={post}/>)}
+                    {posts.map(post => <PostCard key={post.id} post={post} />)}
                 </div>
-                <PaginationButton pageInfo={pageInfo} setPage={setPage}/>
+                <PaginationButton pageInfo={pageInfo} setPage={setPage} />
             </div>
         </BasicLayout>
     );
diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx
index 0be43ab..736c00e 100644
--- a/src/pages/post/PostPage.tsx
+++ b/src/pages/post/PostPage.tsx
@@ -1,25 +1,26 @@
-import {Link, useNavigate, useParams} from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import BasicLayout from "../../layout/BasicLayout.tsx";
 import DOMPurify from "dompurify";
-import {fullDateToKorean} from "../../common/util/date.tsx";
+import { fullDateToKorean } from "../../common/util/date.tsx";
 import TagCard from "../../components/post/TagCard.tsx";
-import {getPost} from "../../common/apis/post.tsx";
-import {ChangeEvent, useEffect, useState} from "react";
-import {PostResponse} from "../../common/types/post.tsx";
-import {checkUUID} from "../../common/util/regex.tsx";
-import {sortTagByName} from "../../common/util/sort.tsx";
+import { getPost, getPostViewCount, incrementPostViewCount } from "../../common/apis/post.tsx";
+import { ChangeEvent, useEffect, useState } from "react";
+import { PostResponse } from "../../common/types/post.tsx";
+import { checkUUID } from "../../common/util/regex.tsx";
+import { sortTagByName } from "../../common/util/sort.tsx";
 import CommentCard from "../../components/post/CommentCard.tsx";
 import CommentTextField from "../../components/post/CommentTextField.tsx";
-import {FillLink, LoadMoreButton} from "../../components/common/FillButton.tsx";
-import {getComments, saveComment, updateComment} from "../../common/apis/comment.tsx";
-import {CommentResponse, CommentType} from "../../common/types/comment.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {PageResponse} from "../../common/types/common.tsx";
+import { FillLink, LoadMoreButton } from "../../components/common/FillButton.tsx";
+import { getComments, saveComment, updateComment } from "../../common/apis/comment.tsx";
+import { CommentResponse, CommentType } from "../../common/types/comment.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
+import { FaEye } from "react-icons/fa6";
 
 function PostPage() {
 
-    const {id} = useParams();
+    const { id } = useParams();
     const navigate = useNavigate();
     const loginState = useSelector((state: RootState) => state.loginSlice);
 
@@ -29,11 +30,12 @@ function PostPage() {
         content: "",
         username: "",
         tags: [],
+        viewCount: 0,
         createdAt: new Date(),
     });
     const [commentInput, setCommentInput] = useState("");
     const [comments, setComments] = useState<CommentType[]>([]);
-    const [pageInfo, setPageInfo] = useState<PageResponse>({number: 0, size: 10, totalPages: 0, totalElements: 0});
+    const [pageInfo, setPageInfo] = useState<PageResponse>({ number: 0, size: 10, totalPages: 0, totalElements: 0 });
     const [trigger, setTrigger] = useState(false);
 
     const handleCommentInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -99,7 +101,7 @@ function PostPage() {
     }
 
     const handleLoadMoreComment = () => {
-        setPageInfo({...pageInfo, number: pageInfo.number + 1});
+        setPageInfo({ ...pageInfo, number: pageInfo.number + 1 });
         setTrigger(prev => !prev);
     }
     const handleLoadMoreSubComment = (page: number, parentId: string) => {
@@ -131,15 +133,29 @@ function PostPage() {
             return;
         }
 
+        incrementPostViewCount(id);
+
+        getPostViewCount(id)
+            .then((res) => {
+                setPost(prev => ({ ...prev, viewCount: res.data.viewCount }));
+            });
+
         getPost(id)
             .then((res) => {
-                setPost({
-                    ...res.data,
+                setPost(prev => ({
+                    ...prev,
+                    id: res.data.id,
+                    title: res.data.title,
+                    content: res.data.content,
+                    username: res.data.username,
+                    folder: res.data.folder,
                     tags: sortTagByName(res.data.tags),
-                });
+                    createdAt: new Date(res.data.createdAt),
+                }))
                 setTrigger(prev => !prev);
             })
             .catch((error) => alert(error.response.data.message));
+
     }, []);
 
     useEffect(() => {
@@ -186,13 +202,13 @@ function PostPage() {
                                 <div className="flex gap-x-4">
                                     <div className="text-xs">{` > `}</div>
                                     <Link to={`/blog/${post.username}?folder=${post.folder.id}`}
-                                          className="text-xs">{post.folder.title}</Link>
+                                        className="text-xs">{post.folder.title}</Link>
                                 </div>}
                         </div>
                     </div>
                     <div className="flex flex-row flex-wrap w-full justify-center text-center items-center gap-4">
                         <Link to={`/blog/${post.username}`}
-                              className="text-md font-semibold text-lime-700 hover:text-lime-400">
+                            className="text-md font-semibold text-lime-700 hover:text-lime-400">
                             {post.username}
                         </Link>
                         <div className="text-md text-gray-600">
@@ -206,11 +222,14 @@ function PostPage() {
                         {post.tags.map(tag =>
                             <TagCard key={tag.id} tag={tag} onClick={() => {
                                 navigate(`/search?keyword=${tag.name}&option=TAG&sort=createdAt&isDescending=true&tab=post`)
-                            }}/>)}
+                            }} />)}
+                    </div>
+                    <div className="w-full max-w-3xl mx-auto flex justify-end items-center gap-x-2 text-gray-600">
+                        <FaEye />{post.viewCount}
                     </div>
                 </div>
                 <div className="w-full max-w-3xl mx-auto py-8 space-y-4 break-words"
-                     dangerouslySetInnerHTML={{__html: safeContent}}/>
+                    dangerouslySetInnerHTML={{ __html: safeContent }} />
                 <div>
                 </div>
                 <div className="w-full max-w-3xl mx-auto py-8 rounded-2xl flex flex-col gap-y-0 my-8">
@@ -218,13 +237,13 @@ function PostPage() {
                         ? <CommentTextField
                             value={commentInput}
                             onChange={handleCommentInput}
-                            handleSubmit={handleCommentSubmit}/>
+                            handleSubmit={handleCommentSubmit} />
                         : <div className="flex flex-col items-end gap-y-2">
                             <textarea className="w-full border border-gray-400 bg-gray-100 opacity-50"
-                                      disabled={true}
-                                      rows={5}
-                                      minLength={5}/>
-                            <FillLink text={"로그인"} to={"/login"} addStyle={"w-fit"}/>
+                                disabled={true}
+                                rows={5}
+                                minLength={5} />
+                            <FillLink text={"로그인"} to={"/login"} addStyle={"w-fit"} />
                         </div>
                     }
                     <p>댓글 ({pageInfo.totalElements})</p>
@@ -234,11 +253,11 @@ function PostPage() {
                             comment={comment}
                             handleLoadMoreSubComment={handleLoadMoreSubComment}
                             handleCommentSubmit={handleCommentSubmit}
-                            pageSize={pageInfo.size}/>)}
+                            pageSize={pageInfo.size} />)}
                     {pageInfo.number + 1 < pageInfo.totalPages &&
                         <LoadMoreButton
                             onClick={handleLoadMoreComment}
-                            addStyle={"!bg-gray-400"}/>}
+                            addStyle={"!bg-gray-400"} />}
                 </div>
 
             </div>

From 8e3f8698f37f127dc7a8f4c601612a602ce8708f Mon Sep 17 00:00:00 2001
From: typhoon0678 <typhoon0678@gmail.com>
Date: Thu, 7 Aug 2025 06:22:23 +0900
Subject: [PATCH 2/2] =?UTF-8?q?style:=20prettier=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                  |   4 +-
 src/common/apis/AxiosApi.tsx                 |   4 +-
 src/common/apis/blog.tsx                     |   6 +-
 src/common/apis/comment.tsx                  |   4 +-
 src/common/apis/member.tsx                   |   8 +-
 src/common/apis/post.tsx                     |   4 +-
 src/common/router/blogRouter.tsx             |   8 +-
 src/common/router/page.tsx                   |  10 +-
 src/common/router/postRouter.tsx             |   8 +-
 src/common/router/root.tsx                   |  16 +-
 src/common/router/signupRouter.tsx           |  12 +-
 src/common/slices/loginSlice.tsx             |   4 +-
 src/common/types/comment.tsx                 |   2 +-
 src/common/types/post.tsx                    |   2 +-
 src/common/util/infiniteScroll.tsx           |  18 +-
 src/common/util/sort.tsx                     |   2 +-
 src/common/util/url.tsx                      |   8 +-
 src/components/blog/BlogSearchBar.tsx        |   2 +-
 src/components/blog/BlogSideBar.tsx          |  34 ++--
 src/components/blog/BlogTagCard.tsx          |  12 +-
 src/components/common/FillButton.tsx         |  10 +-
 src/components/common/Footer.tsx             |   8 +-
 src/components/common/Header.tsx             |  34 ++--
 src/components/common/IconButton.tsx         |   4 +-
 src/components/common/OutlineButton.tsx      |   6 +-
 src/components/common/PaginationButton.tsx   |  56 +++----
 src/components/common/ProfileImageCircle.tsx |  10 +-
 src/components/common/TextButton.tsx         |   6 +-
 src/components/folder/FolderCardList.tsx     | 104 ++++++------
 src/components/folder/FolderSelectBox.tsx    |  22 +--
 src/components/member/LoginButton.tsx        |   6 +-
 src/components/member/LoginTextField.tsx     |  20 +--
 src/components/post/CommentCard.tsx          |  50 +++---
 src/components/post/CommentTextField.tsx     |  22 +--
 src/components/post/PostCard.tsx             |  18 +-
 src/components/post/TagChip.tsx              |   6 +-
 src/components/setting/SettingSideBar.tsx    |   8 +-
 src/index.css                                | 166 +++++++++----------
 src/layout/BasicLayout.tsx                   |   8 +-
 src/layout/LoadingLayout.tsx                 |  10 +-
 src/layout/ModalLayout.tsx                   |   6 +-
 src/main.tsx                                 |   6 +-
 src/pages/MainPage.tsx                       |  12 +-
 src/pages/blog/BlogPage.tsx                  |  50 +++---
 src/pages/member/CodePage.tsx                |  18 +-
 src/pages/member/EmailPage.tsx               |  16 +-
 src/pages/member/LoginPage.tsx               |  34 ++--
 src/pages/member/PlatformPage.tsx            |   8 +-
 src/pages/member/SignupPage.tsx              |  28 ++--
 src/pages/post/SearchPage.tsx                | 104 ++++++------
 src/pages/post/WritePage.tsx                 |  84 +++++-----
 src/pages/setting/FolderSettingPage.tsx      |  58 +++----
 src/pages/setting/PostSettingPage.tsx        |  52 +++---
 src/pages/setting/ProfileSettingPage.tsx     |  42 ++---
 src/pages/setting/SettingPage.tsx            |  30 ++--
 src/store.tsx                                |   2 +-
 56 files changed, 646 insertions(+), 646 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 06da3e8..9691eaf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,10 @@
-import {RouterProvider} from 'react-router-dom'
+import { RouterProvider } from 'react-router-dom'
 import root from './common/router/root'
 
 function App() {
 
     return (
-        <RouterProvider router={root}/>
+        <RouterProvider router={root} />
     )
 }
 
diff --git a/src/common/apis/AxiosApi.tsx b/src/common/apis/AxiosApi.tsx
index e1334f5..33245ab 100644
--- a/src/common/apis/AxiosApi.tsx
+++ b/src/common/apis/AxiosApi.tsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 import store from "../../store.tsx";
-import {login} from "../slices/loginSlice.tsx";
+import { login } from "../slices/loginSlice.tsx";
 
 const axiosApi = axios.create({
     baseURL: `${import.meta.env.VITE_SERVER_URL}/api`,
@@ -27,7 +27,7 @@ axiosApi.interceptors.response.use(
             originalRequest._retry = true;
 
             try {
-                const refreshResponse = await axiosApi.get('/member/refresh', {withCredentials: true});
+                const refreshResponse = await axiosApi.get('/member/refresh', { withCredentials: true });
 
                 if (refreshResponse.data.status === 200) {
                     store.dispatch(login({
diff --git a/src/common/apis/blog.tsx b/src/common/apis/blog.tsx
index 6cc051d..a096818 100644
--- a/src/common/apis/blog.tsx
+++ b/src/common/apis/blog.tsx
@@ -1,6 +1,6 @@
-import {FolderDeleteRequest, FolderRequest, PostListMemberRequest} from "../types/blog.tsx";
+import { FolderDeleteRequest, FolderRequest, PostListMemberRequest } from "../types/blog.tsx";
 import axiosApi from "./AxiosApi.tsx";
-import {postListMemberRequestToParameter} from "../util/url.tsx";
+import { postListMemberRequestToParameter } from "../util/url.tsx";
 
 export const getMemberPosts = (postListMemberRequest: PostListMemberRequest) =>
     axiosApi.get(`/post/member${postListMemberRequestToParameter(postListMemberRequest)}`);
@@ -15,4 +15,4 @@ export const saveAndUpdateFolder = (folderRequestList: FolderRequest[]) =>
     axiosApi.put("/folders", folderRequestList);
 
 export const deleteFolder = (folderDeleteRequestList: FolderDeleteRequest[]) =>
-    axiosApi.delete("/folders", {data: folderDeleteRequestList});
\ No newline at end of file
+    axiosApi.delete("/folders", { data: folderDeleteRequestList });
\ No newline at end of file
diff --git a/src/common/apis/comment.tsx b/src/common/apis/comment.tsx
index 99c4394..49e1dd2 100644
--- a/src/common/apis/comment.tsx
+++ b/src/common/apis/comment.tsx
@@ -1,6 +1,6 @@
 import axiosApi from "./AxiosApi.tsx";
-import {CommentListRequest, CommentRequest, CommentUpdateRequest} from "../types/comment.tsx";
-import {commentListRequestToParameter} from "../util/url.tsx";
+import { CommentListRequest, CommentRequest, CommentUpdateRequest } from "../types/comment.tsx";
+import { commentListRequestToParameter } from "../util/url.tsx";
 
 export const getComments = async (commentListRequest: CommentListRequest) =>
     await axiosApi.get(`/comment${commentListRequestToParameter(commentListRequest)}`);
diff --git a/src/common/apis/member.tsx b/src/common/apis/member.tsx
index 9277926..bfae393 100644
--- a/src/common/apis/member.tsx
+++ b/src/common/apis/member.tsx
@@ -1,6 +1,6 @@
 import axiosApi from "./AxiosApi.tsx";
-import {MemberProfileSearchRequest} from "../types/member.tsx";
-import {memberProfileSearchRequestToParameter} from "../util/url.tsx";
+import { MemberProfileSearchRequest } from "../types/member.tsx";
+import { memberProfileSearchRequestToParameter } from "../util/url.tsx";
 
 export const sendMail = async (email: string) =>
     await axiosApi.post("/verify", {
@@ -24,12 +24,12 @@ export const loginApi = async (email: string, password: string) =>
     await axiosApi.post("/member/login", {
         email: email,
         password: password
-    }, {withCredentials: true});
+    }, { withCredentials: true });
 
 export const logoutApi = async (email: string) =>
     await axiosApi.post("/member/logout", {
         email: email
-    }, {withCredentials: true});
+    }, { withCredentials: true });
 
 export const handleKakaoLogin = () =>
     location.href = `${import.meta.env.VITE_SERVER_URL}/oauth2/authorization/kakao`;
diff --git a/src/common/apis/post.tsx b/src/common/apis/post.tsx
index 445916c..74e2444 100644
--- a/src/common/apis/post.tsx
+++ b/src/common/apis/post.tsx
@@ -38,8 +38,8 @@ export const searchPost = async (postSearchRequest: PostSearchRequest) =>
     await axiosApi.get(`/post/search${postListSearchRequestToParameter(postSearchRequest)}`);
 
 export const incrementPostViewCount = async (id: string) =>
-    await axiosApi.post(`/post/view/increment`, { 
-        postId: id 
+    await axiosApi.post(`/post/view/increment`, {
+        postId: id
     });
 
 export const getPostViewCount = async (id: string) =>
diff --git a/src/common/router/blogRouter.tsx b/src/common/router/blogRouter.tsx
index dd6f259..3b8b354 100644
--- a/src/common/router/blogRouter.tsx
+++ b/src/common/router/blogRouter.tsx
@@ -1,16 +1,16 @@
-import {Suspense} from "react";
-import {Blog, BlogTag, Loading} from "./page.tsx";
+import { Suspense } from "react";
+import { Blog, BlogTag, Loading } from "./page.tsx";
 
 const blogRouter = () => {
 
     return [
         {
             path: ':username',
-            element: <Suspense fallback={Loading}><Blog/></Suspense>
+            element: <Suspense fallback={Loading}><Blog /></Suspense>
         },
         {
             path: ':username/tag',
-            element: <Suspense fallback={Loading}><BlogTag/></Suspense>
+            element: <Suspense fallback={Loading}><BlogTag /></Suspense>
         },
     ];
 }
diff --git a/src/common/router/page.tsx b/src/common/router/page.tsx
index 6b29228..888942a 100644
--- a/src/common/router/page.tsx
+++ b/src/common/router/page.tsx
@@ -1,16 +1,16 @@
-import {lazy} from "react";
+import { lazy } from "react";
 
 export const Loading =
     <div className="flex items-center justify-center w-screen h-screen">
         <svg aria-hidden="true"
-             className="inline w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
-             viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+            className="inline w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
+            viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path
                 d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                fill="currentColor"/>
+                fill="currentColor" />
             <path
                 d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                fill="currentFill"/>
+                fill="currentFill" />
         </svg>
     </div>;
 
diff --git a/src/common/router/postRouter.tsx b/src/common/router/postRouter.tsx
index f27b41a..a6df455 100644
--- a/src/common/router/postRouter.tsx
+++ b/src/common/router/postRouter.tsx
@@ -1,16 +1,16 @@
-import {Suspense} from "react";
-import {Loading, Post, Write} from "./page.tsx";
+import { Suspense } from "react";
+import { Loading, Post, Write } from "./page.tsx";
 
 const postRouter = () => {
 
     return [
         {
             path: 'edit/:id',
-            element: <Suspense fallback={Loading}><Write/></Suspense>
+            element: <Suspense fallback={Loading}><Write /></Suspense>
         },
         {
             path: ':id',
-            element: <Suspense fallback={Loading}><Post/></Suspense>
+            element: <Suspense fallback={Loading}><Post /></Suspense>
         },
     ];
 }
diff --git a/src/common/router/root.tsx b/src/common/router/root.tsx
index 498baa8..c9105c7 100644
--- a/src/common/router/root.tsx
+++ b/src/common/router/root.tsx
@@ -1,6 +1,6 @@
-import {createBrowserRouter} from "react-router-dom";
-import {Suspense} from "react";
-import {Loading, Login, Main, Search, Setting, Write} from "./page.tsx";
+import { createBrowserRouter } from "react-router-dom";
+import { Suspense } from "react";
+import { Loading, Login, Main, Search, Setting, Write } from "./page.tsx";
 import postRouter from "./postRouter.tsx";
 import blogRouter from "./blogRouter.tsx";
 import signupRouter from "./signupRouter.tsx";
@@ -8,23 +8,23 @@ import signupRouter from "./signupRouter.tsx";
 const root = createBrowserRouter([
     {
         path: '',
-        element: <Suspense fallback={Loading}><Main/></Suspense>
+        element: <Suspense fallback={Loading}><Main /></Suspense>
     },
     {
         path: '/login',
-        element: <Suspense fallback={Loading}><Login/></Suspense>
+        element: <Suspense fallback={Loading}><Login /></Suspense>
     },
     {
         path: '/setting/:section',
-        element: <Suspense fallback={Loading}><Setting/></Suspense>
+        element: <Suspense fallback={Loading}><Setting /></Suspense>
     },
     {
         path: '/search',
-        element: <Suspense fallback={Loading}><Search/></Suspense>
+        element: <Suspense fallback={Loading}><Search /></Suspense>
     },
     {
         path: '/write',
-        element: <Suspense fallback={Loading}><Write/></Suspense>
+        element: <Suspense fallback={Loading}><Write /></Suspense>
     },
     {
         path: '/signup',
diff --git a/src/common/router/signupRouter.tsx b/src/common/router/signupRouter.tsx
index f8c46b6..8a29da7 100644
--- a/src/common/router/signupRouter.tsx
+++ b/src/common/router/signupRouter.tsx
@@ -1,24 +1,24 @@
-import {Code, Email, Loading, Platform, Signup} from "./page.tsx";
-import {Suspense} from "react";
+import { Code, Email, Loading, Platform, Signup } from "./page.tsx";
+import { Suspense } from "react";
 
 const signupRouter = () => {
 
     return [
         {
             path: 'platform',
-            element: <Suspense fallback={Loading}><Platform/></Suspense>
+            element: <Suspense fallback={Loading}><Platform /></Suspense>
         },
         {
             path: 'email',
-            element: <Suspense fallback={Loading}><Email/></Suspense>
+            element: <Suspense fallback={Loading}><Email /></Suspense>
         },
         {
             path: 'code',
-            element: <Suspense fallback={Loading}><Code/></Suspense>
+            element: <Suspense fallback={Loading}><Code /></Suspense>
         },
         {
             path: '',
-            element: <Suspense fallback={Loading}><Signup/></Suspense>
+            element: <Suspense fallback={Loading}><Signup /></Suspense>
         },
     ];
 }
diff --git a/src/common/slices/loginSlice.tsx b/src/common/slices/loginSlice.tsx
index 6a81f8c..585eab9 100644
--- a/src/common/slices/loginSlice.tsx
+++ b/src/common/slices/loginSlice.tsx
@@ -1,4 +1,4 @@
-import {createSlice} from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 
 const initialState = {
     isLogin: false,
@@ -51,6 +51,6 @@ const loginSlice = createSlice({
     }
 });
 
-export const {login, logout, setUsername, setProfile, setReloadedFalse} = loginSlice.actions;
+export const { login, logout, setUsername, setProfile, setReloadedFalse } = loginSlice.actions;
 
 export default loginSlice.reducer;
\ No newline at end of file
diff --git a/src/common/types/comment.tsx b/src/common/types/comment.tsx
index 50b3732..6489f80 100644
--- a/src/common/types/comment.tsx
+++ b/src/common/types/comment.tsx
@@ -1,4 +1,4 @@
-import {PageResponse} from "./common.tsx";
+import { PageResponse } from "./common.tsx";
 
 export interface CommentType {
     id: string,
diff --git a/src/common/types/post.tsx b/src/common/types/post.tsx
index a3674b4..36c87a2 100644
--- a/src/common/types/post.tsx
+++ b/src/common/types/post.tsx
@@ -1,4 +1,4 @@
-import {PageResponse} from "./common.tsx";
+import { PageResponse } from "./common.tsx";
 
 export interface PostRequest {
     title: string,
diff --git a/src/common/util/infiniteScroll.tsx b/src/common/util/infiniteScroll.tsx
index d47e1ce..4dc4ea9 100644
--- a/src/common/util/infiniteScroll.tsx
+++ b/src/common/util/infiniteScroll.tsx
@@ -1,5 +1,5 @@
-import {useEffect, useState, useMemo, useRef, MutableRefObject} from 'react';
-import {PostResponse} from "../types/post.tsx";
+import { useEffect, useState, useMemo, useRef, MutableRefObject } from 'react';
+import { PostResponse } from "../types/post.tsx";
 
 export interface InfiniteScrollProps {
     root?: Element | null;
@@ -11,13 +11,13 @@ export interface InfiniteScrollProps {
 }
 
 const useInfiniteScroll = ({
-                               root = null,
-                               target,
-                               threshold = 1,
-                               rootMargin = '0px',
-                               targetArray,
-                               endPoint = 1
-                           }: InfiniteScrollProps) => {
+    root = null,
+    target,
+    threshold = 1,
+    rootMargin = '0px',
+    targetArray,
+    endPoint = 1
+}: InfiniteScrollProps) => {
 
     const [page, setPage] = useState<number>(0);
     const currentChild = useRef<Element | null>(null);
diff --git a/src/common/util/sort.tsx b/src/common/util/sort.tsx
index d3253f0..658de8d 100644
--- a/src/common/util/sort.tsx
+++ b/src/common/util/sort.tsx
@@ -1,4 +1,4 @@
-import {TagResponse} from "../types/post.tsx";
+import { TagResponse } from "../types/post.tsx";
 
 export const sortByName = (names: string[]) => {
     names.sort((a: string, b: string) => {
diff --git a/src/common/util/url.tsx b/src/common/util/url.tsx
index 0078556..778614c 100644
--- a/src/common/util/url.tsx
+++ b/src/common/util/url.tsx
@@ -1,7 +1,7 @@
-import {PostListRequest, PostListTagRequest, PostSearchRequest} from "../types/post.tsx";
-import {CommentListRequest} from "../types/comment.tsx";
-import {PostListMemberRequest} from "../types/blog.tsx";
-import {MemberProfileSearchRequest} from "../types/member.tsx";
+import { PostListRequest, PostListTagRequest, PostSearchRequest } from "../types/post.tsx";
+import { CommentListRequest } from "../types/comment.tsx";
+import { PostListMemberRequest } from "../types/blog.tsx";
+import { MemberProfileSearchRequest } from "../types/member.tsx";
 
 export const postListRequestToParameter = (postListRequest: PostListRequest) => {
     const sorts = postListRequest.sorts.map(sort => `sorts=${sort}`).join("&");
diff --git a/src/components/blog/BlogSearchBar.tsx b/src/components/blog/BlogSearchBar.tsx
index ffadb33..e5ff335 100644
--- a/src/components/blog/BlogSearchBar.tsx
+++ b/src/components/blog/BlogSearchBar.tsx
@@ -1,4 +1,4 @@
-function BlogSearchBar({value, setValue}: {
+function BlogSearchBar({ value, setValue }: {
     value: string,
     setValue: (value: string) => void,
 }) {
diff --git a/src/components/blog/BlogSideBar.tsx b/src/components/blog/BlogSideBar.tsx
index e847b7f..daf1de0 100644
--- a/src/components/blog/BlogSideBar.tsx
+++ b/src/components/blog/BlogSideBar.tsx
@@ -1,13 +1,13 @@
-import {FolderType} from "../../common/types/blog.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {OutlineLink} from "../common/OutlineButton.tsx";
+import { FolderType } from "../../common/types/blog.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { OutlineLink } from "../common/OutlineButton.tsx";
 import BlogTagCard from "./BlogTagCard.tsx";
-import {getFolderTitle} from "../../common/util/string.tsx";
+import { getFolderTitle } from "../../common/util/string.tsx";
 import ProfileImageCircle from "../common/ProfileImageCircle.tsx";
-import {TagResponse} from "../../common/types/post.tsx";
+import { TagResponse } from "../../common/types/post.tsx";
 
-function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSelectedFolder, bgColor, side}: {
+function BlogSideBar({ folders, tags, username, profileUrl, selectedFolder, setSelectedFolder, bgColor, side }: {
     folders: FolderType[],
     tags: TagResponse[],
     username: string | undefined,
@@ -23,15 +23,15 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
     return (
         <div className={`${bgColor} ${side && "h-screen overflow-y-scroll"}`}>
             <div className="flex flex-col justify-start items-center py-4 gap-4 z-200">
-                <ProfileImageCircle profileUrl={profileUrl} size="md"/>
+                <ProfileImageCircle profileUrl={profileUrl} size="md" />
                 <div className="flex justify-center items-center text-xl font-black">
                     {username}
                 </div>
                 {username === loginState.username && (
                     <div className="flex justify-between items-center gap-x-4 my-2 text-xs">
-                        <OutlineLink text={"게시글 작성"} to={"/write"}/>
+                        <OutlineLink text={"게시글 작성"} to={"/write"} />
                         <OutlineLink text={"블로그 설정"} to={"/setting/folder"}
-                                     addStyle={"!border-neutral-500 !text-neutral-500 hover:bg-neutral-500 hover:!text-white"}/>
+                            addStyle={"!border-neutral-500 !text-neutral-500 hover:bg-neutral-500 hover:!text-white"} />
                     </div>
                 )}
             </div>
@@ -40,7 +40,7 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
                 <BlogFolderList
                     folders={folders}
                     selectedFolder={selectedFolder}
-                    setSelectedFolder={setSelectedFolder}/>
+                    setSelectedFolder={setSelectedFolder} />
             </div>
             <div className="flex flex-col justify-center items-center gap-4 py-8">
                 <div className="font-bold text-lime-700 text-center">태그</div>
@@ -49,7 +49,7 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
                         <BlogTagCard
                             key={tag.id}
                             tag={tag}
-                            username={username || ""}/>
+                            username={username || ""} />
                     ))}
                     {tags.length === 0 &&
                         <div className="text-center text-gray-600">
@@ -61,7 +61,7 @@ function BlogSideBar({folders, tags, username, profileUrl, selectedFolder, setSe
     );
 }
 
-function BlogFolderList({depth = 0, folders, selectedFolder, setSelectedFolder}: {
+function BlogFolderList({ depth = 0, folders, selectedFolder, setSelectedFolder }: {
     depth?: number,
     folders: FolderType[],
     selectedFolder: FolderType | null,
@@ -84,7 +84,7 @@ function BlogFolderList({depth = 0, folders, selectedFolder, setSelectedFolder}:
         <div className="w-full flex flex-col gap-y-1">
             {folders.length > 1 && folders.map(folder =>
                 <div key={folder.id} className={`flex flex-col gap-y-2`}>
-                    {depth === 0 && <div className="h-2"/>}
+                    {depth === 0 && <div className="h-2" />}
                     <button
                         className={`flex justify-start items-center hover:opacity-50 hover:cursor-pointer gap-x-2
                         ${depth === 0 && "font-bold"}
@@ -92,16 +92,16 @@ function BlogFolderList({depth = 0, folders, selectedFolder, setSelectedFolder}:
                         ${selectedFolder?.id === folder.id && "!text-lime-600"}
                         ${!selectedFolder && folder.id === "" && "!text-lime-600"}`}
                         onClick={() => setSelectedFolder(folder)}>
-                        {depth === 2 && <div className="w-8"/>}
+                        {depth === 2 && <div className="w-8" />}
                         {getFolderTitle(folder.title, depth)}
                         {folder.id !== "" && <p className="text-xs font-light">({getPostCount(folder)})</p>}
                     </button>
-                    {folder.subFolders.length > 0 && depth === 0 && <hr className="text-gray-400"/>}
+                    {folder.subFolders.length > 0 && depth === 0 && <hr className="text-gray-400" />}
                     <BlogFolderList
                         depth={depth + 1}
                         folders={folder.subFolders}
                         selectedFolder={selectedFolder}
-                        setSelectedFolder={setSelectedFolder}/>
+                        setSelectedFolder={setSelectedFolder} />
                 </div>)}
             {depth === 0 && folders.length <= 1 &&
                 <div className="text-center text-gray-600">
diff --git a/src/components/blog/BlogTagCard.tsx b/src/components/blog/BlogTagCard.tsx
index 99f187e..5a499f5 100644
--- a/src/components/blog/BlogTagCard.tsx
+++ b/src/components/blog/BlogTagCard.tsx
@@ -1,8 +1,8 @@
-import {TagResponse} from "../../common/types/post.tsx";
-import {TextButton} from "../common/TextButton.tsx";
-import {useNavigate} from "react-router-dom";
+import { TagResponse } from "../../common/types/post.tsx";
+import { TextButton } from "../common/TextButton.tsx";
+import { useNavigate } from "react-router-dom";
 
-function BlogTagCard({tag, username}: {
+function BlogTagCard({ tag, username }: {
     tag: TagResponse,
     username: string,
 }) {
@@ -12,8 +12,8 @@ function BlogTagCard({tag, username}: {
     return (
         <TextButton
             text={tag.name}
-            onClick={() => navigate(`/blog/${username}/tag`, {state: {tagId: tag.id}})}
-            addStyle={"!px-1 !py-0 hover:text-lime-700"}/>
+            onClick={() => navigate(`/blog/${username}/tag`, { state: { tagId: tag.id } })}
+            addStyle={"!px-1 !py-0 hover:text-lime-700"} />
     );
 }
 
diff --git a/src/components/common/FillButton.tsx b/src/components/common/FillButton.tsx
index 603ee07..94ffd1a 100644
--- a/src/components/common/FillButton.tsx
+++ b/src/components/common/FillButton.tsx
@@ -1,8 +1,8 @@
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const className = " bg-lime-500 hover:brightness-105 text-white text-sm font-semibold py-2 px-4 rounded hover:cursor-pointer";
 
-export function FillButton({text, onClick, addStyle, disabled}: {
+export function FillButton({ text, onClick, addStyle, disabled }: {
     text: string,
     onClick: () => void,
     addStyle?: string,
@@ -18,7 +18,7 @@ export function FillButton({text, onClick, addStyle, disabled}: {
     );
 }
 
-export function FillLink({text, to, addStyle}: { text: string, to: string, addStyle?: string }) {
+export function FillLink({ text, to, addStyle }: { text: string, to: string, addStyle?: string }) {
     return (
         <Link to={to} className={`${addStyle} ${className}`}>
             {text}
@@ -26,7 +26,7 @@ export function FillLink({text, to, addStyle}: { text: string, to: string, addSt
     );
 }
 
-export function LoadMoreButton({onClick, addStyle, disabled}: {
+export function LoadMoreButton({ onClick, addStyle, disabled }: {
     onClick: () => void,
     addStyle?: string,
     disabled?: boolean
@@ -36,6 +36,6 @@ export function LoadMoreButton({onClick, addStyle, disabled}: {
             text={"더 불러오기"}
             onClick={onClick}
             addStyle={`${addStyle} "!bg-gray-400 hover:brightness-105"`}
-            disabled={disabled}/>
+            disabled={disabled} />
     );
 }
\ No newline at end of file
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
index 1d3b6a8..b56b7bb 100644
--- a/src/components/common/Footer.tsx
+++ b/src/components/common/Footer.tsx
@@ -1,12 +1,12 @@
-import {FaGithub} from "react-icons/fa";
-import {Link} from "react-router-dom";
+import { FaGithub } from "react-icons/fa";
+import { Link } from "react-router-dom";
 
 function Footer() {
     return (
         <div className="flex justify-center items-center py-8 bg-gray-100">
             <Link to={"https://github.com/orgs/diglog-project/repositories"} target={"_blank"}
-                  className="text-gray-400">
-                <FaGithub className="size-6"/>
+                className="text-gray-400">
+                <FaGithub className="size-6" />
             </Link>
         </div>
     );
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
index 2ee0acd..0ca984c 100644
--- a/src/components/common/Header.tsx
+++ b/src/components/common/Header.tsx
@@ -1,12 +1,12 @@
-import {Link, useNavigate} from "react-router-dom";
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {useEffect, useRef, useState} from "react";
-import {TextLink} from "./TextButton.tsx";
-import {MdOutlineSearch} from "react-icons/md";
+import { Link, useNavigate } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { useEffect, useRef, useState } from "react";
+import { TextLink } from "./TextButton.tsx";
+import { MdOutlineSearch } from "react-icons/md";
 import IconButton from "./IconButton.tsx";
-import {getProfile, logoutApi} from "../../common/apis/member.tsx";
-import {logout, setProfile, setReloadedFalse} from "../../common/slices/loginSlice.tsx";
+import { getProfile, logoutApi } from "../../common/apis/member.tsx";
+import { logout, setProfile, setReloadedFalse } from "../../common/slices/loginSlice.tsx";
 import ProfileImageCircle from "./ProfileImageCircle.tsx";
 
 function Header() {
@@ -76,7 +76,7 @@ function Header() {
         <div className="border border-b-2 border-gray-200 px-4 flex justify-between items-center w-full">
             <Link to={"/"} className="flex items-center justify-center gap-x-2">
                 <img src="/logo.png" alt="logo"
-                     className="size-8 mb-1"/>
+                    className="size-8 mb-1" />
                 <div className="flex items-center text-lg h-16 font-jalnan">
                     DIGLOG
                 </div>
@@ -84,13 +84,13 @@ function Header() {
             <div className="flex justify-center items-center gap-x-3">
                 <IconButton
                     icon={<MdOutlineSearch
-                        className="size-5"/>}
-                    onClick={() => navigate("/search?word=&option=ALL&sort=createdAt&isDescending=true&tab=post")}/>
+                        className="size-5" />}
+                    onClick={() => navigate("/search?word=&option=ALL&sort=createdAt&isDescending=true&tab=post")} />
                 {loginState.isLogin
                     ? <div ref={dashboardRef}>
                         <div
                             className="relative flex justify-around items-center w-full">
-                            <ProfileImageCircle profileUrl={loginState.profileUrl} onClick={handleDropDown}/>
+                            <ProfileImageCircle profileUrl={loginState.profileUrl} onClick={handleDropDown} />
                             <div
                                 className={`${isOpen ? "" : "hidden"} absolute z-99 top-12 right-0 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
                                 <div className="flex flex-col gap-1 px-4 py-3 text-sm text-gray-900">
@@ -99,15 +99,15 @@ function Header() {
                                 </div>
                                 <div className="py-2 text-sm">
                                     <Link to={`/write`}
-                                          className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
+                                        className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                         게시글 작성
                                     </Link>
                                     <Link to={`/blog/${loginState.username}`}
-                                          className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
+                                        className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                         내 블로그
                                     </Link>
                                     <Link to={`/setting/profile`}
-                                          className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
+                                        className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                         설정
                                     </Link>
                                 </div>
@@ -122,8 +122,8 @@ function Header() {
                         </div>
                     </div>
                     : <div className="flex justify-center items-center mr-4">
-                        <TextLink text={"로그인"} to={"/login"} addStyle={"hover:text-lime-700"}/>
-                        <TextLink text={"회원가입"} to={"/signup/platform"} addStyle={"hover:text-lime-700 hidden sm:block"}/>
+                        <TextLink text={"로그인"} to={"/login"} addStyle={"hover:text-lime-700"} />
+                        <TextLink text={"회원가입"} to={"/signup/platform"} addStyle={"hover:text-lime-700 hidden sm:block"} />
                     </div>}
             </div>
         </div>
diff --git a/src/components/common/IconButton.tsx b/src/components/common/IconButton.tsx
index 0995c47..ac246df 100644
--- a/src/components/common/IconButton.tsx
+++ b/src/components/common/IconButton.tsx
@@ -1,6 +1,6 @@
-import {ReactNode} from 'react';
+import { ReactNode } from 'react';
 
-function IconButton({icon, onClick, addStyle}: { icon: ReactNode; onClick: () => void, addStyle?: string }) {
+function IconButton({ icon, onClick, addStyle }: { icon: ReactNode; onClick: () => void, addStyle?: string }) {
     return (
         <button onClick={onClick} className={`${addStyle} size-10 rounded-full hover:bg-gray-100 hover:cursor-pointer flex justify-center items-center`}>
             {icon}
diff --git a/src/components/common/OutlineButton.tsx b/src/components/common/OutlineButton.tsx
index 8e62863..e36f2ce 100644
--- a/src/components/common/OutlineButton.tsx
+++ b/src/components/common/OutlineButton.tsx
@@ -1,8 +1,8 @@
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const className = " bg-transparent hover:bg-lime-300 text-lime-700 font-semibold hover:text-white py-2 px-4 border border-lime-500 hover:border-transparent rounded hover:cursor-pointer";
 
-export function OutlineButton({text, onClick, addStyle}: { text: string, onClick?: () => void, addStyle?: string }) {
+export function OutlineButton({ text, onClick, addStyle }: { text: string, onClick?: () => void, addStyle?: string }) {
     return (
         <button onClick={onClick} className={`${addStyle} ${className}`}>
             {text}
@@ -10,7 +10,7 @@ export function OutlineButton({text, onClick, addStyle}: { text: string, onClick
     );
 }
 
-export function OutlineLink({text, to, addStyle}: { text: string, to: string, addStyle?: string }) {
+export function OutlineLink({ text, to, addStyle }: { text: string, to: string, addStyle?: string }) {
     return (
         <Link to={to} className={`${addStyle} ${className}`}>
             {text}
diff --git a/src/components/common/PaginationButton.tsx b/src/components/common/PaginationButton.tsx
index eec7241..6685337 100644
--- a/src/components/common/PaginationButton.tsx
+++ b/src/components/common/PaginationButton.tsx
@@ -1,11 +1,11 @@
-import {PageResponse} from "../../common/types/common.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
 import {
     MdKeyboardDoubleArrowLeft,
     MdKeyboardDoubleArrowRight
 } from "react-icons/md";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 
-function PaginationButton({pageInfo, setPage}: {
+function PaginationButton({ pageInfo, setPage }: {
     pageInfo: PageResponse,
     setPage: (page: number) => void,
 }) {
@@ -16,7 +16,7 @@ function PaginationButton({pageInfo, setPage}: {
     const [startPage, setStartPage] = useState(0);
 
     const getArray = (start: number, size: number) => {
-        return Array.from({length: size}, (_, index) => index + start);
+        return Array.from({ length: size }, (_, index) => index + start);
     }
 
     useEffect(() => {
@@ -30,42 +30,42 @@ function PaginationButton({pageInfo, setPage}: {
     return (
         <nav className="flex justify-center items-center gap-x-1" aria-label="Pagination">
             <button type="button"
-                    className="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 hover:cursor-pointer focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
-                    hidden={!(startPage !== 0)}
-                    onClick={() => {
-                        if (startPage !== 0) {
-                            setStartPage(startPage - paginationSize);
-                            setPage(startPage - paginationSize);
-                        }
-                    }}
-                    aria-label="Previous">
-                <MdKeyboardDoubleArrowLeft size={16}/>
+                className="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 hover:cursor-pointer focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
+                hidden={!(startPage !== 0)}
+                onClick={() => {
+                    if (startPage !== 0) {
+                        setStartPage(startPage - paginationSize);
+                        setPage(startPage - paginationSize);
+                    }
+                }}
+                aria-label="Previous">
+                <MdKeyboardDoubleArrowLeft size={16} />
                 <span className="sr-only">Previous</span>
             </button>
             <div className="flex items-center gap-x-1">
                 {pageList.map(currentPage =>
                     <button key={currentPage}
-                            type="button"
-                            className={`
+                        type="button"
+                        className={`
                             ${currentPage === pageInfo.number ? "bg-gray-200 focus:bg-gray-300 " : "hover:bg-gray-100 focus:bg-gray-100"}
                             min-h-[38px] min-w-[38px] flex justify-center items-center text-gray-800 py-2 px-3 text-sm rounded-lg hover:cursor-pointer focus:outline-none disabled:opacity-50 disabled:pointer-events-none`}
-                            onClick={() => setPage(currentPage)}
-                            aria-current="page">
+                        onClick={() => setPage(currentPage)}
+                        aria-current="page">
                         {currentPage + 1}
                     </button>)}
             </div>
             <button type="button"
-                    className="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 hover:cursor-pointer focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
-                    hidden={!(pageInfo.totalPages > startPage + paginationSize)}
-                    onClick={() => {
-                        if (pageInfo.totalPages > startPage + paginationSize) {
-                            setStartPage(startPage + paginationSize);
-                            setPage(startPage + paginationSize);
-                        }
-                    }}
-                    aria-label="Next">
+                className="min-h-[38px] min-w-[38px] py-2 px-2.5 inline-flex jusify-center items-center gap-x-2 text-sm rounded-lg text-gray-800 hover:bg-gray-100 hover:cursor-pointer focus:outline-none focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
+                hidden={!(pageInfo.totalPages > startPage + paginationSize)}
+                onClick={() => {
+                    if (pageInfo.totalPages > startPage + paginationSize) {
+                        setStartPage(startPage + paginationSize);
+                        setPage(startPage + paginationSize);
+                    }
+                }}
+                aria-label="Next">
                 <span className="sr-only">Next</span>
-                <MdKeyboardDoubleArrowRight size={16}/>
+                <MdKeyboardDoubleArrowRight size={16} />
             </button>
         </nav>
     );
diff --git a/src/components/common/ProfileImageCircle.tsx b/src/components/common/ProfileImageCircle.tsx
index 08c3fae..1584820 100644
--- a/src/components/common/ProfileImageCircle.tsx
+++ b/src/components/common/ProfileImageCircle.tsx
@@ -1,6 +1,6 @@
-import {MdOutlinePerson} from "react-icons/md";
+import { MdOutlinePerson } from "react-icons/md";
 
-function ProfileImageCircle({profileUrl, size, onClick, addStyle}: {
+function ProfileImageCircle({ profileUrl, size, onClick, addStyle }: {
     profileUrl: string | null,
     size?: string,
     onClick?: () => void,
@@ -22,12 +22,12 @@ function ProfileImageCircle({profileUrl, size, onClick, addStyle}: {
 
     if (profileUrl) {
         return <img className={`${imageSize} ${addStyle} rounded-full border border-gray-200 ${onClick && "hover:cursor-pointer"}`}
-                    onClick={onClick}
-                    src={profileUrl} alt="user_image"/>;
+            onClick={onClick}
+            src={profileUrl} alt="user_image" />;
     }
 
     return <MdOutlinePerson className={`${iconSize} ${addStyle} text-gray-700 m-1 rounded-full ${onClick && "hover:cursor-pointer"}`}
-                            onClick={onClick}/>;
+        onClick={onClick} />;
 }
 
 export default ProfileImageCircle;
\ No newline at end of file
diff --git a/src/components/common/TextButton.tsx b/src/components/common/TextButton.tsx
index ac444fb..2f0fb88 100644
--- a/src/components/common/TextButton.tsx
+++ b/src/components/common/TextButton.tsx
@@ -1,8 +1,8 @@
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 const className = " flex justify-center items-center bg-transparent text-sm py-2 px-4 hover:cursor-pointer";
 
-export function TextButton({text, onClick, addStyle}: { text: string, onClick?: () => void, addStyle?: string }) {
+export function TextButton({ text, onClick, addStyle }: { text: string, onClick?: () => void, addStyle?: string }) {
     return (
         <button onClick={onClick} className={`${addStyle} ${className}`}>
             {text}
@@ -10,7 +10,7 @@ export function TextButton({text, onClick, addStyle}: { text: string, onClick?:
     );
 }
 
-export function TextLink({text, to, addStyle}: { text: string, to: string, addStyle?: string }) {
+export function TextLink({ text, to, addStyle }: { text: string, to: string, addStyle?: string }) {
 
     return (
         <Link to={to} className={`${addStyle} ${className}`}>
diff --git a/src/components/folder/FolderCardList.tsx b/src/components/folder/FolderCardList.tsx
index 7f74d79..7daac42 100644
--- a/src/components/folder/FolderCardList.tsx
+++ b/src/components/folder/FolderCardList.tsx
@@ -1,28 +1,28 @@
-import {SortableContext, useSortable, verticalListSortingStrategy} from "@dnd-kit/sortable";
-import {FolderType} from "../../common/types/blog.tsx";
-import {DndContext, DragEndEvent} from "@dnd-kit/core";
-import {CSS} from "@dnd-kit/utilities";
-import {FillButton} from "../common/FillButton.tsx";
-import {MdOutlineMenu} from "react-icons/md";
-import {TextButton} from "../common/TextButton.tsx";
-import {restrictToVerticalAxis} from "@dnd-kit/modifiers";
-import {useEffect, useRef} from "react";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { FolderType } from "../../common/types/blog.tsx";
+import { DndContext, DragEndEvent } from "@dnd-kit/core";
+import { CSS } from "@dnd-kit/utilities";
+import { FillButton } from "../common/FillButton.tsx";
+import { MdOutlineMenu } from "react-icons/md";
+import { TextButton } from "../common/TextButton.tsx";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { useEffect, useRef } from "react";
 import * as React from "react";
 
 function FolderCardList({
-                            folders,
-                            depth = 0,
-                            editFolderId,
-                            editFolderTitle,
-                            setEditFolderId,
-                            setEditFolderTitle,
-                            handleEdit,
-                            addFolder,
-                            handleOnDragEnd,
-                            handleDelete,
-                            setSelectedFolder,
-                            setOpenMoveModal
-                        }: {
+    folders,
+    depth = 0,
+    editFolderId,
+    editFolderTitle,
+    setEditFolderId,
+    setEditFolderTitle,
+    handleEdit,
+    addFolder,
+    handleOnDragEnd,
+    handleDelete,
+    setSelectedFolder,
+    setOpenMoveModal
+}: {
     folders: FolderType[],
     depth?: number,
     editFolderId: string,
@@ -54,7 +54,7 @@ function FolderCardList({
                         handleOnDragEnd={handleOnDragEnd}
                         handleDelete={handleDelete}
                         setOpenMoveModal={setOpenMoveModal}
-                        setSelectedFolder={setSelectedFolder}/>
+                        setSelectedFolder={setSelectedFolder} />
                 ))}
             </SortableContext>
         </DndContext>
@@ -62,19 +62,19 @@ function FolderCardList({
 }
 
 function FolderCard({
-                        folder,
-                        depth,
-                        editFolderId,
-                        editFolderTitle,
-                        setEditFolderId,
-                        setEditFolderTitle,
-                        handleEdit,
-                        addFolder,
-                        handleOnDragEnd,
-                        handleDelete,
-                        setSelectedFolder,
-                        setOpenMoveModal
-                    }: {
+    folder,
+    depth,
+    editFolderId,
+    editFolderTitle,
+    setEditFolderId,
+    setEditFolderTitle,
+    handleEdit,
+    addFolder,
+    handleOnDragEnd,
+    handleDelete,
+    setSelectedFolder,
+    setOpenMoveModal
+}: {
     folder: FolderType,
     depth: number,
     editFolderId: string,
@@ -91,7 +91,7 @@ function FolderCard({
 
     const folderTitleRef = useRef<HTMLInputElement>(null);
 
-    const {attributes, listeners, setNodeRef, transform, transition} = useSortable({id: folder.id});
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: folder.id });
 
     const style = {
         transform: CSS.Translate.toString(transform),
@@ -113,12 +113,12 @@ function FolderCard({
     }
 
     const handleEditTitle = () => {
-        handleEdit({...folder, title: editFolderTitle});
+        handleEdit({ ...folder, title: editFolderTitle });
     }
 
     return (
         <div key={folder.id} ref={setNodeRef} style={style}
-             className="flex flex-col justify-start items-center">
+            className="flex flex-col justify-start items-center">
             <div
                 className="w-full flex justify-between items-center h-16 px-4 my-0.5 border border-gray-300 hover:border-gray-400 text-sm">
                 {folder.id === editFolderId
@@ -129,41 +129,41 @@ function FolderCard({
                             onChange={(e) => setEditFolderTitle(e.target.value)}
                             onKeyDown={handleEditTitleEnter}
                             ref={folderTitleRef}
-                            placeholder="폴더 이름"/>
+                            placeholder="폴더 이름" />
                         <div className="flex items-center gap-x-2">
                             <FillButton text={"취소"}
-                                        onClick={() => setEditFolderId("")}
-                                        addStyle={"!bg-gray-400 hover:brightness-110"}/>
+                                onClick={() => setEditFolderId("")}
+                                addStyle={"!bg-gray-400 hover:brightness-110"} />
                             <FillButton text={"수정"}
-                                        onClick={handleEditTitle}
-                                        addStyle={`${folder.title === editFolderTitle && "opacity-50 hover:!cursor-auto"}`}
-                                        disabled={folder.title === editFolderTitle}/>
+                                onClick={handleEditTitle}
+                                addStyle={`${folder.title === editFolderTitle && "opacity-50 hover:!cursor-auto"}`}
+                                disabled={folder.title === editFolderTitle} />
                         </div>
                     </div>
                     : <div className="w-full flex justify-between items-center ">
                         <div className="flex items-center gap-x-2">
                             <MdOutlineMenu {...attributes} {...listeners}
-                                           className="hover:cursor-pointer text-gray-600"/>
+                                className="hover:cursor-pointer text-gray-600" />
                             <p className="ml-2">{folder.title}</p>
                             <p className="text-xs font-light">({folder.postCount})</p>
                         </div>
                         <div className="flex justify-end items-center">
                             {depth !== 2 &&
                                 <TextButton text={"추가"}
-                                            onClick={() => addFolder(folder)}
-                                            addStyle={"text-xs hover:text-lime-600"}/>
+                                    onClick={() => addFolder(folder)}
+                                    addStyle={"text-xs hover:text-lime-600"} />
                             }
                             <TextButton text={"수정"} onClick={() => {
                                 setEditFolderId(folder.id);
                                 setEditFolderTitle(folder.title);
-                            }} addStyle={"text-xs hover:text-lime-600"}/>
+                            }} addStyle={"text-xs hover:text-lime-600"} />
                             <TextButton text={"삭제"} onClick={() => {
                                 handleDelete(folder);
-                            }} addStyle={"text-xs hover:text-lime-600"}/>
+                            }} addStyle={"text-xs hover:text-lime-600"} />
                             <TextButton text={"이동"} onClick={() => {
                                 setOpenMoveModal(true);
                                 setSelectedFolder(folder);
-                            }} addStyle={"text-xs hover:text-lime-600"}/>
+                            }} addStyle={"text-xs hover:text-lime-600"} />
                         </div>
                     </div>}
             </div>
@@ -182,7 +182,7 @@ function FolderCard({
                         handleOnDragEnd={handleOnDragEnd}
                         handleDelete={handleDelete}
                         setOpenMoveModal={setOpenMoveModal}
-                        setSelectedFolder={setSelectedFolder}/>
+                        setSelectedFolder={setSelectedFolder} />
                 </div>}
         </div>
     );
diff --git a/src/components/folder/FolderSelectBox.tsx b/src/components/folder/FolderSelectBox.tsx
index cdad268..a7b72c7 100644
--- a/src/components/folder/FolderSelectBox.tsx
+++ b/src/components/folder/FolderSelectBox.tsx
@@ -1,9 +1,9 @@
-import {FolderType} from "../../common/types/blog.tsx";
-import {MdOutlineArrowDropDown} from "react-icons/md";
-import {useEffect, useRef, useState} from "react";
-import {getFolderTitle} from "../../common/util/string.tsx";
+import { FolderType } from "../../common/types/blog.tsx";
+import { MdOutlineArrowDropDown } from "react-icons/md";
+import { useEffect, useRef, useState } from "react";
+import { getFolderTitle } from "../../common/util/string.tsx";
 
-function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setTargetFolder, center}: {
+function FolderSelectBox({ folders, depth = 0, selectedFolder, targetFolder, setTargetFolder, center }: {
     folders: FolderType[],
     depth?: number,
     selectedFolder?: FolderType | null,
@@ -32,12 +32,12 @@ function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setT
 
     return (
         <div ref={folderRef}
-             className={`w-full relative flex ${center ? "justify-center" : "justify-start"} text-gray-700 items-center my-2 text-sm font-normal`}>
+            className={`w-full relative flex ${center ? "justify-center" : "justify-start"} text-gray-700 items-center my-2 text-sm font-normal`}>
             <button
                 className="w-full flex justify-between items-center gap-x-2 px-4 py-2 border border-gray-200 hover:bg-gray-50 hover:cursor-pointer"
                 onClick={handleFolderOpen}>
                 {targetFolder ? targetFolder.title : "폴더 선택"}
-                <MdOutlineArrowDropDown/>
+                <MdOutlineArrowDropDown />
             </button>
             <div
                 className={`${folderOpen ? "" : "hidden"} h-72 min-h-16 overflow-y-scroll absolute z-50 w-full top-12 left-0 bg-white divide-y divide-gray-300 rounded-lg shadow-sm`}>
@@ -48,14 +48,14 @@ function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setT
                         depth={depth}
                         selectedFolder={selectedFolder}
                         setTargetFolder={setTargetFolder}
-                        setFolderOpen={setFolderOpen}/>
+                        setFolderOpen={setFolderOpen} />
                 )}
             </div>
         </div>
     );
 }
 
-function FolderSelectCard({folder, depth, selectedFolder, setTargetFolder, setFolderOpen}: {
+function FolderSelectCard({ folder, depth, selectedFolder, setTargetFolder, setFolderOpen }: {
     folder: FolderType,
     depth: number,
     selectedFolder?: FolderType | null,
@@ -72,7 +72,7 @@ function FolderSelectCard({folder, depth, selectedFolder, setTargetFolder, setFo
                     setFolderOpen(false);
                 }}>
                 <div className={`flex items-center gap-x-1 ${depth === 0 && "font-bold text-black"}`}>
-                    <div className={`w-${depth * 4}`}/>
+                    <div className={`w-${depth * 4}`} />
                     {getFolderTitle(folder.title, depth)}
                     {folder.id !== "empty" && <p className="text-xs font-light">({folder.postCount})</p>}
                 </div>
@@ -85,7 +85,7 @@ function FolderSelectCard({folder, depth, selectedFolder, setTargetFolder, setFo
                         selectedFolder={selectedFolder}
                         depth={depth + 1}
                         setTargetFolder={setTargetFolder}
-                        setFolderOpen={setFolderOpen}/>))}
+                        setFolderOpen={setFolderOpen} />))}
         </div>
     ) : <></>;
 }
diff --git a/src/components/member/LoginButton.tsx b/src/components/member/LoginButton.tsx
index 640398f..80691bc 100644
--- a/src/components/member/LoginButton.tsx
+++ b/src/components/member/LoginButton.tsx
@@ -1,6 +1,6 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
 
-function LoginButton({text, onClick, bgColor, disable, icon}: {
+function LoginButton({ text, onClick, bgColor, disable, icon }: {
     text: string,
     onClick: () => void,
     bgColor: string,
@@ -9,7 +9,7 @@ function LoginButton({text, onClick, bgColor, disable, icon}: {
 }) {
     return (
         <button onClick={onClick}
-                className={`rounded-[calc(12px)] ${bgColor} ${disable && "opacity-40 hover:!cursor-auto"} w-full h-14 flex gap-x-2 justify-center items-center hover:brightness-105 hover:cursor-pointer cursor`}>
+            className={`rounded-[calc(12px)] ${bgColor} ${disable && "opacity-40 hover:!cursor-auto"} w-full h-14 flex gap-x-2 justify-center items-center hover:brightness-105 hover:cursor-pointer cursor`}>
             {(icon) ? icon : null}
             <div>{text}</div>
         </button>
diff --git a/src/components/member/LoginTextField.tsx b/src/components/member/LoginTextField.tsx
index f3dc216..99596c8 100644
--- a/src/components/member/LoginTextField.tsx
+++ b/src/components/member/LoginTextField.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
-import {Ref} from "react";
+import { Ref } from "react";
 
-function LoginTextField({label, type, placeholder, value, setValue, customRef, error, isError, onKeyDown}: {
+function LoginTextField({ label, type, placeholder, value, setValue, customRef, error, isError, onKeyDown }: {
     label?: string,
     type: string,
     placeholder: string,
@@ -18,17 +18,17 @@ function LoginTextField({label, type, placeholder, value, setValue, customRef, e
                 {label}
             </label>
             <input type={type}
-                   placeholder={placeholder} required
-                   className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
-                   value={value}
-                   onChange={(event => setValue(event.target.value))}
-                   onKeyDown={onKeyDown}
-                   ref={customRef}
-                   autoComplete={"on"}/>
+                placeholder={placeholder} required
+                className="bg-gray-50 border border-gray-300 text-gray-900 text-md rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
+                value={value}
+                onChange={(event => setValue(event.target.value))}
+                onKeyDown={onKeyDown}
+                ref={customRef}
+                autoComplete={"on"} />
             {(error) && (
                 isError ?
                     <p className="h-4 mt-2 text-sm text-red-600">{error}</p>
-                    : <div className="h-4 mt-2"/>
+                    : <div className="h-4 mt-2" />
             )}
         </div>
     );
diff --git a/src/components/post/CommentCard.tsx b/src/components/post/CommentCard.tsx
index c52bf8c..9e01c6c 100644
--- a/src/components/post/CommentCard.tsx
+++ b/src/components/post/CommentCard.tsx
@@ -1,16 +1,16 @@
-import {relativeDateToKorean} from "../../common/util/date.tsx";
-import {MdOutlineAddComment, MdOutlineComment, MdOutlinePerson} from "react-icons/md";
-import {ChangeEvent, useState} from "react";
+import { relativeDateToKorean } from "../../common/util/date.tsx";
+import { MdOutlineAddComment, MdOutlineComment, MdOutlinePerson } from "react-icons/md";
+import { ChangeEvent, useState } from "react";
 import CommentTextField from "./CommentTextField.tsx";
-import {CommentType} from "../../common/types/comment.tsx";
-import {LoadMoreButton} from "../common/FillButton.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {TextButton} from "../common/TextButton.tsx";
-import {deleteComment} from "../../common/apis/comment.tsx";
-import {useNavigate} from "react-router-dom";
+import { CommentType } from "../../common/types/comment.tsx";
+import { LoadMoreButton } from "../common/FillButton.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { TextButton } from "../common/TextButton.tsx";
+import { deleteComment } from "../../common/apis/comment.tsx";
+import { useNavigate } from "react-router-dom";
 
-function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pageSize, depth = 0}: {
+function CommentCard({ comment, handleLoadMoreSubComment, handleCommentSubmit, pageSize, depth = 0 }: {
     comment: CommentType,
     handleLoadMoreSubComment: (page: number, parentId: string) => void,
     handleCommentSubmit: (commentId: string | null, content: string, taggedUsername: string | null, originalComment: CommentType | null) => void,
@@ -64,14 +64,14 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
 
     return (
         <div className={`flex ${depth === 0 && "pb-4"}`}>
-            {depth !== 0 && <div className="w-8"/>}
+            {depth !== 0 && <div className="w-8" />}
             <div className="flex-1 flex flex-col justify-center mt-4 text-sm">
                 <div className="flex flex-col gap-y-2 border rounded-2xl border-gray-300 px-4 pt-4 pb-2">
                     <div className="flex items-center gap-x-2">
                         {comment.member.profileUrl
                             ? <img className="size-6 rounded-full hover:cursor-pointer"
-                                   src={comment.member.profileUrl} alt="user_image"/>
-                            : <MdOutlinePerson className="size-5 text-gray-600"/>}
+                                src={comment.member.profileUrl} alt="user_image" />
+                            : <MdOutlinePerson className="size-5 text-gray-600" />}
                         <p className="font-semibold">
                             {comment.member.username}
                         </p>
@@ -83,8 +83,8 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                         {!showEditTextField &&
                             comment.taggedUsername &&
                             <span className="text-lime-700">
-                            @{comment.taggedUsername}
-                        </span>}
+                                @{comment.taggedUsername}
+                            </span>}
                         {showEditTextField
                             ? <CommentTextField
                                 value={editCommentInput}
@@ -92,7 +92,7 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                                 handleSubmit={handleCommentSubmit}
                                 taggedUsername={comment.taggedUsername}
                                 originalComment={comment}
-                                handleShowTextField={handleShowEdit}/>
+                                handleShowTextField={handleShowEdit} />
                             : <div className="leading-relaxed">{comment.content}</div>}
                     </div>
                     <div className="flex justify-between items-center">
@@ -103,22 +103,22 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                                     handleLoadMoreSubComment(page, comment.id);
                                     setPage(page + 1);
                                 }}>
-                                <MdOutlineComment className="text-gray-600 size-4"/>
+                                <MdOutlineComment className="text-gray-600 size-4" />
                                 답글 ({comment.replyCount})
                             </button>}
-                        <div/>
+                        <div />
                         {loginState.isLogin && !showEditTextField &&
                             <div className="flex items-center gap-x-4 text-gray-600">
                                 {comment.member.username === loginState.username &&
                                     <div className="flex items-center">
-                                        <TextButton text={"수정"} onClick={handleShowEdit} addStyle={"!text-xs"}/>
-                                        <TextButton text={"삭제"} onClick={handleDeleteComment} addStyle={"!text-xs"}/>
+                                        <TextButton text={"수정"} onClick={handleShowEdit} addStyle={"!text-xs"} />
+                                        <TextButton text={"삭제"} onClick={handleDeleteComment} addStyle={"!text-xs"} />
                                     </div>
                                 }
                                 <button
                                     className="w-fit flex justify-center items-center gap-x-1.5 text-xs hover:cursor-pointer rounded-md hover:brightness-120"
                                     onClick={handleOpenTextField}>
-                                    <MdOutlineAddComment className="size-3 mt-0.5"/>
+                                    <MdOutlineAddComment className="size-3 mt-0.5" />
                                     댓글 작성
                                 </button>
                             </div>
@@ -133,7 +133,7 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                             handleSubmit={handleCommentSubmit}
                             commentId={comment.id}
                             taggedUsername={taggedUsername}
-                            handleShowTextField={handleShowTextField}/>}
+                            handleShowTextField={handleShowTextField} />}
                 </div>
                 {comment.subComments &&
                     <div>
@@ -145,7 +145,7 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                                     handleLoadMoreSubComment={handleLoadMoreSubComment}
                                     handleCommentSubmit={handleCommentSubmit}
                                     pageSize={pageSize}
-                                    depth={depth + 1}/>
+                                    depth={depth + 1} />
                                 : null)}
                         {page !== 0 && (page) * 10 < comment.replyCount &&
                             <LoadMoreButton
@@ -153,7 +153,7 @@ function CommentCard({comment, handleLoadMoreSubComment, handleCommentSubmit, pa
                                 onClick={() => {
                                     handleLoadMoreSubComment(page, comment.id);
                                     setPage(page + 1);
-                                }}/>}
+                                }} />}
                     </div>}
             </div>
         </div>
diff --git a/src/components/post/CommentTextField.tsx b/src/components/post/CommentTextField.tsx
index d270af0..ab77352 100644
--- a/src/components/post/CommentTextField.tsx
+++ b/src/components/post/CommentTextField.tsx
@@ -1,7 +1,7 @@
-import {ChangeEventHandler, useState} from 'react';
-import {FillButton} from "../common/FillButton.tsx";
-import {TextButton} from "../common/TextButton.tsx";
-import {CommentType} from "../../common/types/comment.tsx";
+import { ChangeEventHandler, useState } from 'react';
+import { FillButton } from "../common/FillButton.tsx";
+import { TextButton } from "../common/TextButton.tsx";
+import { CommentType } from "../../common/types/comment.tsx";
 
 interface CommentTextFieldProps {
     value: string,
@@ -15,7 +15,7 @@ interface CommentTextFieldProps {
 
 function CommentTextField(props: CommentTextFieldProps) {
 
-    const {value, onChange, commentId, taggedUsername, originalComment, handleSubmit, handleShowTextField} = props;
+    const { value, onChange, commentId, taggedUsername, originalComment, handleSubmit, handleShowTextField } = props;
 
     const [username, setUsername] = useState<string | null>(taggedUsername || null);
 
@@ -26,21 +26,21 @@ function CommentTextField(props: CommentTextFieldProps) {
                 onChange={onChange}
                 className="p-2 border border-gray-400"
                 rows={5}
-                minLength={5}/>
+                minLength={5} />
             <div className="flex justify-between items-center gap-x-2">
                 {username &&
                     <FillButton text={`@${username}`}
-                                onClick={() => setUsername(null)}
-                                addStyle="w-fit !bg-gray-400 text-xs"/>}
-                <div/>
+                        onClick={() => setUsername(null)}
+                        addStyle="w-fit !bg-gray-400 text-xs" />}
+                <div />
                 <div className="flex">
                     {(commentId || originalComment) && <TextButton text={"취소"} onClick={() => {
                         if (handleShowTextField) {
                             handleShowTextField();
                         }
-                    }}/>}
+                    }} />}
                     <FillButton text={(!originalComment) ? "등록" : "수정"}
-                                onClick={() => handleSubmit(commentId || null, value, username || null, originalComment || null)}/>
+                        onClick={() => handleSubmit(commentId || null, value, username || null, originalComment || null)} />
                 </div>
             </div>
         </div>
diff --git a/src/components/post/PostCard.tsx b/src/components/post/PostCard.tsx
index ac117fa..ebdc049 100644
--- a/src/components/post/PostCard.tsx
+++ b/src/components/post/PostCard.tsx
@@ -1,11 +1,11 @@
-import {PostResponse} from "../../common/types/post.tsx";
-import {getImgSrc, removeHtmlTags} from "../../common/util/html.tsx";
+import { PostResponse } from "../../common/types/post.tsx";
+import { getImgSrc, removeHtmlTags } from "../../common/util/html.tsx";
 import DOMPurify from "dompurify";
-import {MdImage} from "react-icons/md";
-import {relativeDateToKorean} from "../../common/util/date.tsx";
-import {Link} from "react-router-dom";
+import { MdImage } from "react-icons/md";
+import { relativeDateToKorean } from "../../common/util/date.tsx";
+import { Link } from "react-router-dom";
 
-function PostCard({post}: { post: PostResponse }) {
+function PostCard({ post }: { post: PostResponse }) {
 
     const safeContent = DOMPurify.sanitize(post.content);
     const url = getImgSrc(safeContent);
@@ -16,16 +16,16 @@ function PostCard({post}: { post: PostResponse }) {
                 {(url)
                     ? <img className="w-full h-52 object-cover
                      transform transition-transform duration-300 ease-out hover:scale-105"
-                           src={url} alt="post_image"/>
+                        src={url} alt="post_image" />
                     : <div className="bg-gray-100 flex justify-center items-center w-full h-52">
-                        <MdImage className="size-16 text-gray-400"/>
+                        <MdImage className="size-16 text-gray-400" />
                     </div>}
             </Link>
             <div className="flex flex-col gap-y-2 my-4">
                 <div className="flex justify-between items-center">
                     <div className="flex justify-center items-center gap-x-4 text-sm">
                         <Link to={`/blog/${post.username}`}
-                              className="font-semibold text-lime-700 hover:text-lime-400">
+                            className="font-semibold text-lime-700 hover:text-lime-400">
                             {post.username}
                         </Link>
                         <div className="text-gray-500 font-normal">
diff --git a/src/components/post/TagChip.tsx b/src/components/post/TagChip.tsx
index ea9a5d4..16b2e8d 100644
--- a/src/components/post/TagChip.tsx
+++ b/src/components/post/TagChip.tsx
@@ -1,12 +1,12 @@
-import {MdOutlineClear} from "react-icons/md";
+import { MdOutlineClear } from "react-icons/md";
 
-function TagChip({name, removeTag}: { name: string, removeTag: (selectTag: string) => void }) {
+function TagChip({ name, removeTag }: { name: string, removeTag: (selectTag: string) => void }) {
     return (
         <button
             className="flex justify-between items-center rounded-md bg-slate-800 py-0.5 px-2.5 border border-transparent text-sm text-white transition-all shadow-sm hover:brightness-120 hover:cursor-pointer"
             onClick={() => removeTag(name)}>
             {name}
-            <MdOutlineClear className="ml-2"/>
+            <MdOutlineClear className="ml-2" />
         </button>
     );
 }
diff --git a/src/components/setting/SettingSideBar.tsx b/src/components/setting/SettingSideBar.tsx
index 11f685a..6af3d88 100644
--- a/src/components/setting/SettingSideBar.tsx
+++ b/src/components/setting/SettingSideBar.tsx
@@ -3,15 +3,15 @@ interface TabType {
     title: string;
 }
 
-function SettingSideBar({setSelectedSection, side}: {
+function SettingSideBar({ setSelectedSection, side }: {
     setSelectedSection: (section: string) => void,
     side: boolean,
 }) {
 
     const tabList: TabType[] = [
-        {section: "profile", title: "프로필"},
-        {section: "folder", title: "폴더"},
-        {section: "post", title: "게시글"},
+        { section: "profile", title: "프로필" },
+        { section: "folder", title: "폴더" },
+        { section: "post", title: "게시글" },
     ];
 
     const handleSelectedTab = (tabSection: string) => {
diff --git a/src/index.css b/src/index.css
index 40f7146..08045e2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,111 +1,111 @@
 @import "tailwindcss";
 
 @layer base {
-    h1 {
-        font-size: 2em;
-        font-weight: bold;
-        margin-top: 0.67em;
-        margin-bottom: 0.67em;
-    }
-    h2 {
-        font-size: 1.5em;
-        font-weight: bold;
-        margin-top: 0.83em;
-        margin-bottom: 0.83em;
-    }
-    h3 {
-        font-size: 1.17em;
-        font-weight: bold;
-        margin-top: 1em;
-        margin-bottom: 1em;
-    }
-    h4 {
-        font-size: 1em;
-        font-weight: bold;
-        margin-top: 1.33em;
-        margin-bottom: 1.33em;
-    }
-    blockquote {
-        margin: 0 32px;
-        padding-left: 1rem;
-        border-left: 2px solid #e5e7eb;
-    }
-    ul {
-        list-style: disc;
-        margin-left: 1.5em;
-        padding-left: 1.5em;
-    }
-    ol {
-        list-style: decimal;
-        margin-left: 1.5em;
-        padding-left: 1.5em;
-    }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+    margin-top: 0.67em;
+    margin-bottom: 0.67em;
+  }
+  h2 {
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-top: 0.83em;
+    margin-bottom: 0.83em;
+  }
+  h3 {
+    font-size: 1.17em;
+    font-weight: bold;
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  h4 {
+    font-size: 1em;
+    font-weight: bold;
+    margin-top: 1.33em;
+    margin-bottom: 1.33em;
+  }
+  blockquote {
+    margin: 0 32px;
+    padding-left: 1rem;
+    border-left: 2px solid #e5e7eb;
+  }
+  ul {
+    list-style: disc;
+    margin-left: 1.5em;
+    padding-left: 1.5em;
+  }
+  ol {
+    list-style: decimal;
+    margin-left: 1.5em;
+    padding-left: 1.5em;
+  }
 }
 
 @theme {
-    --font-*: initial;
-    --default-font-family: 'SCDream';
-    --font-jalnan: 'Jalnan2';
+  --font-*: initial;
+  --default-font-family: "SCDream";
+  --font-jalnan: "Jalnan2";
 }
 
 @font-face {
-    font-family: 'Jalnan2';
-    src: url('./common/assets/fonts/Jalnan2.otf');
-    font-weight: 400;
-    font-style: normal;
+  font-family: "Jalnan2";
+  src: url("./common/assets/fonts/Jalnan2.otf");
+  font-weight: 400;
+  font-style: normal;
 }
 
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream1.otf');
-    font-weight: 100;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream1.otf");
+  font-weight: 100;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream2.otf');
-    font-weight: 200;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream2.otf");
+  font-weight: 200;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream3.otf');
-    font-weight: 300;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream3.otf");
+  font-weight: 300;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream4.otf');
-    font-weight: 400;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream4.otf");
+  font-weight: 400;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream5.otf');
-    font-weight: 500;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream5.otf");
+  font-weight: 500;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream6.otf');
-    font-weight: 600;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream6.otf");
+  font-weight: 600;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream7.otf');
-    font-weight: 700;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream7.otf");
+  font-weight: 700;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream8.otf');
-    font-weight: 800;
-    font-style: normal;
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream8.otf");
+  font-weight: 800;
+  font-style: normal;
 }
 @font-face {
-    font-family: 'SCDream';
-    src: url('./common/assets/fonts/s-core/SCDream9.otf');
-    font-weight: 900;
-    font-style: normal;
-}
\ No newline at end of file
+  font-family: "SCDream";
+  src: url("./common/assets/fonts/s-core/SCDream9.otf");
+  font-weight: 900;
+  font-style: normal;
+}
diff --git a/src/layout/BasicLayout.tsx b/src/layout/BasicLayout.tsx
index 1803c7b..e622965 100644
--- a/src/layout/BasicLayout.tsx
+++ b/src/layout/BasicLayout.tsx
@@ -1,16 +1,16 @@
-import {ReactNode} from "react";
+import { ReactNode } from "react";
 import Header from "../components/common/Header.tsx";
 import Footer from "../components/common/Footer.tsx";
 
-function BasicLayout({children, center}: { children: ReactNode, center?: boolean }) {
+function BasicLayout({ children, center }: { children: ReactNode, center?: boolean }) {
 
     return (
         <main className="w-full h-screen">
-            <Header/>
+            <Header />
             <div className={`flex ${(center) ? "justify-center items-center" : "justify-start items-start"} mx-auto px-8 lg:px-12 2xl:px-16 py-8 max-w-screen-2xl min-h-[calc(100vh-156px)]`}>
                 {children}
             </div>
-            <Footer/>
+            <Footer />
         </main>
     );
 }
diff --git a/src/layout/LoadingLayout.tsx b/src/layout/LoadingLayout.tsx
index a716d8c..8a4b5b1 100644
--- a/src/layout/LoadingLayout.tsx
+++ b/src/layout/LoadingLayout.tsx
@@ -1,4 +1,4 @@
-function LoadingLayout({loading}: { loading: boolean }) {
+function LoadingLayout({ loading }: { loading: boolean }) {
 
     return (
         loading &&
@@ -6,14 +6,14 @@ function LoadingLayout({loading}: { loading: boolean }) {
             className="fixed inset-0 flex items-center justify-center bg-gray-300 opacity-50 z-1000 dark:bg-gray-100 dark:bg-opacity-50">
             <div role="status">
                 <svg aria-hidden="true"
-                     className="inline size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
-                     viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    className="inline size-8 text-gray-200 animate-spin dark:text-gray-600 fill-gray-600 dark:fill-gray-300"
+                    viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
                         d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                        fill="currentColor"/>
+                        fill="currentColor" />
                     <path
                         d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                        fill="currentFill"/>
+                        fill="currentFill" />
                 </svg>
                 <span className="sr-only">Loading...</span>
             </div>
diff --git a/src/layout/ModalLayout.tsx b/src/layout/ModalLayout.tsx
index 3efe563..5a55413 100644
--- a/src/layout/ModalLayout.tsx
+++ b/src/layout/ModalLayout.tsx
@@ -1,13 +1,13 @@
-import {ReactNode, Ref} from "react";
+import { ReactNode, Ref } from "react";
 
-function ModalLayout({children, customRef, addStyle}: {
+function ModalLayout({ children, customRef, addStyle }: {
     children: ReactNode,
     customRef?: Ref<HTMLDivElement>,
     addStyle?: string,
 }) {
     return (
         <div className={"fixed inset-0 flex justify-center items-center px-8"}>
-            <div className="absolute inset-0 z-20 opacity-50"/>
+            <div className="absolute inset-0 z-20 opacity-50" />
             <div ref={customRef} className={`${addStyle} z-50 max-w-240 w-full bg-white shadow-lg rounded-2xl p-8`}>
                 {children}
             </div>
diff --git a/src/main.tsx b/src/main.tsx
index 9b9b905..4b2e26b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,11 @@
-import {createRoot} from 'react-dom/client'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import {Provider} from "react-redux";
+import { Provider } from "react-redux";
 import store from "./store.tsx";
 
 createRoot(document.getElementById('root')!).render(
     <Provider store={store}>
-        <App/>
+        <App />
     </Provider>,
 )
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index ae3ba64..bdcbefc 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,15 +1,15 @@
 import BasicLayout from "../layout/BasicLayout.tsx";
 import PostCard from "../components/post/PostCard.tsx";
-import {useEffect, useRef, useState} from "react";
-import {getPosts} from "../common/apis/post.tsx";
-import {PostResponse} from "../common/types/post.tsx";
+import { useEffect, useRef, useState } from "react";
+import { getPosts } from "../common/apis/post.tsx";
+import { PostResponse } from "../common/types/post.tsx";
 import useInfiniteScroll from "../common/util/infiniteScroll.tsx";
 
 function MainPage() {
 
     const pageRef = useRef<HTMLDivElement>(null);
     const [posts, setPosts] = useState<PostResponse[]>([]);
-    const {page} = useInfiniteScroll({
+    const { page } = useInfiniteScroll({
         target: pageRef,
         targetArray: posts,
         threshold: 0.5,
@@ -37,11 +37,11 @@ function MainPage() {
                     최근 게시글
                 </div>
                 <div ref={pageRef}
-                     className="w-full grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-8">
+                    className="w-full grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-8">
                     {posts.map((post) => (
                         <PostCard
                             key={post.id}
-                            post={post}/>
+                            post={post} />
                     ))}
                 </div>
             </div>
diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
index c7910aa..ee3acae 100644
--- a/src/pages/blog/BlogPage.tsx
+++ b/src/pages/blog/BlogPage.tsx
@@ -1,22 +1,22 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useParams, useSearchParams} from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import PostCard from "../../components/post/PostCard.tsx";
-import {useEffect, useRef, useState} from "react";
-import {MdMenu, MdOutlineExitToApp} from "react-icons/md";
+import { useEffect, useRef, useState } from "react";
+import { MdMenu, MdOutlineExitToApp } from "react-icons/md";
 import PaginationButton from "../../components/common/PaginationButton.tsx";
-import {FolderType, toFolderTypeList} from "../../common/types/blog.tsx";
+import { FolderType, toFolderTypeList } from "../../common/types/blog.tsx";
 import BlogSideBar from "../../components/blog/BlogSideBar.tsx";
 import IconButton from "../../components/common/IconButton.tsx";
-import {PageResponse} from "../../common/types/common.tsx";
-import {getMemberFolders, getMemberPosts, getMemberTags} from "../../common/apis/blog.tsx";
-import {PostResponse, TagResponse} from "../../common/types/post.tsx";
-import {MemberProfileResponse} from "../../common/types/member.tsx";
-import {getProfileByUsername} from "../../common/apis/member.tsx";
-import {TextLink} from "../../components/common/TextButton.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
+import { getMemberFolders, getMemberPosts, getMemberTags } from "../../common/apis/blog.tsx";
+import { PostResponse, TagResponse } from "../../common/types/post.tsx";
+import { MemberProfileResponse } from "../../common/types/member.tsx";
+import { getProfileByUsername } from "../../common/apis/member.tsx";
+import { TextLink } from "../../components/common/TextButton.tsx";
 
 function BlogPage() {
 
-    const {username} = useParams();
+    const { username } = useParams();
     const [folderParam, setFolderParam] = useSearchParams();
 
     const [page, setPage] = useState(0);
@@ -27,7 +27,7 @@ function BlogPage() {
         totalPages: 0
     });
     const [posts, setPosts] = useState<PostResponse[]>([]);
-    const [member, setMember] = useState<MemberProfileResponse>({username: username || "", profileUrl: null});
+    const [member, setMember] = useState<MemberProfileResponse>({ username: username || "", profileUrl: null });
     const [folders, setFolders] = useState<FolderType[]>([]);
     const [tags, setTags] = useState<TagResponse[]>([]);
 
@@ -46,13 +46,13 @@ function BlogPage() {
     };
 
     const handlePage = (page: number) => {
-        setFolderParam({...folderParam, "page": page.toString()});
+        setFolderParam({ ...folderParam, "page": page.toString() });
         setPage(page);
     }
 
     const handleSelectedFolder = (folder: FolderType) => {
         setSelectedFolder(folder);
-        setFolderParam({"folder": folder.id, "page": page.toString()});
+        setFolderParam({ "folder": folder.id, "page": page.toString() });
         setPage(0);
     }
 
@@ -178,12 +178,12 @@ function BlogPage() {
                 className={`${(isOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} w-full flex flex-col`}>
                 <div className="flex justify-between items-center px-0 lg:px-5 font-jalnan pb-4">
                     <TextLink text={`${username}의 블로그`}
-                              to={`/blog/${username}`}
-                              addStyle="!text-xl !font-jalnan"/>
+                        to={`/blog/${username}`}
+                        addStyle="!text-xl !font-jalnan" />
                     <IconButton
-                        icon={<MdMenu className="size-8"/>}
+                        icon={<MdMenu className="size-8" />}
                         onClick={handleMenuOpen}
-                        addStyle="lg:hidden"/>
+                        addStyle="lg:hidden" />
                 </div>
                 <div className="grid lg:grid-cols-3">
                     <div
@@ -191,14 +191,14 @@ function BlogPage() {
                         {posts.map((post) => (
                             <PostCard
                                 key={post.id}
-                                post={post}/>
+                                post={post} />
                         ))}
                         {posts.length === 0 &&
                             <div className="mt-8 text-center text-gray-600">
                                 작성된 게시글이 없습니다.
                             </div>}
                         <PaginationButton
-                            pageInfo={pageInfo} setPage={handlePage}/>
+                            pageInfo={pageInfo} setPage={handlePage} />
                     </div>
                     <div className="col-span-1 hidden lg:block flex-col">
                         <BlogSideBar
@@ -207,16 +207,16 @@ function BlogPage() {
                             username={username}
                             profileUrl={member.profileUrl}
                             selectedFolder={selectedFolder}
-                            setSelectedFolder={handleSelectedFolder}/>
+                            setSelectedFolder={handleSelectedFolder} />
                     </div>
                 </div>
             </div>
             <div ref={sideBarRef}
-                 className={`${isOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 right-0 w-96 flex-col
+                className={`${isOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 right-0 w-96 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
                 <button className="absolute top-6 left-6 hover:cursor-pointer"
-                        onClick={() => setIsOpen(false)}>
-                    <MdOutlineExitToApp className="size-8 text-gray-500"/>
+                    onClick={() => setIsOpen(false)}>
+                    <MdOutlineExitToApp className="size-8 text-gray-500" />
                 </button>
                 <BlogSideBar
                     folders={folders}
@@ -226,7 +226,7 @@ function BlogPage() {
                     selectedFolder={selectedFolder}
                     setSelectedFolder={handleSelectedFolder}
                     bgColor={"bg-gray-50"}
-                    side={true}/>
+                    side={true} />
             </div>
         </BasicLayout>
     );
diff --git a/src/pages/member/CodePage.tsx b/src/pages/member/CodePage.tsx
index f64804a..afc910b 100644
--- a/src/pages/member/CodePage.tsx
+++ b/src/pages/member/CodePage.tsx
@@ -1,14 +1,14 @@
-import React, {useEffect, useRef, useState} from "react";
+import React, { useEffect, useRef, useState } from "react";
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useLocation, useNavigate} from "react-router-dom";
-import {formatTimer} from "../../common/util/date.tsx";
+import { useLocation, useNavigate } from "react-router-dom";
+import { formatTimer } from "../../common/util/date.tsx";
 import LoadingLayout from "../../layout/LoadingLayout.tsx";
-import {checkCode} from "../../common/apis/member.tsx";
+import { checkCode } from "../../common/apis/member.tsx";
 
 function CodePage() {
 
-    const {state} = useLocation();
-    const {email} = state;
+    const { state } = useLocation();
+    const { email } = state;
     const navigate = useNavigate();
 
     const [loading, setLoading] = useState(false);
@@ -69,7 +69,7 @@ function CodePage() {
 
             checkCode(email, code)
                 .then(() => {
-                    navigate("/signup", {state: {email: email, code: code}});
+                    navigate("/signup", { state: { email: email, code: code } });
                 })
                 .catch((error) => {
                     alert(error.response.data.message);
@@ -90,7 +90,7 @@ function CodePage() {
                     <p>인증코드 6자리를 입력해주세요.</p>
                 </div>
                 <div className="flex items-center justify-center gap-2 my-4">
-                    {Array.from({length: 6}).map((_, index) => (
+                    {Array.from({ length: 6 }).map((_, index) => (
                         <React.Fragment key={index}>
                             <input
                                 ref={(el) => {
@@ -114,7 +114,7 @@ function CodePage() {
                     유효시간 : {formatTimer(timer)}
                 </div>
             </div>
-            <LoadingLayout loading={loading}/>
+            <LoadingLayout loading={loading} />
         </BasicLayout>
     )
         ;
diff --git a/src/pages/member/EmailPage.tsx b/src/pages/member/EmailPage.tsx
index 1398c4d..a1a23d9 100644
--- a/src/pages/member/EmailPage.tsx
+++ b/src/pages/member/EmailPage.tsx
@@ -1,11 +1,11 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
 import LoginTextField from "../../components/member/LoginTextField.tsx";
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
 import LoginButton from "../../components/member/LoginButton.tsx";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import * as React from "react";
-import {checkEmail} from "../../common/util/regex.tsx";
-import {sendMail} from "../../common/apis/member.tsx";
+import { checkEmail } from "../../common/util/regex.tsx";
+import { sendMail } from "../../common/apis/member.tsx";
 import LoadingLayout from "../../layout/LoadingLayout.tsx";
 
 function EmailPage() {
@@ -34,7 +34,7 @@ function EmailPage() {
 
         sendMail(email)
             .then(() => {
-                navigate("/signup/code", {state: {email: email}});
+                navigate("/signup/code", { state: { email: email } });
             })
             .catch((error) => alert(error.response.data.message))
             .finally(() => setLoading(false));
@@ -55,10 +55,10 @@ function EmailPage() {
                     value={email}
                     setValue={(value) => setEmail(value)}
                     customRef={emailRef}
-                    onKeyDown={handleEmailEnter}/>
-                <LoginButton text={"인증코드 전송"} onClick={handleVerifyEmail} disable={!checkEmail(email)} bgColor={"bg-lime-400"}/>
+                    onKeyDown={handleEmailEnter} />
+                <LoginButton text={"인증코드 전송"} onClick={handleVerifyEmail} disable={!checkEmail(email)} bgColor={"bg-lime-400"} />
             </div>
-            <LoadingLayout loading={loading}/>
+            <LoadingLayout loading={loading} />
         </BasicLayout>
     );
 }
diff --git a/src/pages/member/LoginPage.tsx b/src/pages/member/LoginPage.tsx
index af093d8..99200a0 100644
--- a/src/pages/member/LoginPage.tsx
+++ b/src/pages/member/LoginPage.tsx
@@ -1,15 +1,15 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useNavigate} from "react-router-dom";
-import {useEffect, useRef, useState} from "react";
-import {useDispatch, useSelector} from "react-redux";
-import {getProfile, handleKakaoLogin, loginApi} from "../../common/apis/member.tsx";
-import {login, setProfile} from "../../common/slices/loginSlice.tsx";
+import { useNavigate } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { getProfile, handleKakaoLogin, loginApi } from "../../common/apis/member.tsx";
+import { login, setProfile } from "../../common/slices/loginSlice.tsx";
 import LoginButton from "../../components/member/LoginButton.tsx";
 import LoginTextField from "../../components/member/LoginTextField.tsx";
-import {checkEmail} from "../../common/util/regex.tsx";
+import { checkEmail } from "../../common/util/regex.tsx";
 import * as React from "react";
-import {TextLink} from "../../components/common/TextButton.tsx";
-import {RootState} from "../../store.tsx";
+import { TextLink } from "../../components/common/TextButton.tsx";
+import { RootState } from "../../store.tsx";
 
 function LoginPage() {
 
@@ -21,7 +21,7 @@ function LoginPage() {
     const emailRef = useRef<HTMLInputElement>(null);
     const passwordRef = useRef<HTMLInputElement>(null);
 
-    const [loginInfo, setLoginInfo] = useState({email: "", password: ""});
+    const [loginInfo, setLoginInfo] = useState({ email: "", password: "" });
 
     const handleLogin = () => {
         loginApi(loginInfo.email, loginInfo.password)
@@ -78,7 +78,7 @@ function LoginPage() {
                 className="w-full max-w-[calc(420px)] flex flex-col justify-center items-center gap-y-4">
                 <div className="flex justify-center items-center gap-x-2 mb-8">
                     <img src="/logo.png" alt="logo"
-                         className="size-16 mb-1"/>
+                        className="size-16 mb-1" />
                     <div className="flex items-center text-2xl h-16 font-jalnan">
                         DIGLOG
                     </div>
@@ -89,23 +89,23 @@ function LoginPage() {
                         type={"email"}
                         placeholder={"이메일을 입력해주세요."}
                         value={loginInfo.email}
-                        setValue={(value) => setLoginInfo({...loginInfo, email: value})}
+                        setValue={(value) => setLoginInfo({ ...loginInfo, email: value })}
                         customRef={emailRef}
-                        onKeyDown={handleEmailEnter}/>
+                        onKeyDown={handleEmailEnter} />
                     <LoginTextField
                         label={"비밀번호"}
                         type={"password"}
                         placeholder={"비밀번호를 입력해주세요."}
                         value={loginInfo.password}
-                        setValue={(value) => setLoginInfo({...loginInfo, password: value})}
+                        setValue={(value) => setLoginInfo({ ...loginInfo, password: value })}
                         customRef={passwordRef}
-                        onKeyDown={handlePasswordEnter}/>
+                        onKeyDown={handlePasswordEnter} />
                 </form>
                 <div className="flex flex-col justify-center items-center gap-y-4 w-full">
-                    <LoginButton text={"로그인"} onClick={handleLogin} bgColor={"bg-lime-300"}/>
+                    <LoginButton text={"로그인"} onClick={handleLogin} bgColor={"bg-lime-300"} />
                     <LoginButton text={"카카오로 시작하기"} onClick={handleKakaoLogin} bgColor={"bg-[#FEE500]"}
-                                 icon={<img src={"/kakao-logo.png"} alt={"Kakao Login"} className="size-5"/>}/>
-                    <TextLink text={"회원가입"} to={"/signup/platform"} addStyle={"w-full h-14 hover:text-gray-600"}/>
+                        icon={<img src={"/kakao-logo.png"} alt={"Kakao Login"} className="size-5" />} />
+                    <TextLink text={"회원가입"} to={"/signup/platform"} addStyle={"w-full h-14 hover:text-gray-600"} />
                 </div>
             </div>
         </BasicLayout>
diff --git a/src/pages/member/PlatformPage.tsx b/src/pages/member/PlatformPage.tsx
index 77a588b..6fee2f6 100644
--- a/src/pages/member/PlatformPage.tsx
+++ b/src/pages/member/PlatformPage.tsx
@@ -1,7 +1,7 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
 import LoginButton from "../../components/member/LoginButton.tsx";
-import {handleKakaoLogin} from "../../common/apis/member.tsx";
-import {TextLink} from "../../components/common/TextButton.tsx";
+import { handleKakaoLogin } from "../../common/apis/member.tsx";
+import { TextLink } from "../../components/common/TextButton.tsx";
 
 function PlatformPage() {
 
@@ -9,8 +9,8 @@ function PlatformPage() {
         <BasicLayout center={true}>
             <div className="w-full max-w-[calc(420px)] flex flex-col justify-center items-center gap-y-4">
                 <LoginButton text={"카카오로 시작하기"} onClick={handleKakaoLogin} bgColor={"bg-[#FEE500]"}
-                             icon={<img src={"/kakao-logo.png"} alt={"Kakao Login"} className="size-5"/>}/>
-                <TextLink text={"이메일로 회원가입"} to={"/signup/email"} addStyle={"hover:text-gray-600"}/>
+                    icon={<img src={"/kakao-logo.png"} alt={"Kakao Login"} className="size-5" />} />
+                <TextLink text={"이메일로 회원가입"} to={"/signup/email"} addStyle={"hover:text-gray-600"} />
             </div>
         </BasicLayout>
     );
diff --git a/src/pages/member/SignupPage.tsx b/src/pages/member/SignupPage.tsx
index 4cb1883..96cf9d8 100644
--- a/src/pages/member/SignupPage.tsx
+++ b/src/pages/member/SignupPage.tsx
@@ -1,21 +1,21 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useLocation, useNavigate} from "react-router-dom";
-import {useEffect, useRef, useState} from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect, useRef, useState } from "react";
 import LoginTextField from "../../components/member/LoginTextField.tsx";
-import {checkPassword} from "../../common/util/regex.tsx";
+import { checkPassword } from "../../common/util/regex.tsx";
 import LoadingLayout from "../../layout/LoadingLayout.tsx";
 import * as React from "react";
 import LoginButton from "../../components/member/LoginButton.tsx";
-import {signup} from "../../common/apis/member.tsx";
+import { signup } from "../../common/apis/member.tsx";
 
 function SignupPage() {
 
     const navigate = useNavigate();
-    const {state} = useLocation();
-    const {email, code} = state;
+    const { state } = useLocation();
+    const { email, code } = state;
 
     const [loading, setLoading] = useState(false);
-    const [passwordInfo, setPasswordInfo] = useState({password: "", confirmPassword: ""});
+    const [passwordInfo, setPasswordInfo] = useState({ password: "", confirmPassword: "" });
 
     const passwordRef = useRef<HTMLInputElement>(null);
     const confirmPasswordRef = useRef<HTMLInputElement>(null);
@@ -41,7 +41,7 @@ function SignupPage() {
             alert("비밀번호가 영문, 숫자 포함 8-16자리가 되도록 입력해주세요.");
             return;
         }
-        
+
         if (passwordInfo.password !== passwordInfo.confirmPassword) {
             alert("비밀번호 확인이 일치하지 않습니다.");
             return;
@@ -77,21 +77,21 @@ function SignupPage() {
                         type={"password"}
                         placeholder={"영문, 숫자 포함 8-16자"}
                         value={passwordInfo.password}
-                        setValue={(value) => setPasswordInfo({...passwordInfo, password: value})}
+                        setValue={(value) => setPasswordInfo({ ...passwordInfo, password: value })}
                         customRef={passwordRef}
-                    onKeyDown={handlePasswordEnter}/>
+                        onKeyDown={handlePasswordEnter} />
                     <LoginTextField
                         label={"비밀번호 확인"}
                         type={"password"}
                         placeholder={"영문, 숫자 포함 8-16자"}
                         value={passwordInfo.confirmPassword}
-                        setValue={(value) => setPasswordInfo({...passwordInfo, confirmPassword: value})}
+                        setValue={(value) => setPasswordInfo({ ...passwordInfo, confirmPassword: value })}
                         customRef={confirmPasswordRef}
-                        onKeyDown={handleConfirmPasswordEnter}/>
+                        onKeyDown={handleConfirmPasswordEnter} />
                 </form>
-                <LoginButton text={"회원가입"} onClick={handleSignup} disable={disableSignupButton()} bgColor={"bg-lime-400"}/>
+                <LoginButton text={"회원가입"} onClick={handleSignup} disable={disableSignupButton()} bgColor={"bg-lime-400"} />
             </div>
-            <LoadingLayout loading={loading}/>
+            <LoadingLayout loading={loading} />
         </BasicLayout>
     );
 }
diff --git a/src/pages/post/SearchPage.tsx b/src/pages/post/SearchPage.tsx
index 92306da..584f9ca 100644
--- a/src/pages/post/SearchPage.tsx
+++ b/src/pages/post/SearchPage.tsx
@@ -1,15 +1,15 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {MdArrowDropDown, MdOutlineClear, MdOutlineSearch} from "react-icons/md";
-import {Ref, useEffect, useRef, useState} from "react";
+import { MdArrowDropDown, MdOutlineClear, MdOutlineSearch } from "react-icons/md";
+import { Ref, useEffect, useRef, useState } from "react";
 import * as React from "react";
 import PostCard from "../../components/post/PostCard.tsx";
-import {Link, useSearchParams} from "react-router-dom";
-import {LoadMoreButton} from "../../components/common/FillButton.tsx";
-import {PostResponse, PostSearchRequest} from "../../common/types/post.tsx";
-import {PageResponse} from "../../common/types/common.tsx";
-import {searchPost} from "../../common/apis/post.tsx";
-import {searchProfile} from "../../common/apis/member.tsx";
-import {MemberProfileResponse} from "../../common/types/member.tsx";
+import { Link, useSearchParams } from "react-router-dom";
+import { LoadMoreButton } from "../../components/common/FillButton.tsx";
+import { PostResponse, PostSearchRequest } from "../../common/types/post.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
+import { searchPost } from "../../common/apis/post.tsx";
+import { searchProfile } from "../../common/apis/member.tsx";
+import { MemberProfileResponse } from "../../common/types/member.tsx";
 import ProfileImageCircle from "../../components/common/ProfileImageCircle.tsx";
 
 function SearchPage() {
@@ -72,10 +72,10 @@ function SearchPage() {
         setOpenOrder(cur => !cur);
     }
     const handleSetOption = (menu: MenuItem) => {
-        setSearchRequest({...searchRequest, option: menu.value});
+        setSearchRequest({ ...searchRequest, option: menu.value });
     }
     const handleSetOrder = (menu: MenuItem) => {
-        setSearchRequest({...searchRequest, isDescending: (menu.value === "true")});
+        setSearchRequest({ ...searchRequest, isDescending: (menu.value === "true") });
     }
 
     const handleClickOutside = (event: MouseEvent) => {
@@ -203,19 +203,19 @@ function SearchPage() {
                     <div className="flex">
                         <div className="w-full relative flex justify-between items-center">
                             <input value={searchRequest.keyword}
-                                   onChange={(e) => setSearchRequest({...searchRequest, keyword: e.target.value})}
-                                   placeholder={"검색어를 입력해주세요."}
-                                   className="w-full block mt-0.5 p-3 mr-4 font-jalnan text-xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black"
-                                   ref={searchRef}
-                                   onKeyDown={handleSearchEnter}/>
+                                onChange={(e) => setSearchRequest({ ...searchRequest, keyword: e.target.value })}
+                                placeholder={"검색어를 입력해주세요."}
+                                className="w-full block mt-0.5 p-3 mr-4 font-jalnan text-xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black"
+                                ref={searchRef}
+                                onKeyDown={handleSearchEnter} />
                             <button
                                 className={`${searchRequest.keyword === "" ? "hidden" : ""} absolute right-16 rounded-full hover:cursor-pointer hover:bg-gray-1000`}
-                                onClick={() => setSearchRequest({...searchRequest, keyword: ""})}>
-                                <MdOutlineClear className="size-6 p-1"/>
+                                onClick={() => setSearchRequest({ ...searchRequest, keyword: "" })}>
+                                <MdOutlineClear className="size-6 p-1" />
                             </button>
                             <button className="hover:cursor-pointer"
-                                    onClick={handleSearch}>
-                                <MdOutlineSearch className="size-7 text-gray-600 hover:text-gray-900"/>
+                                onClick={handleSearch}>
+                                <MdOutlineSearch className="size-7 text-gray-600 hover:text-gray-900" />
                             </button>
                         </div>
                     </div>
@@ -224,7 +224,7 @@ function SearchPage() {
                     <div className="flex justify-between flex-wrap items-center h-16 sm:h-12">
                         <div className="text-lg">
                             <span className="font-bold">
-                            {selectedTab === "post" ? postPageInfo.totalElements : blogPageInfo.totalElements}
+                                {selectedTab === "post" ? postPageInfo.totalElements : blogPageInfo.totalElements}
                             </span>
                             개의 검색결과
                         </div>
@@ -232,29 +232,29 @@ function SearchPage() {
                             <div className="flex items-center justify-end gap-x-8">
                                 <SearchMenu
                                     menus={[
-                                        {key: "전체 검색", value: "ALL"},
-                                        {key: "제목", value: "TITLE"},
-                                        {key: "태그", value: "TAG"},
+                                        { key: "전체 검색", value: "ALL" },
+                                        { key: "제목", value: "TITLE" },
+                                        { key: "태그", value: "TAG" },
                                     ]}
                                     setMenu={handleSetOption}
                                     open={openOption}
                                     handleOpen={handleOpenOption}
                                     value={searchRequest.option}
-                                    customRef={optionRef}/>
+                                    customRef={optionRef} />
                                 <SearchMenu
                                     menus={[
-                                        {key: "최신순", value: "true"},
-                                        {key: "오래된순", value: "false"},
+                                        { key: "최신순", value: "true" },
+                                        { key: "오래된순", value: "false" },
                                     ]}
                                     setMenu={handleSetOrder}
                                     open={openOrder}
                                     handleOpen={handleOpenOrder}
                                     value={searchRequest.isDescending.toString()}
-                                    customRef={orderRef}/>
+                                    customRef={orderRef} />
                             </div>
                         }
                     </div>
-                    <SearchTab selectedTab={selectedTab} setSelectedTab={setSelectedTab}/>
+                    <SearchTab selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
                     <SearchResults
                         posts={posts}
                         blogs={blogs}
@@ -262,21 +262,21 @@ function SearchPage() {
                         blogPageInfo={blogPageInfo}
                         handlePostPage={handlePostPage}
                         handleBlogPage={handleBlogPage}
-                        selectedTab={selectedTab}/>
+                        selectedTab={selectedTab} />
                 </div>
             </div>
         </BasicLayout>
     );
 }
 
-function SearchTab({selectedTab, setSelectedTab}: {
+function SearchTab({ selectedTab, setSelectedTab }: {
     selectedTab: string,
     setSelectedTab: (tab: string) => void,
 }) {
 
     const tabs = [
-        {key: "게시글", value: "post"},
-        {key: "블로그", value: "blog"},
+        { key: "게시글", value: "post" },
+        { key: "블로그", value: "blog" },
     ];
 
     return (
@@ -286,7 +286,7 @@ function SearchTab({selectedTab, setSelectedTab}: {
                 {tabs.map((tab) => (
                     <div key={tab.key} className="me-2">
                         <button onClick={() => setSelectedTab(tab.value)}
-                                className={`${(selectedTab === tab.value) ? "border-b-2 text-lime-400 border-lime-400" : "hover:border-b-2 hover:text-lime-400 hover:border-lime-400"} inline-block p-4 hover:cursor-pointer`}>
+                            className={`${(selectedTab === tab.value) ? "border-b-2 text-lime-400 border-lime-400" : "hover:border-b-2 hover:text-lime-400 hover:border-lime-400"} inline-block p-4 hover:cursor-pointer`}>
                             {tab.key}
                         </button>
                     </div>
@@ -296,7 +296,7 @@ function SearchTab({selectedTab, setSelectedTab}: {
     );
 }
 
-function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage, handleBlogPage, selectedTab}: {
+function SearchResults({ posts, blogs, postPageInfo, blogPageInfo, handlePostPage, handleBlogPage, selectedTab }: {
     posts: PostResponse[],
     blogs: MemberProfileResponse[],
     postPageInfo: PageResponse,
@@ -312,12 +312,12 @@ function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage
                 {posts.map((post) => (
                     <PostCard
                         key={post.id}
-                        post={post}/>
+                        post={post} />
                 ))}
                 {postPageInfo.number + 1 < postPageInfo.totalPages &&
                     <LoadMoreButton
                         onClick={handlePostPage}
-                        addStyle={"w-full"}/>}
+                        addStyle={"w-full"} />}
             </div>
         );
     } else if (selectedTab === "blog") {
@@ -325,8 +325,8 @@ function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage
             <div className="flex flex-col divide-y divide-gray-200 z-0">
                 {blogs.map((blog) => (
                     <Link key={blog.username} to={`/blog/${blog.username}`}
-                          className="flex justify-start items-center px-4 py-6 gap-8 divide-y divide-gray-200 hover:bg-gray-100 shadow-gray-400 duration-300 ease-out">
-                        <ProfileImageCircle profileUrl={blog.profileUrl} size="lg"/>
+                        className="flex justify-start items-center px-4 py-6 gap-8 divide-y divide-gray-200 hover:bg-gray-100 shadow-gray-400 duration-300 ease-out">
+                        <ProfileImageCircle profileUrl={blog.profileUrl} size="lg" />
                         <div className="flex flex-col gap-y-1 justify-center items-start">
                             <div className="text-2xl font-black">{blog.username}</div>
                         </div>
@@ -335,7 +335,7 @@ function SearchResults({posts, blogs, postPageInfo, blogPageInfo, handlePostPage
                 {blogPageInfo.number + 1 < blogPageInfo.totalPages &&
                     <LoadMoreButton
                         onClick={handleBlogPage}
-                        addStyle={"w-full"}/>}
+                        addStyle={"w-full"} />}
             </div>
         );
     }
@@ -348,7 +348,7 @@ interface MenuItem {
     value: string,
 }
 
-function SearchMenu({menus, setMenu, value, open, handleOpen, customRef}: {
+function SearchMenu({ menus, setMenu, value, open, handleOpen, customRef }: {
     menus: MenuItem[],
     setMenu: (menu: MenuItem) => void,
     value: string,
@@ -366,17 +366,17 @@ function SearchMenu({menus, setMenu, value, open, handleOpen, customRef}: {
                         onClick={handleOpen}
                     >
                         {menus.find(menuItem => menuItem.value === value)?.key}
-                        <MdArrowDropDown className="size-4"/>
+                        <MdArrowDropDown className="size-4" />
                     </button>
                     <div
                         className={`${(open) ? "" : "hidden"} absolute top-10 left-0 flex flex-col z-10 bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-44`}>
                         <div className="py-2 text-sm text-gray-700">
                             {menus.map((menu) => (
                                 <SortMenu key={menu.value}
-                                          menu={menu}
-                                          setMenu={setMenu}
-                                          value={value}
-                                          handleOpen={handleOpen}/>
+                                    menu={menu}
+                                    setMenu={setMenu}
+                                    value={value}
+                                    handleOpen={handleOpen} />
                             ))}
                         </div>
                     </div>
@@ -386,7 +386,7 @@ function SearchMenu({menus, setMenu, value, open, handleOpen, customRef}: {
     );
 }
 
-function SortMenu({menu, setMenu, value, handleOpen}: {
+function SortMenu({ menu, setMenu, value, handleOpen }: {
     menu: MenuItem,
     setMenu: (menu: MenuItem) => void,
     value: string,
@@ -394,11 +394,11 @@ function SortMenu({menu, setMenu, value, handleOpen}: {
 }) {
     return (
         <button type="button"
-                onClick={() => {
-                    setMenu(menu);
-                    handleOpen();
-                }}
-                className={`${(value === menu.value) ? "bg-gray-100" : ""} inline-flex w-full px-4 py-2 hover:bg-gray-200 hover:cursor-pointer`}>
+            onClick={() => {
+                setMenu(menu);
+                handleOpen();
+            }}
+            className={`${(value === menu.value) ? "bg-gray-100" : ""} inline-flex w-full px-4 py-2 hover:bg-gray-200 hover:cursor-pointer`}>
             {menu.key}
         </button>
     );
diff --git a/src/pages/post/WritePage.tsx b/src/pages/post/WritePage.tsx
index a23ca88..8b4119b 100644
--- a/src/pages/post/WritePage.tsx
+++ b/src/pages/post/WritePage.tsx
@@ -1,21 +1,21 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useEffect, useState} from "react";
-import {useLocation, useNavigate, useParams} from "react-router-dom";
-import {Editor} from "@tinymce/tinymce-react";
-import {FillButton} from "../../components/common/FillButton.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {MdOutlineClear} from "react-icons/md";
-import {createPost, deletePost, getPost, updatePost} from "../../common/apis/post.tsx";
+import { useEffect, useState } from "react";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { Editor } from "@tinymce/tinymce-react";
+import { FillButton } from "../../components/common/FillButton.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { MdOutlineClear } from "react-icons/md";
+import { createPost, deletePost, getPost, updatePost } from "../../common/apis/post.tsx";
 import LoadingLayout from "../../layout/LoadingLayout.tsx";
-import {getImgUrls} from "../../common/util/html.tsx";
-import {uploadImage} from "../../common/apis/image.tsx";
-import {checkUUID} from "../../common/util/regex.tsx";
-import {TagResponse} from "../../common/types/post.tsx";
-import {sortByName} from "../../common/util/sort.tsx";
-import {FolderType, toFolderTypeList} from "../../common/types/blog.tsx";
+import { getImgUrls } from "../../common/util/html.tsx";
+import { uploadImage } from "../../common/apis/image.tsx";
+import { checkUUID } from "../../common/util/regex.tsx";
+import { TagResponse } from "../../common/types/post.tsx";
+import { sortByName } from "../../common/util/sort.tsx";
+import { FolderType, toFolderTypeList } from "../../common/types/blog.tsx";
 import FolderSelectBox from "../../components/folder/FolderSelectBox.tsx";
-import {getMemberFolders} from "../../common/apis/blog.tsx";
+import { getMemberFolders } from "../../common/apis/blog.tsx";
 import * as React from "react";
 
 interface WritePostType {
@@ -30,7 +30,7 @@ function WritePage() {
     const loginState = useSelector((state: RootState) => state.loginSlice);
     const navigate = useNavigate();
     const path = useLocation().pathname.substring(0, location.pathname.lastIndexOf("/"));
-    const {id} = useParams();
+    const { id } = useParams();
 
     const [loading, setLoading] = useState(false);
     const [folders, setFolders] = useState<FolderType[]>([]);
@@ -53,11 +53,11 @@ function WritePage() {
     };
 
     const removeTag = (tag: string | null) => {
-        setPost({...post, tags: post.tags.filter(prevTag => prevTag !== tag)});
+        setPost({ ...post, tags: post.tags.filter(prevTag => prevTag !== tag) });
     }
     const handleInputTag = (tag: string) => {
         if (!tag.endsWith(",")) {
-            setPost({...post, inputTag: tag});
+            setPost({ ...post, inputTag: tag });
             return;
         }
         handleTag(post.inputTag);
@@ -70,15 +70,15 @@ function WritePage() {
     }
     const handleTag = (tag: string) => {
         if (tag.trim() === "") {
-            setPost({...post, inputTag: tag});
+            setPost({ ...post, inputTag: tag });
             return;
         }
 
         if (post.tags.includes(tag.trim())) {
-            setPost({...post, inputTag: ""});
+            setPost({ ...post, inputTag: "" });
             return;
         }
-        setPost({...post, tags: [...post.tags, post.inputTag], inputTag: ""});
+        setPost({ ...post, tags: [...post.tags, post.inputTag], inputTag: "" });
     }
 
     const getFolderId = (targetFolder: FolderType) => {
@@ -237,34 +237,34 @@ function WritePage() {
                 <div className="flex justify-start items-center">
                     <div className="w-108">
                         <FolderSelectBox folders={folders}
-                                         targetFolder={targetFolder}
-                                         setTargetFolder={setTargetFolder}/>
+                            targetFolder={targetFolder}
+                            setTargetFolder={setTargetFolder} />
                     </div>
                 </div>
                 <div className="w-full flex justify-between items-center my-6">
                     <input value={post.title}
-                           onChange={(e) => setPost({...post, title: e.target.value})}
-                           placeholder={"제목을 입력해주세요."}
-                           className="w-full py-2 font-jalnan text-2xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black"/>
+                        onChange={(e) => setPost({ ...post, title: e.target.value })}
+                        placeholder={"제목을 입력해주세요."}
+                        className="w-full py-2 font-jalnan text-2xl text-gray-900 border-b-2 border-white focus:outline-none focus:border-black" />
                 </div>
                 <div className="relative z-10">
                     <div className="mb-8 flex flex-row flex-wrap items-center gap-4">
                         {post.tags.map((tag, i) =>
                             <button key={i}
-                                    className="flex justify-between items-center gap-x-2 border border-lime-50 shadow text-lime-700 rounded-4xl px-4 py-2 font-semibold text-sm transform transition-all hover:bg-lime-50 hover:cursor-pointer"
-                                    onClick={(event) => removeTag(event.currentTarget.textContent)}>
+                                className="flex justify-between items-center gap-x-2 border border-lime-50 shadow text-lime-700 rounded-4xl px-4 py-2 font-semibold text-sm transform transition-all hover:bg-lime-50 hover:cursor-pointer"
+                                onClick={(event) => removeTag(event.currentTarget.textContent)}>
                                 {tag}
-                                <MdOutlineClear/>
+                                <MdOutlineClear />
                             </button>)}
                         <input className="flex-1 text-lg focus:outline-none"
-                               type="text" placeholder="태그를 입력하세요" value={post.inputTag}
-                               onChange={(event) => handleInputTag(event.target.value)}
-                               onFocus={() => setShowTag(true)}
-                               onBlur={() => {
-                                   setShowTag(false);
-                                   handleTag(post.inputTag);
-                               }}
-                               onKeyDown={handleTagEnter}/>
+                            type="text" placeholder="태그를 입력하세요" value={post.inputTag}
+                            onChange={(event) => handleInputTag(event.target.value)}
+                            onFocus={() => setShowTag(true)}
+                            onBlur={() => {
+                                setShowTag(false);
+                                handleTag(post.inputTag);
+                            }}
+                            onKeyDown={handleTagEnter} />
                     </div>
                     {showTag && <div
                         className="absolute -bottom-6 left-0 flex flex-col rounded-md bg-gray-700 text-white w-[calc(346px)] px-4 py-2 text-sm">
@@ -292,19 +292,19 @@ function WritePage() {
                         }
                     }}
                     value={post.content}
-                    onEditorChange={(content) => setPost({...post, content: content})}
+                    onEditorChange={(content) => setPost({ ...post, content: content })}
                 />
                 <div className="flex justify-between items-center w-full mt-4">
                     {path.endsWith("/edit")
                         ? <FillButton text={"삭제하기"} onClick={() => handleDelete(id)}
-                                      addStyle={"bg-red-400 hover:bg-red-700"}/>
+                            addStyle={"bg-red-400 hover:bg-red-700"} />
                         : <div></div>}
                     {path.endsWith("/edit")
-                        ? <FillButton text={"수정하기"} onClick={handleEdit}/>
-                        : <FillButton text={"게시하기"} onClick={handleSubmit}/>}
+                        ? <FillButton text={"수정하기"} onClick={handleEdit} />
+                        : <FillButton text={"게시하기"} onClick={handleSubmit} />}
                 </div>
             </div>
-            <LoadingLayout loading={loading}/>
+            <LoadingLayout loading={loading} />
         </BasicLayout>
     );
 }
diff --git a/src/pages/setting/FolderSettingPage.tsx b/src/pages/setting/FolderSettingPage.tsx
index cd22e36..663bd4b 100644
--- a/src/pages/setting/FolderSettingPage.tsx
+++ b/src/pages/setting/FolderSettingPage.tsx
@@ -1,14 +1,14 @@
-import {useEffect, useRef, useState} from "react";
-import {FolderType, toFolderRequestList, toFolderTypeList} from "../../common/types/blog.tsx";
-import {FillButton} from "../../components/common/FillButton.tsx";
+import { useEffect, useRef, useState } from "react";
+import { FolderType, toFolderRequestList, toFolderTypeList } from "../../common/types/blog.tsx";
+import { FillButton } from "../../components/common/FillButton.tsx";
 import ModalLayout from "../../layout/ModalLayout.tsx";
-import {DragEndEvent} from "@dnd-kit/core";
+import { DragEndEvent } from "@dnd-kit/core";
 import FolderCardList from "../../components/folder/FolderCardList.tsx";
-import {arrayMove} from "@dnd-kit/sortable";
+import { arrayMove } from "@dnd-kit/sortable";
 import FolderSelectBox from "../../components/folder/FolderSelectBox.tsx";
-import {deleteFolder, getMemberFolders, saveAndUpdateFolder} from "../../common/apis/blog.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
+import { deleteFolder, getMemberFolders, saveAndUpdateFolder } from "../../common/apis/blog.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
 
 function FolderSettingPage() {
 
@@ -29,7 +29,7 @@ function FolderSettingPage() {
 
         if (parentFolder === null) {
             const tempId = getTempId();
-            setFolders([...folders, {id: tempId, title: tempTitle, postCount: 0, subFolders: []}]);
+            setFolders([...folders, { id: tempId, title: tempTitle, postCount: 0, subFolders: [] }]);
             setEditFolderTitle("");
             setEditFolderId(tempId);
             return;
@@ -45,10 +45,10 @@ function FolderSettingPage() {
                 setEditFolderId(tempId);
                 return {
                     ...folder,
-                    subFolders: [...folder.subFolders, {id: tempId, title: title, postCount: 0, subFolders: []}]
+                    subFolders: [...folder.subFolders, { id: tempId, title: title, postCount: 0, subFolders: [] }]
                 };
             } else if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getAddFolderList(folder.subFolders, id, title)};
+                return { ...folder, subFolders: getAddFolderList(folder.subFolders, id, title) };
             }
             return folder;
         });
@@ -100,7 +100,7 @@ function FolderSettingPage() {
         }
         return folders.map((folder: FolderType): FolderType => {
             if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getModalMoveFolderList(folder.subFolders)};
+                return { ...folder, subFolders: getModalMoveFolderList(folder.subFolders) };
             }
             return folder;
         });
@@ -112,15 +112,15 @@ function FolderSettingPage() {
 
         return folders.map((folder: FolderType): FolderType => {
             if (folder.id === targetFolder.id) {
-                return {...folder, subFolders: [...folder.subFolders, selectedFolder]};
+                return { ...folder, subFolders: [...folder.subFolders, selectedFolder] };
             } else if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getAddFolderModalList(folder.subFolders)};
+                return { ...folder, subFolders: getAddFolderModalList(folder.subFolders) };
             }
             return folder;
         });
     }
 
-    const handleOnDragEnd = ({active, over}: DragEndEvent) => {
+    const handleOnDragEnd = ({ active, over }: DragEndEvent) => {
         if (!over || active.id === over.id) {
             return;
         }
@@ -136,7 +136,7 @@ function FolderSettingPage() {
         }
         return folders.map((folder: FolderType): FolderType => {
             if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getMoveFolderList(folder.subFolders, activeId, overId)};
+                return { ...folder, subFolders: getMoveFolderList(folder.subFolders, activeId, overId) };
             }
             return folder;
         });
@@ -230,9 +230,9 @@ function FolderSettingPage() {
     const getEditFolderList = (folders: FolderType[], id: string, title: string) => {
         return folders.map((folder: FolderType): FolderType => {
             if (folder.id === id) {
-                return {...folder, title: title};
+                return { ...folder, title: title };
             } else if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getEditFolderList(folder.subFolders, id, title)};
+                return { ...folder, subFolders: getEditFolderList(folder.subFolders, id, title) };
             }
             return folder;
         })
@@ -262,7 +262,7 @@ function FolderSettingPage() {
 
         return folders.map((folder: FolderType): FolderType => {
             if (folder.subFolders.length > 0) {
-                return {...folder, subFolders: getDeleteFolderList(folder.subFolders, id)};
+                return { ...folder, subFolders: getDeleteFolderList(folder.subFolders, id) };
             }
             return folder;
         })
@@ -280,7 +280,7 @@ function FolderSettingPage() {
 
         saveAndUpdateFolder(toFolderRequestList(folders))
             .then(() => {
-                deleteFolder(deleteFolderIds.map(id => ({folderId: id})))
+                deleteFolder(deleteFolderIds.map(id => ({ folderId: id })))
                     .then(() => {
                         alert("변경사항이 저장되었습니다.");
                         setTrigger(prev => !prev);
@@ -317,7 +317,7 @@ function FolderSettingPage() {
     }, []);
 
     useEffect(() => {
-        setTargetFolder({...targetFolder, title: ""});
+        setTargetFolder({ ...targetFolder, title: "" });
     }, [openMoveModal]);
 
     return (
@@ -334,13 +334,13 @@ function FolderSettingPage() {
                 handleOnDragEnd={handleOnDragEnd}
                 handleDelete={handleDelete}
                 setOpenMoveModal={setOpenMoveModal}
-                setSelectedFolder={setSelectedFolder}/>
+                setSelectedFolder={setSelectedFolder} />
             <button className="w-full border border-gray-400 h-12 px-4 my-4 text-sm hover:cursor-pointer"
-                    onClick={() => addFolder(null)}>
+                onClick={() => addFolder(null)}>
                 폴더 추가
             </button>
             <div className="flex justify-end">
-                <FillButton text={"변경사항 저장"} onClick={handleSubmit} addStyle={"text-sm"}/>
+                <FillButton text={"변경사항 저장"} onClick={handleSubmit} addStyle={"text-sm"} />
             </div>
             {openMoveModal && (
                 <ModalLayout addStyle={"!w-128"} customRef={modalRef}>
@@ -368,10 +368,10 @@ function FolderSettingPage() {
                                             value={index}
                                             checked={folderMoveType === index}
                                             onChange={() => setFolderMoveType(index)}
-                                            disabled={handleDisabled(index)}/>
+                                            disabled={handleDisabled(index)} />
                                         <label key={`folder-radio-label-${index}`}
-                                               className={`${handleDisabled(index) && "text-gray-400"}`}
-                                               htmlFor={`folderMoveType${index}`}>{moveType}</label>
+                                            className={`${handleDisabled(index) && "text-gray-400"}`}
+                                            htmlFor={`folderMoveType${index}`}>{moveType}</label>
                                     </div>
                                 )}
                             </div>
@@ -379,9 +379,9 @@ function FolderSettingPage() {
                         <div className="flex justify-center items-center gap-x-4">
                             <FillButton text={"취소"} onClick={() => {
                                 setOpenMoveModal(false);
-                            }}/>
+                            }} />
                             <FillButton text={"이동"} onClick={handleMoveFolder}
-                                        addStyle={(handleDisabled(folderMoveType) ? "opacity-40 hover:!cursor-auto" : "")}/>
+                                addStyle={(handleDisabled(folderMoveType) ? "opacity-40 hover:!cursor-auto" : "")} />
                         </div>
                     </div>
                 </ModalLayout>
diff --git a/src/pages/setting/PostSettingPage.tsx b/src/pages/setting/PostSettingPage.tsx
index 0b2dedf..80e5946 100644
--- a/src/pages/setting/PostSettingPage.tsx
+++ b/src/pages/setting/PostSettingPage.tsx
@@ -1,17 +1,17 @@
-import {ChangeEvent, useEffect, useState} from "react";
-import {PostResponse} from "../../common/types/post.tsx";
-import {TextLink} from "../../components/common/TextButton.tsx";
+import { ChangeEvent, useEffect, useState } from "react";
+import { PostResponse } from "../../common/types/post.tsx";
+import { TextLink } from "../../components/common/TextButton.tsx";
 import PaginationButton from "../../components/common/PaginationButton.tsx";
-import {PageResponse} from "../../common/types/common.tsx";
-import {fullDateToKorean} from "../../common/util/date.tsx";
-import {getMemberFolders, getMemberPosts} from "../../common/apis/blog.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {FillButton} from "../../components/common/FillButton.tsx";
-import {updatePostFolder} from "../../common/apis/post.tsx";
+import { PageResponse } from "../../common/types/common.tsx";
+import { fullDateToKorean } from "../../common/util/date.tsx";
+import { getMemberFolders, getMemberPosts } from "../../common/apis/blog.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { FillButton } from "../../components/common/FillButton.tsx";
+import { updatePostFolder } from "../../common/apis/post.tsx";
 import FolderSelectBox from "../../components/folder/FolderSelectBox.tsx";
-import {FolderType, toFolderTypeList} from "../../common/types/blog.tsx";
-import {FaRegFolder} from "react-icons/fa6";
+import { FolderType, toFolderTypeList } from "../../common/types/blog.tsx";
+import { FaRegFolder } from "react-icons/fa6";
 
 function PostSettingPage() {
 
@@ -19,7 +19,7 @@ function PostSettingPage() {
 
     const [posts, setPosts] = useState<PostResponse[]>([]);
     const [page, setPage] = useState(0);
-    const [pageInfo, setPageInfo] = useState<PageResponse>({number: 0, size: 10, totalElements: 0, totalPages: 0});
+    const [pageInfo, setPageInfo] = useState<PageResponse>({ number: 0, size: 10, totalElements: 0, totalPages: 0 });
 
     const [isFolderEdit, setIsFolderEdit] = useState(false);
     const [postIds, setPostIds] = useState<string[]>([]);
@@ -46,7 +46,7 @@ function PostSettingPage() {
     }
 
     const handleClickCheckBox = (event: ChangeEvent<HTMLInputElement>) => {
-        const {name, checked} = event.target;
+        const { name, checked } = event.target;
 
         if (checked) {
             setPostIds(prev => [...prev, name]);
@@ -138,38 +138,38 @@ function PostSettingPage() {
                             folders={folders}
                             targetFolder={targetFolder}
                             setTargetFolder={setTargetFolder}
-                            center={false}/>
-                        <FillButton text={"취소"} onClick={handleIsFolderEdit} addStyle={"!bg-gray-400 w-22 h-10"}/>
-                        <FillButton text={"이동"} onClick={submitPostFolderUpdate} addStyle={"w-22 h-10"}/>
+                            center={false} />
+                        <FillButton text={"취소"} onClick={handleIsFolderEdit} addStyle={"!bg-gray-400 w-22 h-10"} />
+                        <FillButton text={"이동"} onClick={submitPostFolderUpdate} addStyle={"w-22 h-10"} />
                     </div>}
                 {!isFolderEdit &&
                     <div className="flex gap-x-2">
-                        <FillButton text={"폴더 이동"} onClick={handleIsFolderEdit}/>
+                        <FillButton text={"폴더 이동"} onClick={handleIsFolderEdit} />
                     </div>}
             </div>
             <div>
                 {posts.map((post: PostResponse) => (
                     <div key={post.id}
-                         className="flex justify-between items-center rounded-2xl shadow p-4 my-4">
+                        className="flex justify-between items-center rounded-2xl shadow p-4 my-4">
                         <div className="flex flex-col gap-y-2 flex-1">
                             <p className="font-semibold">{post.title}</p>
                             <p className="text-sm font-light">{fullDateToKorean(post.createdAt)}</p>
                             <div className="flex items-center gap-x-2">
-                                <FaRegFolder color={"gray"}/>
+                                <FaRegFolder color={"gray"} />
                                 <p>{post.folder ? post.folder.title : "폴더 없음"}</p>
                             </div>
                         </div>
                         {!isFolderEdit &&
                             <div className="flex items-center gap-x-4">
                                 <TextLink text={"수정"} to={`/post/edit/${post.id}`}
-                                          addStyle={"text-sm hover:text-lime-600"}/>
+                                    addStyle={"text-sm hover:text-lime-600"} />
                             </div>}
                         {isFolderEdit &&
                             <input type="checkbox"
-                                   className="size-4"
-                                   name={post.id}
-                                   checked={handleCheckBox(post.id)}
-                                   onChange={handleClickCheckBox}/>}
+                                className="size-4"
+                                name={post.id}
+                                checked={handleCheckBox(post.id)}
+                                onChange={handleClickCheckBox} />}
                     </div>
                 ))}
                 {posts.length === 0 &&
@@ -177,7 +177,7 @@ function PostSettingPage() {
                         작성된 게시글이 없습니다.
                     </div>}
             </div>
-            <PaginationButton pageInfo={pageInfo} setPage={setPage}/>
+            <PaginationButton pageInfo={pageInfo} setPage={setPage} />
         </div>
     );
 }
diff --git a/src/pages/setting/ProfileSettingPage.tsx b/src/pages/setting/ProfileSettingPage.tsx
index 253072b..e29c006 100644
--- a/src/pages/setting/ProfileSettingPage.tsx
+++ b/src/pages/setting/ProfileSettingPage.tsx
@@ -1,12 +1,12 @@
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
-import {MdOutlineEdit} from "react-icons/md";
-import {ChangeEvent, useRef, useState} from "react";
-import {FillButton} from "../../components/common/FillButton.tsx";
-import {setUsername} from "../../common/slices/loginSlice.tsx";
-import {TextButton} from "../../components/common/TextButton.tsx";
-import {updateProfileImage, updateUsername} from "../../common/apis/member.tsx";
-import {useNavigate} from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
+import { MdOutlineEdit } from "react-icons/md";
+import { ChangeEvent, useRef, useState } from "react";
+import { FillButton } from "../../components/common/FillButton.tsx";
+import { setUsername } from "../../common/slices/loginSlice.tsx";
+import { TextButton } from "../../components/common/TextButton.tsx";
+import { updateProfileImage, updateUsername } from "../../common/apis/member.tsx";
+import { useNavigate } from "react-router-dom";
 import ProfileImageCircle from "../../components/common/ProfileImageCircle.tsx";
 
 function ProfileSettingPage() {
@@ -81,19 +81,19 @@ function ProfileSettingPage() {
             <div
                 className="border border-gray-200 rounded-2xl p-16 flex flex-col justify-start items-center py-4 gap-4 z-200">
                 <div className="flex justify-center items-center gap-x-4">
-                    <div className={`${isImageEdit ? "w-36" : "w-0"}`}/>
+                    <div className={`${isImageEdit ? "w-36" : "w-0"}`} />
                     <div className="relative group">
                         {isImageEdit && image
                             ? <img className="border border-gray-300 size-32 rounded-full group-hover:brightness-50"
-                                   src={image} alt="Edit Profile Image"/>
-                            : <ProfileImageCircle profileUrl={loginState.profileUrl} size="lg" addStyle="!border-gray-300 group-hover:brightness-50 border !size-32"/>}
+                                src={image} alt="Edit Profile Image" />
+                            : <ProfileImageCircle profileUrl={loginState.profileUrl} size="lg" addStyle="!border-gray-300 group-hover:brightness-50 border !size-32" />}
                         <div className={`${!loginState.profileUrl && "top-1 left-1"} absolute size-32 inset-0 flex justify-center items-center`}>
                             <input
                                 type="file"
                                 accept="image/*"
                                 onChange={handleImageChange}
                                 ref={fileInputRef}
-                                hidden/>
+                                hidden />
                             <MdOutlineEdit
                                 className="size-10 p-1 opacity-0 rounded-full border bg-white group-hover:opacity-100 hover:brightness-50 hover:cursor-pointer"
                                 onClick={handleImageEdit}>
@@ -101,8 +101,8 @@ function ProfileSettingPage() {
                         </div>
                     </div>
                     {isImageEdit && <div className="w-32 flex justify-center items-center">
-                        <TextButton text={"취소"} onClick={handleImageEditCancel}/>
-                        <FillButton text={"변경"} onClick={handleImageSubmit}/>
+                        <TextButton text={"취소"} onClick={handleImageEditCancel} />
+                        <FillButton text={"변경"} onClick={handleImageSubmit} />
                     </div>}
                 </div>
                 <div className="flex justify-center items-center gap-x-4 text-2xl font-black">
@@ -113,24 +113,24 @@ function ProfileSettingPage() {
                                 type="text"
                                 value={input}
                                 onChange={e => setInput(e.target.value)}
-                                placeholder="Username"/>
+                                placeholder="Username" />
                             <TextButton
                                 text={"취소"}
                                 onClick={handleUsernameEditCancel}
-                                addStyle={"w-20 text-sm font-normal"}/>
+                                addStyle={"w-20 text-sm font-normal"} />
                             <FillButton
                                 text={"변경"}
                                 onClick={handleUsernameSubmit}
-                                addStyle={"w-20 text-sm font-normal"}/>
+                                addStyle={"w-20 text-sm font-normal"} />
                         </div>
                         : <div className="flex justify-center items-center gap-x-4">
-                            <div className="w-12"/>
+                            <div className="w-12" />
                             <p className="text-center">
                                 {loginState.username}
                             </p>
                             <button className="w-12 hover:cursor-pointer hover:text-gray-600"
-                                    onClick={handleUsernameEdit}>
-                                <MdOutlineEdit/>
+                                onClick={handleUsernameEdit}>
+                                <MdOutlineEdit />
                             </button>
                         </div>}
                 </div>
diff --git a/src/pages/setting/SettingPage.tsx b/src/pages/setting/SettingPage.tsx
index 5aa5033..8ba15ee 100644
--- a/src/pages/setting/SettingPage.tsx
+++ b/src/pages/setting/SettingPage.tsx
@@ -1,19 +1,19 @@
 import BasicLayout from "../../layout/BasicLayout.tsx";
-import {useEffect, useRef, useState} from "react";
+import { useEffect, useRef, useState } from "react";
 import PostSettingPage from "./PostSettingPage.tsx";
 import ProfileSettingPage from "./ProfileSettingPage.tsx";
 import FolderSettingPage from "./FolderSettingPage.tsx";
-import {useNavigate, useParams} from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import SettingSideBar from "../../components/setting/SettingSideBar.tsx";
-import {useSelector} from "react-redux";
-import {RootState} from "../../store.tsx";
+import { useSelector } from "react-redux";
+import { RootState } from "../../store.tsx";
 import IconButton from "../../components/common/IconButton.tsx";
-import {MdMenu, MdOutlineExitToApp} from "react-icons/md";
+import { MdMenu, MdOutlineExitToApp } from "react-icons/md";
 
 function SettingPage() {
 
     const loginState = useSelector((state: RootState) => state.loginSlice);
-    const {section} = useParams();
+    const { section } = useParams();
     const navigate = useNavigate();
     const [selectedSection, setSelectedSection] = useState<string>(section || "profile");
 
@@ -55,35 +55,35 @@ function SettingPage() {
                 className={`${menuOpen ? "block translate-x-0" : "hidden translate-x-full"} absolute top-0 left-0 flex-col
                      transform transition-transform duration-300 ease-out z-20`}>
                 <button className="absolute top-6 right-6 hover:cursor-pointer"
-                        onClick={() => setMenuOpen(false)}>
-                    <MdOutlineExitToApp className="size-8 text-gray-500"/>
+                    onClick={() => setMenuOpen(false)}>
+                    <MdOutlineExitToApp className="size-8 text-gray-500" />
                 </button>
                 <SettingSideBar
                     setSelectedSection={setSelectedSection}
-                    side={true}/>
+                    side={true} />
             </div>
             <div className={`${(menuOpen) ? "opacity-50 backdrop-blur-sm z-10 overflow-y-hidden" : "z-10"} px-4 flex flex-col md:flex-row w-full gap-x-4 md:gap-y-4`}>
                 <div className="hidden md:block">
                     <SettingSideBar
                         setSelectedSection={setSelectedSection}
-                        side={false}/>
+                        side={false} />
                 </div>
                 <div className="block md:hidden">
                     <IconButton
-                        icon={<MdMenu size={24}/>}
-                        onClick={() => setMenuOpen(prev => !prev)}/>
+                        icon={<MdMenu size={24} />}
+                        onClick={() => setMenuOpen(prev => !prev)} />
                 </div>
                 {(selectedSection === "profile") &&
                     <div className="md:border-l border-gray-200 w-full ps-8">
-                        <ProfileSettingPage/>
+                        <ProfileSettingPage />
                     </div>}
                 {(selectedSection === "folder") &&
                     <div className="md:border-l border-gray-200 w-full ps-8">
-                        <FolderSettingPage/>
+                        <FolderSettingPage />
                     </div>}
                 {(selectedSection === "post") &&
                     <div className="md:border-l border-gray-200 w-full ps-8">
-                        <PostSettingPage/>
+                        <PostSettingPage />
                     </div>}
             </div>
         </BasicLayout>
diff --git a/src/store.tsx b/src/store.tsx
index df571e2..2406e23 100644
--- a/src/store.tsx
+++ b/src/store.tsx
@@ -1,4 +1,4 @@
-import {configureStore} from "@reduxjs/toolkit";
+import { configureStore } from "@reduxjs/toolkit";
 import loginSlice from "./common/slices/loginSlice.tsx";
 
 const store = configureStore({