From 016f847ccb5b1a6b5d9a810435be15a7fca1c56c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 15:46:09 +0900
Subject: [PATCH 01/23] =?UTF-8?q?=F0=9F=93=A6=20chore:=20env=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20gitignore=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 8f322f0d8..45c1abce8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

From bbb8b6d54c0361d3bc514eba732d12096093eafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 15:47:24 +0900
Subject: [PATCH 02/23] =?UTF-8?q?=F0=9F=93=A6=20chore:=20env=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20git=EC=97=90=EC=84=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .env

diff --git a/.env b/.env
deleted file mode 100644
index 381905d00..000000000
--- a/.env
+++ /dev/null
@@ -1 +0,0 @@
-NEXT_PUBLIC_BASE_URL=https://panda-market-api.vercel.app

From aa7c6a7dcd76aadf4bae29601cf6240ef927a7d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 16:00:54 +0900
Subject: [PATCH 03/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20axios=20?=
 =?UTF-8?q?URLSearchParams=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index 452e79071..5339c7044 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -3,9 +3,12 @@ import instance from "@/lib/axios";
 // 페이지네이션을 위한 전체 게시글 수
 export async function getTotalPosts() {
   try {
-    const { data } = await instance.get(
-      "/articles?&pageSize=10000&orderBy=recent",
-    );
+    const params = new URLSearchParams({
+      pageSize: "10000",
+      orderBy: "recent",
+    });
+
+    const { data } = await instance.get("/articles?", { params });
     return data.list.length;
   } catch (error) {
     console.error("getTotalPosts 함수에서 오류 발생:", error);
@@ -36,9 +39,11 @@ export async function getPosts({
 
 export async function getBestPosts({ pageSize = 3 }) {
   try {
-    const { data } = await instance.get(
-      `/articles?&pageSize=${pageSize}&orderBy=like`,
-    );
+    const params = new URLSearchParams({ orderBy: "like" });
+
+    const { data } = await instance.get(`/articles?&pageSize=${pageSize}`, {
+      params,
+    });
     return data.list;
   } catch (error) {
     console.error("getBestPosts 함수에서 오류 발생:", error);
@@ -58,9 +63,10 @@ export async function getPostsDetail(articleId: string) {
 
 export async function getPostsComments(articleId: string) {
   try {
-    const { data } = await instance.get(
-      `/articles/${articleId}/comments?limit=100`,
-    );
+    const params = new URLSearchParams({ limit: "100" });
+    const { data } = await instance.get(`/articles/${articleId}/comments?`, {
+      params,
+    });
     return data.list;
   } catch (error) {
     console.error("getPostsComments 함수에서 오류 발생:", error);

From c4a9dfc2f2abb7ff4406f611eb8d50b3d6eca7f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 16:02:02 +0900
Subject: [PATCH 04/23] =?UTF-8?q?=F0=9F=94=A5=20remove:=20=EC=9E=A5?=
 =?UTF-8?q?=EC=8B=9D=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EB=B9=88=20alt=20?=
 =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BestPosts.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/BestPosts.tsx b/components/BestPosts.tsx
index 5f3aaf526..8a2f7b873 100644
--- a/components/BestPosts.tsx
+++ b/components/BestPosts.tsx
@@ -108,7 +108,7 @@ export default function BestPosts({ initialBestPosts }: BestPostsProps) {
             key={post.id}
           >
             <div className="inline-flex h-[30px] w-[102px] items-center justify-center rounded-b-[5rem] bg-[var(--main)]">
-              <Image src={icon_medal} alt="메달" width={16} height={16} />
+              <Image src={icon_medal} alt="" width={16} height={16} />
               <p className="text-[16px] text-white">Best</p>
             </div>
             <div className="flex h-[80px] items-center justify-between gap-[0.3rem]">

From 358bb042cc5f5b757514ddef3f7cfe14a37f922a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 17:35:40 +0900
Subject: [PATCH 05/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=BC=EC=9C=88=EB=93=9C=20=EA=B3=B5=ED=86=B5=20?=
 =?UTF-8?q?=EB=B3=80=EC=88=98=20=EC=9E=AC=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BestPosts.tsx  | 14 +++++-----
 components/FileInput.tsx  |  4 +--
 components/Footer.tsx     |  4 +--
 components/Header.tsx     | 19 ++++++-------
 components/Pagination.tsx |  6 ++---
 components/Posts.tsx      | 26 +++++++++---------
 pages/addBoards.tsx       | 20 +++++++-------
 pages/boards.tsx          |  4 +--
 pages/boards/[id].tsx     | 26 +++++++++---------
 pages/index.tsx           | 56 +++++++++++++++++----------------------
 pages/signin.tsx          | 22 +++++++--------
 pages/signup.tsx          | 36 ++++++++++++-------------
 styles/globals.css        | 29 --------------------
 tailwind.config.js        | 41 +++++++++++++++++++++++-----
 14 files changed, 145 insertions(+), 162 deletions(-)

diff --git a/components/BestPosts.tsx b/components/BestPosts.tsx
index 8a2f7b873..094a29c31 100644
--- a/components/BestPosts.tsx
+++ b/components/BestPosts.tsx
@@ -104,17 +104,17 @@ export default function BestPosts({ initialBestPosts }: BestPostsProps) {
         bestPosts.map((post) => (
           <Link
             href={`/boards/${post.id}`}
-            className="h-[169px] w-[400px] rounded-[1rem] bg-[var(--gray50)] px-8 md:w-[380px] xl:w-full"
+            className="h-[169px] w-[400px] rounded-[1rem] bg-gray-50 px-8 md:w-[380px] xl:w-full"
             key={post.id}
           >
-            <div className="inline-flex h-[30px] w-[102px] items-center justify-center rounded-b-[5rem] bg-[var(--main)]">
+            <div className="bg-main inline-flex h-[30px] w-[102px] items-center justify-center rounded-b-[5rem]">
               <Image src={icon_medal} alt="" width={16} height={16} />
               <p className="text-[16px] text-white">Best</p>
             </div>
             <div className="flex h-[80px] items-center justify-between gap-[0.3rem]">
               <h3 className="m-0 p-0 font-bold">{post.title}</h3>
               {post.image && (
-                <div className="flex h-[72px] min-w-[72px] items-center justify-center rounded-[0.3rem] border-[1.5px] border-[var(--gray100)] bg-white">
+                <div className="flex h-[72px] min-w-[72px] items-center justify-center rounded-[0.3rem] border-[1.5px] border-gray-100 bg-white">
                   <Image
                     src={post.image}
                     alt="포스트 이미지"
@@ -126,15 +126,13 @@ export default function BestPosts({ initialBestPosts }: BestPostsProps) {
             </div>
             <div className="mt-4 flex items-end justify-between">
               <div className="flex items-center justify-start gap-[0.2rem]">
-                <p className="text-[14px] text-[var(--gray600)]">
+                <p className="text-[14px] text-gray-600">
                   {post.writer.nickname}
                 </p>
                 <Image src={icon_favorite} alt="하트" width={16} height={16} />
-                <p className="text-[14px] text-[var(--gray600)]">
-                  {post.likeCount}
-                </p>
+                <p className="text-[14px] text-gray-600">{post.likeCount}</p>
               </div>
-              <p className="text-[14px] text-[var(--gray400)]">
+              <p className="text-[14px] text-gray-400">
                 {formatDate(post.createdAt)}
               </p>
             </div>
diff --git a/components/FileInput.tsx b/components/FileInput.tsx
index f2e8b3017..f4247162d 100644
--- a/components/FileInput.tsx
+++ b/components/FileInput.tsx
@@ -51,7 +51,7 @@ function FileInput({ name, value, initialPreview, onChange }: FileInputProps) {
   }, [value, initialPreview]);
 
   return (
-    <div className="rounded-0.5rem relative my-2 h-[162px] w-[162px] overflow-hidden rounded-md bg-[--coolgray100] lg:h-[282px] lg:w-[282px]">
+    <div className="bg-coolgray-100 relative my-2 h-[162px] w-[162px] overflow-hidden rounded-md lg:h-[282px] lg:w-[282px]">
       <div className="flex h-full w-full items-center justify-center">
         {preview ? (
           <Image
@@ -80,7 +80,7 @@ function FileInput({ name, value, initialPreview, onChange }: FileInputProps) {
       />
       {value && (
         <button
-          className="absolute right-[9px] top-[9px] h-[26px] w-[26px] cursor-pointer rounded-full border-none bg-black bg-opacity-40 p-1 hover:bg-[--main]"
+          className="hover:bg-main absolute right-2.5 top-2.5 h-6 w-6 cursor-pointer rounded-full border-none bg-black bg-opacity-40 p-1"
           onClick={handleClearClick}
         >
           <Image src={icon_reset} alt="선택해제" width={26} height={26} />
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 4551234cb..9a14c4fa6 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -8,13 +8,13 @@ import Image from "next/image";
 
 function Footer() {
   return (
-    <footer className="b-[0] relative mt-auto h-[160px] w-full bg-gray-800 py-6 text-white">
+    <footer className="b-[0] bg-footer relative mt-auto h-[160px] w-full py-6 text-white">
       <div className="container mx-auto flex flex-col-reverse items-center justify-between md:flex-row">
         <p className="relative -left-[10rem] top-[1rem] mb-4 text-sm md:left-0 md:top-0 md:mb-0 md:text-base">
           ©codeit - 2024
         </p>
         <div className="flex flex-row items-center md:justify-between md:gap-[20rem]">
-          <div className="relative -left-[5rem] top-2 mb-4 flex items-center space-x-4 text-white md:-left-0 md:top-0 md:mb-0">
+          <div className="text-footercodeit relative -left-[5rem] top-2 mb-4 flex items-center space-x-4 md:-left-0 md:top-0 md:mb-0">
             <p className="text-sm md:text-base">
               <Link href="./privacy.html">Privacy Policy</Link>
             </p>
diff --git a/components/Header.tsx b/components/Header.tsx
index d0046b52b..67afe9c84 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -35,7 +35,7 @@ export default function Header() {
   };
 
   return (
-    <div className="fixed top-0 z-50 flex h-16 w-full items-center justify-between gap-4 bg-white px-[24px] py-0 lg:gap-12 lg:px-48 lg:py-4">
+    <div className="fixed top-0 z-50 flex h-16 w-full items-center justify-between gap-4 bg-white px-6 py-0 lg:gap-12 lg:px-12 lg:py-4">
       <div className="flex items-center gap-4">
         <div
           onClick={goToMain}
@@ -55,9 +55,9 @@ export default function Header() {
           <nav className="flex flex-row gap-2 text-lg font-bold md:gap-8">
             <Link
               href="/boards"
-              className={`hover:text-[--main] ${
+              className={`hover:text-main ${
                 pathName.includes("/boards") || pathName.includes("/addBoards")
-                  ? "text-[--main]"
+                  ? "text-blue-500"
                   : ""
               }`}
             >
@@ -65,8 +65,8 @@ export default function Header() {
             </Link>
             <Link
               href="/items"
-              className={`hover:text-[--main] ${
-                pathName === "/items" ? "text-[--main]" : ""
+              className={`hover:text-main ${
+                pathName === "/items" ? "text-main" : ""
               }`}
             >
               중고마켓
@@ -85,11 +85,8 @@ export default function Header() {
         />
       )}
       {isLogoutBoxVisible && (
-        <div className="absolute right-5 top-14 z-50 rounded-lg bg-white px-4 py-2 shadow-md lg:right-12 lg:top-3">
-          <button
-            className="text-gray-700 hover:text-[--main]"
-            onClick={logout}
-          >
+        <div className="absolute right-5 top-14 z-50 rounded-lg bg-white px-4 py-2 shadow-md lg:right-12 lg:top-16">
+          <button className="hover:text-main text-gray-700" onClick={logout}>
             로그아웃
           </button>
         </div>
@@ -98,7 +95,7 @@ export default function Header() {
         <button
           id="btn_small"
           onClick={goToSignin}
-          className="inline-flex h-[42px] w-[128px] cursor-pointer items-center justify-center rounded-[0.5rem] border-none bg-[--btn1] px-[0.5rem] py-[1.5rem] text-white hover:bg-[--btn2]"
+          className="bg-main hover:bg-btn-2 inline-flex cursor-pointer items-center justify-center rounded-md border-none px-6 py-2 text-white"
         >
           로그인
         </button>
diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index 2123ff7ab..31a73f403 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -24,8 +24,6 @@ export default function Pagination({
   for (let i = 1; i <= totalPages; i++) {
     pages.push(i);
   }
-  // console.log(pages);
-  // console.log(currentPage, totalPages);
 
   return (
     <div className="mt-8 flex items-center justify-center gap-4">
@@ -41,8 +39,8 @@ export default function Pagination({
           <div
             key={i}
             className={`flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border border-gray-300 font-bold ${
-              currentPage === i ? "bg-[--btn1] text-white" : ""
-            } hover:bg-[--btn1] hover:text-white`}
+              currentPage === i ? "bg-btn-1 text-white" : ""
+            } hover:bg-btn-1 hover:text-white`}
             onClick={() => onPageChange(i)}
           >
             {i}
diff --git a/components/Posts.tsx b/components/Posts.tsx
index 6fe3b5120..7762e3646 100644
--- a/components/Posts.tsx
+++ b/components/Posts.tsx
@@ -108,14 +108,14 @@ export default function Posts({ initialPosts }: PostsProps) {
             <Image src={icon_search} alt="검색 아이콘" width={24} height={24} />
           </div>
           <input
-            className="flex h-[42px] flex-shrink-0 flex-grow basis-auto rounded-[0.5rem] border-none bg-[var(--coolgray100)] px-[2.8rem] py-[0.8rem] focus:outline-none"
+            className="flex h-[42px] flex-shrink-0 flex-grow basis-auto rounded-md border-none bg-gray-50 px-10 py-2 focus:outline-none"
             placeholder="검색할 게시글 제목을 입력해주세요"
             type="search"
             onChange={handleKeywordSearch}
           />
         </div>
         <div
-          className="relative flex h-[42px] w-[2rem] cursor-pointer items-center justify-center rounded-[0.5rem] border border-[var(--gray100)] bg-white px-4 py-2 md:w-[8rem]"
+          className="relative flex h-[42px] w-[2rem] cursor-pointer items-center justify-center rounded-md border border-gray-200 bg-white px-4 py-2 md:w-[8rem]"
           onClick={toggleDropdown}
         >
           <picture className="flex items-center">
@@ -130,12 +130,12 @@ export default function Posts({ initialPosts }: PostsProps) {
             <Image src={icon_dropdown} alt="드롭다운" width={24} height={24} />
           </picture>
           {isDropdownView && (
-            <ul className="absolute -left-[2.5rem] top-full z-50 m-0 w-max list-none rounded-[0.5rem] border border-[var(--gray100)] bg-white p-0 md:-left-0 md:w-full">
+            <ul className="absolute -left-10 top-full z-50 m-0 w-max list-none rounded-md border border-gray-200 bg-white p-0 md:-left-0 md:w-full">
               {selectOptions.map((option) => (
                 <li
                   key={option.value}
                   onClick={() => selectOption(option.value)}
-                  className="cursor-pointer border-b-[var(--gray100)] p-2 text-center hover:bg-[var(--gray100)]"
+                  className="cursor-pointer border-b border-gray-200 p-2 text-center hover:bg-gray-200"
                 >
                   {option.label}
                 </li>
@@ -149,14 +149,14 @@ export default function Posts({ initialPosts }: PostsProps) {
           posts.map((post) => {
             return (
               <div key={post.id}>
-                <div className="w-full max-w-[1200px] border-b-[1px] border-[var(--gray100)] pb-4 pt-4">
+                <div className="w-full max-w-5xl border-b border-gray-200 pb-4 pt-4">
                   <Link
                     href={`/boards/${post.id}`}
-                    className="flex h-[80px] items-start justify-between gap-[0.3rem]"
+                    className="flex h-[80px] items-start justify-between gap-1"
                   >
                     <h3 className="m-0 p-0 font-bold">{post.title}</h3>
                     {post.image && (
-                      <div className="flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded-[0.3rem] border-[1.5px] border-[var(--gray100)] bg-white p-4">
+                      <div className="flex h-[72px] w-[72px] items-center justify-center overflow-hidden rounded border border-gray-200 bg-white p-4">
                         <Image
                           src={post.image}
                           alt="포스트 이미지"
@@ -167,30 +167,28 @@ export default function Posts({ initialPosts }: PostsProps) {
                     )}
                   </Link>
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-[0.5rem]">
+                    <div className="flex items-center gap-2">
                       <Image
                         src={img_profile}
                         alt="프로필 이미지"
                         width={24}
                         height={24}
                       />
-                      <p className="text-[14px] text-[var(--gray600)]">
+                      <p className="text-sm text-gray-600">
                         {post.writer.nickname}
                       </p>
-                      <p className="text-[14px] text-[var(--gray400)]">
+                      <p className="text-sm text-gray-400">
                         {formatDate(post.createdAt)}
                       </p>
                     </div>
-                    <div className="flex items-center gap-[0.2rem]">
+                    <div className="flex items-center gap-1">
                       <Image
                         src={icon_favorite}
                         alt="하트"
                         width={16}
                         height={16}
                       />
-                      <p className="text-[14px] text-[var(--gray600)]">
-                        {post.likeCount}
-                      </p>
+                      <p className="text-sm text-gray-600">{post.likeCount}</p>
                     </div>
                   </div>
                 </div>
diff --git a/pages/addBoards.tsx b/pages/addBoards.tsx
index ffed836d5..a983d5f65 100644
--- a/pages/addBoards.tsx
+++ b/pages/addBoards.tsx
@@ -1,4 +1,4 @@
-import React, { KeyboardEvent, useState } from "react";
+import React, { useState } from "react";
 import FileInput from "../components/FileInput";
 import { useRouter } from "next/router";
 import instance from "@/lib/axios";
@@ -20,11 +20,12 @@ type PostData = {
   image?: string;
 };
 
-function AddItem({
+function AddBoards({
   initialValues = INITIAL_VALUES,
   initialPreview,
 }: AddPostProps) {
   const [values, setValues] = useState<typeof INITIAL_VALUES>(initialValues);
+  const router = useRouter();
 
   const isDisabled = !values.title || !values.content;
 
@@ -34,6 +35,7 @@ function AddItem({
       [name]: value,
     }));
   };
+
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
   ) => {
@@ -41,9 +43,7 @@ function AddItem({
     handleChange(name, value);
   };
 
-  const router = useRouter();
-
-  const handleformSubmit = async () => {
+  const handleFormSubmit = async () => {
     const token = localStorage.getItem("accessToken");
 
     try {
@@ -63,13 +63,11 @@ function AddItem({
         imageUrl = imageResponse.data.url;
       }
 
-      // 이미지가 없을 때도 요청을 보낼 수 있게
       const postData: PostData = {
         title: values.title,
         content: values.content,
       };
 
-      // 이미지 URL이 존재할 경우에만 이미지 데이터 추가
       if (imageUrl) {
         postData.image = imageUrl;
       }
@@ -89,7 +87,7 @@ function AddItem({
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    handleformSubmit();
+    await handleFormSubmit();
     alert("게시글 등록이 완료되었습니다!");
     router.push("/boards");
     setValues(INITIAL_VALUES);
@@ -115,7 +113,7 @@ function AddItem({
           value={values.title}
           placeholder="제목을 입력해주세요"
           onChange={handleInputChange}
-          className="my-4 mt-2 w-full rounded-md border-none bg-[--coolgray100] px-3 py-2 text-sm focus:outline-[--main]"
+          className="focus:outline-main my-4 mt-2 w-full rounded-md border-none bg-gray-50 px-3 py-2 text-sm"
         />
         <h4 className="font-semibold">*내용</h4>
         <textarea
@@ -123,7 +121,7 @@ function AddItem({
           value={values.content}
           placeholder="내용을 입력해주세요"
           onChange={handleInputChange}
-          className="my-4 mt-2 w-full resize-none rounded-md border-none bg-[--coolgray100] px-3 py-2 text-sm focus:outline-[--main]"
+          className="focus:outline-main my-4 mt-2 w-full resize-none rounded-md border-none bg-gray-50 px-3 py-2 text-sm"
           rows={5}
         />
         <h4 className="font-semibold">이미지</h4>
@@ -138,4 +136,4 @@ function AddItem({
   );
 }
 
-export default AddItem;
+export default AddBoards;
diff --git a/pages/boards.tsx b/pages/boards.tsx
index f29347e49..d6348d147 100644
--- a/pages/boards.tsx
+++ b/pages/boards.tsx
@@ -3,7 +3,7 @@ import BestPosts from "@/components/BestPosts";
 import Posts from "@/components/Posts";
 import Link from "next/link";
 
-export default function boards() {
+export default function Boards() {
   return (
     <div className="m-[8rem_auto_2rem] w-full max-w-[1200px] px-4 md:m-[0] md:p-[8rem_5rem_5rem] lg:m-[0_auto_5rem]">
       <h3 className="mb-4 text-[20px] font-bold">베스트 게시글</h3>
@@ -14,7 +14,7 @@ export default function boards() {
         <h3 className="mb-4 text-[20px] font-bold">게시글</h3>
         <Link
           href="/addBoards"
-          className="inline-flex h-[42px] cursor-pointer items-center justify-center rounded-[0.5rem] border-none bg-[--btn1] px-[1rem] py-[0.5rem] text-white hover:bg-[--btn2]"
+          className="bg-btn-1 hover:bg-btn-2 inline-flex h-[42px] cursor-pointer items-center justify-center rounded-[0.5rem] border-none px-[1rem] py-[0.5rem] text-white"
         >
           글쓰기
         </Link>
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index 362616625..1d8a70ac1 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -107,21 +107,19 @@ export default function postDetail({ post, postComment }: PostsProps) {
       </div>
       <div className="mb-4 flex items-center gap-2 border-b-2">
         <Image src={icon_profile} alt="프로필" width={24} height={24} />
-        <p className="py-4 text-[14px] text-[var(--gray600)]">
-          {post.writer.nickname}
-        </p>
-        <p className="text-[14px] text-[var(--gray400)]">
+        <p className="py-4 text-[14px] text-gray-600">{post.writer.nickname}</p>
+        <p className="text-[14px] text-gray-400">
           {formatDate(post.createdAt)}
         </p>
         <div className="flex items-center justify-start gap-[0.2rem] border-l-2 pl-4">
           <Image src={icon_favorite} alt="하트" width={16} height={16} />
-          <p className="text-[14px] text-[var(--gray600)]">{post.likeCount}</p>
+          <p className="text-[14px] text-gray-600">{post.likeCount}</p>
         </div>
       </div>
       <div className="flex justify-between">
         <p>{post.content}</p>
         {post.image && (
-          <div className="flex items-center justify-center rounded-[0.3rem] border-[1.5px] border-[var(--gray100)] bg-white p-2">
+          <div className="flex items-center justify-center rounded-[0.3rem] border-[1.5px] border-gray-100 bg-white p-2">
             <Image
               src={post.image}
               width={100}
@@ -138,12 +136,16 @@ export default function postDetail({ post, postComment }: PostsProps) {
           onChange={handleInputChange}
           name="content"
           placeholder="댓글을 입력해주세요"
-          className="w-full resize-none rounded-md border-none bg-[--coolgray100] px-3 py-2 text-sm focus:outline-[--main]"
+          className="bg-coolgray-100 focus:outline-main w-full resize-none rounded-md border-none px-3 py-2 text-sm"
           rows={5}
         />
         <button
           onClick={handlesubmitComment}
-          className={`float-right ml-auto mt-4 block h-[42px] items-center justify-center rounded-[0.5rem] border-none bg-[--btn1] px-6 py-[0.5rem] text-white ${content ? "bg-[--main] hover:bg-[--btn2]" : "cursor-not-allowed bg-gray-300"}`}
+          className={`float-right ml-auto mt-4 block h-[42px] items-center justify-center rounded-[0.5rem] border-none px-6 py-[0.5rem] text-white ${
+            content
+              ? "bg-main hover:bg-btn-2"
+              : "cursor-not-allowed bg-gray-300"
+          }`}
         >
           등록
         </button>
@@ -153,7 +155,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
           postComment.map((comment) => (
             <div
               key={comment.id}
-              className="mb-4 w-full border-b-2 border-b-[var(--gray100)]"
+              className="mb-4 w-full border-b-2 border-b-gray-100"
             >
               <div className="flex items-center justify-between">
                 <div className="mb-4">{comment.content}</div>
@@ -181,10 +183,10 @@ export default function postDetail({ post, postComment }: PostsProps) {
                   />
                 )}
                 <div className="flex flex-col">
-                  <p className="text-[14px] text-[var(--gray600)]">
+                  <p className="text-[14px] text-gray-600">
                     {comment.writer.nickname}
                   </p>
-                  <p className="text-[14px] text-[--gray400]">
+                  <p className="text-[14px] text-gray-400">
                     {displayTime(comment.createdAt)}
                   </p>
                 </div>
@@ -204,7 +206,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
       </div>
       <Link
         href="/boards"
-        className="m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] bg-[--main] px-4 py-3 text-[18px] text-white"
+        className="bg-main m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] px-4 py-3 text-[18px] text-white"
       >
         목록으로 돌아가기
         <Image src={icon_back} alt="돌아가기" width={24} height={24} />
diff --git a/pages/index.tsx b/pages/index.tsx
index 2bec143b9..77ae3dedc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,19 +10,17 @@ import Link from "next/link";
 export default function Home() {
   return (
     <div>
-      <section className="h-auto bg-[--bannerbg] pt-24">
+      <section className="bg-bannerbg h-auto pt-24">
         <div className="container mx-auto flex flex-col items-center justify-center md:flex-row">
           <div className="flex flex-col items-center justify-center text-center md:items-start md:text-left">
-            <h1 className="my-4 text-[32px] font-bold leading-tight md:text-5xl">
+            <p className="my-4 text-3xl font-bold leading-tight md:text-5xl">
               일상의 모든 물건을
-              <span className="inline md:hidden lg:inline">
-                <br />
-              </span>
+              <br />
               거래해보세요
-            </h1>
+            </p>
             <Link
               href="/items"
-              className="mt-4 inline-block rounded-full bg-[--main] px-8 py-3 text-white md:mb-4"
+              className="bg-main mt-4 inline-block rounded-full px-8 py-3 text-white md:mb-4"
             >
               구경하러 가기
             </Link>
@@ -43,15 +41,13 @@ export default function Home() {
             className="h-auto w-full object-contain px-4 md:w-1/2"
           />
           <div className="flex flex-col gap-4 pl-8 text-left">
-            <span className="text-lg text-[--main] md:text-xl">Hot item</span>
-            <h1 className="text-2xl font-bold leading-tight md:text-5xl">
+            <span className="text-main text-xl md:text-2xl">Hot item</span>
+            <p className="text-4xl font-bold leading-tight md:text-3xl lg:text-4xl">
               인기상품을
-              <span className="inline md:hidden lg:inline">
-                <br />
-              </span>
+              <br />
               확인해 보세요
-            </h1>
-            <p className="text-lg leading-snug text-gray-700 md:text-xl">
+            </p>
+            <p className="text-xl leading-snug text-gray-700 md:text-2xl">
               가장 HOT한 중고거래 물품을
               <br />
               판다 마켓에서 확인해 보세요
@@ -66,15 +62,13 @@ export default function Home() {
             className="h-auto w-full object-contain px-4 md:w-1/2"
           />
           <div className="flex flex-col gap-4 text-right md:pl-12 md:text-left">
-            <span className="text-lg text-[--main] md:text-xl">Search</span>
-            <h1 className="text-2xl font-bold leading-tight md:text-5xl">
+            <span className="text-main text-xl md:text-2xl">Search</span>
+            <p className="text-4xl font-bold leading-tight md:text-3xl lg:text-4xl">
               구매를 원하는
-              <span className="inline md:hidden lg:inline">
-                <br />
-              </span>
+              <br />
               상품을 검색하세요
-            </h1>
-            <p className="text-lg leading-snug text-gray-700 md:text-xl">
+            </p>
+            <p className="text-xl leading-snug text-gray-700 md:text-2xl">
               구매하고 싶은 물품은 검색해서
               <br />
               쉽게 찾아보세요
@@ -90,15 +84,13 @@ export default function Home() {
           />
 
           <div className="flex flex-col gap-4 pl-8 text-left md:pr-8">
-            <span className="text-lg text-[--main] md:text-xl">Register</span>
-            <h1 className="text-2xl font-bold leading-tight md:text-5xl">
+            <span className="text-main text-xl md:text-2xl">Register</span>
+            <p className="text-4xl font-bold leading-tight md:text-3xl lg:text-4xl">
               판매를 원하는
-              <span className="inline md:hidden lg:inline">
-                <br />
-              </span>
+              <br />
               상품을 등록하세요
-            </h1>
-            <p className="text-lg leading-snug text-gray-700 md:text-xl">
+            </p>
+            <p className="text-xl leading-snug text-gray-700 md:text-2xl">
               어떤 물건이든 판매하고 싶은 상품을
               <br />
               쉽게 등록하세요
@@ -107,18 +99,18 @@ export default function Home() {
         </div>
       </main>
 
-      <section className="bg-[--bannerbg] py-20">
+      <section className="bg-bannerbg py-20">
         <div className="container mx-auto flex flex-col items-center justify-center md:flex-row">
           <div className="text-center md:text-left">
-            <h1 className="my-4 text-[32px] font-bold leading-tight md:text-5xl">
+            <p className="my-4 text-3xl font-bold leading-tight md:text-5xl">
               믿을 수 있는
               <br />
               판다마켓 중고거래
-            </h1>
+            </p>
           </div>
           <Image
             src={img_home_bottom}
-            className="relative top-[5rem] mt-8 h-auto w-full object-contain md:mt-0 md:w-1/2"
+            className="relative top-20 mt-8 h-auto w-full object-contain md:mt-0 md:w-1/2 lg:w-2/3"
             alt="메인이미지2"
           />
         </div>
diff --git a/pages/signin.tsx b/pages/signin.tsx
index dc75cb839..c7e430eea 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -101,12 +101,12 @@ export default function signin() {
               type="email"
               placeholder="이메일을 입력해주세요"
               onChange={handleEmailChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
-                emailError ? "border-2 border-red-500" : "border-none"
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
+                emailError ? "border-error border-2" : "border-none"
               }`}
             />
             {emailError && (
-              <p className="ml-4 text-xs text-red-500">{emailError}</p>
+              <p className="text-error ml-4 text-xs">{emailError}</p>
             )}
           </div>
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
@@ -121,8 +121,8 @@ export default function signin() {
               type={isVisibilityIcon ? "text" : "password"}
               placeholder="비밀번호를 입력해주세요"
               onChange={handlePasswordChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
-                passwordError ? "border-2 border-red-500" : "border-none"
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
+                passwordError ? "border-error border-2" : "border-none"
               }`}
             />
             <Image
@@ -132,13 +132,13 @@ export default function signin() {
               onClick={togglePasswordVisibility}
             />
             {passwordError && (
-              <p className="ml-4 text-xs text-red-500">{passwordError}</p>
+              <p className="text-error ml-4 text-xs">{passwordError}</p>
             )}
           </div>
           <button
             type="submit"
-            className={`w-full cursor-pointer rounded-[5rem] bg-[--btn4] px-5 py-3 text-white lg:w-[512px] ${
-              !isDisabled && "bg-[--main]"
+            className={`bg-btn-4 w-full cursor-pointer rounded-[5rem] px-5 py-3 text-white lg:w-[512px] ${
+              !isDisabled && "bg-main"
             }`}
             disabled={isDisabled}
           >
@@ -147,8 +147,8 @@ export default function signin() {
         </form>
       </div>
       <div className="w-full px-4 lg:w-[512px]">
-        <div className="my-4 flex flex-row items-center justify-between rounded-xl bg-[--loginbg] p-4">
-          <p className="text-main font-semibold">간편 로그인하기</p>
+        <div className="bg-loginbg my-4 flex flex-row items-center justify-between rounded-xl p-4">
+          <p className="text-black">간편 로그인하기</p>
           <div className="flex flex-row gap-4">
             <a href="https://www.google.com/">
               <Image src={iconGoogle} alt="google" className="h-10 w-10" />
@@ -160,7 +160,7 @@ export default function signin() {
         </div>
         <div className="flex flex-row items-center justify-center gap-2">
           <p>판다마켓이 처음이신가요?</p>
-          <Link href="/signup" className="text-[--main] underline">
+          <Link href="/signup" className="text-main underline">
             회원가입
           </Link>
         </div>
diff --git a/pages/signup.tsx b/pages/signup.tsx
index a3d486b7a..43e21069b 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -11,7 +11,7 @@ import Link from "next/link";
 import Image from "next/image";
 import instance from "@/lib/axios";
 
-export default function signup() {
+export default function Signup() {
   const [email, setEmail] = useState<string>("");
   const [nickname, setNickname] = useState<string>("");
   const [password, setPassword] = useState<string>("");
@@ -145,12 +145,12 @@ export default function signup() {
               type="email"
               placeholder="이메일을 입력해주세요"
               onChange={handleEmailChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
-                emailError ? "border-2 border-red-500" : "border-none"
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
+                emailError ? "border-error border-2" : "border-none"
               }`}
             />
             {emailError && (
-              <p className="errorMessage ml-4 text-xs text-red-500">
+              <p className="errorMessage text-error ml-4 text-xs">
                 {emailError}
               </p>
             )}
@@ -167,12 +167,12 @@ export default function signup() {
               type="text"
               placeholder="닉네임을 입력해주세요"
               onChange={handleNicknameChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
-                nicknameError ? "border-2 border-red-500" : "border-none"
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
+                nicknameError ? "border-error border-2" : "border-none"
               }`}
             />
             {nicknameError && (
-              <p className="errorMessage ml-4 text-xs text-red-500">
+              <p className="errorMessage text-error ml-4 text-xs">
                 {nicknameError}
               </p>
             )}
@@ -189,8 +189,8 @@ export default function signup() {
               placeholder="비밀번호를 입력해주세요"
               id="password"
               onChange={handlePasswordChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
-                passwordError ? "border-2 border-red-500" : "border-none"
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
+                passwordError ? "border-error border-2" : "border-none"
               }`}
             />
             <Image
@@ -200,7 +200,7 @@ export default function signup() {
               onClick={togglePasswordVisibility}
             />
             {passwordError && (
-              <p className="errorMessage ml-4 text-xs text-red-500">
+              <p className="errorMessage text-error ml-4 text-xs">
                 {passwordError}
               </p>
             )}
@@ -217,9 +217,9 @@ export default function signup() {
               placeholder="비밀번호를 다시 한 번 입력해주세요"
               id="confirm_password"
               onChange={handlepasswordConfirmationChange}
-              className={`w-full rounded-xl bg-[--coolgray100] p-4 text-base text-gray-400 focus:outline-[--main] lg:w-[512px] ${
+              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
                 passwordConfirmationError
-                  ? "border-2 border-red-500"
+                  ? "border-error border-2"
                   : "border-none"
               }`}
             />
@@ -230,15 +230,15 @@ export default function signup() {
               onClick={togglepasswordConfirmationVisibility}
             />
             {passwordConfirmationError && (
-              <p className="errorMessage ml-4 text-xs text-red-500">
+              <p className="errorMessage text-error ml-4 text-xs">
                 {passwordConfirmationError}
               </p>
             )}
           </div>
           <button
             type="submit"
-            className={`w-full cursor-pointer rounded-[5rem] bg-[--btn4] px-5 py-3 text-white lg:w-[512px] ${
-              !isDisabled && "bg-[--main]"
+            className={`bg-btn-4 w-full cursor-pointer rounded-[5rem] px-5 py-3 text-white lg:w-[512px] ${
+              !isDisabled && "bg-main"
             }`}
             disabled={isDisabled}
           >
@@ -247,8 +247,8 @@ export default function signup() {
         </form>
       </div>
       <div className="w-full px-4 lg:w-[512px]">
-        <div className="my-4 flex flex-row items-center justify-between rounded-xl bg-[--loginbg] p-4">
-          <p className="text-main font-semibold">간편 로그인하기</p>
+        <div className="bg-loginbg my-4 flex flex-row items-center justify-between rounded-xl p-4">
+          <p className="text-black">간편 로그인하기</p>
           <div className="flex flex-row gap-4">
             <Link href="https://www.google.com/">
               <Image src={iconGoogle} alt="google" className="h-10 w-10" />
@@ -260,7 +260,7 @@ export default function signup() {
         </div>
         <div className="flex flex-row items-center justify-center gap-2">
           <p>이미 회원이신가요?</p>
-          <Link href="/signin" className="text-[--main] underline">
+          <Link href="/signin" className="text-main underline">
             로그인
           </Link>
         </div>
diff --git a/styles/globals.css b/styles/globals.css
index a5c88942c..07782d87c 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,35 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* 공통 CSS */
-/* 색상 css 변수 */
-:root {
-  --main: #3692ff;
-  --error: #f74747;
-  --gray50: #f7f7f8;
-  --gray100: #e8ebed;
-  --coolgray50: #f9fafb;
-  --coolgray100: #f3f4f6;
-  --coolgray800: #1f2937;
-  --gray200: #e5e7eb;
-  --gray400: #9ea4a8;
-  --gray500: #72787f;
-  --gray600: #454c53;
-  --gray700: #374151;
-  --gray800: #26282b;
-  --gray900: #1b1d1f;
-  --btn1: #3692ff;
-  --btn2: #1967d6;
-  --btn3: #1251aa;
-  --btn4: #9ca3af;
-  --bannerbg: #cfe5ff;
-  --loginbg: #e6f2ff;
-  --footer: #111322;
-  --footercodeit: #676767;
-  --borderbottom: #e5e7eb;
-  --fontcolor: #6b7280;
-}
-
 @font-face {
   font-family: "Pretendard-Regular";
   src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
diff --git a/tailwind.config.js b/tailwind.config.js
index 541a0b05d..10c244212 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,16 +1,45 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './components/**/*.{js,ts,jsx,tsx}',
-    './pages/**/*.{js,ts,jsx,tsx}',
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./pages/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {
-      flexGrow: {
-        3: 3,
+      colors: {
+        main: "#3692ff",
+        error: "#f74747",
+        gray: {
+          50: "#f7f7f8",
+          100: "#e8ebed",
+          200: "#e5e7eb",
+          400: "#9ea4a8",
+          500: "#72787f",
+          600: "#454c53",
+          700: "#374151",
+          800: "#26282b",
+          900: "#1b1d1f",
+        },
+        coolgray: {
+          50: "#f9fafb",
+          100: "#f3f4f6",
+          800: "#1f2937",
+        },
+        btn: {
+          1: "#3692ff",
+          2: "#1967d6",
+          3: "#1251aa",
+          4: "#9ca3af",
+        },
+        bannerbg: "#cfe5ff",
+        loginbg: "#e6f2ff",
+        footer: "#111322",
+        footercodeit: "#676767",
+        borderbottom: "#e5e7eb",
+        fontcolor: "#6b7280",
       },
     },
   },
+  variants: {},
   plugins: [],
-}
-
+};

From 6198fb2114925d1992c1aa3f99aec6e6f2993f84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 17:39:01 +0900
Subject: [PATCH 06/23] =?UTF-8?q?=F0=9F=93=9D=20docs:=20=EB=AF=B8=EC=85=98?=
 =?UTF-8?q?11=20README=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index 059ba24ca..2f7f07374 100644
--- a/README.md
+++ b/README.md
@@ -2,22 +2,22 @@
 
 - Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
 - 피그마 디자인에 맞게 페이지를 만들어 주세요.
-- 기존의 React, Typescript로 구현한 프로젝트와 별도로 진행합니다.
-- Next.js를 사용합니다
+- 기존의 스프린트 미션 8에 이어서 React, Typescript를 사용합니다.
 
 체크리스트 [기본] <br>
 
-상품 등록 페이지
+회원가입
 
-- 상품 등록 페이지 주소는 “/addboard” 입니다.
-- 게시판 이미지는 최대 한개 업로드가 가능합니다.
-- 각 input의 placeholder 값을 정확히 입력해주세요.
-- 이미지를 제외하고 input 에 모든 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
-- 회원가입, 로그인 api를 사용하여 받은accessToken을 사용하여 게시물 등록을 합니다.
-- ‘등록’ 버튼을 누르면 게시물 상세 페이지로 이동합니다.
+- 유효한 정보를 입력하고 스웨거 명세된 “/auth/signUp”으로 POST 요청해서 성공 응답을 받으면 회원가입이 완료됩니다.
+- 회원가입이 완료되면 “/login”로 이동합니다.
+- 회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
 
-상품 상세 페이지
+로그인
 
-- 상품 상세 페이지 주소는 “/addboard/{id}” 입니다.
-- 댓글 input 값을 입력하면 ‘등록' 버튼이 활성화 됩니다.
-- 활성화된 ‘등록' 버튼을 누르면 댓글이 등록됩니다
+- 회원가입을 성공한 정보를 입력하고 스웨거 명세된 “/auth/signIn”으로 POST 요청을 하면 로그인이 완료됩니다.
+- 로그인이 완료되면 로컬 스토리지에 accessToken을 저장하고 “/” 로 이동합니다.
+- 로그인/회원가입 페이지에 접근시 로컬 스토리지에 accessToken이 있는 경우 ‘/’ 페이지로 이동합니다.
+
+메인
+
+- 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.

From 399dc647a86cbf2b3503a13afd62c2f956bff4aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 17:43:06 +0900
Subject: [PATCH 07/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20useMem?=
 =?UTF-8?q?o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Pagination.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/components/Pagination.tsx b/components/Pagination.tsx
index 31a73f403..257cee503 100644
--- a/components/Pagination.tsx
+++ b/components/Pagination.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 
 type PaginationProps = {
   currentPage: number;
@@ -19,11 +19,10 @@ export default function Pagination({
     onPageChange(currentPage + 1);
   };
 
-  const pages = [];
-
-  for (let i = 1; i <= totalPages; i++) {
-    pages.push(i);
-  }
+  const pages = useMemo(
+    () => Array.from({ length: totalPages }, (_, i) => i + 1),
+    [totalPages],
+  );
 
   return (
     <div className="mt-8 flex items-center justify-center gap-4">

From 76c942f4e8debf99b5a4699ec9d5b449c8f34dd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 18:28:42 +0900
Subject: [PATCH 08/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20post=20a?=
 =?UTF-8?q?pi=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts            | 57 +++++++++++++++++++++++++++++++++++++++++++
 pages/addBoards.tsx   | 26 ++++++++------------
 pages/boards/[id].tsx | 20 ++++++---------
 3 files changed, 75 insertions(+), 28 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index 5339c7044..880aae0ae 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -1,5 +1,6 @@
 import instance from "@/lib/axios";
 
+// GET
 // 페이지네이션을 위한 전체 게시글 수
 export async function getTotalPosts() {
   try {
@@ -73,3 +74,59 @@ export async function getPostsComments(articleId: string) {
     throw error;
   }
 }
+
+// POST
+export async function postImages(formData: FormData, token: string) {
+  try {
+    const response = await instance.post("/images/upload", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return response.data.url;
+  } catch (error) {
+    console.error("postImages 함수에서 오류 발생:", error);
+  }
+}
+
+type PostData = {
+  title: string;
+  content: string;
+  image?: string;
+};
+
+export async function postArticles(postData: PostData, token: string) {
+  try {
+    const response = await instance.post("/articles", postData, {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error("postArticles 함수에서 오류 발생:", error);
+  }
+}
+
+export async function postArticleComments(
+  articleId: string,
+  content: string,
+  token: string,
+) {
+  try {
+    await instance.post(
+      `/articles/${articleId}/comments`,
+      { content },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    window.location.reload();
+  } catch (error) {
+    console.error("postArticleComments 함수에서 오류 발생:", error);
+  }
+}
diff --git a/pages/addBoards.tsx b/pages/addBoards.tsx
index a983d5f65..eb48ea44f 100644
--- a/pages/addBoards.tsx
+++ b/pages/addBoards.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import FileInput from "../components/FileInput";
 import { useRouter } from "next/router";
 import instance from "@/lib/axios";
+import { postArticles, postImages } from "@/api/api";
 
 const INITIAL_VALUES = {
   title: "",
@@ -53,14 +54,10 @@ function AddBoards({
         const formData = new FormData();
         formData.append("image", values.image);
 
-        const imageResponse = await instance.post("/images/upload", formData, {
-          headers: {
-            "Content-Type": "multipart/form-data",
-            Authorization: `Bearer ${token}`,
-          },
-        });
-
-        imageUrl = imageResponse.data.url;
+        if (token !== null) {
+          const imageResponse = await postImages(formData, token);
+          imageUrl = imageResponse;
+        }
       }
 
       const postData: PostData = {
@@ -72,12 +69,9 @@ function AddBoards({
         postData.image = imageUrl;
       }
 
-      await instance.post("/articles", postData, {
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      if (token !== null) {
+        await postArticles(postData, token);
+      }
 
       window.location.reload();
     } catch (error) {
@@ -113,7 +107,7 @@ function AddBoards({
           value={values.title}
           placeholder="제목을 입력해주세요"
           onChange={handleInputChange}
-          className="focus:outline-main my-4 mt-2 w-full rounded-md border-none bg-gray-50 px-3 py-2 text-sm"
+          className="my-4 mt-2 w-full rounded-md border-none bg-gray-50 px-3 py-2 text-sm focus:outline-main"
         />
         <h4 className="font-semibold">*내용</h4>
         <textarea
@@ -121,7 +115,7 @@ function AddBoards({
           value={values.content}
           placeholder="내용을 입력해주세요"
           onChange={handleInputChange}
-          className="focus:outline-main my-4 mt-2 w-full resize-none rounded-md border-none bg-gray-50 px-3 py-2 text-sm"
+          className="my-4 mt-2 w-full resize-none rounded-md border-none bg-gray-50 px-3 py-2 text-sm focus:outline-main"
           rows={5}
         />
         <h4 className="font-semibold">이미지</h4>
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index 1d8a70ac1..d0e3bdfaf 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -1,5 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import { getPostsComments, getPostsDetail } from "@/api/api";
+import {
+  getPostsComments,
+  getPostsDetail,
+  postArticleComments,
+} from "@/api/api";
 import React, { useState } from "react";
 import icon_optionbar from "@/public/assets/icon_optionbar.png";
 import Image from "next/image";
@@ -81,15 +85,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
     }
 
     try {
-      await instance.post(
-        `/articles/${post.id}/comments`,
-        { content },
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        },
-      );
+      await postArticleComments(post.id.toString(), content, token);
       setContent("");
       window.location.reload();
     } catch (error) {
@@ -136,7 +132,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
           onChange={handleInputChange}
           name="content"
           placeholder="댓글을 입력해주세요"
-          className="bg-coolgray-100 focus:outline-main w-full resize-none rounded-md border-none px-3 py-2 text-sm"
+          className="w-full resize-none rounded-md border-none bg-coolgray-100 px-3 py-2 text-sm focus:outline-main"
           rows={5}
         />
         <button
@@ -206,7 +202,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
       </div>
       <Link
         href="/boards"
-        className="bg-main m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] px-4 py-3 text-[18px] text-white"
+        className="m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] bg-main px-4 py-3 text-[18px] text-white"
       >
         목록으로 돌아가기
         <Image src={icon_back} alt="돌아가기" width={24} height={24} />

From 37ac08b8cb8181084b0310efd6f101f454922b92 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 18:42:16 +0900
Subject: [PATCH 09/23] =?UTF-8?q?=F0=9F=93=A6=20chore:=20react-hook-form?=
 =?UTF-8?q?=20=EC=84=A4=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 16 ++++++++++++++++
 package.json      |  1 +
 2 files changed, 17 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 451186e6b..44b4cd553 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "next": "13.5.6",
         "react": "^18",
         "react-dom": "^18",
+        "react-hook-form": "^7.51.5",
         "tailwindcss": "^3.4.3"
       },
       "devDependencies": {
@@ -3684,6 +3685,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.51.5",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz",
+      "integrity": "sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 788705e4f..2ea753d26 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {

From bcb1f56ff75107d79aee0a62054a42cfb726cbe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 20:27:01 +0900
Subject: [PATCH 10/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20react-ho?=
 =?UTF-8?q?ok-form=20=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json |  11 +++
 package.json      |   1 +
 pages/signin.tsx  | 121 +++++++++++++--------------
 pages/signup.tsx  | 205 ++++++++++++++++++++--------------------------
 4 files changed, 157 insertions(+), 181 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44b4cd553..56ccd7b8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "fe-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/error-message": "^2.0.1",
         "autoprefixer": "^10.4.19",
         "axios": "^1.7.2",
         "next": "13.5.6",
@@ -115,6 +116,16 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/error-message": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/error-message/-/error-message-2.0.1.tgz",
+      "integrity": "sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0",
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.13",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
diff --git a/package.json b/package.json
index 2ea753d26..21c05fd8b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/error-message": "^2.0.1",
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
     "next": "13.5.6",
diff --git a/pages/signin.tsx b/pages/signin.tsx
index c7e430eea..284bd310f 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
 import logo from "@/public/assets/logo.png";
 import iconOn from "@/public/assets/icon_visibility_on.png";
 import iconOff from "@/public/assets/icon_visibility_off.png";
@@ -7,74 +8,45 @@ import iconGoogle from "@/public/assets/icon_google.png";
 import iconKakao from "@/public/assets/icon_kakao.png";
 import { EIGHT_NUMBERS_REGEX, EMAIL_REGEX } from "@/utils/regex";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 import Link from "next/link";
 import Image from "next/image";
 import instance from "@/lib/axios";
+import { ErrorMessage } from "@hookform/error-message";
 
-export default function signin() {
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
+type FormData = {
+  email: string;
+  password: string;
+};
 
-  const [emailError, setEmailError] = useState<string>("");
-  const [passwordError, setPasswordError] = useState<string>("");
+export default function Signin() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<FormData>({
+    mode: "onChange",
+  });
 
   const [isVisibilityIcon, setIsVisibilityIcon] = useState<boolean>(false);
-  const [isDisabled, setIsDisabled] = useState<boolean>(true);
-
-  const isRegexValid =
-    EMAIL_REGEX.test(email.trim()) && EIGHT_NUMBERS_REGEX.test(password.trim());
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(e.target.value);
-    setEmailError("");
-  };
-
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(e.target.value);
-    setPasswordError("");
-  };
-
   const router = useRouter();
 
-  const handleformSubmit = async () => {
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
     try {
       const response = await instance.post("/auth/signIn", {
-        email,
-        password,
+        email: data.email,
+        password: data.password,
       });
 
       const accessToken = response.data.accessToken;
       localStorage.setItem("accessToken", accessToken);
+
+      router.push("/");
       window.location.reload();
     } catch (error) {
       console.log("데이터 전송 실패", error);
     }
   };
 
-  const handleLogin = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (isRegexValid) {
-      handleformSubmit();
-      router.push("/");
-    } else {
-      if (email === "") {
-        setEmailError("이메일을 입력해주세요.");
-      } else if (!EMAIL_REGEX.test(email.trim())) {
-        setEmailError("잘못된 이메일 형식입니다.");
-      }
-      if (password === "") {
-        setPasswordError("비밀번호를 입력해주세요.");
-      } else if (!EIGHT_NUMBERS_REGEX.test(password.trim())) {
-        setPasswordError("비밀번호를 8자 이상 입력해주세요.");
-      }
-    }
-  };
-
-  useEffect(() => {
-    setIsDisabled(!isRegexValid);
-  }, [email, password, isRegexValid]);
-
   const togglePasswordVisibility = () => {
     setIsVisibilityIcon(!isVisibilityIcon);
   };
@@ -88,8 +60,7 @@ export default function signin() {
       </Link>
       <div className="w-full px-4 md:px-8">
         <form
-          onSubmit={handleLogin}
-          noValidate
+          onSubmit={handleSubmit(onSubmit)}
           className="flex w-full flex-col items-center justify-center lg:px-40"
         >
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
@@ -100,14 +71,24 @@ export default function signin() {
               id="email"
               type="email"
               placeholder="이메일을 입력해주세요"
-              onChange={handleEmailChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                emailError ? "border-error border-2" : "border-none"
+              {...register("email", {
+                required: "이메일을 입력해주세요.",
+                pattern: {
+                  value: EMAIL_REGEX,
+                  message: "잘못된 이메일 형식입니다.",
+                },
+              })}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.email ? "border-2 border-error" : "border-none"
               }`}
             />
-            {emailError && (
-              <p className="text-error ml-4 text-xs">{emailError}</p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="email"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
             <label
@@ -120,9 +101,15 @@ export default function signin() {
               id="password"
               type={isVisibilityIcon ? "text" : "password"}
               placeholder="비밀번호를 입력해주세요"
-              onChange={handlePasswordChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                passwordError ? "border-error border-2" : "border-none"
+              {...register("password", {
+                required: "비밀번호를 입력해주세요.",
+                pattern: {
+                  value: EIGHT_NUMBERS_REGEX,
+                  message: "비밀번호를 8자 이상 입력해주세요.",
+                },
+              })}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.password ? "border-2 border-error" : "border-none"
               }`}
             />
             <Image
@@ -131,23 +118,27 @@ export default function signin() {
               className="absolute right-[1rem] top-[3.2rem] h-6 w-6 cursor-pointer"
               onClick={togglePasswordVisibility}
             />
-            {passwordError && (
-              <p className="text-error ml-4 text-xs">{passwordError}</p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="password"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <button
             type="submit"
-            className={`bg-btn-4 w-full cursor-pointer rounded-[5rem] px-5 py-3 text-white lg:w-[512px] ${
-              !isDisabled && "bg-main"
+            className={`w-full cursor-pointer rounded-[5rem] bg-btn-4 px-5 py-3 text-white lg:w-[512px] ${
+              isValid && "bg-main"
             }`}
-            disabled={isDisabled}
+            disabled={!isValid}
           >
             로그인
           </button>
         </form>
       </div>
       <div className="w-full px-4 lg:w-[512px]">
-        <div className="bg-loginbg my-4 flex flex-row items-center justify-between rounded-xl p-4">
+        <div className="my-4 flex flex-row items-center justify-between rounded-xl bg-loginbg p-4">
           <p className="text-black">간편 로그인하기</p>
           <div className="flex flex-row gap-4">
             <a href="https://www.google.com/">
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 43e21069b..2a7e728c0 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -10,64 +10,44 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 import Image from "next/image";
 import instance from "@/lib/axios";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { ErrorMessage } from "@hookform/error-message";
 
-export default function Signup() {
-  const [email, setEmail] = useState<string>("");
-  const [nickname, setNickname] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [passwordConfirmation, setpasswordConfirmation] = useState<string>("");
+type FormData = {
+  email: string;
+  nickname: string;
+  password: string;
+  passwordConfirmation: string;
+};
 
-  const [emailError, setEmailError] = useState<string>("");
-  const [nicknameError, setNicknameError] = useState<string>("");
-  const [passwordError, setPasswordError] = useState<string>("");
-  const [passwordConfirmationError, setpasswordConfirmationError] =
-    useState<string>("");
+export default function Signup() {
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors, isValid },
+  } = useForm<FormData>({
+    mode: "onChange",
+  });
 
   const [isVisibilityIcon, setIsVisibilityIcon] = useState<boolean>(false);
   const [isVisibilityIconConfirm, setIsVisibilityIconConfirm] =
     useState<boolean>(false);
 
-  const [isDisabled, setIsDisabled] = useState<boolean>(true);
-
-  const isRegexValid =
-    EMAIL_REGEX.test(email.trim()) &&
-    EIGHT_NUMBERS_REGEX.test(password.trim()) &&
-    nickname.trim() !== "" &&
-    password === passwordConfirmation;
-
-  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(e.target.value);
-    setEmailError("");
-  };
-
-  const handleNicknameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNickname(e.target.value);
-    setNicknameError("");
-  };
-
-  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPassword(e.target.value);
-    setPasswordError("");
-  };
-
-  const handlepasswordConfirmationChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setpasswordConfirmation(e.target.value);
-    setpasswordConfirmationError("");
-  };
+  // 비밀번호 확인 필드에서 비밀번호 필드의 값을 가져오기 위해 watch 함수 사용
+  const password = watch("password", "");
 
   const router = useRouter();
 
-  const handleformSubmit = async () => {
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
     try {
       const response = await instance.post(
         "/auth/signUp",
         {
-          email,
-          nickname,
-          password,
-          passwordConfirmation,
+          email: data.email,
+          nickname: data.email,
+          password: data.password,
+          passwordConfirmation: data.passwordConfirmation,
         },
         {
           headers: {
@@ -77,44 +57,13 @@ export default function Signup() {
       );
       const { accessToken } = response.data;
       localStorage.setItem("accessToken", accessToken);
+      console.log(data);
       router.push("/");
     } catch (error) {
-      console.log({ email, nickname, password, passwordConfirmation });
       console.log("데이터 전송 실패", error);
     }
   };
 
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (isRegexValid) {
-      handleformSubmit();
-    } else {
-      if (email === "") {
-        setEmailError("이메일을 입력해주세요.");
-      } else if (!EMAIL_REGEX.test(email.trim())) {
-        setEmailError("잘못된 이메일 형식입니다.");
-      }
-      if (nickname === "") {
-        setNicknameError("닉네임을 입력해주세요.");
-      }
-      if (password === "") {
-        setPasswordError("비밀번호를 입력해주세요.");
-      } else if (!EIGHT_NUMBERS_REGEX.test(password.trim())) {
-        setPasswordError("비밀번호를 8자 이상 입력해주세요.");
-      }
-      if (passwordConfirmation === "") {
-        setpasswordConfirmationError("비밀번호를 다시 한 번 입력해주세요.");
-      } else if (password !== passwordConfirmation) {
-        setpasswordConfirmationError("비밀번호가 일치하지 않습니다.");
-      }
-    }
-  };
-
-  useEffect(() => {
-    setIsDisabled(!isRegexValid);
-  }, [email, nickname, password, passwordConfirmation, isRegexValid]);
-
   const togglePasswordVisibility = () => {
     setIsVisibilityIcon(!isVisibilityIcon);
   };
@@ -132,7 +81,7 @@ export default function Signup() {
       </Link>
       <div className="w-full px-4 md:px-8">
         <form
-          onSubmit={handleLogin}
+          onSubmit={handleSubmit(onSubmit)}
           noValidate
           className="flex w-full flex-col items-center justify-center lg:px-40"
         >
@@ -144,16 +93,24 @@ export default function Signup() {
               id="email"
               type="email"
               placeholder="이메일을 입력해주세요"
-              onChange={handleEmailChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                emailError ? "border-error border-2" : "border-none"
+              {...register("email", {
+                required: "이메일을 입력해주세요.",
+                pattern: {
+                  value: EMAIL_REGEX,
+                  message: "잘못된 이메일 형식입니다.",
+                },
+              })}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.email ? "border-2 border-error" : "border-none"
               }`}
             />
-            {emailError && (
-              <p className="errorMessage text-error ml-4 text-xs">
-                {emailError}
-              </p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="email"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
             <label
@@ -166,16 +123,18 @@ export default function Signup() {
               id="nickname"
               type="text"
               placeholder="닉네임을 입력해주세요"
-              onChange={handleNicknameChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                nicknameError ? "border-error border-2" : "border-none"
+              {...register("nickname")}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.nickname ? "border-2 border-error" : "border-none"
               }`}
             />
-            {nicknameError && (
-              <p className="errorMessage text-error ml-4 text-xs">
-                {nicknameError}
-              </p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="nickname"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
             <label
@@ -188,9 +147,15 @@ export default function Signup() {
               type={isVisibilityIcon ? "text" : "password"}
               placeholder="비밀번호를 입력해주세요"
               id="password"
-              onChange={handlePasswordChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                passwordError ? "border-error border-2" : "border-none"
+              {...register("password", {
+                required: "비밀번호를 입력해주세요.",
+                pattern: {
+                  value: EIGHT_NUMBERS_REGEX,
+                  message: "비밀번호를 8자 이상 입력해주세요.",
+                },
+              })}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.password ? "border-2 border-error" : "border-none"
               }`}
             />
             <Image
@@ -199,15 +164,17 @@ export default function Signup() {
               className="absolute right-[1rem] top-[3.2rem] h-6 w-6 cursor-pointer"
               onClick={togglePasswordVisibility}
             />
-            {passwordError && (
-              <p className="errorMessage text-error ml-4 text-xs">
-                {passwordError}
-              </p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="password"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <div className="relative my-4 flex w-full flex-col justify-center gap-2 lg:w-auto">
             <label
-              htmlFor="confirm_password"
+              htmlFor="passwordConfirmation"
               className="text-lg font-bold text-gray-700"
             >
               비밀번호 확인
@@ -215,11 +182,15 @@ export default function Signup() {
             <input
               type={isVisibilityIconConfirm ? "text" : "password"}
               placeholder="비밀번호를 다시 한 번 입력해주세요"
-              id="confirm_password"
-              onChange={handlepasswordConfirmationChange}
-              className={`bg-coolgray-100 focus:outline-main w-full rounded-xl p-4 text-base text-gray-400 lg:w-[512px] ${
-                passwordConfirmationError
-                  ? "border-error border-2"
+              id="passwordConfirmation"
+              {...register("passwordConfirmation", {
+                required: "비밀번호를 다시 입력해주세요.",
+                validate: (value) =>
+                  value === password || "비밀번호가 일치하지 않습니다.",
+              })}
+              className={`w-full rounded-xl bg-coolgray-100 p-4 text-base text-gray-400 focus:outline-main lg:w-[512px] ${
+                errors.passwordConfirmation
+                  ? "border-2 border-error"
                   : "border-none"
               }`}
             />
@@ -229,25 +200,27 @@ export default function Signup() {
               className="absolute right-[1rem] top-[3.2rem] h-6 w-6 cursor-pointer"
               onClick={togglepasswordConfirmationVisibility}
             />
-            {passwordConfirmationError && (
-              <p className="errorMessage text-error ml-4 text-xs">
-                {passwordConfirmationError}
-              </p>
-            )}
+            <ErrorMessage
+              errors={errors}
+              name="passwordConfirmation"
+              render={({ message }) => (
+                <p className="ml-4 text-xs text-error">{message}</p>
+              )}
+            />
           </div>
           <button
             type="submit"
-            className={`bg-btn-4 w-full cursor-pointer rounded-[5rem] px-5 py-3 text-white lg:w-[512px] ${
-              !isDisabled && "bg-main"
+            className={`w-full cursor-pointer rounded-[5rem] bg-btn-4 px-5 py-3 text-white lg:w-[512px] ${
+              isValid && "bg-main"
             }`}
-            disabled={isDisabled}
+            disabled={!isValid}
           >
             회원가입
           </button>
         </form>
       </div>
       <div className="w-full px-4 lg:w-[512px]">
-        <div className="bg-loginbg my-4 flex flex-row items-center justify-between rounded-xl p-4">
+        <div className="my-4 flex flex-row items-center justify-between rounded-xl bg-loginbg p-4">
           <p className="text-black">간편 로그인하기</p>
           <div className="flex flex-row gap-4">
             <Link href="https://www.google.com/">

From 0964c900a80c91fb8b3c1a1c198f3b856409e0e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 20:29:53 +0900
Subject: [PATCH 11/23] =?UTF-8?q?=E2=9C=A8=20feat:=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/signup.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/signup.tsx b/pages/signup.tsx
index 2a7e728c0..5cdb8ce0f 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -57,8 +57,8 @@ export default function Signup() {
       );
       const { accessToken } = response.data;
       localStorage.setItem("accessToken", accessToken);
-      console.log(data);
-      router.push("/");
+      alert("회원가입이 완료되었습니다!");
+      router.push("/signin");
     } catch (error) {
       console.log("데이터 전송 실패", error);
     }

From 02ebb7af97cb2fcac58e7f0838e7d60255589249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 21:16:49 +0900
Subject: [PATCH 12/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=EC=83=88=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EC=95=88=20=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EB=B0=94=EB=A1=9C=20=EB=B0=98=EC=98=81=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.tsx | 14 ++++++++------
 pages/addBoards.tsx   |  3 ---
 pages/signin.tsx      |  3 +--
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 67afe9c84..c78a50b4b 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -21,8 +21,10 @@ export default function Header() {
 
   useEffect(() => {
     const token = localStorage.getItem("accessToken");
-    setAccessToken(token);
-  }, []);
+    if (token) {
+      setAccessToken(token);
+    }
+  }, [router.pathname]);
 
   const handleProfileClick = () => {
     setIsLogoutBoxVisible(!isLogoutBoxVisible);
@@ -30,8 +32,8 @@ export default function Header() {
 
   const logout = () => {
     localStorage.removeItem("accessToken");
-    router.push("/");
-    window.location.reload();
+    setAccessToken(null);
+    setIsLogoutBoxVisible(false);
   };
 
   return (
@@ -86,7 +88,7 @@ export default function Header() {
       )}
       {isLogoutBoxVisible && (
         <div className="absolute right-5 top-14 z-50 rounded-lg bg-white px-4 py-2 shadow-md lg:right-12 lg:top-16">
-          <button className="hover:text-main text-gray-700" onClick={logout}>
+          <button className="text-gray-700 hover:text-main" onClick={logout}>
             로그아웃
           </button>
         </div>
@@ -95,7 +97,7 @@ export default function Header() {
         <button
           id="btn_small"
           onClick={goToSignin}
-          className="bg-main hover:bg-btn-2 inline-flex cursor-pointer items-center justify-center rounded-md border-none px-6 py-2 text-white"
+          className="inline-flex cursor-pointer items-center justify-center rounded-md border-none bg-main px-6 py-2 text-white hover:bg-btn-2"
         >
           로그인
         </button>
diff --git a/pages/addBoards.tsx b/pages/addBoards.tsx
index eb48ea44f..df8bc75cd 100644
--- a/pages/addBoards.tsx
+++ b/pages/addBoards.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import FileInput from "../components/FileInput";
 import { useRouter } from "next/router";
-import instance from "@/lib/axios";
 import { postArticles, postImages } from "@/api/api";
 
 const INITIAL_VALUES = {
@@ -72,8 +71,6 @@ function AddBoards({
       if (token !== null) {
         await postArticles(postData, token);
       }
-
-      window.location.reload();
     } catch (error) {
       console.log("데이터 전송 실패", error);
     }
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 284bd310f..447d56f7f 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -39,9 +39,8 @@ export default function Signin() {
 
       const accessToken = response.data.accessToken;
       localStorage.setItem("accessToken", accessToken);
-
+      alert("로그인 완료!");
       router.push("/");
-      window.location.reload();
     } catch (error) {
       console.log("데이터 전송 실패", error);
     }

From 429dbd084f29357af81d5205ec39d33285aefdd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Wed, 12 Jun 2024 21:25:22 +0900
Subject: [PATCH 13/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EB=93=B1=EB=A1=9D=EC=8B=9C=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts            |  1 -
 pages/boards/[id].tsx | 47 +++++++++++++++++++++++--------------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index 880aae0ae..2f70f8a16 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -125,7 +125,6 @@ export async function postArticleComments(
         },
       },
     );
-    window.location.reload();
   } catch (error) {
     console.error("postArticleComments 함수에서 오류 발생:", error);
   }
diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index d0e3bdfaf..e6ce10ab7 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -4,17 +4,16 @@ import {
   getPostsDetail,
   postArticleComments,
 } from "@/api/api";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import icon_optionbar from "@/public/assets/icon_optionbar.png";
 import Image from "next/image";
 import icon_profile from "@/public/assets/icon_profile.png";
 import icon_favorite from "@/public/assets/icon_favorite.png";
 import formatDate from "@/utils/formatDate";
-import { displayTime } from "../../utils/displayTime";
+import { displayTime } from "@/utils/displayTime";
 import Link from "next/link";
 import icon_back from "@/public/assets/icon_back.png";
 import img_nocomments from "@/public/assets/img_nocomments.png";
-import instance from "@/lib/axios";
 
 type PostsData = {
   id: number;
@@ -42,59 +41,61 @@ type PostsCommentsData = {
   };
 };
 
-type PostsProps = {
-  post: PostsData;
-  postComment: PostsCommentsData[];
-};
-
 export async function getServerSideProps(context: { params: { id: any } }) {
   const postId = context.params.id;
   try {
     const post = await getPostsDetail(postId);
-    const postComment = await getPostsComments(postId);
     return {
       props: {
         post,
-        postComment,
       },
     };
   } catch (error) {
     console.error("데이터 가져오기 실패", error);
     return {
       notFound: true,
-      props: {
-        postComment: [],
-      },
     };
   }
 }
 
-export default function postDetail({ post, postComment }: PostsProps) {
+export default function PostDetail({ post }: { post: PostsData }) {
   const [content, setContent] = useState("");
+  const [postComments, setPostComments] = useState<PostsCommentsData[]>([]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     setContent(e.target.value);
   };
 
-  const handlesubmitComment = async () => {
+  const handleSubmitComment = async () => {
     const token = localStorage.getItem("accessToken");
 
     if (!token) {
-      console.log("토큰이 없습니다");
+      alert("로그인이 필요합니다.");
       return;
     }
 
     try {
       await postArticleComments(post.id.toString(), content, token);
       setContent("");
-      window.location.reload();
+      fetchPostsComments();
     } catch (error) {
-      console.log(content, token);
+      console.error("댓글 등록 실패", error);
+    }
+  };
 
-      console.log("댓글 등록 실패", error);
+  const fetchPostsComments = async () => {
+    try {
+      const data = await getPostsComments(post.id.toString());
+      setPostComments(data);
+    } catch (error) {
+      console.error("postComments 가져오는데 문제 발생", error);
     }
   };
 
+  useEffect(() => {
+    fetchPostsComments();
+  }, []);
+
   return (
     <div className="m-[8rem_auto_2rem] w-full max-w-[1200px] px-4 md:m-[0] md:p-[8rem_5rem_5rem] lg:m-[0_auto_5rem]">
       <div className="flex items-start justify-between">
@@ -129,6 +130,7 @@ export default function postDetail({ post, postComment }: PostsProps) {
       <div className="mt-14 flex flex-col">
         <h3 className="mb-2 text-[20px] font-bold">댓글 달기</h3>
         <textarea
+          value={content}
           onChange={handleInputChange}
           name="content"
           placeholder="댓글을 입력해주세요"
@@ -136,19 +138,20 @@ export default function postDetail({ post, postComment }: PostsProps) {
           rows={5}
         />
         <button
-          onClick={handlesubmitComment}
+          onClick={handleSubmitComment}
           className={`float-right ml-auto mt-4 block h-[42px] items-center justify-center rounded-[0.5rem] border-none px-6 py-[0.5rem] text-white ${
             content
               ? "bg-main hover:bg-btn-2"
               : "cursor-not-allowed bg-gray-300"
           }`}
+          disabled={!content}
         >
           등록
         </button>
       </div>
       <div className="mt-4 flex w-full flex-col">
-        {postComment.length > 0 ? (
-          postComment.map((comment) => (
+        {postComments.length > 0 ? (
+          postComments.map((comment) => (
             <div
               key={comment.id}
               className="mb-4 w-full border-b-2 border-b-gray-100"

From a18ba750c606b60ca134f222a1187184c2e50b28 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 10:39:25 +0900
Subject: [PATCH 14/23] =?UTF-8?q?=F0=9F=93=9D=20docs:=20=EC=8B=AC=ED=99=94?=
 =?UTF-8?q?=20=EC=9A=94=EA=B5=AC=EC=82=AC=ED=95=AD=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 2f7f07374..59f73c134 100644
--- a/README.md
+++ b/README.md
@@ -21,3 +21,7 @@
 메인
 
 - 로컬 스토리지에 accessToken이 있는 경우 상단바 ‘로그인’ 버튼이 판다 이미지로 바뀝니다.
+
+심화 요구사항
+
+- 로그인, 회원가입 기능에 react-hook-form을 활용해봅니다.

From d1022fe68c8845ebb05e2e968de7dc210c213a87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 11:17:09 +0900
Subject: [PATCH 15/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20axios=20?=
 =?UTF-8?q?interceptor=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/axios.ts | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/lib/axios.ts b/lib/axios.ts
index 702e04c38..bd59fa8d4 100644
--- a/lib/axios.ts
+++ b/lib/axios.ts
@@ -4,4 +4,50 @@ const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
+instance.interceptors.request.use(
+  (config) => {
+    const accessToken = localStorage.getItem("accessToken")?.replace(/"/gi, "");
+
+    if (!accessToken) {
+      return config;
+    }
+
+    config.headers["Content-Type"] = "application/json";
+    config.headers["Authorization"] = `Bearer ${accessToken}`;
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+instance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+
+    try {
+      const refreshToken = localStorage.getItem("refreshToken");
+      const response = await instance.post("/auth/refresh-token", {
+        refreshToken,
+      });
+      const { accessToken } = response.data;
+      localStorage.setItem("accessToken", accessToken);
+
+      instance.defaults.headers.common["Authorization"] =
+        `Bearer ${accessToken}`;
+      originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+
+      return instance(originalRequest);
+    } catch (error) {
+      console.error("토큰 갱신 실패:", error);
+    }
+    alert(`ERROR: ${error.response.data.message}`);
+    return Promise.reject(error);
+  },
+);
+
 export default instance;

From 8ad9474755a6ce8c50ef9bdf07399b6787cd721c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 12:06:45 +0900
Subject: [PATCH 16/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=EC=8B=9C=20refresh=20=ED=86=A0?=
 =?UTF-8?q?=ED=81=B0=20=EB=B0=9B=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/signin.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/signin.tsx b/pages/signin.tsx
index 447d56f7f..5d42cd9d6 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -37,8 +37,10 @@ export default function Signin() {
         password: data.password,
       });
 
-      const accessToken = response.data.accessToken;
+      const { accessToken, refreshToken } = response.data;
       localStorage.setItem("accessToken", accessToken);
+      localStorage.setItem("refreshToken", refreshToken);
+
       alert("로그인 완료!");
       router.push("/");
     } catch (error) {

From ffe2c5074f900169ecc4c4d16f1271c53babccea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 12:07:33 +0900
Subject: [PATCH 17/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20get=20in?=
 =?UTF-8?q?stance=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/api.ts   | 27 ++++++++++++++++++---------
 lib/axios.ts |  4 +---
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/api/api.ts b/api/api.ts
index 2f70f8a16..1752075ad 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -1,4 +1,5 @@
 import instance from "@/lib/axios";
+import axiosGetInstance from "@/lib/axiosGetInstance";
 
 // GET
 // 페이지네이션을 위한 전체 게시글 수
@@ -9,7 +10,7 @@ export async function getTotalPosts() {
       orderBy: "recent",
     });
 
-    const { data } = await instance.get("/articles?", { params });
+    const { data } = await axiosGetInstance.get("/articles?", { params });
     return data.list.length;
   } catch (error) {
     console.error("getTotalPosts 함수에서 오류 발생:", error);
@@ -30,7 +31,9 @@ export async function getPosts({
       page: page.toString(),
       pageSize: pageSize.toString(),
     });
-    const { data } = await instance.get(`/articles?${params.toString()}`);
+    const { data } = await axiosGetInstance.get(
+      `/articles?${params.toString()}`,
+    );
     return data.list;
   } catch (error) {
     console.error("getPosts 함수에서 오류 발생:", error);
@@ -42,9 +45,12 @@ export async function getBestPosts({ pageSize = 3 }) {
   try {
     const params = new URLSearchParams({ orderBy: "like" });
 
-    const { data } = await instance.get(`/articles?&pageSize=${pageSize}`, {
-      params,
-    });
+    const { data } = await axiosGetInstance.get(
+      `/articles?&pageSize=${pageSize}`,
+      {
+        params,
+      },
+    );
     return data.list;
   } catch (error) {
     console.error("getBestPosts 함수에서 오류 발생:", error);
@@ -54,7 +60,7 @@ export async function getBestPosts({ pageSize = 3 }) {
 
 export async function getPostsDetail(articleId: string) {
   try {
-    const { data } = await instance.get(`/articles/${articleId}`);
+    const { data } = await axiosGetInstance.get(`/articles/${articleId}`);
     return data;
   } catch (error) {
     console.error("getPostsDetail 함수에서 오류 발생:", error);
@@ -65,9 +71,12 @@ export async function getPostsDetail(articleId: string) {
 export async function getPostsComments(articleId: string) {
   try {
     const params = new URLSearchParams({ limit: "100" });
-    const { data } = await instance.get(`/articles/${articleId}/comments?`, {
-      params,
-    });
+    const { data } = await axiosGetInstance.get(
+      `/articles/${articleId}/comments?`,
+      {
+        params,
+      },
+    );
     return data.list;
   } catch (error) {
     console.error("getPostsComments 함수에서 오류 발생:", error);
diff --git a/lib/axios.ts b/lib/axios.ts
index bd59fa8d4..c19aa2376 100644
--- a/lib/axios.ts
+++ b/lib/axios.ts
@@ -31,9 +31,7 @@ instance.interceptors.response.use(
 
     try {
       const refreshToken = localStorage.getItem("refreshToken");
-      const response = await instance.post("/auth/refresh-token", {
-        refreshToken,
-      });
+      const response = await instance.post("/auth/refresh-token", refreshToken);
       const { accessToken } = response.data;
       localStorage.setItem("accessToken", accessToken);
 

From a695419a4573f7f17f066b88ebec5230204d05b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 12:08:34 +0900
Subject: [PATCH 18/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20get=20in?=
 =?UTF-8?q?stance=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/axiosGetInstance.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 lib/axiosGetInstance.ts

diff --git a/lib/axiosGetInstance.ts b/lib/axiosGetInstance.ts
new file mode 100644
index 000000000..16e1efa56
--- /dev/null
+++ b/lib/axiosGetInstance.ts
@@ -0,0 +1,7 @@
+import axios from "axios";
+
+const axiosGetInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_BASE_URL,
+});
+
+export default axiosGetInstance;

From 90f8377277eb760204fc2241d73e4d8663addfc9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 12:09:09 +0900
Subject: [PATCH 19/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=EC=8B=9C=20refreshToken=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Header.tsx b/components/Header.tsx
index c78a50b4b..abb586d7c 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -32,6 +32,7 @@ export default function Header() {
 
   const logout = () => {
     localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshToken");
     setAccessToken(null);
     setIsLogoutBoxVisible(false);
   };

From c8a1e4b74e0a6fff294b71b13b07b0a5b80d2073 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 13:24:26 +0900
Subject: [PATCH 20/23] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=EC=8B=9C=20=EB=A9=94=EC=9D=B8=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Header.tsx b/components/Header.tsx
index abb586d7c..78137a807 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -35,6 +35,7 @@ export default function Header() {
     localStorage.removeItem("refreshToken");
     setAccessToken(null);
     setIsLogoutBoxVisible(false);
+    router.push("/");
   };
 
   return (

From aa189e913df6a26279a7e0226c30e2df62bae38d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 18:46:14 +0900
Subject: [PATCH 21/23] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20axios=20?=
 =?UTF-8?q?=EC=9D=B8=ED=84=B0=EC=85=89=ED=84=B0=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/axios.ts | 57 +++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/lib/axios.ts b/lib/axios.ts
index c19aa2376..1ba52c713 100644
--- a/lib/axios.ts
+++ b/lib/axios.ts
@@ -4,44 +4,69 @@ const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
 });
 
+// 요청 인터셉터 설정
 instance.interceptors.request.use(
   (config) => {
+    // 로컬 스토리지에서 accessToken 가져오기
     const accessToken = localStorage.getItem("accessToken")?.replace(/"/gi, "");
 
-    if (!accessToken) {
-      return config;
+    // accessToken이 존재하는 경우, 헤더에 추가
+    if (accessToken) {
+      config.headers["Content-Type"] = "application/json";
+      config.headers["Authorization"] = `Bearer ${accessToken}`;
     }
 
-    config.headers["Content-Type"] = "application/json";
-    config.headers["Authorization"] = `Bearer ${accessToken}`;
-
     return config;
   },
   (error) => {
+    // 요청 에러 처리
     return Promise.reject(error);
   },
 );
 
+// 응답 인터셉터 설정
 instance.interceptors.response.use(
   (response) => {
+    // 응답이 성공적인 경우 그대로 반환
     return response;
   },
   async (error) => {
     const originalRequest = error.config;
 
-    try {
-      const refreshToken = localStorage.getItem("refreshToken");
-      const response = await instance.post("/auth/refresh-token", refreshToken);
-      const { accessToken } = response.data;
-      localStorage.setItem("accessToken", accessToken);
+    // 에러가 인증 실패(401)이고, 재시도하지 않은 경우
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true; // 무한 루프 방지를 위해 플래그 설정
+
+      try {
+        // 로컬 스토리지에서 refreshToken 가져오기
+        const refreshToken = localStorage
+          .getItem("refreshToken")
+          ?.replace(/"/gi, "");
+
+        // refreshToken이 없는 경우 에러 발생
+        if (!refreshToken) {
+          throw new Error("리프레시 토큰이 없습니다.");
+        }
+
+        // 새로운 accessToken 요청
+        const response = await instance.post("/auth/refresh-token", {
+          token: refreshToken,
+        });
+        const { accessToken } = response.data;
+
+        // 새로운 accessToken을 로컬 스토리지에 저장
+        localStorage.setItem("accessToken", accessToken);
 
-      instance.defaults.headers.common["Authorization"] =
-        `Bearer ${accessToken}`;
-      originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+        // 새로운 accessToken으로 헤더 업데이트
+        instance.defaults.headers.common["Authorization"] =
+          `Bearer ${accessToken}`;
+        originalRequest.headers["Authorization"] = `Bearer ${accessToken}`;
 
-      return instance(originalRequest);
-    } catch (error) {
-      console.error("토큰 갱신 실패:", error);
+        // 새로운 토큰으로 원래 요청 재시도
+        return instance(originalRequest);
+      } catch (error) {
+        console.error("토큰 갱신 실패:", error);
+      }
     }
     alert(`ERROR: ${error.response.data.message}`);
     return Promise.reject(error);

From e42f9d7057c3d512687de66ba33894ef68ac339d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Thu, 13 Jun 2024 18:51:09 +0900
Subject: [PATCH 22/23] =?UTF-8?q?=F0=9F=90=9B=20fix:=20axios=20token=20?=
 =?UTF-8?q?=EA=B0=B1=EC=8B=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/axios.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/axios.ts b/lib/axios.ts
index 1ba52c713..dd7deb63c 100644
--- a/lib/axios.ts
+++ b/lib/axios.ts
@@ -50,7 +50,7 @@ instance.interceptors.response.use(
 
         // 새로운 accessToken 요청
         const response = await instance.post("/auth/refresh-token", {
-          token: refreshToken,
+          refreshToken: refreshToken,
         });
         const { accessToken } = response.data;
 

From 690b18cd6d3ec27e08d6a60e85cb6e86333dd776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EB=AF=B8?= <kimbomi2172@naver.com>
Date: Fri, 14 Jun 2024 12:04:10 +0900
Subject: [PATCH 23/23] =?UTF-8?q?=F0=9F=92=84=20ui:=20=EB=AA=A9=EB=A1=9D?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=98=B8=EB=B2=84=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/boards/[id].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/boards/[id].tsx b/pages/boards/[id].tsx
index e6ce10ab7..220fde23b 100644
--- a/pages/boards/[id].tsx
+++ b/pages/boards/[id].tsx
@@ -205,7 +205,7 @@ export default function PostDetail({ post }: { post: PostsData }) {
       </div>
       <Link
         href="/boards"
-        className="m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] bg-main px-4 py-3 text-[18px] text-white"
+        className="m-[3rem_auto_0] flex w-[240px] items-center justify-center gap-2 rounded-[5rem] bg-main px-4 py-3 text-[18px] text-white hover:bg-btn-2"
       >
         목록으로 돌아가기
         <Image src={icon_back} alt="돌아가기" width={24} height={24} />