From 17ac0bf34dc562e30a4fc04bb8dc9fbb1a1c903e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Mon, 1 Apr 2024 03:12:10 +0900
Subject: [PATCH 01/17] =?UTF-8?q?feat:=20part2=20=3D>=20part3=20=EC=9D=B4?=
 =?UTF-8?q?=EC=A0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |    2 +
 README.md                                     |    6 +-
 app/folder/page.tsx                           |   40 +
 app/layout.tsx                                |   18 +
 app/page.module.scss                          |    3 +
 app/page.tsx                                  |   10 +
 app/shared/page.tsx                           |   33 +
 next.config.js                                |    6 -
 next.config.mjs                               |   78 +
 package-lock.json                             | 1800 ++++++++++++-----
 package.json                                  |   11 +-
 pages/_app.tsx                                |    6 -
 pages/_document.tsx                           |   13 -
 pages/api/hello.ts                            |   13 -
 pages/index.tsx                               |  114 --
 public/favicon.ico                            |  Bin 25931 -> 0 bytes
 public/next.svg                               |    1 -
 public/vercel.svg                             |    1 -
 src/asset/index.ts                            |   10 +
 src/asset/svg/ChainIcon.tsx                   |   26 +
 src/asset/svg/EyeIcon.tsx                     |   41 +
 src/asset/svg/LinkImageEmptyCase.tsx          |   50 +
 src/asset/svg/LinkbraryLogo.tsx               |   50 +
 src/asset/svg/MagnifierIcon.tsx               |   26 +
 src/asset/svg/WhiteFacebookIcon.tsx           |   20 +
 src/asset/svg/WhiteInstagramIcon.tsx          |   18 +
 src/asset/svg/WhiteTwitterIcon.tsx            |   18 +
 src/asset/svg/WhiteYoutubeIcon.tsx            |   25 +
 src/asset/svg/XIcon.tsx                       |   25 +
 .../AuthForm/AuthLabel/AuthLabel.tsx          |   10 +
 .../Footer/Footer/Footer.module.scss          |   22 +
 src/components/Footer/Footer/Footer.tsx       |   34 +
 src/components/Footer/index.ts                |    1 +
 .../Header/Header/Header.module.scss          |   53 +
 src/components/Header/Header/Header.tsx       |   35 +
 src/components/Header/index.ts                |    1 +
 src/components/Input/Input.tsx                |    3 +
 .../AddLinkBar/AddLinkBar.module.scss         |   48 +
 .../LinkManager/AddLinkBar/AddLinkBar.tsx     |   27 +
 .../FavoriteButton/FavoriteButton.module.scss |   22 +
 .../FavoriteButton/FavoriteButton.tsx         |   22 +
 .../FavoriteButtonList.module.scss            |   28 +
 .../FavoriteButtonList/FavoriteButtonList.tsx |   27 +
 .../LinkEmptyCase/LinkEmptyCase.module.scss   |   16 +
 .../LinkList/LinkEmptyCase/LinkEmptyCase.tsx  |    9 +
 .../LinkManager/LinkList/LinkList.module.scss |    7 +
 .../LinkManager/LinkList/LinkList.tsx         |   17 +
 .../LinkList/LinkOverview/LinkOverView.tsx    |   49 +
 .../LinkOverview/LinkOverview.module.scss     |   68 +
 .../LinkManager/LinkManager.module.scss       |   22 +
 src/components/LinkManager/LinkManager.tsx    |  135 ++
 .../LinkSearchBar/LinkSearchBar.module.scss   |   35 +
 .../LinkSearchBar/LinkSearchBar.tsx           |   24 +
 .../UserProfile/UserProfile.module.scss       |   35 +
 .../LinkManager/UserProfile/UserProfile.tsx   |   26 +
 src/constants/index.ts                        |   14 +
 src/constants/types.ts                        |   38 +
 src/hooks/useFetchData.ts                     |   12 +
 src/hooks/useGetData.ts                       |   21 +
 src/hooks/useIntersectionObserver.ts          |   37 +
 src/styles/global.scss                        |   18 +
 src/styles/reset.scss                         |  129 ++
 src/utils/getElapsedTime.ts                   |   41 +
 src/utils/getFormattedDate.ts                 |    7 +
 src/utils/getFormattedLinks.ts                |   21 +
 styles/Home.module.css                        |  229 ---
 styles/globals.css                            |  107 -
 tsconfig.json                                 |   14 +-
 68 files changed, 2887 insertions(+), 1041 deletions(-)
 create mode 100644 app/folder/page.tsx
 create mode 100644 app/layout.tsx
 create mode 100644 app/page.module.scss
 create mode 100644 app/page.tsx
 create mode 100644 app/shared/page.tsx
 delete mode 100644 next.config.js
 create mode 100644 next.config.mjs
 delete mode 100644 pages/_app.tsx
 delete mode 100644 pages/_document.tsx
 delete mode 100644 pages/api/hello.ts
 delete mode 100644 pages/index.tsx
 delete mode 100644 public/favicon.ico
 delete mode 100644 public/next.svg
 delete mode 100644 public/vercel.svg
 create mode 100644 src/asset/index.ts
 create mode 100644 src/asset/svg/ChainIcon.tsx
 create mode 100644 src/asset/svg/EyeIcon.tsx
 create mode 100644 src/asset/svg/LinkImageEmptyCase.tsx
 create mode 100644 src/asset/svg/LinkbraryLogo.tsx
 create mode 100644 src/asset/svg/MagnifierIcon.tsx
 create mode 100644 src/asset/svg/WhiteFacebookIcon.tsx
 create mode 100644 src/asset/svg/WhiteInstagramIcon.tsx
 create mode 100644 src/asset/svg/WhiteTwitterIcon.tsx
 create mode 100644 src/asset/svg/WhiteYoutubeIcon.tsx
 create mode 100644 src/asset/svg/XIcon.tsx
 create mode 100644 src/components/AuthForm/AuthLabel/AuthLabel.tsx
 create mode 100644 src/components/Footer/Footer/Footer.module.scss
 create mode 100644 src/components/Footer/Footer/Footer.tsx
 create mode 100644 src/components/Footer/index.ts
 create mode 100644 src/components/Header/Header/Header.module.scss
 create mode 100644 src/components/Header/Header/Header.tsx
 create mode 100644 src/components/Header/index.ts
 create mode 100644 src/components/Input/Input.tsx
 create mode 100644 src/components/LinkManager/AddLinkBar/AddLinkBar.module.scss
 create mode 100644 src/components/LinkManager/AddLinkBar/AddLinkBar.tsx
 create mode 100644 src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss
 create mode 100644 src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
 create mode 100644 src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.module.scss
 create mode 100644 src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
 create mode 100644 src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.module.scss
 create mode 100644 src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.tsx
 create mode 100644 src/components/LinkManager/LinkList/LinkList.module.scss
 create mode 100644 src/components/LinkManager/LinkList/LinkList.tsx
 create mode 100644 src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
 create mode 100644 src/components/LinkManager/LinkList/LinkOverview/LinkOverview.module.scss
 create mode 100644 src/components/LinkManager/LinkManager.module.scss
 create mode 100644 src/components/LinkManager/LinkManager.tsx
 create mode 100644 src/components/LinkManager/LinkSearchBar/LinkSearchBar.module.scss
 create mode 100644 src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
 create mode 100644 src/components/LinkManager/UserProfile/UserProfile.module.scss
 create mode 100644 src/components/LinkManager/UserProfile/UserProfile.tsx
 create mode 100644 src/constants/index.ts
 create mode 100644 src/constants/types.ts
 create mode 100644 src/hooks/useFetchData.ts
 create mode 100644 src/hooks/useGetData.ts
 create mode 100644 src/hooks/useIntersectionObserver.ts
 create mode 100644 src/styles/global.scss
 create mode 100644 src/styles/reset.scss
 create mode 100644 src/utils/getElapsedTime.ts
 create mode 100644 src/utils/getFormattedDate.ts
 create mode 100644 src/utils/getFormattedLinks.ts
 delete mode 100644 styles/Home.module.css
 delete mode 100644 styles/globals.css

diff --git a/.gitignore b/.gitignore
index 8f322f0d8f..cce881f090 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -33,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+node_modules
diff --git a/README.md b/README.md
index a75ac52488..c4033664f8 100644
--- a/README.md
+++ b/README.md
@@ -16,11 +16,7 @@ bun dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
diff --git a/app/folder/page.tsx b/app/folder/page.tsx
new file mode 100644
index 0000000000..b06220da32
--- /dev/null
+++ b/app/folder/page.tsx
@@ -0,0 +1,40 @@
+import { Footer } from "@/src/components/Footer";
+import { Header } from "@/src/components/Header";
+import LinkManager from "@/src/components/LinkManager/LinkManager";
+import { END_POINT } from "@/src/constants";
+import getFormattedLinks from "@/src/utils/getFormattedLinks";
+import { useRef } from "react";
+// import { useFetchData } from "@/src/hooks/useFetchData";
+// page 컴포넌트 안에서 useFetchData 사용시 eslint - hooks rule에 저촉
+
+async function getFetchData(url: string) {
+  try {
+    const res = await fetch(url);
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      // alert(error.message);
+      console.error(error.message);
+    }
+  }
+}
+
+// use Hooks 사용 불가
+export default async function page() {
+  // links data fetch
+  const linksData = await getFetchData(END_POINT.LINKS);
+  // const linksData = await useFetchData(END_POINT.LINKS);
+  // links data formatting
+  const links = getFormattedLinks(linksData.data);
+  // favorites data fetch
+  const favorites = await getFetchData(END_POINT.FOLDERS);
+
+  return (
+    <>
+      <Header />
+      <LinkManager links={links} favorites={favorites.data} />
+      <Footer />
+    </>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000000..bc94879b16
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,18 @@
+import "@/src/styles/global.scss";
+
+export const metadata = {
+  title: "Linkbrary",
+  description: "bokeeey weeklyMission",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ko">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/app/page.module.scss b/app/page.module.scss
new file mode 100644
index 0000000000..93fd4944ec
--- /dev/null
+++ b/app/page.module.scss
@@ -0,0 +1,3 @@
+.input {
+  padding: 200px;
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000000..00649d7646
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,10 @@
+import styles from "./page.module.scss";
+// import AuthLabel from "@/src/components/AuthForm/AuthLabel/AuthLabel";
+
+export default function Home() {
+  return (
+    <>
+      <div className={styles.input}>{/* <AuthLabel /> */}</div>
+    </>
+  );
+}
diff --git a/app/shared/page.tsx b/app/shared/page.tsx
new file mode 100644
index 0000000000..bc28b3085b
--- /dev/null
+++ b/app/shared/page.tsx
@@ -0,0 +1,33 @@
+import { Footer } from "@/src/components/Footer";
+import { Header } from "@/src/components/Header";
+import LinkManager from "@/src/components/LinkManager/LinkManager";
+import { END_POINT } from "@/src/constants";
+
+async function getFetchData(url: string) {
+  try {
+    const res = await fetch(url);
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      // alert(error.message);
+      console.error(error.message);
+    }
+  }
+}
+
+export default async function page() {
+  // links data fetch
+  const sharedPageDatas = await getFetchData(END_POINT.SHARED_LINKS);
+
+  return (
+    <>
+      <Header />
+      <LinkManager
+        links={sharedPageDatas.folder.links}
+        userProfile={sharedPageDatas.folder}
+      />
+      <Footer />
+    </>
+  );
+}
diff --git a/next.config.js b/next.config.js
deleted file mode 100644
index a843cbee09..0000000000
--- a/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
-
-module.exports = nextConfig
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000000..6500ba9f42
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,78 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    // domains는 권장하지 않는 스타일
+    // domains: ["codeit-images.codeit.com"],
+    remotePatterns: [
+      // folder page images
+      {
+        protocol: "https",
+        hostname: "codeit-images.codeit.com",
+      },
+      {
+        protocol: "https",
+        hostname: "yt3.googleusercontent.com",
+      },
+      {
+        protocol: "https",
+        hostname: "assets.vercel.com",
+      },
+      {
+        protocol: "https",
+        hostname: "s.pstatic.net",
+      },
+      {
+        protocol: "https",
+        hostname: "storage.googleapis.com",
+      },
+      {
+        protocol: "https",
+        hostname: "i1.daumcdn.net",
+      },
+      {
+        protocol: "https",
+        hostname: "website-prisma.vercel.app",
+      },
+      {
+        protocol: "https",
+        hostname: "testing-library.com",
+      },
+      {
+        protocol: "https",
+        hostname: "storybook.js.org",
+      },
+      {
+        protocol: "https",
+        hostname: "github.com",
+      },
+      {
+        protocol: "https",
+        hostname: "legacy.reactjs.org",
+      },
+      {
+        protocol: "https",
+        hostname: "codeit.kr",
+      },
+
+      // shared page images
+      {
+        protocol: "https",
+        hostname: "codeit-frontend.codeit.com",
+      },
+      {
+        protocol: "https",
+        hostname: "reactjs.org",
+      },
+      {
+        protocol: "https",
+        hostname: "tanstack.com",
+      },
+      {
+        protocol: "https",
+        hostname: "static.cdninstagram.com",
+      },
+    ],
+  },
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index baa2b66555..f859bf9421 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,14 +1,14 @@
 {
-  "name": "fe-weekly-mission",
+  "name": "4-weekly-mission",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "fe-weekly-mission",
+      "name": "4-weekly-mission",
       "version": "0.1.0",
       "dependencies": {
-        "next": "13.5.6",
+        "next": "14.1.4",
         "react": "^18",
         "react-dom": "^18"
       },
@@ -17,7 +17,8 @@
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "eslint": "^8",
-        "eslint-config-next": "13.5.6",
+        "eslint-config-next": "14.1.4",
+        "sass": "^1.72.0",
         "typescript": "^5"
       }
     },
@@ -31,9 +32,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.4.tgz",
-      "integrity": "sha512-2Yv65nlWnWlSpe3fXEyX5i7fx5kIKo4Qbcj+hMO0odwaneFjfXw5fdum+4yL20O0QiaHpia0cYQ9xpNMqrBwHg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
+      "integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -67,9 +68,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz",
-      "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
+      "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
@@ -90,22 +91,22 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.54.0.tgz",
-      "integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@humanwhocodes/config-array": {
-      "version": "0.11.13",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
-      "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==",
+      "version": "0.11.14",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
+      "integrity": "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==",
       "dev": true,
       "dependencies": {
-        "@humanwhocodes/object-schema": "^2.0.1",
-        "debug": "^4.1.1",
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
         "minimatch": "^3.0.5"
       },
       "engines": {
@@ -126,29 +127,73 @@
       }
     },
     "node_modules/@humanwhocodes/object-schema": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz",
-      "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz",
+      "integrity": "sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==",
       "dev": true
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/@next/env": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
-      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw=="
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.4.tgz",
+      "integrity": "sha512-e7X7bbn3Z6DWnDi75UWn+REgAbLEqxI8Tq2pkFOFAMpWAWApz/YCUhtWMWn410h8Q2fYiYL7Yg5OlxMOCfFjJQ=="
     },
     "node_modules/@next/eslint-plugin-next": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz",
-      "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.1.4.tgz",
+      "integrity": "sha512-n4zYNLSyCo0Ln5b7qxqQeQ34OZKXwgbdcx6kmkQbywr+0k6M3Vinft0T72R6CDAcDrne2IAgSud4uWCzFgc5HA==",
       "dev": true,
       "dependencies": {
-        "glob": "7.1.7"
+        "glob": "10.3.10"
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
-      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.1.4.tgz",
+      "integrity": "sha512-ubmUkbmW65nIAOmoxT1IROZdmmJMmdYvXIe8211send9ZYJu+SqxSnJM4TrPj9wmL6g9Atvj0S/2cFmMSS99jg==",
       "cpu": [
         "arm64"
       ],
@@ -161,9 +206,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
-      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.1.4.tgz",
+      "integrity": "sha512-b0Xo1ELj3u7IkZWAKcJPJEhBop117U78l70nfoQGo4xUSvv0PJSTaV4U9xQBLvZlnjsYkc8RwQN1HoH/oQmLlQ==",
       "cpu": [
         "x64"
       ],
@@ -176,9 +221,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
-      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.1.4.tgz",
+      "integrity": "sha512-457G0hcLrdYA/u1O2XkRMsDKId5VKe3uKPvrKVOyuARa6nXrdhJOOYU9hkKKyQTMru1B8qEP78IAhf/1XnVqKA==",
       "cpu": [
         "arm64"
       ],
@@ -191,9 +236,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
-      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.1.4.tgz",
+      "integrity": "sha512-l/kMG+z6MB+fKA9KdtyprkTQ1ihlJcBh66cf0HvqGP+rXBbOXX0dpJatjZbHeunvEHoBBS69GYQG5ry78JMy3g==",
       "cpu": [
         "arm64"
       ],
@@ -206,9 +251,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
-      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.1.4.tgz",
+      "integrity": "sha512-BapIFZ3ZRnvQ1uWbmqEGJuPT9cgLwvKtxhK/L2t4QYO7l+/DxXuIGjvp1x8rvfa/x1FFSsipERZK70pewbtJtw==",
       "cpu": [
         "x64"
       ],
@@ -221,9 +266,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
-      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.1.4.tgz",
+      "integrity": "sha512-mqVxTwk4XuBl49qn2A5UmzFImoL1iLm0KQQwtdRJRKl21ylQwwGCxJtIYo2rbfkZHoSKlh/YgztY0qH3wG1xIg==",
       "cpu": [
         "x64"
       ],
@@ -236,9 +281,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
-      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.1.4.tgz",
+      "integrity": "sha512-xzxF4ErcumXjO2Pvg/wVGrtr9QQJLk3IyQX1ddAC/fi6/5jZCZ9xpuL9Tzc4KPWMFq8GGWFVDMshZOdHGdkvag==",
       "cpu": [
         "arm64"
       ],
@@ -251,9 +296,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
-      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.1.4.tgz",
+      "integrity": "sha512-WZiz8OdbkpRw6/IU/lredZWKKZopUMhcI2F+XiMAcPja0uZYdMTZQRoQ0WZcvinn9xZAidimE7tN9W5v9Yyfyw==",
       "cpu": [
         "ia32"
       ],
@@ -266,9 +311,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
-      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.1.4.tgz",
+      "integrity": "sha512-4Rto21sPfw555sZ/XNLqfxDUNeLhNYGO2dlPqsnuCg8N8a2a9u1ltqBOPQ4vj1Gf7eJC0W2hHG2eYUHuiXgY2w==",
       "cpu": [
         "x64"
       ],
@@ -315,10 +360,20 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.0.tgz",
-      "integrity": "sha512-2/U3GXA6YiPYQDLGwtGlnNgKYBSwCFIHf8Y9LUY5VATHdtbLlU0Y1R3QoBnT0aB4qv/BEiVVsj7LJXoQCgJ2vA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.9.0.tgz",
+      "integrity": "sha512-AAWymnpvHbGty1BmgbdfbqQDboXs6xN6h2yAacO4yKVyyUUBnpYkp+P9jjPrV9zrAGw7JVVriRtGOHPInnfjZQ==",
       "dev": true
     },
     "node_modules/@swc/helpers": {
@@ -336,56 +391,49 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.9.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.4.tgz",
-      "integrity": "sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA==",
+      "version": "20.11.30",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
+      "integrity": "sha512-dHM6ZxwlmuZaRmUPfv1p+KrdD1Dci04FbdEm/9wEMouFqxYoFl5aMkt0VMAUtYRQDyYvD41WJLukhq/ha3YuTw==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.11",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
-      "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.38",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.38.tgz",
-      "integrity": "sha512-cBBXHzuPtQK6wNthuVMV6IjHAFkdl/FOPFIlkd81/Cd1+IqkHu/A+w4g43kaQQoYHik/ruaQBDL72HyCy1vuMw==",
+      "version": "18.2.73",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.73.tgz",
+      "integrity": "sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.2.17",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.17.tgz",
-      "integrity": "sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==",
+      "version": "18.2.22",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.22.tgz",
+      "integrity": "sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==",
       "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz",
-      "integrity": "sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz",
+      "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.12.0",
-        "@typescript-eslint/types": "6.12.0",
-        "@typescript-eslint/typescript-estree": "6.12.0",
-        "@typescript-eslint/visitor-keys": "6.12.0",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -405,13 +453,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.12.0.tgz",
-      "integrity": "sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz",
+      "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.12.0",
-        "@typescript-eslint/visitor-keys": "6.12.0"
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -422,9 +470,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.12.0.tgz",
-      "integrity": "sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz",
+      "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -435,16 +483,17 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.12.0.tgz",
-      "integrity": "sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz",
+      "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.12.0",
-        "@typescript-eslint/visitor-keys": "6.12.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
         "semver": "^7.5.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -461,13 +510,37 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.12.0.tgz",
-      "integrity": "sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw==",
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz",
+      "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.12.0",
+        "@typescript-eslint/types": "6.21.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -485,9 +558,9 @@
       "dev": true
     },
     "node_modules/acorn": {
-      "version": "8.11.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
-      "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -545,6 +618,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "devOptional": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -561,28 +647,32 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
-      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "is-array-buffer": "^3.0.1"
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -601,17 +691,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
-      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -656,31 +767,44 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array.prototype.tosorted": {
+    "node_modules/array.prototype.toreversed": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.2.tgz",
-      "integrity": "sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==",
+      "resolved": "https://registry.npmjs.org/array.prototype.toreversed/-/array.prototype.toreversed-1.1.2.tgz",
+      "integrity": "sha512-wwDCoT4Ck4Cz7sLtgUmzR5UV3YF5mFHUlbChCzZBQZ+0m2cl/DH3tKgvphv1nKgFsJ48oCSg6p91q2Vm0I/ZMA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.2.0",
         "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.3.tgz",
+      "integrity": "sha512-/DdH4TiTmOKzyQbp/eadcCVexiCb36xJg7HshYOYJnNZFDj33GEv0P7GxsynpShhq4OLYJzbGcBDkLsDt7MnNg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.1.0",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.2.tgz",
-      "integrity": "sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
       "dev": true,
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
-        "is-array-buffer": "^3.0.2",
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
         "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
@@ -696,20 +820,14 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
-    "node_modules/asynciterator.prototype": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/asynciterator.prototype/-/asynciterator.prototype-1.0.0.tgz",
-      "integrity": "sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==",
-      "dev": true,
-      "dependencies": {
-        "has-symbols": "^1.0.3"
-      }
-    },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -741,6 +859,18 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -755,7 +885,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -775,14 +905,19 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
-      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
       "dev": true,
       "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
-        "get-intrinsic": "^1.2.1",
-        "set-function-length": "^1.1.1"
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -798,9 +933,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001564",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
-      "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+      "version": "1.0.30001600",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
+      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -832,6 +967,42 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "devOptional": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "devOptional": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -876,9 +1047,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
-      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "dev": true
     },
     "node_modules/damerau-levenshtein": {
@@ -887,6 +1058,57 @@
       "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==",
       "dev": true
     },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -911,17 +1133,20 @@
       "dev": true
     },
     "node_modules/define-data-property": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
-      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.1",
-        "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/define-properties": {
@@ -974,6 +1199,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -981,9 +1212,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.15.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz",
-      "integrity": "sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==",
+      "version": "5.16.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
+      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -994,50 +1225,57 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.22.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.22.3.tgz",
-      "integrity": "sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==",
-      "dev": true,
-      "dependencies": {
-        "array-buffer-byte-length": "^1.0.0",
-        "arraybuffer.prototype.slice": "^1.0.2",
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.5",
-        "es-set-tostringtag": "^2.0.1",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.2.tgz",
+      "integrity": "sha512-60s3Xv2T2p1ICykc7c+DNDPLDMm9t4QxCOUU0K9JxiLjM3C1zB9YVdN7tjxrFd4+AkZ8CdX1ovUga4P2+1e+/w==",
+      "dev": true,
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
         "es-to-primitive": "^1.2.1",
         "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.2",
-        "get-symbol-description": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
         "globalthis": "^1.0.3",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0",
-        "internal-slot": "^1.0.5",
-        "is-array-buffer": "^3.0.2",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
         "is-callable": "^1.2.7",
-        "is-negative-zero": "^2.0.2",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
         "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.2",
+        "is-shared-array-buffer": "^1.0.3",
         "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.12",
+        "is-typed-array": "^1.1.13",
         "is-weakref": "^1.0.2",
         "object-inspect": "^1.13.1",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.4",
-        "regexp.prototype.flags": "^1.5.1",
-        "safe-array-concat": "^1.0.1",
-        "safe-regex-test": "^1.0.0",
-        "string.prototype.trim": "^1.2.8",
-        "string.prototype.trimend": "^1.0.7",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
         "string.prototype.trimstart": "^1.0.7",
-        "typed-array-buffer": "^1.0.0",
-        "typed-array-byte-length": "^1.0.0",
-        "typed-array-byte-offset": "^1.0.0",
-        "typed-array-length": "^1.0.4",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.5",
         "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.13"
+        "which-typed-array": "^1.1.15"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1046,37 +1284,73 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-iterator-helpers": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.15.tgz",
-      "integrity": "sha512-GhoY8uYqd6iwUl2kgjTm4CZAf6oo5mHK7BPqx3rKgx893YSsy0LGHV6gfqqQvZt/8xM8xeOnfXBCfqclMKkJ5g==",
+      "version": "1.0.18",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.0.18.tgz",
+      "integrity": "sha512-scxAJaewsahbqTYrGKJihhViaM6DDZDDoucfvzNbK0pOren1g/daDQ3IAhzn+1G14rBG7w+i5N+qul60++zlKA==",
       "dev": true,
       "dependencies": {
-        "asynciterator.prototype": "^1.0.0",
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.1",
-        "es-set-tostringtag": "^2.0.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
-        "has-property-descriptors": "^1.0.0",
-        "has-proto": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
+        "internal-slot": "^1.0.7",
         "iterator.prototype": "^1.1.2",
-        "safe-array-concat": "^1.0.1"
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1121,16 +1395,16 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.54.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz",
-      "integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
-        "@eslint/eslintrc": "^2.1.3",
-        "@eslint/js": "8.54.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -1176,12 +1450,12 @@
       }
     },
     "node_modules/eslint-config-next": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.5.6.tgz",
-      "integrity": "sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.1.4.tgz",
+      "integrity": "sha512-cihIahbhYAWwXJwZkAaRPpUi5t9aOi/HdfWXOjZeUOqNWXHD8X22kd1KG58Dc3MVaRx3HoR/oMGk2ltcrqDn8g==",
       "dev": true,
       "dependencies": {
-        "@next/eslint-plugin-next": "13.5.6",
+        "@next/eslint-plugin-next": "14.1.4",
         "@rushstack/eslint-patch": "^1.3.3",
         "@typescript-eslint/parser": "^5.4.2 || ^6.0.0",
         "eslint-import-resolver-node": "^0.3.6",
@@ -1247,9 +1521,9 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.1.tgz",
+      "integrity": "sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7"
@@ -1273,9 +1547,9 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz",
-      "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==",
+      "version": "2.29.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
+      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.7",
@@ -1294,7 +1568,7 @@
         "object.groupby": "^1.0.1",
         "object.values": "^1.1.7",
         "semver": "^6.3.1",
-        "tsconfig-paths": "^3.14.2"
+        "tsconfig-paths": "^3.15.0"
       },
       "engines": {
         "node": ">=4"
@@ -1364,27 +1638,29 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.33.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz",
-      "integrity": "sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==",
+      "version": "7.34.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.1.tgz",
+      "integrity": "sha512-N97CxlouPT1AHt8Jn0mhhN2RrADlUAsk1/atcT2KyA/l9Q/E6ll7OIGwNumFmWfZ9skV3XXccYS19h80rHtgkw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.6",
-        "array.prototype.flatmap": "^1.3.1",
-        "array.prototype.tosorted": "^1.1.1",
+        "array-includes": "^3.1.7",
+        "array.prototype.findlast": "^1.2.4",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.toreversed": "^1.1.2",
+        "array.prototype.tosorted": "^1.1.3",
         "doctrine": "^2.1.0",
-        "es-iterator-helpers": "^1.0.12",
+        "es-iterator-helpers": "^1.0.17",
         "estraverse": "^5.3.0",
         "jsx-ast-utils": "^2.4.1 || ^3.0.0",
         "minimatch": "^3.1.2",
-        "object.entries": "^1.1.6",
-        "object.fromentries": "^2.0.6",
-        "object.hasown": "^1.1.2",
-        "object.values": "^1.1.6",
+        "object.entries": "^1.1.7",
+        "object.fromentries": "^2.0.7",
+        "object.hasown": "^1.1.3",
+        "object.values": "^1.1.7",
         "prop-types": "^15.8.1",
-        "resolve": "^2.0.0-next.4",
+        "resolve": "^2.0.0-next.5",
         "semver": "^6.3.1",
-        "string.prototype.matchall": "^4.0.8"
+        "string.prototype.matchall": "^4.0.10"
       },
       "engines": {
         "node": ">=4"
@@ -1577,9 +1853,9 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz",
-      "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==",
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
       "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
@@ -1601,7 +1877,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1640,9 +1916,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz",
-      "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
     "node_modules/for-each": {
@@ -1654,12 +1930,42 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
+      "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -1697,28 +2003,33 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
-      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
       "dev": true,
       "dependencies": {
+        "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
         "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
         "hasown": "^2.0.0"
       },
-      "funding": {
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
-      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1728,9 +2039,9 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.2.tgz",
-      "integrity": "sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.7.3.tgz",
+      "integrity": "sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==",
       "dev": true,
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -1740,20 +2051,22 @@
       }
     },
     "node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "version": "10.3.10",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
+      "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
       "dev": true,
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^2.3.5",
+        "minimatch": "^9.0.1",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0",
+        "path-scurry": "^1.10.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
       },
       "engines": {
-        "node": "*"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -1771,15 +2084,34 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
+      "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
     "node_modules/globals": {
-      "version": "13.23.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz",
-      "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==",
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -1868,21 +2200,21 @@
       }
     },
     "node_modules/has-property-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
-      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2"
+        "es-define-property": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
-      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -1904,12 +2236,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -1919,9 +2251,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
-      "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
       "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -1931,14 +2263,20 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
-      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "dev": true,
       "engines": {
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "devOptional": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1981,12 +2319,12 @@
       "dev": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.6.tgz",
-      "integrity": "sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
+        "es-errors": "^1.3.0",
         "hasown": "^2.0.0",
         "side-channel": "^1.0.4"
       },
@@ -1995,14 +2333,16 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2035,6 +2375,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "devOptional": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2075,6 +2427,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-date-object": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
@@ -2094,7 +2461,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2111,6 +2478,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -2130,7 +2506,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2139,18 +2515,21 @@
       }
     },
     "node_modules/is-map": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz",
-      "integrity": "sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-negative-zero": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -2163,7 +2542,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2209,21 +2588,27 @@
       }
     },
     "node_modules/is-set": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.2.tgz",
-      "integrity": "sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2260,12 +2645,12 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2275,10 +2660,13 @@
       }
     },
     "node_modules/is-weakmap": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
-      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
       "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2296,13 +2684,16 @@
       }
     },
     "node_modules/is-weakset": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.2.tgz",
-      "integrity": "sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.1"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2333,6 +2724,24 @@
         "set-function-name": "^2.0.1"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
+      "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2468,15 +2877,12 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
       "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
       "engines": {
-        "node": ">=10"
+        "node": "14 || >=16.14"
       }
     },
     "node_modules/merge2": {
@@ -2522,6 +2928,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
+      "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -2552,34 +2967,34 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
-      "integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
+      "version": "14.1.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.1.4.tgz",
+      "integrity": "sha512-1WTaXeSrUwlz/XcnhGTY7+8eiaFvdet5z9u3V2jb+Ek1vFo0VhHKSAIJvDWfQpttWjnyw14kBeq28TPq7bTeEQ==",
       "dependencies": {
-        "@next/env": "13.5.6",
+        "@next/env": "14.1.4",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.14.0"
+        "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.6",
-        "@next/swc-darwin-x64": "13.5.6",
-        "@next/swc-linux-arm64-gnu": "13.5.6",
-        "@next/swc-linux-arm64-musl": "13.5.6",
-        "@next/swc-linux-x64-gnu": "13.5.6",
-        "@next/swc-linux-x64-musl": "13.5.6",
-        "@next/swc-win32-arm64-msvc": "13.5.6",
-        "@next/swc-win32-ia32-msvc": "13.5.6",
-        "@next/swc-win32-x64-msvc": "13.5.6"
+        "@next/swc-darwin-arm64": "14.1.4",
+        "@next/swc-darwin-x64": "14.1.4",
+        "@next/swc-linux-arm64-gnu": "14.1.4",
+        "@next/swc-linux-arm64-musl": "14.1.4",
+        "@next/swc-linux-x64-gnu": "14.1.4",
+        "@next/swc-linux-x64-musl": "14.1.4",
+        "@next/swc-win32-arm64-msvc": "14.1.4",
+        "@next/swc-win32-ia32-msvc": "14.1.4",
+        "@next/swc-win32-x64-msvc": "14.1.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -2596,6 +3011,15 @@
         }
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2624,13 +3048,13 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
-      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.4",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
         "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
@@ -2642,28 +3066,29 @@
       }
     },
     "node_modules/object.entries": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.7.tgz",
-      "integrity": "sha512-jCBs/0plmPsOnrKAfFQXRG2NFjlhZgjjcBLSmTnEhU8U6vVTsVe8ANeQJCHTl3gSsI4J+0emOoCgoKlmQPMgmA==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2673,39 +3098,45 @@
       }
     },
     "node_modules/object.groupby": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
-      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/object.hasown": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.3.tgz",
-      "integrity": "sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
+      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
       "dev": true,
       "dependencies": {
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2815,6 +3246,22 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-scurry": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.2.tgz",
+      "integrity": "sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -2833,7 +3280,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -2841,6 +3288,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -2946,16 +3402,29 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "devOptional": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz",
-      "integrity": "sha512-ECkTw8TmJwW60lOTR+ZkODISW6RQ8+2CL3COqtiJKLd6MmB45hN51HprHFziKLGkAuTGQhBb91V8cy+KHlaCjw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
+      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
         "globalthis": "^1.0.3",
         "which-builtin-type": "^1.1.3"
       },
@@ -2967,20 +3436,21 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "dev": true
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz",
-      "integrity": "sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
+      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "set-function-name": "^2.0.0"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3049,6 +3519,26 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -3073,13 +3563,13 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.0.1.tgz",
-      "integrity": "sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
         "has-symbols": "^1.0.3",
         "isarray": "^2.0.5"
       },
@@ -3091,19 +3581,39 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
-      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.1.3",
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
         "is-regex": "^1.1.4"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.72.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
+      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
+      "devOptional": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -3113,9 +3623,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.5.4",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
-      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3127,30 +3637,45 @@
         "node": ">=10"
       }
     },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/set-function-length": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
-      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.1.1",
-        "get-intrinsic": "^1.2.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
         "gopd": "^1.0.1",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/set-function-name": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.1.tgz",
-      "integrity": "sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
       "dependencies": {
-        "define-data-property": "^1.0.1",
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
         "functions-have-names": "^1.2.3",
-        "has-property-descriptors": "^1.0.0"
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3178,19 +3703,35 @@
       }
     },
     "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -3201,9 +3742,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3216,35 +3757,107 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/string.prototype.matchall": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.10.tgz",
-      "integrity": "sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==",
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.5",
-        "regexp.prototype.flags": "^1.5.0",
-        "set-function-name": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.8.tgz",
-      "integrity": "sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3254,28 +3867,31 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.7.tgz",
-      "integrity": "sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/string.prototype.trimstart": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.7.tgz",
-      "integrity": "sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -3293,6 +3909,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -3379,7 +4008,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -3388,21 +4017,21 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
-      "integrity": "sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
+      "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
       "dev": true,
       "engines": {
-        "node": ">=16.13.0"
+        "node": ">=16"
       },
       "peerDependencies": {
         "typescript": ">=4.2.0"
       }
     },
     "node_modules/tsconfig-paths": {
-      "version": "3.14.2",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
-      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
       "dev": true,
       "dependencies": {
         "@types/json5": "^0.0.29",
@@ -3441,29 +4070,30 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz",
-      "integrity": "sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1",
-        "is-typed-array": "^1.1.10"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.0.tgz",
-      "integrity": "sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3473,16 +4103,17 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "has-proto": "^1.0.1",
-        "is-typed-array": "^1.1.10"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3492,23 +4123,29 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
-      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
-        "is-typed-array": "^1.1.9"
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/typescript": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.2.tgz",
-      "integrity": "sha512-6l+RyNy7oAHDfxC4FzSJcz9vnjTKxrLpDG5M2Vu4SHRVNg6xzqZp6LYSR9zjqQTu8DU/f5xwxUdADOkbrIX2gQ==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.3.tgz",
+      "integrity": "sha512-KrPd3PKaCLr78MalgiwJnA25Nm8HAmdwN3mYUYZgG/wizIo9EainNVQI9/yDavtVFRN2h3k8uf3GLHuhDMgEHg==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -3548,18 +4185,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/watchpack": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
-      "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3618,31 +4243,34 @@
       }
     },
     "node_modules/which-collection": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
-      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
       "dependencies": {
-        "is-map": "^2.0.1",
-        "is-set": "^2.0.1",
-        "is-weakmap": "^2.0.1",
-        "is-weakset": "^2.0.1"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -3651,6 +4279,100 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 1ce24924fd..73dfd7ed9d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "fe-weekly-mission",
+  "name": "4-weekly-mission",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,16 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.4",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "13.5.6"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "13.5.6"
+    "eslint-config-next": "14.1.4",
+    "sass": "^1.72.0",
+    "typescript": "^5"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
deleted file mode 100644
index 021681f4dd..0000000000
--- a/pages/_app.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import '@/styles/globals.css'
-import type { AppProps } from 'next/app'
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
-}
diff --git a/pages/_document.tsx b/pages/_document.tsx
deleted file mode 100644
index 54e8bf3e2a..0000000000
--- a/pages/_document.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Html, Head, Main, NextScript } from 'next/document'
-
-export default function Document() {
-  return (
-    <Html lang="en">
-      <Head />
-      <body>
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
-  )
-}
diff --git a/pages/api/hello.ts b/pages/api/hello.ts
deleted file mode 100644
index f8bcc7e5ca..0000000000
--- a/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +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/index.tsx b/pages/index.tsx
deleted file mode 100644
index 02c4dee049..0000000000
--- a/pages/index.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import { Inter } from 'next/font/google'
-import styles from '@/styles/Home.module.css'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export default function Home() {
-  return (
-    <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{' '}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-    </>
-  )
-}
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
zcmeHv30#a{`}aL_*G&7qml|y<+KVaDM2m#dVr!KsA!#An?kSQM(q<_dDNCpjEux83
zLb9Z^XxbDl(w>%i@8hT6>)&Gu{h#Oeyszu?xtw#Zb1mO<?sK2}EE5RAKnxHU7lft+
zNRAPL3?T?25I&drAjl1ssi=G|D?(7bFsgtO(2o>{pgX9699l+Qppw7jXaYf~-84xW
z)w4x8?=youko|}Vr~(D$UX<xm7|19n6Hxvd5m6xx<*9a4%RmR{en}E&p$X-wy5A}T
zU0^dwXVA>IbiXABHh`p1?nn8Po~fxRJv}|0e(BPs|G`(TT%kKVJAdg5*Z|x0leQq0
zkdUBvb#>9F()jo|T~kx@OM8$9wzs~t2l;K=woNssA3l6|sx2r3+kdfVW@e^8e*E}v
zA1y5{bRi+3Z`uD3{F7LgFJDdvm;nJilkzDku>BwXH(8ItVCXk*-lSJnR?-2UN%<G)
zWdETe=&R39RaKR)udn|#TOgZ!e!yM=<=+`Uz{l^5UtkZ2fHDQ;UwMB}v%l$A-`~F-
z{Qr^x^CSUf63Sry{6y#+`<sMA?dPFvg)$lC_RkFRKnCi7&P<a6>hJ){&rlvg`CDTj
z)Bzo!3v7Ou#83zEDEFcKt(f1E0~=rqeEbTnMvWR#{+9pg%7G8y>u1OVRUSoox-ovF
z2Ydma(;=YuBY(eI|04{hXzZD6_f(v~H;C~y5=DhAC{MMS>2fm~1H_t2$56pc$NH8(
z5bH|<)71dV-_oCHIrzrT`2s-5w_+2CM0$95I6X8p^r!gHp+j_gd;9O<1~CEQQGS8)
zS9Qh3#p&JM-G8rHekNmKVewU;pJRcTAog68KYo^dRo}(M<!8cv(gkb9@A>>36U4Us
zfgYWSiHZL3;lpWT=<n~R&zm>zNAW>Dh#mB!_@Lg%$ms8N-;aPqMn+C2HqZgz&9~Eu
z4|Kp<`$q)Uw1R?y(~S>ePdonHxpV1#eSP1B;Ogo+-Pk}6#0GsZZ5!||ev2MGdh}_m
z{DeR7?0-1^zVs&`AV6<!ZvGbtU{7FdY&`9DeD(=q|M30$GCs(E?S0J1$e@G0#Z=wz
zl)*a>Vt;r3`I`OI_wgs*w=eO%_#7Kepl{B<UyBc9U%rn&@xFZ-e{%i>@xiyCANc(l
zzIyd4y|c6PXWq9-|KM8(zIk8LPk(>a)zyFWjhT!$HJ$qX1vo@d25W<<x-(q{Yn-pG
zKTz?fwGmh&&2-F3f57**)?Xk#p#S9h^DhK{VVKE&0KR^-_MMD9nf@pDACnmVll!kp
z3?Tha?LWW70P;AL{}cP~sW|?W|MbA09{7Kt2f!i(y>fvZQ2zUz5WRc(UnFMKHwe1|
zWmlB1qdbiA(C0jmnV<}GfbKtmcu^2*P^O?<jWWPHxu*D53Uq)j1!ZtH3Vi&#Nd^rV
zj`B>MBLZKt|As~ge8&AAO~2K@zbXelK|4T<{|y4`raF{=72kC2Kn(L4YyenWgrPiv
z@^mr$t{#X5VuIMeL!7Ab6_kG$&#&5p*Z{+?5U|TZ`B!7llpVmp@skYz&n^8QfPJzL
z0G6K_OJM9x+Wu2gfN45phANGt{7=C>i34CV{Xqlx(fWpeAoj^N0Biu`w+MVcCUyU*
zDZuzO0>4Z6fbu^T_arWW5n!E45vX8N=bxTVeFoep_G#VmNlQzAI_KTIc{6>c+04vr
zx@W}zE5JNSU>!THJ{J=cqjz+4{L4A{Ob9$ZJ*S1?Ggg3klFp!+Y1@K+pK1DqI|_gq
z5ZDXVpge8-cs!o|;K73#YXZ3AShj50wBvuq3NTOZ`M&qtjj#GOFfgExjg8Gn8>Vq5
z`85n+9|!iLCZF5$HJ$Iu($dm?8~-ofu}tEc+-pyke=3!im#6pk_Wo8IA|fJwD&~~F
zc16osQ)EBo58U7XDuMexaPRjU@h8tXe%S{fA0NH3vGJFhuyyO!Uyl2^&EOpX{9As0
zWj+P>{@}jxH)8|r;2HdupP!vie{sJ28b&bo!8`D^x}TE$%zXNb^X1p@0PJ86`dZyj
z%ce7*{^oo+6%&~I!8hQy-vQ7E)0t0ybH4l%KltWOo~8cO`T=157JqL(oq_rC%ea&4
z2NcTJe-HgFjNg-gZ$6!Y`SMHrlj}Etf7<Kk?_r;;``Uc^3+u}-v3@Q8<@$Nr`<F?K
z-%F>?r!zQTPPSv}{so2e>Fjs1{<qUF=hGRSFDG$<z3x<+@%{Vd%a`e+qodRP&D<om
zAEn>gzk~LGeesX%r(Lh6rbhSo_n)@@G-FTQy93;l#E)hgP@d_SGvyCp0~o(Y;Ee8{
zdVUDbHm5`2taPUOY^MAGOw*<R_VaVlPH<<CgYr!E->>=s7=Gst=D+p+2yON!0%Hk`
zz5mAhyT4lS*T3LS^WSxUy86q&GnoHxzQ6vm8)VS}_zuqG?+3td68_x;etQAdu@sc6
zQJ&5|4(I?~3d-QOAODHpZ=hlSg(lBZ!JZWCtHHSj`0Wh93-Uk)_S%zsJ~aD>{`A0~
z9{AG(e|q3g5B%wYKRxiL2Y$8(4w<boVrLOyLG9R$m+7N>6bzchKuloQW#e&S3n+P-
z8!ds-%f;TJ1>)v)##>gd{PdS2Oc3VaR`fr=`O8QIO(6(N!A?pr5C#6fc~Ge@N%Vvu
zaoAX2&(a6eWy_q&UwOhU)|P3J0Qc%OdhzW=F4D|pt0E4osw;%<%Dn58hAWD^XnZD=
z>9~H(3bmLtxpF?a7su6J7M*x1By7YSUbxGi)Ot0P77`}P<HJ;%@cvfCkvm6xcMjdY
zed_u6xK)F%|1Hy`)`e~K(f*MqTJ?92I+4lga{A5`-U@Cab35G6unNk<*dpB|Rtkp;
z?32o^yBlJsuA-^abQ~7;%<oa^k<DbKc{lOW2!yM#nEALvv)IhY7b|Wfg(UhtiurTM
zY-B6L26$JQo&Kt3nh3JTJ)garEgw^{uEM3__%b$U5{~+aMO*k)6R#grkER2`U6KS-
z=j1=QhCkuy%iiHWrqH8CeGNw*C?epTpl2Bo@ugUPKRFeiVHOpL7PHu-SAgX@qmTGH
z_%ePz1`io8XDfwLmip;Rn;1yo+3>3{)&5Un{KD?`-e?r21!4vTTnN(4Y6Lin?UkSM
z`MXCTC1@4A4~mvz%Rh2&EwY))LeoT=*`tMoqcEXI>TZU9WTP#l?uFv+@Dn~b(>xh2
z;>B?;Tz2SR&KVb>vGiBSB`@U7VIWFSo=LDSb9F{GF^DbmWAfpms8Sx9OX4CnBJca3
zlj9(x!dIjN?OG1X4l*imJNvRCk}F%!?SOfiOq5y^mZW)jFL@<gIi}tCXee1<sGV$i
z4r_`X#mEQbiDh!Efji0GjM9z-0bF}p0(*s(OzMJ|;K&OJBar<ARLp}T>a|r-@d#f7
z2gmU8L3IZq0ynIws=}~m^#@&C%J6QFo~Mo4V`>v7MI-_!EBMMtb%_M&kvAaN)@ZVw
z+`toz&WG#HkWDjnZE!6nk{e-oFdL^$YnbOCN}JC&{$#$O27@|Tn-skXr)2ml2~O!5
zX+gYoxhoc7qoU?C^3~&!U?kRFtnSEecWuH0B0OvLodgUAi}8p1<ZO0#U-k07ifx!>
zrO6RSXHH}D<I*>Mc$&|?D004<Y&c6)m74d`LOLU@ruR+Um4>DiOVMHV8kXCP@7NKB
zgaZq^^O<7PoKEp72kby@W0Z!Y*A<g|TlOeriuPP`vK2IntATvs?Iv|J14j&;NFSFo
zyJ+sca?G+8C%!b{Sq=6cJJqS>y{&vfg#C&gG@YVR9g?FEocMUi1gSN$+V+ayF45{a
zuDZDT<?u;)RfLQwg>N}mS|;BO%gEf}pjBfN2-gIrU#G5~cucA;dokXW89%>AyXJJI
z9X4Ul<x{xc_m~`mWBP0<g-{#wm}Vv~Ef3pKWC&N_<~88zSbEk;;+{DnJ9-u&Zc74s
zJ6TCQyl_^|5cY;wmDdrU@LTL-3v0H#Ui?8ICQV{imof1MHuM$`e*ux>IWA|ZYHgbI
z5?oFk@A=Ik7lrEQPDH!H+b`7_Y~aDb_qa=B2^Y&Ow41cU=4WDd40dp5(QS-WMN-=Y
z9g;6_-JdNU;|6cPwf$ak*aJIcwL@1n$#l~zi{c{EW?T;DaW*E8DYq?Umtz{nJ&w-M
zEMyT<MDk{HKbd#ckg5-pS_?QUVhZv?&Q-ioBS}$nvBd)nE7YO0deN~G(#zCJAbY$E
z!)g3Ytl=_NDUV%pykcE+Q<{EoZ_4FR@&#d<hqs%N>DrC&9K$d|kZe2#ws6)L=7K+{
zQw{XnV6UC$6-rW0emqm8wJoeZK)wJIcV?dST}Z;G0Arq{dVDu0&4kd%N!3F1*;*pW
zR&qUiFzK=@44#QGw7k1`3t_d8&*kBV->O##t|tonFc2YWrL7_eqg+=+k;!F-`^b8>
z#KWCE8%u4k@EprxqiV$VmmtiWxDLgnGu$Vs<8rppV5E<MCr+anDo)-{XRlCJ;D#M(
zT=3WgR02;Nm!54biUb^FtzPh8iGrf412epnki-k+G4mdkzC|lJqaRMbb0~Jjp-{}I
z5Do5afZi>ajBXL4nyyZM$SWVm!wnCj-B!Wjqj5-5dNXukI2$$|Bu3Lrw}z65Lc=1G
z^-#WuQOj$hwNGG?*CM_TO8Bg-1+qc>J7k5c51U8g?ZU5n?HYor;~JIjoWH-G>AoUP
ztrWWLbRNqIjW#RT*WqZgPJXU7C)VaW5}MiijYbABmzoru6EmQ*N8cVK7a3|aOB#O&
zBl8JY2WKfmj;h#Q!pN%9o@VNLv{OUL?rixHwOZuvX7{IJ{(EdPpuVFoQqIOa7gi<U
zTpbX&UCeYeNu>LVkBOKL@^smUA!tZ1CKRK}#SSM)iQHk)*R~?M!qkCruaS!#oIL1c
z<cK@1=jX>?J<BS8bpdt^R+}%A_DEhF^%o}8e!!lc`Y!qU>;U~&FfH#*98^G?i}pA{
z9Jg36t4=%6mhY(quYq*vSxptes9qy|7xSlH?G=S@>u>Ebe;|LVhs~@+06N<4CViBk
zUiY$thvX;>Tby6z9Y1e<Q<iIG*|o$r?OTFp`s)@_nHs4LeWbGvg7^}NK)>dAMQaiH
zm^r3v#$Q#2T=X>bsY#D%s!bhs^M9PMAcHbCc0FMHV{u-dwlL;a1eJ63v5U*?Q_8JO
zT#50!RD619#j_Uf))0ooADz~*9&lN!bBDRUgE>Vud-i5ck%vT=r^yD*^?Mp@Q^v+V
zG#-?gKlr}Eeqifb{|So?HM&g91<J5P5=Ly{?(NNY{6`O~L5r@sJe3rNZn06%SLk);
z9?hvE^Hr{!*G$<_doyzGn#*z*#}?)8dH=eYTgvc)T~}Jw!kCv68<+KL5{5?EXtDAZ
zWeNqp8%KIuBi&icn5s815Vho<+99VW1~m@L8l0=$c`t-L{q))~<!p*~vCdUcBcPz`
zyUi}!-k_`G{>P8|av8hQoCmQXkd?7wIJw<dY^{|7OQJUHKB~nksN_|Xy;DL?xjxU^
zbMa`WdfTBnr<wTd$mY&SgJ4U|X``k`#`gN@M+0x2W{YgC3kbLk<uYFJWglkx_)2#b
ztRiuA!EK9o)f`I2k)l;Of%E`ff91WlZh8yfRi6#N-mC`Ma(yr~U82SyAhc9B+ur!f
zP-3igg*KeYs9mGOAw@OaXYy9DnGjn0<m`JH&Q^h}^!h+uS9Ct*o-oEy(?iT6Yco>b
z_^v8bbg`<ZOL)a;i=IdfK0Zvw4nXsoC?eTOMpY)_ptiORm%J(1CD3dE0Z%Vy<2iHp
zcp>SAn{I*4bH$u(RZ6*x<DqKJ+5;a6Jq~=Y8V&c?Vsyq88!2nD?H?Eww58Mqt$7R8
z5BMjmKx>UhuA~hc=8czK8SHEKTzSxgbwi~9(OqJB&gwb^l4+m`k*Q;_?>Y-APi1{k
zAHQ)P)G)f|AyjSgcCFps)Fh6Bca*Xznq3<?y%xNvu0N78_R?~<RDFQx0ynlRG(E|j
zvEGN3bF<E_9p-I!UwQXFqcSGV#e^98tgFqLp+z9eP}y!jNA{)r*a+%M-_20xg?94<
zzmM{}syi0cd&P)zywMdS&Y_9k5JDtOM!L)b^2WP!+fHYGv>6!pV6Az&m{O8$wGFD?
zY&O*3*J0;_EqM#jh6^gMQKpXV?#1?>$ml1xvh8nSN>-?H=V;nJIwB07YX$e6vLxH(
zqYwQ>qxwR(i4f)DLd)-$P>T-no_c!LsN@)8`e;W@)-Hj0>nJ-}Kla4-ZdPJzI&Mce
zv)V_j;(3ERN3_@I$N<^|4Lf`B;8n+bX@bHbcZTopEmDI*Jfl)-pFDvo6svPRoo@(x
z);_{lY<;);XzT`dBFpRmGrr}z5u1=p<K1~3>C^<jVp}L(pzgMB_Vs-O?{Z?y$8M;)
zi@7zwpzV9#m72%En~(9@E)GWV^(~J*@^*K*TE0mynAnGJ5YSLCEnC42H-`tr4L=oW
zI}N{xQ$HT8Q6CVHf%RY&xw7!Zj(0xmg(K#UQ4u!ej95z7V4phlcTJ2&AR}$)zV-s!
zO7bqY6(=?1t+JCOW_z%HRE>S-{ce6iXQlLGcItwJ^mZx{m$&DA_oEZ)B{_bYPq-HA
zcH8WGoBG(aBU_j)vEy+_71T34@4dmSg!|M8Vf92Zj6WH7Q7t#OHQqWgFE3ARt+%!T
z?oLovLVlnf?2c7pTc)~cc^($_8nyKwsN`RA-23ed3sdj(ys%pjjM+9JrctL;dy8a(
z@en&CQmnV(()bu|Y%G1-4a(6x{aLytn$T-;(&{QIJB9vMox11U-1HpD@d(QkaJdEb
zG{)+6Dos_L+O3NpWo^=gR?evp|CqEG?L&Ut#D*KLaRFOgOEK(Kq1@!EGcTfo+%A&I
z=dLbB+d$u{sh?u)xP{PF8L%;YPPW53+@{>5W=Jt#wQpN;0_HYdw1{ksf_XhO4#2F=
zyPx6Lx2<92L-;L5PD`zn6zwIH`Jk(<gsVPionpJ-imI56$j4P0!br@ny3=!{x2TY^
zCD=)8_PgmN)E!^nczcDGc9Wm7oo5O3@fh=k=kh8J?_3KqEp7JHdv8z_iZ5#KmbiPt
z2Bt8Ro^p$7pS!xL3mtj<iN3f}#r6_&$Es0PnJTE?c;0#$%cGdu`T%~`gW;c^VD-S=
zrAatMf^%Lzr*wQ4kHSOb?WOUuEsJQ3xr{Imf1t{~iNmRwb_SP9!?FFN=b-E){!8P2
ztWCT~262O8`%?3<W4Wg+ovWY<re)?^kZ|Yi>$?Qw({erA$^bC;q33hv!d!>%wRhj#
zal^hk+WGNg;rJtb-EB(?czvOM=H7dl=vblBwAv>}%1@{}mnpUznfq1cE^sgsL0*4I
zJ##!*B?=vI_OEVis5o+_IwMIRrpQyT_Sq~ZU%oY7c5JMIADzpD!Upz9h@iWg_>>~j
zOLS;wp^i$-E?4<_cp?RiS%Rd?i;f*mOz=~(&3lo<=@(nR!_Rqiprh@weZlL!t#NCc
zO!QTcInq|%#>OVgobj{~ixEUec`E25zJ~*DofsQdzIa@5^nOXj2T;8O`l--(QyU<o
zeu8G~Z>^$t?TGY^7#&FQ+2SS3B#qK*k3`ye?8jUYSajE5iBbJls75CCc(m3dk{t?-
zopcER9{Z?TC)mk~gpi^kbbu>b-+a{m#8-y2^p$ka4n60w;Sc2}HMf<8JUvh<G@KZw
z+<GL!lpeahq2+nO{>CL0B&Btk)T`ctE$*qNW8L$`7!r^9T+>=<=2qaq-;ll2{`{Rg
zc5a0ZUI$oG&j-qVOuKa=*v4aY#IsoM+1|c4Z)<}lEDvy;5huB@1RJPquU2U*U-;gu
z=En2m+qjBzR#DEJDO`WU)hdd{Vj%^0V*KoyZ|5lzV87&g_j~NCjwv0uQVqXOb*QrQ
zy|Qn`hxx(58c<SELWpDAg~83oY-J_WoDiI6d7>70$E;L(X0uZZ72M1!6oeg)(cdKO
ze0gDaTz+ohR-#d)NbAH4x{I(21yjwvBQfmpLu$)|m{XolbgF!pmsqJ#D}(ylp6uC>
z{bqtcI#hT#HW=wl7>p!38sKsJ`r8}lt-q%Keqy%u(xk=yiIJiUw6|5IvkS+#?JTBl
z8H5(Q?l#wzazujH!8o>1xtn8#_w+397*<wp?Ryt$UFh41$qd}LyNJ7Oao(Aw2g|wy
zH_nZ+R#~EUME^#j4$@^5&>_cy8!pQGP%K(Ga3pAjsaTbbXJlQF_+m+-UpUUent@xM
zg%jqLUExj~o^vQ3Gl*>wh=_gOr2*|U64_iXb+-111a<qXXnUI&{l`dM&{4Gw)jZn;
zlj{VxW@#OcVE1Y%J*u^Z@H+XSqL6SwA|^jv2RU_+d;O!mk)dw7-m9B4{6*G1zRdR6
zQ}6v&Xt7R2h3Xp}EQk4nF2TULG{Ri=D|JC<a+K7dldN1}CY_f!vK#u}K3`g#TpO&W
z;!;64`0$d9raD!VbYP`kuFUasaMh!;&81y}LHS(SuGRxwEn4LZb4DS1j9iAq$MXd@
z(Ebka7_Gc(ljGaJqtI-OzmA@c@sYB$)Vg!RP4~``vaVyRq$rJXRjIPwtepN;(B%wy
zmU>H}$TjeajM+I20xw(((>fej-@CIz4S1pi$(#}P7`4({6QS2CaQS4NPENDp>sAqD
z$bH4KGzXGffkJ7R>V>)>tC)uax{UsN*dbeNC*v}#8Y#OWYwL4t$ePR?VTyIs!wea+
z5Urmc)X|^`MG~*dS6pGSbU+gPJoq*^a=_>$n4|P^w$sMBBy@f*Z^Jg6?n5?oId6f{
z$LW4M|4m502z0t7g<#Bx%X;9<=)smFolV&(V^(7Cv2-sxbxopQ!)*#ZRhTBpx1)Fc
zNm1T%bONzv6@#|dz(w02AH8OXe>kQ#1FMCzO}2J_mST)+ExmBr9cva-@?;wnmWMOk
z{3_~EX_xadgJGv&H@zK_8{(x84`}+c?oSBX*Ge3VdfTt&F}yCpFP?CpW+BE^cWY0^
zb&uBN!Ja3UzYHK-CTyA5=L<c0d<h!DNBIa<xax8W3(Ru8L0cVXQ18|Y^|*S%)R96z
zBT$(=zQ}2vmt6LzN~Oyf_Y92%P@QOx{7~}5!UIqCdfu?VwC0Nb!2@iiit8-5zUWFG
z*G&+GLIU#J;}hvowNJWnglvb^<2q~lS#?ixVtYT@(O3{TC|4kFJYLB*jni-4YZi0>
zEMW{l3Usky#ly=7px648W31UNV@K)&Ub&zP1c7%)`{);I4b0Q<)B}3;NMG2JH=X$U
zfIW4)4n9ZM`-yRj67I)YSLDK)qfUJ_ij}a#aZN~9EXrh8eZY2&=uY%2N0UFF7<~%M
zsB8=erOWZ>Ct_#^tHZ|*q`H;A)5;ycw*I<Cd*bZlOJ9YmRUK2<qXkpRR3nr6r~%Jz
z*(8tA&DYO)etdgVmoonqD{*<5Fog4ClIs-~_uhjuZOI}#Wy+ce${%#oyHloXelqfz
z8)?D3Y_>cmVxi8_0Xk}aJA^ath+E;xg!x+As(M#0=)3!NJR6H&9+zd#iP(m0PIW8$
z1Y^VX`>jm`W!=WpF*{ioM?C9`yOR>@0q=u7o>BP-eSHqCgMDj!2anwH?s%i2p+Q7D
zzszIf5XJpE)IG4;d_(La-xenmF(tgAxK`Y4sQ}BSJEPs6N_U2vI{8=0C_F?@7<(G;
zo$~G=8p+076G;`}>{MQ>t>7cm=zGtfbdDXm6||jUU|?X?CaE?(<6bKDYKeHlz}DA8
zXT={X=yp_R;HfJ9h%?eWvQ!dRgz&Su*JfNt!Wu>|XfU<MM~gB&J0gc}IH}?|B4WRK
zWPL0FhctFGdMucOFdhrVunIe5)4K^H9IjB#eA)p5w?c#v7kp8jx^~bxxJB{;hPFL9
zkR9Dbpj+T5ZMgHQg|oj*DS;x&jK}1rn&}Shp9sgOI*7puQD-w?3H*cg72;5H(_zW*
zApJBIM-p2~F;qWDj!n|Kd=5|T8OPkQ_G;ujgvKybr5@~eci2{8WAz+%NUSp-&eoG!
zOGLNLJewWl&1*NT467W3god~fYgX?!f0?NCFnjD$qE-fyQ)|Q_DLc*{olmXSVl$g_
z$vj}o?RatMy(o*j8?q1Mgw{OUOgVR6_qvS<Co*&!cR`ROi|*I`ajyG5s@L8agnX2J
zF=DLkMG`z{RP&996y0yAtvJcb<cba?TV#j4VYFPC>&68iRikRrHRW|ZxzRR^`eIGt
zIeiDgVS>IeExKVRWW8-=<xUfo0v~z=RA=cFWKXgcMECd}xHp7iqkBanH}TZ0h0rA=
zqxUZ>A=<k-RjTtwbJkkep{8z*173wY^e%-U0{Ue!n@wbg^2q)Vx5c(_RfvuR4}XXn
z+JE>yA`}`)ZkWBrZD`hpWIxBGkh&f#ijr449~m`j6{4jiJ*C!oVA8ZC?$1RM#K(_b
zL9TW)kN*Y4%^-qPpMP7d4)o?Nk#>aoYHT(*g)qmRUb?**F@pnNiy6Fv9rEiUqD(^O
zzyS?nBrX63BTRYduaG(0VVG2yJRe%o&rVrLjbxTaAFTd8s;<<@Qs>u(<193R8>}2_
zuwp{7;H2a*X7_jryzriZXMg?bTuegABb^87@SsKkr2)0Gyiax8KQWstw^v<oS3Xw7
zu51m`3~hoyxErcHymdFTZd#AO59{EkuFTcpAR33(3xc{zRnn1~1Ei(i*^HdCvM~;;
za&}Uip|u>#ix45EVrcEhr>!NMhprl<CqZuKa#zuI&@zymVzIicetS0bq#u?m(r_@S
zJ79bl%4EyHCQ3fK@en+A1@)e}HWLP|gr_zuoA{}Z<(-*53Zu@k+=^%~5F(z$EFLI;
z-TQTS8$W|GRbZq93Ha1?lu+`O;rn>$InQMzjSFH54x5k9qHc`@9uKQzvL4ihcq{^B
zPrVR=o_ic%Y>6&rMN)hTZsI7I<3&`#(nl+3y3ys9A~<Ao%ZuW})CJ)6^(aRV(gGxR
z89#(FDW;GZEAf;rI$+PU)rEV|rASrwP0_mr^Ldv)IuUf1M>&^=4?PL&nd8)`OfG#n
zwAMN$1&>K++c{^|7<<q5KGu)u(OEfEJJw2aEi(;x-i=Y=j3ram9H2n-Fuqv0dVlXJ
z&WgG5X({!vJFDrEbm+CWDca^zIe2@s1@a;;Y3!U9Q)&P0UXFmCP51_!wvTfAIyR^M
z7^R*O@yz1b-s4VC>4P=2y(B{jJsQ0a#U;HTo4ZmWZYvI{+s;Td{Yzem%0*k#)vjpB
zia;J&>}ICate44SFYY3vEelqStQWFihx%^vQ@Do(sOy7yR2@WNv7Y9I^yL=nZr3mb
zXKV5t@=?-Sk|b{XMhA7ZGB@2hqsx}4xwCW!in#C<kr{U&JG{9FhoZ<aTve_lLz39>
zI@}sc<h3gsW}hp-`WUywKA>Zlr3-NFJ@NFaJlhyfcw{k^vvtGl`N9xSo**rDW4S}i
zM9{fMPWo%4wYDG~BZ18BD+}h|GQKc-g^{++3MY>}W_uq7jGHx{mwE9fZiPCoxN$+7
zrODGGJrOkcPQUB(FD5aoS4g~7#6NR^ma7-!>mHuJfY5kTe6PpNNKC9GGRiu^L31uG
z$7v`*JknQHsYB!Tm_W{a32TM099djW%5e+j0Ve_ct}IM>XLF1Ap+YvcrLV=|CKo6S
zb+<Td{{5RWR}u2f(q<b(D$9JsF0OOzJ*+z0P5kc1t}CXlYgua%x*2lSgp|*WS3H-#
zdYr7?GQOL18zUS<2|;+vi4|4sQBM2Gs&WVS!D`q5Lz;XR@5rEfa{uG-!q?R8Ncz%(
z5K6~LQ@d2wp#)5q4u<ENlFbS)U4o1t9{-d>9Nl3_YdKP6%Cxy@6TxZ>;4&nTneadr
z_ES90ydCev)LV!dN=#(*f}|ZORFdvkYBni^aLbUk>BajeWIOcmHP#8S)*2U~QKI%S
zyrLmtPqb&TphJ;>yAxri#;{uyk`JJqODDw%(Z=2<VfJZemI(PFAD{6Sm|uE%BTbkl
zROsg*MOh20YgGs3H7?@pmQ>`1uc}br^V%>j!gS)D*q*f_-qf8&D;W1dJgQMlaH5er
zN2U<%Smb7==vE}dDI8K7cKz!vs^73o9f>2sgiTzWcwY|BMYHH5%Vn7#kiw&eItCqa
zIkR2~Q}>X=Ar8W|^Ms41Fm8o6IB2_j60eOeBB1Br!boW7JnoeX6Gs)?7rW0^5psc-
zjS16yb>dFn>KPOF;imD}e!enuIniFzv}n$m2#gCCv4jM#ArwlzZ$7@9&XkFxZ4n!V
zj3dyiwW4Ki2QG{@i>yuZXQizw_OkZI^-3otXC{!(lUpJF33gI60ak;Uqitp74|B6I
zgg{b=Iz}WkhCGj1M<xTd?60J5qsr1Cg7F~~U2N!(@lC<>=hu4#Aw173YxIVbISaoc
z-nLZC*6Tgivd5V`K%GxhBsp@SUU60-rfc$=wb>zdJzXS&-5(NRRodFk;Kxk!S(<ov
z$YXcI9;^grAyiJ4dWTv3b}K~Ww09(;mLY4+kj|$A?IMr}`7q?mIS1>O(a0e7oY=E(
zAyS;Ow?6Q&XA+cnkCb{28_1N8H#?J!*$MmIwLq^*T_9-z^&UE@A(z9oGYtFy6EZef
LrJugUA?W`A8`#=m

diff --git a/public/next.svg b/public/next.svg
deleted file mode 100644
index 5174b28c56..0000000000
--- a/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/public/vercel.svg b/public/vercel.svg
deleted file mode 100644
index d2f8422273..0000000000
--- a/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/src/asset/index.ts b/src/asset/index.ts
new file mode 100644
index 0000000000..c05a9d35db
--- /dev/null
+++ b/src/asset/index.ts
@@ -0,0 +1,10 @@
+export { default as LinkbraryLogo } from "./svg/LinkbraryLogo";
+export { default as WhiteInstagramIcon } from "./svg/WhiteInstagramIcon";
+export { default as WhiteTwitterIcon } from "./svg/WhiteTwitterIcon";
+export { default as WhiteYoutubeIcon } from "./svg/WhiteYoutubeIcon";
+export { default as WhiteFacebookIcon } from "./svg/WhiteFacebookIcon";
+export { default as LinkImageEmptyCase } from "./svg/LinkImageEmptyCase";
+export { default as MagnifierIcon } from "./svg/MagnifierIcon";
+export { default as XIcon } from "./svg/XIcon";
+export { default as ChainIcon } from "./svg/ChainIcon";
+export { default as EyeIcon } from "./svg/EyeIcon";
diff --git a/src/asset/svg/ChainIcon.tsx b/src/asset/svg/ChainIcon.tsx
new file mode 100644
index 0000000000..85e9cf6c7a
--- /dev/null
+++ b/src/asset/svg/ChainIcon.tsx
@@ -0,0 +1,26 @@
+export default function ChainIcon() {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="21"
+        viewBox="0 0 20 21"
+        fill="none"
+      >
+        <path
+          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
+          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"
+        />
+      </svg>
+    </>
+  );
+}
diff --git a/src/asset/svg/EyeIcon.tsx b/src/asset/svg/EyeIcon.tsx
new file mode 100644
index 0000000000..5ff3f5c5f6
--- /dev/null
+++ b/src/asset/svg/EyeIcon.tsx
@@ -0,0 +1,41 @@
+interface EyeIcon {
+  visible?: boolean;
+  handleEyeIconClick?: () => void;
+}
+
+export default function EyeIcon({ visible, handleEyeIconClick }: EyeIcon) {
+  return (
+    <>
+      {visible ? (
+        <svg
+          onClick={handleEyeIconClick}
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="11"
+          viewBox="0 0 16 11"
+          fill="none"
+        >
+          <path
+            d="M8 3.27273C7.42135 3.27273 6.86639 3.5026 6.45722 3.91177C6.04805 4.32094 5.81818 4.87589 5.81818 5.45455C5.81818 6.0332 6.04805 6.58815 6.45722 6.99732C6.86639 7.40649 7.42135 7.63636 8 7.63636C8.57865 7.63636 9.13361 7.40649 9.54278 6.99732C9.95195 6.58815 10.1818 6.0332 10.1818 5.45455C10.1818 4.87589 9.95195 4.32094 9.54278 3.91177C9.13361 3.5026 8.57865 3.27273 8 3.27273ZM8 9.09091C7.03558 9.09091 6.11065 8.70779 5.4287 8.02584C4.74675 7.34389 4.36364 6.41897 4.36364 5.45455C4.36364 4.49012 4.74675 3.5652 5.4287 2.88325C6.11065 2.2013 7.03558 1.81818 8 1.81818C8.96442 1.81818 9.88935 2.2013 10.5713 2.88325C11.2532 3.5652 11.6364 4.49012 11.6364 5.45455C11.6364 6.41897 11.2532 7.34389 10.5713 8.02584C9.88935 8.70779 8.96442 9.09091 8 9.09091ZM8 0C4.36364 0 1.25818 2.26182 0 5.45455C1.25818 8.64727 4.36364 10.9091 8 10.9091C11.6364 10.9091 14.7418 8.64727 16 5.45455C14.7418 2.26182 11.6364 0 8 0Z"
+            fill="#373740"
+          />
+        </svg>
+      ) : (
+        <svg
+          onClick={handleEyeIconClick}
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <rect width="16" height="16" fill="white" />
+          <path
+            d="M7.87636 5.36364L10.1818 7.66182C10.1818 7.62545 10.1818 7.58182 10.1818 7.54545C10.1818 6.9668 9.95195 6.41185 9.54278 6.00268C9.13361 5.59351 8.57865 5.36364 8 5.36364C7.95636 5.36364 7.92 5.36364 7.87636 5.36364ZM4.74909 5.94545L5.87636 7.07273C5.84 7.22545 5.81818 7.37818 5.81818 7.54545C5.81818 8.12411 6.04805 8.67906 6.45722 9.08823C6.86639 9.4974 7.42135 9.72727 8 9.72727C8.16 9.72727 8.32 9.70545 8.47273 9.66909L9.6 10.7964C9.11273 11.0364 8.57455 11.1818 8 11.1818C7.03558 11.1818 6.11065 10.7987 5.4287 10.1168C4.74675 9.4348 4.36364 8.50988 4.36364 7.54545C4.36364 6.97091 4.50909 6.43273 4.74909 5.94545ZM0.727273 1.92364L2.38545 3.58182L2.71273 3.90909C1.51273 4.85455 0.567273 6.09091 0 7.54545C1.25818 10.7382 4.36364 13 8 13C9.12727 13 10.2036 12.7818 11.1855 12.3891L11.4982 12.6945L13.6218 14.8182L14.5455 13.8945L1.65091 1M8 3.90909C8.96442 3.90909 9.88935 4.29221 10.5713 4.97416C11.2532 5.65611 11.6364 6.58103 11.6364 7.54545C11.6364 8.01091 11.5418 8.46182 11.3745 8.86909L13.5055 11C14.5964 10.0909 15.4691 8.89818 16 7.54545C14.7418 4.35273 11.6364 2.09091 8 2.09091C6.98182 2.09091 6.00727 2.27273 5.09091 2.6L6.66909 4.16364C7.08364 4.00364 7.52727 3.90909 8 3.90909Z"
+            fill="#373740"
+          />
+        </svg>
+      )}
+    </>
+  );
+}
diff --git a/src/asset/svg/LinkImageEmptyCase.tsx b/src/asset/svg/LinkImageEmptyCase.tsx
new file mode 100644
index 0000000000..cd72be04af
--- /dev/null
+++ b/src/asset/svg/LinkImageEmptyCase.tsx
@@ -0,0 +1,50 @@
+export default function LinkImageEmptyCase() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="133"
+      height="24"
+      viewBox="0 0 133 24"
+      fill="none"
+    >
+      <g opacity="0.2">
+        <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"
+        />
+        <path
+          d="M46.0405 10.0893V0H40.8347V20.2718H46.0405V16.7068L48.2116 14.167L50.7328 20.2718H56.4755L53.184 12.233H49.869L56.0087 5.12621H50.3359L46.0405 10.0893Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M67.0849 20.7379C70.2364 20.7379 74.1116 18.9437 74.1116 12.699C74.1116 6.45437 70.2364 4.66019 67.0849 4.66019C65.3341 4.66019 63.77 5.17281 62.5094 6.03495V0H57.3035V20.2718H62.5094V19.3631C63.77 20.2485 65.3341 20.7379 67.0849 20.7379ZM65.7076 16.1942C63.91 16.1942 62.5094 15.2854 62.5094 12.699V12.5126C62.5794 10.0893 63.9567 9.20388 65.7076 9.20388C67.7152 9.20388 68.9058 10.2524 68.9058 12.699C68.9058 15.1689 67.7152 16.1942 65.7076 16.1942Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M74.935 20.2718H80.1409V13.9573C80.1876 11.0214 81.5182 9.32039 86.1638 9.32039V4.66019C83.3624 4.66019 81.3781 5.63883 80.1409 7.1068V5.12621H74.935V20.2718Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M93.541 20.7379C95.2685 20.7379 96.8559 20.2485 98.1165 19.3631V20.2718H103.322V5.12621H98.1165V6.03495C96.8559 5.17281 95.2685 4.66019 93.541 4.66019C90.3895 4.66019 86.5143 6.45437 86.5143 12.699C86.5143 18.9437 90.3895 20.7379 93.541 20.7379ZM94.9183 16.1942C92.9107 16.1942 91.7201 15.1689 91.7201 12.699C91.7201 10.2524 92.9107 9.20388 94.9183 9.20388C96.7159 9.20388 98.1165 10.1359 98.1165 12.699C98.1165 15.2854 96.7159 16.1942 94.9183 16.1942Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M104.613 20.2718H109.819V13.9573C109.865 11.0214 111.196 9.32039 115.841 9.32039V4.66019C113.04 4.66019 111.056 5.63883 109.819 7.1068V5.12621H104.613V20.2718Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M127.794 5.12621V11.7204C127.234 12.3495 126.23 12.6058 125.063 12.6058C122.588 12.6058 121.865 11.8369 121.865 10.4155V5.12621H116.659V10.7883C116.659 14.9359 119.6 17.1728 123.686 17.1728C125.203 17.1728 126.604 16.8466 127.794 16.2874V16.8466C127.794 18.9204 127 19.666 124.946 19.666C123.242 19.666 122.425 19.1534 122.191 17.965H116.962C117.383 22.2524 119.694 24 124.946 24C130.666 24 133 21.9029 133 16.4505V5.12621H127.794Z"
+          fill="#6D6AFE"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/src/asset/svg/LinkbraryLogo.tsx b/src/asset/svg/LinkbraryLogo.tsx
new file mode 100644
index 0000000000..15d8b47e3d
--- /dev/null
+++ b/src/asset/svg/LinkbraryLogo.tsx
@@ -0,0 +1,50 @@
+export default function Logo() {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="133"
+        height="24"
+        viewBox="0 0 133 24"
+        fill="none"
+      >
+        <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"
+        />
+        <path
+          d="M46.0405 10.0893V0H40.8347V20.2718H46.0405V16.7068L48.2116 14.167L50.7328 20.2718H56.4755L53.184 12.233H49.869L56.0087 5.12621H50.3359L46.0405 10.0893Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M67.0849 20.7379C70.2364 20.7379 74.1116 18.9437 74.1116 12.699C74.1116 6.45437 70.2364 4.66019 67.0849 4.66019C65.3341 4.66019 63.77 5.17281 62.5094 6.03495V0H57.3035V20.2718H62.5094V19.3631C63.77 20.2485 65.3341 20.7379 67.0849 20.7379ZM65.7076 16.1942C63.91 16.1942 62.5094 15.2854 62.5094 12.699V12.5126C62.5794 10.0893 63.9567 9.20388 65.7076 9.20388C67.7152 9.20388 68.9058 10.2524 68.9058 12.699C68.9058 15.1689 67.7152 16.1942 65.7076 16.1942Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M74.935 20.2718H80.1409V13.9573C80.1876 11.0214 81.5182 9.32039 86.1638 9.32039V4.66019C83.3624 4.66019 81.3781 5.63883 80.1409 7.1068V5.12621H74.935V20.2718Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M93.541 20.7379C95.2685 20.7379 96.8559 20.2485 98.1165 19.3631V20.2718H103.322V5.12621H98.1165V6.03495C96.8559 5.17281 95.2685 4.66019 93.541 4.66019C90.3895 4.66019 86.5143 6.45437 86.5143 12.699C86.5143 18.9437 90.3895 20.7379 93.541 20.7379ZM94.9183 16.1942C92.9107 16.1942 91.7201 15.1689 91.7201 12.699C91.7201 10.2524 92.9107 9.20388 94.9183 9.20388C96.7159 9.20388 98.1165 10.1359 98.1165 12.699C98.1165 15.2854 96.7159 16.1942 94.9183 16.1942Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M104.613 20.2718H109.819V13.9573C109.865 11.0214 111.196 9.32039 115.841 9.32039V4.66019C113.04 4.66019 111.056 5.63883 109.819 7.1068V5.12621H104.613V20.2718Z"
+          fill="#6D6AFE"
+        />
+        <path
+          d="M127.794 5.12621V11.7204C127.234 12.3495 126.23 12.6058 125.063 12.6058C122.588 12.6058 121.865 11.8369 121.865 10.4155V5.12621H116.659V10.7883C116.659 14.9359 119.6 17.1728 123.686 17.1728C125.203 17.1728 126.604 16.8466 127.794 16.2874V16.8466C127.794 18.9204 127 19.666 124.946 19.666C123.242 19.666 122.425 19.1534 122.191 17.965H116.962C117.383 22.2524 119.694 24 124.946 24C130.666 24 133 21.9029 133 16.4505V5.12621H127.794Z"
+          fill="#6D6AFE"
+        />
+      </svg>
+    </div>
+  );
+}
diff --git a/src/asset/svg/MagnifierIcon.tsx b/src/asset/svg/MagnifierIcon.tsx
new file mode 100644
index 0000000000..e5f6482383
--- /dev/null
+++ b/src/asset/svg/MagnifierIcon.tsx
@@ -0,0 +1,26 @@
+export default function MagnifierIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <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="#666666"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.0117 12.3232L14.3611 14.6665"
+        stroke="#666666"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/asset/svg/WhiteFacebookIcon.tsx b/src/asset/svg/WhiteFacebookIcon.tsx
new file mode 100644
index 0000000000..dfaf36514c
--- /dev/null
+++ b/src/asset/svg/WhiteFacebookIcon.tsx
@@ -0,0 +1,20 @@
+export default function WhiteFacebookIcon() {
+  return (
+    <a href="https://www.facebook.com" target="_blank">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M1 9.90279C1 14.3773 4.24975 18.098 8.5 18.8525V12.3523H6.25V9.85254H8.5V7.85229C8.5 5.60229 9.94975 4.35279 12.0002 4.35279C12.6497 4.35279 13.3503 4.45254 13.9998 4.55229V6.85254H12.85C11.7498 6.85254 11.5 7.40229 11.5 8.10279V9.85254H13.9L13.5002 12.3523H11.5V18.8525C15.7502 18.098 19 14.378 19 9.90279C19 4.92504 14.95 0.852539 10 0.852539C5.05 0.852539 1 4.92504 1 9.90279Z"
+          fill="white"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/src/asset/svg/WhiteInstagramIcon.tsx b/src/asset/svg/WhiteInstagramIcon.tsx
new file mode 100644
index 0000000000..6c6d5a69f2
--- /dev/null
+++ b/src/asset/svg/WhiteInstagramIcon.tsx
@@ -0,0 +1,18 @@
+export default function WhiteInstagramIcon() {
+  return (
+    <a href="https://www.instagram.com" target="_blank">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          d="M9.49787 7.518C7.93707 7.518 6.66333 8.79173 6.66333 10.3525C6.66333 11.9133 7.93707 13.1871 9.49787 13.1871C11.0587 13.1871 12.3324 11.9133 12.3324 10.3525C12.3324 8.79173 11.0587 7.518 9.49787 7.518ZM17.9994 10.3525C17.9994 9.17875 18.01 8.01558 17.9441 6.84392C17.8782 5.483 17.5677 4.27518 16.5725 3.28001C15.5752 2.28271 14.3695 1.97438 13.0086 1.90846C11.8348 1.84254 10.6717 1.85317 9.5 1.85317C8.32621 1.85317 7.16305 1.84254 5.99138 1.90846C4.63046 1.97438 3.42264 2.28484 2.42747 3.28001C1.43017 4.27731 1.12184 5.483 1.05592 6.84392C0.99 8.01771 1.00063 9.18087 1.00063 10.3525C1.00063 11.5242 0.99 12.6895 1.05592 13.8612C1.12184 15.2221 1.4323 16.4299 2.42747 17.4251C3.42477 18.4224 4.63046 18.7307 5.99138 18.7966C7.16517 18.8625 8.32833 18.8519 9.5 18.8519C10.6738 18.8519 11.837 18.8625 13.0086 18.7966C14.3695 18.7307 15.5774 18.4202 16.5725 17.4251C17.5698 16.4278 17.8782 15.2221 17.9441 13.8612C18.0121 12.6895 17.9994 11.5263 17.9994 10.3525ZM9.49787 14.7139C7.08437 14.7139 5.13655 12.766 5.13655 10.3525C5.13655 7.93903 7.08437 5.99122 9.49787 5.99122C11.9114 5.99122 13.8592 7.93903 13.8592 10.3525C13.8592 12.766 11.9114 14.7139 9.49787 14.7139ZM14.0378 6.83116C13.4743 6.83116 13.0193 6.3761 13.0193 5.8126C13.0193 5.24909 13.4743 4.79403 14.0378 4.79403C14.6013 4.79403 15.0564 5.24909 15.0564 5.8126C15.0565 5.9464 15.0303 6.07893 14.9792 6.20258C14.9281 6.32624 14.853 6.43859 14.7584 6.5332C14.6638 6.62782 14.5515 6.70284 14.4278 6.75397C14.3041 6.8051 14.1716 6.83133 14.0378 6.83116Z"
+          fill="white"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/src/asset/svg/WhiteTwitterIcon.tsx b/src/asset/svg/WhiteTwitterIcon.tsx
new file mode 100644
index 0000000000..57af2c9b72
--- /dev/null
+++ b/src/asset/svg/WhiteTwitterIcon.tsx
@@ -0,0 +1,18 @@
+export default function WhiteTwitterIcon() {
+  return (
+    <a href="https://twitter.com" target="_blank">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <path
+          d="M19.7029 4.11366C19.0071 4.42199 18.2596 4.63033 17.4737 4.72449C18.2846 4.23932 18.8912 3.47572 19.1804 2.57616C18.4186 3.02865 17.5849 3.34716 16.7154 3.51783C16.1307 2.89355 15.3563 2.47977 14.5124 2.34072C13.6684 2.20168 12.8022 2.34515 12.0481 2.74887C11.2941 3.15259 10.6944 3.79396 10.3422 4.57341C9.99003 5.35287 9.90503 6.22679 10.1004 7.05949C8.55682 6.98199 7.04677 6.58079 5.66827 5.88192C4.28977 5.18305 3.07362 4.20213 2.09875 3.00283C1.76542 3.57783 1.57375 4.24449 1.57375 4.95449C1.57338 5.59366 1.73078 6.22303 2.03198 6.78677C2.33319 7.35051 2.76888 7.83119 3.30042 8.18616C2.68398 8.16655 2.08114 7.99998 1.54208 7.70033V7.75033C1.54202 8.64678 1.85211 9.51564 2.41974 10.2095C2.98736 10.9033 3.77756 11.3794 4.65625 11.557C4.0844 11.7118 3.48486 11.7346 2.90292 11.6237C3.15083 12.395 3.63375 13.0695 4.28406 13.5528C4.93437 14.036 5.71951 14.3038 6.52958 14.3187C5.15444 15.3982 3.45616 15.9837 1.70792 15.9812C1.39823 15.9812 1.08881 15.9632 0.78125 15.927C2.55581 17.068 4.62153 17.6735 6.73125 17.6712C13.8729 17.6712 17.7771 11.7562 17.7771 6.62616C17.7771 6.45949 17.7729 6.29116 17.7654 6.12449C18.5248 5.57531 19.1803 4.89524 19.7013 4.11616L19.7029 4.11366Z"
+          fill="white"
+        />
+      </svg>
+    </a>
+  );
+}
diff --git a/src/asset/svg/WhiteYoutubeIcon.tsx b/src/asset/svg/WhiteYoutubeIcon.tsx
new file mode 100644
index 0000000000..d36247d0e3
--- /dev/null
+++ b/src/asset/svg/WhiteYoutubeIcon.tsx
@@ -0,0 +1,25 @@
+export default function WhiteYoutubeIcon() {
+  return (
+    <a href="https://www.youtube.com" target="_blank">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+      >
+        <g clipPath="url(#clip0_6956_69668)">
+          <path
+            d="M19.5838 5.4224C19.4706 5.01843 19.25 4.65269 18.9455 4.36407C18.6324 4.06657 18.2487 3.85376 17.8305 3.74573C16.2655 3.33323 9.99551 3.33323 9.99551 3.33323C7.38162 3.30349 4.76837 3.4343 2.17051 3.7249C1.75234 3.84091 1.36932 4.05847 1.05551 4.35823C0.747181 4.6549 0.523848 5.02073 0.407181 5.42157C0.126925 6.93135 -0.00924233 8.46435 0.000514319 9.9999C-0.00948568 11.5341 0.126348 13.0666 0.407181 14.5782C0.521348 14.9774 0.743848 15.3416 1.05301 15.6357C1.36218 15.9299 1.74718 16.1424 2.17051 16.2549C3.75635 16.6666 9.99551 16.6666 9.99551 16.6666C12.6127 16.6963 15.2293 16.5655 17.8305 16.2749C18.2487 16.1669 18.6324 15.9541 18.9455 15.6566C19.2499 15.368 19.4702 15.0022 19.583 14.5982C19.8706 13.089 20.0104 11.5554 20.0005 10.0191C20.0221 8.47624 19.8825 6.93537 19.5838 5.42157V5.4224ZM8.00218 12.8532V7.1474L13.2188 10.0007L8.00218 12.8532Z"
+            fill="white"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_6956_69668">
+            <rect width="20" height="20" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </a>
+  );
+}
diff --git a/src/asset/svg/XIcon.tsx b/src/asset/svg/XIcon.tsx
new file mode 100644
index 0000000000..6a9f4245dd
--- /dev/null
+++ b/src/asset/svg/XIcon.tsx
@@ -0,0 +1,25 @@
+export default function XIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <circle cx="12" cy="12" r="12" fill="#CCD5E3" />
+      <path
+        d="M8 8L16 16"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+      <path
+        d="M16 8L8 16"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/AuthForm/AuthLabel/AuthLabel.tsx b/src/components/AuthForm/AuthLabel/AuthLabel.tsx
new file mode 100644
index 0000000000..478a984ffc
--- /dev/null
+++ b/src/components/AuthForm/AuthLabel/AuthLabel.tsx
@@ -0,0 +1,10 @@
+// import Input from "../../Input/Input";
+
+// export default function AuthLabel({ isError, errorMessage }) {
+//   return (
+//     <>
+//       <Input />
+//       {isError && <div>{errorMessage}</div>}
+//     </>
+//   );
+// }
diff --git a/src/components/Footer/Footer/Footer.module.scss b/src/components/Footer/Footer/Footer.module.scss
new file mode 100644
index 0000000000..f39a043ffc
--- /dev/null
+++ b/src/components/Footer/Footer/Footer.module.scss
@@ -0,0 +1,22 @@
+.footer {
+  padding: 32px 104px 62px;
+  display: flex;
+  align-items: center;
+  background: #111322;
+  justify-content: space-between;
+  font-family: Arial;
+  font-size: 16px;
+  font-weight: 400;
+  color: #676767;
+  text-decoration: none;
+
+  .linkBox {
+    display: flex;
+    gap: 30px;
+  }
+
+  .snsBox {
+    display: flex;
+    gap: 12px;
+  }
+}
diff --git a/src/components/Footer/Footer/Footer.tsx b/src/components/Footer/Footer/Footer.tsx
new file mode 100644
index 0000000000..b928016bff
--- /dev/null
+++ b/src/components/Footer/Footer/Footer.tsx
@@ -0,0 +1,34 @@
+import {
+  WhiteFacebookIcon,
+  WhiteYoutubeIcon,
+  WhiteTwitterIcon,
+  WhiteInstagramIcon,
+} from "@/src/asset/";
+import styles from "./Footer.module.scss";
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <p className={styles.codeit}>©codeit - 2024</p>
+      <div className={styles.linkBox}>
+        <Link href="/">Privacy Policy</Link>
+        <Link href="/">FAQ</Link>
+      </div>
+      <ul className={styles.snsBox}>
+        <li>
+          <WhiteFacebookIcon />
+        </li>
+        <li>
+          <WhiteTwitterIcon />
+        </li>
+        <li>
+          <WhiteYoutubeIcon />
+        </li>
+        <li>
+          <WhiteInstagramIcon />
+        </li>
+      </ul>
+    </footer>
+  );
+}
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000000..5befcc4bec
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1 @@
+export { default as Footer } from "./Footer/Footer";
diff --git a/src/components/Header/Header/Header.module.scss b/src/components/Header/Header/Header.module.scss
new file mode 100644
index 0000000000..b9f976a9fe
--- /dev/null
+++ b/src/components/Header/Header/Header.module.scss
@@ -0,0 +1,53 @@
+.header {
+  width: 100%;
+  background: var(--Linkbrary-bg, #f0f6ff);
+  z-index: 2;
+
+  .headerBox {
+    padding: 20px 32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    max-width: 1124px;
+    margin: 0 auto;
+  }
+
+  .loginBtn {
+    display: flex;
+    width: 128px;
+    padding: 16px 20px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 8px;
+    background: var(
+      --gra-purpleblue-to-skyblue,
+      linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+    );
+    color: var(--Grey-Light, #f5f5f5);
+    font-size: 18px;
+    font-weight: 600;
+    border: none;
+  }
+
+  .profileBox {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    height: 53px;
+
+    .profileBox__img {
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      fill: var(--Linkbrary-primary-color, #6d6afe);
+    }
+
+    .profileBox__email {
+      color: var(--Linkbrary-gray100, #373740);
+      font-size: 14px;
+      font-weight: 400;
+    }
+  }
+}
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
new file mode 100644
index 0000000000..de27b24d21
--- /dev/null
+++ b/src/components/Header/Header/Header.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { LinkbraryLogo } from "@/src/asset";
+import styles from "./Header.module.scss";
+import { END_POINT } from "@/src/constants";
+import Image from "next/image";
+import { useFetchData } from "@/src/hooks/useFetchData";
+
+export default async function Header() {
+  const userData = await useFetchData(END_POINT.USER);
+  const { image_source, email } = userData.data[0];
+
+  return (
+    <header className={styles.header}>
+      <nav className={styles.headerBox}>
+        <Link href="/">
+          <LinkbraryLogo />
+        </Link>
+        {userData ? (
+          <section className={styles.profileBox}>
+            <Image
+              className={styles.profileBox__img}
+              src={image_source}
+              width={28}
+              height={28}
+              alt="user profile"
+            />
+            <p className={styles.profileBox__email}>{email}</p>
+          </section>
+        ) : (
+          <button className={styles.loginBtn}>로그인</button>
+        )}
+      </nav>
+    </header>
+  );
+}
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000000..df45cb40a8
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default as Header } from "./Header/Header";
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
new file mode 100644
index 0000000000..5e68867f22
--- /dev/null
+++ b/src/components/Input/Input.tsx
@@ -0,0 +1,3 @@
+export default function Input() {
+  return <input />;
+}
diff --git a/src/components/LinkManager/AddLinkBar/AddLinkBar.module.scss b/src/components/LinkManager/AddLinkBar/AddLinkBar.module.scss
new file mode 100644
index 0000000000..dc0a692d31
--- /dev/null
+++ b/src/components/LinkManager/AddLinkBar/AddLinkBar.module.scss
@@ -0,0 +1,48 @@
+.AddLinkBar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+  position: static;
+
+  .form {
+    display: flex;
+    max-width: 1060px;
+    width: 100%;
+    padding: 16px 20px;
+    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+    border-radius: 15px;
+    border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+    background: var(--Linkbrary-white, #fff);
+
+    .inputBox {
+      display: flex;
+      gap: 10px;
+
+      .input {
+        border: none;
+        background-color: transparent;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    .inputBtn {
+      width: 80px;
+      padding: 10px 16px;
+      border-radius: 8px;
+      background: var(
+        --gra-purpleblue-to-skyblue,
+        linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+      );
+      color: var(--Grey-Light, #f5f5f5);
+      font-size: 12px;
+      font-weight: 600;
+      border: none;
+    }
+  }
+}
diff --git a/src/components/LinkManager/AddLinkBar/AddLinkBar.tsx b/src/components/LinkManager/AddLinkBar/AddLinkBar.tsx
new file mode 100644
index 0000000000..050a4297fe
--- /dev/null
+++ b/src/components/LinkManager/AddLinkBar/AddLinkBar.tsx
@@ -0,0 +1,27 @@
+import { ChainIcon } from "@/src/asset";
+import styles from "./AddLinkBar.module.scss";
+import { RefObject } from "react";
+
+interface AddLinkBar {
+  addLinkBarRef?: RefObject<HTMLDivElement>;
+  className?: string;
+}
+
+export default function AddLinkBar() {
+  return (
+    <section className={styles.AddLinkBar}>
+      <div className={styles.form}>
+        <div className={styles.inputBox}>
+          <ChainIcon />
+          <input
+            className={styles.input}
+            placeholder="링크를 추가해 보세요"
+            type="text"
+          />
+        </div>
+        {/* 모달로 변경 예정 */}
+        <button className={styles.inputBtn}>추가하기</button>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss
new file mode 100644
index 0000000000..26b84c8c21
--- /dev/null
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.module.scss
@@ -0,0 +1,22 @@
+.FavoriteButton {
+  display: inline-flex;
+  padding: 8px 12px;
+  align-items: center;
+  height: 36px;
+  border-radius: 5px;
+  border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+  background: #fff;
+  color: #000;
+  font-size: 16px;
+  font-weight: 400;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--Linkbrary-gray10, #e7effb);
+  }
+
+  &:focus {
+    color: #fff;
+    background: var(--Linkbrary-primary-color, #6d6afe);
+  }
+}
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
new file mode 100644
index 0000000000..9870cbd606
--- /dev/null
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
@@ -0,0 +1,22 @@
+import { Favorite } from "@/src/constants/types";
+import styles from "./FavoriteButton.module.scss";
+
+interface FavoriteButton {
+  favorite?: Favorite;
+  handlefavoriteClick: (favorite?: Favorite | null) => void;
+}
+
+export default function FavoriteButton({
+  favorite,
+  handlefavoriteClick,
+}: FavoriteButton) {
+  const { name, id } = favorite || { name: "전체", id: null };
+  return (
+    <button
+      className={styles.FavoriteButton}
+      onClick={() => handlefavoriteClick(favorite)}
+    >
+      {name}
+    </button>
+  );
+}
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.module.scss b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.module.scss
new file mode 100644
index 0000000000..ef38704115
--- /dev/null
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.module.scss
@@ -0,0 +1,28 @@
+.FavoriteButtonList {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .totalBtn {
+    display: inline-flex;
+    padding: 8px 12px;
+    align-items: center;
+    height: 36px;
+    border-radius: 5px;
+    border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+    background: #fff;
+    color: #000;
+    font-size: 16px;
+    font-weight: 400;
+    flex-shrink: 0;
+
+    &:hover {
+      background: var(--Linkbrary-gray10, #e7effb);
+    }
+
+    &:focus {
+      color: #fff;
+      background: var(--Linkbrary-primary-color, #6d6afe);
+    }
+  }
+}
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
new file mode 100644
index 0000000000..a9fc27bd2e
--- /dev/null
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
@@ -0,0 +1,27 @@
+import { Favorite } from "@/src/constants/types";
+import FavoriteButton from "./FavoriteButton/FavoriteButton";
+import styles from "./FavoriteButtonList.module.scss";
+
+interface FavoriteButtonList {
+  favorites?: Favorite[];
+  handlefavoriteClick: (favorite?: Favorite | null) => void;
+}
+
+export default function FavoriteButtonList({
+  favorites,
+  handlefavoriteClick,
+}: FavoriteButtonList) {
+  return (
+    <section className={styles.FavoriteButtonList}>
+      <FavoriteButton handlefavoriteClick={handlefavoriteClick} />
+      {favorites &&
+        favorites.map((favorite) => (
+          <FavoriteButton
+            key={favorite.id}
+            favorite={favorite}
+            handlefavoriteClick={handlefavoriteClick}
+          />
+        ))}
+    </section>
+  );
+}
diff --git a/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.module.scss b/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.module.scss
new file mode 100644
index 0000000000..98dec156c5
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.module.scss
@@ -0,0 +1,16 @@
+.LinksEmptyCase {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  padding-top: 40px;
+  padding-bottom: 40px;
+  height: 50vh;
+  text-align: center;
+
+  .text {
+    color: #000;
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
diff --git a/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.tsx b/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.tsx
new file mode 100644
index 0000000000..2fca8ddeb8
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkEmptyCase/LinkEmptyCase.tsx
@@ -0,0 +1,9 @@
+import styles from "./LinkEmptyCase.module.scss";
+
+export default function LinkEmptyCase() {
+  return (
+    <section className={styles.LinksEmptyCase}>
+      <p className={styles.text}>저장된 링크가 없습니다</p>
+    </section>
+  );
+}
diff --git a/src/components/LinkManager/LinkList/LinkList.module.scss b/src/components/LinkManager/LinkList/LinkList.module.scss
new file mode 100644
index 0000000000..372b50606e
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkList.module.scss
@@ -0,0 +1,7 @@
+.linkList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  column-gap: 20px;
+  row-gap: 24px;
+}
diff --git a/src/components/LinkManager/LinkList/LinkList.tsx b/src/components/LinkManager/LinkList/LinkList.tsx
new file mode 100644
index 0000000000..b7101f3e93
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkList.tsx
@@ -0,0 +1,17 @@
+import { Link } from "@/src/constants/types";
+import LinkOverview from "./LinkOverview/LinkOverView";
+import styles from "./LinkList.module.scss";
+
+interface LinkList {
+  links: Link[];
+}
+
+export default function LinkList({ links }: LinkList) {
+  return (
+    <section className={styles.linkList}>
+      {links?.map((link) => (
+        <LinkOverview link={link} key={link.id} />
+      ))}
+    </section>
+  );
+}
diff --git a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
new file mode 100644
index 0000000000..787c6d3c28
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
@@ -0,0 +1,49 @@
+import Link from "next/link";
+import styles from "./LinkOverview.module.scss";
+import { Link as LinkType } from "@/src/constants/types";
+import getElapsedTime from "@/src/utils/getElapsedTime";
+import getFormattedDate from "@/src/utils/getFormattedDate";
+import { LinkImageEmptyCase } from "@/src/asset/";
+import Image from "next/image";
+
+interface LinkOverview {
+  link: LinkType;
+}
+
+export default function LinkOverview({ link }: LinkOverview) {
+  const { imageSource: imageUrl, createdAt, description, title, url } = link;
+  const createDate = getElapsedTime(createdAt);
+  const formatDate = getFormattedDate(createdAt);
+
+  // 서버 Image-url이 문제가 있어서 그냥 null처리 했읍니다
+  function fixedUrl(url: string) {
+    if (!url) return null;
+
+    if (url.startsWith(`https:`)) {
+      return url;
+    } else {
+      return null;
+    }
+  }
+
+  const imageSource = fixedUrl(imageUrl);
+
+  return (
+    <Link href={url} className={styles.LinkOverview}>
+      {imageSource ? (
+        <figure className={styles.imgBox}>
+          <Image width={340} height={200} src={imageSource} alt={title} />
+        </figure>
+      ) : (
+        <figure className={styles.emptyCaseBox}>
+          <LinkImageEmptyCase />
+        </figure>
+      )}
+      <figcaption className={styles.caption}>
+        <time className={styles.updatedAt}>{createDate}</time>
+        <p className={styles.description}>{description}</p>
+        <time className={styles.createdAt}>{formatDate}</time>
+      </figcaption>
+    </Link>
+  );
+}
diff --git a/src/components/LinkManager/LinkList/LinkOverview/LinkOverview.module.scss b/src/components/LinkManager/LinkList/LinkOverview/LinkOverview.module.scss
new file mode 100644
index 0000000000..f7020c49b4
--- /dev/null
+++ b/src/components/LinkManager/LinkList/LinkOverview/LinkOverview.module.scss
@@ -0,0 +1,68 @@
+.LinkOverview {
+  max-width: 340px;
+  width: 100%;
+  height: 334px;
+  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 15px;
+  overflow: hidden;
+  text-decoration: none;
+  flex-shrink: 0;
+
+  .imgBox {
+    height: 200px;
+
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .caption {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 20px;
+    align-items: flex-start;
+    height: 134px;
+
+    .updatedAt {
+      color: #666;
+      font-size: 13px;
+      font-weight: 400;
+      flex-grow: 1;
+    }
+
+    .description {
+      color: #000;
+      overflow: hidden;
+      white-space: normal;
+      text-overflow: ellipsis;
+      font-size: 16px;
+      line-height: 24px;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      flex-grow: 1;
+    }
+
+    .createAt {
+      color: #333;
+      font-size: 14px;
+      font-weight: 400;
+      flex-grow: 1;
+    }
+  }
+
+  .emptyCaseBox {
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #dddfff;
+  }
+
+  &:hover {
+    transform: scale(1.06);
+    transition: transform 0.3s ease;
+  }
+}
diff --git a/src/components/LinkManager/LinkManager.module.scss b/src/components/LinkManager/LinkManager.module.scss
new file mode 100644
index 0000000000..fd07ba2280
--- /dev/null
+++ b/src/components/LinkManager/LinkManager.module.scss
@@ -0,0 +1,22 @@
+.LinkManager {
+  width: 100%;
+
+  .addLinkManager {
+    padding: 60px 32px 90px;
+    background: var(--Linkbrary-bg, #f0f6ff);
+    position: relative;
+  }
+
+  .fixedAddLinkManager {
+    visibility: hidden;
+  }
+
+  .addLinkBarVisible {
+    position: fixed;
+    bottom: 0;
+    visibility: visible;
+    width: 100%;
+    padding: 24px 32px;
+    background: var(--Linkbrary-bg, #f0f6ff);
+  }
+}
diff --git a/src/components/LinkManager/LinkManager.tsx b/src/components/LinkManager/LinkManager.tsx
new file mode 100644
index 0000000000..631fb33e64
--- /dev/null
+++ b/src/components/LinkManager/LinkManager.tsx
@@ -0,0 +1,135 @@
+// client component 선언
+"use client";
+// react
+import { ChangeEvent, use, useEffect, useRef, useState } from "react";
+// fetch API
+import { END_POINT } from "@/src/constants";
+// component
+import LinkList from "./LinkList/LinkList";
+import FavoriteButtonList from "./FavoriteButtonList/FavoriteButtonList";
+import LinkSearchBar from "./LinkSearchBar/LinkSearchBar";
+import LinkEmptyCase from "./LinkList/LinkEmptyCase/LinkEmptyCase";
+import AddLinkBar from "./AddLinkBar/AddLinkBar";
+import UserProfile from "./UserProfile/UserProfile";
+// types
+import {
+  Favorite,
+  Link as LinkType,
+  SharedPageTypes,
+} from "@/src/constants/types";
+// utils
+import getFormattedLinks from "@/src/utils/getFormattedLinks";
+import useIntersectionObserver from "@/src/hooks/useIntersectionObserver";
+// style sheet
+import styles from "./LinkManager.module.scss";
+
+interface LinkManager {
+  links: LinkType[];
+  favorites?: Favorite[];
+  userProfile?: SharedPageTypes;
+}
+
+export default function LinkManager({
+  links,
+  favorites,
+  userProfile,
+}: LinkManager) {
+  // 렌더링되는 Links 배열 상태
+  const [favoriteLinks, setFavoriteLinks] = useState(links);
+  // LinkList title 상태
+  const [favoriteTitle, setFavoriteTitle] = useState("전체");
+  // LinkSearchBar의 입력 value 상태
+  const [searchValue, setSearchValue] = useState("");
+  // targetRef of intersectionObserver
+  const addLinkBarRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+  // targetRef로 상태 설정
+  const isAddLinkBarIntersecting = useIntersectionObserver({
+    targetRef: addLinkBarRef,
+  });
+  const isFooterIntersecting = useIntersectionObserver({
+    targetRef: footerRef,
+  });
+
+  // intersectionObserver의 상태로 style 변경
+  const className =
+    isAddLinkBarIntersecting || isFooterIntersecting
+      ? null
+      : styles.addLinkBarVisible;
+
+  // test
+  // const got = use(fetch(`${END_POINT.LINKS}`));
+
+  // favoriteBotton의 onClickEvent
+  const handlefavoriteClick = async (favorite?: Favorite | null) => {
+    // favorite id값으로 다시 fetch
+    if (favorite) {
+      const res = await fetch(`${END_POINT.LINKS}?folderId=${favorite.id}`);
+      const result = await res.json();
+
+      setFavoriteTitle(favorite.name);
+      setFavoriteLinks(getFormattedLinks(result.data));
+      return;
+    }
+    // favorite 값이 없는 button이면 리셋
+    setFavoriteTitle("전체");
+    setFavoriteLinks(links);
+  };
+
+  // LinkSearchBar의 onChangeEvent
+  const handleLinkSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  // LinkSearchBar의 onChangeEvent 발생 시 links filtering
+  // 훅이나 함수로 분리 가능할까요? 시도해보았지만 접근이 잘 안됩니다
+  // filteredLinks 함수만 따로 분리하는게 나을까요?
+  useEffect(() => {
+    if (searchValue === "") {
+      setFavoriteLinks(links);
+      return;
+    }
+
+    const filteredLinks = links.filter((link) => {
+      return Object.values(link)
+        .join("")
+        .toLowerCase()
+        .includes(searchValue.toLowerCase());
+    });
+    setFavoriteLinks(filteredLinks);
+  }, [searchValue, links]);
+
+  return (
+    <main className={styles.LinkManager}>
+      {userProfile ? (
+        <UserProfile userProfile={userProfile} />
+      ) : (
+        <div className={styles.addLinkManager} ref={addLinkBarRef}>
+          <AddLinkBar />
+        </div>
+      )}
+      <LinkSearchBar handleLinkSearch={handleLinkSearch} />
+      {favorites && (
+        <>
+          <FavoriteButtonList
+            favorites={favorites}
+            handlefavoriteClick={handlefavoriteClick}
+          />
+          <div>
+            <h1>{favoriteTitle}</h1>
+          </div>
+        </>
+      )}
+      {favoriteLinks && favoriteLinks.length > 0 ? (
+        <LinkList links={favoriteLinks} />
+      ) : (
+        <LinkEmptyCase />
+      )}
+      {/* footer의 ref를 잡을 수 없어서 임의로 만들었습니다 */}
+      <div ref={footerRef}></div>
+      <div className={`${styles.fixedAddLinkManager} ${className}`}>
+        <AddLinkBar />
+      </div>
+    </main>
+  );
+}
diff --git a/src/components/LinkManager/LinkSearchBar/LinkSearchBar.module.scss b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.module.scss
new file mode 100644
index 0000000000..590e98f13d
--- /dev/null
+++ b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.module.scss
@@ -0,0 +1,35 @@
+.LinkSearchBar {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 10px;
+  background: #f5f5f5;
+  padding: 16px;
+  width: 100%;
+  position: relative;
+
+  .input {
+    color: var(--Text, #666);
+    font-size: 16px;
+    font-weight: 400;
+    border: none;
+    background-color: transparent;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .input[type="search"]::-webkit-search-cancel-button {
+    opacity: 0;
+    width: 24px;
+  }
+
+  .cancelIcon {
+    position: absolute;
+    right: 20px;
+    pointer-events: none;
+  }
+}
diff --git a/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
new file mode 100644
index 0000000000..8d2ac6a2dd
--- /dev/null
+++ b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
@@ -0,0 +1,24 @@
+import { MagnifierIcon, XIcon } from "@/src/asset";
+import styles from "./LinkSearchBar.module.scss";
+import { ChangeEvent } from "react";
+
+interface LinkSearchBar {
+  handleLinkSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function LinkSearchBar({ handleLinkSearch }: LinkSearchBar) {
+  return (
+    <div className={styles.LinkSearchBar}>
+      <MagnifierIcon />
+      <input
+        className={styles.input}
+        onChange={handleLinkSearch}
+        placeholder="링크를 검색해 보세요."
+        type="search"
+      />
+      <div className={styles.cancelIcon}>
+        <XIcon />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/LinkManager/UserProfile/UserProfile.module.scss b/src/components/LinkManager/UserProfile/UserProfile.module.scss
new file mode 100644
index 0000000000..f32a15d640
--- /dev/null
+++ b/src/components/LinkManager/UserProfile/UserProfile.module.scss
@@ -0,0 +1,35 @@
+.UserProfile {
+  padding-top: 113px;
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-bottom: 60px;
+  background: var(--Linkbrary-bg, #f0f6ff);
+
+  .profileInfos {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #000;
+    gap: 12px;
+
+    .profileImg {
+      width: 60px;
+      padding: 4px;
+      border-radius: 47px;
+      background: var(--primary-purple-70, #8f00ff);
+    }
+
+    .profileName {
+      font-size: 16px;
+      font-weight: 400;
+    }
+
+    .folderName {
+      font-feature-settings: "clig" off, "liga" off;
+      font-size: 40px;
+      font-weight: 600;
+      padding-top: 6px;
+    }
+  }
+}
diff --git a/src/components/LinkManager/UserProfile/UserProfile.tsx b/src/components/LinkManager/UserProfile/UserProfile.tsx
new file mode 100644
index 0000000000..c61a241145
--- /dev/null
+++ b/src/components/LinkManager/UserProfile/UserProfile.tsx
@@ -0,0 +1,26 @@
+import Image from "next/image";
+import styles from "./UserProfile.module.scss";
+import { SharedPageTypes } from "@/src/constants/types";
+
+interface UserProfile {
+  userProfile: SharedPageTypes;
+}
+
+export default function UserProfile({ userProfile }: UserProfile) {
+  const { name, owner } = userProfile;
+  return (
+    <section className={styles.UserProfile}>
+      <article className={styles.profileInfos}>
+        <Image
+          className={styles.profileImg}
+          src={owner.profileImageSource}
+          width={60}
+          height={60}
+          alt="user profile image"
+        />
+        <p className={styles.profileName}>{owner.name}</p>
+        <span className={styles.folderName}>{name}</span>
+      </article>
+    </section>
+  );
+}
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 0000000000..3fe3b0a94a
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,14 @@
+const API_BASE_URL = "https://bootcamp-api.codeit.kr/api/";
+const Team_ID = 11;
+
+const SHARED_LINKS = `${API_BASE_URL}sample/folder`;
+const FOLDERS = `${API_BASE_URL}users/${Team_ID}/folders`;
+const LINKS = `${API_BASE_URL}users/${Team_ID}/links`;
+const USER = `${API_BASE_URL}users/1`;
+
+export const END_POINT = {
+  FOLDERS,
+  LINKS,
+  USER,
+  SHARED_LINKS,
+};
diff --git a/src/constants/types.ts b/src/constants/types.ts
new file mode 100644
index 0000000000..2ac0e50de5
--- /dev/null
+++ b/src/constants/types.ts
@@ -0,0 +1,38 @@
+export interface Link {
+  id: string;
+  imageSource: string;
+  createdAt: Date;
+  description: string;
+  title: string;
+  url: string;
+}
+
+export interface Favorite {
+  id: number;
+  created_at: Date;
+  name: string;
+  user_id: number;
+  favorite: boolean;
+  link: {
+    count: number;
+  };
+}
+
+export interface SharedPageTypes {
+  name: string;
+  owner: {
+    profileImageSource: string;
+    name: string;
+  };
+  links: Link[];
+  count: number;
+}
+
+export interface FormatLink {
+  id: string;
+  image_source: string;
+  created_at: Date;
+  description: string;
+  title: string;
+  url: string;
+}
diff --git a/src/hooks/useFetchData.ts b/src/hooks/useFetchData.ts
new file mode 100644
index 0000000000..7836ddc30c
--- /dev/null
+++ b/src/hooks/useFetchData.ts
@@ -0,0 +1,12 @@
+export const useFetchData = async (url: string) => {
+  try {
+    const res = await fetch(url);
+    const result = await res.json();
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      // alert(error.message);
+      console.error(error.message);
+    }
+  }
+};
diff --git a/src/hooks/useGetData.ts b/src/hooks/useGetData.ts
new file mode 100644
index 0000000000..e6faee23d4
--- /dev/null
+++ b/src/hooks/useGetData.ts
@@ -0,0 +1,21 @@
+// import { useEffect, useState } from "react";
+
+// export default function useGetData(url: string) {
+//   const [data, setData] = useState([]);
+
+//   useEffect(() => {
+//     const fetchData = async (url: string) => {
+//       try {
+//         const res = await fetch(url);
+//         const result = await res.json();
+//         setData(result);
+//       } catch (error) {
+//         console.error(error);
+//       }
+//     };
+
+//     fetchData(url);
+//   }, [url]);
+
+//   return { data, fallback: true };
+// }
diff --git a/src/hooks/useIntersectionObserver.ts b/src/hooks/useIntersectionObserver.ts
new file mode 100644
index 0000000000..a62ac63ea3
--- /dev/null
+++ b/src/hooks/useIntersectionObserver.ts
@@ -0,0 +1,37 @@
+import { RefObject, useEffect, useState } from "react";
+
+interface useIntersectionObserver {
+  targetRef: RefObject<HTMLElement>;
+  threshold?: number;
+}
+
+export default function useIntersectionObserver({
+  targetRef,
+  threshold = 0,
+}: useIntersectionObserver) {
+  // 주시 상태
+  const [isIntersecting, setIsIntersecting] = useState(false);
+
+  useEffect(() => {
+    // observer 생성
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          // entry 객체가 threshold 문턱 % 만큼 보이면 isIntersecting true
+          setIsIntersecting(entry.isIntersecting);
+        });
+      },
+      { threshold }
+    );
+
+    if (targetRef.current) {
+      observer.observe(targetRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [targetRef, threshold]);
+
+  return isIntersecting;
+}
diff --git a/src/styles/global.scss b/src/styles/global.scss
new file mode 100644
index 0000000000..a86b73de29
--- /dev/null
+++ b/src/styles/global.scss
@@ -0,0 +1,18 @@
+@import "./reset.scss";
+
+:root {
+  --Linkbrary-primary-color: #6d6afe;
+  --Linkbrary-red: #ff5b56;
+  --The-julge-black: #111322;
+  --Linkbrary-white: #ffffff;
+  --Linkbrary-gray100: #3e3e43;
+  --Linkbrary-gray60: #9fa6b2;
+  --Linkbrary-gray20: #ccd5e3;
+  --Linkbrary-gray10: #e7effb;
+  --Linkbrary-bg: #f0f6ff;
+}
+
+* {
+  box-sizing: border-box;
+  font-family: "Pretendard", "Arial";
+}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 0000000000..18f92f122c
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+  v2.0 | 20110126
+  License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/src/utils/getElapsedTime.ts b/src/utils/getElapsedTime.ts
new file mode 100644
index 0000000000..7b667ee93a
--- /dev/null
+++ b/src/utils/getElapsedTime.ts
@@ -0,0 +1,41 @@
+export default function getElapsedTime(createAt: Date) {
+  const currentDate = new Date();
+  const createdDate = new Date(createAt);
+  const elapsedTimeInMinutes = Math.floor(
+    (currentDate.getTime() - createdDate.getTime()) / (1000 * 60)
+  );
+
+  if (elapsedTimeInMinutes < 2) {
+    return "1 minute ago";
+  } else if (elapsedTimeInMinutes <= 59) {
+    return `${elapsedTimeInMinutes} minutes ago`;
+  }
+
+  const elapsedTimeInHours = Math.floor(elapsedTimeInMinutes / 60);
+  if (elapsedTimeInHours === 1) {
+    return "1 hour ago";
+  } else if (elapsedTimeInHours <= 23) {
+    return `${elapsedTimeInHours} hours ago`;
+  }
+
+  const elapsedTimeInDays = Math.floor(elapsedTimeInHours / 24);
+  if (elapsedTimeInDays === 1) {
+    return "1 day ago";
+  } else if (elapsedTimeInDays <= 30) {
+    return `${elapsedTimeInDays} days ago`;
+  }
+
+  const elapsedTimeInMonths = Math.floor(elapsedTimeInDays / 30);
+  if (elapsedTimeInMonths === 1) {
+    return "1 month ago";
+  } else if (elapsedTimeInMonths <= 11) {
+    return `${elapsedTimeInMonths} months ago`;
+  }
+
+  const elapsedTimeInYears = Math.floor(elapsedTimeInMonths / 12);
+  if (elapsedTimeInYears === 1) {
+    return "1 year ago";
+  } else {
+    return `${elapsedTimeInYears} years ago`;
+  }
+}
diff --git a/src/utils/getFormattedDate.ts b/src/utils/getFormattedDate.ts
new file mode 100644
index 0000000000..24baba7604
--- /dev/null
+++ b/src/utils/getFormattedDate.ts
@@ -0,0 +1,7 @@
+export default function getFormattedDate(value: Date) {
+  const date = new Date(value);
+  const year = date.getFullYear();
+  const month = (date.getMonth() + 1).toString().padStart(2, "0");
+  const day = date.getDate().toString().padStart(2, "0");
+  return `${year}. ${month}. ${day}`;
+}
diff --git a/src/utils/getFormattedLinks.ts b/src/utils/getFormattedLinks.ts
new file mode 100644
index 0000000000..aca6d1a9d0
--- /dev/null
+++ b/src/utils/getFormattedLinks.ts
@@ -0,0 +1,21 @@
+import { FormatLink } from "../constants/types";
+
+function formatLinkData(link: FormatLink) {
+  return {
+    id: link.id,
+    imageSource: link.image_source,
+    createdAt: link.created_at,
+    description: link.description,
+    title: link.title,
+    url: link.url,
+  };
+}
+
+export default function getFormattedLinks(links: FormatLink[]) {
+  return (
+    links &&
+    links.map((link: FormatLink) => {
+      return formatLinkData(link);
+    })
+  );
+}
diff --git a/styles/Home.module.css b/styles/Home.module.css
deleted file mode 100644
index 6676d2c66b..0000000000
--- a/styles/Home.module.css
+++ /dev/null
@@ -1,229 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: '';
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index d4f491e152..0000000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}
diff --git a/tsconfig.json b/tsconfig.json
index 670224f3e9..d56de96252 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -13,10 +12,21 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/types/app/page.tsx"
+  ],
   "exclude": ["node_modules"]
 }

From 510a38f13f77f834562bc77757bc1c702d3ce6e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Tue, 2 Apr 2024 00:13:19 +0900
Subject: [PATCH 02/17] =?UTF-8?q?refactor:=20pr=20=EC=A7=80=EC=A0=81?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/folder/page.tsx                           | 11 +----
 app/layout.tsx                                |  7 +---
 app/shared/page.tsx                           |  4 +-
 src/asset/index.ts                            |  4 +-
 src/asset/svg/ChainIcon.tsx                   | 42 +++++++++----------
 src/asset/svg/EyeIcon.tsx                     |  4 +-
 ...ptyCase.tsx => LinkImageEmptyCaseIcon.tsx} |  2 +-
 .../{LinkbraryLogo.tsx => LinkbraryIcon.tsx}  |  2 +-
 src/asset/svg/WhiteFacebookIcon.tsx           | 30 +++++++------
 src/asset/svg/WhiteInstagramIcon.tsx          | 26 ++++++------
 src/asset/svg/WhiteTwitterIcon.tsx            | 26 ++++++------
 src/asset/svg/WhiteYoutubeIcon.tsx            | 40 +++++++++---------
 src/components/Footer/Footer/Footer.tsx       | 16 +++++--
 src/components/Header/Header/Header.tsx       |  4 +-
 .../FavoriteButton/FavoriteButton.tsx         | 10 ++---
 .../FavoriteButtonList/FavoriteButtonList.tsx |  8 ++--
 .../LinkManager/LinkList/LinkList.tsx         |  6 +--
 .../LinkList/LinkOverview/LinkOverView.tsx    | 32 +++++++-------
 src/components/LinkManager/LinkManager.tsx    | 30 ++++++-------
 .../LinkSearchBar/LinkSearchBar.tsx           | 18 +++++---
 .../LinkManager/UserProfile/UserProfile.tsx   |  9 ++--
 src/constants/index.ts                        |  6 +--
 src/constants/types.ts                        |  8 ++--
 src/utils/getElapsedTime.ts                   |  2 +-
 src/utils/getFormattedDate.ts                 |  2 +-
 src/utils/getFormattedLinks.ts                |  2 +-
 src/utils/getValidUrl.ts                      |  7 ++++
 27 files changed, 178 insertions(+), 180 deletions(-)
 rename src/asset/svg/{LinkImageEmptyCase.tsx => LinkImageEmptyCaseIcon.tsx} (98%)
 rename src/asset/svg/{LinkbraryLogo.tsx => LinkbraryIcon.tsx} (98%)
 create mode 100644 src/utils/getValidUrl.ts

diff --git a/app/folder/page.tsx b/app/folder/page.tsx
index b06220da32..266c9740e0 100644
--- a/app/folder/page.tsx
+++ b/app/folder/page.tsx
@@ -3,9 +3,6 @@ import { Header } from "@/src/components/Header";
 import LinkManager from "@/src/components/LinkManager/LinkManager";
 import { END_POINT } from "@/src/constants";
 import getFormattedLinks from "@/src/utils/getFormattedLinks";
-import { useRef } from "react";
-// import { useFetchData } from "@/src/hooks/useFetchData";
-// page 컴포넌트 안에서 useFetchData 사용시 eslint - hooks rule에 저촉
 
 async function getFetchData(url: string) {
   try {
@@ -14,20 +11,14 @@ async function getFetchData(url: string) {
     return result;
   } catch (error) {
     if (error instanceof Error) {
-      // alert(error.message);
       console.error(error.message);
     }
   }
 }
 
-// use Hooks 사용 불가
-export default async function page() {
-  // links data fetch
+export default async function FolderPage() {
   const linksData = await getFetchData(END_POINT.LINKS);
-  // const linksData = await useFetchData(END_POINT.LINKS);
-  // links data formatting
   const links = getFormattedLinks(linksData.data);
-  // favorites data fetch
   const favorites = await getFetchData(END_POINT.FOLDERS);
 
   return (
diff --git a/app/layout.tsx b/app/layout.tsx
index bc94879b16..574a50d0b0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,15 +1,12 @@
 import "@/src/styles/global.scss";
+import { ReactNode } from "react";
 
 export const metadata = {
   title: "Linkbrary",
   description: "bokeeey weeklyMission",
 };
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="ko">
       <body>{children}</body>
diff --git a/app/shared/page.tsx b/app/shared/page.tsx
index bc28b3085b..2bf8826e03 100644
--- a/app/shared/page.tsx
+++ b/app/shared/page.tsx
@@ -10,14 +10,12 @@ async function getFetchData(url: string) {
     return result;
   } catch (error) {
     if (error instanceof Error) {
-      // alert(error.message);
       console.error(error.message);
     }
   }
 }
 
-export default async function page() {
-  // links data fetch
+export default async function sharedPage() {
   const sharedPageDatas = await getFetchData(END_POINT.SHARED_LINKS);
 
   return (
diff --git a/src/asset/index.ts b/src/asset/index.ts
index c05a9d35db..dadb9abe95 100644
--- a/src/asset/index.ts
+++ b/src/asset/index.ts
@@ -1,9 +1,9 @@
-export { default as LinkbraryLogo } from "./svg/LinkbraryLogo";
+export { default as LinkbraryIcon } from "./svg/LinkbraryIcon";
 export { default as WhiteInstagramIcon } from "./svg/WhiteInstagramIcon";
 export { default as WhiteTwitterIcon } from "./svg/WhiteTwitterIcon";
 export { default as WhiteYoutubeIcon } from "./svg/WhiteYoutubeIcon";
 export { default as WhiteFacebookIcon } from "./svg/WhiteFacebookIcon";
-export { default as LinkImageEmptyCase } from "./svg/LinkImageEmptyCase";
+export { default as LinkImageEmptyCaseIcon } from "./svg/LinkImageEmptyCaseIcon";
 export { default as MagnifierIcon } from "./svg/MagnifierIcon";
 export { default as XIcon } from "./svg/XIcon";
 export { default as ChainIcon } from "./svg/ChainIcon";
diff --git a/src/asset/svg/ChainIcon.tsx b/src/asset/svg/ChainIcon.tsx
index 85e9cf6c7a..2c7b75e6a7 100644
--- a/src/asset/svg/ChainIcon.tsx
+++ b/src/asset/svg/ChainIcon.tsx
@@ -1,26 +1,24 @@
 export default function ChainIcon() {
   return (
-    <>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="21"
-        viewBox="0 0 20 21"
-        fill="none"
-      >
-        <path
-          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
-          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"
-        />
-      </svg>
-    </>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+    >
+      <path
+        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
+        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"
+      />
+    </svg>
   );
 }
diff --git a/src/asset/svg/EyeIcon.tsx b/src/asset/svg/EyeIcon.tsx
index 5ff3f5c5f6..52797eb863 100644
--- a/src/asset/svg/EyeIcon.tsx
+++ b/src/asset/svg/EyeIcon.tsx
@@ -1,9 +1,9 @@
-interface EyeIcon {
+interface EyeIconProps {
   visible?: boolean;
   handleEyeIconClick?: () => void;
 }
 
-export default function EyeIcon({ visible, handleEyeIconClick }: EyeIcon) {
+export default function EyeIcon({ visible, handleEyeIconClick }: EyeIconProps) {
   return (
     <>
       {visible ? (
diff --git a/src/asset/svg/LinkImageEmptyCase.tsx b/src/asset/svg/LinkImageEmptyCaseIcon.tsx
similarity index 98%
rename from src/asset/svg/LinkImageEmptyCase.tsx
rename to src/asset/svg/LinkImageEmptyCaseIcon.tsx
index cd72be04af..64d14581a8 100644
--- a/src/asset/svg/LinkImageEmptyCase.tsx
+++ b/src/asset/svg/LinkImageEmptyCaseIcon.tsx
@@ -1,4 +1,4 @@
-export default function LinkImageEmptyCase() {
+export default function LinkImageEmptyCaseIcon() {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/asset/svg/LinkbraryLogo.tsx b/src/asset/svg/LinkbraryIcon.tsx
similarity index 98%
rename from src/asset/svg/LinkbraryLogo.tsx
rename to src/asset/svg/LinkbraryIcon.tsx
index 15d8b47e3d..657f67d0d0 100644
--- a/src/asset/svg/LinkbraryLogo.tsx
+++ b/src/asset/svg/LinkbraryIcon.tsx
@@ -1,4 +1,4 @@
-export default function Logo() {
+export default function LinkbraryIcon() {
   return (
     <div>
       <svg
diff --git a/src/asset/svg/WhiteFacebookIcon.tsx b/src/asset/svg/WhiteFacebookIcon.tsx
index dfaf36514c..d4b9dc3a33 100644
--- a/src/asset/svg/WhiteFacebookIcon.tsx
+++ b/src/asset/svg/WhiteFacebookIcon.tsx
@@ -1,20 +1,18 @@
 export default function WhiteFacebookIcon() {
   return (
-    <a href="https://www.facebook.com" target="_blank">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M1 9.90279C1 14.3773 4.24975 18.098 8.5 18.8525V12.3523H6.25V9.85254H8.5V7.85229C8.5 5.60229 9.94975 4.35279 12.0002 4.35279C12.6497 4.35279 13.3503 4.45254 13.9998 4.55229V6.85254H12.85C11.7498 6.85254 11.5 7.40229 11.5 8.10279V9.85254H13.9L13.5002 12.3523H11.5V18.8525C15.7502 18.098 19 14.378 19 9.90279C19 4.92504 14.95 0.852539 10 0.852539C5.05 0.852539 1 4.92504 1 9.90279Z"
-          fill="white"
-        />
-      </svg>
-    </a>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1 9.90279C1 14.3773 4.24975 18.098 8.5 18.8525V12.3523H6.25V9.85254H8.5V7.85229C8.5 5.60229 9.94975 4.35279 12.0002 4.35279C12.6497 4.35279 13.3503 4.45254 13.9998 4.55229V6.85254H12.85C11.7498 6.85254 11.5 7.40229 11.5 8.10279V9.85254H13.9L13.5002 12.3523H11.5V18.8525C15.7502 18.098 19 14.378 19 9.90279C19 4.92504 14.95 0.852539 10 0.852539C5.05 0.852539 1 4.92504 1 9.90279Z"
+        fill="white"
+      />
+    </svg>
   );
 }
diff --git a/src/asset/svg/WhiteInstagramIcon.tsx b/src/asset/svg/WhiteInstagramIcon.tsx
index 6c6d5a69f2..65372d4e7d 100644
--- a/src/asset/svg/WhiteInstagramIcon.tsx
+++ b/src/asset/svg/WhiteInstagramIcon.tsx
@@ -1,18 +1,16 @@
 export default function WhiteInstagramIcon() {
   return (
-    <a href="https://www.instagram.com" target="_blank">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <path
-          d="M9.49787 7.518C7.93707 7.518 6.66333 8.79173 6.66333 10.3525C6.66333 11.9133 7.93707 13.1871 9.49787 13.1871C11.0587 13.1871 12.3324 11.9133 12.3324 10.3525C12.3324 8.79173 11.0587 7.518 9.49787 7.518ZM17.9994 10.3525C17.9994 9.17875 18.01 8.01558 17.9441 6.84392C17.8782 5.483 17.5677 4.27518 16.5725 3.28001C15.5752 2.28271 14.3695 1.97438 13.0086 1.90846C11.8348 1.84254 10.6717 1.85317 9.5 1.85317C8.32621 1.85317 7.16305 1.84254 5.99138 1.90846C4.63046 1.97438 3.42264 2.28484 2.42747 3.28001C1.43017 4.27731 1.12184 5.483 1.05592 6.84392C0.99 8.01771 1.00063 9.18087 1.00063 10.3525C1.00063 11.5242 0.99 12.6895 1.05592 13.8612C1.12184 15.2221 1.4323 16.4299 2.42747 17.4251C3.42477 18.4224 4.63046 18.7307 5.99138 18.7966C7.16517 18.8625 8.32833 18.8519 9.5 18.8519C10.6738 18.8519 11.837 18.8625 13.0086 18.7966C14.3695 18.7307 15.5774 18.4202 16.5725 17.4251C17.5698 16.4278 17.8782 15.2221 17.9441 13.8612C18.0121 12.6895 17.9994 11.5263 17.9994 10.3525ZM9.49787 14.7139C7.08437 14.7139 5.13655 12.766 5.13655 10.3525C5.13655 7.93903 7.08437 5.99122 9.49787 5.99122C11.9114 5.99122 13.8592 7.93903 13.8592 10.3525C13.8592 12.766 11.9114 14.7139 9.49787 14.7139ZM14.0378 6.83116C13.4743 6.83116 13.0193 6.3761 13.0193 5.8126C13.0193 5.24909 13.4743 4.79403 14.0378 4.79403C14.6013 4.79403 15.0564 5.24909 15.0564 5.8126C15.0565 5.9464 15.0303 6.07893 14.9792 6.20258C14.9281 6.32624 14.853 6.43859 14.7584 6.5332C14.6638 6.62782 14.5515 6.70284 14.4278 6.75397C14.3041 6.8051 14.1716 6.83133 14.0378 6.83116Z"
-          fill="white"
-        />
-      </svg>
-    </a>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M9.49787 7.518C7.93707 7.518 6.66333 8.79173 6.66333 10.3525C6.66333 11.9133 7.93707 13.1871 9.49787 13.1871C11.0587 13.1871 12.3324 11.9133 12.3324 10.3525C12.3324 8.79173 11.0587 7.518 9.49787 7.518ZM17.9994 10.3525C17.9994 9.17875 18.01 8.01558 17.9441 6.84392C17.8782 5.483 17.5677 4.27518 16.5725 3.28001C15.5752 2.28271 14.3695 1.97438 13.0086 1.90846C11.8348 1.84254 10.6717 1.85317 9.5 1.85317C8.32621 1.85317 7.16305 1.84254 5.99138 1.90846C4.63046 1.97438 3.42264 2.28484 2.42747 3.28001C1.43017 4.27731 1.12184 5.483 1.05592 6.84392C0.99 8.01771 1.00063 9.18087 1.00063 10.3525C1.00063 11.5242 0.99 12.6895 1.05592 13.8612C1.12184 15.2221 1.4323 16.4299 2.42747 17.4251C3.42477 18.4224 4.63046 18.7307 5.99138 18.7966C7.16517 18.8625 8.32833 18.8519 9.5 18.8519C10.6738 18.8519 11.837 18.8625 13.0086 18.7966C14.3695 18.7307 15.5774 18.4202 16.5725 17.4251C17.5698 16.4278 17.8782 15.2221 17.9441 13.8612C18.0121 12.6895 17.9994 11.5263 17.9994 10.3525ZM9.49787 14.7139C7.08437 14.7139 5.13655 12.766 5.13655 10.3525C5.13655 7.93903 7.08437 5.99122 9.49787 5.99122C11.9114 5.99122 13.8592 7.93903 13.8592 10.3525C13.8592 12.766 11.9114 14.7139 9.49787 14.7139ZM14.0378 6.83116C13.4743 6.83116 13.0193 6.3761 13.0193 5.8126C13.0193 5.24909 13.4743 4.79403 14.0378 4.79403C14.6013 4.79403 15.0564 5.24909 15.0564 5.8126C15.0565 5.9464 15.0303 6.07893 14.9792 6.20258C14.9281 6.32624 14.853 6.43859 14.7584 6.5332C14.6638 6.62782 14.5515 6.70284 14.4278 6.75397C14.3041 6.8051 14.1716 6.83133 14.0378 6.83116Z"
+        fill="white"
+      />
+    </svg>
   );
 }
diff --git a/src/asset/svg/WhiteTwitterIcon.tsx b/src/asset/svg/WhiteTwitterIcon.tsx
index 57af2c9b72..0367595b72 100644
--- a/src/asset/svg/WhiteTwitterIcon.tsx
+++ b/src/asset/svg/WhiteTwitterIcon.tsx
@@ -1,18 +1,16 @@
 export default function WhiteTwitterIcon() {
   return (
-    <a href="https://twitter.com" target="_blank">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <path
-          d="M19.7029 4.11366C19.0071 4.42199 18.2596 4.63033 17.4737 4.72449C18.2846 4.23932 18.8912 3.47572 19.1804 2.57616C18.4186 3.02865 17.5849 3.34716 16.7154 3.51783C16.1307 2.89355 15.3563 2.47977 14.5124 2.34072C13.6684 2.20168 12.8022 2.34515 12.0481 2.74887C11.2941 3.15259 10.6944 3.79396 10.3422 4.57341C9.99003 5.35287 9.90503 6.22679 10.1004 7.05949C8.55682 6.98199 7.04677 6.58079 5.66827 5.88192C4.28977 5.18305 3.07362 4.20213 2.09875 3.00283C1.76542 3.57783 1.57375 4.24449 1.57375 4.95449C1.57338 5.59366 1.73078 6.22303 2.03198 6.78677C2.33319 7.35051 2.76888 7.83119 3.30042 8.18616C2.68398 8.16655 2.08114 7.99998 1.54208 7.70033V7.75033C1.54202 8.64678 1.85211 9.51564 2.41974 10.2095C2.98736 10.9033 3.77756 11.3794 4.65625 11.557C4.0844 11.7118 3.48486 11.7346 2.90292 11.6237C3.15083 12.395 3.63375 13.0695 4.28406 13.5528C4.93437 14.036 5.71951 14.3038 6.52958 14.3187C5.15444 15.3982 3.45616 15.9837 1.70792 15.9812C1.39823 15.9812 1.08881 15.9632 0.78125 15.927C2.55581 17.068 4.62153 17.6735 6.73125 17.6712C13.8729 17.6712 17.7771 11.7562 17.7771 6.62616C17.7771 6.45949 17.7729 6.29116 17.7654 6.12449C18.5248 5.57531 19.1803 4.89524 19.7013 4.11616L19.7029 4.11366Z"
-          fill="white"
-        />
-      </svg>
-    </a>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M19.7029 4.11366C19.0071 4.42199 18.2596 4.63033 17.4737 4.72449C18.2846 4.23932 18.8912 3.47572 19.1804 2.57616C18.4186 3.02865 17.5849 3.34716 16.7154 3.51783C16.1307 2.89355 15.3563 2.47977 14.5124 2.34072C13.6684 2.20168 12.8022 2.34515 12.0481 2.74887C11.2941 3.15259 10.6944 3.79396 10.3422 4.57341C9.99003 5.35287 9.90503 6.22679 10.1004 7.05949C8.55682 6.98199 7.04677 6.58079 5.66827 5.88192C4.28977 5.18305 3.07362 4.20213 2.09875 3.00283C1.76542 3.57783 1.57375 4.24449 1.57375 4.95449C1.57338 5.59366 1.73078 6.22303 2.03198 6.78677C2.33319 7.35051 2.76888 7.83119 3.30042 8.18616C2.68398 8.16655 2.08114 7.99998 1.54208 7.70033V7.75033C1.54202 8.64678 1.85211 9.51564 2.41974 10.2095C2.98736 10.9033 3.77756 11.3794 4.65625 11.557C4.0844 11.7118 3.48486 11.7346 2.90292 11.6237C3.15083 12.395 3.63375 13.0695 4.28406 13.5528C4.93437 14.036 5.71951 14.3038 6.52958 14.3187C5.15444 15.3982 3.45616 15.9837 1.70792 15.9812C1.39823 15.9812 1.08881 15.9632 0.78125 15.927C2.55581 17.068 4.62153 17.6735 6.73125 17.6712C13.8729 17.6712 17.7771 11.7562 17.7771 6.62616C17.7771 6.45949 17.7729 6.29116 17.7654 6.12449C18.5248 5.57531 19.1803 4.89524 19.7013 4.11616L19.7029 4.11366Z"
+        fill="white"
+      />
+    </svg>
   );
 }
diff --git a/src/asset/svg/WhiteYoutubeIcon.tsx b/src/asset/svg/WhiteYoutubeIcon.tsx
index d36247d0e3..33c22092aa 100644
--- a/src/asset/svg/WhiteYoutubeIcon.tsx
+++ b/src/asset/svg/WhiteYoutubeIcon.tsx
@@ -1,25 +1,23 @@
 export default function WhiteYoutubeIcon() {
   return (
-    <a href="https://www.youtube.com" target="_blank">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-      >
-        <g clipPath="url(#clip0_6956_69668)">
-          <path
-            d="M19.5838 5.4224C19.4706 5.01843 19.25 4.65269 18.9455 4.36407C18.6324 4.06657 18.2487 3.85376 17.8305 3.74573C16.2655 3.33323 9.99551 3.33323 9.99551 3.33323C7.38162 3.30349 4.76837 3.4343 2.17051 3.7249C1.75234 3.84091 1.36932 4.05847 1.05551 4.35823C0.747181 4.6549 0.523848 5.02073 0.407181 5.42157C0.126925 6.93135 -0.00924233 8.46435 0.000514319 9.9999C-0.00948568 11.5341 0.126348 13.0666 0.407181 14.5782C0.521348 14.9774 0.743848 15.3416 1.05301 15.6357C1.36218 15.9299 1.74718 16.1424 2.17051 16.2549C3.75635 16.6666 9.99551 16.6666 9.99551 16.6666C12.6127 16.6963 15.2293 16.5655 17.8305 16.2749C18.2487 16.1669 18.6324 15.9541 18.9455 15.6566C19.2499 15.368 19.4702 15.0022 19.583 14.5982C19.8706 13.089 20.0104 11.5554 20.0005 10.0191C20.0221 8.47624 19.8825 6.93537 19.5838 5.42157V5.4224ZM8.00218 12.8532V7.1474L13.2188 10.0007L8.00218 12.8532Z"
-            fill="white"
-          />
-        </g>
-        <defs>
-          <clipPath id="clip0_6956_69668">
-            <rect width="20" height="20" fill="white" />
-          </clipPath>
-        </defs>
-      </svg>
-    </a>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_6956_69668)">
+        <path
+          d="M19.5838 5.4224C19.4706 5.01843 19.25 4.65269 18.9455 4.36407C18.6324 4.06657 18.2487 3.85376 17.8305 3.74573C16.2655 3.33323 9.99551 3.33323 9.99551 3.33323C7.38162 3.30349 4.76837 3.4343 2.17051 3.7249C1.75234 3.84091 1.36932 4.05847 1.05551 4.35823C0.747181 4.6549 0.523848 5.02073 0.407181 5.42157C0.126925 6.93135 -0.00924233 8.46435 0.000514319 9.9999C-0.00948568 11.5341 0.126348 13.0666 0.407181 14.5782C0.521348 14.9774 0.743848 15.3416 1.05301 15.6357C1.36218 15.9299 1.74718 16.1424 2.17051 16.2549C3.75635 16.6666 9.99551 16.6666 9.99551 16.6666C12.6127 16.6963 15.2293 16.5655 17.8305 16.2749C18.2487 16.1669 18.6324 15.9541 18.9455 15.6566C19.2499 15.368 19.4702 15.0022 19.583 14.5982C19.8706 13.089 20.0104 11.5554 20.0005 10.0191C20.0221 8.47624 19.8825 6.93537 19.5838 5.42157V5.4224ZM8.00218 12.8532V7.1474L13.2188 10.0007L8.00218 12.8532Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_6956_69668">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
   );
 }
diff --git a/src/components/Footer/Footer/Footer.tsx b/src/components/Footer/Footer/Footer.tsx
index b928016bff..06b83fcb0d 100644
--- a/src/components/Footer/Footer/Footer.tsx
+++ b/src/components/Footer/Footer/Footer.tsx
@@ -17,16 +17,24 @@ export default function Footer() {
       </div>
       <ul className={styles.snsBox}>
         <li>
-          <WhiteFacebookIcon />
+          <a href="https://www.facebook.com" target="_blank">
+            <WhiteFacebookIcon />
+          </a>
         </li>
         <li>
-          <WhiteTwitterIcon />
+          <a href="https://twitter.com" target="_blank">
+            <WhiteTwitterIcon />
+          </a>
         </li>
         <li>
-          <WhiteYoutubeIcon />
+          <a href="https://www.youtube.com" target="_blank">
+            <WhiteYoutubeIcon />
+          </a>
         </li>
         <li>
-          <WhiteInstagramIcon />
+          <a href="https://www.instagram.com" target="_blank">
+            <WhiteInstagramIcon />
+          </a>
         </li>
       </ul>
     </footer>
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
index de27b24d21..a903c7effe 100644
--- a/src/components/Header/Header/Header.tsx
+++ b/src/components/Header/Header/Header.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { LinkbraryLogo } from "@/src/asset";
+import { LinkbraryIcon } from "@/src/asset";
 import styles from "./Header.module.scss";
 import { END_POINT } from "@/src/constants";
 import Image from "next/image";
@@ -13,7 +13,7 @@ export default async function Header() {
     <header className={styles.header}>
       <nav className={styles.headerBox}>
         <Link href="/">
-          <LinkbraryLogo />
+          <LinkbraryIcon />
         </Link>
         {userData ? (
           <section className={styles.profileBox}>
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
index 9870cbd606..b01af34c7f 100644
--- a/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButton/FavoriteButton.tsx
@@ -1,20 +1,20 @@
 import { Favorite } from "@/src/constants/types";
 import styles from "./FavoriteButton.module.scss";
 
-interface FavoriteButton {
+interface FavoriteButtonProps {
   favorite?: Favorite;
-  handlefavoriteClick: (favorite?: Favorite | null) => void;
+  onFavoriteClick: (favorite?: Favorite | null) => void;
 }
 
 export default function FavoriteButton({
   favorite,
-  handlefavoriteClick,
-}: FavoriteButton) {
+  onFavoriteClick,
+}: FavoriteButtonProps) {
   const { name, id } = favorite || { name: "전체", id: null };
   return (
     <button
       className={styles.FavoriteButton}
-      onClick={() => handlefavoriteClick(favorite)}
+      onClick={() => onFavoriteClick(favorite)}
     >
       {name}
     </button>
diff --git a/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
index a9fc27bd2e..f13969f025 100644
--- a/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
+++ b/src/components/LinkManager/FavoriteButtonList/FavoriteButtonList.tsx
@@ -2,7 +2,7 @@ import { Favorite } from "@/src/constants/types";
 import FavoriteButton from "./FavoriteButton/FavoriteButton";
 import styles from "./FavoriteButtonList.module.scss";
 
-interface FavoriteButtonList {
+interface FavoriteButtonListProps {
   favorites?: Favorite[];
   handlefavoriteClick: (favorite?: Favorite | null) => void;
 }
@@ -10,16 +10,16 @@ interface FavoriteButtonList {
 export default function FavoriteButtonList({
   favorites,
   handlefavoriteClick,
-}: FavoriteButtonList) {
+}: FavoriteButtonListProps) {
   return (
     <section className={styles.FavoriteButtonList}>
-      <FavoriteButton handlefavoriteClick={handlefavoriteClick} />
+      <FavoriteButton onFavoriteClick={handlefavoriteClick} />
       {favorites &&
         favorites.map((favorite) => (
           <FavoriteButton
             key={favorite.id}
             favorite={favorite}
-            handlefavoriteClick={handlefavoriteClick}
+            onFavoriteClick={handlefavoriteClick}
           />
         ))}
     </section>
diff --git a/src/components/LinkManager/LinkList/LinkList.tsx b/src/components/LinkManager/LinkList/LinkList.tsx
index b7101f3e93..5289d437eb 100644
--- a/src/components/LinkManager/LinkList/LinkList.tsx
+++ b/src/components/LinkManager/LinkList/LinkList.tsx
@@ -2,14 +2,14 @@ import { Link } from "@/src/constants/types";
 import LinkOverview from "./LinkOverview/LinkOverView";
 import styles from "./LinkList.module.scss";
 
-interface LinkList {
+interface LinkListProps {
   links: Link[];
 }
 
-export default function LinkList({ links }: LinkList) {
+export default function LinkList({ links }: LinkListProps) {
   return (
     <section className={styles.linkList}>
-      {links?.map((link) => (
+      {links.map((link) => (
         <LinkOverview link={link} key={link.id} />
       ))}
     </section>
diff --git a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
index 787c6d3c28..584aec8191 100644
--- a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
+++ b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
@@ -1,13 +1,14 @@
 import Link from "next/link";
 import styles from "./LinkOverview.module.scss";
-import { Link as LinkType } from "@/src/constants/types";
+import { Link as TLink } from "@/src/constants/types";
 import getElapsedTime from "@/src/utils/getElapsedTime";
 import getFormattedDate from "@/src/utils/getFormattedDate";
-import { LinkImageEmptyCase } from "@/src/asset/";
+import { LinkImageEmptyCaseIcon } from "@/src/asset/";
 import Image from "next/image";
+import getValidUrl from "@/src/utils/getValidUrl";
 
 interface LinkOverview {
-  link: LinkType;
+  link: TLink;
 }
 
 export default function LinkOverview({ link }: LinkOverview) {
@@ -16,17 +17,8 @@ export default function LinkOverview({ link }: LinkOverview) {
   const formatDate = getFormattedDate(createdAt);
 
   // 서버 Image-url이 문제가 있어서 그냥 null처리 했읍니다
-  function fixedUrl(url: string) {
-    if (!url) return null;
 
-    if (url.startsWith(`https:`)) {
-      return url;
-    } else {
-      return null;
-    }
-  }
-
-  const imageSource = fixedUrl(imageUrl);
+  const imageSource = getValidUrl(imageUrl);
 
   return (
     <Link href={url} className={styles.LinkOverview}>
@@ -36,14 +28,18 @@ export default function LinkOverview({ link }: LinkOverview) {
         </figure>
       ) : (
         <figure className={styles.emptyCaseBox}>
-          <LinkImageEmptyCase />
+          <LinkImageEmptyCaseIcon />
         </figure>
       )}
-      <figcaption className={styles.caption}>
-        <time className={styles.updatedAt}>{createDate}</time>
+      <div className={styles.caption}>
+        <time className={styles.updatedAt} dateTime={createdAt}>
+          {createDate}
+        </time>
         <p className={styles.description}>{description}</p>
-        <time className={styles.createdAt}>{formatDate}</time>
-      </figcaption>
+        <time className={styles.createdAt} dateTime={createdAt}>
+          {formatDate}
+        </time>
+      </div>
     </Link>
   );
 }
diff --git a/src/components/LinkManager/LinkManager.tsx b/src/components/LinkManager/LinkManager.tsx
index 631fb33e64..05037ffb15 100644
--- a/src/components/LinkManager/LinkManager.tsx
+++ b/src/components/LinkManager/LinkManager.tsx
@@ -1,32 +1,31 @@
-// client component 선언
 "use client";
-// react
+
 import { ChangeEvent, use, useEffect, useRef, useState } from "react";
-// fetch API
+
 import { END_POINT } from "@/src/constants";
-// component
+
 import LinkList from "./LinkList/LinkList";
 import FavoriteButtonList from "./FavoriteButtonList/FavoriteButtonList";
 import LinkSearchBar from "./LinkSearchBar/LinkSearchBar";
 import LinkEmptyCase from "./LinkList/LinkEmptyCase/LinkEmptyCase";
 import AddLinkBar from "./AddLinkBar/AddLinkBar";
 import UserProfile from "./UserProfile/UserProfile";
-// types
+
 import {
   Favorite,
-  Link as LinkType,
-  SharedPageTypes,
+  Link as TLink,
+  UserProfile as TUserProfile,
 } from "@/src/constants/types";
-// utils
+
 import getFormattedLinks from "@/src/utils/getFormattedLinks";
 import useIntersectionObserver from "@/src/hooks/useIntersectionObserver";
-// style sheet
+
 import styles from "./LinkManager.module.scss";
 
 interface LinkManager {
-  links: LinkType[];
+  links: TLink[];
   favorites?: Favorite[];
-  userProfile?: SharedPageTypes;
+  userProfile?: TUserProfile;
 }
 
 export default function LinkManager({
@@ -77,7 +76,7 @@ export default function LinkManager({
   };
 
   // LinkSearchBar의 onChangeEvent
-  const handleLinkSearch = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleSearchValue = (e: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(e.target.value);
   };
 
@@ -108,7 +107,10 @@ export default function LinkManager({
           <AddLinkBar />
         </div>
       )}
-      <LinkSearchBar handleLinkSearch={handleLinkSearch} />
+      <LinkSearchBar
+        onSearchValue={handleSearchValue}
+        inputValue={searchValue}
+      />
       {favorites && (
         <>
           <FavoriteButtonList
@@ -126,7 +128,7 @@ export default function LinkManager({
         <LinkEmptyCase />
       )}
       {/* footer의 ref를 잡을 수 없어서 임의로 만들었습니다 */}
-      <div ref={footerRef}></div>
+      <div ref={footerRef} />
       <div className={`${styles.fixedAddLinkManager} ${className}`}>
         <AddLinkBar />
       </div>
diff --git a/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
index 8d2ac6a2dd..9dac74e4ca 100644
--- a/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
+++ b/src/components/LinkManager/LinkSearchBar/LinkSearchBar.tsx
@@ -1,20 +1,28 @@
 import { MagnifierIcon, XIcon } from "@/src/asset";
-import styles from "./LinkSearchBar.module.scss";
+
 import { ChangeEvent } from "react";
 
-interface LinkSearchBar {
-  handleLinkSearch: (e: ChangeEvent<HTMLInputElement>) => void;
+import styles from "./LinkSearchBar.module.scss";
+
+interface LinkSearchBarProps {
+  onSearchValue: (e: ChangeEvent<HTMLInputElement>) => void;
+  inputValue: any;
 }
 
-export default function LinkSearchBar({ handleLinkSearch }: LinkSearchBar) {
+export default function LinkSearchBar({
+  onSearchValue,
+  inputValue,
+}: LinkSearchBarProps) {
   return (
     <div className={styles.LinkSearchBar}>
       <MagnifierIcon />
+      {/* input component로 바꿔보자 */}
       <input
         className={styles.input}
-        onChange={handleLinkSearch}
+        onChange={onSearchValue}
         placeholder="링크를 검색해 보세요."
         type="search"
+        value={inputValue}
       />
       <div className={styles.cancelIcon}>
         <XIcon />
diff --git a/src/components/LinkManager/UserProfile/UserProfile.tsx b/src/components/LinkManager/UserProfile/UserProfile.tsx
index c61a241145..8d634e61c2 100644
--- a/src/components/LinkManager/UserProfile/UserProfile.tsx
+++ b/src/components/LinkManager/UserProfile/UserProfile.tsx
@@ -1,13 +1,14 @@
 import Image from "next/image";
 import styles from "./UserProfile.module.scss";
-import { SharedPageTypes } from "@/src/constants/types";
+import { UserProfile as TUserProfile } from "@/src/constants/types";
 
-interface UserProfile {
-  userProfile: SharedPageTypes;
+interface UserProfileProps {
+  userProfile: TUserProfile;
 }
 
-export default function UserProfile({ userProfile }: UserProfile) {
+export default function UserProfile({ userProfile }: UserProfileProps) {
   const { name, owner } = userProfile;
+
   return (
     <section className={styles.UserProfile}>
       <article className={styles.profileInfos}>
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 3fe3b0a94a..a6b20dc40b 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,9 +1,9 @@
 const API_BASE_URL = "https://bootcamp-api.codeit.kr/api/";
-const Team_ID = 11;
+const TEAM_ID = 11;
 
 const SHARED_LINKS = `${API_BASE_URL}sample/folder`;
-const FOLDERS = `${API_BASE_URL}users/${Team_ID}/folders`;
-const LINKS = `${API_BASE_URL}users/${Team_ID}/links`;
+const FOLDERS = `${API_BASE_URL}users/${TEAM_ID}/folders`;
+const LINKS = `${API_BASE_URL}users/${TEAM_ID}/links`;
 const USER = `${API_BASE_URL}users/1`;
 
 export const END_POINT = {
diff --git a/src/constants/types.ts b/src/constants/types.ts
index 2ac0e50de5..7b80f660f5 100644
--- a/src/constants/types.ts
+++ b/src/constants/types.ts
@@ -1,7 +1,7 @@
 export interface Link {
   id: string;
   imageSource: string;
-  createdAt: Date;
+  createdAt: string;
   description: string;
   title: string;
   url: string;
@@ -9,7 +9,7 @@ export interface Link {
 
 export interface Favorite {
   id: number;
-  created_at: Date;
+  created_at: string;
   name: string;
   user_id: number;
   favorite: boolean;
@@ -18,7 +18,7 @@ export interface Favorite {
   };
 }
 
-export interface SharedPageTypes {
+export interface UserProfile {
   name: string;
   owner: {
     profileImageSource: string;
@@ -31,7 +31,7 @@ export interface SharedPageTypes {
 export interface FormatLink {
   id: string;
   image_source: string;
-  created_at: Date;
+  created_at: string;
   description: string;
   title: string;
   url: string;
diff --git a/src/utils/getElapsedTime.ts b/src/utils/getElapsedTime.ts
index 7b667ee93a..1f6b45be15 100644
--- a/src/utils/getElapsedTime.ts
+++ b/src/utils/getElapsedTime.ts
@@ -1,4 +1,4 @@
-export default function getElapsedTime(createAt: Date) {
+export default function getElapsedTime(createAt: string) {
   const currentDate = new Date();
   const createdDate = new Date(createAt);
   const elapsedTimeInMinutes = Math.floor(
diff --git a/src/utils/getFormattedDate.ts b/src/utils/getFormattedDate.ts
index 24baba7604..84aa8e5df0 100644
--- a/src/utils/getFormattedDate.ts
+++ b/src/utils/getFormattedDate.ts
@@ -1,4 +1,4 @@
-export default function getFormattedDate(value: Date) {
+export default function getFormattedDate(value: string) {
   const date = new Date(value);
   const year = date.getFullYear();
   const month = (date.getMonth() + 1).toString().padStart(2, "0");
diff --git a/src/utils/getFormattedLinks.ts b/src/utils/getFormattedLinks.ts
index aca6d1a9d0..e1c55e3f68 100644
--- a/src/utils/getFormattedLinks.ts
+++ b/src/utils/getFormattedLinks.ts
@@ -14,7 +14,7 @@ function formatLinkData(link: FormatLink) {
 export default function getFormattedLinks(links: FormatLink[]) {
   return (
     links &&
-    links.map((link: FormatLink) => {
+    links.map((link) => {
       return formatLinkData(link);
     })
   );
diff --git a/src/utils/getValidUrl.ts b/src/utils/getValidUrl.ts
new file mode 100644
index 0000000000..2ce86ec9e9
--- /dev/null
+++ b/src/utils/getValidUrl.ts
@@ -0,0 +1,7 @@
+export default function getValidUrl(url: string) {
+  if (url === null || !url.startsWith("https:")) {
+    return null;
+  }
+
+  return url;
+}

From 3a4e0e8bf29a1bbffd1ae9421453860e6e9262f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 15:47:30 +0900
Subject: [PATCH 03/17] =?UTF-8?q?style:=20=EC=9D=BC=EB=B6=80=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

---
 .../LinkManager/LinkList/LinkOverview/LinkOverView.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
index 584aec8191..302393d136 100644
--- a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
+++ b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
@@ -21,7 +21,7 @@ export default function LinkOverview({ link }: LinkOverview) {
   const imageSource = getValidUrl(imageUrl);
 
   return (
-    <Link href={url} className={styles.LinkOverview}>
+    <Link href={url} className={styles.LinkOverview} target="_blank">
       {imageSource ? (
         <figure className={styles.imgBox}>
           <Image width={340} height={200} src={imageSource} alt={title} />

From c743bff235e790c533b22300024f7d4a273a5e77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 22:59:48 +0900
Subject: [PATCH 04/17] =?UTF-8?q?feat:=20input=20=EB=A7=8C=EB=93=A4?=
 =?UTF-8?q?=EC=96=B4=EB=B3=B4=EC=95=98=EC=9D=8D=EB=8B=88=EB=8B=A4=20?=
 =?UTF-8?q?=EC=A7=9C=EC=9E=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx                                  |  6 +-
 app/signin/page.tsx                           |  9 +++
 src/asset/svg/EyeIcon.tsx                     | 41 -------------
 src/asset/svg/EyeOffIcon.tsx                  | 17 ++++++
 src/asset/svg/EyeOnIcon.tsx                   | 17 ++++++
 src/components/Auth/Auth.tsx                  | 12 ++++
 .../Auth/InputField/Input/Input.module.scss   | 22 +++++++
 .../Auth/InputField/Input/Input.tsx           |  7 +++
 .../Auth/InputField/InputField.module.scss    | 23 ++++++++
 src/components/Auth/InputField/InputField.tsx | 59 +++++++++++++++++++
 .../AuthForm/AuthLabel/AuthLabel.tsx          | 10 ----
 src/components/Input/Input.tsx                |  3 -
 12 files changed, 170 insertions(+), 56 deletions(-)
 create mode 100644 app/signin/page.tsx
 delete mode 100644 src/asset/svg/EyeIcon.tsx
 create mode 100644 src/asset/svg/EyeOffIcon.tsx
 create mode 100644 src/asset/svg/EyeOnIcon.tsx
 create mode 100644 src/components/Auth/Auth.tsx
 create mode 100644 src/components/Auth/InputField/Input/Input.module.scss
 create mode 100644 src/components/Auth/InputField/Input/Input.tsx
 create mode 100644 src/components/Auth/InputField/InputField.module.scss
 create mode 100644 src/components/Auth/InputField/InputField.tsx
 delete mode 100644 src/components/AuthForm/AuthLabel/AuthLabel.tsx
 delete mode 100644 src/components/Input/Input.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 00649d7646..952ff39cf4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,10 +1,12 @@
+import Auth from "@/src/components/Auth/Auth";
 import styles from "./page.module.scss";
-// import AuthLabel from "@/src/components/AuthForm/AuthLabel/AuthLabel";
 
 export default function Home() {
   return (
     <>
-      <div className={styles.input}>{/* <AuthLabel /> */}</div>
+      <div className={styles.input}>
+        <Auth />
+      </div>
     </>
   );
 }
diff --git a/app/signin/page.tsx b/app/signin/page.tsx
new file mode 100644
index 0000000000..7cb16f9c73
--- /dev/null
+++ b/app/signin/page.tsx
@@ -0,0 +1,9 @@
+import Auth from "@/src/components/Auth/Auth";
+
+export default function signinPage() {
+  return (
+    <>
+      <Auth />
+    </>
+  );
+}
diff --git a/src/asset/svg/EyeIcon.tsx b/src/asset/svg/EyeIcon.tsx
deleted file mode 100644
index 52797eb863..0000000000
--- a/src/asset/svg/EyeIcon.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-interface EyeIconProps {
-  visible?: boolean;
-  handleEyeIconClick?: () => void;
-}
-
-export default function EyeIcon({ visible, handleEyeIconClick }: EyeIconProps) {
-  return (
-    <>
-      {visible ? (
-        <svg
-          onClick={handleEyeIconClick}
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="11"
-          viewBox="0 0 16 11"
-          fill="none"
-        >
-          <path
-            d="M8 3.27273C7.42135 3.27273 6.86639 3.5026 6.45722 3.91177C6.04805 4.32094 5.81818 4.87589 5.81818 5.45455C5.81818 6.0332 6.04805 6.58815 6.45722 6.99732C6.86639 7.40649 7.42135 7.63636 8 7.63636C8.57865 7.63636 9.13361 7.40649 9.54278 6.99732C9.95195 6.58815 10.1818 6.0332 10.1818 5.45455C10.1818 4.87589 9.95195 4.32094 9.54278 3.91177C9.13361 3.5026 8.57865 3.27273 8 3.27273ZM8 9.09091C7.03558 9.09091 6.11065 8.70779 5.4287 8.02584C4.74675 7.34389 4.36364 6.41897 4.36364 5.45455C4.36364 4.49012 4.74675 3.5652 5.4287 2.88325C6.11065 2.2013 7.03558 1.81818 8 1.81818C8.96442 1.81818 9.88935 2.2013 10.5713 2.88325C11.2532 3.5652 11.6364 4.49012 11.6364 5.45455C11.6364 6.41897 11.2532 7.34389 10.5713 8.02584C9.88935 8.70779 8.96442 9.09091 8 9.09091ZM8 0C4.36364 0 1.25818 2.26182 0 5.45455C1.25818 8.64727 4.36364 10.9091 8 10.9091C11.6364 10.9091 14.7418 8.64727 16 5.45455C14.7418 2.26182 11.6364 0 8 0Z"
-            fill="#373740"
-          />
-        </svg>
-      ) : (
-        <svg
-          onClick={handleEyeIconClick}
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-        >
-          <rect width="16" height="16" fill="white" />
-          <path
-            d="M7.87636 5.36364L10.1818 7.66182C10.1818 7.62545 10.1818 7.58182 10.1818 7.54545C10.1818 6.9668 9.95195 6.41185 9.54278 6.00268C9.13361 5.59351 8.57865 5.36364 8 5.36364C7.95636 5.36364 7.92 5.36364 7.87636 5.36364ZM4.74909 5.94545L5.87636 7.07273C5.84 7.22545 5.81818 7.37818 5.81818 7.54545C5.81818 8.12411 6.04805 8.67906 6.45722 9.08823C6.86639 9.4974 7.42135 9.72727 8 9.72727C8.16 9.72727 8.32 9.70545 8.47273 9.66909L9.6 10.7964C9.11273 11.0364 8.57455 11.1818 8 11.1818C7.03558 11.1818 6.11065 10.7987 5.4287 10.1168C4.74675 9.4348 4.36364 8.50988 4.36364 7.54545C4.36364 6.97091 4.50909 6.43273 4.74909 5.94545ZM0.727273 1.92364L2.38545 3.58182L2.71273 3.90909C1.51273 4.85455 0.567273 6.09091 0 7.54545C1.25818 10.7382 4.36364 13 8 13C9.12727 13 10.2036 12.7818 11.1855 12.3891L11.4982 12.6945L13.6218 14.8182L14.5455 13.8945L1.65091 1M8 3.90909C8.96442 3.90909 9.88935 4.29221 10.5713 4.97416C11.2532 5.65611 11.6364 6.58103 11.6364 7.54545C11.6364 8.01091 11.5418 8.46182 11.3745 8.86909L13.5055 11C14.5964 10.0909 15.4691 8.89818 16 7.54545C14.7418 4.35273 11.6364 2.09091 8 2.09091C6.98182 2.09091 6.00727 2.27273 5.09091 2.6L6.66909 4.16364C7.08364 4.00364 7.52727 3.90909 8 3.90909Z"
-            fill="#373740"
-          />
-        </svg>
-      )}
-    </>
-  );
-}
diff --git a/src/asset/svg/EyeOffIcon.tsx b/src/asset/svg/EyeOffIcon.tsx
new file mode 100644
index 0000000000..a852520aa7
--- /dev/null
+++ b/src/asset/svg/EyeOffIcon.tsx
@@ -0,0 +1,17 @@
+export default function EyeOffIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <rect width="16" height="16" fill="white" />
+      <path
+        d="M7.87636 5.36364L10.1818 7.66182C10.1818 7.62545 10.1818 7.58182 10.1818 7.54545C10.1818 6.9668 9.95195 6.41185 9.54278 6.00268C9.13361 5.59351 8.57865 5.36364 8 5.36364C7.95636 5.36364 7.92 5.36364 7.87636 5.36364ZM4.74909 5.94545L5.87636 7.07273C5.84 7.22545 5.81818 7.37818 5.81818 7.54545C5.81818 8.12411 6.04805 8.67906 6.45722 9.08823C6.86639 9.4974 7.42135 9.72727 8 9.72727C8.16 9.72727 8.32 9.70545 8.47273 9.66909L9.6 10.7964C9.11273 11.0364 8.57455 11.1818 8 11.1818C7.03558 11.1818 6.11065 10.7987 5.4287 10.1168C4.74675 9.4348 4.36364 8.50988 4.36364 7.54545C4.36364 6.97091 4.50909 6.43273 4.74909 5.94545ZM0.727273 1.92364L2.38545 3.58182L2.71273 3.90909C1.51273 4.85455 0.567273 6.09091 0 7.54545C1.25818 10.7382 4.36364 13 8 13C9.12727 13 10.2036 12.7818 11.1855 12.3891L11.4982 12.6945L13.6218 14.8182L14.5455 13.8945L1.65091 1M8 3.90909C8.96442 3.90909 9.88935 4.29221 10.5713 4.97416C11.2532 5.65611 11.6364 6.58103 11.6364 7.54545C11.6364 8.01091 11.5418 8.46182 11.3745 8.86909L13.5055 11C14.5964 10.0909 15.4691 8.89818 16 7.54545C14.7418 4.35273 11.6364 2.09091 8 2.09091C6.98182 2.09091 6.00727 2.27273 5.09091 2.6L6.66909 4.16364C7.08364 4.00364 7.52727 3.90909 8 3.90909Z"
+        fill="#373740"
+      />
+    </svg>
+  );
+}
diff --git a/src/asset/svg/EyeOnIcon.tsx b/src/asset/svg/EyeOnIcon.tsx
new file mode 100644
index 0000000000..c840be9def
--- /dev/null
+++ b/src/asset/svg/EyeOnIcon.tsx
@@ -0,0 +1,17 @@
+export default function EyeOnIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <rect width="16" height="16" fill="white" />
+      <path
+        d="M8 6.27273C7.42135 6.27273 6.86639 6.5026 6.45722 6.91177C6.04805 7.32094 5.81818 7.87589 5.81818 8.45455C5.81818 9.0332 6.04805 9.58815 6.45722 9.99732C6.86639 10.4065 7.42135 10.6364 8 10.6364C8.57865 10.6364 9.13361 10.4065 9.54278 9.99732C9.95195 9.58815 10.1818 9.0332 10.1818 8.45455C10.1818 7.87589 9.95195 7.32094 9.54278 6.91177C9.13361 6.5026 8.57865 6.27273 8 6.27273ZM8 12.0909C7.03558 12.0909 6.11065 11.7078 5.4287 11.0258C4.74675 10.3439 4.36364 9.41897 4.36364 8.45455C4.36364 7.49012 4.74675 6.5652 5.4287 5.88325C6.11065 5.2013 7.03558 4.81818 8 4.81818C8.96442 4.81818 9.88935 5.2013 10.5713 5.88325C11.2532 6.5652 11.6364 7.49012 11.6364 8.45455C11.6364 9.41897 11.2532 10.3439 10.5713 11.0258C9.88935 11.7078 8.96442 12.0909 8 12.0909ZM8 3C4.36364 3 1.25818 5.26182 0 8.45455C1.25818 11.6473 4.36364 13.9091 8 13.9091C11.6364 13.9091 14.7418 11.6473 16 8.45455C14.7418 5.26182 11.6364 3 8 3Z"
+        fill="#373740"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
new file mode 100644
index 0000000000..5f6cbfc435
--- /dev/null
+++ b/src/components/Auth/Auth.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import InputField from "./InputField/InputField";
+
+export default function Auth() {
+  return (
+    <form>
+      <InputField type="email" name="email" />
+      <InputField type="password" name="password" icon="eyeToggle" />
+    </form>
+  );
+}
diff --git a/src/components/Auth/InputField/Input/Input.module.scss b/src/components/Auth/InputField/Input/Input.module.scss
new file mode 100644
index 0000000000..6f17eb7236
--- /dev/null
+++ b/src/components/Auth/InputField/Input/Input.module.scss
@@ -0,0 +1,22 @@
+.default {
+  display: flex;
+  width: 350px;
+  padding: 18px 16px;
+  align-items: center;
+  border-radius: 8px;
+  border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
+  background: var(--Linkbrary-white, #fff);
+
+  color: var(--Linkbrary-gray100, #373740);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+
+  &:focus {
+    border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
+  }
+}
+
+.error {
+  border: 1px solid var(--Linkbrary-red, #ff5b56);
+}
diff --git a/src/components/Auth/InputField/Input/Input.tsx b/src/components/Auth/InputField/Input/Input.tsx
new file mode 100644
index 0000000000..8232ac4394
--- /dev/null
+++ b/src/components/Auth/InputField/Input/Input.tsx
@@ -0,0 +1,7 @@
+import styles from "./Input.module.scss";
+
+export default function Input({ className, ...rest }) {
+  return (
+    <input className={`${styles.default} ${styles[className]}`} {...rest} />
+  );
+}
diff --git a/src/components/Auth/InputField/InputField.module.scss b/src/components/Auth/InputField/InputField.module.scss
new file mode 100644
index 0000000000..9b67a6d3f8
--- /dev/null
+++ b/src/components/Auth/InputField/InputField.module.scss
@@ -0,0 +1,23 @@
+.inputField {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  position: relative;
+  max-width: 350px;
+
+  .errorMessage {
+    color: var(--Linkbrary-red, #ff5b56);
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .eyeToggleButton {
+    border: none;
+    background: none;
+    position: absolute;
+    top: 22px;
+    right: 16px;
+    padding: 0;
+  }
+}
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
new file mode 100644
index 0000000000..3e63d4606f
--- /dev/null
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -0,0 +1,59 @@
+// "use client";
+import { useState } from "react";
+import Input from "./Input/Input";
+import styles from "./InputField.module.scss";
+import EyeOnIcon from "@/src/asset/svg/EyeOnIcon";
+import EyeOffIcon from "@/src/asset/svg/EyeOffIcon";
+
+interface InputField {
+  type: string;
+  name: string;
+  icon?: string;
+  isError?: boolean;
+}
+
+export default function InputField({
+  type,
+  name,
+  icon,
+  isError = false,
+}: InputField) {
+  const [inputType, setInputType] = useState(type);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleEyesClick = () => {
+    setIsVisible((prevVisible) => !prevVisible);
+
+    if (!isVisible) {
+      setInputType("text");
+      return;
+    }
+    setInputType(type);
+  };
+
+  const errorState = isError ? "error" : null;
+  const eyeToggleIcon = isVisible ? <EyeOnIcon /> : <EyeOffIcon />;
+  const errorMessage =
+    name === "email"
+      ? "이메일을 입력해 주세요"
+      : name === "password"
+      ? "비밀번호를 입력해 주세요"
+      : "";
+
+  // type={} name={}: 이게 key값인것이다  defaultValue={}: 기본값을 설정해야 하는것이다 unit={}: icon 유무를 표현할수 있어야 하는ㄱㅓㅅ이다 {...rest} 대충 내려줄거?
+  return (
+    <div className={styles.inputField}>
+      <Input className={errorState} type={inputType} name={name} />
+      {isError && <span className={styles.errorMessage}>{errorMessage}</span>}
+      {icon === "eyeToggle" && (
+        <button
+          type="button"
+          className={styles.eyeToggleButton}
+          onClick={handleEyesClick}
+        >
+          {eyeToggleIcon}
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/AuthForm/AuthLabel/AuthLabel.tsx b/src/components/AuthForm/AuthLabel/AuthLabel.tsx
deleted file mode 100644
index 478a984ffc..0000000000
--- a/src/components/AuthForm/AuthLabel/AuthLabel.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// import Input from "../../Input/Input";
-
-// export default function AuthLabel({ isError, errorMessage }) {
-//   return (
-//     <>
-//       <Input />
-//       {isError && <div>{errorMessage}</div>}
-//     </>
-//   );
-// }
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
deleted file mode 100644
index 5e68867f22..0000000000
--- a/src/components/Input/Input.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Input() {
-  return <input />;
-}

From 009aa7869e868f2879600c07ea0f0a02978a618f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 23:05:24 +0900
Subject: [PATCH 05/17] =?UTF-8?q?style:=20input=20type=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/InputField/Input/Input.tsx | 8 +++++++-
 src/components/Auth/InputField/InputField.tsx  | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Auth/InputField/Input/Input.tsx b/src/components/Auth/InputField/Input/Input.tsx
index 8232ac4394..cb0306862a 100644
--- a/src/components/Auth/InputField/Input/Input.tsx
+++ b/src/components/Auth/InputField/Input/Input.tsx
@@ -1,6 +1,12 @@
 import styles from "./Input.module.scss";
 
-export default function Input({ className, ...rest }) {
+interface Input {
+  className: string;
+  type: string;
+  name: string;
+}
+
+export default function Input({ className, ...rest }: Input) {
   return (
     <input className={`${styles.default} ${styles[className]}`} {...rest} />
   );
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index 3e63d4606f..ffb941e5a5 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -31,7 +31,7 @@ export default function InputField({
     setInputType(type);
   };
 
-  const errorState = isError ? "error" : null;
+  const errorState = isError ? "error" : "";
   const eyeToggleIcon = isVisible ? <EyeOnIcon /> : <EyeOffIcon />;
   const errorMessage =
     name === "email"

From 2cb165e1baa2f0474d7b683156bc73888c612d04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 23:19:26 +0900
Subject: [PATCH 06/17] =?UTF-8?q?style:=20build=20error=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/asset/index.ts                            | 3 ++-
 src/components/Auth/InputField/InputField.tsx | 3 +--
 src/utils/getValidUrl.ts                      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/asset/index.ts b/src/asset/index.ts
index dadb9abe95..cdf9847ee3 100644
--- a/src/asset/index.ts
+++ b/src/asset/index.ts
@@ -7,4 +7,5 @@ export { default as LinkImageEmptyCaseIcon } from "./svg/LinkImageEmptyCaseIcon"
 export { default as MagnifierIcon } from "./svg/MagnifierIcon";
 export { default as XIcon } from "./svg/XIcon";
 export { default as ChainIcon } from "./svg/ChainIcon";
-export { default as EyeIcon } from "./svg/EyeIcon";
+export { default as EyeOffIcon } from "./svg/EyeOffIcon";
+export { default as EyeOnIcon } from "./svg/EyeOnIcon";
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index ffb941e5a5..931a7c8d00 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -2,8 +2,7 @@
 import { useState } from "react";
 import Input from "./Input/Input";
 import styles from "./InputField.module.scss";
-import EyeOnIcon from "@/src/asset/svg/EyeOnIcon";
-import EyeOffIcon from "@/src/asset/svg/EyeOffIcon";
+import { EyeOffIcon, EyeOnIcon } from "@/src/asset";
 
 interface InputField {
   type: string;
diff --git a/src/utils/getValidUrl.ts b/src/utils/getValidUrl.ts
index 2ce86ec9e9..48d723f543 100644
--- a/src/utils/getValidUrl.ts
+++ b/src/utils/getValidUrl.ts
@@ -1,5 +1,5 @@
 export default function getValidUrl(url: string) {
-  if (url === null || !url.startsWith("https:")) {
+  if (url === null || url === undefined || !url.startsWith("https:")) {
     return null;
   }
 

From 815dbd8da2bbb56f8b21ac63016138fc08a27f33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 23:24:33 +0900
Subject: [PATCH 07/17] =?UTF-8?q?style:=20vercel=20=EB=B2=A0=ED=8F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20--output=20public?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 73dfd7ed9d..f34a494e69 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "next build --output public",
     "start": "next start",
     "lint": "next lint"
   },

From 4c09c1b7dfbcd96f333ac351661a0a623eee7d4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Fri, 5 Apr 2024 23:37:44 +0900
Subject: [PATCH 08/17] =?UTF-8?q?style:=20nextConfig=20-=20output:=20stand?=
 =?UTF-8?q?alone=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next.config.mjs | 2 ++
 package.json    | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/next.config.mjs b/next.config.mjs
index 6500ba9f42..c75839f89e 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -73,6 +73,8 @@ const nextConfig = {
       },
     ],
   },
+
+  output: "standalone",
 };
 
 export default nextConfig;
diff --git a/package.json b/package.json
index f34a494e69..73dfd7ed9d 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build --output public",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },

From 48b844051a013e89d74f02ffe6d922098709576c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Mon, 8 Apr 2024 15:45:30 +0900
Subject: [PATCH 09/17] =?UTF-8?q?feat:=20input=20state=20=EC=83=88?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/Auth.tsx                  | 14 +++++-
 .../Auth/InputField/Input/Input.module.scss   | 13 +++---
 .../Auth/InputField/Input/Input.tsx           | 24 +++++++++-
 src/components/Auth/InputField/InputField.tsx | 44 +++++++++++++++++--
 4 files changed, 82 insertions(+), 13 deletions(-)

diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
index 5f6cbfc435..072fd5abef 100644
--- a/src/components/Auth/Auth.tsx
+++ b/src/components/Auth/Auth.tsx
@@ -3,10 +3,20 @@
 import InputField from "./InputField/InputField";
 
 export default function Auth() {
+  const emailDefaultValue = "이메일을 입력해 주세요";
+  const passwordDefaultValue = "비밀번호를 입력해 주세요";
+
+  // isInvalid, focusBorderColor, errorBorderColor
   return (
     <form>
-      <InputField type="email" name="email" />
-      <InputField type="password" name="password" icon="eyeToggle" />
+      <InputField type="email" name="email" placeholder={emailDefaultValue} />
+      <br />
+      <InputField
+        type="password"
+        name="password"
+        icon="eyeToggle"
+        placeholder={passwordDefaultValue}
+      />
     </form>
   );
 }
diff --git a/src/components/Auth/InputField/Input/Input.module.scss b/src/components/Auth/InputField/Input/Input.module.scss
index 6f17eb7236..bd9d815647 100644
--- a/src/components/Auth/InputField/Input/Input.module.scss
+++ b/src/components/Auth/InputField/Input/Input.module.scss
@@ -1,20 +1,23 @@
-.default {
+.input {
   display: flex;
   width: 350px;
   padding: 18px 16px;
   align-items: center;
   border-radius: 8px;
-  border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
   background: var(--Linkbrary-white, #fff);
 
   color: var(--Linkbrary-gray100, #373740);
   font-size: 16px;
   font-weight: 400;
   line-height: 24px; /* 150% */
+}
+
+.default {
+  border: 1px solid var(--Linkbrary-gray20, #ccd5e3);
+}
 
-  &:focus {
-    border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
-  }
+.focus {
+  border: 1px solid var(--Linkbrary-primary-color, #6d6afe);
 }
 
 .error {
diff --git a/src/components/Auth/InputField/Input/Input.tsx b/src/components/Auth/InputField/Input/Input.tsx
index cb0306862a..469f03e16a 100644
--- a/src/components/Auth/InputField/Input/Input.tsx
+++ b/src/components/Auth/InputField/Input/Input.tsx
@@ -1,13 +1,33 @@
+import { ChangeEvent, FocusEventHandler } from "react";
 import styles from "./Input.module.scss";
 
 interface Input {
   className: string;
   type: string;
   name: string;
+  value: any;
+  onValueChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onInputFocus: FocusEventHandler;
+  onInputBlur: FocusEventHandler;
+  placeholder?: string;
 }
 
-export default function Input({ className, ...rest }: Input) {
+export default function Input({
+  className,
+  onValueChange,
+  placeholder,
+  onInputBlur,
+  onInputFocus,
+  ...rest
+}: Input) {
   return (
-    <input className={`${styles.default} ${styles[className]}`} {...rest} />
+    <input
+      className={`${styles.input} ${styles[className]}`}
+      placeholder={placeholder}
+      onChange={onValueChange}
+      onBlur={onInputBlur}
+      onFocus={onInputFocus}
+      {...rest}
+    />
   );
 }
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index 931a7c8d00..755bde8593 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -1,24 +1,28 @@
 // "use client";
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
+import { EyeOffIcon, EyeOnIcon } from "@/src/asset";
 import Input from "./Input/Input";
 import styles from "./InputField.module.scss";
-import { EyeOffIcon, EyeOnIcon } from "@/src/asset";
 
 interface InputField {
   type: string;
   name: string;
   icon?: string;
   isError?: boolean;
+  placeholder?: string;
 }
 
 export default function InputField({
   type,
   name,
   icon,
+  placeholder,
   isError = false,
 }: InputField) {
   const [inputType, setInputType] = useState(type);
   const [isVisible, setIsVisible] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [borderColor, setBorderColor] = useState("default");
 
   const handleEyesClick = () => {
     setIsVisible((prevVisible) => !prevVisible);
@@ -30,8 +34,32 @@ export default function InputField({
     setInputType(type);
   };
 
+  const handleValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+  };
+
+  const handleInputFocus = () => {
+    if (borderColor === "error") {
+      return;
+    }
+
+    setBorderColor("focus");
+  };
+
+  const handleInputBlur = () => {
+    if (inputValue === "") {
+      setBorderColor("error");
+      return;
+    }
+
+    setBorderColor("default");
+  };
+
   const errorState = isError ? "error" : "";
+
   const eyeToggleIcon = isVisible ? <EyeOnIcon /> : <EyeOffIcon />;
+
+  // errorMessage도 그냥 받아서 쓸까...
   const errorMessage =
     name === "email"
       ? "이메일을 입력해 주세요"
@@ -39,10 +67,18 @@ export default function InputField({
       ? "비밀번호를 입력해 주세요"
       : "";
 
-  // type={} name={}: 이게 key값인것이다  defaultValue={}: 기본값을 설정해야 하는것이다 unit={}: icon 유무를 표현할수 있어야 하는ㄱㅓㅅ이다 {...rest} 대충 내려줄거?
   return (
     <div className={styles.inputField}>
-      <Input className={errorState} type={inputType} name={name} />
+      <Input
+        className={borderColor}
+        type={inputType}
+        name={name}
+        placeholder={placeholder}
+        value={inputValue}
+        onValueChange={handleValueChange}
+        onInputBlur={handleInputBlur}
+        onInputFocus={handleInputFocus}
+      />
       {isError && <span className={styles.errorMessage}>{errorMessage}</span>}
       {icon === "eyeToggle" && (
         <button

From 6a758f9e5e0d0bd660365d97ab7238eb5f85c409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Mon, 8 Apr 2024 17:36:55 +0900
Subject: [PATCH 10/17] feat: install react hook form

---
 app/signin/page.tsx                  |  4 +++-
 package-lock.json                    | 18 +++++++++++++++++-
 package.json                         |  3 ++-
 src/components/Auth/Auth.tsx         |  1 +
 src/components/Auth/AuthHookForm.tsx | 11 +++++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Auth/AuthHookForm.tsx

diff --git a/app/signin/page.tsx b/app/signin/page.tsx
index 7cb16f9c73..04dbb20785 100644
--- a/app/signin/page.tsx
+++ b/app/signin/page.tsx
@@ -1,9 +1,11 @@
 import Auth from "@/src/components/Auth/Auth";
+import AuthHookForm from "@/src/components/Auth/AuthHookForm";
 
 export default function signinPage() {
   return (
     <>
-      <Auth />
+      {/* <Auth /> */}
+      <AuthHookForm />
     </>
   );
 }
diff --git a/package-lock.json b/package-lock.json
index f859bf9421..b66ddc6a10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
       "dependencies": {
         "next": "14.1.4",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-hook-form": "^7.51.2"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -3396,6 +3397,21 @@
         "react": "^18.2.0"
       }
     },
+    "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==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 73dfd7ed9d..3592ea7d57 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "next": "14.1.4",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.2"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/src/components/Auth/Auth.tsx b/src/components/Auth/Auth.tsx
index 072fd5abef..593c054dfb 100644
--- a/src/components/Auth/Auth.tsx
+++ b/src/components/Auth/Auth.tsx
@@ -17,6 +17,7 @@ export default function Auth() {
         icon="eyeToggle"
         placeholder={passwordDefaultValue}
       />
+      <button type="submit">test</button>
     </form>
   );
 }
diff --git a/src/components/Auth/AuthHookForm.tsx b/src/components/Auth/AuthHookForm.tsx
new file mode 100644
index 0000000000..859b97e775
--- /dev/null
+++ b/src/components/Auth/AuthHookForm.tsx
@@ -0,0 +1,11 @@
+"use client";
+import { useForm } from "react-hook-form";
+
+export default function AuthHookForm() {
+  const { handleSubmit } = useForm();
+  return (
+    <form onSubmit={handleSubmit}>
+      <input />
+    </form>
+  );
+}

From 26cf6bea316e2f54482e91298b9d6c1905b6fb6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Mon, 8 Apr 2024 17:51:51 +0900
Subject: [PATCH 11/17] =?UTF-8?q?remove:=20logo=20=EC=9E=AC=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=EC=9C=BC=EB=A1=9C=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20svg=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/asset/index.ts                            |  1 -
 src/asset/svg/LinkImageEmptyCaseIcon.tsx      | 50 ------------------
 src/asset/svg/LinkbraryIcon.tsx               | 52 ++++++++++++-------
 src/components/Auth/AuthHookForm.tsx          |  7 ++-
 src/components/Header/Header/Header.tsx       |  2 +-
 .../LinkList/LinkOverview/LinkOverView.tsx    |  5 +-
 6 files changed, 41 insertions(+), 76 deletions(-)
 delete mode 100644 src/asset/svg/LinkImageEmptyCaseIcon.tsx

diff --git a/src/asset/index.ts b/src/asset/index.ts
index cdf9847ee3..38e229bd90 100644
--- a/src/asset/index.ts
+++ b/src/asset/index.ts
@@ -3,7 +3,6 @@ export { default as WhiteInstagramIcon } from "./svg/WhiteInstagramIcon";
 export { default as WhiteTwitterIcon } from "./svg/WhiteTwitterIcon";
 export { default as WhiteYoutubeIcon } from "./svg/WhiteYoutubeIcon";
 export { default as WhiteFacebookIcon } from "./svg/WhiteFacebookIcon";
-export { default as LinkImageEmptyCaseIcon } from "./svg/LinkImageEmptyCaseIcon";
 export { default as MagnifierIcon } from "./svg/MagnifierIcon";
 export { default as XIcon } from "./svg/XIcon";
 export { default as ChainIcon } from "./svg/ChainIcon";
diff --git a/src/asset/svg/LinkImageEmptyCaseIcon.tsx b/src/asset/svg/LinkImageEmptyCaseIcon.tsx
deleted file mode 100644
index 64d14581a8..0000000000
--- a/src/asset/svg/LinkImageEmptyCaseIcon.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-export default function LinkImageEmptyCaseIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="133"
-      height="24"
-      viewBox="0 0 133 24"
-      fill="none"
-    >
-      <g opacity="0.2">
-        <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"
-        />
-        <path
-          d="M46.0405 10.0893V0H40.8347V20.2718H46.0405V16.7068L48.2116 14.167L50.7328 20.2718H56.4755L53.184 12.233H49.869L56.0087 5.12621H50.3359L46.0405 10.0893Z"
-          fill="#6D6AFE"
-        />
-        <path
-          d="M67.0849 20.7379C70.2364 20.7379 74.1116 18.9437 74.1116 12.699C74.1116 6.45437 70.2364 4.66019 67.0849 4.66019C65.3341 4.66019 63.77 5.17281 62.5094 6.03495V0H57.3035V20.2718H62.5094V19.3631C63.77 20.2485 65.3341 20.7379 67.0849 20.7379ZM65.7076 16.1942C63.91 16.1942 62.5094 15.2854 62.5094 12.699V12.5126C62.5794 10.0893 63.9567 9.20388 65.7076 9.20388C67.7152 9.20388 68.9058 10.2524 68.9058 12.699C68.9058 15.1689 67.7152 16.1942 65.7076 16.1942Z"
-          fill="#6D6AFE"
-        />
-        <path
-          d="M74.935 20.2718H80.1409V13.9573C80.1876 11.0214 81.5182 9.32039 86.1638 9.32039V4.66019C83.3624 4.66019 81.3781 5.63883 80.1409 7.1068V5.12621H74.935V20.2718Z"
-          fill="#6D6AFE"
-        />
-        <path
-          d="M93.541 20.7379C95.2685 20.7379 96.8559 20.2485 98.1165 19.3631V20.2718H103.322V5.12621H98.1165V6.03495C96.8559 5.17281 95.2685 4.66019 93.541 4.66019C90.3895 4.66019 86.5143 6.45437 86.5143 12.699C86.5143 18.9437 90.3895 20.7379 93.541 20.7379ZM94.9183 16.1942C92.9107 16.1942 91.7201 15.1689 91.7201 12.699C91.7201 10.2524 92.9107 9.20388 94.9183 9.20388C96.7159 9.20388 98.1165 10.1359 98.1165 12.699C98.1165 15.2854 96.7159 16.1942 94.9183 16.1942Z"
-          fill="#6D6AFE"
-        />
-        <path
-          d="M104.613 20.2718H109.819V13.9573C109.865 11.0214 111.196 9.32039 115.841 9.32039V4.66019C113.04 4.66019 111.056 5.63883 109.819 7.1068V5.12621H104.613V20.2718Z"
-          fill="#6D6AFE"
-        />
-        <path
-          d="M127.794 5.12621V11.7204C127.234 12.3495 126.23 12.6058 125.063 12.6058C122.588 12.6058 121.865 11.8369 121.865 10.4155V5.12621H116.659V10.7883C116.659 14.9359 119.6 17.1728 123.686 17.1728C125.203 17.1728 126.604 16.8466 127.794 16.2874V16.8466C127.794 18.9204 127 19.666 124.946 19.666C123.242 19.666 122.425 19.1534 122.191 17.965H116.962C117.383 22.2524 119.694 24 124.946 24C130.666 24 133 21.9029 133 16.4505V5.12621H127.794Z"
-          fill="#6D6AFE"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/src/asset/svg/LinkbraryIcon.tsx b/src/asset/svg/LinkbraryIcon.tsx
index 657f67d0d0..a160aec143 100644
--- a/src/asset/svg/LinkbraryIcon.tsx
+++ b/src/asset/svg/LinkbraryIcon.tsx
@@ -1,50 +1,62 @@
-export default function LinkbraryIcon() {
+interface LinkbraryIconProps {
+  width: string;
+  height: string;
+  opacity?: string;
+  fill?: string;
+}
+
+export default function LinkbraryIcon({
+  width,
+  height,
+  opacity = "1",
+  fill = "#6D6AFE",
+}: LinkbraryIconProps) {
   return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="133"
-        height="24"
-        viewBox="0 0 133 24"
-        fill="none"
-      >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 133 24"
+      fill="none"
+    >
+      <g opacity={opacity}>
         <path
           d="M5.20583 15.7049V0.792232H0V20.2718H14.9638V15.7049H5.20583Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M21.6801 20.2718V5.12621H16.4743V20.2718H21.6801ZM21.6801 3.96117V0H16.4743V3.96117H21.6801Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <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"
+          fill={fill}
         />
         <path
           d="M46.0405 10.0893V0H40.8347V20.2718H46.0405V16.7068L48.2116 14.167L50.7328 20.2718H56.4755L53.184 12.233H49.869L56.0087 5.12621H50.3359L46.0405 10.0893Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M67.0849 20.7379C70.2364 20.7379 74.1116 18.9437 74.1116 12.699C74.1116 6.45437 70.2364 4.66019 67.0849 4.66019C65.3341 4.66019 63.77 5.17281 62.5094 6.03495V0H57.3035V20.2718H62.5094V19.3631C63.77 20.2485 65.3341 20.7379 67.0849 20.7379ZM65.7076 16.1942C63.91 16.1942 62.5094 15.2854 62.5094 12.699V12.5126C62.5794 10.0893 63.9567 9.20388 65.7076 9.20388C67.7152 9.20388 68.9058 10.2524 68.9058 12.699C68.9058 15.1689 67.7152 16.1942 65.7076 16.1942Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M74.935 20.2718H80.1409V13.9573C80.1876 11.0214 81.5182 9.32039 86.1638 9.32039V4.66019C83.3624 4.66019 81.3781 5.63883 80.1409 7.1068V5.12621H74.935V20.2718Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M93.541 20.7379C95.2685 20.7379 96.8559 20.2485 98.1165 19.3631V20.2718H103.322V5.12621H98.1165V6.03495C96.8559 5.17281 95.2685 4.66019 93.541 4.66019C90.3895 4.66019 86.5143 6.45437 86.5143 12.699C86.5143 18.9437 90.3895 20.7379 93.541 20.7379ZM94.9183 16.1942C92.9107 16.1942 91.7201 15.1689 91.7201 12.699C91.7201 10.2524 92.9107 9.20388 94.9183 9.20388C96.7159 9.20388 98.1165 10.1359 98.1165 12.699C98.1165 15.2854 96.7159 16.1942 94.9183 16.1942Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M104.613 20.2718H109.819V13.9573C109.865 11.0214 111.196 9.32039 115.841 9.32039V4.66019C113.04 4.66019 111.056 5.63883 109.819 7.1068V5.12621H104.613V20.2718Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
         <path
           d="M127.794 5.12621V11.7204C127.234 12.3495 126.23 12.6058 125.063 12.6058C122.588 12.6058 121.865 11.8369 121.865 10.4155V5.12621H116.659V10.7883C116.659 14.9359 119.6 17.1728 123.686 17.1728C125.203 17.1728 126.604 16.8466 127.794 16.2874V16.8466C127.794 18.9204 127 19.666 124.946 19.666C123.242 19.666 122.425 19.1534 122.191 17.965H116.962C117.383 22.2524 119.694 24 124.946 24C130.666 24 133 21.9029 133 16.4505V5.12621H127.794Z"
-          fill="#6D6AFE"
+          fill={fill}
         />
-      </svg>
-    </div>
+      </g>
+    </svg>
   );
 }
diff --git a/src/components/Auth/AuthHookForm.tsx b/src/components/Auth/AuthHookForm.tsx
index 859b97e775..954d7de023 100644
--- a/src/components/Auth/AuthHookForm.tsx
+++ b/src/components/Auth/AuthHookForm.tsx
@@ -3,8 +3,13 @@ import { useForm } from "react-hook-form";
 
 export default function AuthHookForm() {
   const { handleSubmit } = useForm();
+  // register : value 관련
+  // watch : input 상태감지
+  // formState : submit error 감지
+  // m
+
   return (
-    <form onSubmit={handleSubmit}>
+    <form>
       <input />
     </form>
   );
diff --git a/src/components/Header/Header/Header.tsx b/src/components/Header/Header/Header.tsx
index a903c7effe..60f598d762 100644
--- a/src/components/Header/Header/Header.tsx
+++ b/src/components/Header/Header/Header.tsx
@@ -13,7 +13,7 @@ export default async function Header() {
     <header className={styles.header}>
       <nav className={styles.headerBox}>
         <Link href="/">
-          <LinkbraryIcon />
+          <LinkbraryIcon width="133" height="24" />
         </Link>
         {userData ? (
           <section className={styles.profileBox}>
diff --git a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
index 302393d136..ccd05c17c8 100644
--- a/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
+++ b/src/components/LinkManager/LinkList/LinkOverview/LinkOverView.tsx
@@ -3,7 +3,7 @@ import styles from "./LinkOverview.module.scss";
 import { Link as TLink } from "@/src/constants/types";
 import getElapsedTime from "@/src/utils/getElapsedTime";
 import getFormattedDate from "@/src/utils/getFormattedDate";
-import { LinkImageEmptyCaseIcon } from "@/src/asset/";
+import { LinkbraryIcon } from "@/src/asset/";
 import Image from "next/image";
 import getValidUrl from "@/src/utils/getValidUrl";
 
@@ -17,7 +17,6 @@ export default function LinkOverview({ link }: LinkOverview) {
   const formatDate = getFormattedDate(createdAt);
 
   // 서버 Image-url이 문제가 있어서 그냥 null처리 했읍니다
-
   const imageSource = getValidUrl(imageUrl);
 
   return (
@@ -28,7 +27,7 @@ export default function LinkOverview({ link }: LinkOverview) {
         </figure>
       ) : (
         <figure className={styles.emptyCaseBox}>
-          <LinkImageEmptyCaseIcon />
+          <LinkbraryIcon width="133" height="24" opacity="0.2" />
         </figure>
       )}
       <div className={styles.caption}>

From d1cb6838ed535a99ffada7c76783716d1aa45f6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Tue, 9 Apr 2024 18:58:53 +0900
Subject: [PATCH 12/17] =?UTF-8?q?feat:=20form=20=EC=9D=BC=EB=B6=80=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/AuthHookForm.module.scss  | 22 +++++++++++++
 src/components/Auth/AuthHookForm.tsx          | 32 ++++++++++++++++---
 src/components/Auth/InputField/InputField.tsx | 15 +++------
 3 files changed, 54 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Auth/AuthHookForm.module.scss

diff --git a/src/components/Auth/AuthHookForm.module.scss b/src/components/Auth/AuthHookForm.module.scss
new file mode 100644
index 0000000000..68a88f734b
--- /dev/null
+++ b/src/components/Auth/AuthHookForm.module.scss
@@ -0,0 +1,22 @@
+.authForm {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  justify-content: center;
+  align-items: center;
+  margin: auto;
+  width: 100%;
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    font-size: 16px;
+    font-weight: 400;
+
+    &__text {
+      display: flex;
+      gap: 8px;
+    }
+  }
+}
diff --git a/src/components/Auth/AuthHookForm.tsx b/src/components/Auth/AuthHookForm.tsx
index 954d7de023..9035a94707 100644
--- a/src/components/Auth/AuthHookForm.tsx
+++ b/src/components/Auth/AuthHookForm.tsx
@@ -1,16 +1,40 @@
 "use client";
+import { LinkbraryIcon } from "@/src/asset";
+import Link from "next/link";
 import { useForm } from "react-hook-form";
+import InputField from "./InputField/InputField";
+import styles from "./AuthHookForm.module.scss";
 
 export default function AuthHookForm() {
   const { handleSubmit } = useForm();
   // register : value 관련
   // watch : input 상태감지
   // formState : submit error 감지
-  // m
 
   return (
-    <form>
-      <input />
-    </form>
+    <main className={styles.authForm}>
+      <header className={styles.header}>
+        <Link href={"/"}>
+          <LinkbraryIcon width="212" height="38" />
+        </Link>
+        <div className={styles.header__text}>
+          <p>회원이 아니신가요?</p>
+          <Link href={"/signup"}>회원 가입하기</Link>
+        </div>
+      </header>
+      <section>
+        <form>
+          <InputField type="email" name="이메일" label={true} />
+          <InputField
+            type="password"
+            name="비밀번호"
+            icon="eyeToggle"
+            label={true}
+          />
+          <button type="submit">테스트 버튼</button>
+        </form>
+      </section>
+      <section>소셜로그인</section>
+    </main>
   );
 }
diff --git a/src/components/Auth/InputField/InputField.tsx b/src/components/Auth/InputField/InputField.tsx
index 755bde8593..02b233c67f 100644
--- a/src/components/Auth/InputField/InputField.tsx
+++ b/src/components/Auth/InputField/InputField.tsx
@@ -10,6 +10,7 @@ interface InputField {
   icon?: string;
   isError?: boolean;
   placeholder?: string;
+  label?: boolean;
 }
 
 export default function InputField({
@@ -17,6 +18,7 @@ export default function InputField({
   name,
   icon,
   placeholder,
+  label,
   isError = false,
 }: InputField) {
   const [inputType, setInputType] = useState(type);
@@ -55,20 +57,11 @@ export default function InputField({
     setBorderColor("default");
   };
 
-  const errorState = isError ? "error" : "";
-
   const eyeToggleIcon = isVisible ? <EyeOnIcon /> : <EyeOffIcon />;
 
-  // errorMessage도 그냥 받아서 쓸까...
-  const errorMessage =
-    name === "email"
-      ? "이메일을 입력해 주세요"
-      : name === "password"
-      ? "비밀번호를 입력해 주세요"
-      : "";
-
   return (
     <div className={styles.inputField}>
+      <label>{name}</label>
       <Input
         className={borderColor}
         type={inputType}
@@ -79,7 +72,7 @@ export default function InputField({
         onInputBlur={handleInputBlur}
         onInputFocus={handleInputFocus}
       />
-      {isError && <span className={styles.errorMessage}>{errorMessage}</span>}
+      {/* {isError && <span className={styles.errorMessage}>{errorMessage}</span>} */}
       {icon === "eyeToggle" && (
         <button
           type="button"

From 6149da2039b864da3ccc7a076b0c9023fc5563ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Tue, 9 Apr 2024 19:24:35 +0900
Subject: [PATCH 13/17] =?UTF-8?q?feat:=20Modal=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Modal.module.scss        | 11 +++
 src/components/Modal/Modal.tsx                | 42 ++++++++++
 .../Modal/ModalBasic/ModalBasic.module.scss   | 80 +++++++++++++++++++
 .../Modal/ModalBasic/ModalBasic.tsx           | 40 ++++++++++
 .../Modal/ModalBasic/ModalHeader.tsx          | 15 ++++
 src/components/Modal/ModalBasic/ModalMain.tsx |  9 +++
 .../Modal/ModalBasic/ModalShareBtns.tsx       | 25 ++++++
 7 files changed, 222 insertions(+)
 create mode 100644 src/components/Modal/Modal.module.scss
 create mode 100644 src/components/Modal/Modal.tsx
 create mode 100644 src/components/Modal/ModalBasic/ModalBasic.module.scss
 create mode 100644 src/components/Modal/ModalBasic/ModalBasic.tsx
 create mode 100644 src/components/Modal/ModalBasic/ModalHeader.tsx
 create mode 100644 src/components/Modal/ModalBasic/ModalMain.tsx
 create mode 100644 src/components/Modal/ModalBasic/ModalShareBtns.tsx

diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
new file mode 100644
index 0000000000..89e076f11e
--- /dev/null
+++ b/src/components/Modal/Modal.module.scss
@@ -0,0 +1,11 @@
+.button {
+  color: var(--Linkbrary-gray60, #9fa6b2);
+  font-size: 14px;
+  font-weight: 600;
+  border: none;
+  background-color: #ffffff;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
new file mode 100644
index 0000000000..055f9ef7a6
--- /dev/null
+++ b/src/components/Modal/Modal.tsx
@@ -0,0 +1,42 @@
+import { useRef, useState } from "react";
+import ModalBasic from "./ModalBasic/ModalBasic";
+import styles from "./Modal.module.scss";
+import { useOnClickOutside } from "usehooks-ts";
+
+interface Modal {
+  name: string;
+  subtitle?: string;
+  shareButtons?: boolean;
+}
+
+function Modal({ name, ...rest }: Modal) {
+  // 평상시 modal 노출 false
+  const [isOpen, setIsOpen] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  // 모달 닫기 false
+  const handleClickOutside = () => {
+    setIsOpen((preIsOpen) => !preIsOpen);
+  };
+  useOnClickOutside(modalRef, handleClickOutside);
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsOpen((preIsOpen) => !preIsOpen)}
+        className={styles.button}
+      >
+        {name}
+      </button>
+      {isOpen && (
+        <ModalBasic
+          name={name}
+          modalRef={modalRef}
+          handleClickOutside={handleClickOutside}
+          {...rest}
+        />
+      )}
+    </div>
+  );
+}
+
+export default Modal;
diff --git a/src/components/Modal/ModalBasic/ModalBasic.module.scss b/src/components/Modal/ModalBasic/ModalBasic.module.scss
new file mode 100644
index 0000000000..10e5dc2394
--- /dev/null
+++ b/src/components/Modal/ModalBasic/ModalBasic.module.scss
@@ -0,0 +1,80 @@
+.modalBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 99;
+}
+
+.modalBasic {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+  width: 360px;
+  height: auto;
+
+  .modalContainer {
+    display: flex;
+    padding: 32px 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    border-radius: 15px;
+    border: 1px solid var(--Stroke-light, #dee2e6);
+    background: var(---Gray-White, #fff);
+    position: relative;
+    margin: 20% auto;
+
+    & .closeBtn {
+      width: 24px;
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      border: none;
+      background: none;
+      padding: 0;
+    }
+  }
+}
+
+//modalHeader
+.modalHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+
+  color: var(--Linkbrary-gray100, #373740);
+  font-size: 20px;
+  font-weight: 700;
+
+  .subtitle {
+    color: var(--Linkbrary-gray60, #9fa6b2);
+    font-size: 14px;
+    font-weight: 400;
+  }
+}
+
+.modalShareBtns {
+  display: flex;
+  gap: 32px;
+
+  .shareBtn {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .shareBtnName {
+      color: var(--Linkbrary-gray100, #373740);
+      font-family: Inter;
+      font-size: 13px;
+      font-weight: 400;
+    }
+  }
+}
diff --git a/src/components/Modal/ModalBasic/ModalBasic.tsx b/src/components/Modal/ModalBasic/ModalBasic.tsx
new file mode 100644
index 0000000000..2db0de8242
--- /dev/null
+++ b/src/components/Modal/ModalBasic/ModalBasic.tsx
@@ -0,0 +1,40 @@
+import ModalHeader from "./ModalHeader";
+import ModalMain from "./ModalMain";
+import styles from "./ModalBasic.module.scss";
+import CloseIcon from "@/assets/svg/CloseIcon";
+import { RefObject } from "react";
+
+interface ModalBasic {
+  name: string;
+  modalRef: RefObject<HTMLDivElement>;
+  handleClickOutside: () => void;
+
+  subtitle?: string;
+  shareButtons?: boolean;
+}
+
+export default function ModalBasic({
+  name,
+  modalRef,
+  handleClickOutside,
+  ...rest
+}: ModalBasic) {
+  const { subtitle, shareButtons } = rest;
+  return (
+    <>
+      <div
+        className={styles.modalBackground}
+        onClick={handleClickOutside}
+      ></div>
+      <div className={styles.modalBasic} ref={modalRef}>
+        <div className={styles.modalContainer}>
+          <button className={styles.closeBtn} onClick={handleClickOutside}>
+            <CloseIcon />
+          </button>
+          <ModalHeader name={`폴더 ${name}`} subtitle={subtitle} />
+          <ModalMain shareButtons={shareButtons} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/Modal/ModalBasic/ModalHeader.tsx b/src/components/Modal/ModalBasic/ModalHeader.tsx
new file mode 100644
index 0000000000..26693bf0e7
--- /dev/null
+++ b/src/components/Modal/ModalBasic/ModalHeader.tsx
@@ -0,0 +1,15 @@
+import styles from "./ModalBasic.module.scss";
+
+interface ModalHeader {
+  name: string;
+  subtitle?: string;
+}
+
+export default function ModalHeader({ name, subtitle }: ModalHeader) {
+  return (
+    <div className={styles.modalHeader}>
+      <h2 className={styles.name}>{name}</h2>
+      {subtitle && <p className={styles.subtitle}>{subtitle}</p>}
+    </div>
+  );
+}
diff --git a/src/components/Modal/ModalBasic/ModalMain.tsx b/src/components/Modal/ModalBasic/ModalMain.tsx
new file mode 100644
index 0000000000..6ea3b36b80
--- /dev/null
+++ b/src/components/Modal/ModalBasic/ModalMain.tsx
@@ -0,0 +1,9 @@
+import ModalShareBtns from "./ModalShareBtns";
+
+interface ModalMain {
+  shareButtons?: boolean;
+}
+
+export default function ModalMain({ shareButtons }: ModalMain) {
+  return <>{shareButtons && <ModalShareBtns />}</>;
+}
diff --git a/src/components/Modal/ModalBasic/ModalShareBtns.tsx b/src/components/Modal/ModalBasic/ModalShareBtns.tsx
new file mode 100644
index 0000000000..90e2236929
--- /dev/null
+++ b/src/components/Modal/ModalBasic/ModalShareBtns.tsx
@@ -0,0 +1,25 @@
+import FIcon from "@/assets/svg/FIcon";
+import KakaoIcon from "@/assets/svg/KakaoIcon";
+import LinkIcon from "@/assets/svg/LinkIcon";
+import styles from "./ModalBasic.module.scss";
+
+function ModalShareBtns() {
+  return (
+    <ul className={styles.modalShareBtns}>
+      <li className={styles.shareBtn}>
+        <KakaoIcon />
+        <p className={styles.shareBtnName}>카카오톡</p>
+      </li>
+      <li className={styles.shareBtn}>
+        <FIcon />
+        <p className={styles.shareBtnName}>페이스북</p>
+      </li>
+      <li className={styles.shareBtn}>
+        <LinkIcon />
+        <p className={styles.shareBtnName}>링크복사</p>
+      </li>
+    </ul>
+  );
+}
+
+export default ModalShareBtns;

From 17f03034c9011afea4c0eb0721e60d159b6f6a9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Tue, 9 Apr 2024 19:28:30 +0900
Subject: [PATCH 14/17] feat: Add react usehooks-ts

---
 package-lock.json | 22 +++++++++++++++++++++-
 package.json      |  3 ++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b66ddc6a10..6b1d261dae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
         "next": "14.1.4",
         "react": "^18",
         "react-dom": "^18",
-        "react-hook-form": "^7.51.2"
+        "react-hook-form": "^7.51.2",
+        "usehooks-ts": "^3.1.0"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -2860,6 +2861,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4201,6 +4207,20 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 3592ea7d57..fb696dd560 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.51.2"
+    "react-hook-form": "^7.51.2",
+    "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@types/node": "^20",

From 26797bef6559d1542bf35b1ce1b124bc46e8595a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Wed, 10 Apr 2024 18:47:24 +0900
Subject: [PATCH 15/17] feat: Sign IU qw wq qw ] [ ';. . /

q
w
e

;
l
'
---
 app/signin/page.tsx                           |  8 +++--
 .../Auth/SignInForm/SignInForm.module.scss    | 20 +++++++++++++
 src/components/Auth/SignInForm/SignInForm.tsx | 30 +++++++++++++++++++
 3 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Auth/SignInForm/SignInForm.module.scss
 create mode 100644 src/components/Auth/SignInForm/SignInForm.tsx

diff --git a/app/signin/page.tsx b/app/signin/page.tsx
index 04dbb20785..b75a0881bc 100644
--- a/app/signin/page.tsx
+++ b/app/signin/page.tsx
@@ -1,11 +1,13 @@
-import Auth from "@/src/components/Auth/Auth";
-import AuthHookForm from "@/src/components/Auth/AuthHookForm";
+// import Auth from "@/src/components/Auth/Auth";
+// import AuthHookForm from "@/src/components/Auth/AuthHookForm";
+import SignInForm from "@/src/components/Auth/SignInForm/SignInForm";
 
 export default function signinPage() {
   return (
     <>
       {/* <Auth /> */}
-      <AuthHookForm />
+      {/* <AuthHookForm /> */}
+      <SignInForm />
     </>
   );
 }
diff --git a/src/components/Auth/SignInForm/SignInForm.module.scss b/src/components/Auth/SignInForm/SignInForm.module.scss
new file mode 100644
index 0000000000..4f05f2dac3
--- /dev/null
+++ b/src/components/Auth/SignInForm/SignInForm.module.scss
@@ -0,0 +1,20 @@
+.signForm {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 50vh auto;
+  gap: 32px;
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .inputBox {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+  }
+}
diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
new file mode 100644
index 0000000000..0635ea515b
--- /dev/null
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -0,0 +1,30 @@
+import { LinkbraryIcon } from "@/src/asset";
+import Link from "next/link";
+import styles from "./SignInForm.module.scss";
+
+export default function SignInForm() {
+  return (
+    <div className={styles.signForm}>
+      <div className={styles.logoBox}>
+        <Link href="/">
+          <LinkbraryIcon width="212" height="38" />
+        </Link>
+        <div className={styles.logoBox__text}>
+          <p>회원이 아니신가요?</p>
+          <Link href="/signup">회원 가입하기</Link>
+        </div>
+      </div>
+      <form className={styles.form}>
+        <div className={styles.inputBox}>
+          <label htmlFor="email">이메일</label>
+          <input type="email" name="email" />
+        </div>
+        <div className={styles.inputBox}>
+          <label htmlFor="password">비밀번호</label>
+          <input type="password" name="password" />
+        </div>
+        <button>로그인</button>
+      </form>
+    </div>
+  );
+}

From 728a782bb520ed4a4326e2ce13af7f2e83913c29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Wed, 10 Apr 2024 20:47:51 +0900
Subject: [PATCH 16/17] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20val?=
 =?UTF-8?q?idate=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

---
 .../Auth/SignInForm/SignInForm.module.scss    |  6 ++-
 src/components/Auth/SignInForm/SignInForm.tsx | 47 ++++++++++++++++++-
 src/constants/regex.ts                        |  2 +
 3 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/constants/regex.ts

diff --git a/src/components/Auth/SignInForm/SignInForm.module.scss b/src/components/Auth/SignInForm/SignInForm.module.scss
index 4f05f2dac3..a803904f7d 100644
--- a/src/components/Auth/SignInForm/SignInForm.module.scss
+++ b/src/components/Auth/SignInForm/SignInForm.module.scss
@@ -3,7 +3,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin: 50vh auto;
+  margin: 30vh auto;
   gap: 32px;
 
   .form {
@@ -15,6 +15,10 @@
       display: flex;
       flex-direction: column;
       gap: 12px;
+
+      .errorMessage {
+        color: var(--Linkbrary-red, #ff5b56);
+      }
     }
   }
 }
diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 0635ea515b..1d24cd3d0b 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -1,8 +1,24 @@
+"use client";
 import { LinkbraryIcon } from "@/src/asset";
 import Link from "next/link";
+import { useForm } from "react-hook-form";
 import styles from "./SignInForm.module.scss";
+import { EMAIL_REGEX } from "@/src/constants/regex";
+
+interface FieldValues {
+  email: string;
+  password: string;
+
+  // error 객체는 따로 분리해보고 싶었습니다
+  emailError?: string;
+  passwordError?: string;
+}
 
 export default function SignInForm() {
+  const {
+    register,
+    formState: { errors },
+  } = useForm<FieldValues>({ mode: "onBlur" });
   return (
     <div className={styles.signForm}>
       <div className={styles.logoBox}>
@@ -17,11 +33,38 @@ export default function SignInForm() {
       <form className={styles.form}>
         <div className={styles.inputBox}>
           <label htmlFor="email">이메일</label>
-          <input type="email" name="email" />
+          <input
+            id="email"
+            type="email"
+            placeholder="이메일을 입력해 주세요."
+            {...register("emailError", {
+              required: "이메일을 입력해 주세요.",
+              pattern: {
+                value: EMAIL_REGEX,
+                message: "올바른 이메일 주소가 아닙니다.",
+              },
+            })}
+          />
+          {errors.emailError?.message && (
+            <div className={styles.errorMessage}>
+              {errors.emailError?.message}
+            </div>
+          )}
         </div>
         <div className={styles.inputBox}>
           <label htmlFor="password">비밀번호</label>
-          <input type="password" name="password" />
+          <input
+            type="password"
+            placeholder="비밀번호를 입력해 주세요."
+            {...register("passwordError", {
+              required: "비밀번호를 입력해 주세요",
+            })}
+          />
+          {errors.passwordError?.message && (
+            <div className={styles.errorMessage}>
+              {errors.passwordError?.message}
+            </div>
+          )}
         </div>
         <button>로그인</button>
       </form>
diff --git a/src/constants/regex.ts b/src/constants/regex.ts
new file mode 100644
index 0000000000..9baa654f83
--- /dev/null
+++ b/src/constants/regex.ts
@@ -0,0 +1,2 @@
+export const EMAIL_REGEX =
+  /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

From a78a5ae9ae96122a1fb932b81d3c689d2283f510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=80=E1=85=B5=E1=86=B7=E1=84=87=E1=85=A9=E1=84=80?=
 =?UTF-8?q?=E1=85=A7=E1=86=BC?= <rlaqhrud6263@naver.com>
Date: Thu, 11 Apr 2024 01:04:05 +0900
Subject: [PATCH 17/17] =?UTF-8?q?feat:=20handleSubmit=20-=20error=EB=B6=80?=
 =?UTF-8?q?=EB=B6=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Auth/SignInForm/SignInForm.tsx | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/Auth/SignInForm/SignInForm.tsx b/src/components/Auth/SignInForm/SignInForm.tsx
index 1d24cd3d0b..a58d5886e2 100644
--- a/src/components/Auth/SignInForm/SignInForm.tsx
+++ b/src/components/Auth/SignInForm/SignInForm.tsx
@@ -9,16 +9,48 @@ interface FieldValues {
   email: string;
   password: string;
 
-  // error 객체는 따로 분리해보고 싶었습니다
+  // error 는 따로 분리해보고 싶었습니다
   emailError?: string;
   passwordError?: string;
 }
 
+// Response body
+// {
+//   "error": {
+//     "name": "AuthApiError",
+//     "message": "Invalid login credentials",
+//     "status": 400
+//   }
+// }
+
 export default function SignInForm() {
   const {
     register,
+    handleSubmit,
+    setError,
     formState: { errors },
   } = useForm<FieldValues>({ mode: "onBlur" });
+
+  // 이부분 잘 모르겠네여 post로 보내는게 맞는지 아니면 그냥 fetch 만 걸어서 보내는게 맞는지 의문입니다.
+  const onSubmit = async (data) => {
+    try {
+      const res = await fetch("https://bootcamp-api.codeit.kr/api/sign-in", {
+        body: JSON.parse(data),
+      });
+      const req = await res.json();
+      console.log(req);
+    } catch (error) {
+      console.log(data, "실패");
+
+      setError("emailError", {
+        message: "이메일을 확인해 주세요.",
+      });
+      setError("passwordError", {
+        message: "비밀번호를 확인해 주세요.",
+      });
+    }
+  };
+
   return (
     <div className={styles.signForm}>
       <div className={styles.logoBox}>
@@ -30,7 +62,11 @@ export default function SignInForm() {
           <Link href="/signup">회원 가입하기</Link>
         </div>
       </div>
-      <form className={styles.form}>
+      <form
+        id="signInForm"
+        onSubmit={handleSubmit(onSubmit)}
+        className={styles.form}
+      >
         <div className={styles.inputBox}>
           <label htmlFor="email">이메일</label>
           <input
@@ -58,6 +94,10 @@ export default function SignInForm() {
             placeholder="비밀번호를 입력해 주세요."
             {...register("passwordError", {
               required: "비밀번호를 입력해 주세요",
+              // pattern: {
+              //   value: EMAIL_REGEX,
+              //   message: "올바른 비밀번호가 아닙니다.",
+              // },
             })}
           />
           {errors.passwordError?.message && (