diff --git a/README.md b/README.md
index 03f7d56..d12939a 100644
--- a/README.md
+++ b/README.md
@@ -1,26 +1 @@
 # 🍪 내가 먹은 쿠키 - 18조 FE
-
-## 🙋‍♂️ 9주차 코드리뷰 질문
-
-컴포넌트에는 개발하면서 페이지 내에서 임시로 만들어 사용하는 컴포넌트가 있고, 공통 컴포넌트로 개발해둔 것이 있고, 라이브러리에서 가져와서 사용하는 컴포넌트가 있습니다. 그런데 이런 컴포넌트를 필요에 따라 혼용해서 사용하니까 헷갈리기도 합니다. 이런 컴포넌트 사용에 있어서 지키면 좋을 규칙같은 게 있을까요?
-
-예를 들어 아래에서 Section은 제가 해당 컴포넌트 내에서만 사용하려고 만든 컴포넌트이고, Typo는 공통컴포넌트로 이전에 개발한 컴포넌트입니다.
-```tsx
-        <Section>
-          <Typo bold element="h3" size="20px" style={{ marginBottom: '24px' }}>
-            내가 지원한 공고
-          </Typo>
-          {myRecruitList && <MyRecruitList myRecruitList={myRecruitList} />}
-        </Section>
-      </InnerContainer>
-    </Layout>
-  );
-}
-
-const Section = styled.div`
-  width: 100%;
-  direction: column;
-  align-items: center;
-  margin-bottom: 52px;
-`;
-
diff --git a/package-lock.json b/package-lock.json
index 35d034e..c1bfd38 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,12 +15,18 @@
         "@loadable/component": "^5.16.4",
         "@react-oauth/google": "^0.12.1",
         "@tanstack/react-query": "^5.56.2",
+        "@types/react-signature-canvas": "^1.0.6",
+        "axios": "^1.7.7",
+        "buffer": "^6.0.3",
         "csstype": "^3.1.3",
+        "i18next": "^23.16.4",
         "jquery": "^3.7.1",
+        "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.1.2",
         "react-hook-form": "^7.53.0",
+        "react-i18next": "^15.1.0",
         "react-router-dom": "^6.26.2",
         "react-signature-canvas": "^1.0.6",
         "zustand": "^4.5.5"
@@ -85,9 +91,9 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
-      "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.25.9",
@@ -99,9 +105,9 @@
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
-      "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -157,12 +163,12 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
-      "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.26.0",
+        "@babel/parser": "^7.26.2",
         "@babel/types": "^7.26.0",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
@@ -283,9 +289,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.1",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
-      "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.26.0"
@@ -395,31 +401,14 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@base2/pretty-print-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz",
-      "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==",
-      "dev": true,
-      "license": "BSD-2-Clause"
-    },
     "node_modules/@bundled-es-modules/cookie": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.0.tgz",
-      "integrity": "sha512-Or6YHg/kamKHpxULAdSqhGqnWFneIXu1NKvvfBBzKGwpVsYuFIQ5aBPHDnnoR3ghW1nvSkALd+EF9iMtY7Vjxw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@bundled-es-modules/cookie/-/cookie-2.0.1.tgz",
+      "integrity": "sha512-8o+5fRPLNbjbdGRRmJj3h6Hh1AQJf2dk3qQ/5ZFb+PXkRNiSoMGGUKlsgLfrxneb72axVJyIYji64E2+nNfYyw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "cookie": "^0.5.0"
-      }
-    },
-    "node_modules/@bundled-es-modules/cookie/node_modules/cookie": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
+        "cookie": "^0.7.2"
       }
     },
     "node_modules/@bundled-es-modules/statuses": {
@@ -621,9 +610,9 @@
       "license": "MIT"
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz",
-      "integrity": "sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
       "cpu": [
         "ppc64"
       ],
@@ -638,9 +627,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.23.1.tgz",
-      "integrity": "sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
       "cpu": [
         "arm"
       ],
@@ -655,9 +644,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.23.1.tgz",
-      "integrity": "sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
       "cpu": [
         "arm64"
       ],
@@ -672,9 +661,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.23.1.tgz",
-      "integrity": "sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
       "cpu": [
         "x64"
       ],
@@ -689,9 +678,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.23.1.tgz",
-      "integrity": "sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
       "cpu": [
         "arm64"
       ],
@@ -706,9 +695,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.23.1.tgz",
-      "integrity": "sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
       "cpu": [
         "x64"
       ],
@@ -723,9 +712,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
       "cpu": [
         "arm64"
       ],
@@ -740,9 +729,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.23.1.tgz",
-      "integrity": "sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
       "cpu": [
         "x64"
       ],
@@ -757,9 +746,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.23.1.tgz",
-      "integrity": "sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
       "cpu": [
         "arm"
       ],
@@ -774,9 +763,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.23.1.tgz",
-      "integrity": "sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
       "cpu": [
         "arm64"
       ],
@@ -791,9 +780,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.23.1.tgz",
-      "integrity": "sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
       "cpu": [
         "ia32"
       ],
@@ -808,9 +797,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.23.1.tgz",
-      "integrity": "sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
       "cpu": [
         "loong64"
       ],
@@ -825,9 +814,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.23.1.tgz",
-      "integrity": "sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
       "cpu": [
         "mips64el"
       ],
@@ -842,9 +831,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.23.1.tgz",
-      "integrity": "sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
       "cpu": [
         "ppc64"
       ],
@@ -859,9 +848,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.23.1.tgz",
-      "integrity": "sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
       "cpu": [
         "riscv64"
       ],
@@ -876,9 +865,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.23.1.tgz",
-      "integrity": "sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
       "cpu": [
         "s390x"
       ],
@@ -893,9 +882,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.23.1.tgz",
-      "integrity": "sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
       "cpu": [
         "x64"
       ],
@@ -910,9 +899,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
       "cpu": [
         "x64"
       ],
@@ -927,9 +916,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.23.1.tgz",
-      "integrity": "sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
       "cpu": [
         "arm64"
       ],
@@ -944,9 +933,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.23.1.tgz",
-      "integrity": "sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
       "cpu": [
         "x64"
       ],
@@ -961,9 +950,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
-      "integrity": "sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
       "cpu": [
         "x64"
       ],
@@ -978,9 +967,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.23.1.tgz",
-      "integrity": "sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
       "cpu": [
         "arm64"
       ],
@@ -995,9 +984,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.23.1.tgz",
-      "integrity": "sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
       "cpu": [
         "ia32"
       ],
@@ -1012,9 +1001,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.23.1.tgz",
-      "integrity": "sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
       "cpu": [
         "x64"
       ],
@@ -1168,9 +1157,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz",
-      "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
+      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1224,6 +1213,20 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@humanwhocodes/module-importer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
@@ -1239,9 +1242,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
-      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -1485,6 +1488,27 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@loadable/component": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.16.4.tgz",
+      "integrity": "sha512-fJWxx9b5WHX90QKmizo9B+es2so8DnBthI1mbflwCoOyvzEwxiZ/SVDCTtXEnHG72/kGBdzr297SSIekYtzSOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.18",
+        "hoist-non-react-statics": "^3.3.1",
+        "react-is": "^16.12.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@mdx-js/react": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz",
@@ -1504,9 +1528,9 @@
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.36.6",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.6.tgz",
-      "integrity": "sha512-issnYydStyH0wPEeU7CMwfO7kI668ffVtzKRMRS7H7BliOYuPuwEZxh9dwiXV+oeHBxT5SXT0wPwV8T7V2PJUA==",
+      "version": "0.36.10",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.36.10.tgz",
+      "integrity": "sha512-GXrJgakgJW3DWKueebkvtYgGKkxA7s0u5B0P5syJM5rvQUnrpLPigvci8Hukl7yEM+sU06l+er2Fgvx/gmiRgg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1594,15 +1618,6 @@
         "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@react-oauth/google": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
-      "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -1635,17 +1650,10 @@
         }
       }
     },
-    "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz",
-      "integrity": "sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz",
+      "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==",
       "cpu": [
         "arm"
       ],
@@ -1657,9 +1665,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.3.tgz",
-      "integrity": "sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz",
+      "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==",
       "cpu": [
         "arm64"
       ],
@@ -1671,9 +1679,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.3.tgz",
-      "integrity": "sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz",
+      "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==",
       "cpu": [
         "arm64"
       ],
@@ -1685,9 +1693,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.3.tgz",
-      "integrity": "sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz",
+      "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==",
       "cpu": [
         "x64"
       ],
@@ -1699,9 +1707,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.3.tgz",
-      "integrity": "sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz",
+      "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==",
       "cpu": [
         "arm64"
       ],
@@ -1713,9 +1721,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.3.tgz",
-      "integrity": "sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz",
+      "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==",
       "cpu": [
         "x64"
       ],
@@ -1727,9 +1735,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.3.tgz",
-      "integrity": "sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz",
+      "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==",
       "cpu": [
         "arm"
       ],
@@ -1741,9 +1749,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.3.tgz",
-      "integrity": "sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz",
+      "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==",
       "cpu": [
         "arm"
       ],
@@ -1755,9 +1763,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.3.tgz",
-      "integrity": "sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz",
+      "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==",
       "cpu": [
         "arm64"
       ],
@@ -1769,9 +1777,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.3.tgz",
-      "integrity": "sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz",
+      "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==",
       "cpu": [
         "arm64"
       ],
@@ -1783,9 +1791,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.3.tgz",
-      "integrity": "sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz",
+      "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==",
       "cpu": [
         "ppc64"
       ],
@@ -1797,9 +1805,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.3.tgz",
-      "integrity": "sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz",
+      "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==",
       "cpu": [
         "riscv64"
       ],
@@ -1811,9 +1819,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.3.tgz",
-      "integrity": "sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz",
+      "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==",
       "cpu": [
         "s390x"
       ],
@@ -1825,9 +1833,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.3.tgz",
-      "integrity": "sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz",
+      "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==",
       "cpu": [
         "x64"
       ],
@@ -1839,9 +1847,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.3.tgz",
-      "integrity": "sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz",
+      "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==",
       "cpu": [
         "x64"
       ],
@@ -1853,9 +1861,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.3.tgz",
-      "integrity": "sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz",
+      "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==",
       "cpu": [
         "arm64"
       ],
@@ -1867,9 +1875,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.3.tgz",
-      "integrity": "sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz",
+      "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==",
       "cpu": [
         "ia32"
       ],
@@ -1881,9 +1889,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.3.tgz",
-      "integrity": "sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz",
+      "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==",
       "cpu": [
         "x64"
       ],
@@ -1895,9 +1903,9 @@
       ]
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.3.6.tgz",
-      "integrity": "sha512-nOqgl0WoZK2KwjaABaXMoIgrIHOQl9inOzJvqQau0HOtsvnXGXYfJXYnpjZenoZDoZXKbUDl0U2haDFx2a2fJw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.4.2.tgz",
+      "integrity": "sha512-+hA200XN5aeA4T3jq8IifQq6Y+9FyNQ0Q+blM1L0Tl7WLzBc7B1kHQnKvhSj5pvMSBWc/Q/kY7Ev5t9gdOu13g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1912,13 +1920,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.3.6.tgz",
-      "integrity": "sha512-yBn+a8i5OJzJaX6Bx5MAkfei7c2nvq+RRmvuyvxw11rtDGR6Nz4OBBe56reWxo868wVUggpRTPJCMVe5tDYgVg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.2.tgz",
+      "integrity": "sha512-s4uag5VKuk8q2MSnuNS7Sv+v1/mykzGPXe/zZRW2ammtkdHp8Uy78eQS2G0aiG02chXCX+qQgWMyy5QItDcTFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1931,19 +1939,18 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.3.6.tgz",
-      "integrity": "sha512-9IMLHgtWPuFoRCt3hDsIk1FbkK5SlCMDW1DDwtTBIeWYYZLvptS42+vGVTeQ8v5SejmVzZkzuUdzu3p4sb3IcA==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.4.2.tgz",
+      "integrity": "sha512-raCbHEj1xl4F3wKH6IdfEXNRaxKpY4QGhjSTE8Pte5iJSVhKG86taLqqRr+4dC7H1/LVMPU1XCGV4mkgDGtyxQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
         "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -1951,27 +1958,22 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.3.6.tgz",
-      "integrity": "sha512-31Rk1TOhDIzGM2wNCUIB1xKuWtArW0D2Puua9warEXlQ3FtvwmxnPrwbIzw6ufYZDWPwl9phDYTcRh8WqZIoGg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.4.2.tgz",
+      "integrity": "sha512-jIpykha7hv2Inlrq31ZoYg2QhuCuvcO+Q+uvhT45RDTB+2US/fg3rJINKlw2Djq8RPPOXvty5W0yvE6CrWKhnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/blocks": "8.3.6",
-        "@storybook/csf-plugin": "8.3.6",
-        "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "8.3.6",
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "fs-extra": "^11.1.0",
+        "@storybook/blocks": "8.4.2",
+        "@storybook/csf-plugin": "8.4.2",
+        "@storybook/react-dom-shim": "8.4.2",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "rehype-external-links": "^3.0.0",
-        "rehype-slug": "^6.0.0",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -1979,25 +1981,25 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.3.6.tgz",
-      "integrity": "sha512-MQPFvThlGU7wlda1xhBPQCmDh90cSSZ31OsVs1uC5kJh0aLbY2gYXPurq1G54kzrYo8SMfBxsXrCplz8Ir6UTg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.4.2.tgz",
+      "integrity": "sha512-+/vfPrXM/GWU3Kbrg92PepwAZr7lOeulTTYF4THK0CL3DfUUlkGNpBPLP5PtjCuIkVrTCjXiIEdVWk47d5m2+w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/addon-actions": "8.3.6",
-        "@storybook/addon-backgrounds": "8.3.6",
-        "@storybook/addon-controls": "8.3.6",
-        "@storybook/addon-docs": "8.3.6",
-        "@storybook/addon-highlight": "8.3.6",
-        "@storybook/addon-measure": "8.3.6",
-        "@storybook/addon-outline": "8.3.6",
-        "@storybook/addon-toolbars": "8.3.6",
-        "@storybook/addon-viewport": "8.3.6",
+        "@storybook/addon-actions": "8.4.2",
+        "@storybook/addon-backgrounds": "8.4.2",
+        "@storybook/addon-controls": "8.4.2",
+        "@storybook/addon-docs": "8.4.2",
+        "@storybook/addon-highlight": "8.4.2",
+        "@storybook/addon-measure": "8.4.2",
+        "@storybook/addon-outline": "8.4.2",
+        "@storybook/addon-toolbars": "8.4.2",
+        "@storybook/addon-viewport": "8.4.2",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -2005,13 +2007,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.3.6.tgz",
-      "integrity": "sha512-A7uU+1OPVXGpkklEUJjSl2VEEDLCSNvmffUJlvW1GjajsNFIHOW2CSD+KnfFlQyPxyVbnWAYLqUP4XJxoqrvDw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.4.2.tgz",
+      "integrity": "sha512-vTtwp7nyJ09SXrsMnH+pukCjHjRMjQXgHZHxvbrv09uoH8ldQMv9B7u+X+9Wcy/jYSKFz/ng7pWo4b4a2oXHkg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2022,19 +2024,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.3.6.tgz",
-      "integrity": "sha512-Y0YUJj0oE1+6DFkaTPXM/8+dwTSoy0ltj2Sn2KOTJYzxKQYXBp8TlUv0QOQiGH7o/GKXIWek/VlTuvG/JEeiWw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.4.2.tgz",
+      "integrity": "sha512-+/NTENTApeOcONgFNQ6Olbk0GH3pTDG3w0eh00slCB+2agD1BcVKg8SSlHQV0lQF1cK3vWL/X3jeaxdFLYOjjg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.3.6",
-        "@storybook/test": "8.3.6",
+        "@storybook/instrumenter": "8.4.2",
+        "@storybook/test": "8.4.2",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
       },
@@ -2043,13 +2045,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.3.6.tgz",
-      "integrity": "sha512-EGEH/kEjndEldbqyiJ8XSASkxqwzL/lgA/+6mHpa6Ljxhk1s5IMGcdA1ymJYJ2BpNdkUxRj/uxAa38eGcQiJ/g==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.4.2.tgz",
+      "integrity": "sha512-8nncReA/drR2cyAcUz484FIv+MXbyCQxYrA6yfWHthZfGu+vMIETvhh+eP4OpluVnxySoQ+hCVK/V8G2jcyAZg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2063,7 +2065,7 @@
       },
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -2072,9 +2074,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.3.6.tgz",
-      "integrity": "sha512-VHWeGgYjhzhwb2WAqYW/qyEPqg5pwKR/XqFfd+3tEirUs/64olL1l3lzLwZ8Cm07cJ81T8Z4myywb9kObZfQlw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.4.2.tgz",
+      "integrity": "sha512-z+j6xQwcUBSpgzl1XDU+xU4YYgLraLMljECW7NvRNyJ/PYixvol8R3wtzWbr+CBpxmvbXjEJCPlF+EjF9/mBWQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2086,13 +2088,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-onboarding": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.3.6.tgz",
-      "integrity": "sha512-DvwtK3k5docaO7ZO0LRXL1myCwOnW2X+e9c383GEk9AykgL5otzkMjxRZ1rSAw39q/WIE9H0vBvUmzGVRpUm+A==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.4.2.tgz",
+      "integrity": "sha512-zWzOyRASnIPt2AcaEl1KhI+aOaKDuoIcNB7u1GoABj0YM+V9d6o3lvcsmOAQG5pgwgFyqyOnLwpTfvRSEyzGFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2103,13 +2105,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.3.6.tgz",
-      "integrity": "sha512-+VXpM8SIHX2cn30qLlMvER9/6iioFRSn2sAfLniqy4RrcQmcMP+qgE7ZzbzExt7cneJh3VFsYqBS/HElu14Vgg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.4.2.tgz",
+      "integrity": "sha512-oTMlPEyT4CBqzcQbfemoJzJ6yzeRAmvrAx9ssaBcnQQRsKxo0D2Ri/Jmm6SNcR0yBHxYRkvIH+2phLw8aiflCQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2121,13 +2123,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.3.6.tgz",
-      "integrity": "sha512-FJH+lRoZXENfpMR/G09ZqB0TmL/k6bv07GN1ysoVs420tKRgjfz6uXaZz5COrhcdISr5mTNmG+mw9x7xXTfX3Q==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.4.2.tgz",
+      "integrity": "sha512-DidzW/NQS224niMJIjcJI2ls83emqygUcS9GYNGgdc5Xwro/TPgGYOXP2qnXgYUxXQTHbrxmIbHdEehxC7CcYQ==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2135,13 +2137,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.3.6.tgz",
-      "integrity": "sha512-bL51v837W1cng/+0pypkoLsWKWmvux96zLOzqLCpcWAQ4OSMhW3foIWpCiFwMG/KY+GanoOocTx6i7j5hLtuTA==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.4.2.tgz",
+      "integrity": "sha512-qVQ2UaxCNsUSFHnAAAizNPIJ/QwfMg7p5bBdpYROTZXJe+bxVp0rFzZmQgHZ3/sn+lzE4ItM4QEfxkfQUWi1ag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2152,30 +2154,19 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/blocks": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.3.6.tgz",
-      "integrity": "sha512-Oc5jU6EzfsENjrd91KcKyEKBh60RT+8uyLi1RIrymC2C/mzZMTEoNIrbnQt0eIqbjlHxn6y9JMJxHu4NJ4EmZg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.4.2.tgz",
+      "integrity": "sha512-yAAvmOWaD8gIrepOxCh/RxQqd/1xZIwd/V+gsvAhW/thawN+SpI+zK63gmcqAPLX84hJ3Dh5pegRk0SoHNuDVA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
-        "@storybook/global": "^5.0.0",
-        "@storybook/icons": "^1.2.10",
-        "@types/lodash": "^4.14.167",
-        "color-convert": "^2.0.1",
-        "dequal": "^2.0.2",
-        "lodash": "^4.17.21",
-        "markdown-to-jsx": "^7.4.5",
-        "memoizerific": "^1.11.3",
-        "polished": "^4.2.2",
-        "react-colorful": "^5.1.2",
-        "telejson": "^7.2.0",
-        "ts-dedent": "^2.0.0",
-        "util-deprecate": "^1.0.2"
+        "@storybook/icons": "^1.2.12",
+        "ts-dedent": "^2.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -2184,7 +2175,7 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       },
       "peerDependenciesMeta": {
         "react": {
@@ -2196,20 +2187,14 @@
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.3.6.tgz",
-      "integrity": "sha512-AF4+oFe1mvIHrLvaYsv8B0YSlXQtSlKTKwrXnUbcAbeGRwMmFKA1t3VyAcXV0yB9MtZ8YJsA/uKRkgGEaN7wJQ==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-8.4.2.tgz",
+      "integrity": "sha512-dO5FB5yH1C6tr/kBHn1frvGwp8Pt0D1apgXWkJ5ITWEUfh6WwOqX2fqsWsqaNwE7gP0qn0XgwCIEkI/4Mj55SA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/csf-plugin": "8.3.6",
-        "@types/find-cache-dir": "^3.2.1",
+        "@storybook/csf-plugin": "8.4.2",
         "browser-assert": "^1.2.1",
-        "es-module-lexer": "^1.5.0",
-        "express": "^4.19.2",
-        "find-cache-dir": "^3.0.0",
-        "fs-extra": "^11.1.0",
-        "magic-string": "^0.30.0",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -2217,28 +2202,14 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "@preact/preset-vite": "*",
-        "storybook": "^8.3.6",
-        "typescript": ">= 4.3.x",
-        "vite": "^4.0.0 || ^5.0.0",
-        "vite-plugin-glimmerx": "*"
-      },
-      "peerDependenciesMeta": {
-        "@preact/preset-vite": {
-          "optional": true
-        },
-        "typescript": {
-          "optional": true
-        },
-        "vite-plugin-glimmerx": {
-          "optional": true
-        }
+        "storybook": "^8.4.2",
+        "vite": "^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/@storybook/components": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.3.6.tgz",
-      "integrity": "sha512-TXuoGZY7X3iixF45lXkYOFk8k2q9OHcqHyHyem1gATLLQXgyOvDgzm+VB7uKBNzssRQPEE+La70nfG8bq/viRw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.4.2.tgz",
+      "integrity": "sha512-+W59oF7D73LAxLNmCfFrfs98cH9pyNHK9HlJoO5/lKbK4IdWhhOoqUR/AJ3ueksoLuetFat4DxyE8SN1H4Bvrg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2246,23 +2217,21 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@storybook/core": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.6.tgz",
-      "integrity": "sha512-frwfgf0EJ7QL29DWZ5bla/g0eOOWqJGd14t+VUBlpP920zB6sdDfo7+p9JoCjD9u08lGeFDqbPNKayUk+0qDag==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.2.tgz",
+      "integrity": "sha512-hF8GWoUZTjwwuV5j4OLhMHZtZQL/NYcVUBReC2Ba06c8PkFIKqKZwATr1zKd301gQ5Qwcn9WgmZxJTMgdKQtOg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
-        "@types/express": "^4.17.21",
         "better-opn": "^3.0.2",
         "browser-assert": "^1.2.1",
-        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
         "esbuild-register": "^3.5.0",
-        "express": "^4.19.2",
         "jsdoc-type-pratt-parser": "^4.0.0",
         "process": "^0.11.10",
         "recast": "^0.23.5",
@@ -2273,6 +2242,14 @@
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
       }
     },
     "node_modules/@storybook/csf": {
@@ -2286,9 +2263,9 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.3.6.tgz",
-      "integrity": "sha512-TJyJPFejO6Gyr3+bXqE/+LomQbivvfHEbee/GwtlRj0XF4KQlqnvuEdEdcK25JbD0NXT8AbyncEUmjoxE7ojQw==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.4.2.tgz",
+      "integrity": "sha512-1f0t6W5xbC1sSAHHs3uXYPIQs2NXAEtIGqn6X9i3xbbub6hDS8PF8BIm7dOjQ8dZOPp7d9ltR64V5CoLlsOigA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2299,7 +2276,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/global": {
@@ -2324,28 +2301,27 @@
       }
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.3.6.tgz",
-      "integrity": "sha512-0RowbKwoB/s7rtymlnKNiyWN1Z3ZK5mwgzVjlRmzxDL8hrdi5KDjTNExuJTRR3ZaBP2RR0/I3m/n0p9JhHAZvg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.2.tgz",
+      "integrity": "sha512-gPYCZ/0O6gRLI3zmenu2N6QtKzxDZFdT2xf4RWcNUSZyp28RZkRCIgKFMt3fTmvE0yMzAjQyRSkBdrONjQ44HA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@vitest/utils": "^2.0.5",
-        "util": "^0.12.4"
+        "@vitest/utils": "^2.1.1"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.6.tgz",
-      "integrity": "sha512-Xt5VFZcL+G/9uzaHjzWFhxRNrP+4rPhSRKEvCZorAbC9+Hv+ZDs1JSZS5wMb4WKpXBZ0rwDVOLwngqbVtfRHuQ==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.4.2.tgz",
+      "integrity": "sha512-rhPc4cgQDKDH8NUyRh/ZaJW7QIhR/PO5MNX4xc+vz71sM2nO7ONA/FrgLtCuu4SULdwilEPvGefYvLK0dE+Caw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2353,13 +2329,13 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.3.6.tgz",
-      "integrity": "sha512-/Wxvb7wbI2O2iH63arRQQyyojA630vibdshkFjuC/u1nYdptEV1jkxa0OYmbZbKCn4/ze6uH4hfsKOpDPV9SWg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.4.2.tgz",
+      "integrity": "sha512-5X/xvIvDPaWJKUBCo5zVeBbbjkhnwcI2KPkuOgrHVRRhuQ5WqD0RYxVtOOFNyQXme7g0nNl5RFNgvT7qv9qGeg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2367,36 +2343,22 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@storybook/react": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.3.6.tgz",
-      "integrity": "sha512-s3COryqIOYK7urgZaCPb77zlxGjPKr6dIsYmblQJcsFY2ZlG2x0Ysm8b5oRgD8Pv71hCJ0PKYA4RzDgBVYJS9A==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-8.4.2.tgz",
+      "integrity": "sha512-rO5/aVKBVhIKENcL7G8ud4QKC5OyWBPCkJIvY6XUHIuhErJy9/4pP+sZ85jypVwx5kq+EqCPF8AEOWjIxB/4/Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/components": "^8.3.6",
+        "@storybook/components": "8.4.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^8.3.6",
-        "@storybook/preview-api": "^8.3.6",
-        "@storybook/react-dom-shim": "8.3.6",
-        "@storybook/theming": "^8.3.6",
-        "@types/escodegen": "^0.0.6",
-        "@types/estree": "^0.0.51",
-        "@types/node": "^22.0.0",
-        "acorn": "^7.4.1",
-        "acorn-jsx": "^5.3.1",
-        "acorn-walk": "^7.2.0",
-        "escodegen": "^2.1.0",
-        "html-tags": "^3.1.0",
-        "prop-types": "^15.7.2",
-        "react-element-to-jsx-string": "^15.0.0",
-        "semver": "^7.3.7",
-        "ts-dedent": "^2.0.0",
-        "type-fest": "~2.19",
-        "util-deprecate": "^1.0.2"
+        "@storybook/manager-api": "8.4.2",
+        "@storybook/preview-api": "8.4.2",
+        "@storybook/react-dom-shim": "8.4.2",
+        "@storybook/theming": "8.4.2"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2406,10 +2368,10 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "@storybook/test": "8.3.6",
+        "@storybook/test": "8.4.2",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.6",
+        "storybook": "^8.4.2",
         "typescript": ">= 4.2.x"
       },
       "peerDependenciesMeta": {
@@ -2422,9 +2384,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.3.6.tgz",
-      "integrity": "sha512-9BO6VXIdli4GHSfiP/Z0gwAf7oQig3D/yWK2U1+91UWDV8nIAgnNBAi76U4ORC6MiK5MdkDfIikIxnLLeLnahA==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.4.2.tgz",
+      "integrity": "sha512-FZVTM1f34FpGnf6e3MDIKkz05gmn8H9wEccvQAgr8pEFe8VWfrpVWeUrmatSAfgrCMNXYC1avDend8UX6IM8Fg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2434,20 +2396,20 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.3.6.tgz",
-      "integrity": "sha512-KXi4ZT4X7DsB4OOIWeR1XMH/Oz6Rp4TlWBNx/TgSEDGYEkPooqZK/O0S+G+VIsrRGQUf/57YqO73mP6kNluxTA==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-8.4.2.tgz",
+      "integrity": "sha512-OoXaW/V1AqLggMyniRcnuwmqQ1/OtSn38t31lePX4nDDeJhbGT3ZPldRrwvsLb0EaD3N27uoL+QbAOgsYJIhwA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "8.3.6",
-        "@storybook/react": "8.3.6",
+        "@storybook/builder-vite": "8.4.2",
+        "@storybook/react": "8.4.2",
         "find-up": "^5.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0",
@@ -2464,39 +2426,38 @@
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-        "storybook": "^8.3.6",
+        "storybook": "^8.4.2",
         "vite": "^4.0.0 || ^5.0.0"
       }
     },
     "node_modules/@storybook/test": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.3.6.tgz",
-      "integrity": "sha512-WIc8LzK9jaEw+e3OiweEM2j3cppPzsWod59swuf6gDBf176EQLIyjtVc+Kh3qO4NNkcL+lwmqaLPjOxlBLaDbg==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.2.tgz",
+      "integrity": "sha512-MipTdboStv0hsqF2Sw8TZgP0YnxCcDYwxkTOd4hmRzev/7Brtvpi4pqjqh8k98ZCvhrCPAPVIoX5drk+oi3YUA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/csf": "^0.1.11",
         "@storybook/global": "^5.0.0",
-        "@storybook/instrumenter": "8.3.6",
+        "@storybook/instrumenter": "8.4.2",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.5.0",
         "@testing-library/user-event": "14.5.2",
         "@vitest/expect": "2.0.5",
-        "@vitest/spy": "2.0.5",
-        "util": "^0.12.4"
+        "@vitest/spy": "2.0.5"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.4.2"
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.6.tgz",
-      "integrity": "sha512-LQjUk6GXRW9ELkoBKuqzQKFUW+ajfGPfVELcfs3/VQX61VhthJ4olov4bGPc04wsmmFMgN/qODxT485IwOHfPQ==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.4.2.tgz",
+      "integrity": "sha512-9j4fnu5LcV+qSs1rdwf61Bt14lms0T1LOZkHxGNcS1c1oH+cPS+sxECh2lxtni+mvOAHUlBs9pKhVZzRPdWpvg==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -2504,7 +2465,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^8.3.6"
+        "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
       }
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
@@ -2760,9 +2721,9 @@
       }
     },
     "node_modules/@tanstack/query-core": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.16.tgz",
-      "integrity": "sha512-crHn+G3ltqb5JG0oUv6q+PMz1m1YkjpASrXTU+sYWW9pLk0t2GybUHNRqYPZWhxgjPaVGC4yp92gSFEJgYEsPw==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.20.tgz",
+      "integrity": "sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -2770,12 +2731,12 @@
       }
     },
     "node_modules/@tanstack/react-query": {
-      "version": "5.59.16",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.16.tgz",
-      "integrity": "sha512-MuyWheG47h6ERd4PKQ6V8gDyBu3ThNG22e1fRVwvq6ap3EqsFhyuxCAwhNP/03m/mLg+DAb0upgbPaX6VB+CkQ==",
+      "version": "5.59.20",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.20.tgz",
+      "integrity": "sha512-Zly0egsK0tFdfSbh5/mapSa+Zfc3Et0Zkar7Wo5sQkFzWyB3p3uZWOHR2wrlAEEV2L953eLuDBtbgFvMYiLvUw==",
       "license": "MIT",
       "dependencies": {
-        "@tanstack/query-core": "5.59.16"
+        "@tanstack/query-core": "5.59.20"
       },
       "funding": {
         "type": "github",
@@ -2913,27 +2874,6 @@
         "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@types/body-parser": {
-      "version": "1.19.5",
-      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz",
-      "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/connect": "*",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/connect": {
-      "version": "3.4.38",
-      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
-      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/cookie": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
@@ -2948,50 +2888,10 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/escodegen": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/@types/escodegen/-/escodegen-0.0.6.tgz",
-      "integrity": "sha512-AjwI4MvWx3HAOaZqYsjKWyEObT9lcVV0Y0V8nXo6cXzN8ZiMxVhf6F3d/UNvXVGKrEzL/Dluc5p+y9GkzlTWig==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/estree": {
-      "version": "0.0.51",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz",
-      "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/express": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz",
-      "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.33",
-        "@types/qs": "*",
-        "@types/serve-static": "*"
-      }
-    },
-    "node_modules/@types/express-serve-static-core": {
-      "version": "4.19.6",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz",
-      "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
-      }
-    },
-    "node_modules/@types/find-cache-dir": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz",
-      "integrity": "sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3006,23 +2906,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
-    "node_modules/@types/http-errors": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz",
-      "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3040,22 +2923,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/loadable__component": {
-      "version": "5.13.9",
-      "resolved": "https://registry.npmjs.org/@types/loadable__component/-/loadable__component-5.13.9.tgz",
-      "integrity": "sha512-QWOtIkwZqHNdQj3nixQ8oyihQiTMKZLk/DNuvNxMSbTfxf47w+kqcbnxlUeBgAxdOtW0Dh48dTAIp83iJKtnrQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/lodash": {
-      "version": "4.17.13",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
-      "integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/mdx": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz",
@@ -3063,13 +2930,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/mime": {
-      "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
-      "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -3078,9 +2938,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.8.4",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.4.tgz",
-      "integrity": "sha512-SpNNxkftTJOPk0oN+y2bIqurEXHTA2AOZ3EJDDKeJ5VzkvvORSvmQXGQarcOzWV1ac7DCaPBEdMDxBsM+d8jWw==",
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3099,20 +2959,6 @@
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
       "license": "MIT"
     },
-    "node_modules/@types/qs": {
-      "version": "6.9.16",
-      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz",
-      "integrity": "sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@types/range-parser": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
-      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
@@ -3167,29 +3013,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/send": {
-      "version": "0.17.4",
-      "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz",
-      "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/mime": "^1",
-        "@types/node": "*"
-      }
-    },
-    "node_modules/@types/serve-static": {
-      "version": "1.15.7",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz",
-      "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/http-errors": "*",
-        "@types/node": "*",
-        "@types/send": "*"
-      }
-    },
     "node_modules/@types/signature_pad": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/@types/signature_pad/-/signature_pad-2.3.6.tgz",
@@ -3210,13 +3033,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/unist": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
-      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/uuid": {
       "version": "9.0.8",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
@@ -3225,17 +3041,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.2.tgz",
-      "integrity": "sha512-gQxbxM8mcxBwaEmWdtLCIGLfixBMHhQjBqR8sVWNTPpcj45WlYL2IObS/DNMLH1DBP0n8qz+aiiLTGfopPEebw==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.13.0.tgz",
+      "integrity": "sha512-nQtBLiZYMUPkclSeC3id+x4uVd1SGtHuElTxL++SfP47jR0zfkZBJHc+gL4qPsgTuypz0k8Y2GheaDYn6Gy3rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.12.2",
-        "@typescript-eslint/type-utils": "8.12.2",
-        "@typescript-eslint/utils": "8.12.2",
-        "@typescript-eslint/visitor-keys": "8.12.2",
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/type-utils": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -3259,16 +3075,16 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.12.2.tgz",
-      "integrity": "sha512-MrvlXNfGPLH3Z+r7Tk+Z5moZAc0dzdVjTgUgwsdGweH7lydysQsnSww3nAmsq8blFuRD5VRlAr9YdEFw3e6PBw==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.13.0.tgz",
+      "integrity": "sha512-w0xp+xGg8u/nONcGw1UXAr6cjCPU1w0XVyBs6Zqaj5eLmxkKQAByTdV/uGgNN5tVvN/kKpoQlP2cL7R+ajZZIQ==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.12.2",
-        "@typescript-eslint/types": "8.12.2",
-        "@typescript-eslint/typescript-estree": "8.12.2",
-        "@typescript-eslint/visitor-keys": "8.12.2",
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -3288,14 +3104,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.12.2.tgz",
-      "integrity": "sha512-gPLpLtrj9aMHOvxJkSbDBmbRuYdtiEbnvO25bCMza3DhMjTQw0u7Y1M+YR5JPbMsXXnSPuCf5hfq0nEkQDL/JQ==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.13.0.tgz",
+      "integrity": "sha512-XsGWww0odcUT0gJoBZ1DeulY1+jkaHUciUq4jKNv4cpInbvvrtDoyBH9rE/n2V29wQJPk8iCH1wipra9BhmiMA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.12.2",
-        "@typescript-eslint/visitor-keys": "8.12.2"
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3306,14 +3122,14 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.12.2.tgz",
-      "integrity": "sha512-bwuU4TAogPI+1q/IJSKuD4shBLc/d2vGcRT588q+jzayQyjVK2X6v/fbR4InY2U2sgf8MEvVCqEWUzYzgBNcGQ==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.13.0.tgz",
+      "integrity": "sha512-Rqnn6xXTR316fP4D2pohZenJnp+NwQ1mo7/JM+J1LWZENSLkJI8ID8QNtlvFeb0HnFSK94D6q0cnMX6SbE5/vA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.12.2",
-        "@typescript-eslint/utils": "8.12.2",
+        "@typescript-eslint/typescript-estree": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.3.0"
       },
@@ -3331,9 +3147,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.12.2.tgz",
-      "integrity": "sha512-VwDwMF1SZ7wPBUZwmMdnDJ6sIFk4K4s+ALKLP6aIQsISkPv8jhiw65sAK6SuWODN/ix+m+HgbYDkH+zLjrzvOA==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.13.0.tgz",
+      "integrity": "sha512-4cyFErJetFLckcThRUFdReWJjVsPCqyBlJTi6IDEpc1GWCIIZRFxVppjWLIMcQhNGhdWJJRYFHpHoDWvMlDzng==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3345,14 +3161,14 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.12.2.tgz",
-      "integrity": "sha512-mME5MDwGe30Pq9zKPvyduyU86PH7aixwqYR2grTglAdB+AN8xXQ1vFGpYaUSJ5o5P/5znsSBeNcs5g5/2aQwow==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.13.0.tgz",
+      "integrity": "sha512-v7SCIGmVsRK2Cy/LTLGN22uea6SaUIlpBcO/gnMGT/7zPtxp90bphcGf4fyrCQl3ZtiBKqVTG32hb668oIYy1g==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
-        "@typescript-eslint/types": "8.12.2",
-        "@typescript-eslint/visitor-keys": "8.12.2",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/visitor-keys": "8.13.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -3374,16 +3190,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.12.2.tgz",
-      "integrity": "sha512-UTTuDIX3fkfAz6iSVa5rTuSfWIYZ6ATtEocQ/umkRSyC9O919lbZ8dcH7mysshrCdrAM03skJOEYaBugxN+M6A==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.13.0.tgz",
+      "integrity": "sha512-A1EeYOND6Uv250nybnLZapeXpYMl8tkzYUxqmoKAWnI4sei3ihf2XdZVd+vVOmHGcp3t+P7yRrNsyyiXTvShFQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.12.2",
-        "@typescript-eslint/types": "8.12.2",
-        "@typescript-eslint/typescript-estree": "8.12.2"
+        "@typescript-eslint/scope-manager": "8.13.0",
+        "@typescript-eslint/types": "8.13.0",
+        "@typescript-eslint/typescript-estree": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3397,13 +3213,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.12.2.tgz",
-      "integrity": "sha512-PChz8UaKQAVNHghsHcPyx1OMHoFRUEA7rJSK/mDhdq85bk+PLsUHUBqTQTFt18VJZbmxBovM65fezlheQRsSDA==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.13.0.tgz",
+      "integrity": "sha512-7N/+lztJqH4Mrf0lb10R/CbI1EaAMMGyF5y0oJvFoAhafwgiRA7TXyd8TFn8FC8k5y2dTsYogg238qavRGNnlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.12.2",
+        "@typescript-eslint/types": "8.13.0",
         "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
@@ -3414,13 +3230,6 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@ungap/structured-clone": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
-      "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
@@ -3457,13 +3266,6 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vitest/expect/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@vitest/expect/node_modules/@vitest/pretty-format": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
@@ -3544,24 +3346,10 @@
         "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/accepts": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
-      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "mime-types": "~2.1.34",
-        "negotiator": "0.6.3"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -3581,16 +3369,6 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -3667,13 +3445,6 @@
         "dequal": "^2.0.3"
       }
     },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -3707,6 +3478,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3723,8 +3500,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/babel-plugin-macros": {
-      "version": "3.1.0",
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
       "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
       "license": "MIT",
@@ -3778,48 +3566,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/body-parser": {
-      "version": "1.20.3",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
-      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "content-type": "~1.0.5",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "on-finished": "2.4.1",
-        "qs": "6.13.0",
-        "raw-body": "2.5.2",
-        "type-is": "~1.6.18",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
-    "node_modules/body-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/body-parser/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3906,16 +3652,6 @@
         "ieee754": "^1.2.1"
       }
     },
-    "node_modules/bytes": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
-      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/call-bind": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
@@ -3959,9 +3695,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001675",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001675.tgz",
-      "integrity": "sha512-/wV1bQwPrkLiQMjaJF5yUMVM/VdRPOCU8QZ+PmG6uW6DvYSrNY1bpwHI/3mOcUosLaJCzYDi5o91IQB51ft6cg==",
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
       "dev": true,
       "funding": [
         {
@@ -4024,9 +3760,9 @@
       }
     },
     "node_modules/chromatic": {
-      "version": "11.16.3",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.16.3.tgz",
-      "integrity": "sha512-bckarRbZ3M1BvsmhLqEMschuQPk2FlSD9cvy8383JwoVvaIqLr0dv1tI/DPM4LMuXOjTjeBSZZINVH9r3RMiiA==",
+      "version": "11.16.5",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.16.5.tgz",
+      "integrity": "sha512-wUEKXyu3GYmUg6Jq13uyRE9iC8ph5gbfDHdyHH0vQathkGQrcjHHdoxI/GXKIjU6d+xupLon8sxRV9NuZKTWbA==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -4214,17 +3950,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dependencies": {
-        "delayed-stream": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/commander": {
       "version": "12.1.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
@@ -4235,13 +3960,6 @@
         "node": ">=18"
       }
     },
-    "node_modules/commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4249,29 +3967,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/content-disposition": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
-      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/content-type": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
-      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -4279,22 +3974,15 @@
       "license": "MIT"
     },
     "node_modules/cookie": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -4391,14 +4079,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/depd": {
+    "node_modules/define-lazy-prop": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
-      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=8"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
     "node_modules/dequal": {
@@ -4411,17 +4108,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/destroy": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
-      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8",
-        "npm": "1.2.8000 || >= 1.4.16"
-      }
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4466,17 +4152,10 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.49",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
-      "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
+      "version": "1.5.52",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz",
+      "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==",
       "dev": true,
       "license": "ISC"
     },
@@ -4487,16 +4166,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/encodeurl": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
-      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/enquire.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
@@ -4562,17 +4231,10 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
-      "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/esbuild": {
-      "version": "0.23.1",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.1.tgz",
-      "integrity": "sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==",
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -4583,30 +4245,30 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.23.1",
-        "@esbuild/android-arm": "0.23.1",
-        "@esbuild/android-arm64": "0.23.1",
-        "@esbuild/android-x64": "0.23.1",
-        "@esbuild/darwin-arm64": "0.23.1",
-        "@esbuild/darwin-x64": "0.23.1",
-        "@esbuild/freebsd-arm64": "0.23.1",
-        "@esbuild/freebsd-x64": "0.23.1",
-        "@esbuild/linux-arm": "0.23.1",
-        "@esbuild/linux-arm64": "0.23.1",
-        "@esbuild/linux-ia32": "0.23.1",
-        "@esbuild/linux-loong64": "0.23.1",
-        "@esbuild/linux-mips64el": "0.23.1",
-        "@esbuild/linux-ppc64": "0.23.1",
-        "@esbuild/linux-riscv64": "0.23.1",
-        "@esbuild/linux-s390x": "0.23.1",
-        "@esbuild/linux-x64": "0.23.1",
-        "@esbuild/netbsd-x64": "0.23.1",
-        "@esbuild/openbsd-arm64": "0.23.1",
-        "@esbuild/openbsd-x64": "0.23.1",
-        "@esbuild/sunos-x64": "0.23.1",
-        "@esbuild/win32-arm64": "0.23.1",
-        "@esbuild/win32-ia32": "0.23.1",
-        "@esbuild/win32-x64": "0.23.1"
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
       }
     },
     "node_modules/esbuild-register": {
@@ -4632,13 +4294,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -4651,56 +4306,23 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/escodegen": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
-      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "optionalDependencies": {
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/escodegen/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/eslint": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz",
-      "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==",
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
+      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
-        "@eslint-community/regexpp": "^4.11.0",
+        "@eslint-community/regexpp": "^4.12.1",
         "@eslint/config-array": "^0.18.0",
         "@eslint/core": "^0.7.0",
         "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.13.0",
+        "@eslint/js": "9.14.0",
         "@eslint/plugin-kit": "^0.2.0",
-        "@humanfs/node": "^0.16.5",
+        "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.3.1",
+        "@humanwhocodes/retry": "^0.4.0",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
@@ -4708,9 +4330,9 @@
         "cross-spawn": "^7.0.2",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.1.0",
-        "eslint-visitor-keys": "^4.1.0",
-        "espree": "^10.2.0",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -4956,13 +4578,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/eslint/node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5018,19 +4633,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/espree/node_modules/eslint-visitor-keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
@@ -5111,16 +4713,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/eventemitter3": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
@@ -5152,66 +4744,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/express": {
-      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "accepts": "~1.3.8",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.20.3",
-        "content-disposition": "0.5.4",
-        "content-type": "~1.0.4",
-        "cookie": "0.7.1",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "1.3.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.3",
-        "methods": "~1.1.2",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.10",
-        "proxy-addr": "~2.0.7",
-        "qs": "6.13.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.2.1",
-        "send": "0.19.0",
-        "serve-static": "1.16.2",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/express/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -5309,60 +4841,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/finalhandler": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
-      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "2.4.1",
-        "parseurl": "~1.3.3",
-        "statuses": "2.0.1",
-        "unpipe": "~1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/finalhandler/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -5427,25 +4905,6 @@
         }
       }
     },
-    "node_modules/follow-redirects": {
-      "version": "1.15.9",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
-      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://github.com/sponsors/RubenVerborgh"
-        }
-      ],
-      "engines": {
-        "node": ">=4.0"
-      },
-      "peerDependenciesMeta": {
-        "debug": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -5456,39 +4915,18 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/fs-extra": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
-      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
-      "dev": true,
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
       "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
       },
       "engines": {
-        "node": ">=14.14"
+        "node": ">= 6"
       }
     },
     "node_modules/fs.realpath": {
@@ -5588,13 +5026,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/github-slugger": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
-      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -5675,9 +5106,9 @@
       }
     },
     "node_modules/globals": {
-      "version": "15.11.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
-      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.12.0.tgz",
+      "integrity": "sha512-1+gLErljJFhbOVyaetcwJiJ4+eLe45S2E7P5UiZ9xGfeq3ATQf5DOv9G7MH3gGbKQLkzmNh2DxfZwLdw+j6oTQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -5726,7 +5157,8 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "dev": true,
-      "license": "ISC"
+      "license": "ISC",
+      "optional": true
     },
     "node_modules/graphemer": {
       "version": "1.4.0",
@@ -5822,92 +5254,29 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/hast-util-heading-rank": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
-      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+    "node_modules/headers-polyfill": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
+      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MIT"
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
+        "react-is": "^16.7.0"
       }
     },
-    "node_modules/hast-util-is-element": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
-      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
-      "dev": true,
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
       "license": "MIT",
       "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/hast-util-to-string": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
-      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/headers-polyfill": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-4.0.3.tgz",
-      "integrity": "sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "node_modules/html-tags": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
-      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/http-errors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
-      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "depd": "2.0.0",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.2.0",
-        "statuses": "2.0.1",
-        "toidentifier": "1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
+        "void-elements": "3.1.0"
       }
     },
     "node_modules/human-signals": {
@@ -5936,17 +5305,27 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
+    "node_modules/i18next": {
+      "version": "23.16.4",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.16.4.tgz",
+      "integrity": "sha512-9NIYBVy9cs4wIqzurf7nLXPyf3R78xYbxExVqHLK9od3038rjpyOEzW+XB130kZ1N4PZ9inTtJ471CRJ4Ituyg==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "@babel/runtime": "^7.23.2"
       }
     },
     "node_modules/ieee754": {
@@ -6034,29 +5413,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/is-absolute-url": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
-      "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -6193,16 +5549,6 @@
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
-      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
@@ -6639,32 +5985,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/map-or-similar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
@@ -6672,29 +5992,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/markdown-to-jsx": {
-      "version": "7.5.0",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.5.0.tgz",
-      "integrity": "sha512-RrBNcMHiFPcz/iqIj0n3wclzHXjwS7mzjBNWecKKVhNTIxQepIix6Il/wZCn2Cg5Y1ow2Qi84+eJrryFRWBEWw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "peerDependencies": {
-        "react": ">= 0.14.0"
-      }
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/memoizerific": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz",
@@ -6705,16 +6002,6 @@
         "map-or-similar": "^1.5.0"
       }
     },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
-      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -6732,16 +6019,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -6769,24 +6046,11 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
@@ -6795,7 +6059,7 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -6916,10 +6180,10 @@
         }
       }
     },
-    "node_modules/msw/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+    "node_modules/msw-storybook-addon": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-2.0.4.tgz",
+      "integrity": "sha512-rstO8+r01sRMg6PPP7OxM8LG5/6r4+wmp2uapHeHvm9TQQRHvpPXOU/Y9/Somysz8Oi4Ea1aummXH3JlnP2LIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6929,13 +6193,6 @@
         "msw": "^2.0.0"
       }
     },
-    "node_modules/msw/node_modules/path-to-regexp": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
-      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/msw/node_modules/type-fest": {
       "version": "4.26.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.26.1.tgz",
@@ -6985,16 +6242,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/negotiator": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
-      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/no-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
@@ -7046,38 +6293,11 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-inspect": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
-      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/on-finished": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
-      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -7179,16 +6399,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7219,16 +6429,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7266,9 +6466,9 @@
       "license": "MIT"
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.10",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
-      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.3.0.tgz",
+      "integrity": "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==",
       "dev": true,
       "license": "MIT"
     },
@@ -7323,75 +6523,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/polished": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
@@ -7519,7 +6650,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -7527,19 +6657,11 @@
         "react-is": "^16.13.1"
       }
     },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
     },
     "node_modules/psl": {
       "version": "1.9.0",
@@ -7558,22 +6680,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/qs": {
-      "version": "6.13.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
-      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -7596,37 +6702,11 @@
           "url": "https://www.patreon.com/feross"
         },
         {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
-      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
     },
     "node_modules/react": {
       "version": "18.3.1",
@@ -7640,17 +6720,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-colorful": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
-      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
-      "dev": true,
-      "license": "MIT",
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/react-confetti": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
@@ -7712,29 +6781,6 @@
         "react": "^18.3.1"
       }
     },
-    "node_modules/react-element-to-jsx-string": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz",
-      "integrity": "sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@base2/pretty-print-object": "1.0.1",
-        "is-plain-object": "5.0.0",
-        "react-is": "18.1.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0",
-        "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0"
-      }
-    },
-    "node_modules/react-element-to-jsx-string/node_modules/react-is": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz",
-      "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/react-error-boundary": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
@@ -7747,17 +6793,6 @@
         "react": ">=16.13.1"
       }
     },
-    "node_modules/react-error-boundary": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
-      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "peerDependencies": {
-        "react": ">=16.13.1"
-      }
-    },
     "node_modules/react-hook-form": {
       "version": "7.53.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
@@ -7774,6 +6809,28 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.1.0.tgz",
+      "integrity": "sha512-zj3nJynMnZsy2gPZiOTC7XctCY5eQGqT3tcKMmfJWC9FMvgd+960w/adq61j8iPzpwmsXejqID9qC3Mqu1Xu2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7915,43 +6972,6 @@
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
       "license": "MIT"
     },
-    "node_modules/rehype-external-links": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-3.0.0.tgz",
-      "integrity": "sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@ungap/structured-clone": "^1.0.0",
-        "hast-util-is-element": "^3.0.0",
-        "is-absolute-url": "^4.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/rehype-slug": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
-      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "github-slugger": "^2.0.0",
-        "hast-util-heading-rank": "^3.0.0",
-        "hast-util-to-string": "^3.0.0",
-        "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -8064,9 +7084,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.24.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.3.tgz",
-      "integrity": "sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==",
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz",
+      "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8080,34 +7100,27 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.24.3",
-        "@rollup/rollup-android-arm64": "4.24.3",
-        "@rollup/rollup-darwin-arm64": "4.24.3",
-        "@rollup/rollup-darwin-x64": "4.24.3",
-        "@rollup/rollup-freebsd-arm64": "4.24.3",
-        "@rollup/rollup-freebsd-x64": "4.24.3",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.24.3",
-        "@rollup/rollup-linux-arm-musleabihf": "4.24.3",
-        "@rollup/rollup-linux-arm64-gnu": "4.24.3",
-        "@rollup/rollup-linux-arm64-musl": "4.24.3",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.3",
-        "@rollup/rollup-linux-riscv64-gnu": "4.24.3",
-        "@rollup/rollup-linux-s390x-gnu": "4.24.3",
-        "@rollup/rollup-linux-x64-gnu": "4.24.3",
-        "@rollup/rollup-linux-x64-musl": "4.24.3",
-        "@rollup/rollup-win32-arm64-msvc": "4.24.3",
-        "@rollup/rollup-win32-ia32-msvc": "4.24.3",
-        "@rollup/rollup-win32-x64-msvc": "4.24.3",
+        "@rollup/rollup-android-arm-eabi": "4.24.4",
+        "@rollup/rollup-android-arm64": "4.24.4",
+        "@rollup/rollup-darwin-arm64": "4.24.4",
+        "@rollup/rollup-darwin-x64": "4.24.4",
+        "@rollup/rollup-freebsd-arm64": "4.24.4",
+        "@rollup/rollup-freebsd-x64": "4.24.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.4",
+        "@rollup/rollup-linux-arm64-musl": "4.24.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-gnu": "4.24.4",
+        "@rollup/rollup-linux-x64-musl": "4.24.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.4",
+        "@rollup/rollup-win32-x64-msvc": "4.24.4",
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/rollup/node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -8132,34 +7145,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -8182,74 +7167,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/send": {
-      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
-      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "2.0.0",
-        "destroy": "1.2.0",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "2.0.0",
-        "mime": "1.6.0",
-        "ms": "2.1.3",
-        "on-finished": "2.4.1",
-        "range-parser": "~1.2.1",
-        "statuses": "2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/send/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/send/node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/serve-static": {
-      "version": "1.16.2",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
-      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "encodeurl": "~2.0.0",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.19.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -8268,13 +7185,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/setprototypeof": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
-      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8298,25 +7208,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/side-channel": {
-      "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,
-      "license": "MIT",
-      "dependencies": {
-        "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",
@@ -8416,17 +7307,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/space-separated-tokens": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
-      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
-      "dev": true,
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -8438,13 +7318,13 @@
       }
     },
     "node_modules/storybook": {
-      "version": "8.3.6",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.6.tgz",
-      "integrity": "sha512-9GVbtej6ZzPRUM7KRQ7848506FfHrUiJGqPuIQdoSJd09EmuEoLjmLAgEOmrHBQKgGYMaM7Vh9GsTLim6vwZTQ==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.2.tgz",
+      "integrity": "sha512-GMCgyAulmLNrkUtDkCpFO4SB77YrpiIxq6e5tzaQdXEuaDu1mdNwOuP3VG7nE2FzxmqDvagSgriM68YW9iFaZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/core": "8.3.6"
+        "@storybook/core": "8.4.2"
       },
       "bin": {
         "getstorybook": "bin/index.cjs",
@@ -8454,6 +7334,14 @@
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
       }
     },
     "node_modules/strict-event-emitter": {
@@ -8617,16 +7505,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/telejson": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz",
-      "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "memoizerific": "^1.11.3"
-      }
-    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -8674,16 +7552,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
-      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/tough-cookie": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
@@ -8717,9 +7585,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/ts-api-utils": {
-      "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==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
+      "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8755,9 +7623,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
-      "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "dev": true,
       "license": "0BSD"
     },
@@ -8817,20 +7685,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/typescript": {
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
@@ -8846,15 +7700,15 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.12.2",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.12.2.tgz",
-      "integrity": "sha512-UbuVUWSrHVR03q9CWx+JDHeO6B/Hr9p4U5lRH++5tq/EbFq1faYZe50ZSBePptgfIKLEti0aPQ3hFgnPVcd8ZQ==",
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.13.0.tgz",
+      "integrity": "sha512-vIMpDRJrQd70au2G8w34mPps0ezFSPMEX4pXkTzUkrNbRX+36ais2ksGWN0esZL+ZMaFJEneOBHzCgSqle7DHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.12.2",
-        "@typescript-eslint/parser": "8.12.2",
-        "@typescript-eslint/utils": "8.12.2"
+        "@typescript-eslint/eslint-plugin": "8.13.0",
+        "@typescript-eslint/parser": "8.13.0",
+        "@typescript-eslint/utils": "8.13.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -8876,51 +7730,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/unist-util-is": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
-      "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-visit": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
-      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0",
-        "unist-util-visit-parents": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
-    "node_modules/unist-util-visit-parents": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
-      "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-is": "^6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/universalify": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
@@ -8931,16 +7740,6 @@
         "node": ">= 10.0.0"
       }
     },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/unplugin": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.15.0.tgz",
@@ -8963,19 +7762,6 @@
         }
       }
     },
-    "node_modules/unplugin/node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -9051,23 +7837,6 @@
         "which-typed-array": "^1.1.2"
       }
     },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
     "node_modules/uuid": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
@@ -9082,16 +7851,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
     "node_modules/vite": {
       "version": "5.4.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
@@ -9153,18 +7912,18 @@
       }
     },
     "node_modules/vite-plugin-svgr": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
-      "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz",
+      "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@rollup/pluginutils": "^5.0.5",
+        "@rollup/pluginutils": "^5.1.3",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0"
       },
       "peerDependencies": {
-        "vite": "^2.6.0 || 3 || 4 || 5"
+        "vite": ">=2.6.0"
       }
     },
     "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
@@ -9597,6 +8356,15 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/webpack-virtual-modules": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
diff --git a/package.json b/package.json
index 3216ca9..ef9efd2 100644
--- a/package.json
+++ b/package.json
@@ -35,11 +35,14 @@
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
     "csstype": "^3.1.3",
+    "i18next": "^23.16.4",
     "jquery": "^3.7.1",
+    "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.0",
+    "react-i18next": "^15.1.0",
     "react-router-dom": "^6.26.2",
     "react-signature-canvas": "^1.0.6",
     "zustand": "^4.5.5"
diff --git a/src/App.tsx b/src/App.tsx
index b2aaf2a..3a32a9f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import AppProviders from '@components/providers/index.provider';
 import { Outlet } from 'react-router-dom';
+import '@/assets/translator/i18n';
 
 function App() {
   return (
diff --git a/src/apis/apiPath.ts b/src/apis/apiPath.ts
index 0cd4e1c..842fe10 100644
--- a/src/apis/apiPath.ts
+++ b/src/apis/apiPath.ts
@@ -1,7 +1,11 @@
 const BASE_URL = '/api';
 
 export const APIPath = {
+  postRegister: `${BASE_URL}/register`,
+  postOAuth: `${BASE_URL}/oauth`,
   postNotice: `${BASE_URL}/recruitments`,
+  getSlides: `${BASE_URL}/slides`,
+  getRecruitments: `${BASE_URL}/recruitments/:filter`,
   allApplication: `${BASE_URL}/application/all`,
   signEmployeeContract: `${BASE_URL}/contract/employee`,
   makeContract: `${BASE_URL}/contract`,
@@ -14,16 +18,26 @@ export const APIPath = {
   getForeigner: `${BASE_URL}/visa/:userId`,
   registerVisa: `${BASE_URL}/visa`,
   registerCompany: `${BASE_URL}/company`,
-  apply: '/api/application/',
-  recruitmentsDetail: '/api/recruitments/:postId',
+  apply: `${BASE_URL}/application/:recruitmentId`,
+  resume: `${BASE_URL}/resumes`,
+  recruitmentsDetail: '/api/recruitments/:recruitmentId',
+  getApplicantProfile: '/api/resumes/:resumeId/:applyId',
+  closeRecruitment: `${BASE_URL}/recruitment/hiringClose/:recruitmentId`,
+  requiredFieldCheck: `${BASE_URL}/application`,
 };
 
 export const getDynamicAPIPath = {
   downloadContract: (applyId: number) => APIPath.downloadContract.replace(':applyId', applyId.toString()),
+  apply: (recruitmentId: number) => APIPath.apply.replace(':recruitmentId', recruitmentId.toString()),
   getContract: (applyId: number) => APIPath.getContract.replace(':applyId', applyId.toString()),
   getMyRecruitments: (companyId: number) => APIPath.getMyRecruitments.replace(':companyId', companyId.toString()),
   getMyApplicants: (recruitmentId: number) =>
     APIPath.getMyApplicants.replace(':recruitmentId', recruitmentId.toString()),
   getForeigner: (userId: number) => APIPath.getForeigner.replace(':userId', userId.toString()),
-  recruitmentsDetail: (postId: string) => APIPath.recruitmentsDetail.replace(':postId', postId.toString()),
+  recruitmentsDetail: (postId: number) => APIPath.recruitmentsDetail.replace(':recruitmentId', postId.toString()),
+  getApplicantProfile: (resumeId: number, applyId: number) =>
+    APIPath.getApplicantProfile.replace(':resumeId', resumeId.toString()).replace(':applyId', applyId.toString()),
+  closeRecruitment: (recruitmentId: number) =>
+    APIPath.closeRecruitment.replace(':recruitmentId', recruitmentId.toString()),
+  getRecruitments: (filter: string) => APIPath.getRecruitments.replace(':filter', filter),
 };
diff --git a/src/apis/applicants/hooks/useGetProfileInfo.tsx b/src/apis/applicants/hooks/useGetProfileInfo.tsx
new file mode 100644
index 0000000..e7dd389
--- /dev/null
+++ b/src/apis/applicants/hooks/useGetProfileInfo.tsx
@@ -0,0 +1,19 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+
+type IdProps = {
+  resumeId: number;
+  applyId: number;
+};
+
+export const getProfileInfo = async ({ resumeId, applyId }: IdProps) => {
+  const response = await clientInstance.get(getDynamicAPIPath.getApplicantProfile(resumeId, applyId));
+  return response.data;
+};
+
+export const useGetProfileInfo = ({ resumeId, applyId }: IdProps) =>
+  useQuery({
+    queryKey: [getDynamicAPIPath.getApplicantProfile(resumeId, applyId)],
+    queryFn: () => getProfileInfo({ resumeId, applyId }),
+  });
diff --git a/src/pages/applicants/Applicants.mock.ts b/src/apis/applicants/mocks/applicants.mock.ts
similarity index 85%
rename from src/pages/applicants/Applicants.mock.ts
rename to src/apis/applicants/mocks/applicants.mock.ts
index 1489153..948da32 100644
--- a/src/pages/applicants/Applicants.mock.ts
+++ b/src/apis/applicants/mocks/applicants.mock.ts
@@ -4,7 +4,7 @@ export const recruitment = {
   recruitmentId: 1,
   image: CompanyImage,
   koreanTitle: '쿠팡 유성점에서 아르바이트 모집합니다.',
-  vietnameseTitle: '',
+  vietnameseTitle: 'Coupang đang tuyển dụng làm việc bán thời gian tại chi nhánh Yuseong.',
   companyName: '쿠팡 유성점',
   salary: 50000000,
   workHours: '',
diff --git a/src/features/applicants/ApplicantList/ContractModal/ContractModal.mock.ts b/src/apis/applicants/mocks/foreigner.mock.ts
similarity index 100%
rename from src/features/applicants/ApplicantList/ContractModal/ContractModal.mock.ts
rename to src/apis/applicants/mocks/foreigner.mock.ts
diff --git a/src/apis/applicants/mocks/foreignerMockHandler.ts b/src/apis/applicants/mocks/foreignerMockHandler.ts
index 194dff3..31d5a1d 100644
--- a/src/apis/applicants/mocks/foreignerMockHandler.ts
+++ b/src/apis/applicants/mocks/foreignerMockHandler.ts
@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { foreigner } from '@/features/applicants/ApplicantList/ContractModal/ContractModal.mock';
+import { foreigner } from './foreigner.mock';
 import { http, HttpResponse } from 'msw';
 
 export const foreignerMockHandler = [http.get(APIPath.getForeigner, () => HttpResponse.json(foreigner))];
diff --git a/src/apis/applicants/mocks/getApplicantProfile.ts b/src/apis/applicants/mocks/getApplicantProfile.ts
new file mode 100644
index 0000000..82e2a4b
--- /dev/null
+++ b/src/apis/applicants/mocks/getApplicantProfile.ts
@@ -0,0 +1,18 @@
+import { http, HttpResponse } from 'msw';
+import { APIPath } from '@/apis/apiPath';
+
+const mockData = {
+  applicantName: '임세빈',
+  address: '충남대학교',
+  phoneNumber: '010-1111-1111',
+  career: `카페에서 1년 알바했습니다. 클럽에서 30년 근무했습니다.`,
+  koreanLanguageLevel: '고급',
+  introduction: `맡은 업무에 항상 최선을 다하는 인재입니다. 안녕하세용안녕하세용안녕하세용안녕하세용안녕하세용안녕하세용`,
+  motivation: '돈',
+};
+
+export const getProfileInfoHandler = [
+  http.get(APIPath.getApplicantProfile, () => {
+    return HttpResponse.json(mockData);
+  }),
+];
diff --git a/src/apis/applicants/mocks/myApplicantsMockHandler.ts b/src/apis/applicants/mocks/myApplicantsMockHandler.ts
index 1e7162b..98fb656 100644
--- a/src/apis/applicants/mocks/myApplicantsMockHandler.ts
+++ b/src/apis/applicants/mocks/myApplicantsMockHandler.ts
@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { applicantList } from '@/pages/applicants/Applicants.mock';
+import { applicantList } from './applicants.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myApplicantsMockHandler = [http.get(APIPath.getMyApplicants, () => HttpResponse.json(applicantList))];
diff --git a/src/apis/apply/postApply.mock.ts b/src/apis/apply/postApply.mock.ts
index 59c74ae..3afc661 100644
--- a/src/apis/apply/postApply.mock.ts
+++ b/src/apis/apply/postApply.mock.ts
@@ -1,8 +1,8 @@
 import { http, HttpResponse } from 'msw';
-import { getApply } from '../apply/useApplyHook';
+import { APIPath } from '@/apis/apiPath';
 
 export const postApplyMockHandler = [
-  http.post(`${getApply()}/:id`, async ({ request, params }) => {
+  http.post(`${APIPath.apply}`, async ({ request, params }) => {
     const { id } = params;
     const req = await request.json();
     return HttpResponse.json({ req, id }, { status: 201 });
diff --git a/src/apis/apply/useApplyHook.tsx b/src/apis/apply/useApplyHook.tsx
index 036d0d1..52a5293 100644
--- a/src/apis/apply/useApplyHook.tsx
+++ b/src/apis/apply/useApplyHook.tsx
@@ -1,23 +1,23 @@
-import { APIPath } from '@/apis/apiPath';
+import { getDynamicAPIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
 import { useMutation } from '@tanstack/react-query';
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-export const getApply = () => `${APIPath.registerSign}`;
+export const getApply = (recruitmentId: number) => `${getDynamicAPIPath.apply(recruitmentId)}`;
 
-export const Apply = async ({ req, recruitmentId }: { req: string; recruitmentId: string }) => {
-  const response = await clientInstance.post(`${getApply()}/${recruitmentId}`, req);
+export const Apply = async ({ req, recruitmentId }: { req: string; recruitmentId: number }) => {
+  const response = await clientInstance.post(`${getApply(recruitmentId)}`, req);
   return response.data;
 };
 
 export const FetchApply = () => {
-  // const nav = useNavigate();
+  const nav = useNavigate();
 
   return useMutation({
-    mutationFn: ({ data, recruitmentId }: { data: string; recruitmentId: string }) =>
+    mutationFn: ({ data, recruitmentId }: { data: string; recruitmentId: number }) =>
       Apply({ req: data, recruitmentId }),
     onSuccess: () => {
-      // nav('/');
+      nav('/');
     },
   });
 };
diff --git a/src/apis/auth/hooks/mutations/useGoogleOAuthMutation.tsx b/src/apis/auth/hooks/mutations/useGoogleOAuthMutation.tsx
new file mode 100644
index 0000000..47dbd9a
--- /dev/null
+++ b/src/apis/auth/hooks/mutations/useGoogleOAuthMutation.tsx
@@ -0,0 +1,30 @@
+import { clientInstance } from '@apis/instance';
+import { useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { OAuthRequest } from '../../types/request';
+import { OAuthResponse } from '../../types/response';
+import { APIPath } from '@/apis/apiPath';
+
+const postOAuth = async ({ code }: OAuthRequest): Promise<OAuthResponse> => {
+  const res = await clientInstance.post(APIPath.postOAuth, { code });
+
+  const authorizationHeader = res.headers['authorization'];
+  const accessToken = authorizationHeader.replace('Bearer ', '');
+
+  if (!accessToken) {
+    throw new Error('Authorization header is missing in the response');
+  }
+
+  return {
+    accessToken,
+    type: res.data.type,
+    profileImage: res.data.profileImage,
+    name: res.data.name,
+  };
+};
+
+export function useGoogleOAuthMutation() {
+  return useMutation<OAuthResponse, AxiosError, OAuthRequest>({
+    mutationFn: postOAuth,
+  });
+}
diff --git a/src/apis/auth/mutations/useRegister.tsx b/src/apis/auth/hooks/mutations/useRegisterMutation.tsx
similarity index 52%
rename from src/apis/auth/mutations/useRegister.tsx
rename to src/apis/auth/hooks/mutations/useRegisterMutation.tsx
index e3ad42e..e0e863b 100644
--- a/src/apis/auth/mutations/useRegister.tsx
+++ b/src/apis/auth/hooks/mutations/useRegisterMutation.tsx
@@ -1,16 +1,16 @@
 import { clientInstance } from '@apis/instance';
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { AUTH_PATH } from '../path';
-import { RegisterRequest } from '../types/request';
-import { RegisterResponse } from '../types/response';
+import { RegisterRequest } from '../../types/request';
+import { RegisterResponse } from '../../types/response';
+import { APIPath } from '@/apis/apiPath';
 
 const postRegister = async ({ type }: RegisterRequest): Promise<RegisterResponse> => {
-  const res = await clientInstance.post(AUTH_PATH.REGISTER, { type });
+  const res = await clientInstance.post(APIPath.postRegister, { type });
   return res.data;
 };
 
-export const useRegister = (): UseMutationResult<RegisterResponse, AxiosError, RegisterRequest> => {
+export const useRegisterMutation = (): UseMutationResult<RegisterResponse, AxiosError, RegisterRequest> => {
   return useMutation<RegisterResponse, AxiosError, RegisterRequest>({
     mutationFn: postRegister,
   });
diff --git a/src/apis/auth/mutations/useGoogleOAuth.tsx b/src/apis/auth/mutations/useGoogleOAuth.tsx
deleted file mode 100644
index 63ae45b..0000000
--- a/src/apis/auth/mutations/useGoogleOAuth.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { clientInstance } from '@apis/instance';
-import { useMutation } from '@tanstack/react-query';
-import { AxiosError } from 'axios';
-import { AUTH_PATH } from '../path';
-import { OAuthRequest } from '../types/request';
-import { OAuthResponse } from '../types/response';
-import { useNavigate } from 'react-router-dom';
-import { useCallback, useState, useEffect } from 'react';
-import ROUTE_PATH from '@/routes/path';
-
-const clientId = import.meta.env.VITE_GOOGLE_AUTH_CLIENT_ID;
-const redirectUri = import.meta.env.VITE_GOOGLE_AUTH_REDIRECT_URI;
-
-const getAccessTokenFromUrl = () => {
-  const hashParams = new URLSearchParams(window.location.hash.substring(1));
-  return hashParams.get('access_token');
-};
-
-const postOAuth = async ({ token }: OAuthRequest): Promise<OAuthResponse> => {
-  const res = await clientInstance.post(AUTH_PATH.OAUTH, { token });
-
-  const accessToken = res.headers['authorization'];
-  if (!accessToken) {
-    throw new Error('Authorization header is missing in the response');
-  }
-
-  return {
-    accessToken,
-    type: res.data.type,
-    profileImage: res.data.profileImage,
-  };
-};
-
-export function useGoogleOAuth(): {
-  isLoading: boolean;
-  redirectToGoogleLogin: () => void;
-} {
-  const [isLoading, setIsLoading] = useState(false);
-  const navigate = useNavigate();
-
-  const redirectToGoogleLogin = useCallback(() => {
-    const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&include_granted_scopes=true&response_type=token&state=state_parameter_passthrough_value&redirect_uri=${redirectUri}&client_id=${clientId}`;
-
-    window.location.href = googleAuthUrl;
-  }, []);
-
-  const { mutate: handleLoginPost, status } = useMutation<OAuthResponse, AxiosError, OAuthRequest>({
-    mutationFn: postOAuth,
-    onSuccess: (data) => {
-      const { accessToken, type } = data;
-
-      localStorage.setItem('token', accessToken);
-
-      if (type === 'first') {
-        navigate(ROUTE_PATH.AUTH.SIGN_UP);
-      } else {
-        navigate(ROUTE_PATH.HOME);
-      }
-
-      window.location.reload();
-    },
-    onError: (error) => {
-      console.error('Error during login:', error);
-      setIsLoading(false);
-    },
-  });
-
-  const isMutating = status === 'pending';
-
-  useEffect(() => {
-    const token = getAccessTokenFromUrl();
-    if (token) {
-      setIsLoading(true);
-      handleLoginPost({ token });
-    } else {
-      console.log('로그인 재시도하세요.');
-    }
-  }, [handleLoginPost]);
-
-  return { isLoading: isLoading || isMutating, redirectToGoogleLogin };
-}
diff --git a/src/apis/auth/path.ts b/src/apis/auth/path.ts
deleted file mode 100644
index 4205fc1..0000000
--- a/src/apis/auth/path.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const BASE_URL = '/api';
-
-export const AUTH_PATH = {
-  OAUTH: `${BASE_URL}/oauth`,
-  REGISTER: `${BASE_URL}/register`,
-};
diff --git a/src/apis/auth/types/request.ts b/src/apis/auth/types/request.ts
index 86161ab..5332e37 100644
--- a/src/apis/auth/types/request.ts
+++ b/src/apis/auth/types/request.ts
@@ -1,5 +1,5 @@
 export interface OAuthRequest {
-  token: string;
+  code: string;
 }
 
 export interface RegisterRequest {
diff --git a/src/apis/auth/types/response.ts b/src/apis/auth/types/response.ts
index 68d4e49..02297d8 100644
--- a/src/apis/auth/types/response.ts
+++ b/src/apis/auth/types/response.ts
@@ -2,6 +2,7 @@ export interface OAuthResponse {
   accessToken: string;
   type: 'first' | 'employee' | 'employer';
   profileImage: string;
+  name: string;
 }
 
 export interface RegisterResponse {
diff --git a/src/pages/myPage/employer/EmployerMyPage.mock.ts b/src/apis/companies/mocks/myCompanies.mock.ts
similarity index 100%
rename from src/pages/myPage/employer/EmployerMyPage.mock.ts
rename to src/apis/companies/mocks/myCompanies.mock.ts
diff --git a/src/apis/companies/mocks/myCompaniesMockHandler.ts b/src/apis/companies/mocks/myCompaniesMockHandler.ts
index 52febe9..703c3ce 100644
--- a/src/apis/companies/mocks/myCompaniesMockHandler.ts
+++ b/src/apis/companies/mocks/myCompaniesMockHandler.ts
@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { companyList } from '@/pages/myPage/employer/EmployerMyPage.mock';
+import { companyList } from './myCompanies.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myCompaniesMockHandler = [http.get(APIPath.getMyCompanies, () => HttpResponse.json(companyList))];
diff --git a/src/apis/contract/hooks/useGetContractImg.tsx b/src/apis/contract/hooks/useGetContractImg.tsx
new file mode 100644
index 0000000..78df441
--- /dev/null
+++ b/src/apis/contract/hooks/useGetContractImg.tsx
@@ -0,0 +1,15 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+
+export const getContractImgPath = (applyId: number) => `${getDynamicAPIPath.downloadContract(applyId)}`;
+const getContractImg = async (applyId: number) => {
+  const res = await clientInstance.get(getContractImgPath(applyId));
+  return res.data;
+};
+
+export const useGetContractImg = (applyId: number) =>
+  useQuery({
+    queryKey: [getContractImgPath],
+    queryFn: () => getContractImg(applyId),
+  });
diff --git a/src/apis/home/queries/queryKeys.ts b/src/apis/home/hooks/queries/queryKeys.ts
similarity index 100%
rename from src/apis/home/queries/queryKeys.ts
rename to src/apis/home/hooks/queries/queryKeys.ts
diff --git a/src/apis/home/hooks/queries/useFetchRecruitments.tsx b/src/apis/home/hooks/queries/useFetchRecruitments.tsx
new file mode 100644
index 0000000..2461ab0
--- /dev/null
+++ b/src/apis/home/hooks/queries/useFetchRecruitments.tsx
@@ -0,0 +1,22 @@
+import { AxiosError } from 'axios';
+import { RecruitmentResponse } from '../../types/response';
+import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
+import { clientInstance } from '@apis/instance';
+import { QUERY_KEYS } from './queryKeys';
+import { getDynamicAPIPath } from '@/apis/apiPath';
+
+const getRecruitments = async (filter: string, page: number): Promise<RecruitmentResponse[]> => {
+  const url = `${getDynamicAPIPath.getRecruitments(filter)}?page=${page}`;
+  const res = await clientInstance.get<RecruitmentResponse[]>(url);
+  return res.data;
+};
+
+export const useFetchRecruitments = (
+  filter: string,
+  page: number,
+): UseSuspenseQueryResult<RecruitmentResponse[], AxiosError> => {
+  return useSuspenseQuery<RecruitmentResponse[], AxiosError>({
+    queryKey: [QUERY_KEYS.RECRUITMENTS, filter, page],
+    queryFn: () => getRecruitments(filter, page),
+  });
+};
diff --git a/src/apis/home/queries/useFetchSlides.tsx b/src/apis/home/hooks/queries/useFetchSlides.tsx
similarity index 74%
rename from src/apis/home/queries/useFetchSlides.tsx
rename to src/apis/home/hooks/queries/useFetchSlides.tsx
index adfcba0..6aca983 100644
--- a/src/apis/home/queries/useFetchSlides.tsx
+++ b/src/apis/home/hooks/queries/useFetchSlides.tsx
@@ -1,12 +1,13 @@
 import { AxiosError } from 'axios';
 import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
 import { clientInstance } from '@apis/instance';
-import { HOME_PATH } from '../path';
-import { SlidesResponse } from '../types/response';
+
+import { SlidesResponse } from '../../types/response';
 import { QUERY_KEYS } from './queryKeys';
+import { APIPath } from '@/apis/apiPath';
 
 const getSlides = async (): Promise<SlidesResponse[]> => {
-  const res = await clientInstance.get<SlidesResponse[]>(HOME_PATH.SLIDER);
+  const res = await clientInstance.get<SlidesResponse[]>(APIPath.getSlides);
   return res.data;
 };
 
diff --git a/src/apis/home/mocks/recruitmentsMockHandler.ts b/src/apis/home/mocks/recruitmentsMockHandler.ts
index 8243ff8..8e05aff 100644
--- a/src/apis/home/mocks/recruitmentsMockHandler.ts
+++ b/src/apis/home/mocks/recruitmentsMockHandler.ts
@@ -1,8 +1,8 @@
+import { APIPath } from '@/apis/apiPath';
 import { http, HttpResponse } from 'msw';
-import { HOME_PATH } from '../path';
 
 export const recruitmentsMockHandler = [
-  http.get(HOME_PATH.RECRUITMENTS, () => HttpResponse.json(RECRUITMENTS_RESPONSE_DATA)),
+  http.get(APIPath.getRecruitments, () => HttpResponse.json(RECRUITMENTS_RESPONSE_DATA)),
 ];
 
 const RECRUITMENTS_RESPONSE_DATA = [
diff --git a/src/apis/home/mocks/slidesMockHandler.ts b/src/apis/home/mocks/slidesMockHandler.ts
index 1bf8c26..58e3188 100644
--- a/src/apis/home/mocks/slidesMockHandler.ts
+++ b/src/apis/home/mocks/slidesMockHandler.ts
@@ -1,7 +1,7 @@
+import { APIPath } from '@/apis/apiPath';
 import { http, HttpResponse } from 'msw';
-import { HOME_PATH } from '../path';
 
-export const slidesMockHandler = [http.get(HOME_PATH.SLIDER, () => HttpResponse.json(SLIDER_RESPONSE_DATA))];
+export const slidesMockHandler = [http.get(APIPath.getSlides, () => HttpResponse.json(SLIDER_RESPONSE_DATA))];
 
 const SLIDER_RESPONSE_DATA = [
   {
diff --git a/src/apis/home/path.ts b/src/apis/home/path.ts
deleted file mode 100644
index 74ad5b1..0000000
--- a/src/apis/home/path.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-const BASE_URL = '/api';
-
-export const HOME_PATH = {
-  RECRUITMENTS: `${BASE_URL}/recruitments`,
-  SLIDER: `${BASE_URL}/slides`,
-};
diff --git a/src/apis/home/queries/useFetchRecruitments.tsx b/src/apis/home/queries/useFetchRecruitments.tsx
deleted file mode 100644
index 7bb8bb8..0000000
--- a/src/apis/home/queries/useFetchRecruitments.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { AxiosError } from 'axios';
-import { RecruitmentResponse } from '../types/response';
-import { useSuspenseQuery, UseSuspenseQueryResult } from '@tanstack/react-query';
-import { clientInstance } from '@apis/instance';
-import { HOME_PATH } from '../path';
-import { QUERY_KEYS } from './queryKeys';
-
-const getRecruitments = async (): Promise<RecruitmentResponse[]> => {
-  const res = await clientInstance.get<RecruitmentResponse[]>(HOME_PATH.RECRUITMENTS);
-  return res.data;
-};
-
-export const useFetchRecruitments = (): UseSuspenseQueryResult<RecruitmentResponse[], AxiosError> => {
-  return useSuspenseQuery<RecruitmentResponse[], AxiosError>({
-    queryKey: [QUERY_KEYS.RECRUITMENTS],
-    queryFn: () => getRecruitments(),
-  });
-};
diff --git a/src/apis/postNotice/hooks/usePostNotice.ts b/src/apis/postNotice/hooks/usePostNotice.ts
index 3d99f8b..84bf53d 100644
--- a/src/apis/postNotice/hooks/usePostNotice.ts
+++ b/src/apis/postNotice/hooks/usePostNotice.ts
@@ -1,24 +1,8 @@
 import { APIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
+import { NoticeRequestData } from '@/types';
 import { useMutation } from '@tanstack/react-query';
 
-export type NoticeRequestData = {
-  title?: string;
-  companyScale?: string;
-  area?: string;
-  salary?: string;
-  workDuration?: string;
-  workDays?: string;
-  workType?: string;
-  workHours?: string;
-  requestedCareer?: string;
-  majorBusiness?: string;
-  eligibilityCriteria?: string;
-  preferredConditions?: string;
-  employerName?: string;
-  companyName?: string;
-};
-
 export const getPostNoticePath = () => `${APIPath.postNotice}`;
 
 export const postNotice = async (req: NoticeRequestData) => {
@@ -26,7 +10,7 @@ export const postNotice = async (req: NoticeRequestData) => {
   return response.data;
 };
 
-export const useFetchPostNotice = () =>
+export const usePostNotice = () =>
   useMutation({
     mutationFn: postNotice,
   });
diff --git a/src/apis/recruitments/hooks/useCloseRecruitment.ts b/src/apis/recruitments/hooks/useCloseRecruitment.ts
new file mode 100644
index 0000000..de39057
--- /dev/null
+++ b/src/apis/recruitments/hooks/useCloseRecruitment.ts
@@ -0,0 +1,13 @@
+import { getDynamicAPIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+
+export const closeRecruitment = async (recruitmentId: number) => {
+  const response = await clientInstance.post(getDynamicAPIPath.closeRecruitment(recruitmentId));
+  return response.data;
+};
+
+export const useCloseRecruitment = () =>
+  useMutation({
+    mutationFn: closeRecruitment,
+  });
diff --git a/src/apis/recruitments/mocks/closeRecruitmentMockHandler.ts b/src/apis/recruitments/mocks/closeRecruitmentMockHandler.ts
new file mode 100644
index 0000000..97a5e38
--- /dev/null
+++ b/src/apis/recruitments/mocks/closeRecruitmentMockHandler.ts
@@ -0,0 +1,14 @@
+import { APIPath } from '@/apis/apiPath';
+import { http, HttpResponse } from 'msw';
+
+export const closeRecruitmentMockHandler = [
+  http.post(APIPath.closeRecruitment, async ({ params }) => {
+    const { recruitmentId } = params;
+
+    if (!recruitmentId) {
+      return HttpResponse.json({ message: '잘못된 요청입니다.' }, { status: 400 });
+    }
+
+    return HttpResponse.json({ message: '마감 완료' }, { status: 200 });
+  }),
+];
diff --git a/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts b/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts
index 032282b..39165db 100644
--- a/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts
+++ b/src/apis/recruitments/mocks/myRecruitmentsMockHandler.ts
@@ -1,5 +1,5 @@
 import { APIPath } from '@/apis/apiPath';
-import { recruitmentList } from '@/pages/myCompany/MyCompany.mock';
+import { recruitmentList } from '@/pages/myCompanyPage/MyCompany.mock';
 import { http, HttpResponse } from 'msw';
 
 export const myRecruitmentsMockHandler = [
diff --git a/src/apis/recruitmentsDetail/cat.jpg b/src/apis/recruitmentsDetail/mock/cat.jpg
similarity index 100%
rename from src/apis/recruitmentsDetail/cat.jpg
rename to src/apis/recruitmentsDetail/mock/cat.jpg
diff --git a/src/apis/recruitmentsDetail/recruitmentsDetailList.ts b/src/apis/recruitmentsDetail/mock/recruitmentsDetailList.ts
similarity index 100%
rename from src/apis/recruitmentsDetail/recruitmentsDetailList.ts
rename to src/apis/recruitmentsDetail/mock/recruitmentsDetailList.ts
diff --git a/src/apis/recruitmentsDetail/recruitmentsDetailMockHandler.ts b/src/apis/recruitmentsDetail/mock/recruitmentsDetailMockHandler.ts
similarity index 100%
rename from src/apis/recruitmentsDetail/recruitmentsDetailMockHandler.ts
rename to src/apis/recruitmentsDetail/mock/recruitmentsDetailMockHandler.ts
diff --git a/src/apis/recruitmentsDetail/mock/requiredFieldCheckData.ts b/src/apis/recruitmentsDetail/mock/requiredFieldCheckData.ts
new file mode 100644
index 0000000..d178429
--- /dev/null
+++ b/src/apis/recruitmentsDetail/mock/requiredFieldCheckData.ts
@@ -0,0 +1,5 @@
+export const requiredFieldCheckData = {
+  resumeExistence: true,
+  visaExistence: true,
+  foreignerIdNumberExistence: true,
+};
diff --git a/src/apis/recruitmentsDetail/mock/requiredFieldCheckHandler.ts b/src/apis/recruitmentsDetail/mock/requiredFieldCheckHandler.ts
new file mode 100644
index 0000000..6b3813c
--- /dev/null
+++ b/src/apis/recruitmentsDetail/mock/requiredFieldCheckHandler.ts
@@ -0,0 +1,7 @@
+import { APIPath } from '@/apis/apiPath';
+import { requiredFieldCheckData } from './requiredFieldCheckData';
+import { http, HttpResponse } from 'msw';
+
+export const requiredFieldCheckMockHandler = [
+  http.get(APIPath.requiredFieldCheck, () => HttpResponse.json(requiredFieldCheckData)),
+];
diff --git a/src/apis/recruitmentsDetail/useRecruitmentsDetail.tsx b/src/apis/recruitmentsDetail/useRecruitmentsDetail.tsx
index 79925bd..0fb25a0 100644
--- a/src/apis/recruitmentsDetail/useRecruitmentsDetail.tsx
+++ b/src/apis/recruitmentsDetail/useRecruitmentsDetail.tsx
@@ -3,13 +3,13 @@ import { clientInstance } from '@/apis/instance';
 import { useQuery } from '@tanstack/react-query';
 import { type RecruitProps } from '@/pages/recruit/RecruitType';
 
-const getRecruitmentsDetail = async (postId: string) => {
-  const res = await clientInstance.get(getDynamicAPIPath.recruitmentsDetail(postId));
+const getRecruitmentsDetail = async (recruitmentId: number) => {
+  const res = await clientInstance.get(getDynamicAPIPath.recruitmentsDetail(recruitmentId));
   return res.data;
 };
 
-export const useGetRecruitmentsDetail = (postId: string) =>
+export const useGetRecruitmentsDetail = (recruitmentId: number) =>
   useQuery<RecruitProps, Error>({
-    queryKey: ['recruitmentsDetail', postId],
-    queryFn: () => getRecruitmentsDetail(postId),
+    queryKey: ['recruitmentsDetail', recruitmentId],
+    queryFn: () => getRecruitmentsDetail(recruitmentId),
   });
diff --git a/src/apis/recruitmentsDetail/useRequiredFieldCheck.ts b/src/apis/recruitmentsDetail/useRequiredFieldCheck.ts
new file mode 100644
index 0000000..2a4ec7a
--- /dev/null
+++ b/src/apis/recruitmentsDetail/useRequiredFieldCheck.ts
@@ -0,0 +1,15 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useQuery } from '@tanstack/react-query';
+import { type RequiredFieldCheckProps } from '@/pages/recruit/RecruitType';
+
+const getRequiredFieldCheck = async () => {
+  const res = await clientInstance.get(APIPath.requiredFieldCheck);
+  return res.data;
+};
+
+export const useGetRequiredFieldCheck = (recruitmentId: number) =>
+  useQuery<RequiredFieldCheckProps, Error>({
+    queryKey: ['RequiredFieldCheckProps', recruitmentId],
+    queryFn: () => getRequiredFieldCheck(),
+  });
diff --git a/src/apis/registerCompany/useRegisterCompany.ts b/src/apis/registerCompany/hooks/useRegisterCompany.ts
similarity index 93%
rename from src/apis/registerCompany/useRegisterCompany.ts
rename to src/apis/registerCompany/hooks/useRegisterCompany.ts
index b8a6d43..7e1ff82 100644
--- a/src/apis/registerCompany/useRegisterCompany.ts
+++ b/src/apis/registerCompany/hooks/useRegisterCompany.ts
@@ -17,7 +17,7 @@ export const postCompany = async (req: CompanyRequestData) => {
   return response.data;
 };
 
-export const useFetchPostCompany = () =>
+export const usePostCompany = () =>
   useMutation({
     mutationFn: postCompany,
   });
diff --git a/src/apis/registerCompany/registerCompany.mock.ts b/src/apis/registerCompany/mocks/registerCompany.mock.ts
similarity index 78%
rename from src/apis/registerCompany/registerCompany.mock.ts
rename to src/apis/registerCompany/mocks/registerCompany.mock.ts
index 8bed0c8..ae6e0ba 100644
--- a/src/apis/registerCompany/registerCompany.mock.ts
+++ b/src/apis/registerCompany/mocks/registerCompany.mock.ts
@@ -1,5 +1,5 @@
 import { http, HttpResponse } from 'msw';
-import { getPostCompanyPath } from './useRegisterCompany';
+import { getPostCompanyPath } from '../hooks/useRegisterCompany';
 
 export const registerCompanyMockHandler = [
   http.post(getPostCompanyPath(), async ({ request }) => {
diff --git a/src/apis/registerSign/useRegisterSign.ts b/src/apis/registerSign/useRegisterSign.ts
index 778806a..193ca0f 100644
--- a/src/apis/registerSign/useRegisterSign.ts
+++ b/src/apis/registerSign/useRegisterSign.ts
@@ -1,7 +1,7 @@
 import { APIPath } from '@/apis/apiPath';
 import { clientInstance } from '@/apis/instance';
 import { useMutation } from '@tanstack/react-query';
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 export const getRegisterSign = () => `${APIPath.registerSign}`;
 
@@ -14,14 +14,19 @@ export const RegisterSign = async (req: FormData) => {
   return response.data;
 };
 
-export const FetchRegisterSign = () => {
-  // const nav = useNavigate();
+export const FetchRegisterSign = (userType: string) => {
+  const nav = useNavigate();
 
   return useMutation({
     mutationFn: (req: FormData) => RegisterSign(req),
     onSuccess: () => {
-      // 고용주, 근로자 구분 리다이렉트 추후 구현
-      // nav('/');
+      if (userType === 'employer') {
+        nav('/employer-my-page');
+      } else if (userType === 'employee') {
+        nav('/employee-my-page');
+      } else {
+        alert('오류');
+      }
     },
   });
 };
diff --git a/src/apis/resume/postResume.mock.ts b/src/apis/resume/postResume.mock.ts
new file mode 100644
index 0000000..aba8b23
--- /dev/null
+++ b/src/apis/resume/postResume.mock.ts
@@ -0,0 +1,9 @@
+import { http, HttpResponse } from 'msw';
+import { APIPath } from '@/apis/apiPath';
+
+export const postResumeMockHandler = [
+  http.post(`${APIPath.resume}`, async ({ request }) => {
+    const req = await request.json();
+    return HttpResponse.json({ req }, { status: 201 });
+  }),
+];
diff --git a/src/apis/resume/useResumeHook.tsx b/src/apis/resume/useResumeHook.tsx
new file mode 100644
index 0000000..3692fb5
--- /dev/null
+++ b/src/apis/resume/useResumeHook.tsx
@@ -0,0 +1,22 @@
+import { APIPath } from '@/apis/apiPath';
+import { clientInstance } from '@/apis/instance';
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+
+export const getResumePath = () => `${APIPath.resume}`;
+
+export const Resume = async ({ req }: { req: string }) => {
+  const response = await clientInstance.post(`${getResumePath()}`, req);
+  return response.data;
+};
+
+export const FetchResume = () => {
+  const nav = useNavigate();
+
+  return useMutation({
+    mutationFn: ({ data }: { data: string }) => Resume({ req: data }),
+    onSuccess: () => {
+      nav('/employee-my-page');
+    },
+  });
+};
diff --git a/src/assets/translator/Applicants/ContractModal/contractModalData.ts b/src/assets/translator/Applicants/ContractModal/contractModalData.ts
new file mode 100644
index 0000000..814ae04
--- /dev/null
+++ b/src/assets/translator/Applicants/ContractModal/contractModalData.ts
@@ -0,0 +1,35 @@
+import { Languages } from '../../Languages';
+
+export const contractModalData = {
+  [Languages.KO]: {
+    title: '고용주님께 드리는 주의사항',
+    warning: '불법 체류자를 고용할 시 최대 200만원의 범칙금이 부과될 수 있습니다.',
+    applicant_info: '지원자 정보',
+    foreigner_number: '외국인 등록 번호',
+    visa_generate_date: '비자 발급 일자',
+    message: {
+      part1: '이 지원자의 정보를 활용하여 <0>Hi Korea</0>에서 지원자에 대한 불법 체류 여부를 검증할 수 있습니다.',
+      part2: '안전한 고용을 위해 확인 후 진행하는 것을 권장합니다.',
+    },
+    buttons: {
+      confirm: '확인하였습니다.',
+      cancel: '취소',
+    },
+  },
+  [Languages.VE]: {
+    title: 'Lời khuyên dành cho nhà tuyển dụng',
+    warning: 'Nếu thuê người lưu trú bất hợp pháp, bạn có thể bị phạt tối đa 2 triệu won.',
+    applicant_info: 'Thông tin ứng viên',
+    foreigner_number: 'Số đăng ký người nước ngoài',
+    visa_generate_date: 'Ngày cấp visa',
+    message: {
+      part1:
+        'Bạn có thể sử dụng thông tin của người này để kiểm tra tình trạng cư trú bất hợp pháp tại <0>Hi Korea</0>.',
+      part2: 'Chúng tôi khuyến nghị bạn kiểm tra kỹ trước khi tiến hành để đảm bảo an toàn trong việc tuyển dụng.',
+    },
+    buttons: {
+      confirm: 'Tôi đã hiểu',
+      cancel: 'Hủy bỏ',
+    },
+  },
+};
diff --git a/src/assets/translator/Applicants/applicantsData.ts b/src/assets/translator/Applicants/applicantsData.ts
new file mode 100644
index 0000000..246877b
--- /dev/null
+++ b/src/assets/translator/Applicants/applicantsData.ts
@@ -0,0 +1,34 @@
+import { Languages } from '../Languages';
+
+export const applicantsData = {
+  [Languages.KO]: {
+    salary: '시급',
+    applicant_list: '지원자 목록',
+    total_applicants: '총 {{count}}명',
+    view_details: '자세히 보러가기',
+    table_headers: {
+      name: '이름',
+      nation: '국적',
+      korean_language_level: '한국어 실력',
+    },
+    buttons: {
+      view_resume: '지원서',
+      create_contract: '계약하기',
+    },
+  },
+  [Languages.VE]: {
+    salary: 'Lương theo giờ',
+    applicant_list: 'Danh sách ứng viên',
+    total_applicants: 'Tổng cộng {{count}} người',
+    view_details: 'Xem chi tiết',
+    table_headers: {
+      name: 'Tên',
+      nation: 'Quốc tịch',
+      korean_language_level: 'Trình độ tiếng Hàn',
+    },
+    buttons: {
+      view_resume: 'Hồ sơ ứng tuyển',
+      create_contract: 'Ký hợp đồng',
+    },
+  },
+};
diff --git a/src/assets/translator/Apply/applyData.ts b/src/assets/translator/Apply/applyData.ts
new file mode 100644
index 0000000..f00ba8c
--- /dev/null
+++ b/src/assets/translator/Apply/applyData.ts
@@ -0,0 +1,38 @@
+import { Languages } from '../Languages';
+
+export const applyData = {
+  [Languages.KO]: {
+    title: '지원서 작성',
+    name: '이름',
+    address: '주소',
+    phoneNumber: '번호',
+    applyMotivation: '지원동기',
+    description: {
+      name: '이름을 입력해주세요.',
+      address: '주소를 입력해주세요 (예: 대전광역시 유성구 궁동)',
+      phoneNumber: '번호를 입력해주세요 (예: 010-0000-0000)',
+      applyMotivation: '지원동기를 입력해주세요',
+    },
+    errors: '을(를) 입력해주세요!',
+    numberError: '올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)',
+    submit: '지원하기',
+    submitMent: '정말 지원하시겠습니까?',
+  },
+  [Languages.VE]: {
+    title: 'Đơn ứng tuyển',
+    name: 'Họ và tên',
+    address: 'Địa chỉ',
+    phoneNumber: 'Số điện thoại',
+    applyMotivation: 'Động lực ứng tuyển',
+    description: {
+      name: 'Vui lòng nhập họ và tên.',
+      address: 'Vui lòng nhập địa chỉ (ví dụ: Quận Cẩm Lệ, Thành phố Đà Nẵng)',
+      phoneNumber: 'Vui lòng nhập số điện thoại (ví dụ: 010-0000-0000)',
+      applyMotivation: 'Vui lòng nhập động lực ứng tuyển',
+    },
+    errors: 'Vui lòng nhập!',
+    numberError: 'Số điện thoại không đúng định dạng. (ví dụ: 010-0000-0000)',
+    submit: 'Nộp đơn',
+    submitMent: 'Bạn có chắc chắn muốn ứng tuyển không?',
+  },
+};
diff --git a/src/assets/translator/Apply/applyGuideData.ts b/src/assets/translator/Apply/applyGuideData.ts
new file mode 100644
index 0000000..43ee377
--- /dev/null
+++ b/src/assets/translator/Apply/applyGuideData.ts
@@ -0,0 +1,64 @@
+import { Languages } from '../Languages';
+
+export const applyGuideData = {
+  [Languages.KO]: {
+    section1: {
+      title: '🙌 채용 절차 안내',
+      description: '여러분의 채용 절차를 더욱 원활하게 진행할 수 있도록, 아래의 내용을 꼭 확인해주세요.',
+    },
+    section2: {
+      title: '1. 채용 절차 설명',
+      description:
+        '- 채용 과정 전반에 대한 안내를 드립니다. 채용의 모든 단계에서 어떤 일들이 일어날지에 대해 명확히 이해하고 준비할 수 있도록 도와드립니다.',
+    },
+    section3: {
+      title: '2. 주의 사항 및 표준 근로계약서 안내',
+      description: {
+        description1:
+          '- 고용주가 채용을 희망하는 경우, 채용 과정과 별도로 등록하신 이메일로 표준 근로계약서와 주의사항이 안내됩니다.',
+        description2:
+          ' - 채용 절차가 진행되는 동안, 근로계약서 작성 시 유의할 점을 반드시 확인하시고 필요한 경우 참고하시기 바랍니다.',
+        description3:
+          ' - 해당 과정은 여러분과 고용주 모두가 이해하고 동의하는 투명하고 신뢰할 수 있는 계약서를 작성하는 데 도움을 드리기 위한 것입니다.',
+      },
+    },
+    section4: {
+      description:
+        '이 안내사항들은 여러분이 채용 절차를 성공적으로 마무리하고, 근로 계약이 원활하게 체결될 수 있도록 지원하기 위한 것입니다.',
+    },
+    section5: { description: '필요한 정보가 정확히 전달될 수 있도록 항상 주의하시기 바랍니다.' },
+    section6: { description: '지원서 작성하러 가기' },
+  },
+  [Languages.VE]: {
+    section1: {
+      title: '🙌 Quy trình tuyển dụng',
+      description: 'Để quá trình tuyển dụng của bạn diễn ra thuận lợi hơn, vui lòng kiểm tra nội dung dưới đây.',
+    },
+    section2: {
+      title: '1. Giải thích quy trình tuyển dụng',
+      description:
+        '- Chúng tôi cung cấp thông tin về toàn bộ quy trình tuyển dụng. Điều này giúp bạn hiểu rõ và chuẩn bị sẵn sàng cho từng bước của quy trình.',
+    },
+    section3: {
+      title: '2. Lưu ý và hướng dẫn về hợp đồng lao động tiêu chuẩn',
+      description: {
+        description1:
+          '- Khi nhà tuyển dụng mong muốn tuyển dụng, thông tin về hợp đồng lao động tiêu chuẩn và các lưu ý sẽ được gửi đến email đã đăng ký của bạn.',
+        description2:
+          '- Trong suốt quá trình tuyển dụng, hãy kiểm tra kỹ các điều cần lưu ý khi ký kết hợp đồng lao động và tham khảo nếu cần thiết.',
+        description3:
+          '- Quá trình này nhằm giúp cả bạn và nhà tuyển dụng hiểu và đồng thuận trong việc tạo ra một hợp đồng minh bạch và đáng tin cậy.',
+      },
+    },
+    section4: {
+      description:
+        'Những hướng dẫn này giúp bạn hoàn thành quy trình tuyển dụng thành công và ký kết hợp đồng lao động một cách suôn sẻ.',
+    },
+    section5: {
+      description: 'Hãy luôn cẩn thận để đảm bảo thông tin cần thiết được truyền tải chính xác.',
+    },
+    section6: {
+      description: 'Điền đơn ứng tuyển',
+    },
+  },
+};
diff --git a/src/assets/translator/Auth/signInData.ts b/src/assets/translator/Auth/signInData.ts
new file mode 100644
index 0000000..3481750
--- /dev/null
+++ b/src/assets/translator/Auth/signInData.ts
@@ -0,0 +1,12 @@
+import { Languages } from '../Languages';
+
+export const signInData = {
+  [Languages.KO]: {
+    heading: '지금 바로 시작하세요. 🚀',
+    description: '안정적이고 투명한 고용 관계의 시작, 지금 바로 경험해보세요!',
+  },
+  [Languages.VE]: {
+    heading: 'Bắt đầu ngay bây giờ. 🚀',
+    description: 'Trải nghiệm sự khởi đầu của mối quan hệ lao động ổn định và minh bạch, ngay bây giờ!',
+  },
+};
diff --git a/src/assets/translator/Auth/signUpData.ts b/src/assets/translator/Auth/signUpData.ts
new file mode 100644
index 0000000..2f8376a
--- /dev/null
+++ b/src/assets/translator/Auth/signUpData.ts
@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const signUpData = {
+  [Languages.KO]: {
+    heading: '가입자 정보 선택',
+    description: '대상에 해당하는 가입자 정보를 선택해주세요.',
+    buttons: {
+      employer: '사업주 가입',
+      employee: '근로자 가입',
+    },
+  },
+  [Languages.VE]: {
+    heading: 'Chọn thông tin người đăng ký',
+    description: 'Vui lòng chọn thông tin người đăng ký phù hợp với đối tượng.',
+    buttons: {
+      employer: 'Đăng ký chủ doanh nghiệp',
+      employee: 'Đăng ký người lao động',
+    },
+  },
+};
diff --git a/src/assets/translator/Auth/signUpModalData.ts b/src/assets/translator/Auth/signUpModalData.ts
new file mode 100644
index 0000000..a802825
--- /dev/null
+++ b/src/assets/translator/Auth/signUpModalData.ts
@@ -0,0 +1,32 @@
+import { Languages } from '../Languages';
+
+export const signUpModalData = {
+  [Languages.KO]: {
+    common: {
+      requiredMessage: '정보를 입력해주세요.',
+      laterMessage: '* 추후 마이페이지에서 수정 할 수 있습니다.',
+    },
+    detailMessage: {
+      employer: `이력서에 대한 정보가 필요해요.\n이력서 정보를 등록하러 가실까요?`,
+      employee: `사업장에 대한 정보가 필요해요.\n사업주 정보를 등록하러 가실까요?`,
+    },
+    buttons: {
+      submit: '등록할게요',
+      cancel: '괜찮아요',
+    },
+  },
+  [Languages.VE]: {
+    common: {
+      requiredMessage: 'Vui lòng nhập thông tin.',
+      laterMessage: '* Bạn có thể chỉnh sửa sau trong trang cá nhân.',
+    },
+    detailMessage: {
+      employer: `Cần thông tin về hồ sơ.\nBạn có muốn đăng ký thông tin hồ sơ không?`,
+      employee: `Cần thông tin về doanh nghiệp.\nBạn có muốn đăng ký thông tin doanh nghiệp không?`,
+    },
+    buttons: {
+      submit: 'Tôi sẽ đăng ký',
+      cancel: 'Không sao đâu',
+    },
+  },
+};
diff --git a/src/assets/translator/Contract/contractData.ts b/src/assets/translator/Contract/contractData.ts
new file mode 100644
index 0000000..dcf8813
--- /dev/null
+++ b/src/assets/translator/Contract/contractData.ts
@@ -0,0 +1,35 @@
+import { Languages } from '../Languages';
+
+export const contractData = {
+  [Languages.KO]: {
+    CONTRACT: '근 로 계 약 서',
+    WORKING_PLACE: '1. 근무장소',
+    RESPONSIBILITIES: '2. 업무내용',
+    WORKING_HOURS: '3. 근로일 및 근로일별 근로시간',
+    DAY_OFF: '4. 주휴일',
+    SALARY: '5. 임금',
+    ANNUAL_PAID_LEAVE: '6. 연차유급휴가',
+    RULE: '7. 취업규칙',
+    SENTENCE1: '사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.',
+    SENTENCE2: "이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.",
+    SIGN: '서명하기',
+    SUBMIT: '제출하기',
+    ERROR: '* 근로계약서에 서명해주세요!',
+  },
+  [Languages.VE]: {
+    CONTRACT: 'Hợp đồng lao động',
+    WORKING_PLACE: '1. Nơi làm việc',
+    RESPONSIBILITIES: '2. Nội dung công việc',
+    WORKING_HOURS: '3. Ngày làm việc và giờ làm việc theo ngày',
+    DAY_OFF: '4. Ngày nghỉ hàng tuần',
+    SALARY: '5. Tiền lương',
+    ANNUAL_PAID_LEAVE: '6. Nghỉ phép có lương hàng năm',
+    RULE: '7. Quy tắc lao động',
+    SENTENCE1:
+      'Người sử dụng lao động và người lao động cần tuân thủ hợp đồng lao động, quy tắc lao động và thỏa thuận tập thể một cách nghiêm túc.',
+    SENTENCE2: 'Các điều khoản không được quy định trong hợp đồng này sẽ được điều chỉnh theo "Luật lao động".',
+    SIGN: 'Ký tên',
+    SUBMIT: 'Gửi đi',
+    ERROR: '* Vui lòng ký vào hợp đồng lao động!',
+  },
+};
diff --git a/src/assets/translator/EmployeeMyPage/employeeMyPageData.ts b/src/assets/translator/EmployeeMyPage/employeeMyPageData.ts
new file mode 100644
index 0000000..f3c6ad7
--- /dev/null
+++ b/src/assets/translator/EmployeeMyPage/employeeMyPageData.ts
@@ -0,0 +1,18 @@
+import { Languages } from '../Languages';
+
+export const employeeMyPageData = {
+  [Languages.KO]: {
+    REGISTER_RESUME: '이력서 등록하기',
+    REGISTER_SIGN: '사인 등록',
+    REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
+    MYRECRUITLIST: '내가 지원한 공고',
+    GREETING: '구직자님 안녕하세요!',
+  },
+  [Languages.VE]: {
+    REGISTER_RESUME: 'Đăng ký hồ sơ',
+    REGISTER_SIGN: 'Đăng ký chữ ký',
+    REGISTER_VISA: 'Đăng ký số người nước ngoài và ngày cấp visa',
+    MYRECRUITLIST: 'Công việc tôi đã ứng tuyển',
+    GREETING: 'Xin chào người tìm việc!',
+  },
+};
diff --git a/src/assets/translator/EmployeeMyPage/ko.ts b/src/assets/translator/EmployeeMyPage/ko.ts
deleted file mode 100644
index bdcb94e..0000000
--- a/src/assets/translator/EmployeeMyPage/ko.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const EmployeeMyPage = {
-  UPDATE_PROFILE: '프로필 수정하기',
-  REGISTER_RESUME: '이력서 등록하기',
-  REGISTER_SIGN: '사인 등록',
-  REGISTER_VISA: '외국인 번호 및 비자 발급 일자 등록',
-  MYRECRUITLIST: '내가 지원한 공고',
-};
diff --git a/src/assets/translator/EmployeeMyPage/ve.ts b/src/assets/translator/EmployeeMyPage/ve.ts
deleted file mode 100644
index 5ddd79c..0000000
--- a/src/assets/translator/EmployeeMyPage/ve.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const EmployeeMyPage = {
-  UPDATE_PROFILE: 'Cập nhật hồ sơ',
-  REGISTER_RESUME: 'Đăng ký hồ sơ',
-  REGISTER_SIGN: 'Đăng ký chữ ký',
-  REGISTER_VISA: 'Đăng ký số người nước ngoài và ngày cấp visa',
-  MYRECRUITLIST: 'Công việc tôi đã ứng tuyển',
-};
diff --git a/src/assets/translator/EmployerMyPage/employerMyPageData.ts b/src/assets/translator/EmployerMyPage/employerMyPageData.ts
new file mode 100644
index 0000000..e10bd20
--- /dev/null
+++ b/src/assets/translator/EmployerMyPage/employerMyPageData.ts
@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const employerMyPageData = {
+  [Languages.KO]: {
+    greeting: '{{name}}님, 안녕하세요!',
+    register_company: '회사 등록',
+    register_sign: '사인 등록',
+    my_companies: '내 회사',
+    total_companies: '총 {{count}} 곳',
+    company_info: '회사 정보',
+  },
+  [Languages.VE]: {
+    greeting: '{{name}}, xin chào!',
+    register_company: 'Đăng ký công ty',
+    register_sign: 'Đăng ký chữ ký',
+    my_companies: 'Công ty của tôi',
+    total_companies: 'Tổng cộng {{count}} công ty',
+    company_info: 'Thông tin công ty',
+  },
+};
diff --git a/src/assets/translator/Footer/footerData.ts b/src/assets/translator/Footer/footerData.ts
new file mode 100644
index 0000000..f05b61e
--- /dev/null
+++ b/src/assets/translator/Footer/footerData.ts
@@ -0,0 +1,20 @@
+import { Languages } from '../Languages';
+
+export const footerData = {
+  [Languages.KO]: {
+    info_1: '(주)Hire Higher 임세빈',
+    info_2: '대전광역시 유성구 궁동',
+    info_3: '전화번호: 042-821-5114',
+    info_4: '사업자등록번호: 111-11-00000',
+    info_5: '통신판매번호: 2024-대전유성-0000',
+    info_6: '유료직업소개사업등록번호: (국내) 제2024-1111111-11-1-00011호',
+  },
+  [Languages.VE]: {
+    info_1: 'Công ty TNHH Hire Higher 임세빈',
+    info_2: 'Quận Yuseong, Daejeon, Gungdong',
+    info_3: 'Số điện thoại: 042-821-5114',
+    info_4: 'Mã số doanh nghiệp: 111-11-00000',
+    info_5: 'Số đăng ký kinh doanh thương mại điện tử: 2024-Daejeon Yuseong-0000',
+    info_6: 'Số đăng ký dịch vụ giới thiệu việc làm có phí (trong nước): Số 2024-1111111-11-1-00011',
+  },
+};
diff --git a/src/assets/translator/Header/headerData.ts b/src/assets/translator/Header/headerData.ts
new file mode 100644
index 0000000..be876df
--- /dev/null
+++ b/src/assets/translator/Header/headerData.ts
@@ -0,0 +1,14 @@
+import { Languages } from '../Languages';
+
+export const headerData = {
+  [Languages.KO]: {
+    post_notice: '채용공고 등록',
+    login: '로그인',
+    logout: '로그아웃',
+  },
+  [Languages.VE]: {
+    post_notice: 'Đăng thông báo tuyển dụng',
+    login: 'Đăng nhập',
+    logout: 'Đăng xuất',
+  },
+};
diff --git a/src/assets/translator/Home/homeData.ts b/src/assets/translator/Home/homeData.ts
new file mode 100644
index 0000000..b66706b
--- /dev/null
+++ b/src/assets/translator/Home/homeData.ts
@@ -0,0 +1,34 @@
+import { Languages } from '../Languages';
+
+export const homeData = {
+  [Languages.KO]: {
+    greeting: {
+      heading: `사장님,\n 공고 등록은 하셨나요? 🤔`,
+      button: `등록하러 가기`,
+    },
+    recruitmentHeader: {
+      heading: '어떤 일자리를 구하시나요?',
+      description: '조건을 선택하고 원하는 일자리를 골라보세요.',
+    },
+    recruitmentFilter: {
+      all: '전체',
+      salary: '급여순',
+      latestRegistration: '최신등록순',
+    },
+  },
+  [Languages.VE]: {
+    greeting: {
+      heading: `Sếp ơi,\n đã đăng tin tuyển dụng chưa? 🤔`,
+      button: `Đi đăng ký`,
+    },
+    recruitmentHeader: {
+      heading: 'Bạn đang tìm công việc như thế nào?',
+      description: 'Hãy chọn điều kiện và tìm công việc bạn muốn.',
+    },
+    recruitmentFilter: {
+      all: 'Tất cả',
+      salary: 'Theo lương',
+      latestRegistration: 'Mới đăng ký',
+    },
+  },
+};
diff --git a/src/assets/translator/Languages.ts b/src/assets/translator/Languages.ts
new file mode 100644
index 0000000..98807dd
--- /dev/null
+++ b/src/assets/translator/Languages.ts
@@ -0,0 +1,4 @@
+export const Languages = {
+  KO: 'ko',
+  VE: 've',
+} as const;
diff --git a/src/assets/translator/MyCompany/myCompanyData.ts b/src/assets/translator/MyCompany/myCompanyData.ts
new file mode 100644
index 0000000..e6ba198
--- /dev/null
+++ b/src/assets/translator/MyCompany/myCompanyData.ts
@@ -0,0 +1,30 @@
+import { Languages } from '../Languages';
+
+export const myCompanyData = {
+  [Languages.KO]: {
+    my_recruitments: '내 공고글',
+    total_recruitments: '총 {{count}}건',
+    table_headers: {
+      location: '근무지',
+      title: '공고 제목',
+    },
+    buttons: {
+      view_applicants: '지원자 보러가기',
+      close_recruitment: '마감하기',
+      closed_recruitment: '마감완료',
+    },
+  },
+  [Languages.VE]: {
+    my_recruitments: 'Thông báo tuyển dụng của tôi',
+    total_recruitments: 'Tổng cộng {{count}} bài',
+    table_headers: {
+      location: 'Nơi làm việc',
+      title: 'Tiêu đề thông báo',
+    },
+    buttons: {
+      view_applicants: 'Xem người ứng tuyển',
+      close_recruitment: 'Đóng tuyển dụng',
+      closed_recruitment: 'Đã đóng tuyển dụng',
+    },
+  },
+};
diff --git a/src/assets/translator/PostNotice/ko.ts b/src/assets/translator/PostNotice/ko.ts
deleted file mode 100644
index 6e28f63..0000000
--- a/src/assets/translator/PostNotice/ko.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const PostNotice = {
-  TITLE: '구인 글 등록하기',
-  SALARY: '급여',
-  WORKINGDURATION: '근무기간',
-  WORKDAYS: '근무요일',
-  WORKHOURS: '근무시간',
-  WORKTYPE: '고용형태',
-  ELIGIBILITY_CRITERIA: '비자조건',
-  PREFERRED_CONDITIONS: '우대사항',
-  SUBMIT: '등록하기',
-};
diff --git a/src/assets/translator/PostNotice/postNoticeData.ts b/src/assets/translator/PostNotice/postNoticeData.ts
new file mode 100644
index 0000000..f37519d
--- /dev/null
+++ b/src/assets/translator/PostNotice/postNoticeData.ts
@@ -0,0 +1,38 @@
+import { Languages } from '../Languages';
+
+export const postNoticeData = {
+  [Languages.KO]: {
+    TITLE: '구인 글 등록하기',
+    COMPANY_NAME: '회사명',
+    EMPLOYER_NAME: '담당자명',
+    COMPANY_SCALE: '회사규모',
+    AREA: '근무지 주소',
+    SALARY: '급여',
+    MAJOR_BUSINESS: '업무내용',
+    WORKDURATION: '근무기간',
+    WORKDAYS: '근무요일',
+    WORKHOURS: '근무시간',
+    WORKTYPE: '고용형태',
+    REQUESTED_CAREER: '지원조건',
+    ELIGIBILITY_CRITERIA: '비자조건',
+    PREFERRED_CONDITIONS: '우대사항',
+    SUBMIT: '등록하기',
+  },
+  [Languages.VE]: {
+    TITLE: 'Đăng thông báo tuyển dụng',
+    COMPANY_NAME: 'Tên công ty',
+    EMPLOYER_NAME: 'Tên người phụ trách',
+    COMPANY_SCALE: 'Quy mô công ty',
+    AREA: 'Địa chỉ làm việc',
+    SALARY: 'Lương',
+    MAJOR_BUSINESS: 'Nội dung công việc',
+    WORKDURATION: 'Thời gian làm việc',
+    WORKDAYS: 'Ngày làm việc trong tuần',
+    WORKHOURS: 'Giờ làm việc',
+    WORKTYPE: 'Hình thức lao động',
+    REQUESTED_CAREER: 'Yêu cầu kinh nghiệm',
+    ELIGIBILITY_CRITERIA: 'Điều kiện về visa',
+    PREFERRED_CONDITIONS: 'Ưu tiên',
+    SUBMIT: 'Đăng ký',
+  },
+};
diff --git a/src/assets/translator/PostNotice/ve.ts b/src/assets/translator/PostNotice/ve.ts
deleted file mode 100644
index d96469a..0000000
--- a/src/assets/translator/PostNotice/ve.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const PostNotice = {
-  TITLE: 'Đăng bài tuyển dụng',
-  SALARY: 'Lương',
-  WORKINGDURATION: 'Thời gian làm việc',
-  WORKDAYS: 'Ngày làm việc',
-  WORKHOURS: 'Giờ làm việc',
-  WORKTYPE: 'Hình thức làm việc',
-  ELIGIBILITY_CRITERIA: 'Điều kiện visa',
-  PREFERRED_CONDITIONS: 'Ưu tiên',
-  SUBMIT: 'Đăng',
-};
diff --git a/src/assets/translator/Recruit/recruitData.ts b/src/assets/translator/Recruit/recruitData.ts
new file mode 100644
index 0000000..92fade7
--- /dev/null
+++ b/src/assets/translator/Recruit/recruitData.ts
@@ -0,0 +1,56 @@
+import { Languages } from '../Languages';
+
+export const recruitData = {
+  [Languages.KO]: {
+    recruit: '지원하기',
+    conditions: '근무조건',
+    conditions_detail: {
+      salary: '급여',
+      workDuration: '근무기간',
+      workDays: '근무요일',
+      workHours: '근무시간',
+      employerName: '대표',
+      companyName: '회사명',
+      workType: '고용형태',
+    },
+    eligibilityRequirements: '지원자격',
+    detailedDescription: '상세설명',
+    mainResponsibilities: '주요업무',
+    PreferredRequirements: '우대사항',
+    Modal: {
+      resumeExistence: '이력서',
+      visaExistence: '비자 발급 일자',
+      foreignerIdNumberExistence: '외국인 번호',
+      close: '닫기',
+      alert: '미등록!',
+      ment: '필수 정보를 등록해야 지원서를 작성할 수 있어요',
+      myPage: '마이페이지',
+    },
+  },
+  [Languages.VE]: {
+    recruit: 'Ứng tuyển',
+    conditions: 'Điều kiện làm việc',
+    conditions_detail: {
+      salary: 'Lương',
+      workDuration: 'Thời gian làm việc',
+      workDays: 'Ngày làm việc',
+      workHours: 'Giờ làm việc',
+      employerName: 'Người đại diện',
+      companyName: 'Tên công ty',
+      workType: 'Loại hình công việc',
+    },
+    eligibilityRequirements: 'Yêu cầu ứng tuyển',
+    detailedDescription: 'Mô tả chi tiết',
+    mainResponsibilities: 'Nhiệm vụ chính',
+    PreferredRequirements: 'Yêu cầu ưu tiên',
+    Modal: {
+      resumeExistence: 'Sơ yếu lý lịch',
+      visaExistence: 'Ngày cấp visa',
+      foreignerIdNumberExistence: 'Số đăng ký người nước ngoài',
+      close: 'Đóng',
+      alert: 'Chưa đăng ký!',
+      ment: 'Bạn cần đăng ký thông tin bắt buộc để có thể tạo hồ sơ ứng tuyển',
+      myPage: 'Trang của tôi',
+    },
+  },
+};
diff --git a/src/assets/translator/RegisterCompany/ko.ts b/src/assets/translator/RegisterCompany/ko.ts
deleted file mode 100644
index 0d3663c..0000000
--- a/src/assets/translator/RegisterCompany/ko.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const RegisterCompany = {
-  TITLE: '회사 등록',
-  LOGOIMAGE: '회사 이미지 업로드(선택)',
-  COMPANYNAME: '회사명',
-  INDUSTRY_OCCUPATION: '업직종',
-  BRAND: '브랜드',
-  REVENUE_PERYEAR: '연 평균 매출액',
-  SUBMIT: '등록하기',
-};
diff --git a/src/assets/translator/RegisterCompany/registerCompanyData.ts b/src/assets/translator/RegisterCompany/registerCompanyData.ts
new file mode 100644
index 0000000..63d31bf
--- /dev/null
+++ b/src/assets/translator/RegisterCompany/registerCompanyData.ts
@@ -0,0 +1,22 @@
+import { Languages } from '../Languages';
+
+export const registerCompanyData = {
+  [Languages.KO]: {
+    TITLE: '회사 등록',
+    LOGOIMAGE: '회사 이미지 업로드(선택)',
+    COMPANYNAME: '회사명',
+    INDUSTRY_OCCUPATION: '업직종',
+    BRAND: '브랜드',
+    REVENUE_PERYEAR: '연 평균 매출액',
+    SUBMIT: '등록하기',
+  },
+  [Languages.VE]: {
+    TITLE: 'Đăng ký công ty',
+    LOGOIMAGE: 'Tải lên logo công ty (tùy chọn)',
+    COMPANYNAME: 'Tên công ty',
+    INDUSTRY_OCCUPATION: 'Ngành nghề',
+    BRAND: 'Thương hiệu',
+    REVENUE_PERYEAR: 'Doanh thu hàng năm',
+    SUBMIT: 'Đăng ký',
+  },
+};
diff --git a/src/assets/translator/RegisterCompany/ve.ts b/src/assets/translator/RegisterCompany/ve.ts
deleted file mode 100644
index d01e351..0000000
--- a/src/assets/translator/RegisterCompany/ve.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const RegisterCompany = {
-  TITLE: 'Đăng ký công ty',
-  LOGOIMAGE: 'Tải lên logo công ty (tùy chọn)',
-  COMPANYNAME: 'Tên công ty',
-  INDUSTRY_OCCUPATION: 'Ngành nghề',
-  BRAND: 'Thương hiệu',
-  REVENUE_PERYEAR: 'Doanh thu hàng năm',
-  SUBMIT: 'Đăng ký',
-};
diff --git a/src/assets/translator/RegisterVisa/registerVisaData.ts b/src/assets/translator/RegisterVisa/registerVisaData.ts
new file mode 100644
index 0000000..552a2af
--- /dev/null
+++ b/src/assets/translator/RegisterVisa/registerVisaData.ts
@@ -0,0 +1,26 @@
+import { Languages } from '../Languages';
+
+export const registerVisaData = {
+  [Languages.KO]: {
+    title: '외국인 번호 및 비자 발급 일자 등록',
+    labels: {
+      foreigner_number: '외국인 번호',
+      visa_generate_date: '비자 발급 일자',
+    },
+    error_message: '올바른 형식으로 입력해주세요. (형식: 000000-0000000)',
+    submit: '등록하기',
+    complete_message: '등록이 완료되었습니다.',
+    button: '확인',
+  },
+  [Languages.VE]: {
+    title: 'Đăng ký số người nước ngoài và ngày cấp thị thực',
+    labels: {
+      foreigner_number: 'Số người nước ngoài',
+      visa_generate_date: 'Ngày cấp thị thực',
+    },
+    error_message: 'Vui lòng nhập đúng định dạng. (định dạng: 000000-0000000)',
+    submit: 'Đăng ký',
+    complete_message: 'Đăng ký đã hoàn tất.',
+    button: 'Xác nhận',
+  },
+};
diff --git a/src/assets/translator/Resume/resumeData.ts b/src/assets/translator/Resume/resumeData.ts
new file mode 100644
index 0000000..441da00
--- /dev/null
+++ b/src/assets/translator/Resume/resumeData.ts
@@ -0,0 +1,52 @@
+import { Languages } from '../Languages';
+
+export const resumeData = {
+  [Languages.KO]: {
+    title: '이력서 작성',
+    name: '이름',
+    address: '주소',
+    phoneNumber: '번호',
+    career: '경력',
+    introduction: '자기소개',
+    koreanLevel: '한국어 실력',
+    koreanLevel_1: '초급',
+    koreanLevel_2: '중급',
+    koreanLevel_3: '고급',
+    ResumeDescription: {
+      name: '이름을 입력하세요.',
+      address: '주소를 입력하세요.',
+      phoneNumber: '010-0000-0000 형식의 번호를 입력하세요.',
+      phoneNumberError: '올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)',
+      career: '경력을 입력하세요.',
+      introduction: '자기소개를 입력하세요.',
+      koreanLevel: '한국어 실력을 선택해주세요!',
+    },
+    errors: '을(를) 입력해주세요!',
+    submit: '제출하기',
+    btnSubmit: '정말 제출하시겠습니까?',
+  },
+  [Languages.VE]: {
+    title: 'Viết sơ yếu lý lịch',
+    name: 'Tên',
+    address: 'Địa chỉ',
+    phoneNumber: 'Số điện thoại',
+    career: 'Kinh nghiệm',
+    introduction: 'Giới thiệu bản thân',
+    koreanLevel: 'Trình độ tiếng Hàn',
+    koreanLevel_1: 'Sơ cấp',
+    koreanLevel_2: 'Trung cấp',
+    koreanLevel_3: 'Cao cấp',
+    ResumeDescription: {
+      name: 'Vui lòng nhập tên.',
+      address: 'Vui lòng nhập địa chỉ.',
+      phoneNumber: 'Vui lòng nhập số theo định dạng 010-0000-0000.',
+      phoneNumberError: 'Số điện thoại không đúng định dạng. (Ví dụ: 010-0000-0000)',
+      career: 'Vui lòng nhập kinh nghiệm.',
+      introduction: 'Vui lòng nhập giới thiệu bản thân.',
+      koreanLevel: 'Vui lòng chọn trình độ tiếng Hàn!',
+    },
+    errors: 'Vui lòng nhập ',
+    submit: 'Nộp',
+    btnSubmit: 'Bạn có chắc muốn nộp không?',
+  },
+};
diff --git a/src/assets/translator/i18n.ts b/src/assets/translator/i18n.ts
new file mode 100644
index 0000000..af48699
--- /dev/null
+++ b/src/assets/translator/i18n.ts
@@ -0,0 +1,20 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { KO, VE } from '.';
+import { userLocalStorage } from '@/utils/storage';
+
+const resources = {
+  ko: { translation: { ...KO } },
+  ve: { translation: { ...VE } },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  fallbackLng: 'ko',
+  lng: userLocalStorage.getLanguage() || 'ko',
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
diff --git a/src/assets/translator/index.ts b/src/assets/translator/index.ts
new file mode 100644
index 0000000..3a58c1b
--- /dev/null
+++ b/src/assets/translator/index.ts
@@ -0,0 +1,67 @@
+import { applicantsData } from './Applicants/applicantsData';
+import { contractModalData } from './Applicants/ContractModal/contractModalData';
+import { signInData } from './Auth/signInData';
+import { signUpData } from './Auth/signUpData';
+import { signUpModalData } from './Auth/signUpModalData';
+import { applyGuideData } from './Apply/applyGuideData';
+import { applyData } from './Apply/applyData';
+import { employerMyPageData } from './EmployerMyPage/employerMyPageData';
+import { footerData } from './Footer/footerData';
+import { headerData } from './Header/headerData';
+import { homeData } from './Home/homeData';
+import { Languages } from './Languages';
+import { myCompanyData } from './MyCompany/myCompanyData';
+import { recruitData } from './Recruit/recruitData';
+import { registerVisaData } from './RegisterVisa/registerVisaData';
+import { resumeData } from './Resume/resumeData';
+import { registerSignData } from './registerSign/registerSignData';
+import { contractData } from './Contract/contractData';
+import { employeeMyPageData } from './EmployeeMyPage/employeeMyPageData';
+import { postNoticeData } from './PostNotice/postNoticeData';
+import { registerCompanyData } from './RegisterCompany/registerCompanyData';
+
+export const KO = {
+  home: { ...homeData[Languages.KO] },
+  signIn: { ...signInData[Languages.KO] },
+  signUp: { ...signUpData[Languages.KO] },
+  signUpModal: { ...signUpModalData[Languages.KO] },
+  resume: { ...resumeData[Languages.KO] },
+  employerMyPage: { ...employerMyPageData[Languages.KO] },
+  myCompany: { ...myCompanyData[Languages.KO] },
+  applicants: { ...applicantsData[Languages.KO] },
+  registerVisa: { ...registerVisaData[Languages.KO] },
+  contractModal: { ...contractModalData[Languages.KO] },
+  header: { ...headerData[Languages.KO] },
+  footer: { ...footerData[Languages.KO] },
+  recruit: { ...recruitData[Languages.KO] },
+  applyGuide: { ...applyGuideData[Languages.KO] },
+  apply: { ...applyData[Languages.KO] },
+  registerSign: { ...registerSignData[Languages.KO] },
+  contract: { ...contractData[Languages.KO] },
+  employeeMyPage: { ...employeeMyPageData[Languages.KO] },
+  postNotice: { ...postNoticeData[Languages.KO] },
+  registerCompany: { ...registerCompanyData[Languages.KO] },
+};
+
+export const VE = {
+  home: { ...homeData[Languages.VE] },
+  signIn: { ...signInData[Languages.VE] },
+  signUp: { ...signUpData[Languages.VE] },
+  signUpModal: { ...signUpModalData[Languages.VE] },
+  resume: { ...resumeData[Languages.VE] },
+  employerMyPage: { ...employerMyPageData[Languages.VE] },
+  myCompany: { ...myCompanyData[Languages.VE] },
+  applicants: { ...applicantsData[Languages.VE] },
+  registerVisa: { ...registerVisaData[Languages.VE] },
+  contractModal: { ...contractModalData[Languages.VE] },
+  header: { ...headerData[Languages.VE] },
+  footer: { ...footerData[Languages.VE] },
+  recruit: { ...recruitData[Languages.VE] },
+  applyGuide: { ...applyGuideData[Languages.VE] },
+  apply: { ...applyData[Languages.VE] },
+  registerSign: { ...registerSignData[Languages.VE] },
+  contract: { ...contractData[Languages.VE] },
+  employeeMyPage: { ...employeeMyPageData[Languages.VE] },
+  postNotice: { ...postNoticeData[Languages.VE] },
+  registerCompany: { ...registerCompanyData[Languages.VE] },
+};
diff --git a/src/assets/translator/registerSign/registerSignData.ts b/src/assets/translator/registerSign/registerSignData.ts
new file mode 100644
index 0000000..9d0fe27
--- /dev/null
+++ b/src/assets/translator/registerSign/registerSignData.ts
@@ -0,0 +1,6 @@
+import { Languages } from '../Languages';
+
+export const registerSignData = {
+  [Languages.KO]: { registerSign: '사인 등록하기', reset: '초기화' },
+  [Languages.VE]: { registerSign: 'Đăng ký chữ ký', reset: 'Đặt lại' },
+};
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
index 4e08944..f05beb2 100644
--- a/src/components/common/Button/index.tsx
+++ b/src/components/common/Button/index.tsx
@@ -28,7 +28,7 @@ const Wrapper = styled.button<Props>(
         border: '2px solid #0A65CC',
 
         '&:hover': {
-          backgroundColor: '#6992C0',
+          backgroundColor: '#0033cc',
           color: '#fff',
         },
       };
diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
index c1742ed..bf51bec 100644
--- a/src/components/common/Input/index.tsx
+++ b/src/components/common/Input/index.tsx
@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
   label?: string;
+  labelStyle?: React.CSSProperties;
 }
 
-export default function Input({ label, ...rest }: Props) {
+export default function Input({ label, labelStyle, ...rest }: Props) {
   return (
     <>
-      {label && <label>{label}</label>}
+      {label && <label style={{ ...labelStyle }}>{label}</label>}
       <InputContainer {...rest} />
     </>
   );
diff --git a/src/components/common/Pagination/index.stories.tsx b/src/components/common/Pagination/index.stories.tsx
new file mode 100644
index 0000000..086eca3
--- /dev/null
+++ b/src/components/common/Pagination/index.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Pagination from '.';
+
+const meta: Meta<typeof Pagination> = {
+  title: 'common/Pagination',
+  component: Pagination,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+  },
+};
diff --git a/src/components/common/Pagination/index.tsx b/src/components/common/Pagination/index.tsx
new file mode 100644
index 0000000..d8de081
--- /dev/null
+++ b/src/components/common/Pagination/index.tsx
@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+import Flex from '../Flex';
+
+type PaginationProps = {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+};
+
+export default function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  const handlePrevious = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1);
+  };
+
+  const handleNext = () => {
+    if (currentPage < totalPages) onPageChange(currentPage + 1);
+  };
+
+  const handlePageClick = (page: number) => onPageChange(page);
+
+  return (
+    <Flex justifyContent="center" alignItems="center">
+      <NavButton onClick={handlePrevious} disabled={currentPage === 1}>
+        &laquo; Previous
+      </NavButton>
+      {[...Array(totalPages)].map((_, index) => {
+        const page = index + 1;
+        return (
+          <PageButton key={page} onClick={() => handlePageClick(page)} isActive={page === currentPage}>
+            {page}
+          </PageButton>
+        );
+      })}
+      <NavButton onClick={handleNext} disabled={currentPage === totalPages}>
+        Next &raquo;
+      </NavButton>
+    </Flex>
+  );
+}
+
+const NavButton = styled.button`
+  padding: 5px 10px;
+  margin: 0 5px;
+  border: 1px solid #007bff;
+  background-color: transparent;
+  color: #007bff;
+  border-radius: 5px;
+  cursor: pointer;
+
+  &:disabled {
+    color: #aaa;
+    border-color: #aaa;
+    cursor: not-allowed;
+  }
+`;
+
+const PageButton = styled(NavButton)<{ isActive: boolean }>`
+  font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')};
+  background-color: ${({ isActive }) => (isActive ? '#007bff' : 'transparent')};
+  color: ${({ isActive }) => (isActive ? '#fff' : '#007bff')};
+  cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')};
+`;
diff --git a/src/components/common/Select/hooks/useGlobalSelect.ts b/src/components/common/Select/hooks/useGlobalSelect.ts
index 41e22fc..e2b6ed7 100644
--- a/src/components/common/Select/hooks/useGlobalSelect.ts
+++ b/src/components/common/Select/hooks/useGlobalSelect.ts
@@ -13,7 +13,9 @@ const useGlobalSelect = (initialOption: SelectOptionType) => {
 
   const handleSelect = (option: SelectOptionType) => {
     setSelectedOption(option);
-    option.action();
+    if (option.action) {
+      option.action();
+    }
   };
 
   return {
diff --git a/src/components/common/Select/hooks/useSelect.ts b/src/components/common/Select/hooks/useSelect.ts
index be47d81..d4703f5 100644
--- a/src/components/common/Select/hooks/useSelect.ts
+++ b/src/components/common/Select/hooks/useSelect.ts
@@ -7,7 +7,9 @@ const useSelect = (defaultOption: SelectOptionType) => {
   const handleSelect = (option: SelectOptionType) => {
     if (option.value !== selectedOption.value) {
       setSelectedOption(option);
-      option.action();
+      if (option.action) {
+        option.action();
+      }
     }
   };
 
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 3d45851..e3cf315 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -11,4 +11,5 @@ export { default as Image } from './Image';
 export { default as Select } from './Select';
 export { default as AsyncBoundary } from './AsyncBoundary';
 export { default as Spinner } from './Spinner';
+export { default as Pagination } from './Pagination';
 export { Table, Th, Td } from './Table';
diff --git a/src/components/providers/Language.provider.tsx b/src/components/providers/Language.provider.tsx
new file mode 100644
index 0000000..6ae3ec8
--- /dev/null
+++ b/src/components/providers/Language.provider.tsx
@@ -0,0 +1,42 @@
+import { userLocalStorage } from '@/utils/storage';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+
+type LanguageContextType = {
+  language: string;
+  setLanguage: (language: string) => void;
+};
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+export const LanguageProvider = ({ children }: { children: ReactNode }) => {
+  const [language, setLanguage] = useState<string>(() => userLocalStorage.getLanguage() || 'korean');
+
+  useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === 'language') {
+        const newLanguage = event.newValue ? JSON.parse(event.newValue) : 'korean';
+        setLanguage(newLanguage);
+      }
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  const updateLanguage = (newLanguage: string) => {
+    userLocalStorage.setLanguage(newLanguage);
+    setLanguage(newLanguage);
+  };
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage: updateLanguage }}>{children}</LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (!context) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};
diff --git a/src/components/providers/User.provider.tsx b/src/components/providers/User.provider.tsx
new file mode 100644
index 0000000..2f9751f
--- /dev/null
+++ b/src/components/providers/User.provider.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+import { UserData } from '@/types';
+import { userLocalStorage } from '@/utils/storage';
+
+type UserContextType = {
+  user: UserData | undefined;
+  setUser: React.Dispatch<React.SetStateAction<UserData | undefined>>;
+};
+
+export const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export const UserProvider = ({ children }: { children: ReactNode }) => {
+  const [user, setUser] = useState<UserData | undefined>(() => userLocalStorage.getUser());
+
+  useEffect(() => {
+    const changeUser = () => {
+      const updatedUser = userLocalStorage.getUser();
+      setUser(updatedUser);
+    };
+
+    window.addEventListener('storage', changeUser);
+
+    return () => window.removeEventListener('storage', changeUser);
+  }, []);
+
+  return <UserContext.Provider value={{ user, setUser }}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+  const context = useContext(UserContext);
+  if (!context) {
+    throw new Error('useUser must be used within a UserProvider');
+  }
+  return context;
+};
diff --git a/src/components/providers/index.provider.tsx b/src/components/providers/index.provider.tsx
index 36597b8..e100ffa 100644
--- a/src/components/providers/index.provider.tsx
+++ b/src/components/providers/index.provider.tsx
@@ -4,15 +4,21 @@ import ModalsProvider from './Modals.provider';
 import Modals from '../common/Modal/Modals';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '@/apis/instance';
+import { UserProvider } from './User.provider';
+import { LanguageProvider } from './Language.provider';
 
 export default function AppProviders({ children }: { children: ReactNode }) {
   return (
     <GlobalStylesProvider>
       <QueryClientProvider client={queryClient}>
-        <ModalsProvider>
-          {children}
-          <Modals />
-        </ModalsProvider>
+        <LanguageProvider>
+          <ModalsProvider>
+            <UserProvider>
+              {children}
+              <Modals />
+            </UserProvider>
+          </ModalsProvider>
+        </LanguageProvider>
       </QueryClientProvider>
     </GlobalStylesProvider>
   );
diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx b/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx
deleted file mode 100644
index 2ba5352..0000000
--- a/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Button, Flex, List, Table, Td, Th } from '@/components/common';
-import { useState } from 'react';
-import ContractModal from '../ContractModal/ContractModal';
-import { ApplicantData } from '@/types';
-import { buttonGroupStyle, buttonsCellStyle, buttonStyle } from './ApplicantsTable.styles';
-
-type Props = {
-  applicantList: ApplicantData[];
-};
-
-export default function ApplicantsTable({ applicantList }: Props) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
-
-  const handleOpenModal = (userId: number) => {
-    setSelectedUserId(userId);
-    setIsModalOpen(true);
-  };
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-    setSelectedUserId(null);
-  };
-
-  return (
-    <>
-      <Table>
-        <thead>
-          <tr>
-            <Th>이름</Th>
-            <Th>국적</Th>
-            <Th>한국어 실력</Th>
-            <Th></Th>
-          </tr>
-        </thead>
-        <tbody>
-          <List
-            items={applicantList}
-            renderItem={(applicant) => (
-              <tr key={applicant.applyId}>
-                <Td>{applicant.name}</Td>
-                <Td>{applicant.applicantNation}</Td>
-                <Td>{applicant.korean}</Td>
-                <Td css={buttonsCellStyle}>
-                  <Flex justifyContent="flex-end" alignItems="center" gap={{ x: '20px' }} css={buttonGroupStyle}>
-                    <Button css={buttonStyle}>이력서</Button>
-                    <Button css={buttonStyle}>지원서</Button>
-                    <Button css={buttonStyle} onClick={() => handleOpenModal(applicant.userId)}>
-                      계약하기
-                    </Button>
-                  </Flex>
-                </Td>
-              </tr>
-            )}
-          />
-        </tbody>
-      </Table>
-      {selectedUserId && <ContractModal isOpen={isModalOpen} onClose={handleCloseModal} userId={selectedUserId} />}
-    </>
-  );
-}
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx b/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx
deleted file mode 100644
index 371e5a4..0000000
--- a/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { palettes } from '@/assets/styles/global/palettes';
-import { ForeignerData } from '@/types';
-import { Typo } from '@/components/common';
-import { headingStyle, paragraphStyle, titleStyle } from './ModalText.styles';
-
-type Props = Pick<ForeignerData, 'foreignerIdNumber' | 'visaGenerateDate'>;
-
-export default function ModalText({ foreignerIdNumber, visaGenerateDate }: Props) {
-  return (
-    <>
-      <Typo element="h3" size="18px" style={titleStyle}>
-        ✅ 고용주님께 드리는 주의사항
-      </Typo>
-      <Typo element="p" size="14px" style={paragraphStyle}>
-        불법 체류자를 고용할 시 최대 <strong>200만원</strong>의 범칙금이 부과될 수 있습니다.
-      </Typo>
-      <hr />
-      <Typo element="h4" size="14px" style={headingStyle}>
-        지원자 정보
-      </Typo>
-      <Typo element="p" size="14px" style={paragraphStyle}>
-        외국인 등록 번호 : <strong>{foreignerIdNumber}</strong>
-        <br />
-        비자 발급 일자 : <strong>{visaGenerateDate}</strong>
-        <br />
-        <br />이 지원자의 정보를 활용하여&nbsp;
-        <a
-          href="https://www.hikorea.go.kr/info/InfoFrnJobIdentityPageR.pt?locale=kr"
-          target="_blank"
-          style={{ color: `${palettes.blue}` }}
-          rel="noopener noreferrer"
-        >
-          하이코리아
-        </a>
-        에서 지원자에 대한
-        <br />
-        불법 체류 여부를 검증할 수 있습니다.
-        <br />
-        <br />
-        안전한 고용을 위해 확인 후 진행하는 것을 권장합니다.
-      </Typo>
-    </>
-  );
-}
diff --git a/src/features/auth/SignIn/components/SignInButton.tsx b/src/features/auth/SignIn/components/SignInButton.tsx
index 3e060ab..4e84bce 100644
--- a/src/features/auth/SignIn/components/SignInButton.tsx
+++ b/src/features/auth/SignIn/components/SignInButton.tsx
@@ -1,5 +1,5 @@
-import { useGoogleOAuth } from '@/apis/auth/mutations/useGoogleOAuth';
 import { Flex, Typo, Button, Icon } from '@components/common';
+import { useGoogleOAuth } from '../hooks/useGoogleOAuth';
 
 const FLEX_GAP_CONFIG = { x: '12px' };
 const BUTTON_STYLE = { fontWeight: '300' };
diff --git a/src/features/auth/SignIn/components/SignInText.tsx b/src/features/auth/SignIn/components/SignInText.tsx
index cdcfd42..dc4a19e 100644
--- a/src/features/auth/SignIn/components/SignInText.tsx
+++ b/src/features/auth/SignIn/components/SignInText.tsx
@@ -1,5 +1,6 @@
 import { Flex, Typo } from '@components/common';
 import { responsiveStyle } from '@utils/responsive';
+import { useTranslation } from 'react-i18next';
 
 const flexStyle = responsiveStyle({
   default: {
@@ -28,13 +29,15 @@ const paragraphTypoStyle = responsiveStyle({
 });
 
 export function SignInText() {
+  const { t } = useTranslation();
+
   return (
     <Flex direction="column" css={flexStyle}>
       <Typo element="h1" size="58px" bold style={headingTypoStyle}>
-        지금 바로 시작하세요. 🚀
+        {t('signIn.heading')}
       </Typo>
       <Typo element="p" size="18px" color="gray" style={paragraphTypoStyle}>
-        안정적이고 투명한 고용 관계의 시작, 지금 바로 경험해보세요!
+        {t('signIn.description')}
       </Typo>
     </Flex>
   );
diff --git a/src/features/auth/SignIn/hooks/useGoogleOAuth.ts b/src/features/auth/SignIn/hooks/useGoogleOAuth.ts
new file mode 100644
index 0000000..f42ac2a
--- /dev/null
+++ b/src/features/auth/SignIn/hooks/useGoogleOAuth.ts
@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
+import { useGoogleOAuthMutation } from '@/apis/auth/hooks/mutations/useGoogleOAuthMutation';
+import { OAuthResponse } from '@/apis/auth/types/response';
+
+const googleClientId = import.meta.env.VITE_GOOGLE_AUTH_CLIENT_ID;
+const googleRedirectUri = import.meta.env.VITE_GOOGLE_AUTH_REDIRECT_URI;
+
+const googleAuthUri = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${googleClientId}&redirect_uri=${googleRedirectUri}&response_type=code&scope=email%20profile`;
+
+const getAccessTokenFromUrl = () => {
+  const searchParams = new URLSearchParams(window.location.search);
+  return searchParams.get('code');
+};
+
+export function useGoogleOAuth() {
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const { mutate } = useGoogleOAuthMutation();
+
+  const redirectToGoogleLogin = useCallback(() => {
+    window.location.href = googleAuthUri;
+  }, []);
+
+  const handleLogin = useCallback(() => {
+    const token = getAccessTokenFromUrl();
+
+    if (token) {
+      setIsLoading(true);
+      mutate(
+        { code: token },
+        {
+          onSuccess: (data: OAuthResponse) => {
+            const { accessToken, type, profileImage, name } = data;
+            localStorage.setItem('token', accessToken);
+            localStorage.setItem('user', JSON.stringify({ profileImage, name, type }));
+
+            if (type === 'first') {
+              navigate(ROUTE_PATH.AUTH.SIGN_UP);
+            } else {
+              navigate(ROUTE_PATH.HOME);
+            }
+
+            window.location.reload();
+          },
+          onError: (error) => {
+            console.error('Error during login:', error);
+            alert('로그인에 실패했습니다. 다시 시도해주세요.');
+            setIsLoading(false);
+          },
+        },
+      );
+    }
+  }, [mutate, navigate]);
+
+  useEffect(() => {
+    handleLogin();
+  }, [handleLogin]);
+
+  return { isLoading, redirectToGoogleLogin };
+}
diff --git a/src/features/auth/SignUp/components/SignUpText.tsx b/src/features/auth/SignUp/components/SignUpText.tsx
index 9ae4c27..b517022 100644
--- a/src/features/auth/SignUp/components/SignUpText.tsx
+++ b/src/features/auth/SignUp/components/SignUpText.tsx
@@ -1,5 +1,6 @@
 import { Flex, Typo } from '@/components/common';
 import { responsiveStyle } from '@/utils/responsive';
+import { useTranslation } from 'react-i18next';
 
 const titleStyle = responsiveStyle({
   default: {
@@ -28,13 +29,14 @@ const descriptionTitle = responsiveStyle({
 });
 
 export default function SignUpText() {
+  const { t } = useTranslation();
   return (
     <Flex direction="column" justifyContent="center" alignItems="center">
       <Typo element="h1" size="24px" bold style={titleStyle}>
-        가입자 정보 선택
+        {t('signUp.heading')}
       </Typo>
       <Typo element="p" size="20px" color="gray" style={descriptionTitle}>
-        대상에 해당하는 가입자 정보를 선택해주세요.
+        {t('signUp.description')}
       </Typo>
     </Flex>
   );
diff --git a/src/features/auth/SignUp/components/common/RoleModal.tsx b/src/features/auth/SignUp/components/common/RoleModal.tsx
index 55ccaa0..f4252af 100644
--- a/src/features/auth/SignUp/components/common/RoleModal.tsx
+++ b/src/features/auth/SignUp/components/common/RoleModal.tsx
@@ -1,7 +1,8 @@
 import { Modal, Typo, Flex, Button } from '@components/common';
 import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
 
-const DEFAULT_CSS = { marginBottom: '12px' };
+const DEFAULT_CSS = { marginBottom: '12px', whiteSpace: 'pre-line' };
 const FLEX_GAP_CONFIG = { x: '16px' };
 
 type Props = {
@@ -11,28 +12,30 @@ type Props = {
 };
 
 export default function RoleModal({ content, onSubmit, onClose }: Props) {
+  const { t } = useTranslation();
+
   return (
     <Modal
       textChildren={
-        <Flex direction="column" alignItems="center">
+        <Flex justifyContent="center" direction="column" alignItems="center">
           <Typo element="strong" size="18px" bold style={DEFAULT_CSS}>
-            정보를 입력해주세요.
+            {t('signUpModal.common.requiredMessage')}
           </Typo>
           <Typo element="strong" size="18px" bold style={DEFAULT_CSS}>
             {content}
           </Typo>
           <Typo element="strong" size="18px">
-            * 추후 마이페이지에서 수정 할 수 있습니다.
+            {t('signUpModal.common.laterMessage')}
           </Typo>
         </Flex>
       }
       buttonChildren={
-        <Flex gap={FLEX_GAP_CONFIG}>
+        <Flex justifyContent="space-around" gap={FLEX_GAP_CONFIG}>
           <Button design="default" onClick={() => onSubmit()}>
-            등록할게요
+            {t('signUpModal.buttons.submit')}
           </Button>
           <Button design="outlined" onClick={() => onClose()}>
-            괜찮아요
+            {t('signUpModal.buttons.cancel')}
           </Button>
         </Flex>
       }
diff --git a/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx b/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx
index 463c935..33937b0 100644
--- a/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx
+++ b/src/features/auth/SignUp/components/common/RoleSelector/index.config.tsx
@@ -1,8 +1,9 @@
-import { responsiveStyle } from '@utils/responsive';
 import { Icon } from '@components/common';
 import ROUTE_PATH from '@/routes/path';
+import { responsiveStyle } from '@utils/responsive';
+import { TFunction } from 'i18next';
 
-export const roleConfig = {
+export const getRoleConfig = (t: TFunction) => ({
   employer: {
     icon: (
       <Icon.Role.Employer
@@ -13,15 +14,9 @@ export const roleConfig = {
         })}
       />
     ),
-    text: '사업주 가입',
-    modalContent: (
-      <>
-        이력서에 대한 정보가 필요해요.
-        <br />
-        이력서 정보를 등록하러 가실까요?
-      </>
-    ),
-    toNavigate: ROUTE_PATH.HOME, // 이력서 등록 페이지로 변경
+    text: t('signUp.buttons.employer'),
+    modalContent: <>{t('signUpModal.detailMessage.employer')}</>,
+    toNavigate: ROUTE_PATH.REGISTERCOMPANY,
   },
   employee: {
     icon: (
@@ -33,14 +28,8 @@ export const roleConfig = {
         })}
       />
     ),
-    text: '근로자 가입',
-    modalContent: (
-      <>
-        사업장에 대한 정보가 필요해요.
-        <br />
-        사업주 정보를 등록하러 가실까요?
-      </>
-    ),
-    toNavigate: ROUTE_PATH.HOME, // 회사 등록 페이지로 변경
+    text: t('signUp.buttons.employee'),
+    modalContent: <>{t('signUpModal.detailMessage.employee')}</>,
+    toNavigate: ROUTE_PATH.RESUME,
   },
-};
+});
diff --git a/src/features/auth/SignUp/components/common/RoleSelector/index.tsx b/src/features/auth/SignUp/components/common/RoleSelector/index.tsx
index e13b54f..575edd4 100644
--- a/src/features/auth/SignUp/components/common/RoleSelector/index.tsx
+++ b/src/features/auth/SignUp/components/common/RoleSelector/index.tsx
@@ -1,12 +1,13 @@
 import { Card, Flex, Typo } from '@components/common';
-import { roleConfig } from './index.config';
+import { getRoleConfig } from './index.config';
 import { bounceAnimation } from '@assets/styles/animations';
 import { responsiveStyle } from '@utils/responsive';
 import useModals from '@components/common/Modal/hooks/useModals';
 import { modals } from '@/components/common/Modal/Modals';
-import { useRegister } from '@/apis/auth/mutations/useRegister';
+import { useRegisterMutation } from '@/apis/auth/hooks/mutations/useRegisterMutation';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
 
 const cardStyle = responsiveStyle({
   default: { padding: '60px 120px', cursor: 'pointer' },
@@ -25,11 +26,14 @@ type Props = {
 };
 
 export default function RoleSelector({ role }: Props) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const { openModal } = useModals();
-  const { mutate } = useRegister();
+  const { mutate } = useRegisterMutation();
+  const roleConfig = getRoleConfig(t);
 
   const handleRegister = () => {
+    handleOpenModal();
     mutate(
       { type: role },
       {
diff --git a/src/features/employee/myPage/EmployeeProfile.tsx b/src/features/employee/myPage/EmployeeProfile.tsx
index 3805f0a..8d5cca7 100644
--- a/src/features/employee/myPage/EmployeeProfile.tsx
+++ b/src/features/employee/myPage/EmployeeProfile.tsx
@@ -1,11 +1,11 @@
-import { Card, Image, Typo, Button } from '@/components/common';
+import { Card, Image, Typo } from '@/components/common';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 
 export default function EmployeeProfile({
   profileImage = 'https://img.freepik.com/free-photo/user-profile-icon-front-side-with-white-background_187299-40010.jpg?t=st=1729752570~exp=1729756170~hmac=4313719023c412dd92883d97ce79956fadf541e11d8cc3a4ef05150f301f5e7f&w=740',
-  name = '홍길동',
-  description = '소개합니당',
 }) {
+  const { t } = useTranslation();
   return (
     <Card
       style={{
@@ -32,18 +32,10 @@ export default function EmployeeProfile({
         />
         <TextSection>
           <Typo bold color="white" size="20px">
-            {name}
-          </Typo>
-          <Typo color="white" size="16px">
-            {description}
+            {t('employeeMyPage.GREETING')}
           </Typo>
         </TextSection>
       </ProfileSection>
-      <Button
-        style={{ width: '150px', height: '40px', backgroundColor: 'white', fontSize: '12px', padding: '10px 30px' }}
-      >
-        프로필 수정하기
-      </Button>
     </Card>
   );
 }
diff --git a/src/features/employee/myPage/MyRecruitCard.tsx b/src/features/employee/myPage/MyRecruitCard.tsx
index 0f4786e..1fbe36d 100644
--- a/src/features/employee/myPage/MyRecruitCard.tsx
+++ b/src/features/employee/myPage/MyRecruitCard.tsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { MyRecruitListProps, StateProps, TextProps } from '@/types';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useGetContractImg } from '@/apis/contract/hooks/useGetContractImg';
 
 type DesignProps = {
   design: 'default' | 'outlined' | 'textbutton' | 'deactivate';
@@ -18,7 +19,7 @@ function getStateStyle(state: StateProps): DesignProps {
     case 'Waiting':
       return { design: 'outlined', text: '지원서 검토중' };
     case 'Completed':
-      return { design: 'deactivate', text: '채용 완료' };
+      return { design: 'outlined', text: '근로계약서 다운로드' };
     default:
       return { design: 'deactivate' }; // 상태가 정의되지 않은 경우
   }
@@ -28,10 +29,26 @@ type Props = {
   myRecruit: MyRecruitListProps;
 };
 
+type DownloadContractProps = {
+  imageUrl: string;
+  imageUrlV: string;
+};
+
 export default function MyRecruitCard({ myRecruit }: Props) {
   const { image, title, area, state, applyId } = myRecruit;
   const buttonStyle = getStateStyle(state);
   const navigate = useNavigate();
+  // 근로계약서 이미지 다운로드
+  const downloadContract = () => {
+    const { data: imgURLs } = useGetContractImg(applyId);
+    const imgData: DownloadContractProps = imgURLs;
+    const link = document.createElement('a');
+    link.href = imgData.imageUrlV;
+    link.download = 'downloaded_image';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
 
   return (
     <Card
@@ -66,6 +83,8 @@ export default function MyRecruitCard({ myRecruit }: Props) {
         onClick={() => {
           if (state == 'LetsSign') {
             navigate(ROUTE_PATH.CONTRACT.EMPLOYEE.replace(':applyId', applyId.toString()));
+          } else if (state == 'Completed') {
+            downloadContract();
           }
         }}
       >
diff --git a/src/features/home/components/ConditionalRenderer.tsx b/src/features/home/components/ConditionalRenderer.tsx
index dd9f460..d547467 100644
--- a/src/features/home/components/ConditionalRenderer.tsx
+++ b/src/features/home/components/ConditionalRenderer.tsx
@@ -1,8 +1,11 @@
+import { userLocalStorage } from '@/utils/storage';
 import Employer from './Employer';
 import Worker from './Worker';
 
 export default function ConditionalRenderer() {
-  if (localStorage.getItem('userType') === 'employee') {
+  const userType = userLocalStorage.getUser()?.type;
+
+  if (userType === 'employee') {
     return <Worker />;
   }
   return <Employer />;
diff --git a/src/features/home/components/Employer.tsx b/src/features/home/components/Employer.tsx
index 89b4622..c373d45 100644
--- a/src/features/home/components/Employer.tsx
+++ b/src/features/home/components/Employer.tsx
@@ -1,6 +1,9 @@
 import { Flex, Typo, Button } from '@/components/common';
 import Banner from './common/Banner';
 import { responsiveStyle } from '@utils/responsive';
+import { useTranslation } from 'react-i18next';
+import ROUTE_PATH from '@/routes/path';
+import { useNavigate } from 'react-router-dom';
 
 const defaultImage = [
   { id: 1, imageUrl: 'https://www.v-on.kr/wp-content/uploads/2022/06/IT_twi001t2302755-1024x683.jpg' },
@@ -23,13 +26,18 @@ const headerStyle = responsiveStyle({
 });
 
 export default function Employer() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
   return (
     <Banner images={defaultImage}>
       <Flex direction="column" justifyContent="center" alignItems="center">
         <Typo element="h1" size="48px" color="white" bold style={headerStyle}>
-          {`사장님,\n 공고 등록은 하셨나요? 🤔`}
+          {t('home.greeting.heading')}
         </Typo>
-        <Button design="textbutton">등록하러 가기</Button>
+        <Button design="textbutton" onClick={() => navigate(ROUTE_PATH.REGISTERCOMPANY)}>
+          {t('home.greeting.button')}
+        </Button>
       </Flex>
     </Banner>
   );
diff --git a/src/features/home/components/Worker.tsx b/src/features/home/components/Worker.tsx
index 16418f3..0579a42 100644
--- a/src/features/home/components/Worker.tsx
+++ b/src/features/home/components/Worker.tsx
@@ -1,5 +1,5 @@
 import Banner from './common/Banner';
-import { useFetchSlides } from '@/apis/home/queries/useFetchSlides';
+import { useFetchSlides } from '@/apis/home/hooks/queries/useFetchSlides';
 
 export default function Worker() {
   const { data: images } = useFetchSlides();
diff --git a/src/features/home/components/common/RecruitmentFilter.tsx b/src/features/home/components/common/RecruitmentFilter.tsx
index 300b652..33afa1d 100644
--- a/src/features/home/components/common/RecruitmentFilter.tsx
+++ b/src/features/home/components/common/RecruitmentFilter.tsx
@@ -1,30 +1,42 @@
 import theme from '@/assets/theme';
 import { Select, Icon, List } from '@/components/common';
 import useSelect from '@/components/common/Select/hooks/useSelect';
-
-const filterOptions = [
-  {
-    value: 'all',
-    text: '전체',
-    action: () => console.log('All clicked'),
-  },
-  {
-    value: 'age',
-    text: '나이',
-    action: () => console.log('Age clicked'),
-  },
-  {
-    value: 'area',
-    text: '지역',
-    action: () => console.log('Area clicked'),
-  },
-];
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 const triggerStyle = { minWidth: '80px', fontSize: '16px', fontWeight: '700', color: theme.palettes.blue };
 
-export default function RecruitmentFilter() {
+type Props = {
+  onFilterChange: (option: string) => void;
+};
+
+export default function RecruitmentFilter({ onFilterChange }: Props) {
+  const { t } = useTranslation();
+
+  const filterOptions = useMemo(
+    () => [
+      {
+        value: 'all',
+        text: t('home.recruitmentFilter.all'),
+      },
+      {
+        value: 'salary',
+        text: t('home.recruitmentFilter.salary'),
+      },
+      {
+        value: 'latestRegistration',
+        text: t('home.recruitmentFilter.latestRegistration'),
+      },
+    ],
+    [t],
+  );
   const { selectedOption, handleSelect } = useSelect(filterOptions[0]);
 
+  const handleOptionSelect = (option: { value: string; text: string }) => {
+    handleSelect(option);
+    onFilterChange(option.value);
+  };
+
   return (
     <Select.Root>
       <Select.Trigger icon={<Icon.Arrow.DownBlue />} css={triggerStyle}>
@@ -34,7 +46,7 @@ export default function RecruitmentFilter() {
         <List
           items={filterOptions}
           renderItem={(option) => (
-            <Select.Option key={option.value} value={option.value} onClick={() => handleSelect(option)}>
+            <Select.Option key={option.value} value={option.value} onClick={() => handleOptionSelect(option)}>
               {option.text}
             </Select.Option>
           )}
diff --git a/src/features/home/components/common/RecruitmentHeader/index.tsx b/src/features/home/components/common/RecruitmentHeader/index.tsx
index f07a692..da5bcd3 100644
--- a/src/features/home/components/common/RecruitmentHeader/index.tsx
+++ b/src/features/home/components/common/RecruitmentHeader/index.tsx
@@ -1,15 +1,18 @@
 import { Flex, Typo } from '@components/common';
 import { flexStyle, divStyle, headerTypoStyle, subheaderTypoStyle } from './index.styles';
+import { useTranslation } from 'react-i18next';
 
 export default function RecruitmentHeader() {
+  const { t } = useTranslation();
+
   return (
     <Flex justifyContent="space-between" alignItems="center" css={flexStyle}>
       <div css={divStyle}>
         <Typo element="h1" size="38px" bold style={headerTypoStyle}>
-          어떤 일자리를 구하시나요?
+          {t('home.recruitmentHeader.heading')}
         </Typo>
         <Typo element="span" color="gray" size="24px" style={subheaderTypoStyle}>
-          조건을 선택하고 원하는 일자리를 골라보세요.
+          {t('home.recruitmentHeader.description')}
         </Typo>
       </div>
     </Flex>
diff --git a/src/features/home/components/common/RecruitmentList.tsx b/src/features/home/components/common/RecruitmentList.tsx
index bf0243f..18df728 100644
--- a/src/features/home/components/common/RecruitmentList.tsx
+++ b/src/features/home/components/common/RecruitmentList.tsx
@@ -1,7 +1,7 @@
 import { List, Flex, Spinner, AsyncBoundary } from '@/components/common';
 import RecruitmentCard from './RecruitmentCard';
 import { responsiveStyle } from '@utils/responsive';
-import { useFetchRecruitments } from '@/apis/home/queries/useFetchRecruitments';
+import { RecruitmentResponse } from '@/apis/home/types/response';
 
 const listContainerStyle = responsiveStyle({
   default: {
@@ -15,9 +15,11 @@ const listContainerStyle = responsiveStyle({
   },
 });
 
-export default function RecruitmentList() {
-  const { data: recruitmentList } = useFetchRecruitments();
+type Props = {
+  recruitmentList: RecruitmentResponse[];
+};
 
+export default function RecruitmentList({ recruitmentList }: Props) {
   return (
     <AsyncBoundary pendingFallback={<Spinner />}>
       <Flex justifyContent="center" alignItems="center" wrap css={listContainerStyle}>
diff --git a/src/features/home/hooks/useRecruitmentData.ts b/src/features/home/hooks/useRecruitmentData.ts
new file mode 100644
index 0000000..c182132
--- /dev/null
+++ b/src/features/home/hooks/useRecruitmentData.ts
@@ -0,0 +1,28 @@
+import { useFetchRecruitments } from '@/apis/home/hooks/queries/useFetchRecruitments';
+import { useState } from 'react';
+
+export function useRecruitmentData(initialFilter = 'all', initialPage = 1) {
+  const [filter, setFilter] = useState(initialFilter);
+  const [page, setPage] = useState(initialPage);
+  const [totalPages, setTotalPages] = useState(5);
+
+  const { data: recruitmentList } = useFetchRecruitments(filter, page);
+
+  const handleFilterChange = (selectedFilter: string) => {
+    setFilter(selectedFilter);
+    setPage(1);
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  return {
+    recruitmentList,
+    page,
+    totalPages,
+    setTotalPages,
+    handleFilterChange,
+    handlePageChange,
+  };
+}
diff --git a/src/features/layout/Footer/index.tsx b/src/features/layout/Footer/index.tsx
index 26a9841..f306c0a 100644
--- a/src/features/layout/Footer/index.tsx
+++ b/src/features/layout/Footer/index.tsx
@@ -1,21 +1,23 @@
 import { Icon } from '@components/common';
 import styled from '@emotion/styled';
 import Logo from '@assets/images/hirehigher-logo.svg?react';
+import { useTranslation } from 'react-i18next';
 
 const Footer = () => {
+  const { t } = useTranslation();
   return (
     <Container>
       <Wrapper>
         <Content>
           <Logo />
           <Gap height="24px" />
-          <p>(주)Hire Higher 임OO</p>
-          <p>대전광역시 유성구 궁동</p>
-          <p>전화번호: 042-821-5114</p>
+          <p>{t('footer.info_1')}</p>
+          <p>{t('footer.info_2')}</p>
+          <p>{t('footer.info_3')}</p>
           <Gap height="12px" />
-          <p>사업자등록번호: 111-11-00000</p>
-          <p>통신판매번호: 2024-대전유성-3147</p>
-          <p>유료직업소개사업등록번호: (국내) 제2024-1111111-11-1-00011호</p>
+          <p>{t('footer.info_4')}</p>
+          <p>{t('footer.info_5')}</p>
+          <p>{t('footer.info_6')}</p>
         </Content>
       </Wrapper>
       <Gap border="0.1px solid #767f8c;" />
diff --git a/src/features/layout/Header/components/LanguageFilter.tsx b/src/features/layout/Header/components/LanguageFilter.tsx
index 681d921..b440766 100644
--- a/src/features/layout/Header/components/LanguageFilter.tsx
+++ b/src/features/layout/Header/components/LanguageFilter.tsx
@@ -1,7 +1,13 @@
 import theme from '@/assets/theme';
 import { Select, Icon, List } from '@/components/common';
-import useGlobalSelect from '@/components/common/Select/hooks/useGlobalSelect';
+import { useLanguage } from '@/components/providers/Language.provider';
 import { responsiveStyle } from '@/utils/responsive';
+import i18n from '@/assets/translator/i18n';
+
+type LanguageOptionType = {
+  value: string;
+  text: string;
+};
 
 const triggerStyle = {
   minWidth: '80px',
@@ -18,30 +24,35 @@ const triggerStyle = {
 
 const languageOptions = [
   {
-    value: 'korean',
+    value: 'ko',
     text: '한국어',
     action: () => console.log('한국어'),
   },
   {
-    value: 'vietnamese',
-    text: '베트남어',
-    action: () => console.log('베트남어'),
+    value: 've',
+    text: 'Tiếng Việt',
+    action: () => console.log('Tiếng Việt'),
   },
 ];
 
 export default function LanguageFilter() {
-  const { selectedOption, handleSelect } = useGlobalSelect(languageOptions[0]);
+  const { language, setLanguage } = useLanguage();
+
+  const changeLanguage = (option: LanguageOptionType) => {
+    setLanguage(option.value);
+    i18n.changeLanguage(option.value);
+  };
 
   return (
     <Select.Root>
       <Select.Trigger icon={<Icon.Arrow.DownBlue />} css={triggerStyle}>
-        {selectedOption.text}
+        {languageOptions.find((opt) => opt.value === language)?.text}
       </Select.Trigger>
       <Select.Content>
         <List
           items={languageOptions}
           renderItem={(option) => (
-            <Select.Option key={option.value} value={option.value} onClick={() => handleSelect(option)}>
+            <Select.Option key={option.value} value={option.value} onClick={() => changeLanguage(option)}>
               {option.text}
             </Select.Option>
           )}
diff --git a/src/features/layout/Header/index.styles.ts b/src/features/layout/Header/index.styles.ts
index f96922c..f2ecfad 100644
--- a/src/features/layout/Header/index.styles.ts
+++ b/src/features/layout/Header/index.styles.ts
@@ -74,11 +74,12 @@ export const Nav = styled.nav<NavProps>`
 
   ${responsiveStyle({
     tablet: {
-      width: '100%',
+      width: '80%',
       justifyContent: 'center',
       marginTop: '10px',
     },
     mobile: {
+      width: '100%',
       flexDirection: 'column',
       alignItems: 'stretch',
       textAlign: 'center',
diff --git a/src/features/layout/Header/index.tsx b/src/features/layout/Header/index.tsx
index f9b6326..abd373d 100644
--- a/src/features/layout/Header/index.tsx
+++ b/src/features/layout/Header/index.tsx
@@ -14,46 +14,41 @@ import {
   menuIconStyle,
   Nav,
 } from './index.styles';
-import { UserData } from '@/types';
-import { startTransition, useEffect, useState } from 'react';
+import { startTransition } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useUser } from '@/components/providers/User.provider';
+import { userLocalStorage } from '@/utils/storage';
+import { useTranslation } from 'react-i18next';
 
 export default function Header() {
   const navigate = useNavigate();
   const [menuOpen, toggleMenu] = useToggle();
-  const [user, setUser] = useState<UserData | null>(null);
+  const { user, setUser } = useUser();
+  const { t } = useTranslation();
 
-  useEffect(() => {
-    const userData = localStorage.getItem('user');
-
-    if (userData) {
-      setUser(JSON.parse(userData));
-    }
-  }, []);
-
-  const handleLogoClick = () => {
+  const goToHome = () => {
     startTransition(() => {
       navigate(ROUTE_PATH.HOME);
     });
   };
 
-  const handleLogin = () => {
+  const login = () => {
     navigate(ROUTE_PATH.AUTH.SIGN_IN);
   };
 
-  const handleLogout = () => {
-    localStorage.removeItem('token');
-    localStorage.removeItem('user');
-    setUser(null);
+  const logout = () => {
+    userLocalStorage.removeToken();
+    userLocalStorage.removeUser();
+    setUser(undefined);
     navigate(ROUTE_PATH.HOME);
   };
 
-  const handlePostNotice = () => {
+  const goToPostNotice = () => {
     navigate(ROUTE_PATH.POST_NOTICE);
   };
 
-  const handleProfileClick = () => {
+  const goToMyPage = () => {
     if (user?.type === 'employer') {
       navigate(ROUTE_PATH.MY_PAGE.EMPLOYER);
     } else if (user?.type === 'employee') {
@@ -64,28 +59,28 @@ export default function Header() {
   return (
     <HeaderContainer>
       <Flex justifyContent="space-between" alignItems="center" css={flexStyle}>
-        <LogoImg onClick={handleLogoClick} />
+        <LogoImg onClick={goToHome} />
         <Flex justifyContent="flex-end" css={menuIconStyle} onClick={toggleMenu}>
           {menuOpen ? <CloseIcon /> : <MenuIcon />}
         </Flex>
         <Nav open={menuOpen}>
           <LanguageFilter />
           {!user ? (
-            <Button style={customButtonStyle} onClick={handleLogin}>
-              로그인
+            <Button style={customButtonStyle} onClick={login}>
+              {t('header.login')}
             </Button>
           ) : (
             <>
               {user.type === 'employer' && (
-                <Button design="outlined" style={commonButtonStyle} onClick={handlePostNotice}>
-                  채용공고 등록
+                <Button design="outlined" style={commonButtonStyle} onClick={goToPostNotice}>
+                  {t('header.post_notice')}
                 </Button>
               )}
-              <Flex justifyContent="center" alignItems="center" onClick={handleProfileClick}>
+              <Flex justifyContent="center" alignItems="center" onClick={goToMyPage}>
                 <Image url={user.profileImage} size={{ width: '40px', height: '40px' }} css={imageStyle} />
               </Flex>
-              <Button style={customButtonStyle} onClick={handleLogout}>
-                로그아웃
+              <Button style={customButtonStyle} onClick={logout}>
+                {t('header.logout')}
               </Button>
             </>
           )}
diff --git a/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx b/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx
deleted file mode 100644
index 714a460..0000000
--- a/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Button, Flex, List, Table, Td, Th, Typo } from '@/components/common';
-import { RecruitmentItem } from '@/types';
-import { buttonGroupStyle, buttonStyle, recruitmentStyle, recruitmentTitleStyle } from './RecruitmentsTable.styles';
-import { useNavigate, useParams } from 'react-router-dom';
-import ROUTE_PATH from '@/routes/path';
-
-type Props = {
-  recruitmentList: RecruitmentItem[];
-};
-
-export default function RecruitmentsTable({ recruitmentList }: Props) {
-  const navigate = useNavigate();
-  const { companyId } = useParams();
-
-  const handleApplicantClick = (companyId: string, recruitmentId: number) => {
-    navigate(
-      ROUTE_PATH.APPLICANTS.replace(':companyId', companyId).replace(':recruitmentId', recruitmentId.toString()),
-    );
-  };
-
-  return (
-    <Table>
-      <thead>
-        <tr>
-          <Th>근무지</Th>
-          <Th>공고 제목</Th>
-        </tr>
-      </thead>
-      <tbody>
-        <List
-          items={recruitmentList}
-          renderItem={(recruitment) => (
-            <tr key={recruitment.recruitmentId}>
-              <Td>{recruitment.area}</Td>
-              <Td>
-                <Flex css={recruitmentStyle}>
-                  <Flex direction="column" justifyContent="center" gap={{ y: '5px' }}>
-                    <Typo size="16px" style={recruitmentTitleStyle}>
-                      {recruitment.companyName}
-                    </Typo>
-                    <Typo element="p" size="16px">
-                      {recruitment.koreanTitle}
-                    </Typo>
-                  </Flex>
-                  <Flex css={buttonGroupStyle}>
-                    <Button
-                      css={buttonStyle}
-                      onClick={() => handleApplicantClick(companyId!, recruitment.recruitmentId)}
-                    >
-                      지원자 보러가기
-                    </Button>
-                    <Button css={buttonStyle}>마감하기</Button>
-                  </Flex>
-                </Flex>
-              </Td>
-            </tr>
-          )}
-        />
-      </tbody>
-    </Table>
-  );
-}
diff --git a/src/features/registerVisa/VisaRegistrationForm.tsx b/src/features/registerVisa/VisaRegistrationForm.tsx
index 1aab67d..43999c7 100644
--- a/src/features/registerVisa/VisaRegistrationForm.tsx
+++ b/src/features/registerVisa/VisaRegistrationForm.tsx
@@ -1,8 +1,9 @@
 import { Button, Flex, Input, Modal } from '@/components/common';
 import { ChangeEvent, useMemo, useState } from 'react';
 import { useRegisterVisaInfo } from '@/apis/applicants/hooks/useRegisterVisaInfo';
-import { buttonStyle, ErrorMessage, Form, inputStyle } from './index.styles';
+import { buttonStyle, ErrorMessage, Form, inputStyle } from './VisaRegistrationForm.styles';
 import { validateForeignerNumber } from './validateForeignerNumber';
+import { useTranslation } from 'react-i18next';
 
 export default function VisaRegistrationForm() {
   const [foreignerIdNumber, setForeignerNumber] = useState('');
@@ -12,11 +13,12 @@ export default function VisaRegistrationForm() {
   const formValid = useMemo(() => !error, [error]);
 
   const registerVisaMutation = useRegisterVisaInfo();
+  const { t } = useTranslation();
 
   const handleForeignerNumberChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { value } = e.target;
     if (!validateForeignerNumber(value) && value !== '') {
-      setError('올바른 형식으로 입력해주세요. (형식: 000000-0000000)');
+      setError(t('registerVisa.error_message'));
     } else {
       setError('');
     }
@@ -49,7 +51,7 @@ export default function VisaRegistrationForm() {
       <Form onSubmit={handleSubmit}>
         <Flex direction="column" gap={{ y: '10px' }}>
           <Input
-            label="외국인 번호"
+            label={t('registerVisa.labels.foreigner_number')}
             type="text"
             value={foreignerIdNumber}
             onChange={handleForeignerNumberChange}
@@ -60,7 +62,7 @@ export default function VisaRegistrationForm() {
         </Flex>
         <Flex direction="column" gap={{ y: '10px' }}>
           <Input
-            label="비자 발급 일자"
+            label={t('registerVisa.labels.visa_generate_date')}
             type="date"
             value={visaGenerateDate}
             onChange={(e) => setVisaGenerateDate(e.target.value)}
@@ -70,15 +72,14 @@ export default function VisaRegistrationForm() {
         </Flex>
         <Flex justifyContent="center">
           <Button type="submit" css={buttonStyle} disabled={!formValid}>
-            등록하기
+            {t('registerVisa.submit')}
           </Button>
         </Flex>
       </Form>
       {isModalOpen && (
         <Modal
-          textChildren="등록이 완료되었습니다."
-          buttonChildren={<Button onClick={closeModal}>확인</Button>}
-          /* onClose 부분 추후 수정 예정 */
+          textChildren={t('registerVisa.complete_message')}
+          buttonChildren={<Button onClick={closeModal}>{t('registerVisa.button')}</Button>}
           onClose={closeModal}
         />
       )}
diff --git a/src/main.tsx b/src/main.tsx
index cd82fd2..e5c0112 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,10 @@ import { RouterProvider } from 'react-router-dom';
 import { router } from './routes/router.tsx';
 import { setupMockServiceWorker } from './mocks/setupMockServiceWorker.ts';
 
-setupMockServiceWorker();
+async function initializeApp() {
+  await setupMockServiceWorker();
 
-createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);
+  createRoot(document.getElementById('root')!).render(<RouterProvider router={router} />);
+}
+
+initializeApp();
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index ca57b72..7ddb0fc 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -9,9 +9,13 @@ import { myApplicantsMockHandler } from '@/apis/applicants/mocks/myApplicantsMoc
 import { foreignerMockHandler } from '@/apis/applicants/mocks/foreignerMockHandler';
 import { visaMockHandler } from '@/apis/applicants/mocks/visaMockHandler';
 import { postApplyMockHandler } from '@apis/apply/postApply.mock';
-import { recruitmentsDetailMockHandler } from '@apis/recruitmentsDetail/recruitmentsDetailMockHandler';
-import { registerCompanyMockHandler } from '@/apis/registerCompany/registerCompany.mock';
+import { recruitmentsDetailMockHandler } from '@/apis/recruitmentsDetail/mock/recruitmentsDetailMockHandler';
+import { registerCompanyMockHandler } from '@/apis/registerCompany/mocks/registerCompany.mock';
 import { contractsMockHandler } from '@/apis/contract/mock/contract.mock';
+import { getProfileInfoHandler } from '@/apis/applicants/mocks/getApplicantProfile';
+import { closeRecruitmentMockHandler } from '@/apis/recruitments/mocks/closeRecruitmentMockHandler';
+import { requiredFieldCheckMockHandler } from '@/apis/recruitmentsDetail/mock/requiredFieldCheckHandler';
+import { postResumeMockHandler } from '@/apis/resume/postResume.mock';
 
 export const handlers = [
   ...recruitmentsMockHandler,
@@ -28,4 +32,8 @@ export const handlers = [
   ...recruitmentsDetailMockHandler,
   ...registerCompanyMockHandler,
   ...contractsMockHandler,
+  ...getProfileInfoHandler,
+  ...closeRecruitmentMockHandler,
+  ...requiredFieldCheckMockHandler,
+  ...postResumeMockHandler,
 ];
diff --git a/src/pages/applicants/Applicants.tsx b/src/pages/applicants/Applicants.tsx
deleted file mode 100644
index 3a9ae1a..0000000
--- a/src/pages/applicants/Applicants.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Flex, InnerContainer, Spinner } from '@/components/common';
-import ApplicantList from '@/features/applicants/ApplicantList/ApplicantList';
-import RecruitmentsInfo from '@/features/recruitments/RecruitmentInfo/RecruitmentInfo';
-import Layout from '@/features/layout';
-import styled from '@emotion/styled';
-import { useGetMyRecruitments } from '@/apis/recruitments/hooks/useGetMyRecruitments';
-import { useParams } from 'react-router-dom';
-import { useGetMyApplicants } from '@/apis/applicants/hooks/useGetMyApplicants';
-import { ApplicantData, RecruitmentItem } from '@/types';
-import { spinnerFlexStyle } from './Applicants.styles';
-
-interface MyApplicantProps {
-  recruitment?: RecruitmentItem;
-  applicantList?: ApplicantData[];
-}
-
-export default function Applicants({ recruitment, applicantList }: MyApplicantProps) {
-  const { companyId, recruitmentId } = useParams();
-  const { data: recruitmentList } = useGetMyRecruitments(Number(companyId));
-  const { data: applicants, isLoading } = useGetMyApplicants(Number(recruitmentId));
-
-  const recruitmentData =
-    recruitment || recruitmentList?.find((r: RecruitmentItem) => r.recruitmentId.toString() === recruitmentId);
-  const applicantsData = applicantList || applicants;
-
-  return (
-    <Layout>
-      <MainContainer>
-        <InnerContainer>
-          <Flex direction="column" gap={{ y: '60px' }} css={{ position: 'relative', minHeight: '600px' }}>
-            <RecruitmentsInfo
-              image={recruitmentData.image}
-              companyName={recruitmentData.companyName}
-              koreanTitle={recruitmentData.koreanTitle}
-              area={recruitmentData.area}
-              salary={recruitmentData.salary}
-            />
-            {isLoading ? (
-              <Flex justifyContent="center" alignItems="center" css={spinnerFlexStyle}>
-                <Spinner />
-              </Flex>
-            ) : (
-              applicantsData && <ApplicantList applicantList={applicantsData} />
-            )}
-          </Flex>
-        </InnerContainer>
-      </MainContainer>
-    </Layout>
-  );
-}
-
-const MainContainer = styled.div`
-  padding: 40px 0 80px 0;
-`;
diff --git a/src/pages/applicantsPage/ApplicantList/ApplicantProfile.tsx b/src/pages/applicantsPage/ApplicantList/ApplicantProfile.tsx
new file mode 100644
index 0000000..efb1f66
--- /dev/null
+++ b/src/pages/applicantsPage/ApplicantList/ApplicantProfile.tsx
@@ -0,0 +1,60 @@
+import { useGetProfileInfo } from '@/apis/applicants/hooks/useGetProfileInfo';
+import { Flex, Typo } from '@/components/common';
+import styled from '@emotion/styled';
+import { Spinner } from '@/components/common';
+
+type ProfileInfoProps = {
+  title: string;
+  content: string;
+};
+function ProfileInfo({ title, content }: ProfileInfoProps) {
+  return (
+    <>
+      <Flex>
+        <Flex direction="column" gap={{ y: '20px' }}>
+          <Typo bold={true}>{title}</Typo>
+          <Typo>{content}</Typo>
+        </Flex>
+      </Flex>
+      <Divider />
+    </>
+  );
+}
+
+export default function ApplicantProfile({ resumeId, applyId }: { resumeId: number; applyId: number }) {
+  const { data, isLoading } = useGetProfileInfo({ resumeId, applyId });
+
+  if (isLoading) {
+    return <Spinner />;
+  }
+  return (
+    <Flex css={{ padding: '10px', width: '100%' }} direction="column">
+      <Typo bold={true} size="18px">
+        {data.applicantName}님의 지원서입니다.
+      </Typo>
+      <Flex gap={{ x: '10px' }} css={{ marginTop: '20px' }}>
+        <Flex direction="column" gap={{ y: '5px' }} css={{ flex: 2 }}>
+          <Typo>연락처</Typo>
+          <Typo>주소</Typo>
+        </Flex>
+        <Flex direction="column" gap={{ y: '5px' }} css={{ flex: 8 }}>
+          <Typo>{data.phoneNumber}</Typo>
+          <Typo>{data.address}</Typo>
+        </Flex>
+      </Flex>
+      <Divider />
+      <ProfileInfo title="한국어 실력" content={data.koreanLanguageLevel} />
+      <ProfileInfo title="경력" content={data.career} />
+      <ProfileInfo title="자기소개서" content={data.introduction} />
+      <ProfileInfo title="지원동기" content={data.motivation} />
+    </Flex>
+  );
+}
+
+const Divider = styled.div`
+  width: 100%;
+  height: 1px;
+  opacity: 0.7;
+  margin: 20px 0;
+  background-color: #e9e9e9;
+`;
diff --git a/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.styles.ts b/src/pages/applicantsPage/ApplicantList/ApplicantsTable.styles.ts
similarity index 89%
rename from src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.styles.ts
rename to src/pages/applicantsPage/ApplicantList/ApplicantsTable.styles.ts
index 41faa55..2b3202c 100644
--- a/src/features/applicants/ApplicantList/ApplicantsTable/ApplicantsTable.styles.ts
+++ b/src/pages/applicantsPage/ApplicantList/ApplicantsTable.styles.ts
@@ -4,14 +4,11 @@ import { css } from '@emotion/react';
 export const buttonsCellStyle = css`
   ${responsiveStyle({
     default: {
-      width: '600px',
+      width: '400px',
     },
     tablet: {
       width: '280px',
     },
-    mobile: {
-      width: '200px',
-    },
   })}
 `;
 
diff --git a/src/pages/applicantsPage/ApplicantList/ApplicantsTable.tsx b/src/pages/applicantsPage/ApplicantList/ApplicantsTable.tsx
new file mode 100644
index 0000000..50ca2a7
--- /dev/null
+++ b/src/pages/applicantsPage/ApplicantList/ApplicantsTable.tsx
@@ -0,0 +1,98 @@
+import { Button, Flex, List, Table, Td, Th, Modal } from '@/components/common';
+import { useState } from 'react';
+import ContractModal from './Contract/ContractModal';
+import { ApplicantData } from '@/types';
+import { buttonGroupStyle, buttonsCellStyle, buttonStyle } from './ApplicantsTable.styles';
+import ApplicantProfile from '../ApplicantList/ApplicantProfile';
+import useToggle from '@/hooks/useToggle';
+import { useTranslation } from 'react-i18next';
+
+type IdProps = {
+  resumeId: number;
+  applyId: number;
+};
+type Props = {
+  applicantList: ApplicantData[];
+};
+
+export default function ApplicantsTable({ applicantList }: Props) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [IdInfo, setIdInfo] = useState<IdProps | null>(null);
+  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
+  const [isToggle, toggle] = useToggle();
+  const [selectedApplyId, setSelectedApplyId] = useState<number | null>(null);
+  const { t } = useTranslation();
+
+  const openModal = (userId: number, applyId: number) => {
+    setSelectedUserId(userId);
+    setSelectedApplyId(applyId);
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+    setSelectedUserId(null);
+    setSelectedApplyId(null);
+  };
+
+  const profileOpenModal = ({ resumeId, applyId }: IdProps) => {
+    setIdInfo((prev) => ({ ...prev, resumeId, applyId }));
+    toggle();
+  };
+  return (
+    <>
+      <Table>
+        <thead>
+          <tr>
+            <Th>{t('applicants.table_headers.name')}</Th>
+            <Th>{t('applicants.table_headers.nation')}</Th>
+            <Th>{t('applicants.table_headers.korean_language_level')}</Th>
+            <Th></Th>
+          </tr>
+        </thead>
+        <tbody>
+          <List
+            items={applicantList}
+            renderItem={(applicant) => (
+              <tr key={applicant.applyId}>
+                <Td>{applicant.name}</Td>
+                <Td>{applicant.applicantNation}</Td>
+                <Td>{applicant.korean}</Td>
+                <Td css={buttonsCellStyle}>
+                  <Flex justifyContent="flex-end" alignItems="center" gap={{ x: '20px' }} css={buttonGroupStyle}>
+                    <Button
+                      onClick={() => profileOpenModal({ resumeId: applicant.resumeId, applyId: applicant.applyId })}
+                      css={buttonStyle}
+                    >
+                      {t('applicants.buttons.view_resume')}
+                    </Button>
+                    <Button css={buttonStyle} onClick={() => openModal(applicant.userId, applicant.applyId)}>
+                      {t('applicants.buttons.create_contract')}
+                    </Button>
+                  </Flex>
+                </Td>
+              </tr>
+            )}
+          />
+        </tbody>
+      </Table>
+      {selectedUserId && selectedApplyId && (
+        <ContractModal isOpen={isModalOpen} close={closeModal} userId={selectedUserId} applyId={selectedApplyId} />
+      )}
+      {isToggle && IdInfo && (
+        <Modal
+          css={{
+            width: '100%',
+            maxWidth: '450px',
+            '@media (max-width: 480px)': {
+              width: '90%',
+            },
+          }}
+          textChildren={<ApplicantProfile resumeId={IdInfo.resumeId} applyId={IdInfo.applyId} />}
+          buttonChildren={<Button onClick={toggle}>닫기</Button>}
+          onClose={toggle}
+        />
+      )}
+    </>
+  );
+}
diff --git a/src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx b/src/pages/applicantsPage/ApplicantList/Contract/ContractModal.tsx
similarity index 62%
rename from src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx
rename to src/pages/applicantsPage/ApplicantList/Contract/ContractModal.tsx
index 12ebcb1..7a042be 100644
--- a/src/features/applicants/ApplicantList/ContractModal/ContractModal.tsx
+++ b/src/pages/applicantsPage/ApplicantList/Contract/ContractModal.tsx
@@ -1,15 +1,16 @@
 import { Modal } from '@/components/common';
-import ModalText from './ModalText/ModalText';
+import ModalText from './ModalText';
 import { useGetForeigner } from '@/apis/applicants/hooks/useGetForeigner';
-import ModalButtons from './ModalButtons/ModalButtons';
+import ModalButtons from './ModalButtons';
 
 interface ContractModalProps {
   isOpen: boolean;
-  onClose: () => void;
+  close: () => void;
   userId: number;
+  applyId: number;
 }
 
-export default function ContractModal({ isOpen, onClose, userId }: ContractModalProps) {
+export default function ContractModal({ isOpen, close, userId, applyId }: ContractModalProps) {
   const { data: foreigner } = useGetForeigner(userId);
 
   return (
@@ -19,8 +20,8 @@ export default function ContractModal({ isOpen, onClose, userId }: ContractModal
           textChildren={
             <ModalText foreignerIdNumber={foreigner.foreignerIdNumber} visaGenerateDate={foreigner.visaGenerateDate} />
           }
-          buttonChildren={<ModalButtons onClose={onClose} />}
-          onClose={onClose}
+          buttonChildren={<ModalButtons applyId={applyId} onClose={close} />}
+          onClose={close}
           style={{ padding: '15px' }}
         />
       )}
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.styles.ts b/src/pages/applicantsPage/ApplicantList/Contract/ModalButtons.styles.ts
similarity index 100%
rename from src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.styles.ts
rename to src/pages/applicantsPage/ApplicantList/Contract/ModalButtons.styles.ts
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx b/src/pages/applicantsPage/ApplicantList/Contract/ModalButtons.tsx
similarity index 54%
rename from src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx
rename to src/pages/applicantsPage/ApplicantList/Contract/ModalButtons.tsx
index 6252511..9a3b9f1 100644
--- a/src/features/applicants/ApplicantList/ContractModal/ModalButtons/ModalButtons.tsx
+++ b/src/pages/applicantsPage/ApplicantList/Contract/ModalButtons.tsx
@@ -2,25 +2,28 @@ import { Button, Flex, Icon, Typo } from '@/components/common';
 import { buttonTextStyle, customButtonStyle } from './ModalButtons.styles';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
 
 interface ModalButtonsProps {
+  applyId: number;
   onClose: () => void;
 }
 
-export default function ModalButtons({ onClose }: ModalButtonsProps) {
+export default function ModalButtons({ applyId, onClose }: ModalButtonsProps) {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
-  const handleConfirmClick = () => {
-    navigate(ROUTE_PATH.CONTRACT.EMPLOYER);
+  const goToEmployer = () => {
+    navigate(ROUTE_PATH.CONTRACT.EMPLOYER.replace(':applyId', applyId.toString()));
   };
 
   return (
     <Flex justifyContent="space-between">
-      <Button onClick={onClose}>취소</Button>
-      <Button onClick={handleConfirmClick} css={customButtonStyle}>
+      <Button onClick={onClose}>{t('contractModal.buttons.cancel')}</Button>
+      <Button onClick={goToEmployer} css={customButtonStyle}>
         <Flex gap={{ x: '15px' }}>
           <Typo size="16px" style={buttonTextStyle}>
-            확인하였습니다.
+            {t('contractModal.buttons.confirm')}
           </Typo>
           <Icon.Arrow.RightWhite />
         </Flex>
diff --git a/src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.styles.ts b/src/pages/applicantsPage/ApplicantList/Contract/ModalText.styles.ts
similarity index 100%
rename from src/features/applicants/ApplicantList/ContractModal/ModalText/ModalText.styles.ts
rename to src/pages/applicantsPage/ApplicantList/Contract/ModalText.styles.ts
diff --git a/src/pages/applicantsPage/ApplicantList/Contract/ModalText.tsx b/src/pages/applicantsPage/ApplicantList/Contract/ModalText.tsx
new file mode 100644
index 0000000..7f5860d
--- /dev/null
+++ b/src/pages/applicantsPage/ApplicantList/Contract/ModalText.tsx
@@ -0,0 +1,49 @@
+import { palettes } from '@/assets/styles/global/palettes';
+import { ForeignerData } from '@/types';
+import { Typo } from '@/components/common';
+import { headingStyle, paragraphStyle, titleStyle } from './ModalText.styles';
+import { Trans, useTranslation } from 'react-i18next';
+
+type Props = Pick<ForeignerData, 'foreignerIdNumber' | 'visaGenerateDate'>;
+
+export default function ModalText({ foreignerIdNumber, visaGenerateDate }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Typo element="h3" size="18px" style={titleStyle}>
+        ✅ {t('contractModal.title')}
+      </Typo>
+      <Typo element="p" size="14px" style={paragraphStyle}>
+        {t('contractModal.warning')}
+      </Typo>
+      <hr />
+      <Typo element="h4" size="14px" style={headingStyle}>
+        {t('contractModal.applicant_info')}
+      </Typo>
+      <Typo element="p" size="14px" style={paragraphStyle}>
+        {t('contractModal.foreigner_number')} : <strong>{foreignerIdNumber}</strong>
+        <br />
+        {t('contractModal.visa_generate_date')} : <strong>{visaGenerateDate}</strong>
+        <br />
+        <br />
+        <Trans
+          i18nKey="contractModal.message.part1"
+          components={[
+            <a
+              href="https://www.hikorea.go.kr/info/InfoFrnJobIdentityPageR.pt?locale=kr"
+              target="_blank"
+              style={{ color: `${palettes.blue}` }}
+              rel="noopener noreferrer"
+            >
+              children
+            </a>,
+          ]}
+        />
+        <br />
+        <br />
+        {t('contractModal.message.part2')}
+      </Typo>
+    </>
+  );
+}
diff --git a/src/features/applicants/ApplicantList/ApplicantList.tsx b/src/pages/applicantsPage/ApplicantList/index.tsx
similarity index 69%
rename from src/features/applicants/ApplicantList/ApplicantList.tsx
rename to src/pages/applicantsPage/ApplicantList/index.tsx
index 0281a3f..a4e83ce 100644
--- a/src/features/applicants/ApplicantList/ApplicantList.tsx
+++ b/src/pages/applicantsPage/ApplicantList/index.tsx
@@ -1,20 +1,23 @@
 import { Flex, Typo } from '@/components/common';
-import ApplicantsTable from './ApplicantsTable/ApplicantsTable';
+import ApplicantsTable from './ApplicantsTable';
 import { ApplicantData } from '@/types';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   applicantList: ApplicantData[];
 };
 
 export default function ApplicantList({ applicantList }: Props) {
+  const { t } = useTranslation();
+
   return (
     <Flex direction="column" justifyContent="center" gap={{ y: '15px' }}>
       <Flex alignItems="center" gap={{ x: '20px' }}>
         <Typo element="h3" size="24px" style={{ fontWeight: 'bold' }}>
-          지원자 목록
+          {t('applicants.applicant_list')}
         </Typo>
         <Typo element="span" size="16px">
-          총 {applicantList.length}건
+          {t('applicants.total_applicants', { count: applicantList.length })}
         </Typo>
       </Flex>
       <ApplicantsTable applicantList={applicantList} />
diff --git a/src/pages/applicants/Applicants.stories.tsx b/src/pages/applicantsPage/Applicants.stories.tsx
similarity index 52%
rename from src/pages/applicants/Applicants.stories.tsx
rename to src/pages/applicantsPage/Applicants.stories.tsx
index b58048f..81a0269 100644
--- a/src/pages/applicants/Applicants.stories.tsx
+++ b/src/pages/applicantsPage/Applicants.stories.tsx
@@ -1,12 +1,19 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Applicants from './Applicants';
-import { recruitment, applicantList } from './Applicants.mock';
+import { recruitment, applicantList } from '../../apis/applicants/mocks/applicants.mock';
 
 const meta: Meta<typeof Applicants> = {
   title: 'pages/Applicants',
   component: Applicants,
   tags: ['autodocs'],
-  args: { recruitment, applicantList },
+  argTypes: {
+    recruitmentData: { control: 'object' },
+    applicantsData: { control: 'object' },
+  },
+  args: {
+    recruitmentData: recruitment,
+    applicantsData: applicantList,
+  },
 };
 
 export default meta;
diff --git a/src/pages/applicants/Applicants.styles.ts b/src/pages/applicantsPage/Applicants.styles.ts
similarity index 100%
rename from src/pages/applicants/Applicants.styles.ts
rename to src/pages/applicantsPage/Applicants.styles.ts
diff --git a/src/pages/applicantsPage/Applicants.tsx b/src/pages/applicantsPage/Applicants.tsx
new file mode 100644
index 0000000..d0e6472
--- /dev/null
+++ b/src/pages/applicantsPage/Applicants.tsx
@@ -0,0 +1,40 @@
+import { Flex, InnerContainer } from '@/components/common';
+import ApplicantList from '@/pages/applicantsPage/ApplicantList';
+import RecruitmentsInfo from '@/pages/myCompanyPage/Recruitments/RecruitmentInfo';
+import Layout from '@/features/layout';
+import styled from '@emotion/styled';
+import { ApplicantData, RecruitmentItem } from '@/types';
+
+interface ApplicantsProps {
+  recruitmentData: RecruitmentItem | null;
+  applicantsData: ApplicantData[] | null;
+}
+
+export default function Applicants({ recruitmentData, applicantsData }: ApplicantsProps) {
+  return (
+    <Layout>
+      <MainContainer>
+        <InnerContainer>
+          <Flex direction="column" gap={{ y: '60px' }} css={{ position: 'relative', minHeight: '600px' }}>
+            {recruitmentData && (
+              <RecruitmentsInfo
+                recruitmentId={recruitmentData.recruitmentId}
+                image={recruitmentData.image}
+                companyName={recruitmentData.companyName}
+                koreanTitle={recruitmentData.koreanTitle}
+                vietnameseTitle={recruitmentData.vietnameseTitle}
+                area={recruitmentData.area}
+                salary={recruitmentData.salary}
+              />
+            )}
+            {applicantsData && <ApplicantList applicantList={applicantsData} />}
+          </Flex>
+        </InnerContainer>
+      </MainContainer>
+    </Layout>
+  );
+}
+
+const MainContainer = styled.div`
+  padding: 40px 0 80px 0;
+`;
diff --git a/src/pages/applicantsPage/ApplicantsPage.tsx b/src/pages/applicantsPage/ApplicantsPage.tsx
new file mode 100644
index 0000000..2cc0633
--- /dev/null
+++ b/src/pages/applicantsPage/ApplicantsPage.tsx
@@ -0,0 +1,21 @@
+import { useGetMyApplicants } from '@/apis/applicants/hooks/useGetMyApplicants';
+import { useGetMyRecruitments } from '@/apis/recruitments/hooks/useGetMyRecruitments';
+import { Spinner } from '@/components/common';
+import { RecruitmentItem } from '@/types';
+import { useParams } from 'react-router-dom';
+import Applicants from './Applicants';
+
+export default function ApplicantsPage() {
+  const { companyId, recruitmentId } = useParams();
+  const { data: recruitmentList, isLoading: isLoadingRecruitment } = useGetMyRecruitments(Number(companyId));
+  const { data: applicants, isLoading: isLoadingApplicants } = useGetMyApplicants(Number(recruitmentId));
+
+  const recruitmentData = recruitmentList?.find((r: RecruitmentItem) => r.recruitmentId.toString() === recruitmentId);
+  const applicantsData = applicants;
+
+  if (isLoadingRecruitment || isLoadingApplicants) {
+    return <Spinner />;
+  }
+
+  return <Applicants recruitmentData={recruitmentData} applicantsData={applicantsData} />;
+}
diff --git a/src/pages/apply/applyguide/ApplyGuide.tsx b/src/pages/apply/applyguide/ApplyGuide.tsx
index 544885f..0e327ce 100644
--- a/src/pages/apply/applyguide/ApplyGuide.tsx
+++ b/src/pages/apply/applyguide/ApplyGuide.tsx
@@ -1,10 +1,9 @@
 import Layout from '@/features/layout';
 import styled from '@emotion/styled';
-import { Typo } from '@/components/common';
+import { Typo, Button } from '@/components/common';
 import { ReactNode } from 'react';
-import { guideMent } from './guideMent';
-import { useNavigate } from 'react-router-dom';
-import { Button } from '@/components/common';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const IndentText = ({ children }: { children: ReactNode }) => <Typo style={{ marginLeft: '20px' }}>{children}</Typo>;
 
@@ -16,28 +15,29 @@ const SpacingText = ({ children, bold }: { children: ReactNode; bold?: boolean }
 
 export default function ApplyGuide() {
   const nav = useNavigate();
-
+  const { recruitmentId } = useParams();
   const navigateToApply = () => {
-    nav('/apply');
+    nav(`/apply/${recruitmentId}`);
   };
+  const { t } = useTranslation();
 
   return (
     <Layout>
       <ApplyContainer>
         <Wrapper>
           <TextArea>
-            <SpacingText bold={true}>{guideMent[0].title}</SpacingText>
-            <Typo>{guideMent[0].description}</Typo>
-            <SpacingText bold={true}>{guideMent[1].title}</SpacingText>
-            <IndentText>{guideMent[1].description}</IndentText>
-            <SpacingText bold={true}>{guideMent[2].title}</SpacingText>
-            {(guideMent[2].description as string[]).map((desc: string, index: number) => {
-              return <IndentText key={index}>{desc}</IndentText>;
-            })}
-            <SpacingText>{guideMent[3].description}</SpacingText>
-            <SpacingText>{guideMent[4].description}</SpacingText>
+            <SpacingText bold={true}>{t('applyGuide.section1.title')}</SpacingText>
+            <Typo>{t('applyGuide.section1.description')}</Typo>
+            <SpacingText bold={true}>{t('applyGuide.section2.title')}</SpacingText>
+            <IndentText>{t('applyGuide.section2.description')}</IndentText>
+            <SpacingText bold={true}>{t('applyGuide.section3.title')}</SpacingText>
+            <IndentText>{t('applyGuide.section3.description.description1')}</IndentText>
+            <IndentText>{t('applyGuide.section3.description.description2')}</IndentText>
+            <IndentText>{t('applyGuide.section3.description.description3')}</IndentText>
+            <SpacingText>{t('applyGuide.section4.description')}</SpacingText>
+            <SpacingText>{t('applyGuide.section5.description')}</SpacingText>
           </TextArea>
-          <CustomBtn onClick={navigateToApply}>{guideMent[5].description}</CustomBtn>
+          <CustomBtn onClick={navigateToApply}>{t('applyGuide.section6.description')}</CustomBtn>
         </Wrapper>
       </ApplyContainer>
     </Layout>
diff --git a/src/pages/apply/applyguide/guideMent.ts b/src/pages/apply/applyguide/guideMent.ts
deleted file mode 100644
index bafe2fc..0000000
--- a/src/pages/apply/applyguide/guideMent.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export const guideMent = Object.freeze([
-  {
-    title: '🙌 채용 절차 안내',
-    description: '여러분의 채용 절차를 더욱 원활하게 진행할 수 있도록, 아래의 내용을 꼭 확인해주세요.',
-  },
-  {
-    title: '1. 채용 절차 설명',
-    description:
-      '- 채용 과정 전반에 대한 안내를 드립니다. 채용의 모든 단계에서 어떤 일들이 일어날지에 대해 명확히 이해하고 준비할 수 있도록 도와드립니다.',
-  },
-  {
-    title: '2. 주의 사항 및 표준 근로계약서 안내',
-    description: [
-      '- 고용주가 채용을 희망하는 경우, 채용 과정과 별도로 등록하신 이메일로 표준 근로계약서와 주의사항이 안내됩니다.',
-      ' - 채용 절차가 진행되는 동안, 근로계약서 작성 시 유의할 점을 반드시 확인하시고 필요한 경우 참고하시기 바랍니다.',
-      ' - 해당 과정은 여러분과 고용주 모두가 이해하고 동의하는 투명하고 신뢰할 수 있는 계약서를 작성하는 데 도움을 드리기 위한 것입니다.',
-    ],
-  },
-  {
-    description:
-      '이 안내사항들은 여러분이 채용 절차를 성공적으로 마무리하고, 근로 계약이 원활하게 체결될 수 있도록 지원하기 위한 것입니다.',
-  },
-  { description: '필요한 정보가 정확히 전달될 수 있도록 항상 주의하시기 바랍니다.' },
-  { description: '지원서 작성하러 가기' },
-]);
diff --git a/src/pages/apply/applypage/ApplyInput.tsx b/src/pages/apply/applypage/ApplyInput.tsx
index 0d250d2..ae36b4c 100644
--- a/src/pages/apply/applypage/ApplyInput.tsx
+++ b/src/pages/apply/applypage/ApplyInput.tsx
@@ -2,6 +2,7 @@ import { Flex, Typo } from '@/components/common';
 import { Path, UseFormRegister, FieldErrors } from 'react-hook-form';
 import styled from '@emotion/styled';
 import type { ApplyInfoProps } from './useApplyHook';
+import { useTranslation } from 'react-i18next';
 
 type InputProps = {
   title: string;
@@ -14,16 +15,20 @@ type InputProps = {
   patternMessage?: string;
 };
 
-const ApplyInput = ({ title, label, register, required, errors, placeholder, pattern, patternMessage }: InputProps) => (
-  <Flex direction="column" gap={{ y: '10px' }}>
-    <Typo size="18px" bold={true}>
-      {title}
-    </Typo>
-    <StyledInput {...register(label, { required, pattern })} placeholder={placeholder} />
-    {errors[label]?.type === 'required' && <Warring>{title}을(를) 입력해주세요!</Warring>}
-    {errors[label]?.type === 'pattern' && <Warring>{patternMessage}</Warring>}
-  </Flex>
-);
+const ApplyInput = ({ title, label, register, required, errors, placeholder, pattern, patternMessage }: InputProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex direction="column" gap={{ y: '10px' }}>
+      <Typo size="18px" bold={true}>
+        {title}
+      </Typo>
+      <StyledInput {...register(label, { required, pattern })} placeholder={placeholder} />
+      {errors[label]?.type === 'required' && <Warring>{`${title}${t('apply.errors')}`}</Warring>}
+      {errors[label]?.type === 'pattern' && <Warring>{patternMessage}</Warring>}
+    </Flex>
+  );
+};
 
 const StyledInput = styled.input`
   width: 100%;
diff --git a/src/pages/apply/applypage/ApplyPage.tsx b/src/pages/apply/applypage/ApplyPage.tsx
index e2a453c..f13c692 100644
--- a/src/pages/apply/applypage/ApplyPage.tsx
+++ b/src/pages/apply/applypage/ApplyPage.tsx
@@ -3,59 +3,64 @@ import styled from '@emotion/styled';
 import { Flex, Typo, Button, Modal } from '@/components/common';
 import { useApplyHook } from './useApplyHook';
 import ApplyInput from './ApplyInput';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 
 export default function ApplyPage() {
   const { toggle, isToggle, register, handleSubmit, onSubmit, handleApplySubmit, errors } = useApplyHook();
-
+  const { t } = useTranslation();
+  const { recruitmentId } = useParams();
   return (
     <Layout>
       <Flex justifyContent="center" alignItems="center">
         <ApplyCard>
           <Typo size="24px" bold={true}>
-            지원서 작성
+            {t('apply.title')}
           </Typo>
           <StyledForm onSubmit={handleSubmit(onSubmit)}>
             <ApplyInput
               errors={errors}
-              title="이름"
+              title={t('apply.name')}
               label="name"
               register={register}
-              placeholder="이름을 입력해주세요."
+              placeholder={t('apply.description.name')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="주소"
+              title={t('apply.address')}
               label="address"
               register={register}
-              placeholder="주소를 입력해주세요. (예: 대전광역시 유성구 궁동)"
+              placeholder={t('apply.description.address')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="번호"
+              title={t('apply.phoneNumber')}
               label="phoneNumber"
               register={register}
               pattern={/^010-\d{4}-\d{4}$/}
-              patternMessage="올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)"
-              placeholder="010-0000-0000 형식의 번호를 입력해주세요."
+              patternMessage={t('apply.numberError')}
+              placeholder={t('apply.description.phoneNumber')}
               required
             />
             <ApplyInput
               errors={errors}
-              title="지원동기"
+              title={t('apply.applyMotivation')}
               label="applyMotivation"
               register={register}
-              placeholder="지원 동기를 입력해주세요."
+              placeholder={t('apply.description.applyMotivation')}
               required
             />
-            <CustomBtn type="submit">지원하기</CustomBtn>
+            <CustomBtn type="submit">{t('apply.submit')}</CustomBtn>
           </StyledForm>
         </ApplyCard>
-        {isToggle && (
+        {isToggle && recruitmentId && (
           <Modal
-            textChildren={<ModalContainer>정말 지원하시겠습니까?</ModalContainer>}
-            buttonChildren={<CustomBtn onClick={handleApplySubmit}>지원하기</CustomBtn>}
+            textChildren={<ModalContainer>{t('apply.submitMent')}</ModalContainer>}
+            buttonChildren={
+              <CustomBtn onClick={() => handleApplySubmit(Number(recruitmentId))}>{t('apply.submit')}</CustomBtn>
+            }
             onClose={toggle}
           />
         )}
diff --git a/src/pages/apply/applypage/useApplyHook.tsx b/src/pages/apply/applypage/useApplyHook.tsx
index 0d5a2f8..4f7e735 100644
--- a/src/pages/apply/applypage/useApplyHook.tsx
+++ b/src/pages/apply/applypage/useApplyHook.tsx
@@ -25,11 +25,10 @@ export function useApplyHook() {
     toggle();
   };
 
-  const handleApplySubmit = () => {
+  const handleApplySubmit = (recruitmentId: number) => {
     if (formData) {
       const data = JSON.stringify(formData);
-      mutation.mutate({ data, recruitmentId: '1' });
-      alert('지원 완료!');
+      mutation.mutate({ data, recruitmentId });
       toggle();
     }
   };
diff --git a/src/pages/auth/Loading/index.tsx b/src/pages/auth/Loading/index.tsx
index 7502e1c..c44446c 100644
--- a/src/pages/auth/Loading/index.tsx
+++ b/src/pages/auth/Loading/index.tsx
@@ -1,5 +1,5 @@
 import { Spinner, Typo } from '@/components/common';
-import { useGoogleOAuth } from '@/apis/auth/mutations/useGoogleOAuth';
+import { useGoogleOAuth } from '@/features/auth/SignIn/hooks/useGoogleOAuth';
 
 export default function LoadingPage() {
   const { isLoading } = useGoogleOAuth();
diff --git a/src/pages/contract/EmployeeContract/EmployeeContract.tsx b/src/pages/contract/EmployeeContract/EmployeeContract.tsx
index f72bbce..7edd5c3 100644
--- a/src/pages/contract/EmployeeContract/EmployeeContract.tsx
+++ b/src/pages/contract/EmployeeContract/EmployeeContract.tsx
@@ -1,9 +1,11 @@
+import { useState } from 'react';
 import { useGetMyContract } from '@/apis/contract/hooks/useGetMyContract';
 import { useFetchPostContract } from '@/apis/contract/hooks/usePostContract';
 import { Button, Flex, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
 export type ContractResponseData = {
@@ -17,6 +19,7 @@ export type ContractResponseData = {
 };
 
 export default function EmployeeContract() {
+  const { t } = useTranslation();
   const { applyId } = useParams();
   const applicationId = Number(applyId);
   const { data: contract } = useGetMyContract(applicationId);
@@ -24,7 +27,14 @@ export default function EmployeeContract() {
   const navigate = useNavigate();
   const contractData: ContractResponseData = contract || {};
 
+  const [isSigned, setIsSigned] = useState(false);
+  const [showSignError, setShowSignError] = useState(false);
+
   const handlePostSignEmployeeContract = () => {
+    if (!isSigned) {
+      setShowSignError(true);
+      return;
+    }
     mutation.mutate(
       { applyId: applicationId },
       {
@@ -32,13 +42,17 @@ export default function EmployeeContract() {
           navigate(ROUTE_PATH.HOME);
         },
         onError: () => {
-          // 이부분 에러처리 결정해야함.
           alert('값이 정상적으로 저장되지 않았습니다.');
         },
       },
     );
   };
 
+  const handleSign = () => {
+    setIsSigned(!isSigned);
+    setShowSignError(false);
+  };
+
   return (
     <Layout>
       <section>
@@ -46,52 +60,54 @@ export default function EmployeeContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근 로 계 약 서
+                {t('contract.CONTRACT')}
               </Typo>
               <InputWrapper>
                 <InputContainer>
-                  <Typo>1. 근무장소</Typo>
+                  <Typo>{t('contract.WORKING_PLACE')}</Typo>
                   <Typo>{contractData.workingPlace}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>2. 업무내용</Typo>
+                  <Typo>{t('contract.RESPONSIBILITIES')}</Typo>
                   <Typo>{contractData.responsibilities}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>3. 근로일 및 근로일별 근로시간</Typo>
+                  <Typo>{t('contract.WORKING_HOURS')}</Typo>
                   <Typo>{contractData.workingHours}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>4. 주휴일</Typo>
+                  <Typo>{t('contract.DAY_OFF')}</Typo>
                   <Typo>{contractData.dayOff}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>5. 임금</Typo>
+                  <Typo>{t('contract.SALARY')}</Typo>
                   <Typo>{contractData.salary}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>6. 연차유급휴가</Typo>
+                  <Typo>{t('contract.ANNUAL_PAID_LEAVE')}</Typo>
                   <Typo>{contractData.annualPaidLeave}</Typo>
                 </InputContainer>
                 <InputContainer>
-                  <Typo>7. 취업규칙</Typo>
+                  <Typo>{t('contract.RULE')}</Typo>
                   <Typo>{contractData.rule}</Typo>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.
+                {t('contract.SENTENCE1')}
               </Typo>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.
+                {t('contract.SENTENCE2')}
               </Typo>
               <ButtonWrapper>
-                <Button design="outlined" style={{ marginRight: '16px' }}>
-                  서명하기
-                </Button>
-                <Button design="default" onClick={handlePostSignEmployeeContract} style={{}}>
-                  제출하기
+                <SignButton design="outlined" isSigned={isSigned} onClick={handleSign}>
+                  <TypoWrapper isSigned={isSigned}>{t('contract.SIGN')}</TypoWrapper>
+                  {isSigned && <CheckIcon>✅</CheckIcon>}
+                </SignButton>
+                <Button design="default" onClick={handlePostSignEmployeeContract}>
+                  {t('contract.SUBMIT')}
                 </Button>
               </ButtonWrapper>
+              {showSignError && !isSigned && <ErrorText>{t('contract.ERROR')}</ErrorText>}
             </Flex>
           </LineWrapper>
         </Flex>
@@ -126,3 +142,31 @@ const ButtonWrapper = styled.div`
   justify-content: space-between;
   margin-top: 52px;
 `;
+
+const SignButton = styled(Button)<{ isSigned: boolean }>`
+  width: 150px;
+  background-color: ${({ isSigned }) => (isSigned ? '#3960d7' : 'white')};
+  color: ${({ isSigned }) => (isSigned ? 'white' : 'black')};
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+`;
+
+const TypoWrapper = styled.span<{ isSigned: boolean }>`
+  margin-right: ${({ isSigned }) => (isSigned ? '8px' : '0')};
+  transition: margin-right 0.3s;
+`;
+
+const CheckIcon = styled.span`
+  transition: opacity 0.3s;
+  opacity: 1;
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 12px;
+  margin-top: 8px;
+`;
diff --git a/src/pages/contract/EmployerContract/EmployerContract.tsx b/src/pages/contract/EmployerContract/EmployerContract.tsx
index bc3e0ce..21bf3cc 100644
--- a/src/pages/contract/EmployerContract/EmployerContract.tsx
+++ b/src/pages/contract/EmployerContract/EmployerContract.tsx
@@ -4,13 +4,18 @@ import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
 export default function EmployerContract() {
+  const { t } = useTranslation();
   const { applyId: applicationId } = useParams();
   const mutation = useFetchPostContract();
   const navigate = useNavigate();
 
+  const [isSigned, setIsSigned] = useState(false);
+  const [showSignError, setShowSignError] = useState(false);
+
   const [inputs, setInputs] = useState({
     salary: '',
     workingHours: '',
@@ -33,17 +38,25 @@ export default function EmployerContract() {
   };
 
   const handlePostContract = () => {
+    if (!isSigned) {
+      setShowSignError(true);
+      return;
+    }
     mutation.mutate(inputs, {
       onSuccess: () => {
         navigate(ROUTE_PATH.HOME);
       },
       onError: () => {
-        // 이부분 에러처리 결정해야함.
         alert('값이 정상적으로 저장되지 않았습니다.');
       },
     });
   };
 
+  const handleSign = () => {
+    setIsSigned(!isSigned);
+    setShowSignError(false);
+  };
+
   return (
     <Layout>
       <section>
@@ -51,55 +64,89 @@ export default function EmployerContract() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                근 로 계 약 서
+                {t('contract.CONTRACT')}
               </Typo>
               <InputWrapper>
                 <InputContainer>
-                  <Input label="1. 근무장소" value={workingPlace} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.WORKING_PLACE')}
+                    name="workingPlace"
+                    value={workingPlace}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="2. 업무내용" value={responsibilities} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.RESPONSIBILITIES')}
+                    name="responsibilities"
+                    value={responsibilities}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
                   <Input
-                    label="3. 근로일 및 근로일별 근로시간"
+                    label={t('contract.WORKING_HOURS')}
+                    name="workingHours"
                     value={workingHours}
                     onChange={onChange}
                     style={InputStyle}
                   ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="4. 주휴일" value={dayOff} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.DAY_OFF')}
+                    name="dayOff"
+                    value={dayOff}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="5. 임금" value={salary} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.SALARY')}
+                    name="salary"
+                    value={salary}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="6. 연차유급휴가" value={annualPaidLeave} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.ANNUAL_PAID_LEAVE')}
+                    name="annualPaidLeave"
+                    value={annualPaidLeave}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="7. 취업규칙" value={rule} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('contract.RULE')}
+                    name="rule"
+                    value={rule}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
               </InputWrapper>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                사용자와 근로자는 각자가 근로계약, 취업규칙, 단체협약을 지키고 성실하게 이행하여야 한다.
+                {t('contract.SENTENCE1')}
               </Typo>
               <Typo element="p" size="16px" style={{ fontWeight: 'bold', marginTop: '24px' }}>
-                이 계약에서 정하지 않은 사항은 '근로기준법'에서 정하는 바에 따른다.
+                {t('contract.SENTENCE2')}
               </Typo>
               <ButtonWrapper>
-                <div>
-                  <>
-                    <input type="checkbox" />
-                    <label>서명하기</label>
-                  </>
-                </div>
-                <div>
-                  <Button design="default" onClick={handlePostContract}>
-                    제출하기
-                  </Button>
-                </div>
+                <SignButton design="outlined" isSigned={isSigned} onClick={handleSign}>
+                  <TypoWrapper isSigned={isSigned}>{t('contract.SIGN')}</TypoWrapper>
+                  {isSigned && <CheckIcon>✅</CheckIcon>}
+                </SignButton>
+                <Button design="default" onClick={handlePostContract}>
+                  {t('contract.SUBMIT')}
+                </Button>
               </ButtonWrapper>
+              {showSignError && !isSigned && <ErrorText>{t('contract.ERROR')}</ErrorText>}
             </Flex>
           </LineWrapper>
         </Flex>
@@ -135,4 +182,32 @@ const ButtonWrapper = styled.div`
   margin-top: 52px;
 `;
 
-const InputStyle = { width: '570px', height: '48px' };
+const SignButton = styled(Button)<{ isSigned: boolean }>`
+  width: 150px;
+  background-color: ${({ isSigned }) => (isSigned ? '#3960d7' : 'white')};
+  color: ${({ isSigned }) => (isSigned ? 'white' : 'black')};
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+`;
+
+const TypoWrapper = styled.span<{ isSigned: boolean }>`
+  margin-right: ${({ isSigned }) => (isSigned ? '8px' : '0')};
+  transition: margin-right 0.3s;
+`;
+
+const CheckIcon = styled.span`
+  transition: opacity 0.3s;
+  opacity: 1;
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 12px;
+  margin-top: 8px;
+`;
+
+const InputStyle = { width: '450px', height: '48px' };
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 0a162f0..0459b79 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -2,13 +2,16 @@ import { InnerContainer, Flex } from '@components/common';
 import { responsiveStyle, responsiveSectionPadding } from '@utils/responsive';
 import Layout from '@features/layout';
 import RecruitmentHeader from '@features/home/components/common/RecruitmentHeader';
-import RecruitmentFilter from '@features/home/components/common/RecruitmentFilter';
-import RecruitmentList from '@features/home/components/common/RecruitmentList';
+// import RecruitmentFilter from '@features/home/components/common/RecruitmentFilter';
+// import RecruitmentList from '@features/home/components/common/RecruitmentList';
 import ConditionalRenderer from '@features/home/components/ConditionalRenderer';
+// import { useRecruitmentData } from '@/features/home/hooks/useRecruitmentData';
 
 const sectionStyle = responsiveStyle(responsiveSectionPadding);
 
 export default function Home() {
+  // const { recruitmentList, page, totalPages, handleFilterChange, handlePageChange } = useRecruitmentData();
+
   return (
     <Layout>
       <ConditionalRenderer />
@@ -16,9 +19,12 @@ export default function Home() {
         <InnerContainer>
           <Flex justifyContent="space-between" alignItems="center">
             <RecruitmentHeader />
-            <RecruitmentFilter />
+            {/* <RecruitmentFilter onFilterChange={handleFilterChange} /> */}
           </Flex>
-          <RecruitmentList />
+          {/* <AsyncBoundary pendingFallback={<Spinner />}> */}
+          {/* <RecruitmentList recruitmentList={recruitmentList} /> */}
+          {/* </AsyncBoundary> */}
+          {/* <Pagination currentPage={page} totalPages={totalPages} onPageChange={handlePageChange} /> */}
         </InnerContainer>
       </section>
     </Layout>
diff --git a/src/pages/myCompany/MyCompany.tsx b/src/pages/myCompany/MyCompany.tsx
deleted file mode 100644
index adcccb2..0000000
--- a/src/pages/myCompany/MyCompany.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import Layout from '@/features/layout';
-import { Flex, InnerContainer, Image, Typo, Button, Icon, Spinner } from '@/components/common';
-import CompanyLogo from '@assets/images/coupang.png';
-import CompanyInfo from '@/features/companies/CompanyInfo/CompanyInfo';
-import { palettes } from '@/assets/styles/global/palettes';
-import {
-  buttonStyle,
-  imageStyle,
-  companyWrapperStyle,
-  innerContainerStyle,
-  spinnerFlexStyle,
-} from './MyCompany.styles';
-import RecruitmentList from '@/features/recruitments/RecruitmentList/RecruitmentList';
-import { useParams } from 'react-router-dom';
-import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies';
-import { CompanyData, RecruitmentItem } from '@/types';
-import { useGetMyRecruitments } from '@/apis/recruitments/hooks/useGetMyRecruitments';
-
-interface MyCompanyProps {
-  company?: CompanyData;
-  recruitmentList?: RecruitmentItem[];
-}
-
-export default function MyCompany({ company, recruitmentList }: MyCompanyProps) {
-  const { companyId } = useParams();
-  const { data: companyList } = useGetMyCompanies();
-  const { data: recruitments, isLoading } = useGetMyRecruitments(Number(companyId));
-
-  const companyData = company || companyList?.find((c: CompanyData) => c.companyId.toString() === companyId);
-  const recruitmentsData = recruitmentList || recruitments;
-
-  return (
-    <Layout>
-      <div>
-        <InnerContainer css={innerContainerStyle}>
-          <Flex
-            direction="column"
-            alignItems="center"
-            gap={{ y: '60px' }}
-            css={{ position: 'relative', minHeight: '600px' }}
-          >
-            <Flex justifyContent="space-between" alignItems="center" gap={{ x: '100px' }} css={companyWrapperStyle}>
-              <Image url={CompanyLogo} size={{ width: '280px', height: '120px' }} css={imageStyle} />
-              <CompanyInfo
-                name={companyData.name}
-                industryOccupation={companyData.industryOccupation}
-                brand={companyData.brand}
-                revenuePerYear={companyData.revenuePerYear}
-              />
-              <Button css={buttonStyle}>
-                <Flex gap={{ x: '15px' }}>
-                  <Typo size="16px" style={{ color: `${palettes.white}` }}>
-                    회사 정보 수정하기
-                  </Typo>
-                  <Icon.Arrow.RightWhite />
-                </Flex>
-              </Button>
-            </Flex>
-            {isLoading ? (
-              <Flex justifyContent="center" alignItems="center" css={spinnerFlexStyle}>
-                <Spinner />
-              </Flex>
-            ) : (
-              recruitmentsData && <RecruitmentList recruitmentList={recruitmentsData} />
-            )}
-          </Flex>
-        </InnerContainer>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/myCompany/MyCompany.mock.ts b/src/pages/myCompanyPage/MyCompany.mock.ts
similarity index 72%
rename from src/pages/myCompany/MyCompany.mock.ts
rename to src/pages/myCompanyPage/MyCompany.mock.ts
index f527f1d..722ce67 100644
--- a/src/pages/myCompany/MyCompany.mock.ts
+++ b/src/pages/myCompanyPage/MyCompany.mock.ts
@@ -14,30 +14,33 @@ export const recruitmentList = [
     recruitmentId: 1,
     image: CompanyLogo,
     koreanTitle: '쿠팡 유성점에서 아르바이트 모집합니다.',
-    vietnameseTitle: '',
+    vietnameseTitle: 'Coupang đang tuyển dụng làm việc bán thời gian tại chi nhánh Yuseong.',
     companyName: '쿠팡 유성점',
     salary: 100000,
-    area: '대전 유성구',
     workHours: '',
+    area: '대전 유성구',
+    hiring: false,
   },
   {
     recruitmentId: 2,
     image: CompanyLogo,
     koreanTitle: '쿠팡 유성점에서 아르바이트 모집합니다.',
-    vietnameseTitle: '',
+    vietnameseTitle: 'Coupang đang tuyển dụng làm việc bán thời gian tại chi nhánh Yuseong.',
     companyName: '쿠팡 유성점',
     salary: 100000,
-    area: '대전 유성구',
     workHours: '',
+    area: '대전 유성구',
+    hiring: false,
   },
   {
     recruitmentId: 3,
     image: CompanyLogo,
     koreanTitle: '쿠팡 유성점에서 아르바이트 모집합니다.',
-    vietnameseTitle: '',
+    vietnameseTitle: 'Coupang đang tuyển dụng làm việc bán thời gian tại chi nhánh Yuseong.',
     companyName: '쿠팡 유성점',
     salary: 100000,
-    area: '대전 유성구',
     workHours: '',
+    area: '대전 유성구',
+    hiring: false,
   },
 ];
diff --git a/src/pages/myCompany/MyCompany.stories.tsx b/src/pages/myCompanyPage/MyCompany.stories.tsx
similarity index 66%
rename from src/pages/myCompany/MyCompany.stories.tsx
rename to src/pages/myCompanyPage/MyCompany.stories.tsx
index a350db8..beee79d 100644
--- a/src/pages/myCompany/MyCompany.stories.tsx
+++ b/src/pages/myCompanyPage/MyCompany.stories.tsx
@@ -6,7 +6,14 @@ const meta: Meta<typeof MyCompany> = {
   title: 'pages/MyCompany',
   component: MyCompany,
   tags: ['autodocs'],
-  args: { company, recruitmentList },
+  argTypes: {
+    companyData: { control: 'object' },
+    recruitmentsData: { control: 'object' },
+  },
+  args: {
+    companyData: company,
+    recruitmentsData: recruitmentList,
+  },
 };
 
 export default meta;
diff --git a/src/pages/myCompany/MyCompany.styles.ts b/src/pages/myCompanyPage/MyCompany.styles.ts
similarity index 77%
rename from src/pages/myCompany/MyCompany.styles.ts
rename to src/pages/myCompanyPage/MyCompany.styles.ts
index c432700..0f63f94 100644
--- a/src/pages/myCompany/MyCompany.styles.ts
+++ b/src/pages/myCompanyPage/MyCompany.styles.ts
@@ -1,4 +1,3 @@
-import { palettes } from '@/assets/styles/global/palettes';
 import { responsiveStyle } from '@/utils/responsive';
 import { css } from '@emotion/react';
 
@@ -25,9 +24,6 @@ export const companyWrapperStyle = css`
       gap: '15px',
       width: '100%',
     },
-    mobile: {
-      flexDirection: 'column',
-    },
   })}
 `;
 
@@ -47,13 +43,6 @@ export const imageStyle = css`
   })}
 `;
 
-export const buttonStyle = css`
-  background-color: ${palettes.blue};
-  color: ${palettes.white};
-  border-radius: 4px;
-  white-space: nowrap;
-`;
-
 export const spinnerFlexStyle = css`
   position: absolute;
   top: 0;
diff --git a/src/pages/myCompanyPage/MyCompany.tsx b/src/pages/myCompanyPage/MyCompany.tsx
new file mode 100644
index 0000000..4020b10
--- /dev/null
+++ b/src/pages/myCompanyPage/MyCompany.tsx
@@ -0,0 +1,31 @@
+import Layout from '@/features/layout';
+import { Flex, InnerContainer, Image } from '@/components/common';
+import CompanyInfo from '@/pages/myPage/employer/Companies/CompanyInfo';
+import { companyWrapperStyle, imageStyle, innerContainerStyle } from './MyCompany.styles';
+import RecruitmentList from '@/pages/myCompanyPage/Recruitments/RecruitmentList';
+import { CompanyData, RecruitmentItem } from '@/types';
+
+interface MyCompanyProps {
+  companyData: CompanyData | null;
+  recruitmentsData: RecruitmentItem[] | null;
+}
+
+export default function MyCompany({ companyData, recruitmentsData }: MyCompanyProps) {
+  return (
+    <Layout>
+      <div>
+        <InnerContainer css={innerContainerStyle}>
+          <Flex direction="column" alignItems="center" gap={{ y: '60px' }}>
+            {companyData && (
+              <Flex alignItems="center" gap={{ x: '150px' }} css={companyWrapperStyle}>
+                <Image url={companyData.logoImage} size={{ width: '280px', height: '120px' }} css={imageStyle} />
+                <CompanyInfo {...companyData} />
+              </Flex>
+            )}
+            {recruitmentsData && <RecruitmentList recruitmentList={recruitmentsData} />}
+          </Flex>
+        </InnerContainer>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/myCompanyPage/MyCompanyPage.tsx b/src/pages/myCompanyPage/MyCompanyPage.tsx
new file mode 100644
index 0000000..325205e
--- /dev/null
+++ b/src/pages/myCompanyPage/MyCompanyPage.tsx
@@ -0,0 +1,21 @@
+import { useParams } from 'react-router-dom';
+import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies';
+import { useGetMyRecruitments } from '@/apis/recruitments/hooks/useGetMyRecruitments';
+import MyCompany from './MyCompany';
+import { Spinner } from '@/components/common';
+import { CompanyData } from '@/types';
+
+export default function MyCompanyPage() {
+  const { companyId } = useParams();
+  const { data: companyList, isLoading: isLoadingCompanies } = useGetMyCompanies();
+  const { data: recruitments, isLoading: isLoadingRecruitments } = useGetMyRecruitments(Number(companyId));
+
+  const companyData = companyList?.find((c: CompanyData) => c.companyId.toString() === companyId);
+  const recruitmentsData = recruitments;
+
+  if (isLoadingCompanies || isLoadingRecruitments) {
+    return <Spinner />;
+  }
+
+  return <MyCompany companyData={companyData} recruitmentsData={recruitmentsData} />;
+}
diff --git a/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.styles.ts b/src/pages/myCompanyPage/Recruitments/RecruitmentInfo.styles.ts
similarity index 100%
rename from src/features/recruitments/RecruitmentInfo/RecruitmentInfo.styles.ts
rename to src/pages/myCompanyPage/Recruitments/RecruitmentInfo.styles.ts
diff --git a/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx b/src/pages/myCompanyPage/Recruitments/RecruitmentInfo.tsx
similarity index 57%
rename from src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx
rename to src/pages/myCompanyPage/Recruitments/RecruitmentInfo.tsx
index fe40fd3..2da0a2d 100644
--- a/src/features/recruitments/RecruitmentInfo/RecruitmentInfo.tsx
+++ b/src/pages/myCompanyPage/Recruitments/RecruitmentInfo.tsx
@@ -12,10 +12,31 @@ import {
   infoGroupStyle,
   recruitmentFlexStyle,
 } from './RecruitmentInfo.styles';
+import { useLanguage } from '@/components/providers/Language.provider';
+import { useNavigate } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
 
-type Props = Pick<RecruitmentItem, 'image' | 'companyName' | 'koreanTitle' | 'area' | 'salary'>;
+type Props = Omit<RecruitmentItem, 'workHours' | 'hiring'>;
+
+export default function RecruitmentInfo({
+  recruitmentId,
+  image,
+  companyName,
+  koreanTitle,
+  vietnameseTitle,
+  area,
+  salary,
+}: Props) {
+  const { language } = useLanguage();
+  const navigate = useNavigate();
+  const title = language === 'ko' ? koreanTitle : vietnameseTitle;
+  const { t } = useTranslation();
+
+  const goToRecruitmentDetails = (recruitmentId: number) => {
+    navigate(ROUTE_PATH.RECRUIT.replace(':recruitmentId', recruitmentId.toString()));
+  };
 
-export default function RecruitmentInfo({ image, companyName, koreanTitle, area, salary }: Props) {
   return (
     <Flex justifyContent="space-between" alignItems="center" gap={{ y: '100px' }} css={recruitmentFlexStyle}>
       <ImageWrapper>
@@ -24,7 +45,7 @@ export default function RecruitmentInfo({ image, companyName, koreanTitle, area,
       <Flex css={infoFlexStyle}>
         <Typo color="blue">{companyName}</Typo>
         <Typo element="h3" size="20px">
-          {koreanTitle}
+          {title}
         </Typo>
         <Flex css={infoGroupStyle}>
           <Flex alignItems="center" gap={{ x: '12px' }}>
@@ -33,14 +54,16 @@ export default function RecruitmentInfo({ image, companyName, koreanTitle, area,
           </Flex>
           <Flex alignItems="center" gap={{ x: '12px' }}>
             <SalaryIcon />
-            <Typo color="gray">시급 {salary}</Typo>
+            <Typo color="gray">
+              {t('applicants.salary')} {salary}
+            </Typo>
           </Flex>
         </Flex>
       </Flex>
-      <Button css={buttonStyle}>
+      <Button css={buttonStyle} onClick={() => goToRecruitmentDetails(recruitmentId)}>
         <Flex gap={{ x: '15px' }}>
           <Typo size="16px" color="white" style={buttonTextStyle}>
-            자세히 보러가기
+            {t('applicants.view_details')}
           </Typo>
           <Icon.Arrow.RightWhite />
         </Flex>
diff --git a/src/features/recruitments/RecruitmentList/RecruitmentList.tsx b/src/pages/myCompanyPage/Recruitments/RecruitmentList.tsx
similarity index 69%
rename from src/features/recruitments/RecruitmentList/RecruitmentList.tsx
rename to src/pages/myCompanyPage/Recruitments/RecruitmentList.tsx
index 40de9ea..3464b9a 100644
--- a/src/features/recruitments/RecruitmentList/RecruitmentList.tsx
+++ b/src/pages/myCompanyPage/Recruitments/RecruitmentList.tsx
@@ -1,20 +1,23 @@
 import { Flex, Typo } from '@/components/common';
-import RecruitmentsTable from './RecruitmentsTable/RecruitmentsTable';
+import RecruitmentsTable from './RecruitmentsTable';
 import { RecruitmentItem } from '@/types';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   recruitmentList: RecruitmentItem[];
 };
 
 export default function RecruitmentList({ recruitmentList }: Props) {
+  const { t } = useTranslation();
+
   return (
     <Flex direction="column" justifyContent="center" gap={{ y: '15px' }}>
       <Flex alignItems="center" gap={{ x: '20px' }}>
         <Typo element="h3" size="24px" style={{ fontWeight: 'bold' }}>
-          내 공고글
+          {t('myCompany.my_recruitments')}
         </Typo>
         <Typo element="span" size="16px">
-          총 {recruitmentList.length}건
+          {t('myCompany.total_recruitments', { count: recruitmentList.length })}
         </Typo>
       </Flex>
       <RecruitmentsTable recruitmentList={recruitmentList} />
diff --git a/src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.styles.ts b/src/pages/myCompanyPage/Recruitments/RecruitmentsTable.styles.ts
similarity index 100%
rename from src/features/recruitments/RecruitmentList/RecruitmentsTable/RecruitmentsTable.styles.ts
rename to src/pages/myCompanyPage/Recruitments/RecruitmentsTable.styles.ts
diff --git a/src/pages/myCompanyPage/Recruitments/RecruitmentsTable.tsx b/src/pages/myCompanyPage/Recruitments/RecruitmentsTable.tsx
new file mode 100644
index 0000000..c16807e
--- /dev/null
+++ b/src/pages/myCompanyPage/Recruitments/RecruitmentsTable.tsx
@@ -0,0 +1,87 @@
+import { Button, Flex, List, Table, Td, Th, Typo } from '@/components/common';
+import { RecruitmentItem } from '@/types';
+import { buttonGroupStyle, buttonStyle, recruitmentStyle, recruitmentTitleStyle } from './RecruitmentsTable.styles';
+import { useNavigate, useParams } from 'react-router-dom';
+import ROUTE_PATH from '@/routes/path';
+import { useCloseRecruitment } from '@/apis/recruitments/hooks/useCloseRecruitment';
+import { useState } from 'react';
+import { useLanguage } from '@/components/providers/Language.provider';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  recruitmentList: RecruitmentItem[];
+};
+
+export default function RecruitmentsTable({ recruitmentList }: Props) {
+  const navigate = useNavigate();
+  const { companyId } = useParams();
+  const mutation = useCloseRecruitment();
+  const [closedRecruitment, setClosedRecruitment] = useState<{ [key: number]: boolean }>({});
+  const { language } = useLanguage();
+  const { t } = useTranslation();
+
+  const goToApplicantsPage = (companyId: string, recruitmentId: number) => {
+    navigate(
+      ROUTE_PATH.APPLICANTS.replace(':companyId', companyId).replace(':recruitmentId', recruitmentId.toString()),
+    );
+  };
+
+  const handleCloseRecruitmentClick = (recruitmentId: number) => {
+    mutation.mutate(recruitmentId, {
+      onSuccess: () => {
+        setClosedRecruitment((prev) => ({
+          ...prev,
+          [recruitmentId]: true,
+        }));
+      },
+    });
+  };
+
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <Th>{t('myCompany.table_headers.location')}</Th>
+          <Th>{t('myCompany.table_headers.title')}</Th>
+        </tr>
+      </thead>
+      <tbody>
+        <List
+          items={recruitmentList}
+          renderItem={(recruitment) => (
+            <tr key={recruitment.recruitmentId}>
+              <Td>{recruitment.area}</Td>
+              <Td>
+                <Flex css={recruitmentStyle}>
+                  <Flex direction="column" justifyContent="center" gap={{ y: '5px' }}>
+                    <Typo size="16px" style={recruitmentTitleStyle}>
+                      {recruitment.companyName}
+                    </Typo>
+                    <Typo element="p" size="16px">
+                      {language === 've' ? recruitment.vietnameseTitle : recruitment.koreanTitle}
+                    </Typo>
+                  </Flex>
+                  <Flex css={buttonGroupStyle}>
+                    <Button css={buttonStyle} onClick={() => goToApplicantsPage(companyId!, recruitment.recruitmentId)}>
+                      {t('myCompany.buttons.view_applicants')}
+                    </Button>
+                    <Button
+                      css={buttonStyle}
+                      onClick={() => handleCloseRecruitmentClick(recruitment.recruitmentId)}
+                      design={closedRecruitment[recruitment.recruitmentId] ? 'deactivate' : 'default'}
+                      disabled={closedRecruitment[recruitment.recruitmentId]}
+                    >
+                      {closedRecruitment[recruitment.recruitmentId]
+                        ? t('myCompany.buttons.closed_recruitment')
+                        : t('myCompany.buttons.close_recruitment')}
+                    </Button>
+                  </Flex>
+                </Flex>
+              </Td>
+            </tr>
+          )}
+        />
+      </tbody>
+    </Table>
+  );
+}
diff --git a/src/pages/myPage/employee/EmployeeMyPage.tsx b/src/pages/myPage/employee/EmployeeMyPage.tsx
index fd0c4ab..257f453 100644
--- a/src/pages/myPage/employee/EmployeeMyPage.tsx
+++ b/src/pages/myPage/employee/EmployeeMyPage.tsx
@@ -7,16 +7,21 @@ import EmployeeProfile from '../../../features/employee/myPage/EmployeeProfile';
 import { useGetMyApplication } from '@/apis/employee/hooks/useGetMyApplication';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
+import { userLocalStorage } from '@/utils/storage';
 
 export default function EmployeeMyPage() {
+  const { t } = useTranslation();
   const { data: myRecruitList } = useGetMyApplication();
   const navigate = useNavigate();
 
+  const profileImage = userLocalStorage.getUser()?.profileImage;
+
   return (
     <Layout>
       <InnerContainer style={{ justifyContent: 'center', width: '70%', padding: '60px 0' }}>
         <Section>
-          <EmployeeProfile />
+          <EmployeeProfile profileImage={profileImage} />
           <ColumnSection>
             <CardButton
               design="outlined"
@@ -24,7 +29,7 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.RESUME);
               }}
             >
-              <Typo bold>이력서 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_RESUME')}</Typo>
               <Icon.EmployeePage.Bag />
             </CardButton>
             <CardButton
@@ -33,7 +38,7 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.REGISTERSIGN);
               }}
             >
-              <Typo bold>사인 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_SIGN')}</Typo>
               <Icon.EmployeePage.Pen />
             </CardButton>
             <CardButton
@@ -42,14 +47,14 @@ export default function EmployeeMyPage() {
                 navigate(ROUTE_PATH.REGISTER_VISA);
               }}
             >
-              <Typo bold>외국인 번호 및 비자 발급 일자 등록</Typo>
+              <Typo bold>{t('employeeMyPage.REGISTER_VISA')}</Typo>
               <Icon.EmployeePage.Card />
             </CardButton>
           </ColumnSection>
         </Section>
         <Section>
           <Typo bold element="h3" size="20px" style={{ marginBottom: '24px' }}>
-            내가 지원한 공고
+            {t('employeeMyPage.MYRECRUITLIST')}
           </Typo>
           {myRecruitList && <MyRecruitList myRecruitList={myRecruitList} />}
         </Section>
diff --git a/src/features/companies/CompanyList/CompaniesTable/CompaniesTable.styles.ts b/src/pages/myPage/employer/Companies/CompaniesTable.styles.ts
similarity index 100%
rename from src/features/companies/CompanyList/CompaniesTable/CompaniesTable.styles.ts
rename to src/pages/myPage/employer/Companies/CompaniesTable.styles.ts
diff --git a/src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx b/src/pages/myPage/employer/Companies/CompaniesTable.tsx
similarity index 81%
rename from src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx
rename to src/pages/myPage/employer/Companies/CompaniesTable.tsx
index ae4e78b..707a6ae 100644
--- a/src/features/companies/CompanyList/CompaniesTable/CompaniesTable.tsx
+++ b/src/pages/myPage/employer/Companies/CompaniesTable.tsx
@@ -1,9 +1,10 @@
 import { Button, Flex, Icon, List, Image, Table, Th, Td } from '@/components/common';
 import { CompanyData } from '@/types';
-import CompanyInfo from '@/features/companies/CompanyInfo/CompanyInfo';
+import CompanyInfo from '@/pages/myPage/employer/Companies/CompanyInfo';
 import { cellStyle, imageSize, imageStyle } from './CompaniesTable.styles';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   companyList: CompanyData[];
@@ -11,8 +12,9 @@ type Props = {
 
 export default function CompaniesTable({ companyList }: Props) {
   const navigate = useNavigate();
+  const { t } = useTranslation();
 
-  const handleCompanyClick = (companyId: number) => {
+  const goToMyCompany = (companyId: number) => {
     navigate(ROUTE_PATH.MY_COMPANY.replace(':companyId', companyId.toString()));
   };
 
@@ -20,7 +22,7 @@ export default function CompaniesTable({ companyList }: Props) {
     <Table>
       <thead>
         <tr>
-          <Th>회사 정보</Th>
+          <Th>{t('employerMyPage.company_info')}</Th>
         </tr>
       </thead>
       <tbody>
@@ -38,7 +40,7 @@ export default function CompaniesTable({ companyList }: Props) {
                       brand={company.brand}
                       revenuePerYear={company.revenuePerYear}
                     />
-                    <Button design="textbutton" onClick={() => handleCompanyClick(company.companyId)}>
+                    <Button design="textbutton" onClick={() => goToMyCompany(company.companyId)}>
                       <Icon.Arrow.BigRightBlue />
                     </Button>
                   </Flex>
diff --git a/src/features/companies/CompanyInfo/CompanyInfo.styles.ts b/src/pages/myPage/employer/Companies/CompanyInfo.styles.ts
similarity index 92%
rename from src/features/companies/CompanyInfo/CompanyInfo.styles.ts
rename to src/pages/myPage/employer/Companies/CompanyInfo.styles.ts
index f6f9fc0..190deb5 100644
--- a/src/features/companies/CompanyInfo/CompanyInfo.styles.ts
+++ b/src/pages/myPage/employer/Companies/CompanyInfo.styles.ts
@@ -32,14 +32,10 @@ export const infoStyle = css`
       gap: '30px',
     },
     tablet: {
-      flexDirection: 'row',
-      justifyContent: 'center',
-      width: '100%',
-      gap: '10px',
-    },
-    mobile: {
       flexDirection: 'column',
+      justifyContent: 'center',
       alignItems: 'center',
+      width: '100%',
       gap: '10px',
     },
   })}
diff --git a/src/features/companies/CompanyInfo/CompanyInfo.tsx b/src/pages/myPage/employer/Companies/CompanyInfo.tsx
similarity index 92%
rename from src/features/companies/CompanyInfo/CompanyInfo.tsx
rename to src/pages/myPage/employer/Companies/CompanyInfo.tsx
index bef4fbe..058b84c 100644
--- a/src/features/companies/CompanyInfo/CompanyInfo.tsx
+++ b/src/pages/myPage/employer/Companies/CompanyInfo.tsx
@@ -5,7 +5,7 @@ import BrandIcon from '@assets/icons/companyInfo/brand.svg?react';
 import RevenueIcon from '@assets/icons/companyInfo/revenue.svg?react';
 import { companyNameStyle, infoStyle, infoWrapperStyle } from './CompanyInfo.styles';
 
-type Props = Pick<CompanyData, 'name' | 'industryOccupation' | 'brand' | 'revenuePerYear'>;
+type Props = Omit<CompanyData, 'companyId' | 'logoImage'>;
 
 export default function CompanyInfo({ name, industryOccupation, brand, revenuePerYear }: Props) {
   return (
diff --git a/src/features/companies/CompanyList/CompanyList.tsx b/src/pages/myPage/employer/Companies/CompanyList.tsx
similarity index 69%
rename from src/features/companies/CompanyList/CompanyList.tsx
rename to src/pages/myPage/employer/Companies/CompanyList.tsx
index e977566..844fe5a 100644
--- a/src/features/companies/CompanyList/CompanyList.tsx
+++ b/src/pages/myPage/employer/Companies/CompanyList.tsx
@@ -1,20 +1,23 @@
 import { Flex, Typo } from '@/components/common';
-import CompaniesTable from './CompaniesTable/CompaniesTable';
+import CompaniesTable from './CompaniesTable';
 import { CompanyData } from '@/types';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
   companyList: CompanyData[];
 };
 
 export default function CompanyList({ companyList }: Props) {
+  const { t } = useTranslation();
+
   return (
     <Flex direction="column" justifyContent="center" gap={{ y: '15px' }}>
       <Flex alignItems="center" gap={{ x: '20px' }}>
         <Typo element="h3" size="24px" style={{ fontWeight: 'bold' }}>
-          내 회사
+          {t('employerMyPage.my_companies')}
         </Typo>
         <Typo element="span" size="16px">
-          총 {companyList.length}곳
+          {t('employerMyPage.total_companies', { count: companyList.length })}
         </Typo>
       </Flex>
       <CompaniesTable companyList={companyList} />
diff --git a/src/pages/myPage/employer/EmPloyerMyPage.tsx b/src/pages/myPage/employer/EmPloyerMyPage.tsx
index d50a89b..0eb1227 100644
--- a/src/pages/myPage/employer/EmPloyerMyPage.tsx
+++ b/src/pages/myPage/employer/EmPloyerMyPage.tsx
@@ -1,19 +1,34 @@
 import { Button, Flex, Icon, InnerContainer, Spinner, Typo } from '@/components/common';
 import Layout from '@/features/layout';
-import CompanyList from '@/features/companies/CompanyList/CompanyList';
-import { flexStyle, innerContainerStyle, signButtonStyle, spinnerFlexStyle, typoStyle } from './EmployerMyPage.styles';
+import CompanyList from '@/pages/myPage/employer/Companies/CompanyList';
+import {
+  flexStyle,
+  innerContainerStyle,
+  buttonStyle,
+  spinnerFlexStyle,
+  typoStyle,
+  buttonGroupStyle,
+} from './EmployerMyPage.styles';
 import { useGetMyCompanies } from '@/apis/companies/hooks/useGetMyCompanies';
 import { useNavigate } from 'react-router-dom';
 import ROUTE_PATH from '@/routes/path';
+import { useTranslation } from 'react-i18next';
+import { userLocalStorage } from '@/utils/storage';
 
 export default function EmployerMyPage() {
   const { data: companyList, isLoading } = useGetMyCompanies();
+  const userName = userLocalStorage.getUser()?.name;
+  const { t } = useTranslation();
   const navigate = useNavigate();
 
-  const handleSignButtonClick = () => {
+  const goToSignPage = () => {
     navigate(ROUTE_PATH.REGISTERSIGN);
   };
 
+  const goToRegisterCompanyPage = () => {
+    navigate(ROUTE_PATH.REGISTERCOMPANY);
+  };
+
   return (
     <Layout>
       <div>
@@ -21,16 +36,26 @@ export default function EmployerMyPage() {
           <Flex direction="column" gap={{ y: '60px' }} css={{ position: 'relative', minHeight: '600px' }}>
             <Flex justifyContent="space-between" alignItems="center" css={flexStyle}>
               <Typo element="h2" size="36px" style={typoStyle} bold>
-                사장님, 안녕하세요!
+                {t('employerMyPage.greeting', { name: userName })}
               </Typo>
-              <Button design="outlined" css={signButtonStyle} onClick={handleSignButtonClick}>
-                <Flex justifyContent="space-between">
-                  <Typo size="20px" bold>
-                    사인 등록
-                  </Typo>
-                  <Icon.EmployeePage.Pen />
-                </Flex>
-              </Button>
+              <Flex justifyContent="flex-end" alignItems="center" gap={{ x: '20px' }} css={buttonGroupStyle}>
+                <Button design="outlined" css={buttonStyle} onClick={goToRegisterCompanyPage}>
+                  <Flex justifyContent="space-between">
+                    <Typo size="20px" bold>
+                      {t('employerMyPage.register_company')}
+                    </Typo>
+                    <Icon.EmployeePage.Bag />
+                  </Flex>
+                </Button>
+                <Button design="outlined" css={buttonStyle} onClick={goToSignPage}>
+                  <Flex justifyContent="space-between">
+                    <Typo size="20px" bold>
+                      {t('employerMyPage.register_sign')}
+                    </Typo>
+                    <Icon.EmployeePage.Pen />
+                  </Flex>
+                </Button>
+              </Flex>
             </Flex>
             {isLoading ? (
               <Flex justifyContent="center" alignItems="center" css={spinnerFlexStyle}>
diff --git a/src/pages/myPage/employer/EmployerMyPage.styles.ts b/src/pages/myPage/employer/EmployerMyPage.styles.ts
index 55667b9..22568ab 100644
--- a/src/pages/myPage/employer/EmployerMyPage.styles.ts
+++ b/src/pages/myPage/employer/EmployerMyPage.styles.ts
@@ -44,7 +44,25 @@ export const typoStyle = {
   }),
 };
 
-export const signButtonStyle = css`
+export const buttonGroupStyle = css`
+  ${responsiveStyle({
+    default: {
+      maxWidth: '650px',
+    },
+    tablet: {
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+      gap: '15px',
+      maxWidth: '320px',
+    },
+    mobile: {
+      alignItems: 'center',
+      gap: '10px',
+    },
+  })}
+`;
+
+export const buttonStyle = css`
   width: 300px;
   padding: 25px;
   border-radius: 8px;
diff --git a/src/pages/postNotice/PostNotice.tsx b/src/pages/postNotice/PostNotice.tsx
index acec63a..df27e8f 100644
--- a/src/pages/postNotice/PostNotice.tsx
+++ b/src/pages/postNotice/PostNotice.tsx
@@ -1,26 +1,53 @@
-import { useFetchPostNotice } from '@/apis/postNotice/hooks/usePostNotice';
+import { usePostNotice } from '@/apis/postNotice/hooks/usePostNotice';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
+import { NoticeRequestData } from '@/types';
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+const default_inputs: NoticeRequestData = {
+  title: '',
+  companyScale: '',
+  area: '',
+  salary: '',
+  workDuration: '',
+  workDays: '',
+  workType: '',
+  workHours: '',
+  requestedCareer: '',
+  majorBusiness: '',
+  eligibilityCriteria: '',
+  preferredConditions: '',
+  employerName: '',
+  companyName: '',
+};
+
 export default function PostNotice() {
-  const mutation = useFetchPostNotice();
+  const { t } = useTranslation();
+  const mutation = usePostNotice();
   const navigate = useNavigate();
 
-  const [inputs, setInputs] = useState({
-    salary: '',
-    workingDuration: '',
-    workDays: '',
-    workHours: '',
-    workType: '',
-    eligibilityCriteria: '',
-    preferredConditions: '',
-  });
+  const [inputs, setInputs] = useState({ ...default_inputs });
 
-  const { salary, workingDuration, workDays, workHours, workType, eligibilityCriteria, preferredConditions } = inputs;
+  const {
+    title,
+    companyScale,
+    area,
+    salary,
+    workDuration,
+    workDays,
+    workType,
+    workHours,
+    requestedCareer,
+    majorBusiness,
+    eligibilityCriteria,
+    preferredConditions,
+    employerName,
+    companyName,
+  } = inputs;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { value, name } = e.target;
@@ -49,31 +76,137 @@ export default function PostNotice() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="20px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                구인 글 업로드
+                {t('postNotice.TITLE')}
               </Typo>
               <InputContainer>
-                <Input label="급여" style={InputStyle} value={salary} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.TITLE')}
+                  name="title"
+                  style={InputStyle}
+                  value={title}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.COMPANY_NAME')}
+                  name="companyName"
+                  style={InputStyle}
+                  value={companyName}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.EMPLOYER_NAME')}
+                  name="employerName"
+                  style={InputStyle}
+                  value={employerName}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.COMPANY_SCALE')}
+                  name="companyScale"
+                  style={InputStyle}
+                  value={companyScale}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.AREA')}
+                  name="area"
+                  style={InputStyle}
+                  value={area}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.SALARY')}
+                  name="salary"
+                  style={InputStyle}
+                  value={salary}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.MAJOR_BUSINESS')}
+                  name="majorBusiness"
+                  style={InputStyle}
+                  value={majorBusiness}
+                  onChange={onChange}
+                ></Input>
+              </InputContainer>
+              <InputContainer>
+                <Input
+                  label={t('postNotice.WORKDURATION')}
+                  labelStyle={{ width: '100px', textAlign: 'left' }}
+                  name="workDuration"
+                  style={InputStyle}
+                  value={workDuration}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="근무기간" style={InputStyle} value={workingDuration} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.WORKDAYS')}
+                  name="workDays"
+                  style={InputStyle}
+                  value={workDays}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="근무요일" style={InputStyle} value={workDays} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.WORKHOURS')}
+                  name="workHours"
+                  style={InputStyle}
+                  value={workHours}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="근무시간" style={InputStyle} value={workHours} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.WORKTYPE')}
+                  name="workType"
+                  style={InputStyle}
+                  value={workType}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="고용형태" style={InputStyle} value={workType} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.REQUESTED_CAREER')}
+                  name="requestedCareer"
+                  style={InputStyle}
+                  value={requestedCareer}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="비자조건" style={InputStyle} value={eligibilityCriteria} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.ELIGIBILITY_CRITERIA')}
+                  name="eligibilityCriteria"
+                  style={InputStyle}
+                  value={eligibilityCriteria}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <InputContainer>
-                <Input label="우대사항" style={InputStyle} value={preferredConditions} onChange={onChange}></Input>
+                <Input
+                  label={t('postNotice.PREFERRED_CONDITIONS')}
+                  name="preferredConditions"
+                  style={InputStyle}
+                  value={preferredConditions}
+                  onChange={onChange}
+                ></Input>
               </InputContainer>
               <Button onClick={handlePostNotice} design="default" style={{ marginTop: '52px' }}>
-                등록하기
+                {t('postNotice.SUBMIT')}
               </Button>
             </Flex>
           </LineWrapper>
@@ -94,6 +227,9 @@ const InputContainer = styled.div`
   width: 700px;
   align-items: start;
   margin-top: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; // 요소들을 양쪽 끝으로 정렬
 `;
 
-const InputStyle = { width: '700px', height: '48px', marginTop: '12px' };
+const InputStyle = { width: '600px', height: '48px', marginTop: '12px' };
diff --git a/src/pages/recruit/RecruitCard.tsx b/src/pages/recruit/RecruitCard.tsx
index 4e29653..61b8e1d 100644
--- a/src/pages/recruit/RecruitCard.tsx
+++ b/src/pages/recruit/RecruitCard.tsx
@@ -1,9 +1,66 @@
-import { Button } from '@/components/common';
-import { Icon } from '@components/common';
+import { Button, Flex, Icon, Modal, Typo } from '@/components/common';
 import styled from '@emotion/styled';
-import type { RecruitCardProps } from './RecruitType';
+import type { RecruitCardProps, RequiredFieldCheckProps } from './RecruitType';
+import { useTranslation } from 'react-i18next';
+import useToggle from '@/hooks/useToggle';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { userLocalStorage } from '@/utils/storage';
+
+export default function RecruitCard({
+  koreanTitle,
+  companyScale,
+  area,
+  requestedCareer,
+  imageUrl,
+  requiredFieldCheck,
+  recruitmentId,
+}: RecruitCardProps) {
+  const { t } = useTranslation();
+  const [isToggle, toggle] = useToggle();
+  const [falseValues, setFalseValues] = useState<string[]>([]);
+  const nav = useNavigate();
+  const userType = userLocalStorage.getUser()?.type || '';
+  const checkHandler = (value: RequiredFieldCheckProps | undefined) => {
+    if (!value) return;
+    if (userType === 'employer') {
+      alert('고용주 계정으로는 지원할 수 없습니다.');
+      return;
+    }
+    const falseValues = Object.keys(value).filter((key) => !value[key as keyof RequiredFieldCheckProps]);
+    setFalseValues(falseValues);
+    if (falseValues.length === 0) {
+      nav(`/applyguide/${recruitmentId}`);
+    } else {
+      toggle();
+    }
+  };
+
+  const ModalText = (text: string[]) => {
+    const value = {
+      resumeExistence: t('recruit.Modal.resumeExistence'),
+      visaExistence: t('recruit.Modal.visaExistence'),
+      foreignerIdNumberExistence: t('recruit.Modal.foreignerIdNumberExistence'),
+    };
+    const newFalseValues = text.map((tex) => value[tex as keyof typeof value]);
+
+    return (
+      <Flex direction="column" justifyContent="center" alignItems="center" gap={{ y: '20px' }}>
+        <Flex justifyContent="center" gap={{ x: '10px' }}>
+          {newFalseValues.map((val) => (
+            <Typo bold size="20px" key={val}>
+              <p css={{ color: 'red' }}>{val}</p>
+            </Typo>
+          ))}
+        </Flex>
+        <Typo size="20px">
+          <p css={{ color: 'red' }}>{t('recruit.Modal.alert')}</p>
+        </Typo>
+        <Typo>{t('recruit.Modal.ment')}</Typo>
+      </Flex>
+    );
+  };
 
-export default function RecruitCard({ koreanTitle, companyScale, area, requestedCareer, imageUrl }: RecruitCardProps) {
   return (
     <RecruitContainer>
       <CompanyImg alt="companyImg" src={imageUrl} />
@@ -13,7 +70,14 @@ export default function RecruitCard({ koreanTitle, companyScale, area, requested
           <p>{`${companyScale} | ${area} | ${requestedCareer}`}</p>
         </Info_p>
         <Info_Btn>
-          <CustomBtn background="#0a65cc">지원하기</CustomBtn>
+          <CustomBtn
+            background="#0a65cc"
+            onClick={() => {
+              checkHandler(requiredFieldCheck);
+            }}
+          >
+            {t('recruit.recruit')}
+          </CustomBtn>
           <CustomBtn color="0a65cc" width="10px">
             <div>
               <Icon.Social.Instagram />
@@ -21,6 +85,22 @@ export default function RecruitCard({ koreanTitle, companyScale, area, requested
           </CustomBtn>
         </Info_Btn>
       </Info_Div>
+      {isToggle && (
+        <Modal
+          textChildren={ModalText(falseValues)}
+          buttonChildren={
+            <Flex gap={{ x: '10px' }} justifyContent="center">
+              <CustomBtn background="#0a65cc" onClick={toggle}>
+                {t('recruit.Modal.close')}
+              </CustomBtn>
+              <CustomBtn background="#0a65cc" onClick={() => nav('/employee-my-page')}>
+                {t('recruit.Modal.myPage')}
+              </CustomBtn>
+            </Flex>
+          }
+          onClose={toggle}
+        />
+      )}
     </RecruitContainer>
   );
 }
@@ -98,7 +178,7 @@ const CustomBtn = styled(Button)<{ background?: string; color?: string; width?:
   background: ${(props) => props.background || ''};
   color: ${(props) => props.color || 'white'};
   width: ${(props) => props.width || '190px'};
-  height: 56px;
+  height: 50px;
   border-radius: 4px;
   display: flex;
   &:hover {
diff --git a/src/pages/recruit/RecruitDetail.tsx b/src/pages/recruit/RecruitDetail.tsx
index 855c714..933a485 100644
--- a/src/pages/recruit/RecruitDetail.tsx
+++ b/src/pages/recruit/RecruitDetail.tsx
@@ -1,6 +1,7 @@
 import { type SectionProps, type RecruitDetailProps } from './RecruitType';
 import styled from '@emotion/styled';
 import { Flex } from '@/components/common';
+import { useTranslation } from 'react-i18next';
 
 const SectionWithTitle = ({ title, children }: SectionProps) => (
   <Section>
@@ -35,9 +36,10 @@ export default function RecruitDetail({
   workHours,
   salary,
 }: RecruitDetailProps) {
+  const { t } = useTranslation();
   return (
     <RecruitDetailContainer>
-      <SectionWithTitle title="근무조건">
+      <SectionWithTitle title={t('recruit.conditions')}>
         <Flex
           css={{
             '@media (max-width: 1024px)': {
@@ -46,10 +48,10 @@ export default function RecruitDetail({
           }}
         >
           <Flex direction="column" gap={{ y: '15px' }}>
-            <SectionConditions title="급여">{salary}</SectionConditions>
-            <SectionConditions title="근무기간">{workDuration}</SectionConditions>
-            <SectionConditions title="근무요일">{workDays}</SectionConditions>
-            <SectionConditions title="근무시간">{workHours}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.salary')}>{salary}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.workDuration')}>{workDuration}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.workDays')}>{workDays}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.workHours')}>{workHours}</SectionConditions>
           </Flex>
           <Flex
             direction="column"
@@ -60,26 +62,26 @@ export default function RecruitDetail({
               },
             }}
           >
-            <SectionConditions title="대표">{employerName}</SectionConditions>
-            <SectionConditions title="회사명">{companyName}</SectionConditions>
-            <SectionConditions title="고용형태">{workType}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.employerName')}>{employerName}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.companyName')}>{companyName}</SectionConditions>
+            <SectionConditions title={t('recruit.conditions_detail.workType')}>{workType}</SectionConditions>
           </Flex>
         </Flex>
       </SectionWithTitle>
-      <SectionWithTitle title="지원자격">
-        {eligibilityCriteria.map((data) => {
+      <SectionWithTitle title={t('recruit.eligibilityRequirements')}>
+        {eligibilityCriteria?.map((data) => {
           return <li key={data.id}>{data.text}</li>;
         })}
       </SectionWithTitle>
-      <SectionWithTitle title="상세설명">{detailedDescription}</SectionWithTitle>
-      <SectionWithTitle title="주요업무">
-        {majorBusiness.map((data) => {
+      <SectionWithTitle title={t('recruit.detailedDescription')}>{detailedDescription}</SectionWithTitle>
+      <SectionWithTitle title={t('recruit.mainResponsibilities')}>
+        {majorBusiness?.map((data) => {
           return <li key={data.id}>{data.text}</li>;
         })}
       </SectionWithTitle>
 
-      <SectionWithTitle title="우대사항">
-        {preferredConditions.map((data) => {
+      <SectionWithTitle title={t('recruit.PreferredRequirements')}>
+        {preferredConditions?.map((data) => {
           return <li key={data.id}>{data.text}</li>;
         })}
       </SectionWithTitle>
diff --git a/src/pages/recruit/RecruitType.ts b/src/pages/recruit/RecruitType.ts
index 5c33f24..210e32a 100644
--- a/src/pages/recruit/RecruitType.ts
+++ b/src/pages/recruit/RecruitType.ts
@@ -7,9 +7,11 @@ export interface RecruitCardProps {
   area: string;
   requestedCareer: string;
   imageUrl: string;
+  recruitmentId: string;
+  requiredFieldCheck?: RequiredFieldCheckProps;
 }
 
-export interface Item {
+interface Item {
   id: number;
   text: string;
 }
@@ -36,3 +38,9 @@ export interface SectionProps {
   title: string;
   children: ReactNode;
 }
+
+export interface RequiredFieldCheckProps {
+  resumeExistence: boolean;
+  visaExistence: boolean;
+  foreignerIdNumberExistence: boolean;
+}
diff --git a/src/pages/recruit/index.tsx b/src/pages/recruit/index.tsx
index 5a3688e..f1bfaa1 100644
--- a/src/pages/recruit/index.tsx
+++ b/src/pages/recruit/index.tsx
@@ -5,11 +5,13 @@ import Layout from '@/features/layout';
 import { useParams } from 'react-router-dom';
 import { Spinner } from '@/components/common';
 import { useGetRecruitmentsDetail } from '@/apis/recruitmentsDetail/useRecruitmentsDetail';
+import { useGetRequiredFieldCheck } from '@/apis/recruitmentsDetail/useRequiredFieldCheck';
 
 export default function Recruit() {
-  const { postId = '1' } = useParams();
+  const { recruitmentId = '1' } = useParams();
 
-  const { data, isLoading } = useGetRecruitmentsDetail(postId);
+  const { data, isLoading } = useGetRecruitmentsDetail(Number(recruitmentId));
+  const { data: requiredFieldCheck } = useGetRequiredFieldCheck(Number(recruitmentId));
 
   if (isLoading || !data) {
     return <Spinner />;
@@ -18,7 +20,7 @@ export default function Recruit() {
   return (
     <Layout>
       <Container>
-        <RecruitCard {...data} />
+        <RecruitCard {...data} requiredFieldCheck={requiredFieldCheck} recruitmentId={recruitmentId} />
         <Divider />
         <RecruitDetail {...data} />
       </Container>
diff --git a/src/pages/recruit/stories/RecruitCard.stories.tsx b/src/pages/recruit/stories/RecruitCard.stories.tsx
index c25c41f..513380b 100644
--- a/src/pages/recruit/stories/RecruitCard.stories.tsx
+++ b/src/pages/recruit/stories/RecruitCard.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import RecruitCard from '../RecruitCard';
 import { RecruitCardProps } from '../RecruitType';
-import cat from '@/apis/recruitmentsDetail/cat.jpg';
+import cat from '@/apis/recruitmentsDetail/mock/cat.jpg';
 
 const meta: Meta<RecruitCardProps> = {
   title: 'PAGES/Recruit/RecruitCard',
diff --git a/src/pages/recruit/stories/index.stories.tsx b/src/pages/recruit/stories/index.stories.tsx
index 99f9ca0..959d830 100644
--- a/src/pages/recruit/stories/index.stories.tsx
+++ b/src/pages/recruit/stories/index.stories.tsx
@@ -1,10 +1,16 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Recruit from '..';
+import { recruitmentsDetailMockHandler } from '@/apis/recruitmentsDetail/mock/recruitmentsDetailMockHandler';
 
 const meta: Meta<typeof Recruit> = {
   title: 'PAGES/Recruit',
   component: Recruit,
   tags: ['autodocs'],
+  parameters: {
+    msw: {
+      handlers: { ...recruitmentsDetailMockHandler },
+    },
+  },
 };
 
 export default meta;
diff --git a/src/pages/registerCompany/RegisterCompany.tsx b/src/pages/registerCompany/RegisterCompany.tsx
index f461f5b..dfe3a5b 100644
--- a/src/pages/registerCompany/RegisterCompany.tsx
+++ b/src/pages/registerCompany/RegisterCompany.tsx
@@ -1,22 +1,25 @@
-import { useFetchPostCompany } from '@/apis/registerCompany/useRegisterCompany';
+import { usePostCompany } from '@/apis/registerCompany/hooks/useRegisterCompany';
 import { Button, Flex, Input, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import ROUTE_PATH from '@/routes/path';
 import styled from '@emotion/styled';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+const default_inputs = {
+  name: '',
+  industryOccupation: '',
+  brand: '',
+  revenuePerYear: 0,
+  logoImage: '',
+};
+
 export default function RegisterCompany() {
-  const mutation = useFetchPostCompany();
+  const { t } = useTranslation();
+  const mutation = usePostCompany();
   const navigate = useNavigate();
-
-  const [inputs, setInputs] = useState({
-    name: '',
-    industryOccupation: '',
-    brand: '',
-    revenuePerYear: 0,
-    logoImage: '',
-  });
+  const [inputs, setInputs] = useState({ ...default_inputs });
 
   const { name, industryOccupation, brand, revenuePerYear, logoImage } = inputs;
 
@@ -34,7 +37,6 @@ export default function RegisterCompany() {
         navigate(ROUTE_PATH.HOME);
       },
       onError: () => {
-        // 이부분 에러처리 결정해야함.
         alert('값이 정상적으로 저장되지 않았습니다.');
       },
     });
@@ -46,12 +48,13 @@ export default function RegisterCompany() {
           <LineWrapper>
             <Flex direction="column" justifyContent="space-between" alignItems="center" style={{ width: '100%' }}>
               <Typo element="h1" size="24px" style={{ fontWeight: 'bold', marginBottom: '24px' }}>
-                회사 등록
+                {t('registerCompany.TITLE')}
               </Typo>
               <InputWrapper>
                 <InputContainer>
                   <Input
-                    label="회사 이미지 업로드(선택)"
+                    label={t('registerCompany.LOGOIMAGE')}
+                    name="logoImage"
                     type="file"
                     value={logoImage}
                     onChange={onChange}
@@ -59,21 +62,45 @@ export default function RegisterCompany() {
                   ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="회사명" value={name} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('registerCompany.COMPANYNAME')}
+                    name="name"
+                    value={name}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="업직종" value={industryOccupation} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('registerCompany.INDUSTRY_OCCUPATION')}
+                    name="industryOccupation"
+                    value={industryOccupation}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="브랜드" value={brand} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('registerCompany.BRAND')}
+                    name="brand"
+                    value={brand}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
                 <InputContainer>
-                  <Input label="연 평균 매출액" value={revenuePerYear} onChange={onChange} style={InputStyle}></Input>
+                  <Input
+                    label={t('registerCompany.REVENUE_PERYEAR')}
+                    name="revenuePerYear"
+                    value={revenuePerYear}
+                    onChange={onChange}
+                    style={InputStyle}
+                  ></Input>
                 </InputContainer>
               </InputWrapper>
               <ButtonWrapper>
-                <Button design="default" onClick={handlePostCompany} style={{}}>
-                  등록하기
+                <Button design="default" onClick={handlePostCompany}>
+                  {t('registerCompany.SUBMIT')}
                 </Button>
               </ButtonWrapper>
             </Flex>
diff --git a/src/pages/registerSign/RegisterSign.tsx b/src/pages/registerSign/RegisterSign.tsx
index ec18201..52b786d 100644
--- a/src/pages/registerSign/RegisterSign.tsx
+++ b/src/pages/registerSign/RegisterSign.tsx
@@ -6,14 +6,17 @@ import styled from '@emotion/styled';
 import Layout from '@/features/layout';
 import { Flex, Button } from '@/components/common';
 import { FetchRegisterSign } from '@/apis/registerSign/useRegisterSign';
+import { useTranslation } from 'react-i18next';
+import { userLocalStorage } from '@/utils/storage';
 
 export default function RegisterSign() {
+  const userType = userLocalStorage.getUser()?.type || '';
   const signCanvas = useRef<ReactSignatureCanvas>(null);
-
+  const { t } = useTranslation();
   const clear = () => {
     signCanvas.current?.clear();
   };
-  const mutation = FetchRegisterSign();
+  const mutation = FetchRegisterSign(userType);
 
   const convertDataUrlToFile = () => {
     const dataURL = signCanvas.current?.toDataURL('image/png');
@@ -55,8 +58,8 @@ export default function RegisterSign() {
           />
         </WrapperCanvas>
         <Flex justifyContent="center" gap={{ x: ' 20px' }}>
-          <CustomBtn onClick={clear}>초기화</CustomBtn>
-          <CustomBtn onClick={() => onSave()}>사인 등록하기</CustomBtn>
+          <CustomBtn onClick={clear}>{t('registerSign.reset')}</CustomBtn>
+          <CustomBtn onClick={() => onSave()}>{t('registerSign.registerSign')}</CustomBtn>
         </Flex>
       </Flex>
     </Layout>
diff --git a/src/pages/registerVisa/RegisterVisa.styles.ts b/src/pages/registerVisa/RegisterVisa.styles.ts
index 318aed3..a0f19c7 100644
--- a/src/pages/registerVisa/RegisterVisa.styles.ts
+++ b/src/pages/registerVisa/RegisterVisa.styles.ts
@@ -1,7 +1,6 @@
 import { palettes } from '@/assets/styles/global/palettes';
 import { responsiveStyle } from '@/utils/responsive';
 import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 
 export const innerContainerStyle = css`
   ${responsiveStyle({
@@ -22,16 +21,12 @@ export const innerContainerStyle = css`
 `;
 
 export const titleStyle = {
-  fontWeight: 'bold',
-};
-
-export const BreakableText = styled.span`
-  ${responsiveStyle({
+  ...responsiveStyle({
     default: {
-      display: 'inline',
+      fontWeight: 'bold',
     },
     mobile: {
-      display: 'block',
+      padding: '0 50px',
     },
-  })}
-`;
+  }),
+};
diff --git a/src/pages/registerVisa/RegisterVisa.tsx b/src/pages/registerVisa/RegisterVisa.tsx
index 2df9e07..9339257 100644
--- a/src/pages/registerVisa/RegisterVisa.tsx
+++ b/src/pages/registerVisa/RegisterVisa.tsx
@@ -1,9 +1,12 @@
 import { Flex, InnerContainer, Typo } from '@/components/common';
 import Layout from '@/features/layout';
 import VisaRegistrationForm from '@/features/registerVisa/VisaRegistrationForm';
-import { BreakableText, innerContainerStyle, titleStyle } from './RegisterVisa.styles';
+import { innerContainerStyle, titleStyle } from './RegisterVisa.styles';
+import { useTranslation } from 'react-i18next';
 
 export default function RegisterVisa() {
+  const { t } = useTranslation();
+
   return (
     <Layout>
       <div>
@@ -16,7 +19,7 @@ export default function RegisterVisa() {
             css={{ height: '100%' }}
           >
             <Typo element="h2" size="24px" style={titleStyle}>
-              외국인 번호 및<BreakableText> 비자 발급 일자 등록</BreakableText>
+              {t('registerVisa.title')}
             </Typo>
             <VisaRegistrationForm />
           </Flex>
diff --git a/src/pages/resume/Resume.tsx b/src/pages/resume/Resume.tsx
index 5d165f9..4d271ea 100644
--- a/src/pages/resume/Resume.tsx
+++ b/src/pages/resume/Resume.tsx
@@ -6,8 +6,12 @@ import { useForm, SubmitHandler } from 'react-hook-form';
 import { type ResumeInfo } from './ResumeType';
 import useToggle from '@/hooks/useToggle';
 import { useState } from 'react';
+import { FetchResume } from '@/apis/resume/useResumeHook';
+import { useTranslation } from 'react-i18next';
 
 export default function Resume() {
+  const { t } = useTranslation();
+
   const {
     register,
     handleSubmit,
@@ -15,7 +19,7 @@ export default function Resume() {
   } = useForm<ResumeInfo>();
   const [isToggle, toggle] = useToggle();
   const [formData, setFormData] = useState<ResumeInfo | null>(null);
-
+  const mutation = FetchResume();
   const onSubmit: SubmitHandler<ResumeInfo> = (data) => {
     setFormData(data);
     toggle();
@@ -23,17 +27,19 @@ export default function Resume() {
 
   const handleResumeSubmit = () => {
     if (formData) {
-      console.log(formData);
-      alert('제출 완료!');
+      const data = JSON.stringify(formData);
+      mutation.mutate({ data });
+
       toggle();
     }
   };
+
   return (
     <Layout>
       <Flex justifyContent="center" alignItems="center">
         <ResumeCard>
           <Typo size="24px" bold={true}>
-            이력서 작성
+            {t('resume.title')}
           </Typo>
           <CustomForm onSubmit={handleSubmit(onSubmit)}>
             <Flex
@@ -49,40 +55,40 @@ export default function Resume() {
               <Flex direction="column" css={{ flex: 7, width: '100%' }} gap={{ y: '45px' }}>
                 <InputResumeInfo
                   id="applicantName"
-                  label="이름"
+                  label={t('resume.name')}
                   register={register}
                   errors={errors}
-                  placeholder="이름을 입력하세요."
+                  placeholder={t('resume.ResumeDescription.name')}
                 />
 
                 <InputResumeInfo
                   id="address"
-                  label="주소"
+                  label={t('resume.address')}
                   register={register}
                   errors={errors}
-                  placeholder="주소를 입력하세요."
+                  placeholder={t('resume.ResumeDescription.address')}
                 />
                 <InputResumeInfo
                   id="phoneNumber"
-                  label="번호"
+                  label={t('resume.phoneNumber')}
                   register={register}
                   errors={errors}
                   pattern={/^010-\d{4}-\d{4}$/}
-                  patternMessage="올바른 전화번호 형식이 아닙니다. (예: 010-0000-0000)"
-                  placeholder="010-0000-0000 형식의 번호를 입력하세요. "
+                  patternMessage={t('resume.ResumeDescription.phoneNumberError')}
+                  placeholder={t('resume.ResumeDescription.phoneNumber')}
                 />
                 <InputResumeInfo
                   id="career"
-                  label="경력"
+                  label={t('resume.career')}
                   register={register}
                   errors={errors}
-                  placeholder="경력을 입력하세요."
+                  placeholder={t('resume.ResumeDescription.career')}
                 />
                 <TextareaResumeInfo
                   id="introduction"
                   register={register}
                   errors={errors}
-                  placeholder="자기소개를 입력하세요."
+                  placeholder={t('resume.ResumeDescription.introduction')}
                 />
               </Flex>
               {/* 라디오 */}
@@ -100,24 +106,24 @@ export default function Resume() {
                   gap={{ y: '10px' }}
                 >
                   <Typo size="18px" bold={true}>
-                    한국어 실력
+                    {t('resume.koreanLevel')}
                   </Typo>
-                  <SelectKoreanLevel level="초급" register={register} />
-                  <SelectKoreanLevel level="중급" register={register} />
-                  <SelectKoreanLevel level="고급" register={register} />
+                  <SelectKoreanLevel level={t('resume.koreanLevel_1')} register={register} />
+                  <SelectKoreanLevel level={t('resume.koreanLevel_2')} register={register} />
+                  <SelectKoreanLevel level={t('resume.koreanLevel_3')} register={register} />
                   {errors.koreanLanguageLevel && (
-                    <p css={{ color: 'red', marginTop: '10px' }}>한국어 실력을 선택해주세요!</p>
+                    <p css={{ color: 'red', marginTop: '10px' }}>{t('resume.ResumeDescription.koreanLevel')}</p>
                   )}
                 </Flex>
               </div>
             </Flex>
-            <CustomBtn type="submit">제출하기</CustomBtn>
+            <CustomBtn type="submit">{t('resume.submit')}</CustomBtn>
           </CustomForm>
         </ResumeCard>
         {isToggle && (
           <Modal
-            textChildren={<p css={{ fontSize: '24px', margin: '30px 0' }}>정말 제출하시겠습니까?</p>}
-            buttonChildren={<CustomBtn onClick={handleResumeSubmit}>제출하기</CustomBtn>}
+            textChildren={<p css={{ fontSize: '24px', margin: '30px 0' }}>{t('resume.btnSubmit')}</p>}
+            buttonChildren={<CustomBtn onClick={handleResumeSubmit}>{t('resume.submit')}</CustomBtn>}
             onClose={toggle}
           />
         )}
diff --git a/src/pages/resume/ResumeInput.tsx b/src/pages/resume/ResumeInput.tsx
index 5db7ce3..82c6cfe 100644
--- a/src/pages/resume/ResumeInput.tsx
+++ b/src/pages/resume/ResumeInput.tsx
@@ -2,6 +2,7 @@ import { Flex } from '@/components/common';
 import styled from '@emotion/styled';
 import { UseFormRegister, FieldErrors } from 'react-hook-form';
 import { type ResumeInfo } from './ResumeType';
+import { useTranslation } from 'react-i18next';
 
 interface InputType {
   id: keyof ResumeInfo;
@@ -23,6 +24,7 @@ export function SelectKoreanLevel({ level, register }: { level: string; register
 }
 
 export function InputResumeInfo({ id, label, register, pattern, errors, patternMessage, placeholder }: InputType) {
+  const { t } = useTranslation();
   return (
     <Flex direction="column" gap={{ y: '20px' }}>
       <Flex gap={{ x: '10px' }} alignItems="center" justifyContent="space-between">
@@ -31,22 +33,29 @@ export function InputResumeInfo({ id, label, register, pattern, errors, patternM
         </label>
         <CustomInput id={id} {...register(id, { required: true, pattern })} placeholder={placeholder} />
       </Flex>
-      {errors[id]?.type === 'required' && <Warring>{label}을(를) 입력해주세요!</Warring>}
+      {errors[id]?.type === 'required' && (
+        <Warring>
+          {label}
+          {t('resume.errors')}
+        </Warring>
+      )}
       {errors[id]?.type === 'pattern' && <Warring>{patternMessage}</Warring>}
     </Flex>
   );
 }
 
 export function TextareaResumeInfo({ id, register, errors, placeholder }: InputType) {
+  const { t } = useTranslation();
+
   return (
     <Flex direction="column" gap={{ y: '20px' }}>
       <Flex direction="column" css={{ width: '100%' }} gap={{ y: '20px' }}>
         <label htmlFor={id} css={{ fontSize: '18px', fontWeight: 'bold' }}>
-          자기소개
+          {t('resume.introduction')}
         </label>
         <CustomTextarea id={id} {...register('introduction', { required: true })} placeholder={placeholder} />
       </Flex>
-      {errors[id]?.type === 'required' && <Warring>자기소개를 입력해주세요!</Warring>}
+      {errors[id]?.type === 'required' && <Warring> {t('resume.ResumeDescription.introduction')}</Warring>}
     </Flex>
   );
 }
diff --git a/src/routes/path.ts b/src/routes/path.ts
index ac90f9a..607e708 100644
--- a/src/routes/path.ts
+++ b/src/routes/path.ts
@@ -7,11 +7,11 @@ export const AUTH = {
 export const APPLY = {
   GUIDE: '/applyguide',
   APPLYPAGE: '/apply',
-}; 
+} as const;
 
 export const MY_PAGE = {
   EMPLOYER: '/employer-my-page',
-};
+} as const;
 
 export const EMPLOYEE = {
   EMPLOYEE_PAGE: '/employee-my-page',
@@ -23,12 +23,13 @@ export const CONTRACT = {
 } as const;
 
 const ROUTE_PATH = {
+  PREV: -1,
   HOME: '/',
-  RECRUIT: '/recruit/:postId',
+  RECRUIT: '/recruit/:recruitmentId',
   POST_NOTICE: '/post-notice',
   APPLY,
   AUTH,
-  APPLICANTS: '/company/:companyId/recruitment/:recruitmentId/applicants',
+  APPLICANTS: '/applicants/:companyId/:recruitmentId',
   EMPLOYEE,
   RESUME: '/resume',
   MY_COMPANY: '/my-company/:companyId',
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index befe1d3..b7273dc 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -10,8 +10,6 @@ import PostNotice from '@/pages/postNotice/PostNotice';
 import Home from '@/pages/home';
 import ApplyGuide from '@/pages/apply/applyguide/ApplyGuide';
 import ApplyPage from '@/pages/apply/applypage/ApplyPage';
-import MyCompany from '@/pages/myCompany/MyCompany';
-import Applicants from '@/pages/applicants/Applicants';
 import Resume from '@/pages/resume/Resume';
 import EmployeeMyPage from '@/pages/myPage/employee/EmployeeMyPage';
 import RegisterSign from '@/pages/registerSign/RegisterSign';
@@ -19,6 +17,8 @@ import RegisterCompany from '@/pages/registerCompany/RegisterCompany';
 import EmployerMyPage from '@/pages/myPage/employer/EmPloyerMyPage';
 import EmployeeContract from '@/pages/contract/EmployeeContract/EmployeeContract';
 import EmployerContract from '@/pages/contract/EmployerContract/EmployerContract';
+import MyCompanyPage from '@/pages/myCompanyPage/MyCompanyPage';
+import ApplicantsPage from '@/pages/applicantsPage/ApplicantsPage';
 
 export const router = createBrowserRouter([
   {
@@ -43,8 +43,8 @@ export const router = createBrowserRouter([
       { path: ROUTE_PATH.REGISTER_VISA, element: <RegisterVisa /> },
       { path: ROUTE_PATH.EMPLOYEE.EMPLOYEE_PAGE, element: <EmployeeMyPage /> },
       { path: ROUTE_PATH.POST_NOTICE, element: <PostNotice /> },
-      { path: ROUTE_PATH.MY_COMPANY, element: <MyCompany /> },
-      { path: ROUTE_PATH.APPLICANTS, element: <Applicants /> },
+      { path: ROUTE_PATH.MY_COMPANY, element: <MyCompanyPage /> },
+      { path: ROUTE_PATH.APPLICANTS, element: <ApplicantsPage /> },
       { path: ROUTE_PATH.RESUME, element: <Resume /> },
       { path: ROUTE_PATH.MY_PAGE.EMPLOYER, element: <EmployerMyPage /> },
       { path: ROUTE_PATH.REGISTERSIGN, element: <RegisterSign /> },
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index cc00f42..72bf10d 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -25,6 +25,7 @@ export type ForeignerData = {
 export type UserData = {
   type: 'first' | 'employee' | 'employer';
   profileImage: string;
+  name: string;
 };
 
 // 백엔드에서 정하는 값에 따라 key 바꾸면 됨
@@ -32,7 +33,7 @@ export const State = {
   LetsSign: '근로계약서 서명하기',
   Closed: '채용 마감',
   Waiting: '지원서 검토중',
-  Completed: '채용 완료',
+  Completed: '근로계약서 다운로드',
 } as const;
 
 export type StateProps = keyof typeof State;
@@ -56,4 +57,22 @@ export type RecruitmentItem = {
   salary: number;
   workHours: string;
   area: string;
+  hiring?: boolean;
+};
+
+export type NoticeRequestData = {
+  title?: string;
+  companyScale?: string;
+  area?: string;
+  salary?: string;
+  workDuration?: string;
+  workDays?: string;
+  workType?: string;
+  workHours?: string;
+  requestedCareer?: string;
+  majorBusiness?: string;
+  eligibilityCriteria?: string;
+  preferredConditions?: string;
+  employerName?: string;
+  companyName?: string;
 };
diff --git a/src/types/select.ts b/src/types/select.ts
index c20568a..38dc7e5 100644
--- a/src/types/select.ts
+++ b/src/types/select.ts
@@ -1,5 +1,5 @@
 export type SelectOptionType = {
   value: string;
   text: string;
-  action: () => void;
+  action?: () => void;
 };
diff --git a/src/utils/storage.ts b/src/utils/storage.ts
new file mode 100644
index 0000000..bc1757c
--- /dev/null
+++ b/src/utils/storage.ts
@@ -0,0 +1,33 @@
+import { UserData } from '@/types';
+
+const STORAGE_KEYS = {
+  USER: 'user',
+  TOKEN: 'token',
+  LANGUAGE: 'language',
+};
+
+export const userLocalStorage = {
+  getUser: (): UserData | undefined => {
+    const user = localStorage.getItem(STORAGE_KEYS.USER);
+    return user ? JSON.parse(user) : undefined;
+  },
+  setUser: (user: UserData) => {
+    localStorage.setItem(STORAGE_KEYS.USER, JSON.stringify(user));
+  },
+  removeUser: () => {
+    localStorage.removeItem(STORAGE_KEYS.USER);
+  },
+
+  removeToken: () => {
+    localStorage.removeItem(STORAGE_KEYS.TOKEN);
+  },
+
+  getLanguage: (): string | null => {
+    const language = localStorage.getItem(STORAGE_KEYS.LANGUAGE);
+    return language ? JSON.parse(language).state.selectedOption.value : null;
+  },
+  setLanguage: (language: string) => {
+    const languageObj = JSON.stringify({ state: { selectedOption: { value: language } } });
+    localStorage.setItem(STORAGE_KEYS.LANGUAGE, languageObj);
+  },
+};