From 6ac953317d7f79f847092c43d8b27b773dc6a7fb Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Fri, 12 Apr 2024 16:05:35 +0900
Subject: [PATCH 01/14] =?UTF-8?q?Refactor:=20mock=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=EC=9D=98=20id=20=EA=B0=92=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?=EB=B0=8F=20key=20=EA=B0=92=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constants/folderlist_mock_data.ts   | 8 ++++----
 modal/addLinkModal/AddLinkModal.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/constants/folderlist_mock_data.ts b/constants/folderlist_mock_data.ts
index 4a68aeca17..d4f0084083 100644
--- a/constants/folderlist_mock_data.ts
+++ b/constants/folderlist_mock_data.ts
@@ -1,6 +1,6 @@
 export const DATA = [
-  {folderName: '코딩팁', linkCount: 7,},
-  {folderName: '채용 사이트', linkCount: 12,},
-  {folderName: '유용한 글', linkCount: 30,},
-  {folderName: '나만의 장소', linkCount: 3,},
+  {id: 1, folderName: '코딩팁', linkCount: 7,},
+  {id: 2, folderName: '채용 사이트', linkCount: 12,},
+  {id: 3, folderName: '유용한 글', linkCount: 30,},
+  {id: 4, folderName: '나만의 장소', linkCount: 3,},
 ]
\ No newline at end of file
diff --git a/modal/addLinkModal/AddLinkModal.tsx b/modal/addLinkModal/AddLinkModal.tsx
index a26f3a1b57..838a4b3467 100644
--- a/modal/addLinkModal/AddLinkModal.tsx
+++ b/modal/addLinkModal/AddLinkModal.tsx
@@ -28,7 +28,7 @@ function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
             <>
               <button
                 type="button"
-                key={item.folderName}
+                key={item.id}
                 className={clickItem === item.folderName ? styles.folderClicked : styles.folder}
                 onClick={() => handleClick(item.folderName)}
               >

From 51dd2db6e9355affc8843d4917818c7cf96ab536 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Fri, 12 Apr 2024 20:14:15 +0900
Subject: [PATCH 02/14] =?UTF-8?q?Refactor:=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=EC=9D=98=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/folder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/folder.tsx b/pages/folder.tsx
index 5bb6f3a0ef..efac531947 100644
--- a/pages/folder.tsx
+++ b/pages/folder.tsx
@@ -84,7 +84,7 @@ export default function FolderPage() {
     
     if (!data) return;
 
-    const purifiedData = data.map((item: any) => 
+    const purifiedData = data.map((item: any): LinkCardData => 
       (
         {
           url: item.url,

From eb6fd1c7d59597d161c4793872d60387115dd10b Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Fri, 12 Apr 2024 22:48:05 +0900
Subject: [PATCH 03/14] =?UTF-8?q?Refactor:=20'accessToken'=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=ED=99=94=ED=95=B4=EC=84=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/signin.tsx b/pages/signin.tsx
index ae45368533..6bc887c888 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -12,6 +12,8 @@ import kakaoIcon from '@/public/images/Icon_Kakao2.svg';
 import errorMessage from '@/constants/error_messages';
 import { loginAccount } from "@/utils/api";
 
+const ACCESS_TOKEN_KEY = 'accessToken';
+
 export default function SignIn() {
   const [emailErrorMsg, setEmailErrorMsg] = useState('');
   const [pwErrorMsg, setPWErrorMsg] = useState('');
@@ -44,7 +46,7 @@ export default function SignIn() {
 
     if (res.status === 200) {
       const accessToken = data?.accessToken;
-      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
       router.push('/folder')
     }
 
@@ -54,7 +56,7 @@ export default function SignIn() {
 
   useEffect(() => {
   // accessToken이 존재하면 folder로 이동
-  const haveToken = localStorage.getItem('accessToken');
+  const haveToken = localStorage.getItem(ACCESS_TOKEN_KEY);
   if (haveToken) {
     router.push('/folder')
   }

From a7ec8963deaf2b6d0709fc00c12fd70311924f50 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Fri, 12 Apr 2024 22:52:57 +0900
Subject: [PATCH 04/14] =?UTF-8?q?Refactor:=20signin/signup=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=EB=AA=85=20=EA=B5=AC=EC=B2=B4=ED=99=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=94=94=ED=8E=9C=EB=8D=98=EC=8B=9C=20=EB=B0=B0=EC=97=B4=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 constants/signInput_constant.ts |  4 ++--
 pages/signin.tsx                | 16 ++++++++--------
 pages/signup.tsx                |  4 ++--
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/constants/signInput_constant.ts b/constants/signInput_constant.ts
index 26bc8df18c..8ec59fa3ee 100644
--- a/constants/signInput_constant.ts
+++ b/constants/signInput_constant.ts
@@ -1,4 +1,4 @@
-export const SIGNIN = {
+export const SIGN_IN_INIT_INFO = {
   email: {
     id: "email",
     label: '이메일',
@@ -13,7 +13,7 @@ export const SIGNIN = {
   },
 }
 
-export const SIGNUP = {
+export const SIGN_UP_INIT_INFO = {
   email: {
     id: "email",
     label: '이메일',
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 6bc887c888..d4f37895a5 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -1,4 +1,4 @@
-import { SIGNIN } from "@/constants/signInput_constant";
+import { SIGN_IN_INIT_INFO } from "@/constants/signInput_constant";
 import { useRouter } from "next/router";
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { validEmailInput, validPasswordInput } from "@/utils/checkValid";
@@ -20,7 +20,7 @@ export default function SignIn() {
   const [emailInputValue, setEmailInputValue] = useState('');
   const [pwInputValue, setPWInputValue] = useState('');
   const router = useRouter();
-  const { email, password } = SIGNIN;
+  const { email, password } = SIGN_IN_INIT_INFO;
 
   const handleEmailBlur = () => {
     setEmailErrorMsg(validEmailInput(emailInputValue));
@@ -55,12 +55,12 @@ export default function SignIn() {
   }
 
   useEffect(() => {
-  // accessToken이 존재하면 folder로 이동
-  const haveToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-  if (haveToken) {
-    router.push('/folder')
-  }
-  })
+    // accessToken이 존재하면 folder로 이동
+    const haveToken = localStorage.getItem(ACCESS_TOKEN_KEY);
+    if (haveToken) {
+      router.push('/folder')
+    }
+  }, [router]);
 
   return (
     <>
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 49ec9dd482..7b538f68ae 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,4 +1,4 @@
-import { SIGNUP } from "@/constants/signInput_constant";
+import { SIGN_UP_INIT_INFO } from "@/constants/signInput_constant";
 import SignInput from "@/components/SignInput";
 import Image from "next/image";
 import Link from "next/link";
@@ -17,7 +17,7 @@ export default function SignUp() {
   const [emailInputValue, setEmailInputValue] = useState('');
   const [pwInputValue, setPWInputValue] = useState('');
   const [pwCheckInputValue, setPWCheckInputValue] = useState('');
-  const { email, password, pwCheck } = SIGNUP;
+  const { email, password, pwCheck } = SIGN_UP_INIT_INFO;
 
   const handleEmailBlur = () => {
     setEmailErrorMsg(validEmailInput(emailInputValue));

From 670acca1b1c748efb9a873e88e1c35afb747ba4b Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sat, 13 Apr 2024 00:35:53 +0900
Subject: [PATCH 05/14] =?UTF-8?q?Refactor:=20@svgr/webpack=20=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=A0=81=EC=9A=A9?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/AddLinkIcon.tsx     | 21 ---------------------
 components/FolderList.tsx      | 11 +++++------
 components/Footer.tsx          | 16 ++++++++--------
 components/LinkAdd.tsx         |  2 +-
 components/LinkCard.tsx        | 14 ++++++--------
 components/Navbar.tsx          |  6 ++++--
 components/SearchBar.tsx       |  8 ++++----
 components/SearchIconImage.tsx | 20 --------------------
 components/SignInput.tsx       |  7 +++----
 next.config.js                 | 10 +++++++++-
 pages/index.tsx                | 19 ++++++++++---------
 pages/signin.tsx               | 15 ++++++++-------
 pages/signup.tsx               | 15 ++++++---------
 public/images/logo.svg         |  2 +-
 styles/FolderList.module.css   |  2 +-
 styles/Footer.module.css       |  2 +-
 tsconfig.json                  |  1 +
 17 files changed, 68 insertions(+), 103 deletions(-)
 delete mode 100644 components/AddLinkIcon.tsx
 delete mode 100644 components/SearchIconImage.tsx

diff --git a/components/AddLinkIcon.tsx b/components/AddLinkIcon.tsx
deleted file mode 100644
index c1adc724e5..0000000000
--- a/components/AddLinkIcon.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React, { SVGProps } from 'react';
-
-const LinkIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g id="link">
-      <path
-        id="Vector (Stroke)"
-        fillRule="evenodd"
-        clipRule="evenodd" d="M10.6461 2.79223C11.5891 1.88144 12.8521 1.37747 14.1631 1.38886C15.4741 1.40025 16.7282 1.9261 17.6552 2.85314C18.5823 3.78018 19.1081 5.03424 19.1195 6.34523C19.1309 7.65621 18.6269 8.91922 17.7161 9.86223L17.706 9.87256L15.2061 12.3725C14.6992 12.8795 14.0892 13.2717 13.4174 13.5222C12.7457 13.7728 12.0279 13.876 11.3127 13.8248C10.5976 13.7736 9.90182 13.5692 9.27263 13.2254C8.64344 12.8816 8.09553 12.4066 7.66608 11.8325C7.39041 11.4639 7.46569 10.9417 7.83423 10.666C8.20278 10.3903 8.72502 10.4656 9.00069 10.8342C9.28699 11.2169 9.65226 11.5336 10.0717 11.7628C10.4912 11.992 10.955 12.1282 11.4318 12.1624C11.9085 12.1965 12.3871 12.1277 12.8349 11.9607C13.2828 11.7936 13.6894 11.5322 14.0274 11.1942L14.0275 11.1941L16.5221 8.69945C17.1263 8.07131 17.4605 7.23142 17.4529 6.35971C17.4453 5.48572 17.0947 4.64968 16.4767 4.03165C15.8587 3.41362 15.0226 3.06306 14.1486 3.05546C13.2766 3.04789 12.4363 3.38239 11.8081 3.98709L10.3793 5.40761C10.0529 5.7321 9.52523 5.73056 9.20075 5.40417C8.87626 5.07779 8.8778 4.55015 9.20418 4.22567L10.6375 2.80067L10.6461 2.79223Z"
-        fill="#6D6AFE"/>
-      <path
-        id="Vector (Stroke)_2"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6.58312 7.47744C7.25488 7.22685 7.97267 7.12367 8.68781 7.17488C9.40296 7.2261 10.0987 7.43052 10.7279 7.77428C11.3571 8.11803 11.905 8.59309 12.3345 9.16722C12.6101 9.53576 12.5348 10.058 12.1663 10.3337C11.7978 10.6093 11.2755 10.5341 10.9999 10.1655C10.7136 9.78276 10.3483 9.46606 9.92882 9.23689C9.50936 9.00772 9.04552 8.87144 8.56875 8.83729C8.09199 8.80315 7.61346 8.87194 7.16562 9.03899C6.71778 9.20605 6.31111 9.46747 5.97319 9.80551L3.47849 12.3002C2.87429 12.9284 2.54008 13.7683 2.54765 14.64C2.55525 15.514 2.90581 16.35 3.52384 16.968C4.14186 17.5861 4.97791 17.9366 5.85189 17.9442C6.7236 17.9518 7.56349 17.6176 8.19163 17.0134L9.61124 15.5938C9.93667 15.2683 10.4643 15.2683 10.7897 15.5938C11.1152 15.9192 11.1152 16.4469 10.7897 16.7723L9.36475 18.1973L9.35442 18.2074C8.41141 19.1182 7.1484 19.6222 5.83741 19.6108C4.52643 19.5994 3.27237 19.0736 2.34533 18.1465C1.41829 17.2195 0.89244 15.9654 0.881048 14.6544C0.869656 13.3435 1.37363 12.0805 2.28442 11.1374L2.29457 11.1271L4.79446 8.62722C4.79443 8.62725 4.7945 8.62718 4.79446 8.62722C5.30133 8.1202 5.91141 7.728 6.58312 7.47744Z"
-        fill="#6D6AFE"/>
-    </g>
-  </svg>
-)
-
-export default LinkIcon;
diff --git a/components/FolderList.tsx b/components/FolderList.tsx
index 4227e61c77..b38d2a0ed4 100644
--- a/components/FolderList.tsx
+++ b/components/FolderList.tsx
@@ -1,12 +1,11 @@
 import { useState } from "react";
 import { LinkCardData } from "@/types/type";
-import Button from "./Button";
-import styles from "@/styles/FolderList.module.css";
-import plusIcon from "@/public/images/Icon_plus.svg";
 import LinkList from "./LinkList";
-import AddModal from "@/modal/addModal/AddModal";
 import FolderMenu from "./FolderMenu";
-import Image from "next/image";
+import AddModal from "@/modal/addModal/AddModal";
+import PlusIcon from "@/public/images/Icon_plus.svg";
+import Button from "./Button";
+import styles from "@/styles/FolderList.module.css";
 
 const FIRST_SELECTED_FOLDER = "전체";
 
@@ -47,7 +46,7 @@ function FolderList({ keyword, linkData, folderNameList, currentId, folderName,
         </div>
           <button className={styles.addFolderBtn} type="button" onClick={openAddModal}>
             폴더 추가
-            <Image src={plusIcon} alt="plus-Icon" />
+            <PlusIcon className={styles.addFolderBtnImg} />
           </button>
           <AddModal isOpenModal={isAddModalOpen} closeModal={closeAddModal}/>
       </div>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index cb102ee0e7..fcf3b0f48b 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,7 +1,7 @@
-import facebook from '@/public/images/facebook.svg';
-import twitter from '@/public/images/twitter.svg';
-import youtube from '@/public/images/youtube.svg';
-import instagram from '@/public/images/instagram.svg';
+import Facebook from '@/public/images/facebook.svg';
+import Twitter from '@/public/images/twitter.svg';
+import Youtube from '@/public/images/youtube.svg';
+import Instagram from '@/public/images/instagram.svg';
 import styles from '@/styles/Footer.module.css';
 import Link from 'next/link';
 import Image from 'next/image';
@@ -17,16 +17,16 @@ function Footer() {
         </div>
         <div className={styles.snsLinks}>
           <Link href="https://www.facebook.com/" target='_blank' rel='noreferrer'>
-            <Image src={facebook} width={20} height={20} alt="facebook" />
+            <Facebook className={styles.snsLinkImg} />
           </Link>
           <Link href="https://twitter.com/" target='_blank' rel='noreferrer'>
-            <Image src={twitter} width={20} height={20} alt="twitter" />
+            <Twitter className={styles.snsLinkImg} />
           </Link>
           <Link href="https://www.youtube.com/" target='_blank' rel='noreferrer'>
-            <Image src={youtube} width={20} height={20} alt="youtube" />
+            <Youtube className={styles.snsLinkImg} />
           </Link>
           <Link href="https://www.instagram.com/" target='_blank' rel='noreferrer'>
-            <Image src={instagram} width={20} height={20} alt="instagram" />
+            <Instagram className={styles.snsLinkImg} />
           </Link>
         </div>
       </div>
diff --git a/components/LinkAdd.tsx b/components/LinkAdd.tsx
index ff8da034ea..db04047b35 100644
--- a/components/LinkAdd.tsx
+++ b/components/LinkAdd.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import styles from '@/styles/LinkAdd.module.css';
 import AddLinkModal from '@/modal/addLinkModal/AddLinkModal';
-import LinkIcon from './AddLinkIcon';
+import LinkIcon from '@/public/images/Icon_link.svg';
 
 function LinkAdd() {
   const [isAddLinkModalOpen, setIsAddLinkModalOpen] = useState(false);
diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index c89c6b00a2..cadd884f1f 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -2,13 +2,11 @@ import { MouseEvent, useState } from 'react';
 import { LinkCardData } from '@/types/type';
 import formatDate from '@/utils/formatDate';
 import diffTime from '@/utils/diffTime';
-import star from '@/public/images/Icon_star.svg';
-import kebab from '@/public/images/Icon_kebab.svg'
-import noImg from '@/public/images/noImg.svg';
-import styles from '@/styles/LinkCard.module.css';
 import Popover from './Popover';
-import Image from 'next/image';
 import Link from 'next/link';
+import Star from '@/public/images/Icon_star.svg';
+import Kebab from '@/public/images/Icon_kebab.svg'
+import styles from '@/styles/LinkCard.module.css';
 
 
 interface Props {
@@ -26,14 +24,14 @@ function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props)
   return (
     <Link href={url} target='_blank'>
     <div className={styles.card} key={id}>
-      <Image className={styles.star} src={star} alt='star' />
+      <Star className={styles.star} />
       <div
         className={styles.previewImg}
-        style={{ backgroundImage: imageSource ? `url(${imageSource})` : `url(${noImg.src})`}}
+        style={{ backgroundImage: imageSource ? `url(${imageSource})` : `url('/images/noImg.svg')`}}
       />
       <div className={styles.linkContent}>
         <button type='button' className={styles.kebab} onClick={handleClick}>
-          <Image src={kebab} alt='kebab' />
+          <Kebab />
         </button>
         <Popover isOpen={ isOpen } url={url} />
         <p className={styles.updateTime}>{diffTime(createdAt)}</p>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 651e2f09e6..d6e6ade848 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import linkbraryLogo from '@/public/images/logo.svg';
+import LinkbraryLogo from '@/public/images/logo.svg';
 import styles from '@/styles/Navbar.module.css';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -15,7 +15,9 @@ interface Props {
 function NavigationBar({ className, profileData, isLoginStatus }: Props) {
   return (
     <nav className={`${styles.nav} ${styles[className]}`}>
-      <Link href='/'><Image src={linkbraryLogo} width={132} height={24} alt='logo'/></Link>
+      <Link href='/'>
+        <LinkbraryLogo width={133}/>
+      </Link>
       {isLoginStatus ? (
         <div className={styles.account}>
           <Image src={profileData.profileImageSource} width={32} height={32} alt='profile' />
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index cda108a372..65f51449fb 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -1,7 +1,7 @@
 import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
 import styles from '@/styles/SearchBar.module.css';
-import CloseIconImage from './CloseIconImage';
-import SearchIconImage from './SearchIconImage';
+import CloseIcon from '@/public/images/Icon_close.svg';
+import SearchIcon from '@/public/images/Icon_search.svg';
 
 interface Props {
   inputValue: string;
@@ -28,7 +28,7 @@ function SearchBar({ inputValue, searchWord, onChange, onClick, onSubmit }: Prop
       <form className={styles.container} onKeyDown={handleSubmit}>
         <div className={styles.searchBar}>
           <div className={styles.searchIcon}>
-            <SearchIconImage stroke={color}/>
+            <SearchIcon stroke={color}/>
           </div>
           <input
             type="text"
@@ -43,7 +43,7 @@ function SearchBar({ inputValue, searchWord, onChange, onClick, onSubmit }: Prop
               className={styles.closeBtn}
               onClick={onClick}
             >
-              <CloseIconImage fill={closeBtnBackground} stroke={closeBtnIcon}/>
+              <CloseIcon fill={closeBtnBackground} stroke={closeBtnIcon}/>
             </button>
             )
           }
diff --git a/components/SearchIconImage.tsx b/components/SearchIconImage.tsx
deleted file mode 100644
index ec8cc30759..0000000000
--- a/components/SearchIconImage.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { SVGProps } from 'react';
-
-const SearchIconImage = ({ stroke }: SVGProps<SVGSVGElement>) => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M7.84393 13.8363C11.1534 13.8363 13.8363 11.1534 13.8363 7.84393C13.8363 4.53444 11.1534 1.85156 7.84393 1.85156C4.53444 1.85156 1.85156 4.53444 1.85156 7.84393C1.85156 11.1534 4.53444 13.8363 7.84393 13.8363Z"
-      stroke={stroke}
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"/>
-    <path
-      d="M12.0117 12.3232L14.3611 14.6665"
-      stroke={stroke}
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"/>
-  </svg>
-)
-
-export default SearchIconImage;
\ No newline at end of file
diff --git a/components/SignInput.tsx b/components/SignInput.tsx
index e9ec116f93..f1262d5390 100644
--- a/components/SignInput.tsx
+++ b/components/SignInput.tsx
@@ -1,8 +1,7 @@
 import { ChangeEvent, MouseEvent, useState } from 'react';
 import styles from '@/styles/SignInput.module.css';
-import eyeOff from '@/public/images/Icon_eye-off.svg';
-import eyeOn from '@/public/images/Icon_eye-on.svg';
-import Image from 'next/image';
+import EyeOff from '@/public/images/Icon_eye-off.svg';
+import EyeOn from '@/public/images/Icon_eye-on.svg';
 
 interface Props {
   item: {
@@ -36,7 +35,7 @@ function SignInput({ item, onChange, onBlur, errorMsg }: Props) {
           placeholder={item.placeholder}/>
         {item.type === "password" &&
           <button className={styles.pwHiddenBtn} type="button" onClick={handleClick}>
-            <Image src={isHidden === "password" ? eyeOff : eyeOn} alt="eye-btn" />
+            {isHidden === "password" ? <EyeOff /> : <EyeOn />}
           </button>
         }
         {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
diff --git a/next.config.js b/next.config.js
index f341217b52..f9102f28a2 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,6 +1,14 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  webpack: config => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
   images: {
     dangerouslyAllowSVG: true,
     remotePatterns: [
@@ -17,4 +25,4 @@ const nextConfig = {
   },
 }
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/pages/index.tsx b/pages/index.tsx
index e67808b07e..dc6623bc0a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,13 +1,10 @@
+/* eslint-disable @next/next/no-img-element */
 import Footer from "@/components/Footer";
 import NavigationBar from "@/components/Navbar";
 import Image from "next/image";
 import Link from "next/link";
 import styles from "@/styles/Home.module.css";
 import headerImg from "@/public/images/main_header_img.png";
-import saveImg from "@/public/images/example_img1.svg";
-import manageImg from "@/public/images/example_img2.svg";
-import shareImg from "@/public/images/example_img3.svg";
-import searchImg from "@/public/images/example_img4.svg";
 
 const INITIAL_VALUE = {
   email: '',
@@ -23,7 +20,11 @@ export default function Home() {
             <span className={`${styles.headlineKeyword} ${styles.accent}`}>세상의 모든 정보</span>를
             쉽게 저장하고 관리해 보세요
           </h1>
-          <Link className={styles.addLinkTag} href='/'><button className={styles.addLinkButton}>링크 추가하기</button></Link>
+          <Link className={styles.addLinkTag} href='/signup'>
+            <button className={styles.addLinkButton}>
+              링크 추가하기
+            </button>
+          </Link>
           <Image src={headerImg} alt="linkbrary-header-image" />
         </header>
 
@@ -38,7 +39,7 @@ export default function Home() {
             사고 싶은 옷, 기억하고 싶은 모든 것을
             한 공간에 저장하세요
           </p>
-          <Image src={saveImg} alt="linkbrary-header-image" />
+          <img src='/images/example_img1.svg' alt="linkbrary-header-image" />
         </div>
 
         <div className={styles.options}>
@@ -50,7 +51,7 @@ export default function Home() {
             나만의 폴더를 무제한으로 만들고
             다양하게 활용할 수 있습니다.
           </p>
-          <Image src={manageImg} alt="linkbrary-header-image" />
+          <img src='/images/example_img2.svg' alt="linkbrary-header-image" />
         </div>
 
         <div className={styles.options}>
@@ -63,7 +64,7 @@ export default function Home() {
             가족, 친구, 동료들에게 쉽고 빠르게 링크를 
             공유해 보세요.
           </p>
-          <Image src={shareImg} alt="linkbrary-header-image" />
+          <img src='/images/example_img3.svg' alt="linkbrary-header-image" />
         </div>
 
         <div className={styles.options}>
@@ -74,7 +75,7 @@ export default function Home() {
           <p className={styles.optionDescribe}>
             중요한 정보들을 검색으로 쉽게 찾아보세요.
           </p>
-          <Image src={searchImg} alt="linkbrary-header-image" />
+          <img src='/images/example_img4.svg' alt="linkbrary-header-image" />
         </div>
         </section>
       <Footer />
diff --git a/pages/signin.tsx b/pages/signin.tsx
index d4f37895a5..91c838bf75 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -1,16 +1,16 @@
-import { SIGN_IN_INIT_INFO } from "@/constants/signInput_constant";
-import { useRouter } from "next/router";
 import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
 import { validEmailInput, validPasswordInput } from "@/utils/checkValid";
+import { SIGN_IN_INIT_INFO } from "@/constants/signInput_constant";
+import { loginAccount } from "@/utils/api";
+import { useRouter } from "next/router";
 import SignInput from "@/components/SignInput";
 import Image from "next/image";
 import Link from "next/link";
 import styles from '@/styles/SignPage.module.css';
-import linkbraryLogo from '@/public/images/logo.svg';
+import LinkbraryLogo from '@/public/images/logo.svg';
 import googleIcon from '@/public/images/Icon_Google.svg';
 import kakaoIcon from '@/public/images/Icon_Kakao2.svg';
 import errorMessage from '@/constants/error_messages';
-import { loginAccount } from "@/utils/api";
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 
@@ -60,13 +60,14 @@ export default function SignIn() {
     if (haveToken) {
       router.push('/folder')
     }
+    return;
   }, [router]);
 
   return (
     <>
     <div className={styles.content}>
       <Link href='/' className={styles.logoImg}>
-        <Image src={linkbraryLogo} width={210} alt="LinkbraryLogo" />
+        <LinkbraryLogo width={210}/>
       </Link>
       <div className={styles.toSignIn}>
         회원이 아니신가요?
@@ -80,10 +81,10 @@ export default function SignIn() {
           소셜로그인
           <div className={styles.snsLinkButtons}>
             <Link href="https://www.google.com/" target='_blank'>
-              <Image src={googleIcon} alt="google" />
+              <img src="/images/Icon_Google.svg" alt="google" />
             </Link>
             <Link href="https://www.kakaocorp.com/page/" target='_blank'>
-              <Image src={kakaoIcon} alt="kakao" />
+              <img src="/images/Icon_Kakao2.svg" alt="kakao" />
             </Link>
           </div>
         </div>
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 7b538f68ae..d21648f6ad 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,13 +1,10 @@
+import { validEmailInput, validPWCheckInput, validPasswordInput } from "@/utils/checkValid";
 import { SIGN_UP_INIT_INFO } from "@/constants/signInput_constant";
+import { ChangeEvent, useState } from "react";
 import SignInput from "@/components/SignInput";
-import Image from "next/image";
 import Link from "next/link";
 import styles from '@/styles/SignPage.module.css';
-import linkbraryLogo from '@/public/images/logo.svg';
-import googleIcon from '@/public/images/Icon_Google.svg';
-import kakaoIcon from '@/public/images/Icon_Kakao2.svg';
-import { ChangeEvent, useState } from "react";
-import { validEmailInput, validPWCheckInput, validPasswordInput } from "@/utils/checkValid";
+import LinkbraryLogo from '@/public/images/logo.svg';
 
 
 export default function SignUp() {
@@ -38,7 +35,7 @@ export default function SignUp() {
     <>
       <div className={styles.content}>
         <Link href='/' className={styles.logoImg}>
-          <Image src={linkbraryLogo} width={210} alt="LinkbraryLogo" />
+          <LinkbraryLogo width={210} />
         </Link>
         <div className={styles.toSignIn}>
           이미 회원이신가요?
@@ -53,10 +50,10 @@ export default function SignUp() {
             다른 방식으로 가입하기
             <div className={styles.snsLinkButtons}>
               <Link href="https://www.google.com/" target='_blank'>
-                <Image src={googleIcon} alt="google" />
+                <img src='/images/Icon_Google.svg' alt="google" />
               </Link>
               <Link href="https://www.kakaocorp.com/page/" target='_blank'>
-                <Image src={kakaoIcon} alt="kakao" />
+                <img src='/images/Icon_Kakao2.svg' alt="kakao" />
               </Link>
             </div>
           </div>
diff --git a/public/images/logo.svg b/public/images/logo.svg
index 2820220902..bbc2bd69a4 100644
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
@@ -1,4 +1,4 @@
-<svg width="133" height="24" viewBox="0 0 133 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="current" height="auto" viewBox="0 0 133 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.20583 15.7049V0.792232H0V20.2718H14.9638V15.7049H5.20583Z" fill="#6D6AFE"/>
 <path d="M21.6801 20.2718V5.12621H16.4743V20.2718H21.6801ZM21.6801 3.96117V0H16.4743V3.96117H21.6801Z" fill="#6D6AFE"/>
 <path d="M33.1713 4.66019C31.117 4.66019 29.5062 5.42913 28.409 6.71068V5.12621H23.2032V20.2718H28.409V13.4913C28.4557 10.5786 29.7397 9.34369 31.8407 9.34369C33.6382 9.34369 34.3385 10.2524 34.3385 12.4194V20.2718H39.5444V11.5107C39.5444 6.92039 37.8169 4.66019 33.1713 4.66019Z" fill="#6D6AFE"/>
diff --git a/styles/FolderList.module.css b/styles/FolderList.module.css
index 7e2e079e93..194738ea07 100644
--- a/styles/FolderList.module.css
+++ b/styles/FolderList.module.css
@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 
-.addFolderBtn img {
+.addFolderBtnImg {
   margin-left: 4px;
 }
 
diff --git a/styles/Footer.module.css b/styles/Footer.module.css
index 41386b9a04..20241b92e6 100644
--- a/styles/Footer.module.css
+++ b/styles/Footer.module.css
@@ -29,7 +29,7 @@
   text-decoration: none;
 }
 
-.snsLinks img {
+.snsLinkImg {
   margin-left: 8px;
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index 4ae479ba44..8303044712 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,6 +26,7 @@
     "custom.d.ts",
     "**/*.ts",
     "**/*.tsx",
+    "next.config.js",
     "styles",
     "pages",
     "public"

From 63c96b415183ca9d195b5f1c6f77784169c9d2e2 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sat, 13 Apr 2024 00:42:37 +0900
Subject: [PATCH 06/14] =?UTF-8?q?Refactor:=20svgr=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=A0=81=EC=9A=A9=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FolderMenu.tsx    | 12 ++++++------
 styles/FolderMenu.module.css | 15 +--------------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/components/FolderMenu.tsx b/components/FolderMenu.tsx
index d33fc46fc2..9cf2e0c5e8 100644
--- a/components/FolderMenu.tsx
+++ b/components/FolderMenu.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import shareIcon from "@/public/images/Icon_share.svg";
-import editIcon from "@/public/images/Icon_edit.svg";
-import deleteIcon from "@/public/images/Icon_delete.svg";
+import ShareIcon from "@/public/images/Icon_share.svg";
+import EditIcon from "@/public/images/Icon_edit.svg";
+import DeleteIcon from "@/public/images/Icon_delete.svg";
 import DeleteModal from "@/modal/deleteModal/DeleteModal";
 import EditModal from "@/modal/editModal/EditModal";
 import ShareModal from "@/modal/shareModal/ShareModal";
@@ -29,17 +29,17 @@ function FolderMenu({ placeholder }: Props) {
   return (
     <div className={styles.controlBtns}>
       <button className={styles.shareBtn} type="button" onClick={openShareModal}>
-        <Image src={shareIcon} alt="share-Icon" />
+        <ShareIcon className={styles.folderMenuBtnImg} />
         공유
       </button>
       <ShareModal isOpenModal={isShareModalOpen} closeModal={closeShareModal} />
       <button className={styles.editBtn} type="button" onClick={openEditModal}>
-        <Image src={editIcon} alt="edit-Icon" />
+        <EditIcon className={styles.folderMenuBtnImg} />
         이름 변경
       </button>
       <EditModal isOpenModal={isEditModalOpen} closeModal={closeEditModal} placeholder={placeholder}/>
       <button className={styles.deleteBtn} type="button" onClick={openDeleteModal}>
-        <Image src={deleteIcon} alt="delete-Icon" />
+        <DeleteIcon className={styles.folderMenuBtnImg} />
         삭제
       </button>
       <DeleteModal isOpenModal={isDeleteModalOpen} closeModal={closeDeleteModal}/>
diff --git a/styles/FolderMenu.module.css b/styles/FolderMenu.module.css
index bf512d6948..4613b958f3 100644
--- a/styles/FolderMenu.module.css
+++ b/styles/FolderMenu.module.css
@@ -15,25 +15,12 @@
   cursor: pointer;
 }
 
-.shareBtn img {
+.folderMenuBtnImg {
   width: 18px;
   height: 18px;
   margin-right: 4px;
 }
 
-.editBtn img {
-  width: 18px;
-  height: 18px;
-  margin-right: 4px;
-}
-
-.deleteBtn img {
-  width: 18px;
-  height: 18px;
-  margin-right: 4px;
-}
-
-
 /* mobile-size */
 @media (max-width: 767px) {
   .shareBtn, .editBtn, .deleteBtn {

From 169023e183eda9091e669651c08a6e1f846c35df Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sat, 13 Apr 2024 00:52:39 +0900
Subject: [PATCH 07/14] =?UTF-8?q?Refactor:=20svg=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/pages/signin.tsx b/pages/signin.tsx
index 91c838bf75..adb54aefa1 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -4,13 +4,12 @@ import { SIGN_IN_INIT_INFO } from "@/constants/signInput_constant";
 import { loginAccount } from "@/utils/api";
 import { useRouter } from "next/router";
 import SignInput from "@/components/SignInput";
-import Image from "next/image";
+import errorMessage from '@/constants/error_messages';
 import Link from "next/link";
 import styles from '@/styles/SignPage.module.css';
 import LinkbraryLogo from '@/public/images/logo.svg';
-import googleIcon from '@/public/images/Icon_Google.svg';
-import kakaoIcon from '@/public/images/Icon_Kakao2.svg';
-import errorMessage from '@/constants/error_messages';
+import GoogleIcon from '@/public/images/Icon_Google.svg';
+import KakaoIcon from '@/public/images/Icon_Kakao2.svg';
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 
@@ -81,10 +80,10 @@ export default function SignIn() {
           소셜로그인
           <div className={styles.snsLinkButtons}>
             <Link href="https://www.google.com/" target='_blank'>
-              <img src="/images/Icon_Google.svg" alt="google" />
+              <GoogleIcon className={styles.snsLinkButtonImg} />
             </Link>
             <Link href="https://www.kakaocorp.com/page/" target='_blank'>
-              <img src="/images/Icon_Kakao2.svg" alt="kakao" />
+              <KakaoIcon className={styles.snsLinkButtonImg} />
             </Link>
           </div>
         </div>

From 5c720524a958e6aeca488840042cb8b0daa8ac11 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sat, 13 Apr 2024 00:53:30 +0900
Subject: [PATCH 08/14] =?UTF-8?q?Refactor:=20svg=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=ED=99=942?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/signup.tsx              | 6 ++++--
 public/images/Icon_Google.svg | 2 +-
 public/images/Icon_Kakao2.svg | 2 +-
 styles/SignPage.module.css    | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/pages/signup.tsx b/pages/signup.tsx
index d21648f6ad..e1adeb977d 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -5,6 +5,8 @@ import SignInput from "@/components/SignInput";
 import Link from "next/link";
 import styles from '@/styles/SignPage.module.css';
 import LinkbraryLogo from '@/public/images/logo.svg';
+import GoogleIcon from '@/public/images/Icon_Google.svg';
+import KakaoIcon from '@/public/images/Icon_Kakao2.svg';
 
 
 export default function SignUp() {
@@ -50,10 +52,10 @@ export default function SignUp() {
             다른 방식으로 가입하기
             <div className={styles.snsLinkButtons}>
               <Link href="https://www.google.com/" target='_blank'>
-                <img src='/images/Icon_Google.svg' alt="google" />
+                <GoogleIcon className={styles.snsLinkButtonImg} />
               </Link>
               <Link href="https://www.kakaocorp.com/page/" target='_blank'>
-                <img src='/images/Icon_Kakao2.svg' alt="kakao" />
+                <KakaoIcon className={styles.snsLinkButtonImg} />
               </Link>
             </div>
           </div>
diff --git a/public/images/Icon_Google.svg b/public/images/Icon_Google.svg
index 0be07e8b1a..9a42dc4d01 100644
--- a/public/images/Icon_Google.svg
+++ b/public/images/Icon_Google.svg
@@ -1,4 +1,4 @@
-<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="42" height="42" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <circle cx="22" cy="22" r="21" fill="white" stroke="#D3D4DD"/>
 <rect x="11" y="11" width="22" height="22" fill="url(#pattern0_2_8738)"/>
 <defs>
diff --git a/public/images/Icon_Kakao2.svg b/public/images/Icon_Kakao2.svg
index 4aa9f4525a..87617d87e4 100644
--- a/public/images/Icon_Kakao2.svg
+++ b/public/images/Icon_Kakao2.svg
@@ -1,4 +1,4 @@
-<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="42" height="42" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="21" cy="21" r="21" fill="#F5E14B"/>
 <g clip-path="url(#clip0_2_8739)">
 <path d="M17.5012 21.1897H18.9987L18.25 19.0615L17.5012 21.1897Z" fill="#331D1E"/>
diff --git a/styles/SignPage.module.css b/styles/SignPage.module.css
index 626fd4a38a..8b3029a6b6 100644
--- a/styles/SignPage.module.css
+++ b/styles/SignPage.module.css
@@ -49,7 +49,7 @@
   margin: 32px auto;
 }
 
-.snsLinkButtons img{
+.snsLinkButtonImg {
   width: 42px;
   margin-left: 16px;
 }
\ No newline at end of file

From ba7fd469973d6aca5b71cbdb83da460c806abe4e Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 00:06:04 +0900
Subject: [PATCH 09/14] =?UTF-8?q?Feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/signin.tsx | 14 ++++---------
 pages/signup.tsx | 20 +++++++++++++++++--
 utils/api.ts     | 51 +++++++++++++++++++++++++-----------------------
 3 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/pages/signin.tsx b/pages/signin.tsx
index adb54aefa1..35c649689f 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -18,8 +18,8 @@ export default function SignIn() {
   const [pwErrorMsg, setPWErrorMsg] = useState('');
   const [emailInputValue, setEmailInputValue] = useState('');
   const [pwInputValue, setPWInputValue] = useState('');
-  const router = useRouter();
   const { email, password } = SIGN_IN_INIT_INFO;
+  const router = useRouter();
 
   const handleEmailBlur = () => {
     setEmailErrorMsg(validEmailInput(emailInputValue));
@@ -35,16 +35,10 @@ export default function SignIn() {
   const handleSubmit = async(e: KeyboardEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const userInfo = {
-      "email": emailInputValue,
-      "password": pwInputValue,
-    }
-
-    const res = await loginAccount(userInfo);
-    const { data } = await res.json();
+    const res = await loginAccount(emailInputValue, pwInputValue);
 
-    if (res.status === 200) {
-      const accessToken = data?.accessToken;
+    if (res.data) {
+      const accessToken = res.data?.accessToken;
       localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
       router.push('/folder')
     }
diff --git a/pages/signup.tsx b/pages/signup.tsx
index e1adeb977d..793c92808b 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,6 +1,8 @@
 import { validEmailInput, validPWCheckInput, validPasswordInput } from "@/utils/checkValid";
 import { SIGN_UP_INIT_INFO } from "@/constants/signInput_constant";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, KeyboardEvent, useState } from "react";
+import { addNewUser, checkAccount } from "@/utils/api";
+import { useRouter } from "next/router";
 import SignInput from "@/components/SignInput";
 import Link from "next/link";
 import styles from '@/styles/SignPage.module.css';
@@ -8,6 +10,7 @@ import LinkbraryLogo from '@/public/images/logo.svg';
 import GoogleIcon from '@/public/images/Icon_Google.svg';
 import KakaoIcon from '@/public/images/Icon_Kakao2.svg';
 
+const ACCESS_TOKEN_KEY = 'accessToken';
 
 export default function SignUp() {
   const [emailErrorMsg, setEmailErrorMsg] = useState('');
@@ -17,6 +20,7 @@ export default function SignUp() {
   const [pwInputValue, setPWInputValue] = useState('');
   const [pwCheckInputValue, setPWCheckInputValue] = useState('');
   const { email, password, pwCheck } = SIGN_UP_INIT_INFO;
+  const router = useRouter();
 
   const handleEmailBlur = () => {
     setEmailErrorMsg(validEmailInput(emailInputValue));
@@ -33,6 +37,18 @@ export default function SignUp() {
     if(e.target.id === "password-check") setPWCheckInputValue(e.target.value);
   }
 
+  const handleSubmit = async(e: KeyboardEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const { error } = await checkAccount(emailInputValue);
+
+    if (error) return setEmailErrorMsg(error.message);
+    
+    const { data } = await addNewUser(emailInputValue, pwInputValue);
+    const accessToken = data?.accessToken;
+    localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
+    router.push('/folder')
+  }
+
   return (
     <>
       <div className={styles.content}>
@@ -43,7 +59,7 @@ export default function SignUp() {
           이미 회원이신가요?
           <Link href='/signin' className={styles.toSignInLink}>로그인하기</Link>
         </div>
-        <form>
+        <form onSubmit={handleSubmit}>
           <SignInput item={email} onChange={handleChange} onBlur={handleEmailBlur} errorMsg={emailErrorMsg} />
           <SignInput item={password} onChange={handleChange} onBlur={handlePWBlur} errorMsg={pwErrorMsg} />
           <SignInput item={pwCheck} onChange={handleChange} onBlur={handlePWCheckBlur} errorMsg={pwCheckErrorMsg} />
diff --git a/utils/api.ts b/utils/api.ts
index 26c644ee05..0f3c970fce 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -43,21 +43,23 @@ export function getFolderLinksData(id: number|string) {
 }
 
 //로그인 API
-export async function loginAccount(userInfo: any) {
+export async function loginAccount(email: string, password: string) {
   const res = await fetch (`${BASE_URL}/sign-in`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
-    body: JSON.stringify(userInfo),
+    body: JSON.stringify({"email": email, "password": password}),
   });
-  
-  return res;
+
+  const body = await res.json();
+
+  return body;
 }
 
-//회원가입 API
-export async function addNewAccount(email: string, password: string) {
-  const response = await fetch('https://bootcamp-api.codeit.kr/api/check-email', {
+//회원가입 전 이메일 중복체크
+export async function checkAccount(email: string) {
+  const res = await fetch(`${BASE_URL}/check-email`, {
     method: 'POST',
     headers: {
       "Content-Type": "application/json",
@@ -65,21 +67,22 @@ export async function addNewAccount(email: string, password: string) {
     body: JSON.stringify({"email": email}),
   });
 
-  if (response.status === 200) {
-    const newAccount = {
-      "email": email,
-      "password": password,
-    }
-    
-    const response = await fetch('https://bootcamp-api.codeit.kr/api/sign-up', {
-      method: 'POST',
-      headers: {
-      'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(newAccount),
-    });
-    const result = await response.json();
-    const accessToken = result.data?.loginUser.accessToken;
-    localStorage.setItem('accessToken', accessToken);
-  }
+  const body = await res.json();
+
+  return body;
+}
+
+//회원가입 API
+export async function addNewUser(email: string, password: string) {
+  const res = await fetch(`${BASE_URL}/sign-up`, {
+    method: 'POST',
+    headers: {
+    'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({"email": email, "password": password}),
+  });
+
+  const body = await res.json();
+  
+  return body;
 }
\ No newline at end of file

From 4cf5f7f18921a4f12bafc280e0d299c73931a506 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 03:23:01 +0900
Subject: [PATCH 10/14] =?UTF-8?q?Feat:=20shared=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=ED=95=9C=20=EC=9C=A0=EC=A0=80=EC=9D=98=20=EC=A0=95=EB=B3=B4?=
 =?UTF-8?q?=EB=A5=BC=20=EB=B3=B4=EC=97=AC=EC=A4=84=20=EC=88=98=20=EC=9E=88?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20nav/header=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20api=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.tsx |  4 ++--
 components/Navbar.tsx |  4 ++--
 next.config.js        |  4 ++++
 pages/index.tsx       |  2 +-
 pages/shared.tsx      | 39 ++++++++++++++++++++++++++-------------
 utils/api.ts          | 30 ++++++++++++++++++++++++------
 6 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 0dbc5dd490..a82e915fae 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -6,7 +6,7 @@ interface Props {
     name: string,
   };
   folderOwnerData:{
-    profileImageSource: string,
+    image_source: string,
     name: string,
   };
 }
@@ -14,7 +14,7 @@ interface Props {
 function Header({folderData, folderOwnerData}: Props) {
   return (
     <header className={styles.headerItems}>
-      <Image src={folderOwnerData.profileImageSource} width={64} height={64} alt="userProfile" />
+      <Image src={folderOwnerData.image_source} width={64} height={64} alt="userProfile" />
       <div className={styles.username}>{folderOwnerData.name}</div>
       <div className={styles.folderName}>{folderData.name}</div>
     </header>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d6e6ade848..0d7bc6ff3d 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -7,7 +7,7 @@ interface Props {
   className: string;
   profileData: {
     email: string,
-    profileImageSource: string,
+    image_source: string,
   };
   isLoginStatus: boolean;
   }
@@ -20,7 +20,7 @@ function NavigationBar({ className, profileData, isLoginStatus }: Props) {
       </Link>
       {isLoginStatus ? (
         <div className={styles.account}>
-          <Image src={profileData.profileImageSource} width={32} height={32} alt='profile' />
+          <Image src={profileData.image_source} width={32} height={32} alt='profile' />
           <p>{profileData.email}</p>
         </div>
       )
diff --git a/next.config.js b/next.config.js
index f9102f28a2..914f50aa9b 100644
--- a/next.config.js
+++ b/next.config.js
@@ -21,6 +21,10 @@ const nextConfig = {
         hostname: 'codeit-images.codeit.com',
         pathname: '/badges/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+      },
     ],
   },
 }
diff --git a/pages/index.tsx b/pages/index.tsx
index dc6623bc0a..46f097b2e0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ import headerImg from "@/public/images/main_header_img.png";
 
 const INITIAL_VALUE = {
   email: '',
-  profileImageSource: '',
+  image_source: '',
 }
 
 export default function Home() {
diff --git a/pages/shared.tsx b/pages/shared.tsx
index ce380d4f58..8355d19b52 100644
--- a/pages/shared.tsx
+++ b/pages/shared.tsx
@@ -1,6 +1,6 @@
-import { getSampleFolderLinks, getSampleUserInfo } from "@/utils/api";
-import { ChangeEvent, MouseEvent, useEffect, useState } from "react";
-import { Data } from "@/types/type";
+import { getSharedFolderLinks, getSharedFolderOwner, getSharedUserInfo } from "@/utils/api";
+import { ChangeEvent, MouseEvent, useCallback, useEffect, useState } from "react";
+import { LinkCardData } from "@/types/type";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import LinkList from "@/components/LinkList";
@@ -8,23 +8,24 @@ import NavigationBar from "@/components/Navbar";
 import SearchBar from "@/components/SearchBar";
 
 const INITIAL_PROFILE = {
-  profileImageSource: '',
+  image_source: '',
   email: '',
 }
 const INITIAL_FOLDER= {
   name: '',
 }
 const INITIAL_FOLDER_OWNER = {
-  profileImageSource: '',
+  image_source: '',
   name: '',
 }
 
 export default function SharedPage() {
   const [isLoginStatus, setIsLoginStatus] = useState(false);
   const [profileData, setProfileData] = useState(INITIAL_PROFILE);
+  const [userId, setUserId] = useState(0);
   const [folderData, setFolderData] = useState(INITIAL_FOLDER);
   const [folderOwnerData, setFolderOwnerData] = useState(INITIAL_FOLDER_OWNER);
-  const [linkData, setLinkData] = useState<Data[]>([]);
+  const [linkData, setLinkData] = useState<LinkCardData[]>([]);
   const [search, setSearch] = useState('');
   const [searchWord, setSearchWord] = useState('');
 
@@ -42,11 +43,12 @@ export default function SharedPage() {
   };
 
   const getProfileData = async () => {
-    const data  = await getSampleUserInfo();
+    const { data } = await getSharedUserInfo();
     
     if (!data) return;
 
-    setProfileData(data);
+    setProfileData(data[0]);
+    setUserId(data[0].id);
     setIsLoginStatus(true);
   }
 
@@ -54,19 +56,30 @@ export default function SharedPage() {
     getProfileData();
   }, []);
 
-  const getFolderData = async () => {
-    const { folder } = await getSampleFolderLinks();
+  const getFolderOwnerData = useCallback(async () => {
+    const { data } = await getSharedFolderOwner(userId);
+    
+    if (!data[0]) return;
+
+    setFolderOwnerData(data[0]);
+  }, [userId])
+
+  useEffect(() => {
+    getFolderOwnerData();
+  }, [getFolderOwnerData]);
+
+  const getFolderData = useCallback(async () => {
+    const { folder } = await getSharedFolderLinks(userId);
     
     if (!folder) return;
 
     setFolderData(folder);
-    setFolderOwnerData(folder.owner);
     setLinkData(folder.links);
-  }
+  }, [userId])
 
   useEffect(() => {
     getFolderData();
-  }, [])
+  }, [getFolderData])
 
   return (
     <>
diff --git a/utils/api.ts b/utils/api.ts
index 0f3c970fce..338feb9f42 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -1,8 +1,8 @@
 const BASE_URL = 'https://bootcamp-api.codeit.kr/api'
 
-const SHARED_USER_INFO_URL = `${BASE_URL}/sample/user`;
+const SHARED_USER_INFO_URL = `${BASE_URL}/users`;
+const SHARED_DATA_API_URL = `${BASE_URL}/folders/`;
 const FOLDER_USER_INFO_URL = `${BASE_URL}/users/1`;
-const SHARED_DATA_API_URL = `${BASE_URL}/sample/folder`;
 const FOLDER_LIST_API_URL = `${BASE_URL}/users/1/folders`;
 const FOLDER_DATA_API_URL = `${BASE_URL}/users/1/links?folderId=`;
 
@@ -17,13 +17,31 @@ async function getApi(url: string) {
 }
 
 //shared 페이지 유저 데이터 조회
-export function getSampleUserInfo() {
-  return getApi(SHARED_USER_INFO_URL);
+export async function getSharedUserInfo() {
+  const accessToken = localStorage.getItem('accessToken');
+  const response = await fetch(SHARED_USER_INFO_URL, {
+    method: 'GET',
+    headers: {
+      "Authorization": `Bearer ${accessToken}`
+    }
+  });
+
+  if (!response?.ok) {
+    throw new Error("정보를 불러오는데 실패했습니다.")
+  }
+
+  const body = await response.json();
+  return body;
+}
+
+//shared 페이지 폴더 소유자 데이터 조회
+export function getSharedFolderOwner(id: number) {
+  return getApi(`${SHARED_USER_INFO_URL}/${id}`);
 }
 
 //shared 페이지 폴더 데이터 조회
-export function getSampleFolderLinks() {
-  return getApi(SHARED_DATA_API_URL);
+export function getSharedFolderLinks(id: number) {
+  return getApi(SHARED_DATA_API_URL + id);
 }
 
 //folder 페이지 유저 데이터 조회

From 3f36d784d58457c979eb58c01512754e162188db Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 03:30:44 +0900
Subject: [PATCH 11/14] =?UTF-8?q?Refactor:=20=EC=9C=A0=EC=A0=80=EC=9D=98?=
 =?UTF-8?q?=20=ED=94=84=EB=A1=9C=ED=95=84=EC=9D=B4=20=EB=8F=8B=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=84=EB=A1=9D=20css=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Header.tsx    | 8 +++++++-
 styles/Header.module.css | 5 +++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index a82e915fae..e29ab5e854 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -14,7 +14,13 @@ interface Props {
 function Header({folderData, folderOwnerData}: Props) {
   return (
     <header className={styles.headerItems}>
-      <Image src={folderOwnerData.image_source} width={64} height={64} alt="userProfile" />
+      <Image
+        src={folderOwnerData.image_source}
+        className={styles.headerItemImg}
+        width={64}
+        height={64}
+        alt="userProfile"
+      />
       <div className={styles.username}>{folderOwnerData.name}</div>
       <div className={styles.folderName}>{folderData.name}</div>
     </header>
diff --git a/styles/Header.module.css b/styles/Header.module.css
index 05e8620d50..339ff30f8b 100644
--- a/styles/Header.module.css
+++ b/styles/Header.module.css
@@ -7,8 +7,9 @@
   padding: 20px 0 60px;
 }
 
-.headerItems img {
-  width: 64px;
+.headerItemImg {
+  border-radius: 50%;
+  border: 2px solid var(--gray20);
 }
 
 .username {

From e6c26ab35f127285f1b23addb257e44a64ae3f92 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 04:35:12 +0900
Subject: [PATCH 12/14] =?UTF-8?q?Refactor:=20shared=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20url=20path=20=EB=B3=80=EA=B2=BD=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/LinkCard.tsx                     |  8 +++---
 pages/folder.tsx                            | 23 +++---------------
 pages/{shared.tsx => shared/[folderId].tsx} | 27 ++++++++++++++++-----
 types/type.ts                               |  4 +--
 utils/api.ts                                | 10 ++++++--
 5 files changed, 38 insertions(+), 34 deletions(-)
 rename pages/{shared.tsx => shared/[folderId].tsx} (79%)

diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx
index cadd884f1f..3891aa209a 100644
--- a/components/LinkCard.tsx
+++ b/components/LinkCard.tsx
@@ -13,7 +13,7 @@ interface Props {
   item: LinkCardData
 }
 
-function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props) {
+function LinkCard({item: {url, id, image_source, created_at, description}}: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
@@ -27,16 +27,16 @@ function LinkCard({item: {url, id, imageSource, createdAt, description}}: Props)
       <Star className={styles.star} />
       <div
         className={styles.previewImg}
-        style={{ backgroundImage: imageSource ? `url(${imageSource})` : `url('/images/noImg.svg')`}}
+        style={{ backgroundImage: image_source ? `url(${image_source})` : `url('/images/noImg.svg')`}}
       />
       <div className={styles.linkContent}>
         <button type='button' className={styles.kebab} onClick={handleClick}>
           <Kebab />
         </button>
         <Popover isOpen={ isOpen } url={url} />
-        <p className={styles.updateTime}>{diffTime(createdAt)}</p>
+        <p className={styles.updateTime}>{diffTime(created_at)}</p>
         <p className={styles.linkDescription}>{description}</p>
-        <p className={styles.linkCreatedDate}>{formatDate(createdAt)}</p>
+        <p className={styles.linkCreatedDate}>{formatDate(created_at)}</p>
       </div>
     </div>
     </Link>
diff --git a/pages/folder.tsx b/pages/folder.tsx
index efac531947..f1c197d930 100644
--- a/pages/folder.tsx
+++ b/pages/folder.tsx
@@ -9,7 +9,7 @@ import SearchBar from "@/components/SearchBar";
 
 const FIRST_SELECTED_FOLDER = "전체";
 const INITIAL_VALUE = {
-  profileImageSource: '',
+  image_source: '',
   email: '',
 }
 
@@ -32,12 +32,7 @@ export default function FolderPage() {
     
     if (!data[0]) return;
 
-    const purifiedData = {
-        profileImageSource: data[0].image_source,
-        email: data[0].email,
-      }
-
-    setProfileData(purifiedData);
+    setProfileData(data[0]);
     setIsLoginStatus(true);
   }
 
@@ -84,19 +79,7 @@ export default function FolderPage() {
     
     if (!data) return;
 
-    const purifiedData = data.map((item: any): LinkCardData => 
-      (
-        {
-          url: item.url,
-          id: item.id,
-          imageSource: item.image_source,
-          createdAt: item.created_at,
-          description: item.description,
-        }
-      )
-    )
-
-    setLinkData(purifiedData);
+    setLinkData(data);
   }
 
   useEffect(() => {
diff --git a/pages/shared.tsx b/pages/shared/[folderId].tsx
similarity index 79%
rename from pages/shared.tsx
rename to pages/shared/[folderId].tsx
index 8355d19b52..a2bf5b1d2d 100644
--- a/pages/shared.tsx
+++ b/pages/shared/[folderId].tsx
@@ -1,4 +1,4 @@
-import { getSharedFolderLinks, getSharedFolderOwner, getSharedUserInfo } from "@/utils/api";
+import { getSharedFolderInfo, getSharedFolderLinks, getSharedFolderOwner, getSharedUserInfo } from "@/utils/api";
 import { ChangeEvent, MouseEvent, useCallback, useEffect, useState } from "react";
 import { LinkCardData } from "@/types/type";
 import Footer from "@/components/Footer";
@@ -6,6 +6,7 @@ import Header from "@/components/Header";
 import LinkList from "@/components/LinkList";
 import NavigationBar from "@/components/Navbar";
 import SearchBar from "@/components/SearchBar";
+import { useRouter } from "next/router";
 
 const INITIAL_PROFILE = {
   image_source: '',
@@ -28,6 +29,8 @@ export default function SharedPage() {
   const [linkData, setLinkData] = useState<LinkCardData[]>([]);
   const [search, setSearch] = useState('');
   const [searchWord, setSearchWord] = useState('');
+  const router = useRouter();
+  const { folderId } = router.query;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
@@ -69,18 +72,30 @@ export default function SharedPage() {
   }, [getFolderOwnerData]);
 
   const getFolderData = useCallback(async () => {
-    const { folder } = await getSharedFolderLinks(userId);
+    const { data } = await getSharedFolderInfo(folderId);
     
-    if (!folder) return;
+    if (!data[0]) return;
 
-    setFolderData(folder);
-    setLinkData(folder.links);
-  }, [userId])
+    setFolderData(data[0]);
+  }, [folderId])
 
   useEffect(() => {
     getFolderData();
   }, [getFolderData])
 
+  const getFolderLinksData = useCallback(async () => {
+    const { data } = await getSharedFolderLinks(userId, folderId);
+    
+    if (!data) return;
+
+    setFolderData(data);
+    setLinkData(data);
+  }, [userId, folderId])
+
+  useEffect(() => {
+    getFolderLinksData();
+  }, [getFolderLinksData])
+
   return (
     <>
       <NavigationBar className="sharedNav" profileData={profileData} isLoginStatus={isLoginStatus}/>
diff --git a/types/type.ts b/types/type.ts
index 40192387bd..54234febf2 100644
--- a/types/type.ts
+++ b/types/type.ts
@@ -1,8 +1,8 @@
 export interface LinkCardData {
   url: string;
   id: number;
-  imageSource?: string;
-  createdAt: string;
+  image_source?: string;
+  created_at: string;
   description: string;
 }
 
diff --git a/utils/api.ts b/utils/api.ts
index 338feb9f42..e63f30eac0 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -40,8 +40,14 @@ export function getSharedFolderOwner(id: number) {
 }
 
 //shared 페이지 폴더 데이터 조회
-export function getSharedFolderLinks(id: number) {
-  return getApi(SHARED_DATA_API_URL + id);
+export function getSharedFolderInfo(folderId: string | string[] | undefined) {
+  return getApi(SHARED_DATA_API_URL + folderId);
+}
+
+//shared 페이지 폴더의 링크 데이터 조회
+export function getSharedFolderLinks(userId: number, folderId: string | string[] | undefined) {
+  const query = `/${userId}/links?folderId=${folderId}`
+  return getApi(SHARED_USER_INFO_URL + query);
 }
 
 //folder 페이지 유저 데이터 조회

From 9b6c194cf11e763829a5aee9b3d8775352b1739c Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 07:47:36 +0900
Subject: [PATCH 13/14] =?UTF-8?q?Refactor:=20folder=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20url=20path=20=EB=B3=80=EA=B2=BD=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EC=BD=94=EB=93=9C=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/folder/[folderId].tsx            | 124 +++++++++++++++++++++++++
 pages/{folder.tsx => folder/index.tsx} |  35 ++++---
 pages/shared/[folderId].tsx            |   4 +-
 utils/api.ts                           |  59 ++++++++----
 4 files changed, 191 insertions(+), 31 deletions(-)
 create mode 100644 pages/folder/[folderId].tsx
 rename pages/{folder.tsx => folder/index.tsx} (77%)

diff --git a/pages/folder/[folderId].tsx b/pages/folder/[folderId].tsx
new file mode 100644
index 0000000000..dd5576537a
--- /dev/null
+++ b/pages/folder/[folderId].tsx
@@ -0,0 +1,124 @@
+import { getFolderLinksData, getFolderLists, getUserInfo } from "@/utils/api";
+import { ChangeEvent, MouseEvent, useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { LinkCardData } from "@/types/type";
+import FolderList from "@/components/FolderList";
+import Footer from "@/components/Footer";
+import LinkAdd from "@/components/LinkAdd";
+import NavigationBar from "@/components/Navbar";
+import SearchBar from "@/components/SearchBar";
+
+const FIRST_SELECTED_FOLDER = "전체";
+const INITIAL_VALUE = {
+  image_source: '',
+  email: '',
+}
+
+interface SearchData extends LinkCardData {
+  title?: string;
+}
+
+export default function FolderPage() {
+  const [profileData, setProfileData] = useState(INITIAL_VALUE);
+  const [isLoginStatus, setIsLoginStatus] = useState(false);
+  const [folderListData, setFolderListData] = useState<string[]>([]);
+  const [linkData, setLinkData] = useState<SearchData[]>([]);
+  const [currentId, setCurrentId] = useState(0);
+  const [folderName, setFolderName] = useState(FIRST_SELECTED_FOLDER);
+  const [search, setSearch] = useState('');
+  const [searchWord, setSearchWord] = useState('');
+  const router = useRouter();
+  const { folderId } = router.query;
+  
+
+  useEffect(() => {
+    const checkAccessToken = async () => {
+      const accessToken = localStorage.getItem('accessToken');
+      if (!accessToken) await router.push('/signin');
+    };
+  
+    checkAccessToken();
+  }, [router])
+
+  const getProfileData = async () => {
+    const { data }  = await getUserInfo();
+    
+    if (!data[0]) return;
+
+    setProfileData(data[0]);
+    setIsLoginStatus(true);
+  }
+
+  useEffect(() => {
+    getProfileData();
+  }, []);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  }
+
+  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
+    setSearch('');
+    setSearchWord('');
+  }
+
+  const handleSubmit = (searchQuery: string) => {
+    setSearchWord(searchQuery);
+  };
+
+  //button의 id와 이름 가져오는 함수.
+  const handleFolderButtonClick = (id: number, name: string) => {
+    setCurrentId(id);
+    setFolderName(name);
+    if (id === 0) return router.push('/folder');
+    router.push(`/folder/${id}`)
+  }
+
+  //폴더 이름 가져오는 함수.
+  const getFolderData = async () => {
+    const { data } = await getFolderLists();
+    
+    if (!data.folder) return;
+
+    setFolderListData(data.folder);
+  }
+
+  useEffect(() => {
+    getFolderData();
+  }, [])
+
+  //폴더 안에 저장된 링크를 가져오는 함수
+  const getLinkData = useCallback(async (id: string | string[] | undefined) => {
+    const { data } = await getFolderLinksData(id);
+    
+    if (!data) return;
+
+    setLinkData(data);
+  }, [])
+
+  useEffect(() => {
+    getLinkData(folderId);
+  }, [folderId, getLinkData])
+
+  return (
+    <>
+      <NavigationBar className="folderNav" profileData={profileData} isLoginStatus={isLoginStatus}/>
+      <LinkAdd />
+      <SearchBar
+        inputValue={search}
+        searchWord={searchWord}
+        onChange={handleChange}
+        onClick={handleCloseButtonClick}
+        onSubmit={handleSubmit}/>
+      <FolderList
+        keyword={searchWord}
+        linkData={linkData}
+        folderNameList={folderListData}
+        currentId={currentId}
+        folderName={folderName}
+        onFolderButtonClick={handleFolderButtonClick}
+      />
+      <Footer />
+    </>
+  )
+}
\ No newline at end of file
diff --git a/pages/folder.tsx b/pages/folder/index.tsx
similarity index 77%
rename from pages/folder.tsx
rename to pages/folder/index.tsx
index f1c197d930..1a362a930c 100644
--- a/pages/folder.tsx
+++ b/pages/folder/index.tsx
@@ -1,5 +1,6 @@
-import { getFolderLinksData, getFolderLists, getFolderUserInfo } from "@/utils/api";
+import { getAllLinksData, getFolderLists, getUserInfo } from "@/utils/api";
 import { ChangeEvent, MouseEvent, useEffect, useState } from "react";
+import { useRouter } from "next/router";
 import { LinkCardData } from "@/types/type";
 import FolderList from "@/components/FolderList";
 import Footer from "@/components/Footer";
@@ -26,9 +27,19 @@ export default function FolderPage() {
   const [folderName, setFolderName] = useState(FIRST_SELECTED_FOLDER);
   const [search, setSearch] = useState('');
   const [searchWord, setSearchWord] = useState('');
+  const router = useRouter();
+
+  useEffect(() => {
+    const checkAccessToken = async () => {
+      const accessToken = localStorage.getItem('accessToken');
+      if (!accessToken) await router.push('/signin');
+    };
+  
+    checkAccessToken();
+  }, [router])
 
   const getProfileData = async () => {
-    const { data }  = await getFolderUserInfo();
+    const { data }  = await getUserInfo();
     
     if (!data[0]) return;
 
@@ -57,34 +68,34 @@ export default function FolderPage() {
   const handleFolderButtonClick = (id: number, name: string) => {
     setCurrentId(id);
     setFolderName(name);
+    router.push(`/folder/${currentId}`)
   }
 
   //폴더 이름 가져오는 함수.
   const getFolderData = async () => {
     const { data } = await getFolderLists();
     
-    if (!data) return;
+    if (!data.folder) return;
 
-    setFolderListData(data);
+    setFolderListData(data.folder);
   }
 
   useEffect(() => {
     getFolderData();
   }, [])
 
-  //폴더 안에 저장된 링크를 가져오는 함수
-  const getLinkData = async (id: string|number) => {
-    if (id === 0) id = '';
-    const { data } = await getFolderLinksData(id);
+//전체 데이터 불러오는 함수
+  const getLinkDataAll = async () => {
+    const { data } = await getAllLinksData();
     
-    if (!data) return;
+    if (!data.folder) return;
 
-    setLinkData(data);
+    setLinkData(data.folder);
   }
 
   useEffect(() => {
-    getLinkData(currentId);
-  }, [currentId])
+    getLinkDataAll();
+  }, [])
 
   return (
     <>
diff --git a/pages/shared/[folderId].tsx b/pages/shared/[folderId].tsx
index a2bf5b1d2d..6fb8ab66c5 100644
--- a/pages/shared/[folderId].tsx
+++ b/pages/shared/[folderId].tsx
@@ -1,4 +1,4 @@
-import { getSharedFolderInfo, getSharedFolderLinks, getSharedFolderOwner, getSharedUserInfo } from "@/utils/api";
+import { getSharedFolderInfo, getSharedFolderLinks, getSharedFolderOwner, getUserInfo } from "@/utils/api";
 import { ChangeEvent, MouseEvent, useCallback, useEffect, useState } from "react";
 import { LinkCardData } from "@/types/type";
 import Footer from "@/components/Footer";
@@ -46,7 +46,7 @@ export default function SharedPage() {
   };
 
   const getProfileData = async () => {
-    const { data } = await getSharedUserInfo();
+    const { data } = await getUserInfo();
     
     if (!data) return;
 
diff --git a/utils/api.ts b/utils/api.ts
index e63f30eac0..971eb859b6 100644
--- a/utils/api.ts
+++ b/utils/api.ts
@@ -1,9 +1,8 @@
 const BASE_URL = 'https://bootcamp-api.codeit.kr/api'
 
-const SHARED_USER_INFO_URL = `${BASE_URL}/users`;
-const SHARED_DATA_API_URL = `${BASE_URL}/folders/`;
-const FOLDER_USER_INFO_URL = `${BASE_URL}/users/1`;
-const FOLDER_LIST_API_URL = `${BASE_URL}/users/1/folders`;
+const USER_INFO_URL = `${BASE_URL}/users`;
+const SHARED_DATA_API_URL = `${BASE_URL}/folders`;
+const FOLDER_All_DATA_API_URL = `${BASE_URL}/links`;
 const FOLDER_DATA_API_URL = `${BASE_URL}/users/1/links?folderId=`;
 
 async function getApi(url: string) {
@@ -16,10 +15,10 @@ async function getApi(url: string) {
   return body;
 }
 
-//shared 페이지 유저 데이터 조회
-export async function getSharedUserInfo() {
+//페이지 유저 데이터 조회
+export async function getUserInfo() {
   const accessToken = localStorage.getItem('accessToken');
-  const response = await fetch(SHARED_USER_INFO_URL, {
+  const response = await fetch(USER_INFO_URL, {
     method: 'GET',
     headers: {
       "Authorization": `Bearer ${accessToken}`
@@ -36,32 +35,58 @@ export async function getSharedUserInfo() {
 
 //shared 페이지 폴더 소유자 데이터 조회
 export function getSharedFolderOwner(id: number) {
-  return getApi(`${SHARED_USER_INFO_URL}/${id}`);
+  return getApi(`${USER_INFO_URL}/${id}`);
 }
 
 //shared 페이지 폴더 데이터 조회
 export function getSharedFolderInfo(folderId: string | string[] | undefined) {
-  return getApi(SHARED_DATA_API_URL + folderId);
+  return getApi(`${SHARED_DATA_API_URL}/${folderId}`);
 }
 
 //shared 페이지 폴더의 링크 데이터 조회
 export function getSharedFolderLinks(userId: number, folderId: string | string[] | undefined) {
   const query = `/${userId}/links?folderId=${folderId}`
-  return getApi(SHARED_USER_INFO_URL + query);
+  return getApi(USER_INFO_URL + query);
 }
 
-//folder 페이지 유저 데이터 조회
-export function getFolderUserInfo() {
-  return getApi(FOLDER_USER_INFO_URL);
+//folder 페이지 폴더 데이터목록 조회
+export async function getFolderLists() {
+  const accessToken = localStorage.getItem('accessToken');
+  const response = await fetch(SHARED_DATA_API_URL, {
+    method: 'GET',
+    headers: {
+      "Authorization": `Bearer ${accessToken}`
+    }
+  });
+
+  if (!response?.ok) {
+    throw new Error("정보를 불러오는데 실패했습니다.")
+  }
+
+  const body = await response.json();
+  return body;
 }
 
-//folder 페이지 폴더 데이터목록 조회
-export function getFolderLists() {
-  return getApi(FOLDER_LIST_API_URL);
+//folder 페이지 전체 폴더에 저장된 링크 데이터조회
+export async function getAllLinksData() {
+  const accessToken = localStorage.getItem('accessToken');
+  const response = await fetch(FOLDER_All_DATA_API_URL, {
+    method: 'GET',
+    headers: {
+      "Authorization": `Bearer ${accessToken}`
+    }
+  });
+
+  if (!response?.ok) {
+    throw new Error("정보를 불러오는데 실패했습니다.")
+  }
+
+  const body = await response.json();
+  return body;
 }
 
 //folder 페이지 폴더에 저장된 링크 데이터조회
-export function getFolderLinksData(id: number|string) {
+export function getFolderLinksData(id: string | string[] | undefined) {
   const path = FOLDER_DATA_API_URL + id;
   return getApi(path);
 }

From 81c111d2c3ec7214e0072c03b1b0b80b136a1206 Mon Sep 17 00:00:00 2001
From: seoyeon <ysynop7@namver.com>
Date: Sun, 14 Apr 2024 08:01:16 +0900
Subject: [PATCH 14/14] =?UTF-8?q?Refactor:=20svgr=20=EB=9D=BC=EC=9D=B4?=
 =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=A0=81=EC=9A=A9=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=9D=B4=20=EC=95=88=EB=90=9C=20=EB=B6=80=EB=B6=84=20?=
 =?UTF-8?q?=EB=A7=88=EC=A0=80=20=EB=B3=80=EA=B2=BD.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 modal/addLinkModal/AddLinkModal.tsx | 5 +++--
 modal/shareModal/ShareModal.tsx     | 9 +++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/modal/addLinkModal/AddLinkModal.tsx b/modal/addLinkModal/AddLinkModal.tsx
index 838a4b3467..12b8d94aac 100644
--- a/modal/addLinkModal/AddLinkModal.tsx
+++ b/modal/addLinkModal/AddLinkModal.tsx
@@ -5,7 +5,6 @@ import { DATA } from "@/constants/folderList_mock_data";
 import { ModalBaseProps } from "@/types/type";
 import IconCheck from "@/public/images/Icon_check.svg";
 import styles from "./AddLinkModal.module.css";
-import Image from "next/image";
 
 function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
   const [clickItem, setClickItem] = useState('');
@@ -40,7 +39,9 @@ function AddLinkModal({ isOpenModal, closeModal }: ModalBaseProps) {
                   </span>
                   <span className={styles.linkCount}>{item.linkCount}개 링크</span>
                 </div>
-                {clickItem === item.folderName && <Image src={IconCheck} width={14} height={14} alt="Icon-check" />}
+                {clickItem === item.folderName &&
+                  <IconCheck />
+                }
               </button>
             </>
           )
diff --git a/modal/shareModal/ShareModal.tsx b/modal/shareModal/ShareModal.tsx
index afa90f96f7..e855cffec2 100644
--- a/modal/shareModal/ShareModal.tsx
+++ b/modal/shareModal/ShareModal.tsx
@@ -4,9 +4,6 @@ import { useScript } from "@/utils/hooks/useScript";
 import { useEffect, useState } from "react";
 import { FacebookShareButton } from "react-share";
 import ModalLayout from "@/modal/ModalLayout";
-import IconKakao from "@/public/images/Icon_Kakao.svg";
-import IconFacebook from "@/public/images/Icon_Facebook.svg";
-import IconLink from "@/public/images/Icon_link.svg";
 import styles from "./ShareModal.module.css";
 import Image from "next/image";
 
@@ -58,14 +55,14 @@ function ShareModal({ isOpenModal, closeModal }: ModalBaseProps) {
             className={styles.shareKakao}
             type="button"
             onClick={handleKakaoButton}>
-            <Image src={IconKakao} alt={IconKakao} />
+            <Image src='/images/Icon_Kakao.svg' width={18} height={18} alt='IconKakao' />
           </button>
           <p className={styles.linkButtonName}>카카오톡</p>
         </div>
         <FacebookShareButton url={currentUrl}>
           <div className={styles.shareButton}>
             <button className={styles.shareFacebook} type="button">
-              <Image src={IconFacebook} alt={IconFacebook} />
+              <Image src='/images/Icon_Facebook.svg' width={18} height={18} alt='IconFacebook' />
             </button>
             <p className={styles.linkButtonName}>페이스북</p>
           </div>
@@ -75,7 +72,7 @@ function ShareModal({ isOpenModal, closeModal }: ModalBaseProps) {
             className={styles.copyLink}
             type="button"
             onClick={() => handleCopyClipBoard(currentUrl)}>
-            <Image src={IconLink} alt={IconLink} />
+            <Image src='/images/Icon_link.svg' width={18} height={18} alt='IconLink' />
           </button>
           <p className={styles.linkButtonName}>링크 복사</p>
         </div>