From c73e262f8b829533ec79952c3f2e1939e905a67f Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Wed, 8 May 2024 20:05:11 +0900
Subject: [PATCH 01/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20axios=20i?=
 =?UTF-8?q?nterceptor=20code?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor separated axios instance and interceptor
---
 package-lock.json         |  8 +++----
 package.json              |  2 +-
 pages/folder/[id].tsx     | 37 +++++++++++++++++++++---------
 pages/folder/index.tsx    | 37 +++++++++++++++++++++---------
 pages/signin.tsx          | 40 ++++++++++++++++++++++-----------
 pages/signup.tsx          | 47 ++++++++++++++++++++++++++-------------
 src/feature/Layout.tsx    |  4 ++--
 src/util/axiosInstance.ts |  6 +++++
 src/util/setAxiosToken.ts | 16 ++++++-------
 9 files changed, 134 insertions(+), 63 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eae922efa2..527d88320c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
         "react": "^18",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18",
-        "react-hook-form": "^7.51.2"
+        "react-hook-form": "^7.51.4"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -3067,9 +3067,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.51.2",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
-      "integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
+      "version": "7.51.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz",
+      "integrity": "sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA==",
       "engines": {
         "node": ">=12.22.0"
       },
diff --git a/package.json b/package.json
index 5338f4c90f..a22a8b4ab2 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "react": "^18",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.2"
+    "react-hook-form": "^7.51.4"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/pages/folder/[id].tsx b/pages/folder/[id].tsx
index 2c2c107bee..7d5eb924fb 100644
--- a/pages/folder/[id].tsx
+++ b/pages/folder/[id].tsx
@@ -9,11 +9,17 @@ import { EditLink } from "@/src/ui/EditLink";
 import Modal from "@/src/ui/Modal/Modal";
 
 import styles from "@/styles/pages/FolderPage.module.css";
-import { useState, useRef, useEffect, ChangeEventHandler, MouseEventHandler } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  ChangeEventHandler,
+  MouseEventHandler,
+} from "react";
 import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
-import { setAxiosHeader } from "@/src/util/setAxiosToken";
+// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 import { useGetLinks } from "@/src/hooks/useGetLink";
 import { axiosInstance } from "@/src/util/axiosInstance";
 
@@ -53,9 +59,11 @@ const FolderPage: React.FC = () => {
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
-      setAxiosHeader();
+      // setAxiosHeader();
       getLinks(folderId).then((response) => setLinksData(response.data));
-      getFolderList().then((response) => setFolderData(response?.data?.data.folder));
+      getFolderList().then((response) =>
+        setFolderData(response?.data?.data.folder),
+      );
     } else Router.push("/signin");
   }, [folderId]);
 
@@ -90,13 +98,13 @@ const FolderPage: React.FC = () => {
       ([entry]) => {
         setIsAddLinkShown(entry.isIntersecting);
       },
-      { threshold: 0 }
+      { threshold: 0 },
     );
     const footerObserver = new IntersectionObserver(
       ([entry]) => {
         setIsFooterShown(entry.isIntersecting);
       },
-      { threshold: 0 }
+      { threshold: 0 },
     );
     if (addLinkRef.current) {
       addLinkObserver.observe(addLinkRef.current);
@@ -118,8 +126,10 @@ const FolderPage: React.FC = () => {
   const filteredLinks = linksData?.filter(
     (link) =>
       link.title?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.description?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase())
+      link.description
+        ?.toLowerCase()
+        .includes(searchTerm.trim().toLowerCase()) ||
+      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase()),
   );
 
   return (
@@ -152,11 +162,18 @@ const FolderPage: React.FC = () => {
               categoryId={folderId.toString()}
               handleModalClick={handleModalClick}
             />
-            <EditLink currentCategory={currentCategory} handleEditClick={handleModalClick} />
+            <EditLink
+              currentCategory={currentCategory}
+              handleEditClick={handleModalClick}
+            />
             {filteredLinks && filteredLinks.length > 0 ? (
               <CardList>
                 {filteredLinks?.map((link) => (
-                  <Card key={link?.id} {...link} handleModalClick={handleModalClick} />
+                  <Card
+                    key={link?.id}
+                    {...link}
+                    handleModalClick={handleModalClick}
+                  />
                 ))}
               </CardList>
             ) : (
diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx
index 8a5fdcfe79..3577ada969 100644
--- a/pages/folder/index.tsx
+++ b/pages/folder/index.tsx
@@ -9,11 +9,17 @@ import { EditLink } from "@/src/ui/EditLink";
 import Modal from "@/src/ui/Modal/Modal";
 
 import styles from "@/styles/pages/FolderPage.module.css";
-import { useState, useRef, useEffect, ChangeEventHandler, MouseEventHandler } from "react";
+import {
+  useState,
+  useRef,
+  useEffect,
+  ChangeEventHandler,
+  MouseEventHandler,
+} from "react";
 import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router from "next/router";
-import { setAxiosHeader } from "@/src/util/setAxiosToken";
+// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 import { useGetLinks } from "@/src/hooks/useGetLink";
 import { axiosInstance } from "@/src/util/axiosInstance";
 
@@ -50,9 +56,11 @@ const FolderPage: React.FC = () => {
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
-      setAxiosHeader();
+      // setAxiosHeader();
       getLinks(folderId).then((response) => setLinksData(response.data));
-      getFolderList().then((response) => setFolderData(response?.data?.data.folder));
+      getFolderList().then((response) =>
+        setFolderData(response?.data?.data.folder),
+      );
     } else Router.push("/signin");
   }, [folderId]);
 
@@ -87,13 +95,13 @@ const FolderPage: React.FC = () => {
       ([entry]) => {
         setIsAddLinkShown(entry.isIntersecting);
       },
-      { threshold: 0 }
+      { threshold: 0 },
     );
     const footerObserver = new IntersectionObserver(
       ([entry]) => {
         setIsFooterShown(entry.isIntersecting);
       },
-      { threshold: 0 }
+      { threshold: 0 },
     );
     if (addLinkRef.current) {
       addLinkObserver.observe(addLinkRef.current);
@@ -115,8 +123,10 @@ const FolderPage: React.FC = () => {
   const filteredLinks = linksData?.filter(
     (link) =>
       link.title?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.description?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase())
+      link.description
+        ?.toLowerCase()
+        .includes(searchTerm.trim().toLowerCase()) ||
+      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase()),
   );
 
   return (
@@ -149,11 +159,18 @@ const FolderPage: React.FC = () => {
               categoryId={folderId.toString()}
               handleModalClick={handleModalClick}
             />
-            <EditLink currentCategory={currentCategory} handleEditClick={handleModalClick} />
+            <EditLink
+              currentCategory={currentCategory}
+              handleEditClick={handleModalClick}
+            />
             {filteredLinks && filteredLinks.length > 0 ? (
               <CardList>
                 {filteredLinks?.map((link) => (
-                  <Card key={link?.id} {...link} handleModalClick={handleModalClick} />
+                  <Card
+                    key={link?.id}
+                    {...link}
+                    handleModalClick={handleModalClick}
+                  />
                 ))}
               </CardList>
             ) : (
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 3c958aef31..18141ee634 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -9,7 +9,7 @@ import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
 import { axiosInstance } from "@/src/util/axiosInstance";
 import Router from "next/router";
-import { setAxiosHeader } from "@/src/util/setAxiosToken";
+// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 
 interface FormValue {
   email: string;
@@ -21,7 +21,8 @@ const Signin: React.FC = () => {
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
 
-  const postUserInfo = (signinData?: FormValue) => axiosInstance.post("sign-in", signinData);
+  const postUserInfo = (signinData?: FormValue) =>
+    axiosInstance.post("sign-in", signinData);
   const { wrappedFunction: postSignin } = useAsync<any>(postUserInfo);
 
   const {
@@ -41,7 +42,7 @@ const Signin: React.FC = () => {
       console.log(response);
       const accessToken = response.data;
       localStorage.setItem("accessToken", accessToken.data.accessToken);
-      setAxiosHeader(accessToken.data.accessToken);
+      // setAxiosHeader(accessToken.data.accessToken);
       Router.push("/folder");
     } else {
       setError("email", { message: "이메일을 확인해주세요" });
@@ -57,37 +58,50 @@ const Signin: React.FC = () => {
       <div className={styles.SignPage}>
         <div className={styles.FormWrapper}>
           <div className={styles.SignHeader}>
-            <Link href='/'>
+            <Link href="/">
               <Image
                 width={210}
                 height={40}
-                src='/assets/linkbrary.svg'
-                alt='Linkbrary 서비스 로고'
+                src="/assets/linkbrary.svg"
+                alt="Linkbrary 서비스 로고"
               />
             </Link>
             <div className={styles.SignMsg}>
-              회원이 아니신가요? <Link href='/signup'>회원 가입하기</Link>
+              회원이 아니신가요? <Link href="/signup">회원 가입하기</Link>
             </div>
           </div>
           <form className={styles.InputForm} onSubmit={handleSubmit(onSubmit)}>
-            <EmailInput register={register} inputError={errors.email?.message} />
+            <EmailInput
+              register={register}
+              inputError={errors.email?.message}
+            />
             <PasswordInput
               register={register}
               inputError={errors.password?.message}
               isPasswordOpen={isPasswordOpen}
               handleEyeconClick={handleEyeconClick}
             />
-            <button className={styles.SubmitButton} type='submit'>
+            <button className={styles.SubmitButton} type="submit">
               로그인
             </button>
             <div className={styles.SocialButton}>
               소셜 로그인
               <div className={styles.IconWrapper}>
-                <Link href='https://www.google.com'>
-                  <Image width={42} height={42} alt='google' src='/assets/google-icon.svg' />
+                <Link href="https://www.google.com">
+                  <Image
+                    width={42}
+                    height={42}
+                    alt="google"
+                    src="/assets/google-icon.svg"
+                  />
                 </Link>
-                <Link href='https://www.kakaocorp.com/page'>
-                  <Image width={42} height={42} alt='kakaotalk' src='/assets/kakaotalk-icon.svg' />
+                <Link href="https://www.kakaocorp.com/page">
+                  <Image
+                    width={42}
+                    height={42}
+                    alt="kakaotalk"
+                    src="/assets/kakaotalk-icon.svg"
+                  />
                 </Link>
               </div>
             </div>
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 4dcdb06c24..87098617ea 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -10,7 +10,7 @@ import useAsync from "@/src/hooks/useAsync";
 import { axiosInstance } from "@/src/util/axiosInstance";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
-import { setAxiosHeader } from "@/src/util/setAxiosToken";
+// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 
 interface FormValue {
   email: string;
@@ -22,9 +22,11 @@ const Signup: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
-  const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] = useState<boolean>(false);
+  const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
+    useState<boolean>(false);
 
-  const postCheckAccount = (data: FormValue) => axiosInstance.post("sign-up", data);
+  const postCheckAccount = (data: FormValue) =>
+    axiosInstance.post("sign-up", data);
   const { wrappedFunction: postSignup } = useAsync<any>(postCheckAccount);
 
   const {
@@ -39,7 +41,9 @@ const Signup: React.FC = () => {
   const handlePasswordEyeconClick: MouseEventHandler<HTMLImageElement> = () => {
     setIsPasswordOpen(!isPasswordOpen);
   };
-  const handlePasswordConfirmEyeconClick: MouseEventHandler<HTMLImageElement> = () => {
+  const handlePasswordConfirmEyeconClick: MouseEventHandler<
+    HTMLImageElement
+  > = () => {
     setIsPasswordConfirmOpen(!isPasswordConfirmOpen);
   };
 
@@ -48,7 +52,7 @@ const Signup: React.FC = () => {
     if (response?.status === 200) {
       const accessToken = response.data;
       localStorage.setItem("accessToken", accessToken.data.accessToken);
-      setAxiosHeader(accessToken.data.accessToken);
+      // setAxiosHeader(accessToken.data.accessToken);
       Router.push("/folder");
     }
   };
@@ -61,20 +65,23 @@ const Signup: React.FC = () => {
       <div className={styles.SignPage}>
         <div className={styles.FormWrapper}>
           <div className={styles.SignHeader}>
-            <Link href='/'>
+            <Link href="/">
               <Image
                 width={210}
                 height={40}
-                src='/assets/linkbrary.svg'
-                alt='Linkbrary 서비스 로고'
+                src="/assets/linkbrary.svg"
+                alt="Linkbrary 서비스 로고"
               />
             </Link>
             <div className={styles.SignMsg}>
-              이미 회원이신가요? <Link href='/signin'>로그인하기</Link>
+              이미 회원이신가요? <Link href="/signin">로그인하기</Link>
             </div>
           </div>
           <form className={styles.InputForm} onSubmit={handleSubmit(onSubmit)}>
-            <CreateEmailInput register={register} inputError={errors.email?.message} />
+            <CreateEmailInput
+              register={register}
+              inputError={errors.email?.message}
+            />
             <CreatePasswordInput
               register={register}
               inputError={errors.password?.message}
@@ -88,17 +95,27 @@ const Signup: React.FC = () => {
               passwordValue={passwordValue}
               handleEyeconClick={handlePasswordConfirmEyeconClick}
             />
-            <button className={styles.SubmitButton} type='submit'>
+            <button className={styles.SubmitButton} type="submit">
               회원 가입하기
             </button>
             <div className={styles.SocialButton}>
               다른 방식으로 가입하기
               <div className={styles.IconWrapper}>
-                <Link href='https://www.google.com'>
-                  <Image width={42} height={42} alt='google' src='/assets/google-icon.svg' />
+                <Link href="https://www.google.com">
+                  <Image
+                    width={42}
+                    height={42}
+                    alt="google"
+                    src="/assets/google-icon.svg"
+                  />
                 </Link>
-                <Link href='https://www.kakaocorp.com/page'>
-                  <Image width={42} height={42} alt='kakaotalk' src='/assets/kakaotalk-icon.svg' />
+                <Link href="https://www.kakaocorp.com/page">
+                  <Image
+                    width={42}
+                    height={42}
+                    alt="kakaotalk"
+                    src="/assets/kakaotalk-icon.svg"
+                  />
                 </Link>
               </div>
             </div>
diff --git a/src/feature/Layout.tsx b/src/feature/Layout.tsx
index 5d645d5304..192385de98 100644
--- a/src/feature/Layout.tsx
+++ b/src/feature/Layout.tsx
@@ -3,7 +3,7 @@ import Footer from "./Footer/Footer";
 import NavigationBar from "./NavigationBar";
 import { ReactNode, RefObject, useEffect, useState } from "react";
 import useAsync from "../hooks/useAsync";
-import { setAxiosHeader } from "../util/setAxiosToken";
+// import { setAxiosHeader } from "../util/setAxiosToken";
 
 interface layoutProps {
   children: ReactNode;
@@ -25,7 +25,7 @@ const Layout = ({ children, isNavFixed, footerRef }: layoutProps) => {
     if (!localStorage.getItem("accessToken")) {
       setData(null);
     } else {
-      setAxiosHeader();
+      // setAxiosHeader();
       getUser().then(setData);
     }
   }, []);
diff --git a/src/util/axiosInstance.ts b/src/util/axiosInstance.ts
index d3ea6d3a63..14524eac3f 100644
--- a/src/util/axiosInstance.ts
+++ b/src/util/axiosInstance.ts
@@ -3,3 +3,9 @@ import axios, { AxiosInstance } from "axios";
 export const axiosInstance: AxiosInstance = axios.create({
   baseURL: "https://bootcamp-api.codeit.kr/api/",
 });
+
+const token = localStorage.getItem("accessToken");
+axiosInstance.interceptors.request.use((config) => {
+  config.headers.Authorization = `Bearer ${token}`;
+  return config;
+});
diff --git a/src/util/setAxiosToken.ts b/src/util/setAxiosToken.ts
index b82fc5c8a2..0b97aa4400 100644
--- a/src/util/setAxiosToken.ts
+++ b/src/util/setAxiosToken.ts
@@ -1,9 +1,9 @@
-import { axiosInstance } from "./axiosInstance";
+// import { axiosInstance } from "./axiosInstance";
 
-export const setAxiosHeader = (accessToken?: string) => {
-  const token = accessToken ? accessToken : localStorage.getItem("accessToken");
-  axiosInstance.interceptors.request.use((config) => {
-    config.headers.Authorization = `Bearer ${token}`;
-    return config;
-  });
-};
+// export const setAxiosHeader = (accessToken?: string) => {
+//   const token = accessToken ? accessToken : localStorage.getItem("accessToken");
+//   axiosInstance.interceptors.request.use((config) => {
+//     config.headers.Authorization = `Bearer ${token}`;
+//     return config;
+//   });
+// };

From c0580eeb3729b12a8f04f9e5847f7605d8cde251 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Wed, 8 May 2024 22:17:44 +0900
Subject: [PATCH 02/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20segments?=
 =?UTF-8?q?=20to=20optional=20catch-all=20segments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refactor segments to optional catch-all segments for merging folder, shared page
---
 pages/folder/{[id].tsx => [[...id]].tsx}      |  11 +-
 pages/folder/index.tsx                        | 188 ------------------
 .../{[folderId].tsx => [[...folderId]].tsx}   |  23 ++-
 pages/shared/index.tsx                        |  65 ------
 src/util/mapFolderData.ts                     |   5 +-
 src/util/mapFolderFromLink.ts                 |   4 +-
 6 files changed, 32 insertions(+), 264 deletions(-)
 rename pages/folder/{[id].tsx => [[...id]].tsx} (95%)
 delete mode 100644 pages/folder/index.tsx
 rename pages/shared/{[folderId].tsx => [[...folderId]].tsx} (84%)
 delete mode 100644 pages/shared/index.tsx

diff --git a/pages/folder/[id].tsx b/pages/folder/[[...id]].tsx
similarity index 95%
rename from pages/folder/[id].tsx
rename to pages/folder/[[...id]].tsx
index 7d5eb924fb..9b32f5a84f 100644
--- a/pages/folder/[id].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -35,13 +35,14 @@ interface Folder {
 const FolderPage: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
-  if (!(typeof id === "string" && /^\d+$/.test(id))) Router.push("/");
+  if (id !== undefined && !(id.length > 2 && /^\d+$/.test(id[0])))
+    Router.push("/");
   const getFolderData = () => axiosInstance.get("folders");
   const { wrappedFunction: getLinks } = useAsync<any>(useGetLinks);
   const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
 
   const [currentCategory, setCurrentCategory] = useState("전체");
-  const [folderId, setFolderId] = useState<number>(id ? +id : 0);
+  const [folderId, setFolderId] = useState<number>(0);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modal, setModal] = useState("");
   const [currentUrl, setCurrentUrl] = useState("");
@@ -67,6 +68,12 @@ const FolderPage: React.FC = () => {
     } else Router.push("/signin");
   }, [folderId]);
 
+  useEffect(() => {
+    id?.length
+      ? setFolderId(parseInt((id[0] as string) ?? 0, 10))
+      : setFolderId(0);
+  }, [id]);
+
   const folderDataWithAll = Array.isArray(folderData)
     ? [{ name: "전체", id: "0" }, ...folderData]
     : [];
diff --git a/pages/folder/index.tsx b/pages/folder/index.tsx
deleted file mode 100644
index 3577ada969..0000000000
--- a/pages/folder/index.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import AddLink from "@/src/ui/AddLink";
-import Layout from "@/src/feature/Layout";
-import SearchBar from "@/src/ui/SearchBar";
-import { CardList } from "@/src/ui/CardList";
-import { Card } from "@/src/ui/Card";
-import useAsync from "@/src/hooks/useAsync";
-import Category from "@/src/ui/Category";
-import { EditLink } from "@/src/ui/EditLink";
-import Modal from "@/src/ui/Modal/Modal";
-
-import styles from "@/styles/pages/FolderPage.module.css";
-import {
-  useState,
-  useRef,
-  useEffect,
-  ChangeEventHandler,
-  MouseEventHandler,
-} from "react";
-import Head from "next/head";
-import { MappedLink } from "@/src/util/mapFolderFromLink";
-import Router from "next/router";
-// import { setAxiosHeader } from "@/src/util/setAxiosToken";
-import { useGetLinks } from "@/src/hooks/useGetLink";
-import { axiosInstance } from "@/src/util/axiosInstance";
-
-interface Folder {
-  created_at: string;
-  favorite: boolean;
-  id: number;
-  link: { count: number };
-  name: string;
-  user_id: number;
-}
-
-const FolderPage: React.FC = () => {
-  const getFolderData = () => axiosInstance.get("folders");
-  const { wrappedFunction: getLinks } = useAsync<any>(useGetLinks);
-  const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
-
-  const [currentCategory, setCurrentCategory] = useState("전체");
-  const [folderId, setFolderId] = useState(0);
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [modal, setModal] = useState("");
-  const [currentUrl, setCurrentUrl] = useState("");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [linksData, setLinksData] = useState<MappedLink[]>([]);
-  const [folderData, setFolderData] = useState<Folder[]>([]);
-
-  const [isAddLinkShown, setIsAddLinkShown] = useState(true);
-  const [isFooterShown, setIsFooterShown] = useState(false);
-
-  const addLinkRef = useRef(null);
-  const footerRef = useRef(null);
-  const isAddLinkFixed = !isAddLinkShown && !isFooterShown;
-
-  useEffect(() => {
-    const accessToken = localStorage.getItem("accessToken");
-    if (accessToken) {
-      // setAxiosHeader();
-      getLinks(folderId).then((response) => setLinksData(response.data));
-      getFolderList().then((response) =>
-        setFolderData(response?.data?.data.folder),
-      );
-    } else Router.push("/signin");
-  }, [folderId]);
-
-  const folderDataWithAll = Array.isArray(folderData)
-    ? [{ name: "전체", id: "0" }, ...folderData]
-    : [];
-  const navFixed = true;
-
-  const handleCategoryClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-    const eventTarget = e.target as HTMLElement;
-    const category = eventTarget.innerText;
-    const Id = eventTarget.id;
-    setCurrentCategory(category);
-    setFolderId(+Id || 0);
-  };
-  const handleModalClick: MouseEventHandler<HTMLButtonElement> = (e) => {
-    const eventTarget = e.target as HTMLElement;
-    e.preventDefault();
-    setIsModalOpen(true);
-    setModal(e.currentTarget.id);
-    setCurrentUrl(eventTarget.getAttribute("data-url") || "");
-  };
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchTerm(e.target.value);
-  };
-  const handleInputClear = () => {
-    setSearchTerm("");
-  };
-
-  useEffect(() => {
-    const addLinkObserver = new IntersectionObserver(
-      ([entry]) => {
-        setIsAddLinkShown(entry.isIntersecting);
-      },
-      { threshold: 0 },
-    );
-    const footerObserver = new IntersectionObserver(
-      ([entry]) => {
-        setIsFooterShown(entry.isIntersecting);
-      },
-      { threshold: 0 },
-    );
-    if (addLinkRef.current) {
-      addLinkObserver.observe(addLinkRef.current);
-    }
-    if (footerRef.current) {
-      footerObserver.observe(footerRef.current);
-    }
-
-    return () => {
-      if (addLinkRef.current) {
-        addLinkObserver.unobserve(addLinkRef.current);
-      }
-      if (footerRef.current) {
-        footerObserver.unobserve(footerRef.current);
-      }
-    };
-  }, []);
-
-  const filteredLinks = linksData?.filter(
-    (link) =>
-      link.title?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.description
-        ?.toLowerCase()
-        .includes(searchTerm.trim().toLowerCase()) ||
-      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase()),
-  );
-
-  return (
-    <>
-      <Head>
-        <title>Folder</title>
-      </Head>
-      {isModalOpen && (
-        <Modal
-          currentCategory={currentCategory}
-          modal={modal}
-          setIsModalOpen={setIsModalOpen}
-          categoryData={folderData}
-          currentUrl={currentUrl}
-          selectedId={folderId}
-        />
-      )}
-      <Layout isNavFixed={navFixed} footerRef={footerRef}>
-        <div className={styles.FolderPage}>
-          <AddLink addLinkRef={addLinkRef} />
-          <div className={styles.FolderPageItems}>
-            <SearchBar
-              handleInputChange={handleInputChange}
-              handleInputClear={handleInputClear}
-              searchTerm={searchTerm}
-            />
-            <Category
-              buttonClicked={handleCategoryClick}
-              linkData={folderDataWithAll}
-              categoryId={folderId.toString()}
-              handleModalClick={handleModalClick}
-            />
-            <EditLink
-              currentCategory={currentCategory}
-              handleEditClick={handleModalClick}
-            />
-            {filteredLinks && filteredLinks.length > 0 ? (
-              <CardList>
-                {filteredLinks?.map((link) => (
-                  <Card
-                    key={link?.id}
-                    {...link}
-                    handleModalClick={handleModalClick}
-                  />
-                ))}
-              </CardList>
-            ) : (
-              <div className={styles.NoLink}>저장된 링크가 없습니다.</div>
-            )}
-            <button className={styles.mobileAddButton}>폴더 추가하기 +</button>
-            {isAddLinkFixed && <AddLink isAddLinkFixed={isAddLinkFixed} />}
-          </div>
-        </div>
-      </Layout>
-    </>
-  );
-};
-
-export default FolderPage;
diff --git a/pages/shared/[folderId].tsx b/pages/shared/[[...folderId]].tsx
similarity index 84%
rename from pages/shared/[folderId].tsx
rename to pages/shared/[[...folderId]].tsx
index eac14e8d2b..ce1aac1707 100644
--- a/pages/shared/[folderId].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -11,6 +11,7 @@ import Head from "next/head";
 import { axiosInstance } from "@/src/util/axiosInstance";
 import Router, { useRouter } from "next/router";
 import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
+import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
 
 interface FolderData {
   data: {
@@ -63,11 +64,15 @@ const SharedPage = () => {
   const getFolderOwner = async (id: number) => axiosInstance.get(`users/${id}`);
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
-  const { wrappedFunction: getLinksByFolderId } = useAsync(useGetLinksByFolderId);
+  const { wrappedFunction: get0FolderInfo } =
+    useAsync<FolderData>(useGetFolderInfo);
+  const { wrappedFunction: getLinksByFolderId } = useAsync(
+    useGetLinksByFolderId,
+  );
 
   useEffect(() => {
-    if (folderId) {
-      getFolderInfo(folderId).then((result) => {
+    if (folderId?.length === 1) {
+      getFolderInfo(folderId[0]).then((result) => {
         setFolderData(result?.data);
         const ownerId = result?.data.data[0].user_id;
         if (ownerId) {
@@ -75,6 +80,8 @@ const SharedPage = () => {
           getLinksByFolderId(ownerId, folderId).then(setLinkData);
         }
       });
+    } else if (folderId === undefined) {
+      get0FolderInfo().then(setFolderData);
     }
   }, [folderId]);
 
@@ -88,8 +95,10 @@ const SharedPage = () => {
   const filteredLinks = linkData?.data?.filter(
     (link) =>
       link.alt?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.description?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase())
+      link.description
+        ?.toLowerCase()
+        .includes(searchTerm.trim().toLowerCase()) ||
+      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase()),
   );
 
   return (
@@ -100,7 +109,9 @@ const SharedPage = () => {
       <Layout>
         <div className={styles.SharedPage}>
           <FolderInfo
-            profileImage={userData?.data[0]?.image_source || "/assets/profile-default.svg"}
+            profileImage={
+              userData?.data[0]?.image_source || "/assets/profile-default.svg"
+            }
             ownerName={userData?.data[0]?.name}
             folderName={folderData?.data[0]?.name}
           />
diff --git a/pages/shared/index.tsx b/pages/shared/index.tsx
deleted file mode 100644
index d736416f1f..0000000000
--- a/pages/shared/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import FolderInfo from "@/src/ui/FolderInfo";
-import SearchBar from "@/src/ui/SearchBar";
-import { CardList } from "@/src/ui/CardList";
-import Layout from "@/src/feature/Layout";
-import { Card } from "@/src/ui/Card";
-import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
-import useAsync from "@/src/hooks/useAsync";
-import styles from "@/styles/pages/SharedPage.module.css";
-import { ChangeEventHandler, useEffect, useState } from "react";
-import Head from "next/head";
-import { FolderData } from "@/src/util/mapFolderData";
-
-const SharedPage = () => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [folderData, setFolderData] = useState<FolderData>();
-
-  const { wrappedFunction: getFolderInfo } = useAsync<FolderData>(useGetFolderInfo);
-
-  useEffect(() => {
-    getFolderInfo().then(setFolderData);
-  });
-
-  const { profileImage, ownerName, folderName, links } = folderData || {};
-
-  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
-    setSearchTerm(e.target.value);
-  };
-  const handleInputClear = () => {
-    setSearchTerm("");
-  };
-
-  const filteredLinks = links?.filter(
-    (link) =>
-      link.alt?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.description?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
-      link.url.toLowerCase().includes(searchTerm.trim().toLowerCase())
-  );
-
-  return (
-    <>
-      <Head>
-        <title>Shared</title>
-      </Head>
-      <Layout>
-        <div className={styles.SharedPage}>
-          <FolderInfo profileImage={profileImage} ownerName={ownerName} folderName={folderName} />
-          <div className={styles.SharedPageItems}>
-            <SearchBar
-              handleInputChange={handleInputChange}
-              handleInputClear={handleInputClear}
-              searchTerm={searchTerm}
-            />
-            <CardList>
-              {filteredLinks?.map((link) => (
-                <Card key={link?.id} {...link} />
-              ))}
-            </CardList>
-          </div>
-        </div>
-      </Layout>
-    </>
-  );
-};
-
-export default SharedPage;
diff --git a/src/util/mapFolderData.ts b/src/util/mapFolderData.ts
index 336931a830..9c3215e434 100644
--- a/src/util/mapFolderData.ts
+++ b/src/util/mapFolderData.ts
@@ -1,4 +1,4 @@
-import format from "date-fns/format";
+import { format } from "date-fns/format";
 import { getElapsedTime } from "./getElapsedTime";
 
 interface Folder {
@@ -33,7 +33,8 @@ export type FolderData = {
 };
 
 export const mapFolderData = (folder: Folder): FolderData => {
-  if (!folder) return { profileImage: "", ownerName: "", folderName: "", links: [] };
+  if (!folder)
+    return { profileImage: "", ownerName: "", folderName: "", links: [] };
   const { name, owner, links } = folder;
 
   const mapLinks = (link: Link) => {
diff --git a/src/util/mapFolderFromLink.ts b/src/util/mapFolderFromLink.ts
index fc7b6e17dc..f416640f59 100644
--- a/src/util/mapFolderFromLink.ts
+++ b/src/util/mapFolderFromLink.ts
@@ -23,7 +23,9 @@ interface Link {
   favorite?: boolean;
 }
 
-export const mapFolderFromLink: (data: Link[]) => { data: MappedLink[] } = (data) => {
+export const mapFolderFromLink: (data: Link[]) => { data: MappedLink[] } = (
+  data,
+) => {
   if (!data) return { data: [] };
 
   const mapLinks = (link: Link) => {

From 424b033da7455290915c7b9e4a09d8055c9b2d86 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Thu, 9 May 2024 11:53:38 +0900
Subject: [PATCH 03/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20router=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix No Router Instance issue & load 404 page when segments are wrong
---
 pages/folder/[[...id]].tsx       | 11 +++++++++--
 pages/shared/[[...folderId]].tsx |  8 +++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 9b32f5a84f..00e4974cd2 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -7,6 +7,7 @@ import useAsync from "@/src/hooks/useAsync";
 import Category from "@/src/ui/Category";
 import { EditLink } from "@/src/ui/EditLink";
 import Modal from "@/src/ui/Modal/Modal";
+import ErrorPage from "next/error";
 
 import styles from "@/styles/pages/FolderPage.module.css";
 import {
@@ -35,8 +36,6 @@ interface Folder {
 const FolderPage: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
-  if (id !== undefined && !(id.length > 2 && /^\d+$/.test(id[0])))
-    Router.push("/");
   const getFolderData = () => axiosInstance.get("folders");
   const { wrappedFunction: getLinks } = useAsync<any>(useGetLinks);
   const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
@@ -52,6 +51,7 @@ const FolderPage: React.FC = () => {
 
   const [isAddLinkShown, setIsAddLinkShown] = useState(true);
   const [isFooterShown, setIsFooterShown] = useState(false);
+  const [isError, setIsError] = useState(false);
 
   const addLinkRef = useRef(null);
   const footerRef = useRef(null);
@@ -69,6 +69,9 @@ const FolderPage: React.FC = () => {
   }, [folderId]);
 
   useEffect(() => {
+    if (!router.isReady) return;
+    if (id !== undefined && !(id.length > 2 && /^\d+$/.test(id[0])))
+      setIsError(true);
     id?.length
       ? setFolderId(parseInt((id[0] as string) ?? 0, 10))
       : setFolderId(0);
@@ -130,6 +133,10 @@ const FolderPage: React.FC = () => {
     };
   }, []);
 
+  if (isError) {
+    return <ErrorPage statusCode={404} />;
+  }
+
   const filteredLinks = linksData?.filter(
     (link) =>
       link.title?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index ce1aac1707..1b3dd5c1a3 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -7,6 +7,7 @@ import useAsync from "@/src/hooks/useAsync";
 import styles from "@/styles/pages/SharedPage.module.css";
 import { ChangeEventHandler, useEffect, useState } from "react";
 import Head from "next/head";
+import ErrorPage from "next/error";
 
 import { axiosInstance } from "@/src/util/axiosInstance";
 import Router, { useRouter } from "next/router";
@@ -69,6 +70,7 @@ const SharedPage = () => {
   const { wrappedFunction: getLinksByFolderId } = useAsync(
     useGetLinksByFolderId,
   );
+  const [isError, setIsError] = useState(false);
 
   useEffect(() => {
     if (folderId?.length === 1) {
@@ -82,9 +84,13 @@ const SharedPage = () => {
       });
     } else if (folderId === undefined) {
       get0FolderInfo().then(setFolderData);
-    }
+    } else setIsError(true);
   }, [folderId]);
 
+  if (isError) {
+    return <ErrorPage statusCode={404} />;
+  }
+
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     setSearchTerm(e.target.value);
   };

From cedbbb19a1d3b7ff074fdf49ca76e3fcf350fc50 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Thu, 9 May 2024 12:51:24 +0900
Subject: [PATCH 04/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Separate=20linkRef?=
 =?UTF-8?q?=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Separate linkRef hook from folder page
---
 pages/folder/[[...id]].tsx         | 65 +++++++++++++++++-------------
 src/hooks/useFloatingAddLinkBar.ts | 47 +++++++++++++++++++++
 2 files changed, 83 insertions(+), 29 deletions(-)
 create mode 100644 src/hooks/useFloatingAddLinkBar.ts

diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 00e4974cd2..537c06d080 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -23,6 +23,7 @@ import Router, { useRouter } from "next/router";
 // import { setAxiosHeader } from "@/src/util/setAxiosToken";
 import { useGetLinks } from "@/src/hooks/useGetLink";
 import { axiosInstance } from "@/src/util/axiosInstance";
+import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
 
 interface Folder {
   created_at: string;
@@ -103,35 +104,41 @@ const FolderPage: React.FC = () => {
     setSearchTerm("");
   };
 
-  useEffect(() => {
-    const addLinkObserver = new IntersectionObserver(
-      ([entry]) => {
-        setIsAddLinkShown(entry.isIntersecting);
-      },
-      { threshold: 0 },
-    );
-    const footerObserver = new IntersectionObserver(
-      ([entry]) => {
-        setIsFooterShown(entry.isIntersecting);
-      },
-      { threshold: 0 },
-    );
-    if (addLinkRef.current) {
-      addLinkObserver.observe(addLinkRef.current);
-    }
-    if (footerRef.current) {
-      footerObserver.observe(footerRef.current);
-    }
-
-    return () => {
-      if (addLinkRef.current) {
-        addLinkObserver.unobserve(addLinkRef.current);
-      }
-      if (footerRef.current) {
-        footerObserver.unobserve(footerRef.current);
-      }
-    };
-  }, []);
+  // useEffect(() => {
+  //   const addLinkObserver = new IntersectionObserver(
+  //     ([entry]) => {
+  //       setIsAddLinkShown(entry.isIntersecting);
+  //     },
+  //     { threshold: 0 },
+  //   );
+  //   const footerObserver = new IntersectionObserver(
+  //     ([entry]) => {
+  //       setIsFooterShown(entry.isIntersecting);
+  //     },
+  //     { threshold: 0 },
+  //   );
+  //   if (addLinkRef.current) {
+  //     addLinkObserver.observe(addLinkRef.current);
+  //   }
+  //   if (footerRef.current) {
+  //     footerObserver.observe(footerRef.current);
+  //   }
+
+  //   return () => {
+  //     if (addLinkRef.current) {
+  //       addLinkObserver.unobserve(addLinkRef.current);
+  //     }
+  //     if (footerRef.current) {
+  //       footerObserver.unobserve(footerRef.current);
+  //     }
+  //   };
+  // }, []);
+  useFloatingAddLinkBar({
+    setIsAddLinkShown,
+    setIsFooterShown,
+    addLinkRef,
+    footerRef,
+  });
 
   if (isError) {
     return <ErrorPage statusCode={404} />;
diff --git a/src/hooks/useFloatingAddLinkBar.ts b/src/hooks/useFloatingAddLinkBar.ts
new file mode 100644
index 0000000000..f27227d96a
--- /dev/null
+++ b/src/hooks/useFloatingAddLinkBar.ts
@@ -0,0 +1,47 @@
+import { MutableRefObject, Ref, SetStateAction, useEffect } from "react";
+
+interface RefProps {
+  setIsAddLinkShown: (value: SetStateAction<boolean>) => void;
+  setIsFooterShown: (value: SetStateAction<boolean>) => void;
+  addLinkRef: MutableRefObject<null>;
+  footerRef: MutableRefObject<null>;
+}
+
+const useFloatingAddLinkBar = ({
+  setIsAddLinkShown,
+  setIsFooterShown,
+  addLinkRef,
+  footerRef,
+}: RefProps) => {
+  useEffect(() => {
+    const addLinkObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsAddLinkShown(entry.isIntersecting);
+      },
+      { threshold: 0 },
+    );
+    const footerObserver = new IntersectionObserver(
+      ([entry]) => {
+        setIsFooterShown(entry.isIntersecting);
+      },
+      { threshold: 0 },
+    );
+    if (addLinkRef.current) {
+      addLinkObserver.observe(addLinkRef.current);
+    }
+    if (footerRef.current) {
+      footerObserver.observe(footerRef.current);
+    }
+
+    return () => {
+      if (addLinkRef.current) {
+        addLinkObserver.unobserve(addLinkRef.current);
+      }
+      if (footerRef.current) {
+        footerObserver.unobserve(footerRef.current);
+      }
+    };
+  }, []);
+};
+
+export default useFloatingAddLinkBar;

From 0668390ea60be5755a8b034845d06b6d83bf8cc9 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Thu, 9 May 2024 15:10:37 +0900
Subject: [PATCH 05/19] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20Remove=20unused=20co?=
 =?UTF-8?q?des?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

remove unused imports, codes
---
 pages/folder/[[...id]].tsx         | 31 ------------------------------
 pages/shared/[[...folderId]].tsx   |  2 +-
 src/feature/Layout.tsx             |  2 --
 src/hooks/useAsync.ts              |  2 --
 src/hooks/useFloatingAddLinkBar.ts |  2 +-
 src/util/setAxiosToken.ts          |  9 ---------
 6 files changed, 2 insertions(+), 46 deletions(-)
 delete mode 100644 src/util/setAxiosToken.ts

diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 537c06d080..7e29bcc585 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -20,7 +20,6 @@ import {
 import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
-// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 import { useGetLinks } from "@/src/hooks/useGetLink";
 import { axiosInstance } from "@/src/util/axiosInstance";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
@@ -61,7 +60,6 @@ const FolderPage: React.FC = () => {
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
-      // setAxiosHeader();
       getLinks(folderId).then((response) => setLinksData(response.data));
       getFolderList().then((response) =>
         setFolderData(response?.data?.data.folder),
@@ -104,35 +102,6 @@ const FolderPage: React.FC = () => {
     setSearchTerm("");
   };
 
-  // useEffect(() => {
-  //   const addLinkObserver = new IntersectionObserver(
-  //     ([entry]) => {
-  //       setIsAddLinkShown(entry.isIntersecting);
-  //     },
-  //     { threshold: 0 },
-  //   );
-  //   const footerObserver = new IntersectionObserver(
-  //     ([entry]) => {
-  //       setIsFooterShown(entry.isIntersecting);
-  //     },
-  //     { threshold: 0 },
-  //   );
-  //   if (addLinkRef.current) {
-  //     addLinkObserver.observe(addLinkRef.current);
-  //   }
-  //   if (footerRef.current) {
-  //     footerObserver.observe(footerRef.current);
-  //   }
-
-  //   return () => {
-  //     if (addLinkRef.current) {
-  //       addLinkObserver.unobserve(addLinkRef.current);
-  //     }
-  //     if (footerRef.current) {
-  //       footerObserver.unobserve(footerRef.current);
-  //     }
-  //   };
-  // }, []);
   useFloatingAddLinkBar({
     setIsAddLinkShown,
     setIsFooterShown,
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index 1b3dd5c1a3..c86b56b412 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -10,7 +10,7 @@ import Head from "next/head";
 import ErrorPage from "next/error";
 
 import { axiosInstance } from "@/src/util/axiosInstance";
-import Router, { useRouter } from "next/router";
+import { useRouter } from "next/router";
 import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
 import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
 
diff --git a/src/feature/Layout.tsx b/src/feature/Layout.tsx
index 192385de98..cf0d36b61e 100644
--- a/src/feature/Layout.tsx
+++ b/src/feature/Layout.tsx
@@ -3,7 +3,6 @@ import Footer from "./Footer/Footer";
 import NavigationBar from "./NavigationBar";
 import { ReactNode, RefObject, useEffect, useState } from "react";
 import useAsync from "../hooks/useAsync";
-// import { setAxiosHeader } from "../util/setAxiosToken";
 
 interface layoutProps {
   children: ReactNode;
@@ -25,7 +24,6 @@ const Layout = ({ children, isNavFixed, footerRef }: layoutProps) => {
     if (!localStorage.getItem("accessToken")) {
       setData(null);
     } else {
-      // setAxiosHeader();
       getUser().then(setData);
     }
   }, []);
diff --git a/src/hooks/useAsync.ts b/src/hooks/useAsync.ts
index 47dedb1ace..a5e8c53615 100644
--- a/src/hooks/useAsync.ts
+++ b/src/hooks/useAsync.ts
@@ -3,8 +3,6 @@ import { useState } from "react";
 function useAsync<T = any>(callback: (args?: any) => Promise<any>) {
   const [pending, setPending] = useState(false);
   const [error, setError] = useState<any>(null);
-  // TODO
-  // 에러 상태일 때 setError(false) 확인해보기
   const wrappedFunction: (...args: any) => Promise<T> = async (...args) => {
     try {
       setPending(true);
diff --git a/src/hooks/useFloatingAddLinkBar.ts b/src/hooks/useFloatingAddLinkBar.ts
index f27227d96a..83f6dcd50f 100644
--- a/src/hooks/useFloatingAddLinkBar.ts
+++ b/src/hooks/useFloatingAddLinkBar.ts
@@ -1,4 +1,4 @@
-import { MutableRefObject, Ref, SetStateAction, useEffect } from "react";
+import { MutableRefObject, SetStateAction, useEffect } from "react";
 
 interface RefProps {
   setIsAddLinkShown: (value: SetStateAction<boolean>) => void;
diff --git a/src/util/setAxiosToken.ts b/src/util/setAxiosToken.ts
deleted file mode 100644
index 0b97aa4400..0000000000
--- a/src/util/setAxiosToken.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// import { axiosInstance } from "./axiosInstance";
-
-// export const setAxiosHeader = (accessToken?: string) => {
-//   const token = accessToken ? accessToken : localStorage.getItem("accessToken");
-//   axiosInstance.interceptors.request.use((config) => {
-//     config.headers.Authorization = `Bearer ${token}`;
-//     return config;
-//   });
-// };

From b6540b2bd6278b25d824e8257fb42ed2ba457ea1 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 17:26:55 +0900
Subject: [PATCH 06/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20localStorage=20unimp?=
 =?UTF-8?q?ort=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix localStorage issue
---
 src/util/axiosInstance.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/util/axiosInstance.ts b/src/util/axiosInstance.ts
index 14524eac3f..c60b4f16c2 100644
--- a/src/util/axiosInstance.ts
+++ b/src/util/axiosInstance.ts
@@ -3,9 +3,10 @@ import axios, { AxiosInstance } from "axios";
 export const axiosInstance: AxiosInstance = axios.create({
   baseURL: "https://bootcamp-api.codeit.kr/api/",
 });
-
-const token = localStorage.getItem("accessToken");
-axiosInstance.interceptors.request.use((config) => {
-  config.headers.Authorization = `Bearer ${token}`;
-  return config;
-});
+if (typeof window !== "undefined") {
+  const token = localStorage.getItem("accessToken");
+  axiosInstance.interceptors.request.use((config) => {
+    config.headers.Authorization = `Bearer ${token}`;
+    return config;
+  });
+}

From 03d09c5445498fbe019933bd95975eaa90cff585 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 17:30:04 +0900
Subject: [PATCH 07/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20button=20submit=20is?=
 =?UTF-8?q?sue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix eyecon button type to button for preventing uneccessery submit
---
 pages/signin.tsx | 4 +---
 pages/signup.tsx | 3 +--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/pages/signin.tsx b/pages/signin.tsx
index 18141ee634..bfb62c1438 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -9,7 +9,6 @@ import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
 import { axiosInstance } from "@/src/util/axiosInstance";
 import Router from "next/router";
-// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 
 interface FormValue {
   email: string;
@@ -17,7 +16,7 @@ interface FormValue {
 }
 
 const Signin: React.FC = () => {
-  if (localStorage.getItem("accessToken")) Router.push("/folder");
+  // if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
 
@@ -42,7 +41,6 @@ const Signin: React.FC = () => {
       console.log(response);
       const accessToken = response.data;
       localStorage.setItem("accessToken", accessToken.data.accessToken);
-      // setAxiosHeader(accessToken.data.accessToken);
       Router.push("/folder");
     } else {
       setError("email", { message: "이메일을 확인해주세요" });
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 87098617ea..136a25ca64 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -19,7 +19,7 @@ interface FormValue {
 }
 
 const Signup: React.FC = () => {
-  if (localStorage.getItem("accessToken")) Router.push("/folder");
+  // if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
   const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
@@ -52,7 +52,6 @@ const Signup: React.FC = () => {
     if (response?.status === 200) {
       const accessToken = response.data;
       localStorage.setItem("accessToken", accessToken.data.accessToken);
-      // setAxiosHeader(accessToken.data.accessToken);
       Router.push("/folder");
     }
   };

From 5fafd9d986fa911e52a4648fc63fc26b735f4de8 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 17:46:25 +0900
Subject: [PATCH 08/19] =?UTF-8?q?=F0=9F=90=9B=20Fix=20axios=20instance=20i?=
 =?UTF-8?q?ssue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fox axios token issue
---
 pages/folder/[[...id]].tsx         |  6 +++---
 pages/shared/[[...folderId]].tsx   |  6 +++---
 pages/signin.tsx                   |  7 +++----
 pages/signup.tsx                   |  8 +++-----
 src/hooks/useGetFolder.ts          |  4 ++--
 src/hooks/useGetFolderInfo.ts      |  4 ++--
 src/hooks/useGetLink.ts            |  4 ++--
 src/hooks/useGetLinksByFolderId.ts |  9 ++++++---
 src/hooks/useGetUser.ts            |  4 ++--
 src/ui/CreateEmailInput.tsx        | 19 ++++++++++++-------
 src/ui/InputLayout.tsx             | 17 ++++++++++++++---
 src/util/axiosInstance.ts          | 12 ------------
 src/util/instance.ts               | 20 ++++++++++++++++++++
 13 files changed, 72 insertions(+), 48 deletions(-)
 delete mode 100644 src/util/axiosInstance.ts
 create mode 100644 src/util/instance.ts

diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 7e29bcc585..174bd8273a 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -21,7 +21,7 @@ import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
 import { useGetLinks } from "@/src/hooks/useGetLink";
-import { axiosInstance } from "@/src/util/axiosInstance";
+import instance from "@/src/util/instance";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
 
 interface Folder {
@@ -36,7 +36,7 @@ interface Folder {
 const FolderPage: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
-  const getFolderData = () => axiosInstance.get("folders");
+  const getFolderData = () => instance.get("folders");
   const { wrappedFunction: getLinks } = useAsync<any>(useGetLinks);
   const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
 
@@ -60,7 +60,7 @@ const FolderPage: React.FC = () => {
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
-      getLinks(folderId).then((response) => setLinksData(response.data));
+      getLinks(folderId).then((response) => setLinksData(response?.data));
       getFolderList().then((response) =>
         setFolderData(response?.data?.data.folder),
       );
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index c86b56b412..a0b0206243 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -9,7 +9,7 @@ import { ChangeEventHandler, useEffect, useState } from "react";
 import Head from "next/head";
 import ErrorPage from "next/error";
 
-import { axiosInstance } from "@/src/util/axiosInstance";
+import instance from "@/src/util/instance";
 import { useRouter } from "next/router";
 import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
 import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
@@ -61,8 +61,8 @@ const SharedPage = () => {
 
   const router = useRouter();
   const { folderId } = router.query;
-  const getFolder = async (id: number) => axiosInstance.get(`folders/${id}`);
-  const getFolderOwner = async (id: number) => axiosInstance.get(`users/${id}`);
+  const getFolder = async (id: number) => instance.get(`folders/${id}`);
+  const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
   const { wrappedFunction: get0FolderInfo } =
diff --git a/pages/signin.tsx b/pages/signin.tsx
index bfb62c1438..5a782b5a64 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -7,7 +7,7 @@ import Image from "next/image";
 import EmailInput from "@/src/ui/EmailInput";
 import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-import { axiosInstance } from "@/src/util/axiosInstance";
+import instance from "@/src/util/instance";
 import Router from "next/router";
 
 interface FormValue {
@@ -16,12 +16,12 @@ interface FormValue {
 }
 
 const Signin: React.FC = () => {
-  // if (localStorage.getItem("accessToken")) Router.push("/folder");
+  if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
 
   const postUserInfo = (signinData?: FormValue) =>
-    axiosInstance.post("sign-in", signinData);
+    instance.post("sign-in", signinData);
   const { wrappedFunction: postSignin } = useAsync<any>(postUserInfo);
 
   const {
@@ -38,7 +38,6 @@ const Signin: React.FC = () => {
   const onSubmit: SubmitHandler<FormValue> = async (data) => {
     const response = await postSignin(data);
     if (response?.status === 200) {
-      console.log(response);
       const accessToken = response.data;
       localStorage.setItem("accessToken", accessToken.data.accessToken);
       Router.push("/folder");
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 136a25ca64..e471e4746a 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -7,10 +7,9 @@ import Image from "next/image";
 import PasswordConfirmInput from "@/src/ui/PasswordConfirmInput";
 import CreatePasswordInput from "@/src/ui/CreatePasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-import { axiosInstance } from "@/src/util/axiosInstance";
+import instance from "@/src/util/instance";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
-// import { setAxiosHeader } from "@/src/util/setAxiosToken";
 
 interface FormValue {
   email: string;
@@ -19,14 +18,13 @@ interface FormValue {
 }
 
 const Signup: React.FC = () => {
-  // if (localStorage.getItem("accessToken")) Router.push("/folder");
+  if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
   const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
     useState<boolean>(false);
 
-  const postCheckAccount = (data: FormValue) =>
-    axiosInstance.post("sign-up", data);
+  const postCheckAccount = (data: FormValue) => instance.post("sign-up", data);
   const { wrappedFunction: postSignup } = useAsync<any>(postCheckAccount);
 
   const {
diff --git a/src/hooks/useGetFolder.ts b/src/hooks/useGetFolder.ts
index 4ebdde9f5e..1ed55a62ff 100644
--- a/src/hooks/useGetFolder.ts
+++ b/src/hooks/useGetFolder.ts
@@ -1,7 +1,7 @@
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 
 export const useGetFolder = async () => {
-  const response = await axiosInstance.get("users/1/folders");
+  const response = await instance.get("users/1/folders");
   const data = response.data?.data;
 
   return data;
diff --git a/src/hooks/useGetFolderInfo.ts b/src/hooks/useGetFolderInfo.ts
index 73f47993bb..0919cf2f62 100644
--- a/src/hooks/useGetFolderInfo.ts
+++ b/src/hooks/useGetFolderInfo.ts
@@ -1,8 +1,8 @@
 import { mapFolderData } from "../util/mapFolderData";
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 
 export const useGetFolderInfo = async () => {
-  const response = await axiosInstance.get("sample/folder");
+  const response = await instance.get("sample/folder");
   const data = mapFolderData(response.data?.folder);
   return data;
 };
diff --git a/src/hooks/useGetLink.ts b/src/hooks/useGetLink.ts
index aa4b243a4f..e968d34b39 100644
--- a/src/hooks/useGetLink.ts
+++ b/src/hooks/useGetLink.ts
@@ -1,9 +1,9 @@
 import { mapFolderFromLink } from "../util/mapFolderFromLink";
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 
 export const useGetLinks = async (folderId: number = 0) => {
   const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await axiosInstance.get(`links${folderQuery}`);
+  const response = await instance.get(`links${folderQuery}`);
   const data = mapFolderFromLink(response.data?.data.folder);
 
   return data;
diff --git a/src/hooks/useGetLinksByFolderId.ts b/src/hooks/useGetLinksByFolderId.ts
index 54c96ac1e2..c888002e65 100644
--- a/src/hooks/useGetLinksByFolderId.ts
+++ b/src/hooks/useGetLinksByFolderId.ts
@@ -1,9 +1,12 @@
 import { mapFolderFromLink } from "../util/mapFolderFromLink";
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 
-export const useGetLinksByFolderId = async (userId: number, folderId?: number) => {
+export const useGetLinksByFolderId = async (
+  userId: number,
+  folderId?: number,
+) => {
   const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await axiosInstance.get(`users/${userId}/links${folderQuery}`);
+  const response = await instance.get(`users/${userId}/links${folderQuery}`);
   const data = mapFolderFromLink(response.data?.data);
 
   return data;
diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
index 6f5b87e5ec..c3537b794f 100644
--- a/src/hooks/useGetUser.ts
+++ b/src/hooks/useGetUser.ts
@@ -1,8 +1,8 @@
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 import { DEFAULT_PROFILE } from "../util/constant";
 
 export const useGetUser = async () => {
-  const response = await axiosInstance.get("users");
+  const response = await instance.get("users");
   const data = response.data ? response.data?.data[0] : null;
   const userData = data
     ? {
diff --git a/src/ui/CreateEmailInput.tsx b/src/ui/CreateEmailInput.tsx
index 0701fc64ff..91dad0475d 100644
--- a/src/ui/CreateEmailInput.tsx
+++ b/src/ui/CreateEmailInput.tsx
@@ -1,7 +1,7 @@
 import { UseFormRegister } from "react-hook-form";
 import InputLayout from "./InputLayout";
 import styles from "@/styles/pages/SignPage.module.css";
-import { axiosInstance } from "../util/axiosInstance";
+import instance from "../util/instance";
 import useAsync from "../hooks/useAsync";
 
 interface FormValue {
@@ -15,17 +15,22 @@ interface InputValue {
 }
 
 const CreateEmailInput = ({ register, inputError }: InputValue) => {
-  const postCheckEmail = (emailData: FormValue) => axiosInstance.post("check-email", emailData);
+  const postCheckEmail = (emailData: FormValue) =>
+    instance.post("check-email", emailData);
   const { wrappedFunction: postEmailValidation } = useAsync(postCheckEmail);
 
   return (
     <InputLayout inputError={inputError}>
-      <label htmlFor='email'>이메일</label>
+      <label htmlFor="email">이메일</label>
       <input
-        id='email'
-        type='email'
-        placeholder='이메일을 입력해주세요'
-        className={!inputError ? styles.inputStyles : `${styles.inputStyles} ${styles.inputError}`}
+        id="email"
+        type="email"
+        placeholder="이메일을 입력해주세요"
+        className={
+          !inputError
+            ? styles.inputStyles
+            : `${styles.inputStyles} ${styles.inputError}`
+        }
         {...register("email", {
           required: "이메일을 입력해주세요",
           pattern: {
diff --git a/src/ui/InputLayout.tsx b/src/ui/InputLayout.tsx
index 98e7b9943f..6b3db5c019 100644
--- a/src/ui/InputLayout.tsx
+++ b/src/ui/InputLayout.tsx
@@ -9,7 +9,12 @@ interface Prop {
   handleEyeconClick?: any;
 }
 
-const InputLayout = ({ isEyeOpen, inputError, handleEyeconClick, children }: Prop) => {
+const InputLayout = ({
+  isEyeOpen,
+  inputError,
+  handleEyeconClick,
+  children,
+}: Prop) => {
   const eyecon = isEyeOpen ? "/assets/eye-on.svg" : "/assets/eye-off.svg";
 
   return (
@@ -17,8 +22,14 @@ const InputLayout = ({ isEyeOpen, inputError, handleEyeconClick, children }: Pro
       <div className={styles.InputWrapper}>
         {children}
         {isEyeOpen !== undefined && (
-          <button onClick={handleEyeconClick}>
-            <Image width={24} height={16} src={eyecon} alt='눈 아이콘' className={styles.eyecon} />
+          <button onClick={handleEyeconClick} type="button">
+            <Image
+              width={24}
+              height={16}
+              src={eyecon}
+              alt="눈 아이콘"
+              className={styles.eyecon}
+            />
           </button>
         )}
       </div>
diff --git a/src/util/axiosInstance.ts b/src/util/axiosInstance.ts
deleted file mode 100644
index c60b4f16c2..0000000000
--- a/src/util/axiosInstance.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import axios, { AxiosInstance } from "axios";
-
-export const axiosInstance: AxiosInstance = axios.create({
-  baseURL: "https://bootcamp-api.codeit.kr/api/",
-});
-if (typeof window !== "undefined") {
-  const token = localStorage.getItem("accessToken");
-  axiosInstance.interceptors.request.use((config) => {
-    config.headers.Authorization = `Bearer ${token}`;
-    return config;
-  });
-}
diff --git a/src/util/instance.ts b/src/util/instance.ts
new file mode 100644
index 0000000000..5b9ade441d
--- /dev/null
+++ b/src/util/instance.ts
@@ -0,0 +1,20 @@
+import axios, { AxiosInstance } from "axios";
+
+const instance: AxiosInstance = axios.create({
+  baseURL: "https://bootcamp-api.codeit.kr/api/",
+});
+
+const getToken = () => {
+  if (typeof window !== undefined) {
+    const token = window.localStorage.getItem("accessToken");
+    return token;
+  }
+  return "";
+};
+
+instance.interceptors.request.use((config) => {
+  config.headers.Authorization = `Bearer ${getToken()}`;
+  return config;
+});
+
+export default instance;

From eae3fa9367069e6f4a09ef0fee672f8168bc3e2f Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 17:57:00 +0900
Subject: [PATCH 09/19] =?UTF-8?q?=E2=9E=95=20Add=20react=20query=20library?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add react query library for server state management
---
 package-lock.json | 51 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  2 ++
 pages/_app.tsx    | 11 +++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 527d88320c..fd53d6c579 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "name": "fe-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
+        "@tanstack/react-query": "^5.35.1",
+        "@tanstack/react-query-devtools": "^5.35.1",
         "@types/react-copy-to-clipboard": "^5.0.7",
         "axios": "^1.6.8",
         "date-fns": "^3.6.0",
@@ -334,6 +336,55 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.35.1.tgz",
+      "integrity": "sha512-0Dnpybqb8+ps6WgqBnqFEC+1F/xLvUosRAq+wiGisTgolOZzqZfkE2995dEXmhuzINiTM7/a6xSGznU0NIvBkw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.32.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.32.1.tgz",
+      "integrity": "sha512-7Xq57Ctopiy/4atpb0uNY5VRuCqRS/1fi/WBCKKX6jHMa6cCgDuV/AQuiwRXcKARbq2OkVAOrW2v4xK9nTbcCA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.35.1.tgz",
+      "integrity": "sha512-i2T7m2ffQdNqlX3pO+uMsnQ0H4a59Ens2GxtlMsRiOvdSB4SfYmHb27MnvFV8rGmtWRaa4gPli0/rpDoSS5LbQ==",
+      "dependencies": {
+        "@tanstack/query-core": "5.35.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.35.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.35.1.tgz",
+      "integrity": "sha512-G2TP8ekCo+C9IPdEswKB9mqG5pxV+DWq86lmNw/VbUpdyNwNFvKi7GdcqW1pLDi5al+zifSjGSO7QZ7zDMJcQg==",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.32.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.35.1",
+        "react": "^18.0.0"
+      }
+    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
diff --git a/package.json b/package.json
index a22a8b4ab2..edd1592065 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.35.1",
+    "@tanstack/react-query-devtools": "^5.35.1",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "axios": "^1.6.8",
     "date-fns": "^3.6.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 51241fb190..06e3c50d97 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,6 +1,15 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "@/styles/global.css";
 import type { AppProps } from "next/app";
 
+const queryClient = new QueryClient();
+
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Component {...pageProps} />
+      <ReactQueryDevtools initialIsOpen />
+    </QueryClientProvider>
+  );
 }

From 0f82aeb7a7f4388b47954f3a8f54e712def0af9c Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 19:36:25 +0900
Subject: [PATCH 10/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Separate=20api=20fin?=
 =?UTF-8?q?ctions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Separate api functions for refactor convenience
---
 pages/_app.tsx                   |  2 +-
 pages/api/NavBarApi.ts           | 16 ++++++++++++++++
 pages/api/folderPage.ts          | 13 +++++++++++++
 pages/api/hello.ts               | 10 ----------
 pages/api/sharedPage.ts          | 22 ++++++++++++++++++++++
 pages/api/signinPage.ts          | 14 ++++++++++++++
 pages/folder/[[...id]].tsx       | 11 ++++++-----
 pages/shared/[[...folderId]].tsx | 21 +++++++++++----------
 pages/signin.tsx                 | 16 ++++++++--------
 pages/signup.tsx                 | 17 +++++++++--------
 src/feature/Layout.tsx           |  7 ++++---
 11 files changed, 104 insertions(+), 45 deletions(-)
 create mode 100644 pages/api/NavBarApi.ts
 create mode 100644 pages/api/folderPage.ts
 delete mode 100644 pages/api/hello.ts
 create mode 100644 pages/api/sharedPage.ts
 create mode 100644 pages/api/signinPage.ts

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 06e3c50d97..0500b0f5fe 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,7 +9,7 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <Component {...pageProps} />
-      <ReactQueryDevtools initialIsOpen />
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
 }
diff --git a/pages/api/NavBarApi.ts b/pages/api/NavBarApi.ts
new file mode 100644
index 0000000000..d5453a2422
--- /dev/null
+++ b/pages/api/NavBarApi.ts
@@ -0,0 +1,16 @@
+import { DEFAULT_PROFILE } from "@/src/util/constant";
+import instance from "@/src/util/instance";
+
+export const getUser = async () => {
+  const response = await instance.get("users");
+  const data = response.data ? response.data?.data[0] : null;
+  const userData = data
+    ? {
+        id: data.id,
+        name: data.name,
+        email: data.email,
+        profileImageSource: data.image_source || DEFAULT_PROFILE,
+      }
+    : null;
+  return userData;
+};
diff --git a/pages/api/folderPage.ts b/pages/api/folderPage.ts
new file mode 100644
index 0000000000..64e2726fab
--- /dev/null
+++ b/pages/api/folderPage.ts
@@ -0,0 +1,13 @@
+// import { useGetLinks } from "@/src/hooks/useGetLink";
+import instance from "@/src/util/instance";
+import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
+
+export const getFolderData = () => instance.get("folders");
+
+export const getLinks = async (folderId: number = 0) => {
+  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
+  const response = await instance.get(`links${folderQuery}`);
+  const data = mapFolderFromLink(response.data?.data.folder);
+
+  return data;
+};
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
deleted file mode 100644
index a8d68697c6..0000000000
--- a/pages/api/hello.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-
-type Data = {
-  name: string;
-};
-
-export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
-  res.status(200).json({ name: "John Doe" });
-}
diff --git a/pages/api/sharedPage.ts b/pages/api/sharedPage.ts
new file mode 100644
index 0000000000..bf7f051a8d
--- /dev/null
+++ b/pages/api/sharedPage.ts
@@ -0,0 +1,22 @@
+// import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
+// import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
+import instance from "@/src/util/instance";
+import { mapFolderData } from "@/src/util/mapFolderData";
+import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
+
+export const getFolder = async (id: number) => instance.get(`folders/${id}`);
+export const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
+
+export const getLinksByFolderId = async (userId: number, folderId?: number) => {
+  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
+  const response = await instance.get(`users/${userId}/links${folderQuery}`);
+  const data = mapFolderFromLink(response.data?.data);
+
+  return data;
+};
+
+export const getFolderInfo = async () => {
+  const response = await instance.get("sample/folder");
+  const data = mapFolderData(response.data?.folder);
+  return data;
+};
diff --git a/pages/api/signinPage.ts b/pages/api/signinPage.ts
new file mode 100644
index 0000000000..d572d96ae2
--- /dev/null
+++ b/pages/api/signinPage.ts
@@ -0,0 +1,14 @@
+import instance from "@/src/util/instance";
+// import { FormValue } from "../signin";
+
+export interface FormValue {
+  email: string;
+  password: string;
+  passwordConfirm?: string;
+}
+
+export const postUserInfo = (signinData?: FormValue) =>
+  instance.post("sign-in", signinData);
+
+export const postAccountCheck = (data: FormValue) =>
+  instance.post("sign-up", data);
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 174bd8273a..408044182d 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -20,9 +20,10 @@ import {
 import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
-import { useGetLinks } from "@/src/hooks/useGetLink";
-import instance from "@/src/util/instance";
+// import { useGetLinks } from "@/src/hooks/useGetLink";
+// import instance from "@/src/util/instance";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
+import { getFolderData, getLinks } from "../api/folderPage";
 
 interface Folder {
   created_at: string;
@@ -36,8 +37,8 @@ interface Folder {
 const FolderPage: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
-  const getFolderData = () => instance.get("folders");
-  const { wrappedFunction: getLinks } = useAsync<any>(useGetLinks);
+  // const getFolderData = () => instance.get("folders");
+  const { wrappedFunction: getLink } = useAsync<any>(getLinks);
   const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
 
   const [currentCategory, setCurrentCategory] = useState("전체");
@@ -60,7 +61,7 @@ const FolderPage: React.FC = () => {
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
-      getLinks(folderId).then((response) => setLinksData(response?.data));
+      getLink(folderId).then((response) => setLinksData(response?.data));
       getFolderList().then((response) =>
         setFolderData(response?.data?.data.folder),
       );
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index a0b0206243..f0e7141c52 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -9,10 +9,15 @@ import { ChangeEventHandler, useEffect, useState } from "react";
 import Head from "next/head";
 import ErrorPage from "next/error";
 
-import instance from "@/src/util/instance";
+// import instance from "@/src/util/instance";
 import { useRouter } from "next/router";
-import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
-import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
+// import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
+// import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
+import {
+  getFolder,
+  getFolderOwner,
+  getLinksByFolderId,
+} from "../api/sharedPage";
 
 interface FolderData {
   data: {
@@ -61,15 +66,11 @@ const SharedPage = () => {
 
   const router = useRouter();
   const { folderId } = router.query;
-  const getFolder = async (id: number) => instance.get(`folders/${id}`);
-  const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
   const { wrappedFunction: get0FolderInfo } =
-    useAsync<FolderData>(useGetFolderInfo);
-  const { wrappedFunction: getLinksByFolderId } = useAsync(
-    useGetLinksByFolderId,
-  );
+    useAsync<FolderData>(getFolderInfo);
+  const { wrappedFunction: getLinks } = useAsync(getLinksByFolderId);
   const [isError, setIsError] = useState(false);
 
   useEffect(() => {
@@ -79,7 +80,7 @@ const SharedPage = () => {
         const ownerId = result?.data.data[0].user_id;
         if (ownerId) {
           getOwner(ownerId).then((res) => setUserData(res?.data));
-          getLinksByFolderId(ownerId, folderId).then(setLinkData);
+          getLinks(ownerId, folderId).then(setLinkData);
         }
       });
     } else if (folderId === undefined) {
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 5a782b5a64..46f9593c6c 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -7,21 +7,21 @@ import Image from "next/image";
 import EmailInput from "@/src/ui/EmailInput";
 import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-import instance from "@/src/util/instance";
+// import instance from "@/src/util/instance";
 import Router from "next/router";
+import { postUserInfo, FormValue } from "./api/signinPage";
 
-interface FormValue {
-  email: string;
-  password: string;
-}
+// export interface FormValue {
+//   email: string;
+//   password: string;
+// }
 
 const Signin: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
-
-  const postUserInfo = (signinData?: FormValue) =>
-    instance.post("sign-in", signinData);
+  // const postUserInfo = (signinData?: FormValue) =>
+  //   instance.post("sign-in", signinData);
   const { wrappedFunction: postSignin } = useAsync<any>(postUserInfo);
 
   const {
diff --git a/pages/signup.tsx b/pages/signup.tsx
index e471e4746a..da92747312 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -7,15 +7,16 @@ import Image from "next/image";
 import PasswordConfirmInput from "@/src/ui/PasswordConfirmInput";
 import CreatePasswordInput from "@/src/ui/CreatePasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-import instance from "@/src/util/instance";
+// import instance from "@/src/util/instance";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
+import { postAccountCheck, FormValue } from "./api/signinPage";
 
-interface FormValue {
-  email: string;
-  password: string;
-  passwordConfirm?: string;
-}
+// interface FormValue {
+//   email: string;
+//   password: string;
+//   passwordConfirm?: string;
+// }
 
 const Signup: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
@@ -24,8 +25,8 @@ const Signup: React.FC = () => {
   const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
     useState<boolean>(false);
 
-  const postCheckAccount = (data: FormValue) => instance.post("sign-up", data);
-  const { wrappedFunction: postSignup } = useAsync<any>(postCheckAccount);
+  // const postCheckAccount = (data: FormValue) => instance.post("sign-up", data);
+  const { wrappedFunction: postSignup } = useAsync<any>(postAccountCheck);
 
   const {
     register,
diff --git a/src/feature/Layout.tsx b/src/feature/Layout.tsx
index cf0d36b61e..ba470b1add 100644
--- a/src/feature/Layout.tsx
+++ b/src/feature/Layout.tsx
@@ -1,8 +1,9 @@
-import { useGetUser } from "@/src/hooks/useGetUser";
+// import { useGetUser } from "@/src/hooks/useGetUser";
 import Footer from "./Footer/Footer";
 import NavigationBar from "./NavigationBar";
 import { ReactNode, RefObject, useEffect, useState } from "react";
 import useAsync from "../hooks/useAsync";
+import { getUser } from "@/pages/api/NavBarApi";
 
 interface layoutProps {
   children: ReactNode;
@@ -18,13 +19,13 @@ type Data = {
 } | null;
 
 const Layout = ({ children, isNavFixed, footerRef }: layoutProps) => {
-  const { wrappedFunction: getUser } = useAsync<Data>(useGetUser);
+  const { wrappedFunction: getUserData } = useAsync<Data>(getUser);
   const [data, setData] = useState<Data>(null);
   useEffect(() => {
     if (!localStorage.getItem("accessToken")) {
       setData(null);
     } else {
-      getUser().then(setData);
+      getUserData().then(setData);
     }
   }, []);
 

From 99154d58e4963665a3f23dbc539bc222aa480ac4 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 19:44:03 +0900
Subject: [PATCH 11/19] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20Remove=20uneccessery?=
 =?UTF-8?q?=20api=20codes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove uneccessery api codes from separating api codes
---
 pages/api/folderPage.ts            |  1 -
 pages/api/sharedPage.ts            |  2 --
 pages/api/signinPage.ts            |  1 -
 pages/folder/[[...id]].tsx         |  3 ---
 pages/shared/[[...folderId]].tsx   |  3 ---
 pages/signin.tsx                   |  8 --------
 pages/signup.tsx                   |  9 ---------
 src/feature/Layout.tsx             |  1 -
 src/hooks/useGetFolder.ts          |  8 --------
 src/hooks/useGetFolderInfo.ts      |  8 --------
 src/hooks/useGetLink.ts            | 10 ----------
 src/hooks/useGetLinksByFolderId.ts | 13 -------------
 src/hooks/useGetUser.ts            | 16 ----------------
 13 files changed, 83 deletions(-)
 delete mode 100644 src/hooks/useGetFolder.ts
 delete mode 100644 src/hooks/useGetFolderInfo.ts
 delete mode 100644 src/hooks/useGetLink.ts
 delete mode 100644 src/hooks/useGetLinksByFolderId.ts
 delete mode 100644 src/hooks/useGetUser.ts

diff --git a/pages/api/folderPage.ts b/pages/api/folderPage.ts
index 64e2726fab..3831c0b276 100644
--- a/pages/api/folderPage.ts
+++ b/pages/api/folderPage.ts
@@ -1,4 +1,3 @@
-// import { useGetLinks } from "@/src/hooks/useGetLink";
 import instance from "@/src/util/instance";
 import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
 
diff --git a/pages/api/sharedPage.ts b/pages/api/sharedPage.ts
index bf7f051a8d..4d8b3e386b 100644
--- a/pages/api/sharedPage.ts
+++ b/pages/api/sharedPage.ts
@@ -1,5 +1,3 @@
-// import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
-// import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
 import instance from "@/src/util/instance";
 import { mapFolderData } from "@/src/util/mapFolderData";
 import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
diff --git a/pages/api/signinPage.ts b/pages/api/signinPage.ts
index d572d96ae2..153f9daf9a 100644
--- a/pages/api/signinPage.ts
+++ b/pages/api/signinPage.ts
@@ -1,5 +1,4 @@
 import instance from "@/src/util/instance";
-// import { FormValue } from "../signin";
 
 export interface FormValue {
   email: string;
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 408044182d..00b40eed41 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -20,8 +20,6 @@ import {
 import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
-// import { useGetLinks } from "@/src/hooks/useGetLink";
-// import instance from "@/src/util/instance";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
 import { getFolderData, getLinks } from "../api/folderPage";
 
@@ -37,7 +35,6 @@ interface Folder {
 const FolderPage: React.FC = () => {
   const router = useRouter();
   const { id } = router.query;
-  // const getFolderData = () => instance.get("folders");
   const { wrappedFunction: getLink } = useAsync<any>(getLinks);
   const { wrappedFunction: getFolderList } = useAsync<any>(getFolderData);
 
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index f0e7141c52..593a81fe6d 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -9,10 +9,7 @@ import { ChangeEventHandler, useEffect, useState } from "react";
 import Head from "next/head";
 import ErrorPage from "next/error";
 
-// import instance from "@/src/util/instance";
 import { useRouter } from "next/router";
-// import { useGetLinksByFolderId } from "@/src/hooks/useGetLinksByFolderId";
-// import { useGetFolderInfo } from "@/src/hooks/useGetFolderInfo";
 import {
   getFolder,
   getFolderOwner,
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 46f9593c6c..68479fdc44 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -7,21 +7,13 @@ import Image from "next/image";
 import EmailInput from "@/src/ui/EmailInput";
 import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-// import instance from "@/src/util/instance";
 import Router from "next/router";
 import { postUserInfo, FormValue } from "./api/signinPage";
 
-// export interface FormValue {
-//   email: string;
-//   password: string;
-// }
-
 const Signin: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
-  // const postUserInfo = (signinData?: FormValue) =>
-  //   instance.post("sign-in", signinData);
   const { wrappedFunction: postSignin } = useAsync<any>(postUserInfo);
 
   const {
diff --git a/pages/signup.tsx b/pages/signup.tsx
index da92747312..f6b609db64 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -7,25 +7,16 @@ import Image from "next/image";
 import PasswordConfirmInput from "@/src/ui/PasswordConfirmInput";
 import CreatePasswordInput from "@/src/ui/CreatePasswordInput";
 import useAsync from "@/src/hooks/useAsync";
-// import instance from "@/src/util/instance";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
 import { postAccountCheck, FormValue } from "./api/signinPage";
 
-// interface FormValue {
-//   email: string;
-//   password: string;
-//   passwordConfirm?: string;
-// }
-
 const Signup: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
 
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
   const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
     useState<boolean>(false);
-
-  // const postCheckAccount = (data: FormValue) => instance.post("sign-up", data);
   const { wrappedFunction: postSignup } = useAsync<any>(postAccountCheck);
 
   const {
diff --git a/src/feature/Layout.tsx b/src/feature/Layout.tsx
index ba470b1add..bb82f50d88 100644
--- a/src/feature/Layout.tsx
+++ b/src/feature/Layout.tsx
@@ -1,4 +1,3 @@
-// import { useGetUser } from "@/src/hooks/useGetUser";
 import Footer from "./Footer/Footer";
 import NavigationBar from "./NavigationBar";
 import { ReactNode, RefObject, useEffect, useState } from "react";
diff --git a/src/hooks/useGetFolder.ts b/src/hooks/useGetFolder.ts
deleted file mode 100644
index 1ed55a62ff..0000000000
--- a/src/hooks/useGetFolder.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import instance from "../util/instance";
-
-export const useGetFolder = async () => {
-  const response = await instance.get("users/1/folders");
-  const data = response.data?.data;
-
-  return data;
-};
diff --git a/src/hooks/useGetFolderInfo.ts b/src/hooks/useGetFolderInfo.ts
deleted file mode 100644
index 0919cf2f62..0000000000
--- a/src/hooks/useGetFolderInfo.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { mapFolderData } from "../util/mapFolderData";
-import instance from "../util/instance";
-
-export const useGetFolderInfo = async () => {
-  const response = await instance.get("sample/folder");
-  const data = mapFolderData(response.data?.folder);
-  return data;
-};
diff --git a/src/hooks/useGetLink.ts b/src/hooks/useGetLink.ts
deleted file mode 100644
index e968d34b39..0000000000
--- a/src/hooks/useGetLink.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { mapFolderFromLink } from "../util/mapFolderFromLink";
-import instance from "../util/instance";
-
-export const useGetLinks = async (folderId: number = 0) => {
-  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await instance.get(`links${folderQuery}`);
-  const data = mapFolderFromLink(response.data?.data.folder);
-
-  return data;
-};
diff --git a/src/hooks/useGetLinksByFolderId.ts b/src/hooks/useGetLinksByFolderId.ts
deleted file mode 100644
index c888002e65..0000000000
--- a/src/hooks/useGetLinksByFolderId.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { mapFolderFromLink } from "../util/mapFolderFromLink";
-import instance from "../util/instance";
-
-export const useGetLinksByFolderId = async (
-  userId: number,
-  folderId?: number,
-) => {
-  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await instance.get(`users/${userId}/links${folderQuery}`);
-  const data = mapFolderFromLink(response.data?.data);
-
-  return data;
-};
diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
deleted file mode 100644
index c3537b794f..0000000000
--- a/src/hooks/useGetUser.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import instance from "../util/instance";
-import { DEFAULT_PROFILE } from "../util/constant";
-
-export const useGetUser = async () => {
-  const response = await instance.get("users");
-  const data = response.data ? response.data?.data[0] : null;
-  const userData = data
-    ? {
-        id: data.id,
-        name: data.name,
-        email: data.email,
-        profileImageSource: data.image_source || DEFAULT_PROFILE,
-      }
-    : null;
-  return userData;
-};

From f61121d0d3e80e5fc1128341d88fe9e5af25d22e Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Fri, 10 May 2024 20:23:02 +0900
Subject: [PATCH 12/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Change=20api=20addre?=
 =?UTF-8?q?ss=20as=20designated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Change api host url as designated address
---
 pages/api/{folderPage.ts => folderPageApi.ts} |  4 +--
 pages/api/sharedPage.ts                       | 20 --------------
 pages/api/sharedPageApi.ts                    | 26 +++++++++++++++++++
 pages/api/signPageApi.ts                      | 16 ++++++++++++
 pages/api/signinPage.ts                       | 13 ----------
 pages/folder/[[...id]].tsx                    |  2 +-
 pages/shared/[[...folderId]].tsx              | 14 +++++-----
 pages/signin.tsx                              |  2 +-
 pages/signup.tsx                              |  4 +--
 src/ui/CreateEmailInput.tsx                   |  4 +--
 src/util/instance.ts                          |  2 +-
 11 files changed, 58 insertions(+), 49 deletions(-)
 rename pages/api/{folderPage.ts => folderPageApi.ts} (70%)
 delete mode 100644 pages/api/sharedPage.ts
 create mode 100644 pages/api/sharedPageApi.ts
 create mode 100644 pages/api/signPageApi.ts
 delete mode 100644 pages/api/signinPage.ts

diff --git a/pages/api/folderPage.ts b/pages/api/folderPageApi.ts
similarity index 70%
rename from pages/api/folderPage.ts
rename to pages/api/folderPageApi.ts
index 3831c0b276..4947f65407 100644
--- a/pages/api/folderPage.ts
+++ b/pages/api/folderPageApi.ts
@@ -4,8 +4,8 @@ import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
 export const getFolderData = () => instance.get("folders");
 
 export const getLinks = async (folderId: number = 0) => {
-  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await instance.get(`links${folderQuery}`);
+  const folderQuery = folderId === 0 ? "" : `folders/${folderId}/`;
+  const response = await instance.get(`${folderQuery}links`);
   const data = mapFolderFromLink(response.data?.data.folder);
 
   return data;
diff --git a/pages/api/sharedPage.ts b/pages/api/sharedPage.ts
deleted file mode 100644
index 4d8b3e386b..0000000000
--- a/pages/api/sharedPage.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import instance from "@/src/util/instance";
-import { mapFolderData } from "@/src/util/mapFolderData";
-import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
-
-export const getFolder = async (id: number) => instance.get(`folders/${id}`);
-export const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
-
-export const getLinksByFolderId = async (userId: number, folderId?: number) => {
-  const folderQuery = folderId === 0 ? "" : `?folderId=${folderId}`;
-  const response = await instance.get(`users/${userId}/links${folderQuery}`);
-  const data = mapFolderFromLink(response.data?.data);
-
-  return data;
-};
-
-export const getFolderInfo = async () => {
-  const response = await instance.get("sample/folder");
-  const data = mapFolderData(response.data?.folder);
-  return data;
-};
diff --git a/pages/api/sharedPageApi.ts b/pages/api/sharedPageApi.ts
new file mode 100644
index 0000000000..2f4dfa7811
--- /dev/null
+++ b/pages/api/sharedPageApi.ts
@@ -0,0 +1,26 @@
+import instance from "@/src/util/instance";
+import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
+// import { mapFolderData } from "@/src/util/mapFolderData";
+
+export const getFolder = async (id: number) => instance.get(`folders/${id}`);
+export const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
+
+// export const getLinksByFolderId = async ( folderId?: number) => {
+//   const folderQuery = folderId === 0 ? "" : `folders/${folderId}/`;
+//   const response = await instance.get(`${folderQuery}links`);
+//   const data = mapFolderFromLink(response.data?.data);
+
+//   return data;
+// };
+
+export const getLinksByFolderId = async (folderId: number) => {
+  const response = await instance.get(`folders/${folderId}/links`);
+  const data = mapFolderFromLink(response.data?.data);
+  return data;
+};
+
+// export const getFolderInfo = async () => {
+//   const response = await instance.get("sample/folder");
+//   const data = mapFolderData(response.data?.folder);
+//   return data;
+// };
diff --git a/pages/api/signPageApi.ts b/pages/api/signPageApi.ts
new file mode 100644
index 0000000000..218b2871fc
--- /dev/null
+++ b/pages/api/signPageApi.ts
@@ -0,0 +1,16 @@
+import instance from "@/src/util/instance";
+
+export interface FormValue {
+  email: string;
+  password: string;
+  passwordConfirm?: string;
+}
+
+export const postUserInfo = (data?: FormValue) =>
+  instance.post("auth/sign-in", data);
+
+export const postCreateAccount = (data: FormValue) =>
+  instance.post("auth/sign-up", data);
+
+export const postCheckEmail = (emailData: FormValue) =>
+  instance.post("users/check-email", emailData);
diff --git a/pages/api/signinPage.ts b/pages/api/signinPage.ts
deleted file mode 100644
index 153f9daf9a..0000000000
--- a/pages/api/signinPage.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import instance from "@/src/util/instance";
-
-export interface FormValue {
-  email: string;
-  password: string;
-  passwordConfirm?: string;
-}
-
-export const postUserInfo = (signinData?: FormValue) =>
-  instance.post("sign-in", signinData);
-
-export const postAccountCheck = (data: FormValue) =>
-  instance.post("sign-up", data);
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 00b40eed41..09841067e3 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -21,7 +21,7 @@ import Head from "next/head";
 import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
-import { getFolderData, getLinks } from "../api/folderPage";
+import { getFolderData, getLinks } from "../api/folderPageApi";
 
 interface Folder {
   created_at: string;
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index 593a81fe6d..4d010032cc 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -14,7 +14,7 @@ import {
   getFolder,
   getFolderOwner,
   getLinksByFolderId,
-} from "../api/sharedPage";
+} from "../api/sharedPageApi";
 
 interface FolderData {
   data: {
@@ -65,8 +65,8 @@ const SharedPage = () => {
   const { folderId } = router.query;
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
-  const { wrappedFunction: get0FolderInfo } =
-    useAsync<FolderData>(getFolderInfo);
+  // const { wrappedFunction: get0FolderInfo } =
+  //   useAsync<FolderData>(getFolderInfo);
   const { wrappedFunction: getLinks } = useAsync(getLinksByFolderId);
   const [isError, setIsError] = useState(false);
 
@@ -80,9 +80,11 @@ const SharedPage = () => {
           getLinks(ownerId, folderId).then(setLinkData);
         }
       });
-    } else if (folderId === undefined) {
-      get0FolderInfo().then(setFolderData);
-    } else setIsError(true);
+    }
+    // else if (folderId === undefined) {
+    //   get0FolderInfo().then(setFolderData);
+    // }
+    else setIsError(true);
   }, [folderId]);
 
   if (isError) {
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 68479fdc44..4a5988c298 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -8,7 +8,7 @@ import EmailInput from "@/src/ui/EmailInput";
 import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
 import Router from "next/router";
-import { postUserInfo, FormValue } from "./api/signinPage";
+import { postUserInfo, FormValue } from "./api/signPageApi";
 
 const Signin: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
diff --git a/pages/signup.tsx b/pages/signup.tsx
index f6b609db64..cdc96ff966 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -9,7 +9,7 @@ import CreatePasswordInput from "@/src/ui/CreatePasswordInput";
 import useAsync from "@/src/hooks/useAsync";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
-import { postAccountCheck, FormValue } from "./api/signinPage";
+import { postCreateAccount, FormValue } from "./api/signPageApi";
 
 const Signup: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
@@ -17,7 +17,7 @@ const Signup: React.FC = () => {
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
   const [isPasswordConfirmOpen, setIsPasswordConfirmOpen] =
     useState<boolean>(false);
-  const { wrappedFunction: postSignup } = useAsync<any>(postAccountCheck);
+  const { wrappedFunction: postSignup } = useAsync<any>(postCreateAccount);
 
   const {
     register,
diff --git a/src/ui/CreateEmailInput.tsx b/src/ui/CreateEmailInput.tsx
index 91dad0475d..af0faacb72 100644
--- a/src/ui/CreateEmailInput.tsx
+++ b/src/ui/CreateEmailInput.tsx
@@ -1,8 +1,8 @@
 import { UseFormRegister } from "react-hook-form";
 import InputLayout from "./InputLayout";
 import styles from "@/styles/pages/SignPage.module.css";
-import instance from "../util/instance";
 import useAsync from "../hooks/useAsync";
+import { postCheckEmail } from "@/pages/api/signPageApi";
 
 interface FormValue {
   email: string;
@@ -15,8 +15,6 @@ interface InputValue {
 }
 
 const CreateEmailInput = ({ register, inputError }: InputValue) => {
-  const postCheckEmail = (emailData: FormValue) =>
-    instance.post("check-email", emailData);
   const { wrappedFunction: postEmailValidation } = useAsync(postCheckEmail);
 
   return (
diff --git a/src/util/instance.ts b/src/util/instance.ts
index 5b9ade441d..71f45332da 100644
--- a/src/util/instance.ts
+++ b/src/util/instance.ts
@@ -1,7 +1,7 @@
 import axios, { AxiosInstance } from "axios";
 
 const instance: AxiosInstance = axios.create({
-  baseURL: "https://bootcamp-api.codeit.kr/api/",
+  baseURL: "https://bootcamp-api.codeit.kr/api/linkbrary/v1/",
 });
 
 const getToken = () => {

From f03398bbaef803864bc9da274e09527d98843836 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sat, 11 May 2024 16:52:22 +0900
Subject: [PATCH 13/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20api=20cod?=
 =?UTF-8?q?es=20by=20given=20url?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor aoi codes due to api changes
---
 pages/api/NavBarApi.ts              |  5 +++--
 pages/api/folderPageApi.ts          |  9 ++++++---
 {src/util => pages/api}/instance.ts |  2 ++
 pages/api/sharedPageApi.ts          |  2 +-
 pages/api/signPageApi.ts            |  2 +-
 pages/folder/[[...id]].tsx          |  8 +++-----
 src/ui/Modal/AddToMyfolder.tsx      | 12 +++---------
 7 files changed, 19 insertions(+), 21 deletions(-)
 rename {src/util => pages/api}/instance.ts (94%)

diff --git a/pages/api/NavBarApi.ts b/pages/api/NavBarApi.ts
index d5453a2422..ef67a48995 100644
--- a/pages/api/NavBarApi.ts
+++ b/pages/api/NavBarApi.ts
@@ -1,9 +1,9 @@
 import { DEFAULT_PROFILE } from "@/src/util/constant";
-import instance from "@/src/util/instance";
+import instance from "@/pages/api/instance";
 
 export const getUser = async () => {
   const response = await instance.get("users");
-  const data = response.data ? response.data?.data[0] : null;
+  const data = response?.data[0];
   const userData = data
     ? {
         id: data.id,
@@ -12,5 +12,6 @@ export const getUser = async () => {
         profileImageSource: data.image_source || DEFAULT_PROFILE,
       }
     : null;
+
   return userData;
 };
diff --git a/pages/api/folderPageApi.ts b/pages/api/folderPageApi.ts
index 4947f65407..279ca60cb7 100644
--- a/pages/api/folderPageApi.ts
+++ b/pages/api/folderPageApi.ts
@@ -1,12 +1,15 @@
-import instance from "@/src/util/instance";
+import instance from "@/pages/api/instance";
 import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
 
-export const getFolderData = () => instance.get("folders");
+export const getFolderData = async () => {
+  const response = await instance.get("folders");
+  return response;
+};
 
 export const getLinks = async (folderId: number = 0) => {
   const folderQuery = folderId === 0 ? "" : `folders/${folderId}/`;
   const response = await instance.get(`${folderQuery}links`);
-  const data = mapFolderFromLink(response.data?.data.folder);
+  const data = mapFolderFromLink(response.data);
 
   return data;
 };
diff --git a/src/util/instance.ts b/pages/api/instance.ts
similarity index 94%
rename from src/util/instance.ts
rename to pages/api/instance.ts
index 71f45332da..0260ad2244 100644
--- a/src/util/instance.ts
+++ b/pages/api/instance.ts
@@ -7,6 +7,8 @@ const instance: AxiosInstance = axios.create({
 const getToken = () => {
   if (typeof window !== undefined) {
     const token = window.localStorage.getItem("accessToken");
+    // console.log(token);
+
     return token;
   }
   return "";
diff --git a/pages/api/sharedPageApi.ts b/pages/api/sharedPageApi.ts
index 2f4dfa7811..76435985b0 100644
--- a/pages/api/sharedPageApi.ts
+++ b/pages/api/sharedPageApi.ts
@@ -1,4 +1,4 @@
-import instance from "@/src/util/instance";
+import instance from "@/pages/api/instance";
 import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
 // import { mapFolderData } from "@/src/util/mapFolderData";
 
diff --git a/pages/api/signPageApi.ts b/pages/api/signPageApi.ts
index 218b2871fc..4474df5f75 100644
--- a/pages/api/signPageApi.ts
+++ b/pages/api/signPageApi.ts
@@ -1,4 +1,4 @@
-import instance from "@/src/util/instance";
+import instance from "@/pages/api/instance";
 
 export interface FormValue {
   email: string;
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 09841067e3..4e21a79685 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -27,9 +27,8 @@ interface Folder {
   created_at: string;
   favorite: boolean;
   id: number;
-  link: { count: number };
   name: string;
-  user_id: number;
+  link_count: number;
 }
 
 const FolderPage: React.FC = () => {
@@ -46,6 +45,7 @@ const FolderPage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [linksData, setLinksData] = useState<MappedLink[]>([]);
   const [folderData, setFolderData] = useState<Folder[]>([]);
+  // console.log(linksData);
 
   const [isAddLinkShown, setIsAddLinkShown] = useState(true);
   const [isFooterShown, setIsFooterShown] = useState(false);
@@ -59,9 +59,7 @@ const FolderPage: React.FC = () => {
     const accessToken = localStorage.getItem("accessToken");
     if (accessToken) {
       getLink(folderId).then((response) => setLinksData(response?.data));
-      getFolderList().then((response) =>
-        setFolderData(response?.data?.data.folder),
-      );
+      getFolderList().then((response) => setFolderData(response.data));
     } else Router.push("/signin");
   }, [folderId]);
 
diff --git a/src/ui/Modal/AddToMyfolder.tsx b/src/ui/Modal/AddToMyfolder.tsx
index fd4e2aef68..81af2057b9 100644
--- a/src/ui/Modal/AddToMyfolder.tsx
+++ b/src/ui/Modal/AddToMyfolder.tsx
@@ -2,16 +2,10 @@ import styles from "@/styles/ui/Modal.module.css";
 import Image from "next/image";
 import { MouseEventHandler, useState } from "react";
 
-interface Link {
-  count: number;
-  name: string;
-  id: number;
-}
-
 interface Category {
   id: number;
   name: string;
-  link: Link;
+  link_count: number;
 }
 
 function AddToMyFolder({
@@ -21,7 +15,7 @@ function AddToMyFolder({
   currentUrl: string;
   categoryData: Category[];
 }) {
-  const [selectedFolder, setSelectedFolder] = useState<number>();
+  const [selectedFolder, setSelectedFolder] = useState<number>(0);
 
   const handleFolderClick: MouseEventHandler<HTMLDivElement> = (e) => {
     setSelectedFolder(+e.currentTarget.id);
@@ -44,7 +38,7 @@ function AddToMyFolder({
             <span className={styles.folderButtonName}>{link.name}</span>
             <span
               className={styles.folderButtonLinks}
-            >{`${link?.link.count}개 링크`}</span>
+            >{`${link.link_count}개 링크`}</span>
             {selectedFolder === link.id && (
               <Image
                 width={14}

From 89121365d9b55cf0b0c197da0081ffb0cbfadf49 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sat, 11 May 2024 17:13:29 +0900
Subject: [PATCH 14/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20shared=20?=
 =?UTF-8?q?page=20api=20codes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor shared page api codes due to api changes
---
 pages/api/sharedPageApi.ts       | 25 +++------
 pages/shared/[[...folderId]].tsx | 96 ++++++++++++++------------------
 2 files changed, 50 insertions(+), 71 deletions(-)

diff --git a/pages/api/sharedPageApi.ts b/pages/api/sharedPageApi.ts
index 76435985b0..4c9afa68de 100644
--- a/pages/api/sharedPageApi.ts
+++ b/pages/api/sharedPageApi.ts
@@ -1,26 +1,17 @@
 import instance from "@/pages/api/instance";
 import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
-// import { mapFolderData } from "@/src/util/mapFolderData";
 
-export const getFolder = async (id: number) => instance.get(`folders/${id}`);
-export const getFolderOwner = async (id: number) => instance.get(`users/${id}`);
-
-// export const getLinksByFolderId = async ( folderId?: number) => {
-//   const folderQuery = folderId === 0 ? "" : `folders/${folderId}/`;
-//   const response = await instance.get(`${folderQuery}links`);
-//   const data = mapFolderFromLink(response.data?.data);
-
-//   return data;
-// };
+export const getFolder = async (id: number) => {
+  const response = await instance.get(`folders/${id}`);
+  return response.data;
+};
+export const getFolderOwner = async (id: number) => {
+  const response = await instance.get(`users/${id}`);
+  return response.data;
+};
 
 export const getLinksByFolderId = async (folderId: number) => {
   const response = await instance.get(`folders/${folderId}/links`);
   const data = mapFolderFromLink(response.data?.data);
   return data;
 };
-
-// export const getFolderInfo = async () => {
-//   const response = await instance.get("sample/folder");
-//   const data = mapFolderData(response.data?.folder);
-//   return data;
-// };
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index 4d010032cc..811ffd8b5a 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -17,74 +17,62 @@ import {
 } from "../api/sharedPageApi";
 
 interface FolderData {
-  data: {
-    id: number;
-    created_at: string;
-    name: string;
-    user_id: number;
-    favorite: boolean;
-  }[];
+  id: number;
+  created_at: string;
+  name: string;
+  user_id: number;
+  favorite: boolean;
 }
 interface userData {
-  data: {
-    id: number;
-    created_at: string;
-    name: string;
-    image_source: string;
-    email: string;
-    auth_id: string;
-  }[];
+  id: number;
+  created_at: string;
+  name: string;
+  image_source: string;
+  email: string;
+  auth_id: string;
 }
 interface LinkData {
-  data: {
-    id: number;
-    url: string;
-    imageSource: string;
-    title?: string;
-    alt: string;
-    elapsedTime: string;
-    description?: string;
-    createdAt: string;
-    favorite?: boolean;
-  }[];
+  id: number;
+  url: string;
+  imageSource: string;
+  title?: string;
+  alt: string;
+  elapsedTime: string;
+  description?: string;
+  createdAt: string;
+  favorite?: boolean;
 }
 
 const SharedPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const [folderData, setFolderData] = useState<FolderData>({
-    data: [],
-  });
-  const [userData, setUserData] = useState<userData>({
-    data: [],
-  });
-  const [linkData, setLinkData] = useState<LinkData>({
-    data: [],
-  });
+  const [folderData, setFolderData] = useState<FolderData>();
+  const [userData, setUserData] = useState<userData>();
+  const [linkData, setLinkData] = useState<LinkData[]>([]);
 
   const router = useRouter();
   const { folderId } = router.query;
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
-  // const { wrappedFunction: get0FolderInfo } =
-  //   useAsync<FolderData>(getFolderInfo);
   const { wrappedFunction: getLinks } = useAsync(getLinksByFolderId);
   const [isError, setIsError] = useState(false);
 
   useEffect(() => {
     if (folderId?.length === 1) {
-      getFolderInfo(folderId[0]).then((result) => {
-        setFolderData(result?.data);
-        const ownerId = result?.data.data[0].user_id;
-        if (ownerId) {
-          getOwner(ownerId).then((res) => setUserData(res?.data));
-          getLinks(ownerId, folderId).then(setLinkData);
-        }
-      });
-    }
-    // else if (folderId === undefined) {
-    //   get0FolderInfo().then(setFolderData);
-    // }
-    else setIsError(true);
+      getFolderInfo(folderId[0])
+        .then((result) => {
+          setFolderData(result?.[0]);
+          const ownerId = result[0].user_id;
+          if (ownerId) {
+            getOwner(ownerId).then((res) => {
+              setUserData(res?.[0]);
+            });
+            getLinks(ownerId, folderId).then((res) => {
+              setLinkData(res?.data);
+            });
+          }
+        })
+        .catch(() => setIsError(true));
+    } else setIsError(true);
   }, [folderId]);
 
   if (isError) {
@@ -98,7 +86,7 @@ const SharedPage = () => {
     setSearchTerm("");
   };
 
-  const filteredLinks = linkData?.data?.filter(
+  const filteredLinks = linkData.filter(
     (link) =>
       link.alt?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
       link.description
@@ -116,10 +104,10 @@ const SharedPage = () => {
         <div className={styles.SharedPage}>
           <FolderInfo
             profileImage={
-              userData?.data[0]?.image_source || "/assets/profile-default.svg"
+              userData?.image_source || "/assets/profile-default.svg"
             }
-            ownerName={userData?.data[0]?.name}
-            folderName={folderData?.data[0]?.name}
+            ownerName={userData?.name}
+            folderName={folderData?.name}
           />
           <div className={styles.SharedPageItems}>
             <SearchBar

From 18e2f6baf981562b01b442288bb592c1c79c93a1 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sat, 11 May 2024 17:35:35 +0900
Subject: [PATCH 15/19] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20sign-in?=
 =?UTF-8?q?=20&=20sign-up=20page=20api=20codes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactor sign-in, sign-up page api codes due to api changes
---
 pages/api/signPageApi.ts    | 26 ++++++++++++++++++++------
 pages/signin.tsx            |  4 ++--
 pages/signup.tsx            |  4 ++--
 src/ui/CreateEmailInput.tsx |  2 +-
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/pages/api/signPageApi.ts b/pages/api/signPageApi.ts
index 4474df5f75..4634dfe8f3 100644
--- a/pages/api/signPageApi.ts
+++ b/pages/api/signPageApi.ts
@@ -6,11 +6,25 @@ export interface FormValue {
   passwordConfirm?: string;
 }
 
-export const postUserInfo = (data?: FormValue) =>
-  instance.post("auth/sign-in", data);
+export const postUserInfo = async (data?: FormValue) => {
+  const response = await instance.post("auth/sign-in", data);
+  return response;
+};
 
-export const postCreateAccount = (data: FormValue) =>
-  instance.post("auth/sign-up", data);
+export const postCreateAccount = async (data: FormValue) => {
+  const response = await instance.post("auth/sign-up", data);
+  console.log(response);
 
-export const postCheckEmail = (emailData: FormValue) =>
-  instance.post("users/check-email", emailData);
+  return response;
+};
+
+export const postCheckEmail = async (emailData: FormValue) => {
+  try {
+    const response = await instance.post("users/check-email", emailData);
+    return response;
+  } catch (error) {
+    if (error?.response) {
+      return error.response;
+    }
+  }
+};
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 4a5988c298..fa94f0d5e1 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -30,8 +30,8 @@ const Signin: React.FC = () => {
   const onSubmit: SubmitHandler<FormValue> = async (data) => {
     const response = await postSignin(data);
     if (response?.status === 200) {
-      const accessToken = response.data;
-      localStorage.setItem("accessToken", accessToken.data.accessToken);
+      const result = response.data;
+      localStorage.setItem("accessToken", result.accessToken);
       Router.push("/folder");
     } else {
       setError("email", { message: "이메일을 확인해주세요" });
diff --git a/pages/signup.tsx b/pages/signup.tsx
index cdc96ff966..2f823b7ddd 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -40,8 +40,8 @@ const Signup: React.FC = () => {
   const onSubmit: SubmitHandler<FormValue> = async (data) => {
     const response = await postSignup(data);
     if (response?.status === 200) {
-      const accessToken = response.data;
-      localStorage.setItem("accessToken", accessToken.data.accessToken);
+      const result = response.data;
+      localStorage.setItem("accessToken", result.accessToken);
       Router.push("/folder");
     }
   };
diff --git a/src/ui/CreateEmailInput.tsx b/src/ui/CreateEmailInput.tsx
index af0faacb72..b1b94e93e9 100644
--- a/src/ui/CreateEmailInput.tsx
+++ b/src/ui/CreateEmailInput.tsx
@@ -39,7 +39,7 @@ const CreateEmailInput = ({ register, inputError }: InputValue) => {
           validate: {
             check: async (val) => {
               const response = await postEmailValidation({ email: val });
-              if (response?.status !== 200) {
+              if (response.status !== 200) {
                 return "이미 사용 중인 이메일입니다";
               }
             },

From a7e6c1325ae20c10db35255f6ac583641cab246d Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sat, 11 May 2024 17:40:56 +0900
Subject: [PATCH 16/19] =?UTF-8?q?=E2=9A=B0=EF=B8=8F=20Removed=20dead=20cod?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove dead code
---
 pages/api/instance.ts      | 2 --
 pages/folder/[[...id]].tsx | 1 -
 2 files changed, 3 deletions(-)

diff --git a/pages/api/instance.ts b/pages/api/instance.ts
index 0260ad2244..71f45332da 100644
--- a/pages/api/instance.ts
+++ b/pages/api/instance.ts
@@ -7,8 +7,6 @@ const instance: AxiosInstance = axios.create({
 const getToken = () => {
   if (typeof window !== undefined) {
     const token = window.localStorage.getItem("accessToken");
-    // console.log(token);
-
     return token;
   }
   return "";
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 4e21a79685..3f5e18afb9 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -45,7 +45,6 @@ const FolderPage: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [linksData, setLinksData] = useState<MappedLink[]>([]);
   const [folderData, setFolderData] = useState<Folder[]>([]);
-  // console.log(linksData);
 
   const [isAddLinkShown, setIsAddLinkShown] = useState(true);
   const [isFooterShown, setIsFooterShown] = useState(false);

From 99ebf85f9252c83520b9cdc8f273931203aa1fa2 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sun, 12 May 2024 13:32:36 +0900
Subject: [PATCH 17/19] =?UTF-8?q?=F0=9F=8E=A8=20Apply=20react=20query=20to?=
 =?UTF-8?q?=20folder=20&=20shared=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply react query to folder & shared page
---
 pages/api/sharedPageApi.ts       |  2 +-
 pages/folder/[[...id]].tsx       | 19 ++++++----
 pages/shared/[[...folderId]].tsx | 62 +++++++++++++++++++-------------
 3 files changed, 50 insertions(+), 33 deletions(-)

diff --git a/pages/api/sharedPageApi.ts b/pages/api/sharedPageApi.ts
index 4c9afa68de..75db556f4a 100644
--- a/pages/api/sharedPageApi.ts
+++ b/pages/api/sharedPageApi.ts
@@ -3,7 +3,7 @@ import { mapFolderFromLink } from "@/src/util/mapFolderFromLink";
 
 export const getFolder = async (id: number) => {
   const response = await instance.get(`folders/${id}`);
-  return response.data;
+  return response;
 };
 export const getFolderOwner = async (id: number) => {
   const response = await instance.get(`users/${id}`);
diff --git a/pages/folder/[[...id]].tsx b/pages/folder/[[...id]].tsx
index 3f5e18afb9..1e5ac93533 100644
--- a/pages/folder/[[...id]].tsx
+++ b/pages/folder/[[...id]].tsx
@@ -22,6 +22,7 @@ import { MappedLink } from "@/src/util/mapFolderFromLink";
 import Router, { useRouter } from "next/router";
 import useFloatingAddLinkBar from "@/src/hooks/useFloatingAddLinkBar";
 import { getFolderData, getLinks } from "../api/folderPageApi";
+import { useQuery } from "@tanstack/react-query";
 
 interface Folder {
   created_at: string;
@@ -43,24 +44,28 @@ const FolderPage: React.FC = () => {
   const [modal, setModal] = useState("");
   const [currentUrl, setCurrentUrl] = useState("");
   const [searchTerm, setSearchTerm] = useState("");
-  const [linksData, setLinksData] = useState<MappedLink[]>([]);
-  const [folderData, setFolderData] = useState<Folder[]>([]);
 
   const [isAddLinkShown, setIsAddLinkShown] = useState(true);
   const [isFooterShown, setIsFooterShown] = useState(false);
   const [isError, setIsError] = useState(false);
 
+  const { data: linksData } = useQuery<MappedLink[]>({
+    queryKey: ["links", folderId],
+    queryFn: () => getLink(folderId).then((response) => response?.data),
+  });
+  const { data: folderData } = useQuery<Folder[]>({
+    queryKey: ["folderList"],
+    queryFn: () => getFolderList().then((response) => response?.data),
+  });
+
   const addLinkRef = useRef(null);
   const footerRef = useRef(null);
   const isAddLinkFixed = !isAddLinkShown && !isFooterShown;
 
   useEffect(() => {
     const accessToken = localStorage.getItem("accessToken");
-    if (accessToken) {
-      getLink(folderId).then((response) => setLinksData(response?.data));
-      getFolderList().then((response) => setFolderData(response.data));
-    } else Router.push("/signin");
-  }, [folderId]);
+    if (!accessToken) Router.push("/signin");
+  }, []);
 
   useEffect(() => {
     if (!router.isReady) return;
diff --git a/pages/shared/[[...folderId]].tsx b/pages/shared/[[...folderId]].tsx
index 811ffd8b5a..c9900a8b09 100644
--- a/pages/shared/[[...folderId]].tsx
+++ b/pages/shared/[[...folderId]].tsx
@@ -8,6 +8,7 @@ import styles from "@/styles/pages/SharedPage.module.css";
 import { ChangeEventHandler, useEffect, useState } from "react";
 import Head from "next/head";
 import ErrorPage from "next/error";
+import { useQuery } from "@tanstack/react-query";
 
 import { useRouter } from "next/router";
 import {
@@ -23,7 +24,7 @@ interface FolderData {
   user_id: number;
   favorite: boolean;
 }
-interface userData {
+interface UserData {
   id: number;
   created_at: string;
   name: string;
@@ -45,37 +46,48 @@ interface LinkData {
 
 const SharedPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const [folderData, setFolderData] = useState<FolderData>();
-  const [userData, setUserData] = useState<userData>();
-  const [linkData, setLinkData] = useState<LinkData[]>([]);
 
   const router = useRouter();
   const { folderId } = router.query;
   const { wrappedFunction: getFolderInfo } = useAsync(getFolder);
   const { wrappedFunction: getOwner } = useAsync(getFolderOwner);
   const { wrappedFunction: getLinks } = useAsync(getLinksByFolderId);
-  const [isError, setIsError] = useState(false);
 
-  useEffect(() => {
-    if (folderId?.length === 1) {
-      getFolderInfo(folderId[0])
-        .then((result) => {
-          setFolderData(result?.[0]);
-          const ownerId = result[0].user_id;
-          if (ownerId) {
-            getOwner(ownerId).then((res) => {
-              setUserData(res?.[0]);
-            });
-            getLinks(ownerId, folderId).then((res) => {
-              setLinkData(res?.data);
-            });
-          }
-        })
-        .catch(() => setIsError(true));
-    } else setIsError(true);
-  }, [folderId]);
+  const {
+    data: folderData,
+    isError: folderError,
+    isLoading: folderLoading,
+  } = useQuery<FolderData>({
+    queryKey: ["folderData", folderId],
+    queryFn: () =>
+      getFolderInfo(folderId?.[0]).then((response) => {
+        if (response.status !== 200) {
+          throw new Error("Network response was not ok");
+        }
+        return response.data[0];
+      }),
+    enabled: !!folderId?.length,
+  });
 
-  if (isError) {
+  const { data: userData, isError: userError } = useQuery<UserData>({
+    queryKey: ["owner", folderData?.user_id],
+    queryFn: () =>
+      getOwner(folderData?.user_id).then((response) => {
+        return response[0];
+      }),
+    enabled: !!folderData?.user_id && !folderLoading,
+  });
+
+  const { data: linkData, isError: linkError } = useQuery<LinkData[]>({
+    queryKey: ["links", folderData?.user_id, folderId?.[0]],
+    queryFn: () =>
+      getLinks(folderData?.user_id, folderId?.[0]).then((response) => {
+        return response.data || [];
+      }),
+    enabled: !!folderData?.user_id && !folderLoading,
+  });
+
+  if (folderError || userError || linkError) {
     return <ErrorPage statusCode={404} />;
   }
 
@@ -86,7 +98,7 @@ const SharedPage = () => {
     setSearchTerm("");
   };
 
-  const filteredLinks = linkData.filter(
+  const filteredLinks = linkData?.filter(
     (link) =>
       link.alt?.toLowerCase().includes(searchTerm.trim().toLowerCase()) ||
       link.description

From fb98b75cf13faaaddc52539bd462d26a44023274 Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sun, 12 May 2024 14:22:14 +0900
Subject: [PATCH 18/19] =?UTF-8?q?=F0=9F=8E=A8=20Apply=20react=20query=20in?=
 =?UTF-8?q?=20signin,=20signup=20proccess?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply react query in signin, signup proccess
---
 pages/api/signPageApi.ts    | 12 +++---------
 pages/signin.tsx            | 33 +++++++++++++++++++++------------
 pages/signup.tsx            | 25 +++++++++++++++++--------
 src/ui/CreateEmailInput.tsx |  2 +-
 4 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/pages/api/signPageApi.ts b/pages/api/signPageApi.ts
index 4634dfe8f3..3512c7553b 100644
--- a/pages/api/signPageApi.ts
+++ b/pages/api/signPageApi.ts
@@ -6,7 +6,7 @@ export interface FormValue {
   passwordConfirm?: string;
 }
 
-export const postUserInfo = async (data?: FormValue) => {
+export const postUserInfo = async (data: FormValue) => {
   const response = await instance.post("auth/sign-in", data);
   return response;
 };
@@ -19,12 +19,6 @@ export const postCreateAccount = async (data: FormValue) => {
 };
 
 export const postCheckEmail = async (emailData: FormValue) => {
-  try {
-    const response = await instance.post("users/check-email", emailData);
-    return response;
-  } catch (error) {
-    if (error?.response) {
-      return error.response;
-    }
-  }
+  const response = await instance.post("users/check-email", emailData);
+  return response;
 };
diff --git a/pages/signin.tsx b/pages/signin.tsx
index fa94f0d5e1..4dd4e32c06 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -9,13 +9,31 @@ import PasswordInput from "@/src/ui/PasswordInput";
 import useAsync from "@/src/hooks/useAsync";
 import Router from "next/router";
 import { postUserInfo, FormValue } from "./api/signPageApi";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
 
 const Signin: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
-
   const [isPasswordOpen, setIsPasswordOpen] = useState<boolean>(false);
   const { wrappedFunction: postSignin } = useAsync<any>(postUserInfo);
 
+  const signInMutation = useMutation<
+    AxiosResponse<any, any>,
+    Error,
+    FormValue,
+    unknown
+  >({
+    mutationFn: postSignin,
+    onSuccess: (data: any) => {
+      localStorage.setItem("accessToken", data.data.accessToken);
+      Router.push("/folder");
+    },
+    onError: () => {
+      setError("email", { message: "이메일을 확인해주세요" });
+      setError("password", { message: "비밀번호를 확인해주세요" });
+    },
+  });
+
   const {
     register,
     handleSubmit,
@@ -27,17 +45,8 @@ const Signin: React.FC = () => {
     setIsPasswordOpen(!isPasswordOpen);
   };
 
-  const onSubmit: SubmitHandler<FormValue> = async (data) => {
-    const response = await postSignin(data);
-    if (response?.status === 200) {
-      const result = response.data;
-      localStorage.setItem("accessToken", result.accessToken);
-      Router.push("/folder");
-    } else {
-      setError("email", { message: "이메일을 확인해주세요" });
-      setError("password", { message: "비밀번호를 확인해주세요" });
-    }
-  };
+  const onSubmit: SubmitHandler<FormValue> = async (data) =>
+    signInMutation.mutate(data);
 
   return (
     <>
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 2f823b7ddd..73c2814c18 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -10,6 +10,8 @@ import useAsync from "@/src/hooks/useAsync";
 import Router from "next/router";
 import CreateEmailInput from "@/src/ui/CreateEmailInput";
 import { postCreateAccount, FormValue } from "./api/signPageApi";
+import { useMutation } from "@tanstack/react-query";
+import { AxiosResponse } from "axios";
 
 const Signup: React.FC = () => {
   if (localStorage.getItem("accessToken")) Router.push("/folder");
@@ -28,6 +30,19 @@ const Signup: React.FC = () => {
 
   const passwordValue = getValues("password");
 
+  const signUpMutation = useMutation<
+    AxiosResponse<any, any>,
+    Error,
+    FormValue,
+    unknown
+  >({
+    mutationFn: postSignup,
+    onSuccess: (data: any) => {
+      localStorage.setItem("accessToken", data.data.accessToken);
+      Router.push("/folder");
+    },
+  });
+
   const handlePasswordEyeconClick: MouseEventHandler<HTMLImageElement> = () => {
     setIsPasswordOpen(!isPasswordOpen);
   };
@@ -37,14 +52,8 @@ const Signup: React.FC = () => {
     setIsPasswordConfirmOpen(!isPasswordConfirmOpen);
   };
 
-  const onSubmit: SubmitHandler<FormValue> = async (data) => {
-    const response = await postSignup(data);
-    if (response?.status === 200) {
-      const result = response.data;
-      localStorage.setItem("accessToken", result.accessToken);
-      Router.push("/folder");
-    }
-  };
+  const onSubmit: SubmitHandler<FormValue> = async (data) =>
+    signUpMutation.mutate(data);
 
   return (
     <>
diff --git a/src/ui/CreateEmailInput.tsx b/src/ui/CreateEmailInput.tsx
index b1b94e93e9..af0faacb72 100644
--- a/src/ui/CreateEmailInput.tsx
+++ b/src/ui/CreateEmailInput.tsx
@@ -39,7 +39,7 @@ const CreateEmailInput = ({ register, inputError }: InputValue) => {
           validate: {
             check: async (val) => {
               const response = await postEmailValidation({ email: val });
-              if (response.status !== 200) {
+              if (response?.status !== 200) {
                 return "이미 사용 중인 이메일입니다";
               }
             },

From 9fecb25aca764d1cfe4821420d11b37ee2c7454f Mon Sep 17 00:00:00 2001
From: Harry <yjkang1223@naver.com>
Date: Sun, 12 May 2024 17:08:37 +0900
Subject: [PATCH 19/19] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Zoom?=
 =?UTF-8?q?=20query=20tool=20font?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Zoom query tool font size for better view
---
 pages/_app.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 0500b0f5fe..d2b874aa05 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -9,7 +9,9 @@ export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
       <Component {...pageProps} />
-      <ReactQueryDevtools initialIsOpen={false} />
+      <div style={{ fontSize: "24px" }}>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </div>
     </QueryClientProvider>
   );
 }