diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..5d68d98
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,42 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - main
+    types: [opened, synchronize, reopened]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Type check
+        run: pnpm run type-check
+
+      - name: Lint check
+        run: pnpm run lint:check
+
+      - name: Format check
+        run: pnpm run format:check
+
+      - name: Build
+        run: pnpm run build
diff --git a/.gitignore b/.gitignore
index 2cd80cc..cb468b1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,7 +29,6 @@ yarn-error.log*
 .cache
 
 # IDE
-.vscode
 .idea
 
 # Temporary files
@@ -46,8 +45,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..985d918
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,41 @@
+{
+  "cSpell.words": [
+    "ACMRTUXB",
+    "Cantarell",
+    "coments",
+    "eslintcache",
+    "Fira",
+    "isrc",
+    "Neue",
+    "Pretendard",
+    "Segoe",
+    "TTFB"
+  ],
+  "css.lint.unknownAtRules": "ignore",
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.suggest.autoImports": true,
+  "typescript.preferences.includePackageJsonAutoImports": "on",
+  "typescript.suggest.paths": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.configPath": "./.prettierrc",
+  "prettier.requireConfig": true,
+  "prettier.useEditorConfig": false,
+  "typescript.format.enable": false,
+  "javascript.format.enable": false
+}
diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets
new file mode 100644
index 0000000..e3ac414
--- /dev/null
+++ b/.vscode/snippets.code-snippets
@@ -0,0 +1,77 @@
+{
+  "React Arrow Function Component": {
+    "prefix": "rafce",
+    "body": [
+      "import type { JSX } from 'react';",
+      "",
+      "const ${1:${TM_FILENAME_BASE}} = (): JSX.Element => {",
+      "  return (",
+      "    <div>",
+      "      $2",
+      "    </div>",
+      "  );",
+      "};",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}};",
+    ],
+    "description": "React Arrow Function Component with JSX.Element return type",
+  },
+  "React Arrow Function Component with Props": {
+    "prefix": "rafcep",
+    "body": [
+      "import type { JSX } from 'react';",
+      "",
+      "interface ${1:${TM_FILENAME_BASE}}Props {",
+      "  $2",
+      "}",
+      "",
+      "const ${1:${TM_FILENAME_BASE}} = ({ $3 }: ${1:${TM_FILENAME_BASE}}Props): JSX.Element => {",
+      "  return (",
+      "    <div>",
+      "      $4",
+      "    </div>",
+      "  );",
+      "};",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}};",
+    ],
+    "description": "React Arrow Function Component with Props and JSX.Element return type",
+  },
+  "React Functional Component": {
+    "prefix": "rfc",
+    "body": [
+      "import type { JSX } from 'react';",
+      "",
+      "function ${1:${TM_FILENAME_BASE}}(): JSX.Element {",
+      "  return (",
+      "    <div>",
+      "      $2",
+      "    </div>",
+      "  );",
+      "}",
+      "",
+      "export default ${1:${TM_FILENAME_BASE}};",
+    ],
+    "description": "React Functional Component with JSX.Element return type",
+  },
+  "React Hook": {
+    "prefix": "rhook",
+    "body": [
+      "import { useState } from 'react';",
+      "",
+      "const use${1:Hook} = (): ${2:ReturnType} => {",
+      "  const [${3:state}, set${3/(.*)/${3:/capitalize}/}] = useState${4:<StateType>}(${5:initialValue});",
+      "",
+      "  $6",
+      "",
+      "  return {",
+      "    ${3:state},",
+      "    set${3/(.*)/${3:/capitalize}/},$7",
+      "  };",
+      "};",
+      "",
+      "export default use${1:Hook};",
+    ],
+    "description": "Custom React Hook with TypeScript",
+  },
+}
diff --git a/package.json b/package.json
index 64d0034..d77c9bd 100644
--- a/package.json
+++ b/package.json
@@ -31,8 +31,16 @@
     ]
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.1.2",
+    "@mui/material": "^7.1.2",
+    "@tanstack/react-query": "^5.81.2",
+    "firebase": "^11.9.1",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.2",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
@@ -42,9 +50,11 @@
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^8.34.1",
     "@typescript-eslint/parser": "^8.34.1",
     "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-import": "^1.13.8",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.5",
     "eslint-import-resolver-typescript": "^4.4.2",
@@ -56,9 +66,11 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
+    "lighthouse-ci": "^1.13.1",
     "lint-staged": "^16.1.2",
     "only-allow": "^1.2.1",
     "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^6.0.3",
     "tsx": "^4.20.3",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8e0b6e1..4c6a0e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,12 +8,36 @@ importers:
 
   .:
     dependencies:
+      '@emotion/react':
+        specifier: ^11.14.0
+        version: 11.14.0(@types/react@19.1.8)(react@19.1.0)
+      '@emotion/styled':
+        specifier: ^11.14.0
+        version: 11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+      '@mui/icons-material':
+        specifier: ^7.1.2
+        version: 7.1.2(@mui/material@7.1.2(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+      '@mui/material':
+        specifier: ^7.1.2
+        version: 7.1.2(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@tanstack/react-query':
+        specifier: ^5.81.2
+        version: 5.81.2(react@19.1.0)
+      firebase:
+        specifier: ^11.9.1
+        version: 11.9.1
       react:
         specifier: ^19.1.0
         version: 19.1.0
       react-dom:
         specifier: ^19.1.0
         version: 19.1.0(react@19.1.0)
+      react-router-dom:
+        specifier: ^7.6.2
+        version: 7.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      zustand:
+        specifier: ^5.0.5
+        version: 5.0.5(@types/react@19.1.8)(react@19.1.0)
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.8.1
@@ -26,7 +50,7 @@ importers:
         version: 9.29.0
       '@feature-sliced/eslint-config':
         specifier: ^0.1.1
-        version: 0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1))(eslint-plugin-import@2.32.0)
+        version: 0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1))(eslint-plugin-import@2.32.0)
       '@types/node':
         specifier: ^24.0.3
         version: 24.0.3
@@ -36,15 +60,21 @@ importers:
       '@types/react-dom':
         specifier: ^19.1.2
         version: 19.1.6(@types/react@19.1.8)
+      '@types/react-router-dom':
+        specifier: ^5.3.3
+        version: 5.3.3
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.34.1
-        version: 8.34.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+        version: 8.35.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ^8.34.1
-        version: 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+        version: 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       '@vitejs/plugin-react':
         specifier: ^4.4.1
-        version: 4.5.2(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0))
+        version: 4.6.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0))
+      babel-plugin-import:
+        specifier: ^1.13.8
+        version: 1.13.8
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -56,10 +86,10 @@ importers:
         version: 4.4.3(eslint-plugin-import@2.32.0)(eslint@8.57.1)
       eslint-plugin-boundaries:
         specifier: ^5.0.1
-        version: 5.0.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+        version: 5.0.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
       eslint-plugin-import:
         specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+        version: 2.32.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
       eslint-plugin-jsx-a11y:
         specifier: ^6.10.2
         version: 6.10.2(eslint@8.57.1)
@@ -78,6 +108,9 @@ importers:
       husky:
         specifier: ^9.1.7
         version: 9.1.7
+      lighthouse-ci:
+        specifier: ^1.13.1
+        version: 1.13.1
       lint-staged:
         specifier: ^16.1.2
         version: 16.1.2
@@ -86,7 +119,10 @@ importers:
         version: 1.2.1
       prettier:
         specifier: ^3.5.3
-        version: 3.5.3
+        version: 3.6.0
+      rollup-plugin-visualizer:
+        specifier: ^6.0.3
+        version: 6.0.3(rollup@4.44.0)
       tsx:
         specifier: ^4.20.3
         version: 4.20.3
@@ -95,7 +131,7 @@ importers:
         version: 5.8.3
       typescript-eslint:
         specifier: ^8.30.1
-        version: 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+        version: 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       vite:
         specifier: ^6.3.5
         version: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0)
@@ -173,6 +209,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.27.6':
+    resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.27.2':
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
@@ -263,6 +303,60 @@ packages:
   '@emnapi/wasi-threads@1.0.2':
     resolution: {integrity: sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==}
 
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/is-prop-valid@1.3.1':
+    resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/styled@11.14.0':
+    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@esbuild/aix-ppc64@0.25.5':
     resolution: {integrity: sha512-9o3TMmpmftaCMepOdA5k/yDw8SfInyzWWTjYTFCX3kPSDJMROQTb8jg+h9Cnwnmm1vOzvxN7gIfB5V2ewpjtGA==}
     engines: {node: '>=18'}
@@ -441,6 +535,225 @@ packages:
       eslint-plugin-boundaries: '>=2'
       eslint-plugin-import: '>=2'
 
+  '@firebase/ai@1.4.0':
+    resolution: {integrity: sha512-wvF33gtU6TXb6Co8TEC1pcl4dnVstYmRE/vs9XjUGE7he7Sgf5TqSu+EoXk/fuzhw5tKr1LC5eG9KdYFM+eosw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@firebase/app-types': 0.x
+
+  '@firebase/analytics-compat@0.2.22':
+    resolution: {integrity: sha512-VogWHgwkdYhjWKh8O1XU04uPrRaiDihkWvE/EMMmtWtaUtVALnpLnUurc3QtSKdPnvTz5uaIGKlW84DGtSPFbw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/analytics-types@0.8.3':
+    resolution: {integrity: sha512-VrIp/d8iq2g501qO46uGz3hjbDb8xzYMrbu8Tp0ovzIzrvJZ2fvmj649gTjge/b7cCCcjT0H37g1gVtlNhnkbg==}
+
+  '@firebase/analytics@0.10.16':
+    resolution: {integrity: sha512-cMtp19He7Fd6uaj/nDEul+8JwvJsN8aRSJyuA1QN3QrKvfDDp+efjVurJO61sJpkVftw9O9nNMdhFbRcTmTfRQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-check-compat@0.3.25':
+    resolution: {integrity: sha512-3zrsPZWAKfV7DVC20T2dgfjzjtQnSJS65OfMOiddMUtJL1S5i0nAZKsdX0bOEvvrd0SBIL8jYnfpfDeQRnhV3w==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/app-check-interop-types@0.3.3':
+    resolution: {integrity: sha512-gAlxfPLT2j8bTI/qfe3ahl2I2YcBQ8cFIBdhAQA4I2f3TndcO+22YizyGYuttLHPQEpWkhmpFW60VCFEPg4g5A==}
+
+  '@firebase/app-check-types@0.5.3':
+    resolution: {integrity: sha512-hyl5rKSj0QmwPdsAxrI5x1otDlByQ7bvNvVt8G/XPO2CSwE++rmSVf3VEhaeOR4J8ZFaF0Z0NDSmLejPweZ3ng==}
+
+  '@firebase/app-check@0.10.0':
+    resolution: {integrity: sha512-AZlRlVWKcu8BH4Yf8B5EI8sOi2UNGTS8oMuthV45tbt6OVUTSQwFPIEboZzhNJNKY+fPsg7hH8vixUWFZ3lrhw==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/app-compat@0.4.1':
+    resolution: {integrity: sha512-9VGjnY23Gc1XryoF/ABWtZVJYnaPOnjHM7dsqq9YALgKRtxI1FryvELUVkDaEIUf4In2bfkb9ZENF1S9M273Dw==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/app-types@0.9.3':
+    resolution: {integrity: sha512-kRVpIl4vVGJ4baogMDINbyrIOtOxqhkZQg4jTq3l8Lw6WSk0xfpEYzezFu+Kl4ve4fbPl79dvwRtaFqAC/ucCw==}
+
+  '@firebase/app@0.13.1':
+    resolution: {integrity: sha512-0O33PKrXLoIWkoOO5ByFaLjZehBctSYWnb+xJkIdx2SKP/K9l1UPFXPwASyrOIqyY3ws+7orF/1j7wI5EKzPYQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/auth-compat@0.5.27':
+    resolution: {integrity: sha512-axZx/MgjNO7uPA8/nMQiuVotGCngUFMppt5w0pxFIoIPD0kac0bsFdSEh5S2ttuEE0Aq1iUB6Flzwn+wvMgXnQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/auth-interop-types@0.2.4':
+    resolution: {integrity: sha512-JPgcXKCuO+CWqGDnigBtvo09HeBs5u/Ktc2GaFj2m01hLarbxthLNm7Fk8iOP1aqAtXV+fnnGj7U28xmk7IwVA==}
+
+  '@firebase/auth-types@0.13.0':
+    resolution: {integrity: sha512-S/PuIjni0AQRLF+l9ck0YpsMOdE8GO2KU6ubmBB7P+7TJUCQDa3R1dlgYm9UzGbbePMZsp0xzB93f2b/CgxMOg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/auth@1.10.7':
+    resolution: {integrity: sha512-77o0aBKCfchdL1gkahARdawHyYefh+wRYn7o60tbwW6bfJNq2idbrRb3WSYCT4yBKWL0+9kKdwxBHPZ6DEiB+g==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+      '@react-native-async-storage/async-storage': ^1.18.1
+    peerDependenciesMeta:
+      '@react-native-async-storage/async-storage':
+        optional: true
+
+  '@firebase/component@0.6.17':
+    resolution: {integrity: sha512-M6DOg7OySrKEFS8kxA3MU5/xc37fiOpKPMz6cTsMUcsuKB6CiZxxNAvgFta8HGRgEpZbi8WjGIj6Uf+TpOhyzg==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/data-connect@0.3.9':
+    resolution: {integrity: sha512-B5tGEh5uQrQeH0i7RvlU8kbZrKOJUmoyxVIX4zLA8qQJIN6A7D+kfBlGXtSwbPdrvyaejcRPcbOtqsDQ9HPJKw==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/database-compat@2.0.10':
+    resolution: {integrity: sha512-3sjl6oGaDDYJw/Ny0E5bO6v+KM3KoD4Qo/sAfHGdRFmcJ4QnfxOX9RbG9+ce/evI3m64mkPr24LlmTDduqMpog==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/database-types@1.0.14':
+    resolution: {integrity: sha512-8a0Q1GrxM0akgF0RiQHliinhmZd+UQPrxEmUv7MnQBYfVFiLtKOgs3g6ghRt/WEGJHyQNslZ+0PocIwNfoDwKw==}
+
+  '@firebase/database@1.0.19':
+    resolution: {integrity: sha512-khE+MIYK+XlIndVn/7mAQ9F1fwG5JHrGKaG72hblCC6JAlUBDd3SirICH6SMCf2PQ0iYkruTECth+cRhauacyQ==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/firestore-compat@0.3.52':
+    resolution: {integrity: sha512-nzt3Sag+EBdm1Jkw/FnnKBPk0LpUUxOlMHMADPBXYhhXrLszxn1+vb64nJsbgRIHfsCn+rg8gyGrb+8frzXrjg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/firestore-types@3.0.3':
+    resolution: {integrity: sha512-hD2jGdiWRxB/eZWF89xcK9gF8wvENDJkzpVFb4aGkzfEaKxVRD1kjz1t1Wj8VZEp2LCB53Yx1zD8mrhQu87R6Q==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/firestore@4.7.17':
+    resolution: {integrity: sha512-YhXWA7HlSnekExhZ5u4i0e+kpPxsh/qMrzeNDgsAva71JXK8OOuOx+yLyYBFhmu3Hr5JJDO2fsZA/wrWoQYHDg==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/functions-compat@0.3.25':
+    resolution: {integrity: sha512-V0JKUw5W/7aznXf9BQ8LIYHCX6zVCM8Hdw7XUQ/LU1Y9TVP8WKRCnPB/qdPJ0xGjWWn7fhtwIYbgEw/syH4yTQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/functions-types@0.6.3':
+    resolution: {integrity: sha512-EZoDKQLUHFKNx6VLipQwrSMh01A1SaL3Wg6Hpi//x6/fJ6Ee4hrAeswK99I5Ht8roiniKHw4iO0B1Oxj5I4plg==}
+
+  '@firebase/functions@0.12.8':
+    resolution: {integrity: sha512-p+ft6dQW0CJ3BLLxeDb5Hwk9ARw01kHTZjLqiUdPRzycR6w7Z75ThkegNmL6gCss3S0JEpldgvehgZ3kHybVhA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/installations-compat@0.2.17':
+    resolution: {integrity: sha512-J7afeCXB7yq25FrrJAgbx8mn1nG1lZEubOLvYgG7ZHvyoOCK00sis5rj7TgDrLYJgdj/SJiGaO1BD3BAp55TeA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/installations-types@0.5.3':
+    resolution: {integrity: sha512-2FJI7gkLqIE0iYsNQ1P751lO3hER+Umykel+TkLwHj6plzWVxqvfclPUZhcKFVQObqloEBTmpi2Ozn7EkCABAA==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+
+  '@firebase/installations@0.6.17':
+    resolution: {integrity: sha512-zfhqCNJZRe12KyADtRrtOj+SeSbD1H/K8J24oQAJVv/u02eQajEGlhZtcx9Qk7vhGWF5z9dvIygVDYqLL4o1XQ==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/logger@0.4.4':
+    resolution: {integrity: sha512-mH0PEh1zoXGnaR8gD1DeGeNZtWFKbnz9hDO91dIml3iou1gpOnLqXQ2dJfB71dj6dpmUjcQ6phY3ZZJbjErr9g==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/messaging-compat@0.2.21':
+    resolution: {integrity: sha512-1yMne+4BGLbHbtyu/VyXWcLiefUE1+K3ZGfVTyKM4BH4ZwDFRGoWUGhhx+tKRX4Tu9z7+8JN67SjnwacyNWK5g==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/messaging-interop-types@0.2.3':
+    resolution: {integrity: sha512-xfzFaJpzcmtDjycpDeCUj0Ge10ATFi/VHVIvEEjDNc3hodVBQADZ7BWQU7CuFpjSHE+eLuBI13z5F/9xOoGX8Q==}
+
+  '@firebase/messaging@0.12.21':
+    resolution: {integrity: sha512-bYJ2Evj167Z+lJ1ach6UglXz5dUKY1zrJZd15GagBUJSR7d9KfiM1W8dsyL0lDxcmhmA/sLaBYAAhF1uilwN0g==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/performance-compat@0.2.19':
+    resolution: {integrity: sha512-4cU0T0BJ+LZK/E/UwFcvpBCVdkStgBMQwBztM9fJPT6udrEUk3ugF5/HT+E2Z22FCXtIaXDukJbYkE/c3c6IHw==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/performance-types@0.2.3':
+    resolution: {integrity: sha512-IgkyTz6QZVPAq8GSkLYJvwSLr3LS9+V6vNPQr0x4YozZJiLF5jYixj0amDtATf1X0EtYHqoPO48a9ija8GocxQ==}
+
+  '@firebase/performance@0.7.6':
+    resolution: {integrity: sha512-AsOz74dSTlyQGlnnbLWXiHFAsrxhpssPOsFFi4HgOJ5DjzkK7ZdZ/E9uMPrwFoXJyMVoybGRuqsL/wkIbFITsA==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/remote-config-compat@0.2.17':
+    resolution: {integrity: sha512-KelsBD0sXSC0u3esr/r6sJYGRN6pzn3bYuI/6pTvvmZbjBlxQkRabHAVH6d+YhLcjUXKIAYIjZszczd1QJtOyA==}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/remote-config-types@0.4.0':
+    resolution: {integrity: sha512-7p3mRE/ldCNYt8fmWMQ/MSGRmXYlJ15Rvs9Rk17t8p0WwZDbeK7eRmoI1tvCPaDzn9Oqh+yD6Lw+sGLsLg4kKg==}
+
+  '@firebase/remote-config@0.6.4':
+    resolution: {integrity: sha512-ZyLJRT46wtycyz2+opEkGaoFUOqRQjt/0NX1WfUISOMCI/PuVoyDjqGpq24uK+e8D5NknyTpiXCVq5dowhScmg==}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/storage-compat@0.3.23':
+    resolution: {integrity: sha512-B/ufkT/R/tSvc2av+vP6ZYybGn26FwB9YVDYg/6Bro+5TN3VEkCeNmfnX3XLa2DSdXUTZAdWCbMxW0povGa4MA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app-compat': 0.x
+
+  '@firebase/storage-types@0.8.3':
+    resolution: {integrity: sha512-+Muk7g9uwngTpd8xn9OdF/D48uiQ7I1Fae7ULsWPuKoCH3HU7bfFPhxtJYzyhjdniowhuDpQcfPmuNRAqZEfvg==}
+    peerDependencies:
+      '@firebase/app-types': 0.x
+      '@firebase/util': 1.x
+
+  '@firebase/storage@0.13.13':
+    resolution: {integrity: sha512-E+MTNcBgpoAynicgVb2ZsHCuEOO4aAiUX5ahNwe/1dEyZpo2H4DwFqKQRNK/sdAIgBbjBwcfV2p0MdPFGIR0Ew==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      '@firebase/app': 0.x
+
+  '@firebase/util@1.12.0':
+    resolution: {integrity: sha512-Z4rK23xBCwgKDqmzGVMef+Vb4xso2j5Q8OG0vVL4m4fA5ZjPMYQazu8OJJC3vtQRC3SQ/Pgx/6TPNVsCd70QRw==}
+    engines: {node: '>=18.0.0'}
+
+  '@firebase/webchannel-wrapper@1.0.3':
+    resolution: {integrity: sha512-2xCRM9q9FlzGZCdgDMJwc0gyUkWFtkosy7Xxr6sFgQwn+wMNIWd7xIvYNauU1r64B5L5rsGKy/n9TKJ0aAFeqQ==}
+
+  '@grpc/grpc-js@1.9.15':
+    resolution: {integrity: sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==}
+    engines: {node: ^8.13.0 || >=10.10.0}
+
+  '@grpc/proto-loader@0.7.15':
+    resolution: {integrity: sha512-tMXdRCfYVixjuFK+Hk0Q1s38gV9zDiDJfWL3h1rv4Qc39oILCu1TRTDt7+fGUI8K4G1Fj125Hx/ru3azECWTyQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   '@humanwhocodes/config-array@0.13.0':
     resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
     engines: {node: '>=10.10.0'}
@@ -472,6 +785,97 @@ packages:
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@mui/core-downloads-tracker@7.1.2':
+    resolution: {integrity: sha512-0gLO1PvbJwSYe5ji021tGj6HFqrtEPMGKK4L1zWwRbhzrWWUumUJvMvJUsIgWQIYQsgOnhq9k2Fc1BxLGHDsAg==}
+
+  '@mui/icons-material@7.1.2':
+    resolution: {integrity: sha512-slqJByDub7Y1UcokrM17BoMBMvn8n7daXFXVoTv0MEH5k3sHjmsH8ql/Mt3s9vQ20cORDr83UZ448TEGcbrXtw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@mui/material': ^7.1.2
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/material@7.1.2':
+    resolution: {integrity: sha512-Z5PYKkA6Kd8vS04zKxJNpwuvt6IoMwqpbidV7RCrRQQKwczIwcNcS8L6GnN4pzFYfEs+N9v6co27DmG07rcnoA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@mui/material-pigment-css': ^7.1.1
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@mui/material-pigment-css':
+        optional: true
+      '@types/react':
+        optional: true
+
+  '@mui/private-theming@7.1.1':
+    resolution: {integrity: sha512-M8NbLUx+armk2ZuaxBkkMk11ultnWmrPlN0Xe3jUEaBChg/mcxa5HWIWS1EE4DF36WRACaAHVAvyekWlDQf0PQ==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/styled-engine@7.1.1':
+    resolution: {integrity: sha512-R2wpzmSN127j26HrCPYVQ53vvMcT5DaKLoWkrfwUYq3cYytL6TQrCH8JBH3z79B6g4nMZZVoaXrxO757AlShaw==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.4.1
+      '@emotion/styled': ^11.3.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+
+  '@mui/system@7.1.1':
+    resolution: {integrity: sha512-Kj1uhiqnj4Zo7PDjAOghtXJtNABunWvhcRU0O7RQJ7WOxeynoH6wXPcilphV8QTFtkKaip8EiNJRiCD+B3eROA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@emotion/react': ^11.5.0
+      '@emotion/styled': ^11.3.0
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/react':
+        optional: true
+      '@emotion/styled':
+        optional: true
+      '@types/react':
+        optional: true
+
+  '@mui/types@7.4.3':
+    resolution: {integrity: sha512-2UCEiK29vtiZTeLdS2d4GndBKacVyxGvReznGXGr+CzW/YhjIX+OHUdCIczZjzcRAgKBGmE9zCIgoV9FleuyRQ==}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@mui/utils@7.1.1':
+    resolution: {integrity: sha512-BkOt2q7MBYl7pweY2JWwfrlahhp+uGLR8S+EhiyRaofeRYUWL2YKbSGQvN4hgSN1i8poN0PaUiii1kEMrchvzg==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@napi-rs/wasm-runtime@0.2.11':
     resolution: {integrity: sha512-9DPkXtvHydrcOsopiYpUgPHpmj0HWZKMUnL2dZqpvC42lsratuBG06V5ipyno0fUek5VlFsNQ+AcFATSrJXgMA==}
 
@@ -487,8 +891,41 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@rolldown/pluginutils@1.0.0-beta.11':
-    resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
+  '@popperjs/core@2.11.8':
+    resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
+
+  '@protobufjs/aspromise@1.1.2':
+    resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
+
+  '@protobufjs/base64@1.1.2':
+    resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
+
+  '@protobufjs/codegen@2.0.4':
+    resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
+
+  '@protobufjs/eventemitter@1.1.0':
+    resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
+
+  '@protobufjs/fetch@1.1.0':
+    resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
+
+  '@protobufjs/float@1.0.2':
+    resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
+
+  '@protobufjs/inquire@1.1.0':
+    resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
+
+  '@protobufjs/path@1.1.2':
+    resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
+
+  '@protobufjs/pool@1.1.0':
+    resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
+
+  '@protobufjs/utf8@1.1.0':
+    resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
+
+  '@rolldown/pluginutils@1.0.0-beta.19':
+    resolution: {integrity: sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==}
 
   '@rollup/rollup-android-arm-eabi@4.44.0':
     resolution: {integrity: sha512-xEiEE5oDW6tK4jXCAyliuntGR+amEMO7HLtdSshVuhFnKTYoeYMyXQK7pLouAJJj5KHdwdn87bfHAR2nSdNAUA==}
@@ -593,6 +1030,22 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
+  '@sindresorhus/is@0.14.0':
+    resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
+    engines: {node: '>=6'}
+
+  '@szmarczak/http-timer@1.1.2':
+    resolution: {integrity: sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==}
+    engines: {node: '>=6'}
+
+  '@tanstack/query-core@5.81.2':
+    resolution: {integrity: sha512-QLYkPdrudoMATDFa3MiLEwRhNnAlzHWDf0LKaXUqJd0/+QxN8uTPi7bahRlxoAyH0UbLMBdeDbYzWALj7THOtw==}
+
+  '@tanstack/react-query@5.81.2':
+    resolution: {integrity: sha512-pe8kFlTrL2zFLlcAj2kZk9UaYYHDk9/1hg9EBaoO3cxDhOZf1FRGJeziSXKrVZyxIfs7b3aoOj/bw7Lie0mDUg==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
@@ -614,77 +1067,109 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/history@4.7.11':
+    resolution: {integrity: sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==}
+
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/keyv@3.1.4':
+    resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
+
+  '@types/minimist@1.2.5':
+    resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==}
+
   '@types/node@24.0.3':
     resolution: {integrity: sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==}
 
+  '@types/normalize-package-data@2.4.4':
+    resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
+
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
   '@types/react-dom@19.1.6':
     resolution: {integrity: sha512-4hOiT/dwO8Ko0gV1m/TJZYk3y0KBnY9vzDh7W+DH17b2HFSOGgdj33dhihPeuy3l0q23+4e+hoXHV6hCC4dCXw==}
     peerDependencies:
       '@types/react': ^19.0.0
 
+  '@types/react-router-dom@5.3.3':
+    resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
+
+  '@types/react-router@5.1.20':
+    resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
+
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@19.1.8':
     resolution: {integrity: sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g==}
 
-  '@typescript-eslint/eslint-plugin@8.34.1':
-    resolution: {integrity: sha512-STXcN6ebF6li4PxwNeFnqF8/2BNDvBupf2OPx2yWNzr6mKNGF7q49VM00Pz5FaomJyqvbXpY6PhO+T9w139YEQ==}
+  '@types/responselike@1.0.3':
+    resolution: {integrity: sha512-H/+L+UkTV33uf49PH5pCAUBVPNj2nDBXTN+qS1dOwyyg24l3CcicicCA7ca+HMvJBZcFgl5r8e+RR6elsb4Lyw==}
+
+  '@typescript-eslint/eslint-plugin@8.35.0':
+    resolution: {integrity: sha512-ijItUYaiWuce0N1SoSMrEd0b6b6lYkYt99pqCPfybd+HKVXtEvYhICfLdwp42MhiI5mp0oq7PKEL+g1cNiz/Eg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.34.1
+      '@typescript-eslint/parser': ^8.35.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/parser@8.34.1':
-    resolution: {integrity: sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==}
+  '@typescript-eslint/parser@8.35.0':
+    resolution: {integrity: sha512-6sMvZePQrnZH2/cJkwRpkT7DxoAWh+g6+GFRK6bV3YQo7ogi3SX5rgF6099r5Q53Ma5qeT7LGmOmuIutF4t3lA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/project-service@8.34.1':
-    resolution: {integrity: sha512-nuHlOmFZfuRwLJKDGQOVc0xnQrAmuq1Mj/ISou5044y1ajGNp2BNliIqp7F2LPQ5sForz8lempMFCovfeS1XoA==}
+  '@typescript-eslint/project-service@8.35.0':
+    resolution: {integrity: sha512-41xatqRwWZuhUMF/aZm2fcUsOFKNcG28xqRSS6ZVr9BVJtGExosLAm5A1OxTjRMagx8nJqva+P5zNIGt8RIgbQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/scope-manager@8.34.1':
-    resolution: {integrity: sha512-beu6o6QY4hJAgL1E8RaXNC071G4Kso2MGmJskCFQhRhg8VOH/FDbC8soP8NHN7e/Hdphwp8G8cE6OBzC8o41ZA==}
+  '@typescript-eslint/scope-manager@8.35.0':
+    resolution: {integrity: sha512-+AgL5+mcoLxl1vGjwNfiWq5fLDZM1TmTPYs2UkyHfFhgERxBbqHlNjRzhThJqz+ktBqTChRYY6zwbMwy0591AA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.34.1':
-    resolution: {integrity: sha512-K4Sjdo4/xF9NEeA2khOb7Y5nY6NSXBnod87uniVYW9kHP+hNlDV8trUSFeynA2uxWam4gIWgWoygPrv9VMWrYg==}
+  '@typescript-eslint/tsconfig-utils@8.35.0':
+    resolution: {integrity: sha512-04k/7247kZzFraweuEirmvUj+W3bJLI9fX6fbo1Qm2YykuBvEhRTPl8tcxlYO8kZZW+HIXfkZNoasVb8EV4jpA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/type-utils@8.34.1':
-    resolution: {integrity: sha512-Tv7tCCr6e5m8hP4+xFugcrwTOucB8lshffJ6zf1mF1TbU67R+ntCc6DzLNKM+s/uzDyv8gLq7tufaAhIBYeV8g==}
+  '@typescript-eslint/type-utils@8.35.0':
+    resolution: {integrity: sha512-ceNNttjfmSEoM9PW87bWLDEIaLAyR+E6BoYJQ5PfaDau37UGca9Nyq3lBk8Bw2ad0AKvYabz6wxc7DMTO2jnNA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/types@8.34.1':
-    resolution: {integrity: sha512-rjLVbmE7HR18kDsjNIZQHxmv9RZwlgzavryL5Lnj2ujIRTeXlKtILHgRNmQ3j4daw7zd+mQgy+uyt6Zo6I0IGA==}
+  '@typescript-eslint/types@8.35.0':
+    resolution: {integrity: sha512-0mYH3emanku0vHw2aRLNGqe7EXh9WHEhi7kZzscrMDf6IIRUQ5Jk4wp1QrledE/36KtdZrVfKnE32eZCf/vaVQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.34.1':
-    resolution: {integrity: sha512-rjCNqqYPuMUF5ODD+hWBNmOitjBWghkGKJg6hiCHzUvXRy6rK22Jd3rwbP2Xi+R7oYVvIKhokHVhH41BxPV5mA==}
+  '@typescript-eslint/typescript-estree@8.35.0':
+    resolution: {integrity: sha512-F+BhnaBemgu1Qf8oHrxyw14wq6vbL8xwWKKMwTMwYIRmFFY/1n/9T/jpbobZL8vp7QyEUcC6xGrnAO4ua8Kp7w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/utils@8.34.1':
-    resolution: {integrity: sha512-mqOwUdZ3KjtGk7xJJnLbHxTuWVn3GO2WZZuM+Slhkun4+qthLdXx32C8xIXbO1kfCECb3jIs3eoxK3eryk7aoQ==}
+  '@typescript-eslint/utils@8.35.0':
+    resolution: {integrity: sha512-nqoMu7WWM7ki5tPgLVsmPM8CkqtoPUG6xXGeefM5t4x3XumOEKMoUZPdi+7F+/EotukN4R9OWdmDxN80fqoZeg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <5.9.0'
 
-  '@typescript-eslint/visitor-keys@8.34.1':
-    resolution: {integrity: sha512-xoh5rJ+tgsRKoXnkBPFRLZ7rjKM0AfVbC68UZ/ECXoDbfggb9RbEySN359acY1vS3qZ0jVTVWzbtfapwm5ztxw==}
+  '@typescript-eslint/visitor-keys@8.35.0':
+    resolution: {integrity: sha512-zTh2+1Y8ZpmeQaQVIc/ZZxsx8UzgKJyNg1PTvjzC7WMhPSVS8bfDX34k1SrwOf016qd5RU3az2UxUNue3IfQ5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@ungap/structured-clone@1.3.0':
@@ -785,8 +1270,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@vitejs/plugin-react@4.5.2':
-    resolution: {integrity: sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q==}
+  '@vitejs/plugin-react@4.6.0':
+    resolution: {integrity: sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
@@ -811,6 +1296,13 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
+  ansi-align@3.0.1:
+    resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
   ansi-escapes@7.0.0:
     resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
     engines: {node: '>=18'}
@@ -873,6 +1365,10 @@ packages:
     resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
     engines: {node: '>= 0.4'}
 
+  arrify@1.0.1:
+    resolution: {integrity: sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==}
+    engines: {node: '>=0.10.0'}
+
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
@@ -888,13 +1384,38 @@ packages:
     resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
 
+  axe-core@4.2.3:
+    resolution: {integrity: sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ==}
+    engines: {node: '>=4'}
+
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
+  babel-plugin-import@1.13.8:
+    resolution: {integrity: sha512-36babpjra5m3gca44V6tSTomeBlPA7cHUynrE2WiQIm3rEGD9xy28MKsx5IdO45EbnpJY7Jrgd00C6Dwt/l/2Q==}
+
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+
+  bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+
+  boxen@4.2.0:
+    resolution: {integrity: sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==}
+    engines: {node: '>=8'}
+
+  boxen@5.1.2:
+    resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==}
+    engines: {node: '>=10'}
+
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -910,6 +1431,13 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
+  buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+
+  cacheable-request@6.1.0:
+    resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
+    engines: {node: '>=8'}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -926,9 +1454,25 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  camelcase-keys@6.2.2:
+    resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
+    engines: {node: '>=8'}
+
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
+  camelcase@6.3.0:
+    resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
+    engines: {node: '>=10'}
+
   caniuse-lite@1.0.30001724:
     resolution: {integrity: sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==}
 
+  chalk@3.0.0:
+    resolution: {integrity: sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==}
+    engines: {node: '>=8'}
+
   chalk@4.1.2:
     resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
     engines: {node: '>=10'}
@@ -937,18 +1481,54 @@ packages:
     resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  charenc@0.0.2:
+    resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
+
+  chrome-launcher@0.14.2:
+    resolution: {integrity: sha512-Nk8DUCIfPR6p9WClPPFeP2ztpAdkT8xueoiDS03csea1uoJjm4w0p5Oy1hjykyjT1EQ0MMrEshLD3C8gHXyiZw==}
+    engines: {node: '>=12.13.0'}
+
+  ci-info@2.0.0:
+    resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
+
+  cli-boxes@2.2.1:
+    resolution: {integrity: sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
   cli-cursor@5.0.0:
     resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
     engines: {node: '>=18'}
 
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
   cli-truncate@4.0.0:
     resolution: {integrity: sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==}
     engines: {node: '>=18'}
 
+  cliui@7.0.4:
+    resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
+
   cliui@8.0.1:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clone-response@1.0.3:
+    resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
+
+  clone@1.0.4:
+    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
+    engines: {node: '>=0.8'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -969,6 +1549,10 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
+  configstore@5.0.1:
+    resolution: {integrity: sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==}
+    engines: {node: '>=8'}
+
   conventional-changelog-angular@7.0.0:
     resolution: {integrity: sha512-ROjNchA9LgfNMTTFSIWPzebCwOGFdgkEq45EnvvrmSLvCtAw0HSmrCs7/ty+wAeYUZyNay0YMUNYFTRL72PkBQ==}
     engines: {node: '>=16'}
@@ -982,9 +1566,20 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie@0.3.1:
+    resolution: {integrity: sha512-+IJOX0OqlHCszo2mBUq+SrEbCj6w7Kpffqx60zYbPTFaO4+yYgRjHwcZNpWvaTylDHaV7PPmBHzSecZiMhtPgw==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
   cosmiconfig-typescript-loader@6.1.0:
     resolution: {integrity: sha512-tJ1w35ZRUiM5FeTzT7DtYWAFFv37ZLqSRkGi2oeCK1gPhvaWjkAtfXvLmvE1pRfxxp9aQo6ba/Pvg1dKj05D4g==}
     engines: {node: '>=v18'}
@@ -993,6 +1588,10 @@ packages:
       cosmiconfig: '>=9'
       typescript: '>=5'
 
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   cosmiconfig@9.0.0:
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
@@ -1006,6 +1605,22 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypt@0.0.2:
+    resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
+
+  crypto-random-string@2.0.0:
+    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
+    engines: {node: '>=8'}
+
+  csp_evaluator@1.1.0:
+    resolution: {integrity: sha512-TcB+ZH9wZBG314jAUpKHPl1oYbRJV+nAT2YwZ9y4fmUN0FkEJa8e/hKZoOgzLYp1Z/CJdFhbhhGIGh0XG8W54Q==}
+
+  cssom@0.3.8:
+    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
+
+  cssstyle@1.2.1:
+    resolution: {integrity: sha512-7DYm8qe+gPx/h77QlCyFmX80+fGaE/6A/Ekl0zaszYOubvySO2saYFdQ78P29D0UsULxFKCetDGNaNRUdSF+2A==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -1028,6 +1643,14 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -1045,13 +1668,39 @@ packages:
       supports-color:
         optional: true
 
-  deep-is@0.1.4:
-    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+  decamelize-keys@1.1.1:
+    resolution: {integrity: sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==}
+    engines: {node: '>=0.10.0'}
+
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
+  decompress-response@3.3.0:
+    resolution: {integrity: sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==}
+    engines: {node: '>=4'}
+
+  deep-extend@0.6.0:
+    resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
+    engines: {node: '>=4.0.0'}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  defaults@1.0.4:
+    resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
+
+  defer-to-connect@1.1.3:
+    resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
 
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
@@ -1064,6 +1713,9 @@ packages:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
     engines: {node: '>=6.0.0'}
 
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   dot-prop@5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
     engines: {node: '>=8'}
@@ -1072,8 +1724,11 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  electron-to-chromium@1.5.171:
-    resolution: {integrity: sha512-scWpzXEJEMrGJa4Y6m/tVotb0WuvNmasv3wWVzUAeCgKU0ToFOhUW6Z+xWnRQANMYGxN4ngJXIThgBJOqzVPCQ==}
+  duplexer3@0.1.5:
+    resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}
+
+  electron-to-chromium@1.5.172:
+    resolution: {integrity: sha512-fnKW9dGgmBfsebbYognQSv0CGGLFH1a5iV9EDYTBwmAQn+whbzHbLFlC+3XbHc8xaNtpO0etm8LOcRXs1qMRkQ==}
 
   emoji-regex@10.4.0:
     resolution: {integrity: sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==}
@@ -1084,6 +1739,13 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -1136,6 +1798,10 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-goat@2.1.1:
+    resolution: {integrity: sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==}
+    engines: {node: '>=8'}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1312,6 +1978,10 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  faye-websocket@0.11.4:
+    resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
+    engines: {node: '>=0.8.0'}
+
   fdir@6.4.6:
     resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
     peerDependencies:
@@ -1328,6 +1998,13 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -1336,6 +2013,9 @@ packages:
     resolution: {integrity: sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g==}
     engines: {node: '>=18'}
 
+  firebase@11.9.1:
+    resolution: {integrity: sha512-nbQbQxNlkHHRDn4cYwHdAKHwJPeZ0jRXxlNp6PCOb9CQx8Dc6Vjve97R34r1EZJnzOsPYZ3+ssJH7fkovDjvCw==}
+
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1385,6 +2065,14 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-stream@4.1.0:
+    resolution: {integrity: sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==}
+    engines: {node: '>=6'}
+
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -1413,6 +2101,14 @@ packages:
     resolution: {integrity: sha512-wHTUcDUoZ1H5/0iVqEudYW4/kAlN5cZ3j/bXn0Dpbizl9iaUVeWSHqiOjsgk6OW2bkLclbBjzewBz6weQ1zA2Q==}
     engines: {node: '>=18'}
 
+  global-dirs@2.1.0:
+    resolution: {integrity: sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==}
+    engines: {node: '>=8'}
+
+  global-dirs@3.0.1:
+    resolution: {integrity: sha512-NBcGGFbBA9s1VzD41QXDG+3++t9Mn5t1FpLdhESY6oKY4gYTFpX4wO3sqGUa0Srjtbfj3szX0RnemmrVRUdULA==}
+    engines: {node: '>=10'}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -1433,9 +2129,20 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  got@9.6.0:
+    resolution: {integrity: sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==}
+    engines: {node: '>=8.6'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  hard-rejection@2.1.0:
+    resolution: {integrity: sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==}
+    engines: {node: '>=6'}
+
   has-bigints@1.1.0:
     resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
     engines: {node: '>= 0.4'}
@@ -1459,15 +2166,44 @@ packages:
     resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
     engines: {node: '>= 0.4'}
 
+  has-yarn@2.1.0:
+    resolution: {integrity: sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==}
+    engines: {node: '>=8'}
+
   hasown@2.0.2:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
+  hosted-git-info@2.8.9:
+    resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
+
+  hosted-git-info@4.1.0:
+    resolution: {integrity: sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==}
+    engines: {node: '>=10'}
+
+  http-cache-semantics@4.2.0:
+    resolution: {integrity: sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ==}
+
+  http-link-header@0.8.0:
+    resolution: {integrity: sha512-qsh/wKe1Mk1vtYEFr+LpQBFWTO1gxZQBdii2D0Umj+IUQ23r5sT088Rhpq4XzpSyIpaX7vwjB8Rrtx8u9JTg+Q==}
+
+  http-parser-js@0.5.10:
+    resolution: {integrity: sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==}
+
   husky@9.1.7:
     resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
     engines: {node: '>=18'}
     hasBin: true
 
+  idb@7.1.1:
+    resolution: {integrity: sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==}
+
+  ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -1476,10 +2212,17 @@ packages:
     resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
     engines: {node: '>= 4'}
 
+  image-ssim@0.2.0:
+    resolution: {integrity: sha512-W7+sO6/yhxy83L0G7xR8YAc5Z5QFtYEXXRV6EaE8tuYBZJnA3gVgp3q7X7muhLZVodeb9UfvjSbwt9VJwjIYAg==}
+
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
+  import-lazy@2.1.0:
+    resolution: {integrity: sha512-m7ZEHgtw69qOGw+jwxXkHlrlIPdTGkyh66zXZ1ajZbxkDBNjSY/LGbmjc7h0s2ELsUDTAhFr55TrPSSqJGPG0A==}
+    engines: {node: '>=4'}
+
   import-meta-resolve@4.1.0:
     resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
 
@@ -1487,6 +2230,10 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -1494,6 +2241,16 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  ini@1.3.7:
+    resolution: {integrity: sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==}
+
+  ini@1.3.8:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+
+  ini@2.0.0:
+    resolution: {integrity: sha512-7PnF4oN3CvZF23ADhA5wRaYEQpJ8qygSkbtTXWBeXWXmEVRXK+1ITciHWwHhsjv1TmW0MgacIv6hEi5pX5NQdA==}
+    engines: {node: '>=10'}
+
   ini@4.1.1:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -1502,6 +2259,13 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  intl-messageformat-parser@1.8.1:
+    resolution: {integrity: sha512-IMSCKVf0USrM/959vj3xac7s8f87sc+80Y/ipBzdKy4ifBv5Gsj2tZ41EAaURVg01QU71fYr77uA8Meh6kELbg==}
+    deprecated: We've written a new parser that's 6x faster and is backwards compatible. Please use @formatjs/icu-messageformat-parser
+
+  intl-messageformat@4.4.0:
+    resolution: {integrity: sha512-z+Bj2rS3LZSYU4+sNitdHrwnBhr0wO80ZJSW8EzKDBowwUe3Q/UsvgCGjrwa+HPzoGCLEb9HAjfJgo4j2Sac8w==}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -1521,6 +2285,9 @@ packages:
     resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
     engines: {node: '>= 0.4'}
 
+  is-buffer@1.1.6:
+    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
+
   is-bun-module@2.0.0:
     resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
 
@@ -1528,6 +2295,10 @@ packages:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
+  is-ci@2.0.0:
+    resolution: {integrity: sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==}
+    hasBin: true
+
   is-core-module@2.16.1:
     resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
     engines: {node: '>= 0.4'}
@@ -1540,6 +2311,11 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1568,6 +2344,18 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-installed-globally@0.3.2:
+    resolution: {integrity: sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==}
+    engines: {node: '>=8'}
+
+  is-installed-globally@0.4.0:
+    resolution: {integrity: sha512-iwGqO3J21aaSkC7jWnHP/difazwS7SFeIqxv6wEtLU8Y5KlzFTjyqcSIT0d8s4+dDhKytsk9PJZ2BkS5eZwQRQ==}
+    engines: {node: '>=10'}
+
+  is-interactive@1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -1576,6 +2364,14 @@ packages:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
 
+  is-npm@4.0.0:
+    resolution: {integrity: sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==}
+    engines: {node: '>=8'}
+
+  is-npm@5.0.0:
+    resolution: {integrity: sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==}
+    engines: {node: '>=10'}
+
   is-number-object@1.1.1:
     resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
     engines: {node: '>= 0.4'}
@@ -1592,6 +2388,10 @@ packages:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
     engines: {node: '>=8'}
 
+  is-plain-obj@1.1.0:
+    resolution: {integrity: sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==}
+    engines: {node: '>=0.10.0'}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -1620,6 +2420,13 @@ packages:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
+  is-typedarray@1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+
+  is-unicode-supported@0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -1632,6 +2439,17 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
+  is-wsl@1.1.0:
+    resolution: {integrity: sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==}
+    engines: {node: '>=4'}
+
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-yarn-global@0.3.0:
+    resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -1646,6 +2464,13 @@ packages:
     resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
+  jpeg-js@0.4.4:
+    resolution: {integrity: sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==}
+
+  js-library-detector@6.7.0:
+    resolution: {integrity: sha512-c80Qupofp43y4cJ7+8TTDN/AsDwLi5oOm/plBrWI+iQt485vKXCco+yVmOwEgdo9VOdsYTuV0UlTeetVPTriXA==}
+    engines: {node: '>=12'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -1658,6 +2483,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-buffer@3.0.0:
+    resolution: {integrity: sha512-CuUqjv0FUZIdXkHPI8MezCnFCdaTAacej1TZYulLoAg1h/PhwkdXFN4V/gzY4g+fMBCOV2xF+rp7t2XD2ns/NQ==}
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -1690,9 +2518,16 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  keyv@3.1.0:
+    resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -1700,10 +2535,30 @@ packages:
     resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
     engines: {node: '>=0.10'}
 
+  latest-version@5.1.0:
+    resolution: {integrity: sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==}
+    engines: {node: '>=8'}
+
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lighthouse-ci@1.13.1:
+    resolution: {integrity: sha512-3U3FmJoyQVwi4W3KxPSm8C3/2YwjScCpFs9HPNfEqLJ/1jfv4/WGvWdc46tt7mU3fDrnEtwW+iU/hOCdbo/Pfg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  lighthouse-logger@1.4.2:
+    resolution: {integrity: sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g==}
+
+  lighthouse-stack-packs@1.12.2:
+    resolution: {integrity: sha512-Ug8feS/A+92TMTCK6yHYLwaFMuelK/hAKRMdldYkMNwv+d9PtWxjXEg6rwKtsUXTADajhdrhXyuNCJ5/sfmPFw==}
+
+  lighthouse@8.6.0:
+    resolution: {integrity: sha512-/H7aDL3//Gr0M1v8GGq6k0OTNty7nDVuU/o1cg6opYkfHRz1V3Nhydqz6aBzfXhUQx6iJRnxgRCPya+ZLA2vbg==}
+    engines: {node: '>=12.20.0 12 || >=14.13 14  || >=15'}
+    hasBin: true
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -1720,6 +2575,10 @@ packages:
     resolution: {integrity: sha512-LWzX2KsqcB1wqQ4AHgYb4RsDXauQiqhjLk+6hjbaeHG4zpjjVAB6wC/gz6X0l+Du1cN3pUB5ZlrvTbhGSNnUQQ==}
     engines: {node: '>=18.0.0'}
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -1731,6 +2590,17 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
+  lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
+
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -1743,6 +2613,9 @@ packages:
   lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
 
+  lodash.set@4.3.2:
+    resolution: {integrity: sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==}
+
   lodash.snakecase@4.1.1:
     resolution: {integrity: sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==}
 
@@ -1755,37 +2628,96 @@ packages:
   lodash.upperfirst@4.3.1:
     resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==}
 
+  log-symbols@4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+
   log-update@6.1.0:
     resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
     engines: {node: '>=18'}
 
+  long@5.3.2:
+    resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
+
+  lookup-closest-locale@6.0.4:
+    resolution: {integrity: sha512-bWoFbSGe6f1GvMGzj17LrwMX4FhDXDwZyH04ySVCPbtOJADcSRguZNKewoJ3Ful/MOxD/wRHvFPadk/kYZUbuQ==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lowercase-keys@1.0.1:
+    resolution: {integrity: sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==}
+    engines: {node: '>=0.10.0'}
+
+  lowercase-keys@2.0.0:
+    resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
+    engines: {node: '>=8'}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru-cache@6.0.0:
+    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
+    engines: {node: '>=10'}
+
+  make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+
+  map-obj@1.0.1:
+    resolution: {integrity: sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==}
+    engines: {node: '>=0.10.0'}
+
+  map-obj@4.3.0:
+    resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
+    engines: {node: '>=8'}
+
+  marky@1.3.0:
+    resolution: {integrity: sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  md5@2.3.0:
+    resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
+
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
     engines: {node: '>=16.10'}
 
+  meow@9.0.0:
+    resolution: {integrity: sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==}
+    engines: {node: '>=10'}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
+  metaviewport-parser@0.2.0:
+    resolution: {integrity: sha512-qL5NtY18LGs7lvZCkj3ep2H4Pes9rIiSLZRUyfDdvVw7pWFA0eLwmqaIxApD74RGvUrNEtk9e5Wt1rT+VlCvGw==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
   mimic-function@5.0.1:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
+  mimic-response@1.0.1:
+    resolution: {integrity: sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==}
+    engines: {node: '>=4'}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -1793,9 +2725,21 @@ packages:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  minimist-options@4.1.0:
+    resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==}
+    engines: {node: '>= 6'}
+
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  mkdirp@1.0.4:
+    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -1819,6 +2763,17 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
+  normalize-package-data@2.5.0:
+    resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
+
+  normalize-package-data@3.0.3:
+    resolution: {integrity: sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==}
+    engines: {node: '>=10'}
+
+  normalize-url@4.5.1:
+    resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
+    engines: {node: '>=8'}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -1854,6 +2809,10 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
   onetime@7.0.0:
     resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
     engines: {node: '>=18'}
@@ -1862,14 +2821,34 @@ packages:
     resolution: {integrity: sha512-M7CJbmv7UCopc0neRKdzfoGWaVZC+xC1925GitKH9EAqYFzX9//25Q7oX4+jw0tiCCj+t5l6VZh8UPH23NZkMA==}
     hasBin: true
 
+  open@6.4.0:
+    resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
+    engines: {node: '>=8'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
+  ora@5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  p-cancelable@1.1.0:
+    resolution: {integrity: sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==}
+    engines: {node: '>=6'}
+
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
@@ -1878,6 +2857,10 @@ packages:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
@@ -1886,10 +2869,21 @@ packages:
     resolution: {integrity: sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
+  package-json@6.5.0:
+    resolution: {integrity: sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==}
+    engines: {node: '>=8'}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
+  parse-cache-control@1.0.1:
+    resolution: {integrity: sha512-60zvsJReQPX5/QP0Kzfd/VrpjScIQ7SHBW6bFCYfEP+fp0Eppr1SHhIO5nd1PjZtvclzSzES9D/p5nFJurwfWg==}
+
   parse-json@5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
@@ -1913,6 +2907,10 @@ packages:
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -1941,21 +2939,54 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier@3.5.3:
-    resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
+  prepend-http@2.0.0:
+    resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
+    engines: {node: '>=4'}
+
+  prettier@3.6.0:
+    resolution: {integrity: sha512-ujSB9uXHJKzM/2GBuE0hBOUgC77CN3Bnpqa+g80bkv3T3A93wL/xlzDATHhnhkzifz/UE2SNOvmbTz5hSkDlHw==}
     engines: {node: '>=14'}
     hasBin: true
 
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
+  protobufjs@7.5.3:
+    resolution: {integrity: sha512-sildjKwVqOI2kmFDiXQ6aEB0fjYTafpEvIBs8tOR8qI4spuL9OPROLVu2qZqi/xgCfsHIwVqlaF8JBjWFHnKbw==}
+    engines: {node: '>=12.0.0'}
+
+  ps-list@7.2.0:
+    resolution: {integrity: sha512-v4Bl6I3f2kJfr5o80ShABNHAokIgY+wFDTQfE+X3zWYgSGQOCBeYptLZUpoOALBqO5EawmDN/tjTldJesd0ujQ==}
+    engines: {node: '>=10'}
+
+  pump@3.0.3:
+    resolution: {integrity: sha512-todwxLMY7/heScKmntwQG8CXVkWUOdYxIvY2s0VWAAMh/nd8SoYiRaKjlr7+iCs984f2P8zvrfWcDDYVb73NfA==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  pupa@2.1.1:
+    resolution: {integrity: sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==}
+    engines: {node: '>=8'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  quick-lru@4.0.1:
+    resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==}
+    engines: {node: '>=8'}
+
+  raven@2.6.4:
+    resolution: {integrity: sha512-6PQdfC4+DQSFncowthLf+B6Hr0JpPsFBgTVYTAOq7tCmx/kR4SXbeawtPch20+3QfUcQDoJBLjWW1ybvZ4kXTw==}
+    engines: {node: '>= 4.0.0'}
+    deprecated: Please upgrade to @sentry/node. See the migration guide https://bit.ly/3ybOlo7
+    hasBin: true
+
+  rc@1.2.8:
+    resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
+    hasBin: true
+
   react-dom@19.1.0:
     resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
     peerDependencies:
@@ -1964,14 +2995,56 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-is@19.1.0:
+    resolution: {integrity: sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==}
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  react-router-dom@7.6.2:
+    resolution: {integrity: sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.6.2:
+    resolution: {integrity: sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
 
+  read-pkg-up@7.0.1:
+    resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
+    engines: {node: '>=8'}
+
+  read-pkg@5.2.0:
+    resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
+    engines: {node: '>=8'}
+
+  readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -1980,6 +3053,14 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  registry-auth-token@4.2.2:
+    resolution: {integrity: sha512-PC5ZysNb42zpFME6D/XlIgtNGdTl8bBOCw90xQLVMpzuuubJKYDWFAEuUNc+Cn8Z8724tg2SDhDRrkVEsqfDMg==}
+    engines: {node: '>=6.0.0'}
+
+  registry-url@5.1.0:
+    resolution: {integrity: sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==}
+    engines: {node: '>=8'}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -2008,6 +3089,13 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
 
+  responselike@1.0.2:
+    resolution: {integrity: sha512-/Fpe5guzJk1gPqdJLJR5u7eG/gNY4nImjbRDaVWVMRhne55TCmj2i9Q+54PBRfatRC8v/rIiv9BN0pMd9OV5EQ==}
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
   restore-cursor@5.1.0:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
@@ -2024,6 +3112,22 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  robots-parser@2.4.0:
+    resolution: {integrity: sha512-oO8f2SI04dJk3pbj2KOMJ4G6QfPAgqcGmrYGmansIcpRewIPT2ljWEt5I+ip6EgiyaLo+RXkkUWw74M25HDkMA==}
+
+  rollup-plugin-visualizer@6.0.3:
+    resolution: {integrity: sha512-ZU41GwrkDcCpVoffviuM9Clwjy5fcUxlz0oMoTXTYsK+tcIFzbdacnrr2n8TXcHxbGKKXtOdjxM2HUS4HjkwIw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      rolldown: 1.x || ^1.0.0-beta
+      rollup: 2.x || 3.x || 4.x
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+
   rollup@4.44.0:
     resolution: {integrity: sha512-qHcdEzLCiktQIfwBq420pn2dP+30uzqYxv9ETm91wdt2R9AFcWfjNAmje4NWlnCIQ5RMTzVf0ZyisOKqHR6RwA==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -2036,6 +3140,9 @@ packages:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
 
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
   safe-push-apply@1.0.0:
     resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
     engines: {node: '>= 0.4'}
@@ -2047,6 +3154,14 @@ packages:
   scheduler@0.26.0:
     resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
 
+  semver-diff@3.1.1:
+    resolution: {integrity: sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==}
+    engines: {node: '>=8'}
+
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -2056,6 +3171,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -2092,6 +3210,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -2108,6 +3229,30 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.4:
+    resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
+    engines: {node: '>= 8'}
+
+  spdx-correct@3.2.0:
+    resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
+
+  spdx-exceptions@2.5.0:
+    resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==}
+
+  spdx-expression-parse@3.0.1:
+    resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
+
+  spdx-license-ids@3.0.21:
+    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
+
+  speedline-core@1.4.3:
+    resolution: {integrity: sha512-DI7/OuAUD+GMpR6dmu8lliO2Wg5zfeh+/xsdyJZCzd8o5JgFUjCeLsBDuZjIQJdwXS3J0L/uZYrELKYqx+PXog==}
+    engines: {node: '>=8.0'}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -2116,6 +3261,9 @@ packages:
     resolution: {integrity: sha512-l0x1D6vhnsNUGPFVDx45eif0y6eedVC8nm5uACTrVFJFtl2mLRW17aWtVyxFCpn5t94VUPkjU8vSLwIuwwqtJQ==}
     engines: {node: '>=12.0.0'}
 
+  stack-trace@0.0.10:
+    resolution: {integrity: sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
@@ -2155,6 +3303,9 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2167,10 +3318,21 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@2.0.1:
+    resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
+    engines: {node: '>=0.10.0'}
+
   strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -2179,6 +3341,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  term-size@2.2.1:
+    resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
+    engines: {node: '>=8'}
+
   text-extensions@2.4.0:
     resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
     engines: {node: '>=8'}
@@ -2186,9 +3352,16 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  third-party-web@0.12.7:
+    resolution: {integrity: sha512-9d/OfjEOjyeOpnm4F9o0KSK6BI6ytvi9DINSB5h1+jdlCvQlhKpViMSxWpBN9WstdfDQ61BS6NxWqcPCuQCAJg==}
+
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
+  timed-out@4.0.1:
+    resolution: {integrity: sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==}
+    engines: {node: '>=0.10.0'}
+
   tinyexec@1.0.1:
     resolution: {integrity: sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw==}
 
@@ -2196,10 +3369,18 @@ packages:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
 
+  to-readable-stream@1.0.0:
+    resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
+    engines: {node: '>=6'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  trim-newlines@3.0.1:
+    resolution: {integrity: sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==}
+    engines: {node: '>=8'}
+
   ts-api-utils@2.1.0:
     resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
     engines: {node: '>=18.12'}
@@ -2221,10 +3402,22 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@0.18.1:
+    resolution: {integrity: sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==}
+    engines: {node: '>=10'}
+
   type-fest@0.20.2:
     resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
     engines: {node: '>=10'}
 
+  type-fest@0.6.0:
+    resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
+    engines: {node: '>=8'}
+
+  type-fest@0.8.1:
+    resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
+    engines: {node: '>=8'}
+
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
     engines: {node: '>= 0.4'}
@@ -2241,8 +3434,11 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript-eslint@8.34.1:
-    resolution: {integrity: sha512-XjS+b6Vg9oT1BaIUfkW3M3LvqZE++rbzAMEHuccCfO/YkP43ha6w3jTEMilQxMF92nVOYCcdjv1ZUhAa1D/0ow==}
+  typedarray-to-buffer@3.1.5:
+    resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
+
+  typescript-eslint@8.35.0:
+    resolution: {integrity: sha512-uEnz70b7kBz6eg/j0Czy6K5NivaYopgxRjsnAJ2Fx5oTLo3wefTHIbL7AkQr1+7tJCRVpTs/wiM8JR/11Loq9A==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -2264,6 +3460,10 @@ packages:
     resolution: {integrity: sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==}
     engines: {node: '>=18'}
 
+  unique-string@2.0.0:
+    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
+    engines: {node: '>=8'}
+
   unrs-resolver@1.9.1:
     resolution: {integrity: sha512-4AZVxP05JGN6DwqIkSP4VKLOcwQa5l37SWHF/ahcuqBMbfxbpN1L1QKafEhWCziHhzKex9H/AR09H0OuVyU+9g==}
 
@@ -2273,9 +3473,32 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  update-notifier@4.1.3:
+    resolution: {integrity: sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==}
+    engines: {node: '>=8'}
+
+  update-notifier@5.1.0:
+    resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
+    engines: {node: '>=10'}
+
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  url-parse-lax@3.0.0:
+    resolution: {integrity: sha512-NjFKA0DidqPa5ciFcSrXnAltTtzz84ogy+NebPvfEgAck0+TNg4UJ4IN+fB7zRZfbgUf0syOo9MDxFkDSMuFaQ==}
+    engines: {node: '>=4'}
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  uuid@3.3.2:
+    resolution: {integrity: sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==}
+    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
+    hasBin: true
+
+  validate-npm-package-license@3.0.4:
+    resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
+
   vite@6.3.5:
     resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -2316,6 +3539,20 @@ packages:
       yaml:
         optional: true
 
+  wcwidth@1.0.1:
+    resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
+
+  web-vitals@4.2.4:
+    resolution: {integrity: sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==}
+
+  websocket-driver@0.7.4:
+    resolution: {integrity: sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==}
+    engines: {node: '>=0.8.0'}
+
+  websocket-extensions@0.1.4:
+    resolution: {integrity: sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==}
+    engines: {node: '>=0.8.0'}
+
   which-boxed-primitive@1.1.1:
     resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
     engines: {node: '>= 0.4'}
@@ -2341,6 +3578,10 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  widest-line@3.1.0:
+    resolution: {integrity: sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==}
+    engines: {node: '>=8'}
+
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -2356,6 +3597,25 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
+  write-file-atomic@3.0.3:
+    resolution: {integrity: sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==}
+
+  ws@7.5.10:
+    resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
+    engines: {node: '>=8.3.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: ^5.0.2
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xdg-basedir@4.0.0:
+    resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
+    engines: {node: '>=8'}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -2363,15 +3623,30 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yallist@4.0.0:
+    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
+
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.8.0:
     resolution: {integrity: sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==}
     engines: {node: '>= 14.6'}
     hasBin: true
 
+  yargs-parser@20.2.9:
+    resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
+    engines: {node: '>=10'}
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
 
+  yargs@16.2.0:
+    resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
+    engines: {node: '>=10'}
+
   yargs@17.7.2:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
@@ -2384,6 +3659,24 @@ packages:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
     engines: {node: '>=12.20'}
 
+  zustand@5.0.5:
+    resolution: {integrity: sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -2478,6 +3771,8 @@ snapshots:
       '@babel/core': 7.27.4
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/runtime@7.27.6': {}
+
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -2627,6 +3922,89 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/runtime': 7.27.6
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/is-prop-valid@1.3.1':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.1.0)
+      '@emotion/utils': 1.4.2
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@esbuild/aix-ppc64@0.25.5':
     optional: true
 
@@ -2675,62 +4053,392 @@ snapshots:
   '@esbuild/linux-s390x@0.25.5':
     optional: true
 
-  '@esbuild/linux-x64@0.25.5':
-    optional: true
+  '@esbuild/linux-x64@0.25.5':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.5':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.5':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.5':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.5':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.5':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.5':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.5':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.5':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.1)':
+    dependencies:
+      eslint: 8.57.1
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/eslintrc@2.1.4':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@8.57.1': {}
+
+  '@eslint/js@9.29.0': {}
+
+  '@feature-sliced/eslint-config@0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1))(eslint-plugin-import@2.32.0)':
+    dependencies:
+      eslint-plugin-boundaries: 5.0.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+
+  '@firebase/ai@1.4.0(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/app-types': 0.9.3
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/analytics-compat@0.2.22(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/analytics': 0.10.16(@firebase/app@0.13.1)
+      '@firebase/analytics-types': 0.8.3
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/analytics-types@0.8.3': {}
+
+  '@firebase/analytics@0.10.16(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/app-check-compat@0.3.25(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-check': 0.10.0(@firebase/app@0.13.1)
+      '@firebase/app-check-types': 0.5.3
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/app-check-interop-types@0.3.3': {}
+
+  '@firebase/app-check-types@0.5.3': {}
+
+  '@firebase/app-check@0.10.0(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/app-compat@0.4.1':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/app-types@0.9.3': {}
+
+  '@firebase/app@0.13.1':
+    dependencies:
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/auth-compat@0.5.27(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/auth': 1.10.7(@firebase/app@0.13.1)
+      '@firebase/auth-types': 0.13.0(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)
+      '@firebase/component': 0.6.17
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+      - '@react-native-async-storage/async-storage'
+
+  '@firebase/auth-interop-types@0.2.4': {}
+
+  '@firebase/auth-types@0.13.0(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.12.0
+
+  '@firebase/auth@1.10.7(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/component@0.6.17':
+    dependencies:
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/data-connect@0.3.9(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/database-compat@2.0.10':
+    dependencies:
+      '@firebase/component': 0.6.17
+      '@firebase/database': 1.0.19
+      '@firebase/database-types': 1.0.14
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/database-types@1.0.14':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.12.0
+
+  '@firebase/database@1.0.19':
+    dependencies:
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      faye-websocket: 0.11.4
+      tslib: 2.8.1
+
+  '@firebase/firestore-compat@0.3.52(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/firestore': 4.7.17(@firebase/app@0.13.1)
+      '@firebase/firestore-types': 3.0.3(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/firestore-types@3.0.3(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.12.0
+
+  '@firebase/firestore@4.7.17(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      '@firebase/webchannel-wrapper': 1.0.3
+      '@grpc/grpc-js': 1.9.15
+      '@grpc/proto-loader': 0.7.15
+      tslib: 2.8.1
+
+  '@firebase/functions-compat@0.3.25(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/functions': 0.12.8(@firebase/app@0.13.1)
+      '@firebase/functions-types': 0.6.3
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/functions-types@0.6.3': {}
+
+  '@firebase/functions@0.12.8(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/app-check-interop-types': 0.3.3
+      '@firebase/auth-interop-types': 0.2.4
+      '@firebase/component': 0.6.17
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+
+  '@firebase/installations-compat@0.2.17(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/installations-types': 0.5.3(@firebase/app-types@0.9.3)
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
+
+  '@firebase/installations-types@0.5.3(@firebase/app-types@0.9.3)':
+    dependencies:
+      '@firebase/app-types': 0.9.3
+
+  '@firebase/installations@0.6.17(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/util': 1.12.0
+      idb: 7.1.1
+      tslib: 2.8.1
+
+  '@firebase/logger@0.4.4':
+    dependencies:
+      tslib: 2.8.1
+
+  '@firebase/messaging-compat@0.2.21(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/messaging': 0.12.21(@firebase/app@0.13.1)
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+
+  '@firebase/messaging-interop-types@0.2.3': {}
 
-  '@esbuild/netbsd-arm64@0.25.5':
-    optional: true
+  '@firebase/messaging@0.12.21(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/messaging-interop-types': 0.2.3
+      '@firebase/util': 1.12.0
+      idb: 7.1.1
+      tslib: 2.8.1
 
-  '@esbuild/netbsd-x64@0.25.5':
-    optional: true
+  '@firebase/performance-compat@0.2.19(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/performance': 0.7.6(@firebase/app@0.13.1)
+      '@firebase/performance-types': 0.2.3
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
 
-  '@esbuild/openbsd-arm64@0.25.5':
-    optional: true
+  '@firebase/performance-types@0.2.3': {}
 
-  '@esbuild/openbsd-x64@0.25.5':
-    optional: true
+  '@firebase/performance@0.7.6(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+      web-vitals: 4.2.4
 
-  '@esbuild/sunos-x64@0.25.5':
-    optional: true
+  '@firebase/remote-config-compat@0.2.17(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/logger': 0.4.4
+      '@firebase/remote-config': 0.6.4(@firebase/app@0.13.1)
+      '@firebase/remote-config-types': 0.4.0
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
 
-  '@esbuild/win32-arm64@0.25.5':
-    optional: true
+  '@firebase/remote-config-types@0.4.0': {}
 
-  '@esbuild/win32-ia32@0.25.5':
-    optional: true
+  '@firebase/remote-config@0.6.4(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/logger': 0.4.4
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
 
-  '@esbuild/win32-x64@0.25.5':
-    optional: true
+  '@firebase/storage-compat@0.3.23(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app-compat': 0.4.1
+      '@firebase/component': 0.6.17
+      '@firebase/storage': 0.13.13(@firebase/app@0.13.1)
+      '@firebase/storage-types': 0.8.3(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
+    transitivePeerDependencies:
+      - '@firebase/app'
+      - '@firebase/app-types'
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@8.57.1)':
+  '@firebase/storage-types@0.8.3(@firebase/app-types@0.9.3)(@firebase/util@1.12.0)':
     dependencies:
-      eslint: 8.57.1
-      eslint-visitor-keys: 3.4.3
+      '@firebase/app-types': 0.9.3
+      '@firebase/util': 1.12.0
 
-  '@eslint-community/regexpp@4.12.1': {}
+  '@firebase/storage@0.13.13(@firebase/app@0.13.1)':
+    dependencies:
+      '@firebase/app': 0.13.1
+      '@firebase/component': 0.6.17
+      '@firebase/util': 1.12.0
+      tslib: 2.8.1
 
-  '@eslint/eslintrc@2.1.4':
+  '@firebase/util@1.12.0':
     dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 9.6.1
-      globals: 13.24.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
+      tslib: 2.8.1
 
-  '@eslint/js@8.57.1': {}
+  '@firebase/webchannel-wrapper@1.0.3': {}
 
-  '@eslint/js@9.29.0': {}
+  '@grpc/grpc-js@1.9.15':
+    dependencies:
+      '@grpc/proto-loader': 0.7.15
+      '@types/node': 24.0.3
 
-  '@feature-sliced/eslint-config@0.1.1(eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1))(eslint-plugin-import@2.32.0)':
+  '@grpc/proto-loader@0.7.15':
     dependencies:
-      eslint-plugin-boundaries: 5.0.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+      lodash.camelcase: 4.3.0
+      long: 5.3.2
+      protobufjs: 7.5.3
+      yargs: 17.7.2
 
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
@@ -2761,6 +4469,93 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@mui/core-downloads-tracker@7.1.2': {}
+
+  '@mui/icons-material@7.1.2(@mui/material@7.1.2(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@mui/material': 7.1.2(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@mui/material@7.1.2(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@mui/core-downloads-tracker': 7.1.2
+      '@mui/system': 7.1.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+      '@mui/types': 7.4.3(@types/react@19.1.8)
+      '@mui/utils': 7.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@popperjs/core': 2.11.8
+      '@types/react-transition-group': 4.4.12(@types/react@19.1.8)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-is: 19.1.0
+      react-transition-group: 4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+      '@types/react': 19.1.8
+
+  '@mui/private-theming@7.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@mui/utils': 7.1.1(@types/react@19.1.8)(react@19.1.0)
+      prop-types: 15.8.1
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@mui/styled-engine@7.1.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 19.1.0
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+
+  '@mui/system@7.1.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@mui/private-theming': 7.1.1(@types/react@19.1.8)(react@19.1.0)
+      '@mui/styled-engine': 7.1.1(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0))(react@19.1.0)
+      '@mui/types': 7.4.3(@types/react@19.1.8)
+      '@mui/utils': 7.1.1(@types/react@19.1.8)(react@19.1.0)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 19.1.0
+    optionalDependencies:
+      '@emotion/react': 11.14.0(@types/react@19.1.8)(react@19.1.0)
+      '@emotion/styled': 11.14.0(@emotion/react@11.14.0(@types/react@19.1.8)(react@19.1.0))(@types/react@19.1.8)(react@19.1.0)
+      '@types/react': 19.1.8
+
+  '@mui/types@7.4.3(@types/react@19.1.8)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+    optionalDependencies:
+      '@types/react': 19.1.8
+
+  '@mui/utils@7.1.1(@types/react@19.1.8)(react@19.1.0)':
+    dependencies:
+      '@babel/runtime': 7.27.6
+      '@mui/types': 7.4.3(@types/react@19.1.8)
+      '@types/prop-types': 15.7.15
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 19.1.0
+      react-is: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.8
+
   '@napi-rs/wasm-runtime@0.2.11':
     dependencies:
       '@emnapi/core': 1.4.3
@@ -2780,7 +4575,32 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@rolldown/pluginutils@1.0.0-beta.11': {}
+  '@popperjs/core@2.11.8': {}
+
+  '@protobufjs/aspromise@1.1.2': {}
+
+  '@protobufjs/base64@1.1.2': {}
+
+  '@protobufjs/codegen@2.0.4': {}
+
+  '@protobufjs/eventemitter@1.1.0': {}
+
+  '@protobufjs/fetch@1.1.0':
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/inquire': 1.1.0
+
+  '@protobufjs/float@1.0.2': {}
+
+  '@protobufjs/inquire@1.1.0': {}
+
+  '@protobufjs/path@1.1.2': {}
+
+  '@protobufjs/pool@1.1.0': {}
+
+  '@protobufjs/utf8@1.1.0': {}
+
+  '@rolldown/pluginutils@1.0.0-beta.19': {}
 
   '@rollup/rollup-android-arm-eabi@4.44.0':
     optional: true
@@ -2844,6 +4664,19 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
+  '@sindresorhus/is@0.14.0': {}
+
+  '@szmarczak/http-timer@1.1.2':
+    dependencies:
+      defer-to-connect: 1.1.3
+
+  '@tanstack/query-core@5.81.2': {}
+
+  '@tanstack/react-query@5.81.2(react@19.1.0)':
+    dependencies:
+      '@tanstack/query-core': 5.81.2
+      react: 19.1.0
+
   '@tybys/wasm-util@0.9.0':
     dependencies:
       tslib: 2.8.1
@@ -2876,28 +4709,61 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@types/history@4.7.11': {}
+
   '@types/json5@0.0.29': {}
 
+  '@types/keyv@3.1.4':
+    dependencies:
+      '@types/node': 24.0.3
+
+  '@types/minimist@1.2.5': {}
+
   '@types/node@24.0.3':
     dependencies:
       undici-types: 7.8.0
 
+  '@types/normalize-package-data@2.4.4': {}
+
+  '@types/parse-json@4.0.2': {}
+
+  '@types/prop-types@15.7.15': {}
+
   '@types/react-dom@19.1.6(@types/react@19.1.8)':
     dependencies:
       '@types/react': 19.1.8
 
+  '@types/react-router-dom@5.3.3':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.1.8
+      '@types/react-router': 5.1.20
+
+  '@types/react-router@5.1.20':
+    dependencies:
+      '@types/history': 4.7.11
+      '@types/react': 19.1.8
+
+  '@types/react-transition-group@4.4.12(@types/react@19.1.8)':
+    dependencies:
+      '@types/react': 19.1.8
+
   '@types/react@19.1.8':
     dependencies:
       csstype: 3.1.3
 
-  '@typescript-eslint/eslint-plugin@8.34.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
+  '@types/responselike@1.0.3':
+    dependencies:
+      '@types/node': 24.0.3
+
+  '@typescript-eslint/eslint-plugin@8.35.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.34.1
-      '@typescript-eslint/type-utils': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.34.1
+      '@typescript-eslint/parser': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/scope-manager': 8.35.0
+      '@typescript-eslint/type-utils': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.35.0
       eslint: 8.57.1
       graphemer: 1.4.0
       ignore: 7.0.5
@@ -2907,40 +4773,40 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.34.1
-      '@typescript-eslint/types': 8.34.1
-      '@typescript-eslint/typescript-estree': 8.34.1(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.34.1
+      '@typescript-eslint/scope-manager': 8.35.0
+      '@typescript-eslint/types': 8.35.0
+      '@typescript-eslint/typescript-estree': 8.35.0(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.35.0
       debug: 4.4.1
       eslint: 8.57.1
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.34.1(typescript@5.8.3)':
+  '@typescript-eslint/project-service@8.35.0(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.34.1(typescript@5.8.3)
-      '@typescript-eslint/types': 8.34.1
+      '@typescript-eslint/tsconfig-utils': 8.35.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.35.0
       debug: 4.4.1
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.34.1':
+  '@typescript-eslint/scope-manager@8.35.0':
     dependencies:
-      '@typescript-eslint/types': 8.34.1
-      '@typescript-eslint/visitor-keys': 8.34.1
+      '@typescript-eslint/types': 8.35.0
+      '@typescript-eslint/visitor-keys': 8.35.0
 
-  '@typescript-eslint/tsconfig-utils@8.34.1(typescript@5.8.3)':
+  '@typescript-eslint/tsconfig-utils@8.35.0(typescript@5.8.3)':
     dependencies:
       typescript: 5.8.3
 
-  '@typescript-eslint/type-utils@8.34.1(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/type-utils@8.35.0(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/typescript-estree': 8.34.1(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/typescript-estree': 8.35.0(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       debug: 4.4.1
       eslint: 8.57.1
       ts-api-utils: 2.1.0(typescript@5.8.3)
@@ -2948,14 +4814,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.34.1': {}
+  '@typescript-eslint/types@8.35.0': {}
 
-  '@typescript-eslint/typescript-estree@8.34.1(typescript@5.8.3)':
+  '@typescript-eslint/typescript-estree@8.35.0(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.34.1(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.34.1(typescript@5.8.3)
-      '@typescript-eslint/types': 8.34.1
-      '@typescript-eslint/visitor-keys': 8.34.1
+      '@typescript-eslint/project-service': 8.35.0(typescript@5.8.3)
+      '@typescript-eslint/tsconfig-utils': 8.35.0(typescript@5.8.3)
+      '@typescript-eslint/types': 8.35.0
+      '@typescript-eslint/visitor-keys': 8.35.0
       debug: 4.4.1
       fast-glob: 3.3.3
       is-glob: 4.0.3
@@ -2966,20 +4832,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.34.1(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/utils@8.35.0(eslint@8.57.1)(typescript@5.8.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.34.1
-      '@typescript-eslint/types': 8.34.1
-      '@typescript-eslint/typescript-estree': 8.34.1(typescript@5.8.3)
+      '@typescript-eslint/scope-manager': 8.35.0
+      '@typescript-eslint/types': 8.35.0
+      '@typescript-eslint/typescript-estree': 8.35.0(typescript@5.8.3)
       eslint: 8.57.1
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.34.1':
+  '@typescript-eslint/visitor-keys@8.35.0':
     dependencies:
-      '@typescript-eslint/types': 8.34.1
+      '@typescript-eslint/types': 8.35.0
       eslint-visitor-keys: 4.2.1
 
   '@ungap/structured-clone@1.3.0': {}
@@ -3043,12 +4909,12 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.9.1':
     optional: true
 
-  '@vitejs/plugin-react@4.5.2(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0))':
+  '@vitejs/plugin-react@4.6.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0))':
     dependencies:
       '@babel/core': 7.27.4
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.4)
       '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.27.4)
-      '@rolldown/pluginutils': 1.0.0-beta.11
+      '@rolldown/pluginutils': 1.0.0-beta.19
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
       vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0)
@@ -3080,6 +4946,12 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  ansi-align@3.0.1:
+    dependencies:
+      string-width: 4.2.3
+
+  ansi-colors@4.1.3: {}
+
   ansi-escapes@7.0.0:
     dependencies:
       environment: 1.1.0
@@ -3167,6 +5039,8 @@ snapshots:
       get-intrinsic: 1.3.0
       is-array-buffer: 3.0.5
 
+  arrify@1.0.1: {}
+
   ast-types-flow@0.0.8: {}
 
   async-function@1.0.0: {}
@@ -3177,10 +5051,54 @@ snapshots:
 
   axe-core@4.10.3: {}
 
+  axe-core@4.2.3: {}
+
   axobject-query@4.1.0: {}
 
+  babel-plugin-import@1.13.8:
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      cosmiconfig: 7.1.0
+      resolve: 1.22.10
+
   balanced-match@1.0.2: {}
 
+  base64-js@1.5.1: {}
+
+  bl@4.1.0:
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+
+  boxen@4.2.0:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 5.3.1
+      chalk: 3.0.0
+      cli-boxes: 2.2.1
+      string-width: 4.2.3
+      term-size: 2.2.1
+      type-fest: 0.8.1
+      widest-line: 3.1.0
+
+  boxen@5.1.2:
+    dependencies:
+      ansi-align: 3.0.1
+      camelcase: 6.3.0
+      chalk: 4.1.2
+      cli-boxes: 2.2.1
+      string-width: 4.2.3
+      type-fest: 0.20.2
+      widest-line: 3.1.0
+      wrap-ansi: 7.0.0
+
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -3197,10 +5115,25 @@ snapshots:
   browserslist@4.25.0:
     dependencies:
       caniuse-lite: 1.0.30001724
-      electron-to-chromium: 1.5.171
+      electron-to-chromium: 1.5.172
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.25.0)
 
+  buffer@5.7.1:
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+
+  cacheable-request@6.1.0:
+    dependencies:
+      clone-response: 1.0.3
+      get-stream: 5.2.0
+      http-cache-semantics: 4.2.0
+      keyv: 3.1.0
+      lowercase-keys: 2.0.0
+      normalize-url: 4.5.1
+      responselike: 1.0.2
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -3220,8 +5153,23 @@ snapshots:
 
   callsites@3.1.0: {}
 
+  camelcase-keys@6.2.2:
+    dependencies:
+      camelcase: 5.3.1
+      map-obj: 4.3.0
+      quick-lru: 4.0.1
+
+  camelcase@5.3.1: {}
+
+  camelcase@6.3.0: {}
+
   caniuse-lite@1.0.30001724: {}
 
+  chalk@3.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
   chalk@4.1.2:
     dependencies:
       ansi-styles: 4.3.0
@@ -3229,21 +5177,56 @@ snapshots:
 
   chalk@5.4.1: {}
 
+  charenc@0.0.2: {}
+
+  chrome-launcher@0.14.2:
+    dependencies:
+      '@types/node': 24.0.3
+      escape-string-regexp: 4.0.0
+      is-wsl: 2.2.0
+      lighthouse-logger: 1.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  ci-info@2.0.0: {}
+
+  cli-boxes@2.2.1: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
   cli-cursor@5.0.0:
     dependencies:
       restore-cursor: 5.1.0
 
+  cli-spinners@2.9.2: {}
+
   cli-truncate@4.0.0:
     dependencies:
       slice-ansi: 5.0.0
       string-width: 7.2.0
 
+  cliui@7.0.4:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
   cliui@8.0.1:
     dependencies:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clone-response@1.0.3:
+    dependencies:
+      mimic-response: 1.0.1
+
+  clone@1.0.4: {}
+
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3261,6 +5244,15 @@ snapshots:
 
   concat-map@0.0.1: {}
 
+  configstore@5.0.1:
+    dependencies:
+      dot-prop: 5.3.0
+      graceful-fs: 4.2.11
+      make-dir: 3.1.0
+      unique-string: 2.0.0
+      write-file-atomic: 3.0.3
+      xdg-basedir: 4.0.0
+
   conventional-changelog-angular@7.0.0:
     dependencies:
       compare-func: 2.0.0
@@ -3276,8 +5268,14 @@ snapshots:
       meow: 12.1.1
       split2: 4.2.0
 
+  convert-source-map@1.9.0: {}
+
   convert-source-map@2.0.0: {}
 
+  cookie@0.3.1: {}
+
+  cookie@1.0.2: {}
+
   cosmiconfig-typescript-loader@6.1.0(@types/node@24.0.3)(cosmiconfig@9.0.0(typescript@5.8.3))(typescript@5.8.3):
     dependencies:
       '@types/node': 24.0.3
@@ -3285,6 +5283,14 @@ snapshots:
       jiti: 2.4.2
       typescript: 5.8.3
 
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+
   cosmiconfig@9.0.0(typescript@5.8.3):
     dependencies:
       env-paths: 2.2.1
@@ -3300,6 +5306,18 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypt@0.0.2: {}
+
+  crypto-random-string@2.0.0: {}
+
+  csp_evaluator@1.1.0: {}
+
+  cssom@0.3.8: {}
+
+  cssstyle@1.2.1:
+    dependencies:
+      cssom: 0.3.8
+
   csstype@3.1.3: {}
 
   damerau-levenshtein@1.0.8: {}
@@ -3324,6 +5342,10 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -3332,14 +5354,35 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
+  decamelize-keys@1.1.1:
+    dependencies:
+      decamelize: 1.2.0
+      map-obj: 1.0.1
+
+  decamelize@1.2.0: {}
+
+  decompress-response@3.3.0:
+    dependencies:
+      mimic-response: 1.0.1
+
+  deep-extend@0.6.0: {}
+
   deep-is@0.1.4: {}
 
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
+
+  defer-to-connect@1.1.3: {}
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  define-lazy-prop@2.0.0: {}
+
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
@@ -3354,6 +5397,11 @@ snapshots:
     dependencies:
       esutils: 2.0.3
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.27.6
+      csstype: 3.1.3
+
   dot-prop@5.3.0:
     dependencies:
       is-obj: 2.0.0
@@ -3364,7 +5412,9 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  electron-to-chromium@1.5.171: {}
+  duplexer3@0.1.5: {}
+
+  electron-to-chromium@1.5.172: {}
 
   emoji-regex@10.4.0: {}
 
@@ -3372,6 +5422,15 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
   env-paths@2.2.1: {}
 
   environment@1.1.0: {}
@@ -3511,6 +5570,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-goat@2.1.1: {}
+
   escape-string-regexp@4.0.0: {}
 
   eslint-config-prettier@10.1.5(eslint@8.57.1):
@@ -3543,38 +5604,38 @@ snapshots:
       tinyglobby: 0.2.14
       unrs-resolver: 1.9.1
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 4.4.3(eslint-plugin-import@2.32.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 4.4.3(eslint-plugin-import@2.32.0)(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
+  eslint-plugin-boundaries@5.0.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
     dependencies:
       chalk: 4.1.2
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
       micromatch: 4.0.8
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
@@ -3582,7 +5643,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -3593,7 +5654,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@4.4.3)(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -3605,7 +5666,7 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -3752,6 +5813,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  faye-websocket@0.11.4:
+    dependencies:
+      websocket-driver: 0.7.4
+
   fdir@6.4.6(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
@@ -3764,6 +5829,13 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-root@1.1.0: {}
+
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -3775,6 +5847,39 @@ snapshots:
       path-exists: 5.0.0
       unicorn-magic: 0.1.0
 
+  firebase@11.9.1:
+    dependencies:
+      '@firebase/ai': 1.4.0(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)
+      '@firebase/analytics': 0.10.16(@firebase/app@0.13.1)
+      '@firebase/analytics-compat': 0.2.22(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/app': 0.13.1
+      '@firebase/app-check': 0.10.0(@firebase/app@0.13.1)
+      '@firebase/app-check-compat': 0.3.25(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/app-compat': 0.4.1
+      '@firebase/app-types': 0.9.3
+      '@firebase/auth': 1.10.7(@firebase/app@0.13.1)
+      '@firebase/auth-compat': 0.5.27(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)
+      '@firebase/data-connect': 0.3.9(@firebase/app@0.13.1)
+      '@firebase/database': 1.0.19
+      '@firebase/database-compat': 2.0.10
+      '@firebase/firestore': 4.7.17(@firebase/app@0.13.1)
+      '@firebase/firestore-compat': 0.3.52(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)
+      '@firebase/functions': 0.12.8(@firebase/app@0.13.1)
+      '@firebase/functions-compat': 0.3.25(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/installations': 0.6.17(@firebase/app@0.13.1)
+      '@firebase/installations-compat': 0.2.17(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)
+      '@firebase/messaging': 0.12.21(@firebase/app@0.13.1)
+      '@firebase/messaging-compat': 0.2.21(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/performance': 0.7.6(@firebase/app@0.13.1)
+      '@firebase/performance-compat': 0.2.19(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/remote-config': 0.6.4(@firebase/app@0.13.1)
+      '@firebase/remote-config-compat': 0.2.17(@firebase/app-compat@0.4.1)(@firebase/app@0.13.1)
+      '@firebase/storage': 0.13.13(@firebase/app@0.13.1)
+      '@firebase/storage-compat': 0.3.23(@firebase/app-compat@0.4.1)(@firebase/app-types@0.9.3)(@firebase/app@0.13.1)
+      '@firebase/util': 1.12.0
+    transitivePeerDependencies:
+      - '@react-native-async-storage/async-storage'
+
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.3.3
@@ -3829,6 +5934,14 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-stream@4.1.0:
+    dependencies:
+      pump: 3.0.3
+
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.3
+
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -3864,7 +5977,15 @@ snapshots:
 
   global-directory@4.0.1:
     dependencies:
-      ini: 4.1.1
+      ini: 4.1.1
+
+  global-dirs@2.1.0:
+    dependencies:
+      ini: 1.3.7
+
+  global-dirs@3.0.1:
+    dependencies:
+      ini: 2.0.0
 
   globals@11.12.0: {}
 
@@ -3881,8 +6002,28 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  got@9.6.0:
+    dependencies:
+      '@sindresorhus/is': 0.14.0
+      '@szmarczak/http-timer': 1.1.2
+      '@types/keyv': 3.1.4
+      '@types/responselike': 1.0.3
+      cacheable-request: 6.1.0
+      decompress-response: 3.3.0
+      duplexer3: 0.1.5
+      get-stream: 4.1.0
+      lowercase-keys: 1.0.1
+      mimic-response: 1.0.1
+      p-cancelable: 1.1.0
+      to-readable-stream: 1.0.0
+      url-parse-lax: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
   graphemer@1.4.0: {}
 
+  hard-rejection@2.1.0: {}
+
   has-bigints@1.1.0: {}
 
   has-flag@4.0.0: {}
@@ -3901,25 +6042,53 @@ snapshots:
     dependencies:
       has-symbols: 1.1.0
 
+  has-yarn@2.1.0: {}
+
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
+  hosted-git-info@2.8.9: {}
+
+  hosted-git-info@4.1.0:
+    dependencies:
+      lru-cache: 6.0.0
+
+  http-cache-semantics@4.2.0: {}
+
+  http-link-header@0.8.0: {}
+
+  http-parser-js@0.5.10: {}
+
   husky@9.1.7: {}
 
+  idb@7.1.1: {}
+
+  ieee754@1.2.1: {}
+
   ignore@5.3.2: {}
 
   ignore@7.0.5: {}
 
+  image-ssim@0.2.0: {}
+
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  import-lazy@2.1.0: {}
+
   import-meta-resolve@4.1.0: {}
 
   imurmurhash@0.1.4: {}
 
+  indent-string@4.0.0: {}
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -3927,6 +6096,12 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  ini@1.3.7: {}
+
+  ini@1.3.8: {}
+
+  ini@2.0.0: {}
+
   ini@4.1.1: {}
 
   internal-slot@1.1.0:
@@ -3935,6 +6110,12 @@ snapshots:
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  intl-messageformat-parser@1.8.1: {}
+
+  intl-messageformat@4.4.0:
+    dependencies:
+      intl-messageformat-parser: 1.8.1
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.8
@@ -3960,12 +6141,18 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-buffer@1.1.6: {}
+
   is-bun-module@2.0.0:
     dependencies:
       semver: 7.7.2
 
   is-callable@1.2.7: {}
 
+  is-ci@2.0.0:
+    dependencies:
+      ci-info: 2.0.0
+
   is-core-module@2.16.1:
     dependencies:
       hasown: 2.0.2
@@ -3981,6 +6168,8 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-docker@2.2.1: {}
+
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.1.1:
@@ -4006,10 +6195,26 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-installed-globally@0.3.2:
+    dependencies:
+      global-dirs: 2.1.0
+      is-path-inside: 3.0.3
+
+  is-installed-globally@0.4.0:
+    dependencies:
+      global-dirs: 3.0.1
+      is-path-inside: 3.0.3
+
+  is-interactive@1.0.0: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
 
+  is-npm@4.0.0: {}
+
+  is-npm@5.0.0: {}
+
   is-number-object@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -4021,6 +6226,8 @@ snapshots:
 
   is-path-inside@3.0.3: {}
 
+  is-plain-obj@1.1.0: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -4053,6 +6260,10 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.19
 
+  is-typedarray@1.0.0: {}
+
+  is-unicode-supported@0.1.0: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -4064,6 +6275,14 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-wsl@1.1.0: {}
+
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-yarn-global@0.3.0: {}
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -4079,6 +6298,10 @@ snapshots:
 
   jiti@2.4.2: {}
 
+  jpeg-js@0.4.4: {}
+
+  js-library-detector@6.7.0: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
@@ -4087,6 +6310,8 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-buffer@3.0.0: {}
+
   json-buffer@3.0.1: {}
 
   json-parse-even-better-errors@2.3.1: {}
@@ -4112,21 +6337,91 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  keyv@3.1.0:
+    dependencies:
+      json-buffer: 3.0.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
 
+  kind-of@6.0.3: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
     dependencies:
       language-subtag-registry: 0.3.23
 
+  latest-version@5.1.0:
+    dependencies:
+      package-json: 6.5.0
+
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lighthouse-ci@1.13.1:
+    dependencies:
+      chrome-launcher: 0.14.2
+      lighthouse: 8.6.0
+      meow: 9.0.0
+      mkdirp: 1.0.4
+      ora: 5.4.1
+      rimraf: 3.0.2
+      update-notifier: 5.1.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  lighthouse-logger@1.4.2:
+    dependencies:
+      debug: 2.6.9
+      marky: 1.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  lighthouse-stack-packs@1.12.2: {}
+
+  lighthouse@8.6.0:
+    dependencies:
+      axe-core: 4.2.3
+      chrome-launcher: 0.14.2
+      configstore: 5.0.1
+      csp_evaluator: 1.1.0
+      cssstyle: 1.2.1
+      enquirer: 2.4.1
+      http-link-header: 0.8.0
+      intl-messageformat: 4.4.0
+      jpeg-js: 0.4.4
+      js-library-detector: 6.7.0
+      lighthouse-logger: 1.4.2
+      lighthouse-stack-packs: 1.12.2
+      lodash.clonedeep: 4.5.0
+      lodash.get: 4.4.2
+      lodash.isequal: 4.5.0
+      lodash.set: 4.3.2
+      lookup-closest-locale: 6.0.4
+      metaviewport-parser: 0.2.0
+      open: 6.4.0
+      parse-cache-control: 1.0.1
+      ps-list: 7.2.0
+      raven: 2.6.4
+      robots-parser: 2.4.0
+      semver: 5.7.2
+      speedline-core: 1.4.3
+      third-party-web: 0.12.7
+      update-notifier: 4.1.3
+      ws: 7.5.10
+      yargs: 16.2.0
+      yargs-parser: 20.2.9
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -4155,6 +6450,10 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
@@ -4165,6 +6464,12 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
+  lodash.clonedeep@4.5.0: {}
+
+  lodash.get@4.4.2: {}
+
+  lodash.isequal@4.5.0: {}
+
   lodash.isplainobject@4.0.6: {}
 
   lodash.kebabcase@4.1.1: {}
@@ -4173,6 +6478,8 @@ snapshots:
 
   lodash.mergewith@4.6.2: {}
 
+  lodash.set@4.3.2: {}
+
   lodash.snakecase@4.1.1: {}
 
   lodash.startcase@4.4.0: {}
@@ -4181,6 +6488,11 @@ snapshots:
 
   lodash.upperfirst@4.3.1: {}
 
+  log-symbols@4.1.0:
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+
   log-update@6.1.0:
     dependencies:
       ansi-escapes: 7.0.0
@@ -4189,27 +6501,78 @@ snapshots:
       strip-ansi: 7.1.0
       wrap-ansi: 9.0.0
 
+  long@5.3.2: {}
+
+  lookup-closest-locale@6.0.4: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
 
+  lowercase-keys@1.0.1: {}
+
+  lowercase-keys@2.0.0: {}
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@6.0.0:
+    dependencies:
+      yallist: 4.0.0
+
+  make-dir@3.1.0:
+    dependencies:
+      semver: 6.3.1
+
+  map-obj@1.0.1: {}
+
+  map-obj@4.3.0: {}
+
+  marky@1.3.0: {}
+
   math-intrinsics@1.1.0: {}
 
+  md5@2.3.0:
+    dependencies:
+      charenc: 0.0.2
+      crypt: 0.0.2
+      is-buffer: 1.1.6
+
   meow@12.1.1: {}
 
+  meow@9.0.0:
+    dependencies:
+      '@types/minimist': 1.2.5
+      camelcase-keys: 6.2.2
+      decamelize: 1.2.0
+      decamelize-keys: 1.1.1
+      hard-rejection: 2.1.0
+      minimist-options: 4.1.0
+      normalize-package-data: 3.0.3
+      read-pkg-up: 7.0.1
+      redent: 3.0.0
+      trim-newlines: 3.0.1
+      type-fest: 0.18.1
+      yargs-parser: 20.2.9
+
   merge2@1.4.1: {}
 
+  metaviewport-parser@0.2.0: {}
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
       picomatch: 2.3.1
 
+  mimic-fn@2.1.0: {}
+
   mimic-function@5.0.1: {}
 
+  mimic-response@1.0.1: {}
+
+  min-indent@1.0.1: {}
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -4218,8 +6581,18 @@ snapshots:
     dependencies:
       brace-expansion: 2.0.2
 
+  minimist-options@4.1.0:
+    dependencies:
+      arrify: 1.0.1
+      is-plain-obj: 1.1.0
+      kind-of: 6.0.3
+
   minimist@1.2.8: {}
 
+  mkdirp@1.0.4: {}
+
+  ms@2.0.0: {}
+
   ms@2.1.3: {}
 
   nano-spawn@1.0.2: {}
@@ -4232,6 +6605,22 @@ snapshots:
 
   node-releases@2.0.19: {}
 
+  normalize-package-data@2.5.0:
+    dependencies:
+      hosted-git-info: 2.8.9
+      resolve: 1.22.10
+      semver: 5.7.2
+      validate-npm-package-license: 3.0.4
+
+  normalize-package-data@3.0.3:
+    dependencies:
+      hosted-git-info: 4.1.0
+      is-core-module: 2.16.1
+      semver: 7.7.2
+      validate-npm-package-license: 3.0.4
+
+  normalize-url@4.5.1: {}
+
   object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
@@ -4278,6 +6667,10 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
   onetime@7.0.0:
     dependencies:
       mimic-function: 5.0.1
@@ -4286,6 +6679,16 @@ snapshots:
     dependencies:
       which-pm-runs: 1.1.0
 
+  open@6.4.0:
+    dependencies:
+      is-wsl: 1.1.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -4295,12 +6698,30 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
+  ora@5.4.1:
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.9.2
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.3.0
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  p-cancelable@1.1.0: {}
+
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
@@ -4309,6 +6730,10 @@ snapshots:
     dependencies:
       yocto-queue: 1.2.1
 
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
@@ -4317,10 +6742,21 @@ snapshots:
     dependencies:
       p-limit: 4.0.0
 
+  p-try@2.2.0: {}
+
+  package-json@6.5.0:
+    dependencies:
+      got: 9.6.0
+      registry-auth-token: 4.2.2
+      registry-url: 5.1.0
+      semver: 6.3.1
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
+  parse-cache-control@1.0.1: {}
+
   parse-json@5.2.0:
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -4338,6 +6774,8 @@ snapshots:
 
   path-parse@1.0.7: {}
 
+  path-type@4.0.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -4356,7 +6794,9 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.5.3: {}
+  prepend-http@2.0.0: {}
+
+  prettier@3.6.0: {}
 
   prop-types@15.8.1:
     dependencies:
@@ -4364,10 +6804,53 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
+  protobufjs@7.5.3:
+    dependencies:
+      '@protobufjs/aspromise': 1.1.2
+      '@protobufjs/base64': 1.1.2
+      '@protobufjs/codegen': 2.0.4
+      '@protobufjs/eventemitter': 1.1.0
+      '@protobufjs/fetch': 1.1.0
+      '@protobufjs/float': 1.0.2
+      '@protobufjs/inquire': 1.1.0
+      '@protobufjs/path': 1.1.2
+      '@protobufjs/pool': 1.1.0
+      '@protobufjs/utf8': 1.1.0
+      '@types/node': 24.0.3
+      long: 5.3.2
+
+  ps-list@7.2.0: {}
+
+  pump@3.0.3:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
   punycode@2.3.1: {}
 
+  pupa@2.1.1:
+    dependencies:
+      escape-goat: 2.1.1
+
   queue-microtask@1.2.3: {}
 
+  quick-lru@4.0.1: {}
+
+  raven@2.6.4:
+    dependencies:
+      cookie: 0.3.1
+      md5: 2.3.0
+      stack-trace: 0.0.10
+      timed-out: 4.0.1
+      uuid: 3.3.2
+
+  rc@1.2.8:
+    dependencies:
+      deep-extend: 0.6.0
+      ini: 1.3.8
+      minimist: 1.2.8
+      strip-json-comments: 2.0.1
+
   react-dom@19.1.0(react@19.1.0):
     dependencies:
       react: 19.1.0
@@ -4375,10 +6858,59 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-is@19.1.0: {}
+
   react-refresh@0.17.0: {}
 
+  react-router-dom@7.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-router: 7.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+
+  react-router@7.6.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      cookie: 1.0.2
+      react: 19.1.0
+      set-cookie-parser: 2.7.1
+    optionalDependencies:
+      react-dom: 19.1.0(react@19.1.0)
+
+  react-transition-group@4.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@babel/runtime': 7.27.6
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react@19.1.0: {}
 
+  read-pkg-up@7.0.1:
+    dependencies:
+      find-up: 4.1.0
+      read-pkg: 5.2.0
+      type-fest: 0.8.1
+
+  read-pkg@5.2.0:
+    dependencies:
+      '@types/normalize-package-data': 2.4.4
+      normalize-package-data: 2.5.0
+      parse-json: 5.2.0
+      type-fest: 0.6.0
+
+  readable-stream@3.6.2:
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -4399,6 +6931,14 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  registry-auth-token@4.2.2:
+    dependencies:
+      rc: 1.2.8
+
+  registry-url@5.1.0:
+    dependencies:
+      rc: 1.2.8
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -4421,6 +6961,15 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  responselike@1.0.2:
+    dependencies:
+      lowercase-keys: 1.0.1
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
   restore-cursor@5.1.0:
     dependencies:
       onetime: 7.0.0
@@ -4434,6 +6983,17 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  robots-parser@2.4.0: {}
+
+  rollup-plugin-visualizer@6.0.3(rollup@4.44.0):
+    dependencies:
+      open: 8.4.2
+      picomatch: 4.0.2
+      source-map: 0.7.4
+      yargs: 17.7.2
+    optionalDependencies:
+      rollup: 4.44.0
+
   rollup@4.44.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -4472,6 +7032,8 @@ snapshots:
       has-symbols: 1.1.0
       isarray: 2.0.5
 
+  safe-buffer@5.2.1: {}
+
   safe-push-apply@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -4485,10 +7047,18 @@ snapshots:
 
   scheduler@0.26.0: {}
 
+  semver-diff@3.1.1:
+    dependencies:
+      semver: 6.3.1
+
+  semver@5.7.2: {}
+
   semver@6.3.1: {}
 
   semver@7.7.2: {}
 
+  set-cookie-parser@2.7.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -4545,6 +7115,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  signal-exit@3.0.7: {}
+
   signal-exit@4.1.0: {}
 
   slice-ansi@5.0.0:
@@ -4559,10 +7131,36 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map@0.5.7: {}
+
+  source-map@0.7.4: {}
+
+  spdx-correct@3.2.0:
+    dependencies:
+      spdx-expression-parse: 3.0.1
+      spdx-license-ids: 3.0.21
+
+  spdx-exceptions@2.5.0: {}
+
+  spdx-expression-parse@3.0.1:
+    dependencies:
+      spdx-exceptions: 2.5.0
+      spdx-license-ids: 3.0.21
+
+  spdx-license-ids@3.0.21: {}
+
+  speedline-core@1.4.3:
+    dependencies:
+      '@types/node': 24.0.3
+      image-ssim: 0.2.0
+      jpeg-js: 0.4.4
+
   split2@4.2.0: {}
 
   stable-hash-x@0.1.1: {}
 
+  stack-trace@0.0.10: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -4632,6 +7230,10 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
+  string_decoder@1.3.0:
+    dependencies:
+      safe-buffer: 5.2.1
+
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -4642,20 +7244,34 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-json-comments@2.0.1: {}
+
   strip-json-comments@3.1.1: {}
 
+  stylis@4.2.0: {}
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  term-size@2.2.1: {}
+
   text-extensions@2.4.0: {}
 
   text-table@0.2.0: {}
 
+  third-party-web@0.12.7: {}
+
   through@2.3.8: {}
 
+  timed-out@4.0.1: {}
+
   tinyexec@1.0.1: {}
 
   tinyglobby@0.2.14:
@@ -4663,10 +7279,14 @@ snapshots:
       fdir: 6.4.6(picomatch@4.0.2)
       picomatch: 4.0.2
 
+  to-readable-stream@1.0.0: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
 
+  trim-newlines@3.0.1: {}
+
   ts-api-utils@2.1.0(typescript@5.8.3):
     dependencies:
       typescript: 5.8.3
@@ -4678,8 +7298,7 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   tsx@4.20.3:
     dependencies:
@@ -4692,8 +7311,14 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@0.18.1: {}
+
   type-fest@0.20.2: {}
 
+  type-fest@0.6.0: {}
+
+  type-fest@0.8.1: {}
+
   typed-array-buffer@1.0.3:
     dependencies:
       call-bound: 1.0.4
@@ -4727,11 +7352,15 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.34.1(eslint@8.57.1)(typescript@5.8.3):
+  typedarray-to-buffer@3.1.5:
+    dependencies:
+      is-typedarray: 1.0.0
+
+  typescript-eslint@8.35.0(eslint@8.57.1)(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.34.1(@typescript-eslint/parser@8.34.1(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.34.1(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/eslint-plugin': 8.35.0(@typescript-eslint/parser@8.35.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.35.0(eslint@8.57.1)(typescript@5.8.3)
       eslint: 8.57.1
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -4750,6 +7379,10 @@ snapshots:
 
   unicorn-magic@0.1.0: {}
 
+  unique-string@2.0.0:
+    dependencies:
+      crypto-random-string: 2.0.0
+
   unrs-resolver@1.9.1:
     dependencies:
       napi-postinstall: 0.2.4
@@ -4780,10 +7413,56 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  update-notifier@4.1.3:
+    dependencies:
+      boxen: 4.2.0
+      chalk: 3.0.0
+      configstore: 5.0.1
+      has-yarn: 2.1.0
+      import-lazy: 2.1.0
+      is-ci: 2.0.0
+      is-installed-globally: 0.3.2
+      is-npm: 4.0.0
+      is-yarn-global: 0.3.0
+      latest-version: 5.1.0
+      pupa: 2.1.1
+      semver-diff: 3.1.1
+      xdg-basedir: 4.0.0
+
+  update-notifier@5.1.0:
+    dependencies:
+      boxen: 5.1.2
+      chalk: 4.1.2
+      configstore: 5.0.1
+      has-yarn: 2.1.0
+      import-lazy: 2.1.0
+      is-ci: 2.0.0
+      is-installed-globally: 0.4.0
+      is-npm: 5.0.0
+      is-yarn-global: 0.3.0
+      latest-version: 5.1.0
+      pupa: 2.1.1
+      semver: 7.7.2
+      semver-diff: 3.1.1
+      xdg-basedir: 4.0.0
+
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
 
+  url-parse-lax@3.0.0:
+    dependencies:
+      prepend-http: 2.0.0
+
+  util-deprecate@1.0.2: {}
+
+  uuid@3.3.2: {}
+
+  validate-npm-package-license@3.0.4:
+    dependencies:
+      spdx-correct: 3.2.0
+      spdx-expression-parse: 3.0.1
+
   vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2)(tsx@4.20.3)(yaml@2.8.0):
     dependencies:
       esbuild: 0.25.5
@@ -4799,6 +7478,20 @@ snapshots:
       tsx: 4.20.3
       yaml: 2.8.0
 
+  wcwidth@1.0.1:
+    dependencies:
+      defaults: 1.0.4
+
+  web-vitals@4.2.4: {}
+
+  websocket-driver@0.7.4:
+    dependencies:
+      http-parser-js: 0.5.10
+      safe-buffer: 5.2.1
+      websocket-extensions: 0.1.4
+
+  websocket-extensions@0.1.4: {}
+
   which-boxed-primitive@1.1.1:
     dependencies:
       is-bigint: 1.1.0
@@ -4846,6 +7539,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  widest-line@3.1.0:
+    dependencies:
+      string-width: 4.2.3
+
   word-wrap@1.2.5: {}
 
   wrap-ansi@7.0.0:
@@ -4862,14 +7559,41 @@ snapshots:
 
   wrappy@1.0.2: {}
 
+  write-file-atomic@3.0.3:
+    dependencies:
+      imurmurhash: 0.1.4
+      is-typedarray: 1.0.0
+      signal-exit: 3.0.7
+      typedarray-to-buffer: 3.1.5
+
+  ws@7.5.10: {}
+
+  xdg-basedir@4.0.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}
 
+  yallist@4.0.0: {}
+
+  yaml@1.10.2: {}
+
   yaml@2.8.0: {}
 
+  yargs-parser@20.2.9: {}
+
   yargs-parser@21.1.1: {}
 
+  yargs@16.2.0:
+    dependencies:
+      cliui: 7.0.4
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 20.2.9
+
   yargs@17.7.2:
     dependencies:
       cliui: 8.0.1
@@ -4883,3 +7607,8 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.1: {}
+
+  zustand@5.0.5(@types/react@19.1.8)(react@19.1.0):
+    optionalDependencies:
+      '@types/react': 19.1.8
+      react: 19.1.0
diff --git a/src/app/README.md b/src/app/README.md
index ac013c5..5d8d911 100644
--- a/src/app/README.md
+++ b/src/app/README.md
@@ -1,57 +1,215 @@
-# App Layer
+# 🚀 App Layer
 
-앱 전체 설정 및 초기화를 담당하는 최상위 계층입니다.
+**앱 전체 설정 및 초기화를 담당하는 레이어**
 
-## 📁 구조
+App 레이어는 애플리케이션의 진입점과 전역 설정을 관리합니다.
+
+## 📁 폴더 구조
 
 ```
 app/
-├── configs/      # 환경 설정 파일
-├── entry/        # 앱 진입점 (main.tsx)
-├── routes/       # 라우팅 설정
-├── styles/       # 글로벌 스타일
-└── index.html    # HTML 템플릿
+├── entry/               # 앱 진입점
+│   └── main.tsx        # React 애플리케이션 마운트
+├── routes/             # 라우팅 설정
+│   └── App.tsx        # 메인 앱 컴포넌트, 라우터 설정
+├── styles/            # 전역 스타일
+│   └── App.css       # 글로벌 CSS
+├── configs/           # 앱 설정
+│   └── vite-env.d.ts # Vite 환경 타입 정의
+├── index.html         # HTML 템플릿
+└── README.md         # 이 파일
+```
+
+## 🛣️ 라우터 설정 (React Router v7)
+
+### 레이지 로딩 구현
+
+성능 최적화를 위해 모든 페이지 컴포넌트에 레이지 로딩을 적용했습니다:
+
+```typescript
+// app/routes/App.tsx
+import { Suspense, lazy } from "react";
+import { LoadingSpinner } from "@shared/ui";
+
+// 동적 임포트로 번들 분할
+const HomePage = lazy(() => import("@pages/home/ui/HomePage"));
+const ProjectDetailPage = lazy(() => import("@pages/project-detail/ui/ProjectDetailPage"));
+const NotFoundPage = lazy(() => import("@pages/not-found/ui/NotFoundPage"));
+
+function App(): JSX.Element {
+  return (
+    <BrowserRouter>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<ProjectDetailPage />} />
+          <Route path="*" element={<NotFoundPage />} />
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
+  );
+}
+```
+
+### 📈 레이지 로딩의 장점
+
+1. **초기 번들 크기 감소**: 첫 페이지 로드 시 필요한 코드만 다운로드
+2. **빠른 초기 로딩**: 사용자가 접근하지 않는 페이지는 로드하지 않음
+3. **자동 코드 스플리팅**: Vite가 자동으로 청크를 분할
+4. **네트워크 효율성**: 필요할 때만 리소스 다운로드
+
+### 🔧 라우트 설정 규칙
+
+#### 1. 페이지 컴포넌트 요구사항
+```typescript
+// ✅ 올바른 방법 - default export 사용
+const HomePage = (): JSX.Element => {
+  return <div>홈 페이지</div>;
+};
+
+export default HomePage;
+
+// ❌ 잘못된 방법 - named export는 레이지 로딩에서 사용 불가
+export { HomePage };
 ```
 
-## 🎯 역할
+#### 2. 라우트 패턴
+```typescript
+// 기본 라우트
+<Route path="/" element={<HomePage />} />
+
+// 동적 라우트
+<Route path="/user/:id" element={<UserDetailPage />} />
 
-- **앱 초기화**: React 앱의 진입점과 초기 설정
-- **글로벌 프로바이더**: Context, Router, Query Client 등 설정
-- **라우팅**: 페이지 간 네비게이션 관리
-- **글로벌 스타일**: 앱 전체에 적용되는 CSS
+// 중첩 라우트
+<Route path="/dashboard/*" element={<DashboardLayout />} />
 
-## 📄 파일별 설명
+// 404 페이지 (반드시 마지막에 위치)
+<Route path="*" element={<NotFoundPage />} />
+```
 
-### configs/
-- `vite-env.d.ts`: Vite 환경 타입 정의
+#### 3. 네비게이션 가드
+```typescript
+// 인증이 필요한 페이지의 경우
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const isAuthenticated = useAuth();
+  return isAuthenticated ? children : <Navigate to="/login" />;
+};
 
-### entry/
-- `main.tsx`: React 앱의 진입점, 루트 컴포넌트 렌더링
+<Route 
+  path="/dashboard" 
+  element={
+    <ProtectedRoute>
+      <DashboardPage />
+    </ProtectedRoute>
+  } 
+/>
+```
 
-### routes/
-- `App.tsx`: 메인 라우팅 컴포넌트
+## 🎨 로딩 상태 관리
 
-### styles/
-- `App.css`: 글로벌 스타일 정의
+### LoadingSpinner 컴포넌트
+레이지 로딩 중 표시되는 로딩 스피너:
 
-## 🔧 사용 예시
+```typescript
+// shared/ui/LoadingSpinner.tsx
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+      <div className="spinner" />
+      <span>페이지를 로딩 중입니다...</span>
+    </div>
+  );
+};
+```
 
+### 에러 바운더리
+추후 추가 예정:
 ```typescript
-// entry/main.tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
+// app/components/ErrorBoundary.tsx
+class ErrorBoundary extends Component {
+  // 레이지 로딩 실패 시 에러 처리
+}
+```
+
+## 🔗 의존성 규칙
+
+App 레이어는 **모든 레이어**를 참조할 수 있습니다:
+
+```typescript
+// ✅ 허용 - 모든 레이어 참조 가능
+import { HomePage } from '@pages/home';       // Pages
+import { Navigation } from '@widgets/navigation'; // Widgets  
+import { LoginForm } from '@features/auth';   // Features
+import { UserCard } from '@entities/user';    // Entities
+import { Button } from '@shared/ui';          // Shared
+```
+
+## 📝 진입점 설정
+
+### main.tsx
+React 애플리케이션의 진입점:
+
+```typescript
+// app/entry/main.tsx
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import App from '@app/routes/App';
-import '@app/styles/App.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );
 ```
 
-## ⚠️ 주의사항
+### 전역 프로바이더 설정
+추후 추가될 프로바이더들:
+
+```typescript
+// React Query, 테마, 다국어 등
+function App(): JSX.Element {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <BrowserRouter>
+          {/* 라우터 설정 */}
+        </BrowserRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
+  );
+}
+```
+
+## 🚀 성능 최적화
+
+### 1. 프리로딩
+중요한 페이지는 미리 로드:
+```typescript
+// 마우스 오버 시 프리로드
+const handleMouseEnter = () => {
+  import('@pages/about/ui/AboutPage');
+};
+```
+
+### 2. 번들 분석
+빌드 후 번들 크기 확인:
+```bash
+pnpm build
+pnpm preview
+```
+
+### 3. 라우트 우선순위
+자주 사용되는 라우트를 먼저 정의:
+```typescript
+<Routes>
+  <Route path="/" element={<HomePage />} />        {/* 가장 많이 사용 */}
+  <Route path="/dashboard" element={<Dashboard />} /> {/* 두 번째로 많이 사용 */}
+  <Route path="/settings" element={<Settings />} />  {/* 가끔 사용 */}
+  <Route path="*" element={<NotFoundPage />} />     {/* 404는 항상 마지막 */}
+</Routes>
+```
+
+---
 
-- App 계층은 모든 다른 계층을 참조할 수 있습니다
-- 하지만 다른 계층에서는 App을 참조할 수 없습니다
-- 글로벌 설정만 담당하며, 비즈니스 로직은 포함하지 않습니다 
\ No newline at end of file
+💡 **참고**: 새로운 페이지를 추가할 때는 반드시 레이지 로딩을 적용하고 default export를 사용해 주세요! 
\ No newline at end of file
diff --git a/src/app/entry/main.tsx b/src/app/entry/main.tsx
index ba598b1..45f2481 100644
--- a/src/app/entry/main.tsx
+++ b/src/app/entry/main.tsx
@@ -1,10 +1,20 @@
+import { ThemeProvider } from "@mui/material";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "@app/routes/App";
+import theme from "@app/styles/theme";
+import "@app/styles/global.css";
+
+import queryClient from "@shared/react-query/queryClient";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <App />
+      </ThemeProvider>
+    </QueryClientProvider>
   </StrictMode>
 );
diff --git a/src/app/index.html b/src/app/index.html
index f5836fa..e9c15fc 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -7,7 +7,7 @@
     <title>Vite + React + TS</title>
   </head>
   <body>
-    <div id="root">123</div>
+    <div id="root"></div>
     <script type="module" src="entry/main.tsx"></script>
   </body>
 </html>
diff --git a/src/app/routes/App.tsx b/src/app/routes/App.tsx
index 580c8de..8a2b89c 100644
--- a/src/app/routes/App.tsx
+++ b/src/app/routes/App.tsx
@@ -1,26 +1,73 @@
-import { useState, type JSX } from "react";
+import type { JSX } from "react";
+import { lazy, Suspense } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import AuthLayout from "@app/routes/AuthLayout";
+import MainLayout from "@app/routes/MainLayout";
+import PrivateRoute from "@app/routes/PrivateRoute";
+
+import { useAuthObserver } from "@shared/hooks/useAuthObserver";
+import LoadingSpinner from "@shared/ui/loading-spinner/LoadingSpinner";
+
+const HomePage = lazy(() => import("@pages/home/ui/HomePage"));
+const NotFoundPage = lazy(() => import("@pages/not-found/ui/NotFoundPage"));
+const UserProfilePage = lazy(
+  () => import("@pages/user-profile/ui/UserProfilePage")
+);
+const ProjectDetailPage = lazy(
+  () => import("@pages/project-detail/ui/ProjectDetailPage")
+);
+const ProjectInsertPage = lazy(
+  () => import("@pages/project-insert/ui/ProjectInsertPage")
+);
+const LoginPage = lazy(() => import("@pages/login/ui/LoginPage"));
+const SignUpPage = lazy(() => import("@pages/signup/ui/SignUpPage"));
+const ProjectListPage = lazy(
+  () => import("@pages/project-list/ui/ProjectListPage")
+);
 
 function App(): JSX.Element {
-  const [count, setCount] = useState(0);
+  useAuthObserver();
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank"></a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <BrowserRouter>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          {/* 헤더 없는 레이아웃 (로그인/회원가입 전용) */}
+          <Route element={<AuthLayout />}>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignUpPage />} />
+          </Route>
+
+          {/* 헤더 포함 레이아웃 (메인 페이지) */}
+          <Route element={<MainLayout />}>
+            {/* 공개 페이지 */}
+            <Route path="/" element={<HomePage />} />
+            <Route path="/project" element={<ProjectListPage />} />
+            <Route path="/project/:id" element={<ProjectDetailPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+
+            {/* 비공개 페이지 */}
+            <Route
+              path="/profile"
+              element={
+                <PrivateRoute>
+                  <UserProfilePage />
+                </PrivateRoute>
+              }
+            />
+            <Route
+              path="/project/insert"
+              element={
+                <PrivateRoute>
+                  <ProjectInsertPage />
+                </PrivateRoute>
+              }
+            />
+          </Route>
+        </Routes>
+      </Suspense>
+    </BrowserRouter>
   );
 }
 
diff --git a/src/app/routes/AuthLayout.tsx b/src/app/routes/AuthLayout.tsx
new file mode 100644
index 0000000..7cdee93
--- /dev/null
+++ b/src/app/routes/AuthLayout.tsx
@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import { Outlet } from "react-router-dom";
+
+const AuthLayout = (): JSX.Element => {
+  return (
+    <main>
+      <Outlet />
+    </main>
+  );
+};
+
+export default AuthLayout;
diff --git a/src/app/routes/MainLayout.tsx b/src/app/routes/MainLayout.tsx
new file mode 100644
index 0000000..f3d122c
--- /dev/null
+++ b/src/app/routes/MainLayout.tsx
@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+import { Outlet } from "react-router-dom";
+
+import Header from "@widgets/Header/Header";
+
+const MainLayout = (): JSX.Element => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+    </>
+  );
+};
+
+export default MainLayout;
diff --git a/src/app/routes/PrivateRoute.tsx b/src/app/routes/PrivateRoute.tsx
new file mode 100644
index 0000000..b9cac16
--- /dev/null
+++ b/src/app/routes/PrivateRoute.tsx
@@ -0,0 +1,21 @@
+import React, { type JSX } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+const PrivateRoute = ({
+  children,
+}: {
+  children: React.ReactNode;
+}): JSX.Element => {
+  const user = useAuthStore((state) => state.user);
+  const location = useLocation();
+
+  if (!user) {
+    return <Navigate to={`/login?redirect=${location.pathname}`} replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default PrivateRoute;
diff --git a/src/app/styles/App.css b/src/app/styles/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/src/app/styles/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/src/app/styles/font/Pretendard-Bold.woff b/src/app/styles/fonts/Pretendard-Bold.woff
similarity index 100%
rename from src/app/styles/font/Pretendard-Bold.woff
rename to src/app/styles/fonts/Pretendard-Bold.woff
diff --git a/src/app/styles/font/Pretendard-Medium.woff b/src/app/styles/fonts/Pretendard-Medium.woff
similarity index 100%
rename from src/app/styles/font/Pretendard-Medium.woff
rename to src/app/styles/fonts/Pretendard-Medium.woff
diff --git a/src/app/styles/font/Pretendard-Regular.woff b/src/app/styles/fonts/Pretendard-Regular.woff
similarity index 100%
rename from src/app/styles/font/Pretendard-Regular.woff
rename to src/app/styles/fonts/Pretendard-Regular.woff
diff --git a/src/app/styles/font/Pretendard-SemiBold.woff b/src/app/styles/fonts/Pretendard-SemiBold.woff
similarity index 100%
rename from src/app/styles/font/Pretendard-SemiBold.woff
rename to src/app/styles/fonts/Pretendard-SemiBold.woff
diff --git a/src/app/styles/global.css b/src/app/styles/global.css
new file mode 100644
index 0000000..481083a
--- /dev/null
+++ b/src/app/styles/global.css
@@ -0,0 +1,61 @@
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/Pretendard-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/Pretendard-Medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/Pretendard-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Pretendard";
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+  src: url("./fonts/Pretendard-Bold.woff") format("woff");
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.6rem;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family:
+    "Pretendard",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
diff --git a/src/app/styles/theme.ts b/src/app/styles/theme.ts
new file mode 100644
index 0000000..00d66be
--- /dev/null
+++ b/src/app/styles/theme.ts
@@ -0,0 +1,468 @@
+import { createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#2563eb",
+      light: "#60a5fa",
+      dark: "#1e40af",
+      contrastText: "#ffffff",
+    },
+    secondary: {
+      main: "#475569",
+      light: "#94a3b8",
+      dark: "#1e293b",
+      contrastText: "#ffffff",
+    },
+    success: {
+      main: "#16a34a",
+      light: "#4ade80",
+      dark: "#166534",
+      contrastText: "#ffffff",
+    },
+    warning: {
+      main: "#eab308",
+      light: "#facc15",
+      dark: "#a16207",
+      contrastText: "#0f172a",
+    },
+    error: {
+      main: "#dc2626",
+      light: "#f87171",
+      dark: "#991b1b",
+      contrastText: "#ffffff",
+    },
+    background: {
+      default: "#f8fafc",
+      paper: "#ffffff",
+    },
+    text: {
+      primary: "#0f172a",
+      secondary: "#475569",
+    },
+    divider: "#e2e8f0",
+  },
+
+  typography: {
+    fontFamily:
+      "Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+
+    h1: {
+      fontWeight: 700,
+      lineHeight: 1.2,
+      letterSpacing: "-0.025em",
+      fontSize: "2.8rem",
+      "@media (min-width:600px)": {
+        fontSize: "3.2rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "4rem",
+      },
+    },
+    h2: {
+      fontWeight: 600,
+      lineHeight: 1.3,
+      letterSpacing: "-0.025em",
+      fontSize: "2.4rem",
+      "@media (min-width:600px)": {
+        fontSize: "2.8rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "3.2rem",
+      },
+    },
+    h3: {
+      fontWeight: 600,
+      lineHeight: 1.4,
+      letterSpacing: "-0.02em",
+      fontSize: "2rem",
+      "@media (min-width:600px)": {
+        fontSize: "2.2rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "2.4rem",
+      },
+    },
+    h4: {
+      fontWeight: 600,
+      lineHeight: 1.4,
+      fontSize: "1.8rem",
+      "@media (min-width:600px)": {
+        fontSize: "1.9rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "2rem",
+      },
+    },
+    h5: {
+      fontWeight: 600,
+      lineHeight: 1.5,
+      fontSize: "1.6rem",
+      "@media (min-width:600px)": {
+        fontSize: "1.7rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "1.8rem",
+      },
+    },
+    h6: {
+      fontWeight: 600,
+      lineHeight: 1.5,
+      fontSize: "1.4rem",
+      "@media (min-width:600px)": {
+        fontSize: "1.5rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "1.6rem",
+      },
+    },
+
+    body1: {
+      fontSize: "1.4rem",
+      lineHeight: 1.6,
+      "@media (min-width:600px)": {
+        fontSize: "1.5rem",
+        lineHeight: 1.65,
+      },
+      "@media (min-width:960px)": {
+        fontSize: "1.6rem",
+        lineHeight: 1.7,
+      },
+    },
+    body2: {
+      fontSize: "1.2rem",
+      lineHeight: 1.5,
+      "@media (min-width:600px)": {
+        fontSize: "1.3rem",
+        lineHeight: 1.55,
+      },
+      "@media (min-width:960px)": {
+        fontSize: "1.4rem",
+        lineHeight: 1.6,
+      },
+    },
+    button: {
+      fontSize: "1.2rem",
+      fontWeight: 500,
+      textTransform: "none",
+      "@media (min-width:600px)": {
+        fontSize: "1.3rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "1.4rem",
+      },
+    },
+    subtitle1: {
+      fontSize: "3.2rem",
+      fontWeight: 700,
+      lineHeight: 1.2,
+      letterSpacing: "-0.025em",
+      "@media (min-width:600px)": {
+        fontSize: "4rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "6rem",
+      },
+    },
+    subtitle2: {
+      fontSize: "3rem",
+      fontWeight: 700,
+      lineHeight: 1.2,
+      letterSpacing: "-0.025em",
+      "@media (min-width:600px)": {
+        fontSize: "3.2rem",
+      },
+      "@media (min-width:960px)": {
+        fontSize: "3.6rem",
+      },
+    },
+  },
+
+  shape: {
+    borderRadius: 8,
+  },
+
+  spacing: (factor: number) => `${factor}rem`,
+
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontWeight: 500,
+          borderRadius: 8,
+          boxShadow: "none",
+          padding: "0.6rem 1.2rem",
+          fontSize: "1.2rem",
+          minHeight: "3.6rem",
+
+          "@media (min-width:600px)": {
+            padding: "0.7rem 1.4rem",
+            fontSize: "1.3rem",
+            minHeight: "3.8rem",
+          },
+
+          "@media (min-width:960px)": {
+            padding: "0.8rem 1.6rem",
+            fontSize: "1.4rem",
+            minHeight: "4rem",
+          },
+
+          "&:hover": {
+            boxShadow:
+              "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+          },
+        },
+        sizeSmall: {
+          padding: "0.4rem 0.8rem",
+          fontSize: "1.1rem",
+          minHeight: "2.8rem",
+          "@media (min-width:600px)": {
+            padding: "0.5rem 1rem",
+            fontSize: "1.2rem",
+            minHeight: "3rem",
+          },
+          "@media (min-width:960px)": {
+            padding: "0.6rem 1.2rem",
+            fontSize: "1.3rem",
+            minHeight: "3.2rem",
+          },
+        },
+        sizeLarge: {
+          padding: "0.8rem 1.6rem",
+          fontSize: "1.4rem",
+          minHeight: "4.4rem",
+          "@media (min-width:600px)": {
+            padding: "1rem 2rem",
+            fontSize: "1.5rem",
+            minHeight: "4.6rem",
+          },
+          "@media (min-width:960px)": {
+            padding: "1.2rem 2.4rem",
+            fontSize: "1.6rem",
+            minHeight: "4.8rem",
+          },
+        },
+      },
+    },
+
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          boxShadow:
+            "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+          "& .MuiCardContent-root": {
+            padding: "1.2rem",
+            "@media (min-width:600px)": {
+              padding: "1.6rem",
+            },
+            "@media (min-width:960px)": {
+              padding: "2rem",
+            },
+            "&:last-child": {
+              paddingBottom: "1.2rem",
+              "@media (min-width:600px)": {
+                paddingBottom: "1.6rem",
+              },
+              "@media (min-width:960px)": {
+                paddingBottom: "2rem",
+              },
+            },
+          },
+
+          "@media (min-width:600px)": {
+            borderRadius: 10,
+          },
+          "@media (min-width:960px)": {
+            borderRadius: 12,
+          },
+        },
+      },
+    },
+
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiOutlinedInput-root": {
+            borderRadius: 6,
+            backgroundColor: "#ffffff",
+            minHeight: "4rem",
+
+            "@media (min-width:600px)": {
+              borderRadius: 7,
+              minHeight: "4.4rem",
+            },
+            "@media (min-width:960px)": {
+              borderRadius: 8,
+              minHeight: "4.8rem",
+            },
+
+            "& .MuiOutlinedInput-input": {
+              padding: "0.8rem 1.2rem",
+              "@media (min-width:600px)": {
+                padding: "1rem 1.4rem",
+              },
+              "@media (min-width:960px)": {
+                padding: "1.2rem 1.6rem",
+              },
+            },
+
+            "&:hover": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: "#60a5fa",
+              },
+            },
+            "&.Mui-focused": {
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: "#2563eb",
+                borderWidth: "2px",
+              },
+            },
+          },
+
+          "& .MuiInputLabel-root": {
+            fontSize: "1.4rem",
+            "@media (min-width:600px)": {
+              fontSize: "1.5rem",
+            },
+            "@media (min-width:960px)": {
+              fontSize: "1.6rem",
+            },
+          },
+        },
+      },
+    },
+
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+          fontWeight: 500,
+          height: "2.4rem",
+          fontSize: "1.1rem",
+
+          "@media (min-width:600px)": {
+            borderRadius: 5,
+            height: "2.6rem",
+            fontSize: "1.2rem",
+          },
+          "@media (min-width:960px)": {
+            borderRadius: 6,
+            height: "2.8rem",
+            fontSize: "1.3rem",
+          },
+        },
+      },
+    },
+
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          "@media (min-width:600px)": {
+            borderRadius: 10,
+          },
+          "@media (min-width:960px)": {
+            borderRadius: 12,
+          },
+        },
+      },
+    },
+
+    MuiContainer: {
+      styleOverrides: {
+        root: {
+          paddingInline: "1.6rem",
+          "@media (min-width:600px)": {
+            paddingInline: "2rem",
+          },
+          "@media (min-width:960px)": {
+            paddingInline: "2.4rem",
+          },
+        },
+      },
+    },
+
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow:
+            "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+          borderRadius: 0,
+          "@media (min-width:600px)": {
+            borderRadius: 0,
+          },
+          "@media (min-width:960px)": {
+            borderRadius: 0,
+          },
+          "& .MuiToolbar-root": {
+            minHeight: "5.6rem",
+            padding: "0 1.6rem",
+            borderRadius: 0,
+            "@media (min-width:600px)": {
+              minHeight: "6rem",
+              padding: "0 2rem",
+              borderRadius: 0,
+            },
+            "@media (min-width:960px)": {
+              minHeight: "6.4rem",
+              padding: "0 2.4rem",
+              borderRadius: 0,
+            },
+          },
+        },
+      },
+    },
+
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 8,
+          margin: "1.6rem",
+          maxWidth: "calc(100% - 3.2rem)",
+
+          "@media (min-width:600px)": {
+            borderRadius: 12,
+            margin: "3.2rem",
+            maxWidth: "calc(100% - 6.4rem)",
+          },
+
+          "& .MuiDialogTitle-root": {
+            padding: "1.6rem",
+            "@media (min-width:600px)": {
+              padding: "2rem 2.4rem 1.6rem 2.4rem",
+            },
+          },
+
+          "& .MuiDialogContent-root": {
+            padding: "0 1.6rem 1.6rem 1.6rem",
+            "@media (min-width:600px)": {
+              padding: "0 2.4rem 2rem 2.4rem",
+            },
+          },
+
+          "& .MuiDialogActions-root": {
+            padding: "0.8rem 1.6rem 1.6rem 1.6rem",
+            "@media (min-width:600px)": {
+              padding: "1.2rem 2.4rem 2rem 2.4rem",
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export default theme;
diff --git a/src/entities/projects/api/projectsAPi.ts b/src/entities/projects/api/projectsAPi.ts
new file mode 100644
index 0000000..dba74cd
--- /dev/null
+++ b/src/entities/projects/api/projectsAPi.ts
@@ -0,0 +1,113 @@
+import {
+  getCountFromServer,
+  collection,
+  getDocs,
+  limit,
+  orderBy,
+  query,
+  QueryDocumentSnapshot,
+  startAfter,
+  type DocumentData,
+  doc,
+  getDoc,
+  where,
+} from "firebase/firestore";
+
+import { db } from "@shared/firebase/firebase";
+import type { ProjectListRes } from "@shared/types/project";
+
+/** projects의 total 수 */
+export const getProjectsTotalCount = async (): Promise<number> => {
+  try {
+    const q = query(collection(db, "projects"));
+    const querySnapshot = await getCountFromServer(q);
+    return querySnapshot.data().count;
+  } catch (err) {
+    console.log(err);
+    return 0;
+  }
+};
+
+/** firebase project 목록 불러오기 */
+export const getProjectList = async ({
+  pageSize = 6,
+  lastDoc = null,
+}: {
+  pageSize?: number;
+  lastDoc: QueryDocumentSnapshot<DocumentData> | null;
+}): Promise<{
+  projects: ProjectListRes[];
+  lastVisible: QueryDocumentSnapshot<DocumentData> | null;
+}> => {
+  try {
+    const baseQuery = query(
+      collection(db, "projects"),
+      orderBy("createdAt", "desc"),
+      limit(pageSize)
+    );
+    const q = lastDoc ? query(baseQuery, startAfter(lastDoc)) : baseQuery;
+
+    const querySnapshot = await getDocs(q);
+
+    const projects = querySnapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })) as ProjectListRes[];
+
+    return {
+      projects: projects,
+      lastVisible: querySnapshot.docs[querySnapshot.docs.length - 1] || null,
+    };
+  } catch (err) {
+    console.log(err);
+    return { projects: [], lastVisible: null };
+  }
+};
+
+/** firebase project item 상세 조회 */
+export const getProjectItem = async (
+  id: string
+): Promise<ProjectListRes | null> => {
+  try {
+    const docRef = doc(db, "projects", id);
+    const docSnap = await getDoc(docRef);
+
+    if (!docSnap.exists()) {
+      return null;
+    }
+
+    return docSnap.data() as ProjectListRes;
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
+};
+
+/** 여러 id로 프로젝트 리스트 한 번에 가져오기 */
+export const getProjectsByIds = async (
+  ids: string[]
+): Promise<ProjectListRes[]> => {
+  if (ids.length === 0) return [];
+  // 10개씩 쪼개서 여러 번 쿼리 (Array.from 사용)
+  const chunkCount = Math.ceil(ids.length / 10);
+  const chunks = Array.from({ length: chunkCount }, (_, i) =>
+    ids.slice(i * 10, (i + 1) * 10)
+  );
+
+  // 여러 쿼리를 병렬로 실행 (Promise.all 사용)
+  const promises = chunks.map((chunk) => {
+    const q = query(collection(db, "projects"), where("__name__", "in", chunk));
+    return getDocs(q);
+  });
+  const snapshots = await Promise.all(promises);
+  const results: ProjectListRes[] = snapshots.flatMap((querySnapshot) =>
+    querySnapshot.docs.map(
+      (doc) =>
+        ({
+          id: doc.id,
+          ...doc.data(),
+        }) as ProjectListRes
+    )
+  );
+  return results;
+};
diff --git a/src/entities/projects/hook/useGetProjects.ts b/src/entities/projects/hook/useGetProjects.ts
new file mode 100644
index 0000000..ddf0ad8
--- /dev/null
+++ b/src/entities/projects/hook/useGetProjects.ts
@@ -0,0 +1,22 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type { DocumentData, QueryDocumentSnapshot } from "firebase/firestore";
+
+import { getProjectList } from "@entities/projects/api/projectsAPi";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+const useGetProjects = ({
+  pageSize = 6,
+}: {
+  pageSize?: number;
+}): UseQueryResult<{
+  projects: ProjectListRes[];
+  lastVisible: QueryDocumentSnapshot<DocumentData> | null;
+}> => {
+  return useQuery({
+    queryKey: ["projects"],
+    queryFn: () => getProjectList({ pageSize, lastDoc: null }),
+  });
+};
+
+export default useGetProjects;
diff --git a/src/entities/projects/hook/useProjectPageNation.ts b/src/entities/projects/hook/useProjectPageNation.ts
new file mode 100644
index 0000000..92b446a
--- /dev/null
+++ b/src/entities/projects/hook/useProjectPageNation.ts
@@ -0,0 +1,74 @@
+import { useState } from "react";
+
+import useProjectList from "@entities/projects/queries/useProjectList";
+import type { LastVisibleType } from "@entities/projects/types/firebase";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+interface ReturnProjectPageNation {
+  projects: ProjectListRes[];
+  currentPage: number;
+  paging: {
+    prev: () => void;
+    next: () => void;
+    reset: () => void;
+    disablePrev: boolean;
+    disableNext: boolean;
+  };
+}
+
+const useProjectPageNation = ({
+  totalCount,
+  perPage = 6,
+}: {
+  totalCount: number;
+  perPage?: number;
+}): ReturnProjectPageNation => {
+  const [lastVisibleStack, setLastVisibleStack] = useState<LastVisibleType>([
+    null,
+  ]);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const cursor = lastVisibleStack[currentPage] ?? null;
+  const { data: projects, isLoading } = useProjectList(cursor);
+
+  const disablePrev = currentPage === 0 || isLoading;
+  const disableNext =
+    currentPage === Math.floor(totalCount / perPage) || isLoading;
+
+  const pagingPrev = (): void => {
+    if (disablePrev) return;
+
+    setCurrentPage((prev) => prev - 1);
+  };
+
+  const pagingNext = (): void => {
+    if (disableNext) return;
+
+    if (projects?.lastVisible) {
+      if (currentPage === lastVisibleStack.length - 1) {
+        setLastVisibleStack((prev) => [...prev, projects.lastVisible]);
+      }
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
+
+  const pagingReset = (): void => {
+    setLastVisibleStack([null]);
+    setCurrentPage(0);
+  };
+
+  return {
+    projects: projects?.projects || [],
+    currentPage,
+    paging: {
+      prev: pagingPrev,
+      next: pagingNext,
+      reset: pagingReset,
+      disablePrev,
+      disableNext,
+    },
+  };
+};
+
+export default useProjectPageNation;
diff --git a/src/entities/projects/hook/useProjectsByIds.ts b/src/entities/projects/hook/useProjectsByIds.ts
new file mode 100644
index 0000000..4186d4e
--- /dev/null
+++ b/src/entities/projects/hook/useProjectsByIds.ts
@@ -0,0 +1,15 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+import { getProjectsByIds } from "../api/projectsAPi";
+
+export function useProjectsByIds(
+  ids: string[]
+): UseQueryResult<ProjectListRes[]> {
+  return useQuery<ProjectListRes[]>({
+    queryKey: ["projectsByIds", ids],
+    queryFn: () => getProjectsByIds(ids),
+    enabled: ids.length > 0,
+  });
+}
diff --git a/src/entities/projects/queries/useProjectList.ts b/src/entities/projects/queries/useProjectList.ts
new file mode 100644
index 0000000..85c0190
--- /dev/null
+++ b/src/entities/projects/queries/useProjectList.ts
@@ -0,0 +1,20 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type { DocumentData, QueryDocumentSnapshot } from "firebase/firestore";
+
+import { getProjectList } from "@entities/projects/api/projectsAPi";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+const useProjectList = (
+  lastDoc: QueryDocumentSnapshot<DocumentData> | null
+): UseQueryResult<{
+  projects: ProjectListRes[];
+  lastVisible: QueryDocumentSnapshot<DocumentData> | null;
+}> => {
+  return useQuery({
+    queryKey: ["project-list", lastDoc?.id ?? "none"],
+    queryFn: () => getProjectList({ pageSize: 6, lastDoc }),
+  });
+};
+
+export default useProjectList;
diff --git a/src/entities/projects/queries/useProjectsItem.ts b/src/entities/projects/queries/useProjectsItem.ts
new file mode 100644
index 0000000..f90ac71
--- /dev/null
+++ b/src/entities/projects/queries/useProjectsItem.ts
@@ -0,0 +1,22 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+
+import { getProjectItem } from "@entities/projects/api/projectsAPi";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+const useProjectsItem = ({
+  id, // projectID
+}: {
+  id: string | null;
+}): UseQueryResult<ProjectListRes | null, Error> => {
+  return useQuery({
+    queryKey: ["project-detail", id],
+    queryFn: () => {
+      if (!id) return null;
+      return getProjectItem(id);
+    },
+    enabled: !!id,
+  });
+};
+
+export default useProjectsItem;
diff --git a/src/entities/projects/queries/useProjectsTotalCount.ts b/src/entities/projects/queries/useProjectsTotalCount.ts
new file mode 100644
index 0000000..5e05808
--- /dev/null
+++ b/src/entities/projects/queries/useProjectsTotalCount.ts
@@ -0,0 +1,12 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+
+import { getProjectsTotalCount } from "@entities/projects/api/projectsAPi";
+
+const useProjectsTotalCount = (): UseQueryResult<number, Error> => {
+  return useQuery({
+    queryKey: ["projects-total-count"],
+    queryFn: getProjectsTotalCount,
+  });
+};
+
+export default useProjectsTotalCount;
diff --git a/src/entities/projects/types/firebase.ts b/src/entities/projects/types/firebase.ts
new file mode 100644
index 0000000..b900567
--- /dev/null
+++ b/src/entities/projects/types/firebase.ts
@@ -0,0 +1,14 @@
+import type {
+  DocumentData,
+  QueryDocumentSnapshot,
+  Timestamp,
+} from "firebase/firestore";
+
+export type CreatedAt = Timestamp;
+export type LastVisibleType = (QueryDocumentSnapshot<DocumentData> | null)[];
+
+export interface ApiResMessage {
+  success: boolean;
+  message: string;
+  id?: string;
+}
diff --git a/src/entities/projects/ui/post-info/ProjectApply.tsx b/src/entities/projects/ui/post-info/ProjectApply.tsx
new file mode 100644
index 0000000..00e07ad
--- /dev/null
+++ b/src/entities/projects/ui/post-info/ProjectApply.tsx
@@ -0,0 +1,23 @@
+import SendOutlinedIcon from "@mui/icons-material/SendOutlined";
+import { Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+const ProjectApply = ({ applicants }: { applicants: number }): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon
+        Icon={SendOutlinedIcon}
+        title="프로젝트 지원"
+        color="success"
+        marginBottom={0}
+      />
+      <Typography variant="body2" marginBottom={2}>
+        현재 {applicants}명이 지원했습니다
+      </Typography>
+    </>
+  );
+};
+
+export default ProjectApply;
diff --git a/src/entities/projects/ui/post-info/ProjectLeader.tsx b/src/entities/projects/ui/post-info/ProjectLeader.tsx
new file mode 100644
index 0000000..0adff85
--- /dev/null
+++ b/src/entities/projects/ui/post-info/ProjectLeader.tsx
@@ -0,0 +1,82 @@
+import MailOutlineIcon from "@mui/icons-material/MailOutline";
+import ThumbUpOffAltIcon from "@mui/icons-material/ThumbUpOffAlt";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import type { User } from "@shared/types/user";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+const ProjectLeader = ({
+  projectOwner,
+}: {
+  projectOwner: User | undefined;
+}): JSX.Element | null => {
+  if (!projectOwner) return null;
+
+  return (
+    <>
+      <TitleWithIcon
+        Icon={ThumbUpOffAltIcon}
+        title="프로젝트 리더"
+        color="warning"
+      />
+
+      <Box display="flex">
+        <PicBox>
+          <img src={projectOwner.avatar} alt="프로필 이미지" />
+        </PicBox>
+        <div>
+          <Typography variant="h5">{projectOwner.name}</Typography>
+          <Typography variant="body2" color="primary" fontWeight={500}>
+            {projectOwner.userRole}
+          </Typography>
+          <Typography variant="body2" fontWeight={500} color="#858585">
+            경력 {projectOwner.experience}
+          </Typography>
+        </div>
+      </Box>
+
+      <Typography variant="body2" marginY={2}>
+        {projectOwner.introduceMyself || "아직 등록한 소개가 없어요! 🚀"}
+      </Typography>
+
+      <MessageBtn>
+        <MailOutlineIcon />
+        <Typography variant="button">연락하기</Typography>
+      </MessageBtn>
+    </>
+  );
+};
+
+export default ProjectLeader;
+
+const PicBox = styled(Box)`
+  width: 6.5rem;
+  height: 6.5rem;
+  margin-right: 1rem;
+  background-color: #eeeeee;
+  border-radius: 50px;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+  }
+`;
+
+const MessageBtn = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  gap: 5px;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+`;
diff --git a/src/entities/projects/ui/post-info/ProjectPostInfo.tsx b/src/entities/projects/ui/post-info/ProjectPostInfo.tsx
new file mode 100644
index 0000000..bdb2829
--- /dev/null
+++ b/src/entities/projects/ui/post-info/ProjectPostInfo.tsx
@@ -0,0 +1,44 @@
+import StarBorderOutlinedIcon from "@mui/icons-material/StarBorderOutlined";
+import type { JSX } from "react";
+
+import { formatDate } from "@shared/libs/utils/projectDetail";
+import type { ProjectListRes } from "@shared/types/project";
+import InfoRow from "@shared/ui/project-detail/InfoRow";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type PostInfoType = Pick<
+  ProjectListRes,
+  "applicants" | "createdAt" | "likedUsers"
+>;
+
+const ProjectPostInfo = ({
+  values,
+}: {
+  values: PostInfoType | null;
+}): JSX.Element | null => {
+  if (!values) return null;
+
+  return (
+    <>
+      <TitleWithIcon
+        Icon={StarBorderOutlinedIcon}
+        title="프로젝트 정보"
+        color="warning"
+      />
+
+      <InfoRow title="등록일" content={formatDate(values.createdAt)} />
+      <InfoRow
+        title="지원자 수"
+        content={`${values.applicants.length}명`}
+        color="primary"
+      />
+      <InfoRow
+        title="관심 등록"
+        content={`${values.likedUsers.length}명`}
+        color="error"
+      />
+    </>
+  );
+};
+
+export default ProjectPostInfo;
diff --git a/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx b/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
new file mode 100644
index 0000000..9ff38a0
--- /dev/null
+++ b/src/entities/projects/ui/project-insert/ProjectCategoryCard.tsx
@@ -0,0 +1,116 @@
+import { FormControl, Select, MenuItem } from "@mui/material";
+import type { SelectChangeEvent } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import type { CSSProperties, JSX } from "react";
+
+interface ProjectCategoryCardProps {
+  value: string;
+  onChange: (event: SelectChangeEvent) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const CARD_SHADOW =
+  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+
+const ProjectCategoryCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectCategoryCardProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: CARD_SHADOW,
+        padding: large ? theme.spacing(4) : theme.spacing(3),
+        minHeight: large ? 220 : 180,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: large
+            ? theme.typography.h3.fontSize
+            : theme.typography.h4.fontSize,
+          marginBottom: 14,
+          color: theme.palette.text.primary,
+        }}
+      >
+        <span role="img" aria-label="분야">
+          🏷️
+        </span>{" "}
+        프로젝트 분야
+      </div>
+      <div
+        style={{
+          color: theme.palette.text.secondary,
+          fontSize: large
+            ? theme.typography.h6.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 18,
+        }}
+      >
+        어떤 분야의 프로젝트인지 선택해주세요
+      </div>
+      <FormControl fullWidth>
+        <Select
+          value={value || ""}
+          onChange={onChange}
+          size={large ? "medium" : "small"}
+          displayEmpty
+          sx={{
+            fontSize: large
+              ? theme.typography.h5.fontSize
+              : theme.typography.body1.fontSize,
+            fontFamily: theme.typography.fontFamily,
+            height: 40,
+            border: `1px solid ${theme.palette.divider}`,
+            boxSizing: "border-box",
+            padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+            "& .MuiSelect-select": {
+              height: "40px",
+              display: "flex",
+              alignItems: "center",
+              padding: 0,
+            },
+          }}
+        >
+          <MenuItem value="" disabled hidden>
+            분야를 선택하세요
+          </MenuItem>
+          <MenuItem value="web">웹 서비스</MenuItem>
+          <MenuItem value="mobile">모바일 앱</MenuItem>
+          <MenuItem value="ai">AI/머신러닝</MenuItem>
+          <MenuItem value="blockchain">블록체인</MenuItem>
+          <MenuItem value="game">게임</MenuItem>
+          <MenuItem value="design">디자인</MenuItem>
+          <MenuItem value="iot">IoT/하드웨어</MenuItem>
+          <MenuItem value="other">기타</MenuItem>
+        </Select>
+      </FormControl>
+      <div
+        style={{
+          color: theme.palette.text.disabled,
+          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
+          marginTop: 10,
+        }}
+      >
+        가장 가까운 분야를 선택해주세요
+      </div>
+    </div>
+  );
+};
+
+export default ProjectCategoryCard;
diff --git a/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx b/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
new file mode 100644
index 0000000..bad68f9
--- /dev/null
+++ b/src/entities/projects/ui/project-insert/ProjectDeadlineCard.tsx
@@ -0,0 +1,96 @@
+import { useTheme } from "@mui/material/styles";
+import type { ChangeEvent, CSSProperties, JSX } from "react";
+
+interface ProjectDeadlineCardProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const ProjectDeadlineCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectDeadlineCardProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow:
+          "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
+        padding: large ? theme.spacing(4) : theme.spacing(3),
+        minHeight: large ? 220 : 180,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: large
+            ? theme.typography.h3.fontSize
+            : theme.typography.h4.fontSize,
+          marginBottom: 14,
+          color: theme.palette.text.primary,
+        }}
+      >
+        <span role="img" aria-label="마감">
+          📅
+        </span>{" "}
+        모집 마감일
+      </div>
+      <div
+        style={{
+          color: theme.palette.text.secondary,
+          fontSize: large
+            ? theme.typography.h6.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 18,
+        }}
+      >
+        언제까지 팀원을 모집할까요?
+      </div>
+      <input
+        type="date"
+        name="deadline"
+        value={value}
+        onChange={onChange}
+        style={{
+          width: "100%",
+          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.divider}`,
+          fontSize: large
+            ? theme.typography.h5.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 8,
+          fontFamily: theme.typography.fontFamily,
+          height: 40,
+          boxSizing: "border-box",
+          background: theme.palette.background.paper,
+        }}
+        required
+      />
+      <div
+        style={{
+          color: "#bbb",
+          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
+        }}
+      >
+        충분한 시간을 두고 설정하세요!
+      </div>
+    </div>
+  );
+};
+
+export default ProjectDeadlineCard;
diff --git a/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
new file mode 100644
index 0000000..58d19bc
--- /dev/null
+++ b/src/entities/projects/ui/project-insert/ProjectOneLineCard.tsx
@@ -0,0 +1,99 @@
+import { useTheme } from "@mui/material/styles";
+import type { ChangeEvent, CSSProperties, JSX } from "react";
+
+interface ProjectOneLineCardProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const CARD_SHADOW =
+  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+
+const ProjectOneLineCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectOneLineCardProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: CARD_SHADOW,
+        padding: large ? theme.spacing(4) : theme.spacing(3),
+        minHeight: large ? 220 : 180,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: large
+            ? theme.typography.h3.fontSize
+            : theme.typography.h4.fontSize,
+          marginBottom: 14,
+          color: theme.palette.text.primary,
+        }}
+      >
+        <span role="img" aria-label="소개">
+          ✨
+        </span>{" "}
+        한 줄 소개
+      </div>
+      <div
+        style={{
+          color: theme.palette.text.secondary,
+          fontSize: large
+            ? theme.typography.h6.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 18,
+        }}
+      >
+        프로젝트를 한 줄로 매력적으로 소개해주세요!
+      </div>
+      <input
+        type="text"
+        name="subtitle"
+        value={value}
+        onChange={onChange}
+        placeholder="예: 개인 맞춤형 학습으로 공부 효율을 높여보세요! 📚"
+        style={{
+          width: "100%",
+          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.divider}`,
+          fontSize: large
+            ? theme.typography.h5.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 8,
+          fontFamily: theme.typography.fontFamily,
+          height: 40,
+          boxSizing: "border-box",
+          background: theme.palette.background.paper,
+        }}
+        required
+      />
+      <div
+        style={{
+          color: "#bbb",
+          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
+        }}
+      >
+        이모지를 활용하면 더 눈에 띄어요!
+      </div>
+    </div>
+  );
+};
+
+export default ProjectOneLineCard;
diff --git a/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
new file mode 100644
index 0000000..2c80eb1
--- /dev/null
+++ b/src/entities/projects/ui/project-insert/ProjectSimpleDescCard.tsx
@@ -0,0 +1,102 @@
+import { useTheme } from "@mui/material/styles";
+import type { ChangeEvent, CSSProperties, JSX } from "react";
+
+interface ProjectSimpleDescCardProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const ProjectSimpleDescCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectSimpleDescCardProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow:
+          "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
+        padding: large ? theme.spacing(4) : theme.spacing(3),
+        minHeight: large ? 220 : 180,
+        width: "100%",
+        gridColumn: "1 / -1",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        marginTop: 0,
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: large
+            ? theme.typography.h3.fontSize
+            : theme.typography.h4.fontSize,
+          marginBottom: 14,
+          color: theme.palette.text.primary,
+        }}
+      >
+        <span role="img" aria-label="소개">
+          📝
+        </span>{" "}
+        프로젝트 간단 소개
+      </div>
+      <div
+        style={{
+          color: theme.palette.text.secondary,
+          fontSize: large
+            ? theme.typography.h6.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 18,
+        }}
+      >
+        프로젝트에 대해 간단히 설명해주세요! (상세 설명은 다음 단계에서
+        작성합니다)
+      </div>
+      <textarea
+        name="description"
+        value={value}
+        onChange={onChange}
+        placeholder="예: 사용자의 학습 패턴을 분석하여 최적의 학습 방법을 제안하는 모바일 앱을 개발합니다."
+        rows={3}
+        style={{
+          width: "100%",
+          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.divider}`,
+          fontSize: large
+            ? theme.typography.h5.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 8,
+          resize: "vertical",
+          minHeight: 40,
+          overflow: "visible",
+          fontFamily: theme.typography.fontFamily,
+          boxSizing: "border-box",
+          background: theme.palette.background.paper,
+        }}
+        required
+      />
+      <div
+        style={{
+          color: "#bbb",
+          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
+        }}
+      >
+        2-3줄 정도로 핵심만 간단히 써주세요!
+      </div>
+    </div>
+  );
+};
+
+export default ProjectSimpleDescCard;
diff --git a/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
new file mode 100644
index 0000000..ed818da
--- /dev/null
+++ b/src/entities/projects/ui/project-insert/ProjectTitleCard.tsx
@@ -0,0 +1,99 @@
+import { useTheme } from "@mui/material/styles";
+import type { ChangeEvent, CSSProperties, JSX } from "react";
+
+interface ProjectTitleCardProps {
+  value: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  large?: boolean;
+  style?: CSSProperties;
+}
+
+const CARD_SHADOW =
+  "0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+
+const ProjectTitleCard = ({
+  value,
+  onChange,
+  large,
+  style,
+}: ProjectTitleCardProps): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <div
+      style={{
+        background: theme.palette.background.paper,
+        borderRadius: theme.shape.borderRadius,
+        border: `1px solid ${theme.palette.divider}`,
+        boxShadow: CARD_SHADOW,
+        padding: large ? theme.spacing(4) : theme.spacing(3),
+        minHeight: large ? 220 : 180,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        width: "100%",
+        overflow: "visible",
+        fontFamily: theme.typography.fontFamily,
+        ...style,
+      }}
+    >
+      <div
+        style={{
+          fontWeight: theme.typography.h3.fontWeight,
+          fontSize: large
+            ? theme.typography.h3.fontSize
+            : theme.typography.h4.fontSize,
+          marginBottom: 14,
+          color: theme.palette.text.primary,
+        }}
+      >
+        <span role="img" aria-label="이름">
+          🍑
+        </span>{" "}
+        프로젝트 이름
+      </div>
+      <div
+        style={{
+          color: theme.palette.text.secondary,
+          fontSize: large
+            ? theme.typography.h6.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 18,
+        }}
+      >
+        언제 프로젝트인지 한 눈에 알 수 있는 이름을 지어주세요!
+      </div>
+      <input
+        type="text"
+        name="title"
+        value={value}
+        onChange={onChange}
+        placeholder="예: 우리 동네 맛집 찾기 앱"
+        style={{
+          width: "100%",
+          padding: large ? theme.spacing(2.2) : theme.spacing(1.7),
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.divider}`,
+          fontSize: large
+            ? theme.typography.h5.fontSize
+            : theme.typography.body1.fontSize,
+          marginBottom: 8,
+          fontFamily: theme.typography.fontFamily,
+          height: 40,
+          boxSizing: "border-box",
+          background: theme.palette.background.paper,
+        }}
+        required
+      />
+      <div
+        style={{
+          color: "#bbb",
+          fontSize: large ? theme.typography.body1.fontSize : "1.2rem",
+        }}
+      >
+        간단하게 기억하기 쉬운 이름이 좋아요!
+      </div>
+    </div>
+  );
+};
+
+export default ProjectTitleCard;
diff --git a/src/entities/projects/ui/projects-card/ProjectCard.tsx b/src/entities/projects/ui/projects-card/ProjectCard.tsx
new file mode 100644
index 0000000..250a97f
--- /dev/null
+++ b/src/entities/projects/ui/projects-card/ProjectCard.tsx
@@ -0,0 +1,279 @@
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import LocationPinIcon from "@mui/icons-material/LocationPin";
+import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
+import {
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+  Stack,
+  styled,
+  Typography,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import type { JSX } from "react";
+import { memo } from "react";
+import { Link } from "react-router-dom";
+
+import { type ProjectListRes } from "@shared/types/project";
+import DragScrollContainer from "@shared/ui/DragScrollContainer";
+import UserProfileAvatar from "@shared/ui/user/UserProfileAvatar";
+import UserProfileWithNamePosition from "@shared/ui/user/UserProfileWithNamePosition";
+
+interface ProjectCardProps {
+  project: ProjectListRes;
+  simple?: boolean;
+  sx?: any;
+}
+
+const ProjectCard = ({
+  project,
+  simple = false,
+  sx,
+}: ProjectCardProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.up("sm"));
+
+  return (
+    <StyledCard sx={{ ...(simple && { minHeight: 260 }), ...sx }}>
+      <StyledCardContent>
+        <ProjectHeader>
+          <StatusChip label={project.status} color="primary" size="small" />
+        </ProjectHeader>
+
+        <ContentSection>
+          <ProjectTitle variant="h5" fontWeight={700}>
+            {project.title}
+          </ProjectTitle>
+          {!simple && (
+            <>
+              <OneLineInfo variant="body1" color="primary" fontWeight={600}>
+                {project.oneLineInfo}
+              </OneLineInfo>
+              <SimpleInfo variant="body2" color="text.secondary">
+                {project.simpleInfo}
+              </SimpleInfo>
+            </>
+          )}
+        </ContentSection>
+        <Stack flexDirection={"row"} gap={"0.8rem"} alignItems={"flex-start"}>
+          {isMobile ? (
+            <UserProfileAvatar
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              avatar={project.projectOwner.avatar}
+              flexDirection="row"
+            />
+          ) : (
+            <UserProfileWithNamePosition
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              flexDirection="row"
+            />
+          )}
+        </Stack>
+        {!simple && (
+          <DragScrollContainer>
+            {project.techStack.map((stack, index) => (
+              <TechChip key={index} label={stack} size="small" />
+            ))}
+          </DragScrollContainer>
+        )}
+
+        {!simple && (
+          <ProjectDetails>
+            <DetailItem>
+              <PeopleAltIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.teamSize}명
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <AccessTimeIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.expectedPeriod}
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <LocationPinIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                온라인
+              </Typography>
+            </DetailItem>
+          </ProjectDetails>
+        )}
+
+        <StyledDivider />
+
+        <FooterSection>
+          <Typography variant="body1" color="textPrimary">
+            <TextHighlight>{project.applicants.length}명</TextHighlight> 지원
+          </Typography>
+          <StyledLink to={`/project/${project.id}`}>
+            <ActionButton variant="contained" color="primary" size="medium">
+              자세히 보기
+            </ActionButton>
+          </StyledLink>
+        </FooterSection>
+      </StyledCardContent>
+    </StyledCard>
+  );
+};
+
+export default memo(ProjectCard);
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  height: "100%",
+  flex: 1,
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  border: `1px solid ${theme.palette.divider}`,
+
+  "&:hover": {
+    transform: "translateY(-0.4rem)",
+    boxShadow:
+      "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    borderColor: theme.palette.primary.light,
+  },
+
+  [theme.breakpoints.up("sm")]: {
+    flex: 1,
+    "&:hover": {
+      transform: "translateY(-0.6rem)",
+    },
+  },
+
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "48rem",
+    maxHeight: "54rem",
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const ProjectHeader = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+}));
+
+const StatusChip = styled(Chip)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+
+  "&:hover": {
+    backgroundColor: theme.palette.primary.dark,
+  },
+}));
+
+const ContentSection = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.8),
+}));
+
+const ProjectTitle = styled(Typography)(({ theme }) => ({
+  lineHeight: 1.3,
+  letterSpacing: "-0.015em",
+  color: theme.palette.text.primary,
+}));
+
+const OneLineInfo = styled(Typography)(() => ({
+  lineHeight: 1.4,
+  fontWeight: 600,
+}));
+
+const SimpleInfo = styled(Typography)(() => ({
+  lineHeight: 1.5,
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+}));
+
+const TechChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  border: `1px solid ${theme.palette.divider}`,
+  fontWeight: 500,
+  fontSize: "1.1rem",
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+
+  [theme.breakpoints.up("sm")]: {
+    fontSize: "1.2rem",
+  },
+}));
+
+const ProjectDetails = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: theme.spacing(1.6),
+  marginTop: theme.spacing(0.8),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const DetailItem = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(0.6),
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: `${theme.spacing(0.8)} 0`,
+  backgroundColor: theme.palette.divider,
+}));
+
+const FooterSection = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginTop: "auto",
+  gap: theme.spacing(1.2),
+}));
+
+const StyledLink = styled(Link)(() => ({
+  textDecoration: "none",
+  flexShrink: 0,
+}));
+
+const ActionButton = styled(Button)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  borderRadius: theme.spacing(0.8),
+  boxShadow: "none",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+
+  "&:hover": {
+    transform: "translateY(-0.1rem)",
+    boxShadow: "0 4px 8px -2px rgba(37, 99, 235, 0.3)",
+  },
+
+  "&:active": {
+    transform: "translateY(0)",
+  },
+}));
+
+const TextHighlight = styled("span")(({ theme }) => ({
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+}));
diff --git a/src/entities/projects/ui/projects-detail/ProjectDescription.tsx b/src/entities/projects/ui/projects-detail/ProjectDescription.tsx
new file mode 100644
index 0000000..a983be1
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectDescription.tsx
@@ -0,0 +1,21 @@
+import AdjustIcon from "@mui/icons-material/Adjust";
+import { Box } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type ProjectDescriptionType = Pick<ProjectListRes, "description">;
+
+const ProjectDescription = ({
+  description,
+}: ProjectDescriptionType): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon Icon={AdjustIcon} title="프로젝트 상세" />
+      <Box marginY={2}>{description}</Box>
+    </>
+  );
+};
+
+export default ProjectDescription;
diff --git a/src/entities/projects/ui/projects-detail/ProjectHeader.tsx b/src/entities/projects/ui/projects-detail/ProjectHeader.tsx
new file mode 100644
index 0000000..0e976db
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectHeader.tsx
@@ -0,0 +1,37 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+const DetailHeader = ({ title }: { title: string }): JSX.Element => {
+  const Navigate = useNavigate();
+
+  const goListPage = (): void | Promise<void> => Navigate("/project");
+
+  return (
+    <HeadBox>
+      <ClickSpan onClick={goListPage}>
+        <ArrowBackIcon />
+        프로젝트 목록
+      </ClickSpan>
+      <span>/</span>
+      <span>{title}</span>
+    </HeadBox>
+  );
+};
+
+export default DetailHeader;
+
+const HeadBox = styled(Box)`
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  font-size: 14px;
+  gap: 8px;
+`;
+const ClickSpan = styled("span")`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+`;
diff --git a/src/entities/projects/ui/projects-detail/ProjectInfo.tsx b/src/entities/projects/ui/projects-detail/ProjectInfo.tsx
new file mode 100644
index 0000000..502c955
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectInfo.tsx
@@ -0,0 +1,67 @@
+import AccessTimeOutlinedIcon from "@mui/icons-material/AccessTimeOutlined";
+import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
+import GroupIcon from "@mui/icons-material/Group";
+import RoomOutlinedIcon from "@mui/icons-material/RoomOutlined";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import { formatDate } from "@shared/libs/utils/projectDetail";
+import type { ProjectListRes } from "@shared/types/project";
+import InfoWithIcon from "@shared/ui/project-detail/InfoWithIcon";
+
+type ProjectInfoType = Pick<
+  ProjectListRes,
+  | "title"
+  | "teamSize"
+  | "workflow"
+  | "simpleInfo"
+  | "closedDate"
+  | "oneLineInfo"
+  | "expectedPeriod"
+>;
+
+const ProjectInfo = ({
+  values,
+}: {
+  values: ProjectInfoType | null;
+}): JSX.Element | null => {
+  if (!values) return null;
+
+  return (
+    <>
+      <Typography variant="h2">{values.title}</Typography>
+      <OneLineInfo>{values.oneLineInfo}</OneLineInfo>
+      <Typography>{values.simpleInfo}</Typography>
+
+      <Box display="flex" marginTop={2} gap={1}>
+        <InfoWithIcon
+          item="팀 규모"
+          Icon={GroupIcon}
+          content={`${values.teamSize}명`}
+        />
+        <InfoWithIcon
+          item="예상 기간"
+          Icon={AccessTimeOutlinedIcon}
+          content={values.expectedPeriod}
+        />
+        <InfoWithIcon
+          item="모집 마감"
+          Icon={CalendarTodayOutlinedIcon}
+          content={formatDate(values.closedDate)}
+        />
+        <InfoWithIcon
+          item="진행 방식"
+          Icon={RoomOutlinedIcon}
+          content={values.workflow}
+        />
+      </Box>
+    </>
+  );
+};
+
+export default ProjectInfo;
+
+const OneLineInfo = styled("div")`
+  margin: 1rem 0 1.5rem 0;
+  font-size: 18px;
+`;
diff --git a/src/entities/projects/ui/projects-detail/ProjectPositions.tsx b/src/entities/projects/ui/projects-detail/ProjectPositions.tsx
new file mode 100644
index 0000000..d3761d5
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectPositions.tsx
@@ -0,0 +1,47 @@
+import PermIdentityIcon from "@mui/icons-material/PermIdentity";
+import WorkOutlineIcon from "@mui/icons-material/WorkOutline";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type ProjectPositionsType = Pick<ProjectListRes, "positions">;
+
+const ProjectPositions = ({ positions }: ProjectPositionsType): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon Icon={WorkOutlineIcon} title="모집 포지션" />
+
+      {positions.map((item, i) => (
+        <PositionBox key={i}>
+          <Box display="flex" alignItems="center" gap={1}>
+            <PermIdentityIcon fontSize="large" color="disabled" />
+            <div>
+              <Typography variant="h6">{item.position}</Typography>
+              <Typography variant="body2" color="#2d2d2d">
+                {item.experience}
+              </Typography>
+            </div>
+          </Box>
+          <Box fontSize={14} color="#858585">
+            {item.count}명
+          </Box>
+        </PositionBox>
+      ))}
+    </>
+  );
+};
+
+export default ProjectPositions;
+
+const PositionBox = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  margin-top: 1rem;
+  background-color: #fafafa;
+  border: 1px solid #eeeeee;
+  border-radius: 8px;
+`;
diff --git a/src/entities/projects/ui/projects-detail/ProjectRequirements.tsx b/src/entities/projects/ui/projects-detail/ProjectRequirements.tsx
new file mode 100644
index 0000000..d48ed12
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectRequirements.tsx
@@ -0,0 +1,51 @@
+import TaskAltIcon from "@mui/icons-material/TaskAlt";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type ProjectRequirementsType = Pick<
+  ProjectListRes,
+  "requirements" | "preferentialTreatment"
+>;
+
+const ProjectRequirements = ({
+  requirements,
+  preferentialTreatment,
+}: ProjectRequirementsType): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon Icon={TaskAltIcon} title="지원 요구사항" />
+
+      {requirements.map((content, i) => (
+        <Box key={i} display="flex" alignItems="center" marginTop={1} gap={1}>
+          <TaskAltIcon fontSize="large" color="success" />
+          <Box fontSize={18} color="#2b2b2b">
+            {content}
+          </Box>
+        </Box>
+      ))}
+
+      <Box height={"1px"} marginY={2} bgcolor="#ededed" />
+
+      <Typography variant="h6">우대사항</Typography>
+      <Box display="flex" flexWrap="wrap">
+        {preferentialTreatment.map((content, i) => (
+          <PeriodBox key={i} variant="body2" fontWeight={600}>
+            {content}
+          </PeriodBox>
+        ))}
+      </Box>
+    </>
+  );
+};
+
+export default ProjectRequirements;
+
+const PeriodBox = styled(Typography)`
+  border: 1px solid #dddddd;
+  padding: 0.3rem 1rem;
+  margin: 1rem 1rem 0 0;
+  border-radius: 50px;
+`;
diff --git a/src/entities/projects/ui/projects-detail/ProjectSchedule.tsx b/src/entities/projects/ui/projects-detail/ProjectSchedule.tsx
new file mode 100644
index 0000000..248b3e5
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/ProjectSchedule.tsx
@@ -0,0 +1,53 @@
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type ProjectScheduleType = Pick<ProjectListRes, "schedules">;
+
+const ProjectSchedule = ({ schedules }: ProjectScheduleType): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon Icon={RocketLaunchIcon} title="프로젝트 일정" />
+
+      {schedules.map((item, i) => (
+        <Box key={i} display="flex" alignItems="flex-start" marginTop={2}>
+          <IndexBox>{i + 1}</IndexBox>
+          <div>
+            <Box display="flex" alignItems="center">
+              <Typography variant="h5">{item.stageName}</Typography>
+              <PeriodBox variant="body2" fontWeight={600}>
+                {item.period}
+              </PeriodBox>
+            </Box>
+            <Typography variant="body1" color="#858585">
+              {item.description}
+            </Typography>
+          </div>
+        </Box>
+      ))}
+    </>
+  );
+};
+
+export default ProjectSchedule;
+
+const IndexBox = styled(Typography)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  margin-right: 2rem;
+  color: ${({ theme }) => theme.palette.primary.main};
+  background-color: #d7e4ff;
+  border-radius: 50px;
+`;
+const PeriodBox = styled(Typography)`
+  border: 1px solid #ededed;
+  padding: 0.3rem 1rem;
+  margin-left: 1rem;
+  border-radius: 50px;
+`;
diff --git a/src/entities/projects/ui/projects-detail/TechStack.tsx b/src/entities/projects/ui/projects-detail/TechStack.tsx
new file mode 100644
index 0000000..95d49db
--- /dev/null
+++ b/src/entities/projects/ui/projects-detail/TechStack.tsx
@@ -0,0 +1,33 @@
+import CodeIcon from "@mui/icons-material/Code";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import TitleWithIcon from "@shared/ui/project-detail/TitleWithIcon";
+
+type TechStackType = Pick<ProjectListRes, "techStack">;
+
+const TechStack = ({ techStack }: TechStackType): JSX.Element => {
+  return (
+    <>
+      <TitleWithIcon Icon={CodeIcon} title="기술 스택" />
+
+      <Box display={"flex"} marginTop={1} flexWrap={"wrap"}>
+        {techStack.map((item, i) => (
+          <Tag key={i} variant="h6">
+            {item}
+          </Tag>
+        ))}
+      </Box>
+    </>
+  );
+};
+
+export default TechStack;
+
+const Tag = styled(Typography)`
+  padding: 0.5rem 1.5rem;
+  margin: 1rem 1rem 0 0;
+  background-color: #f4f4f4;
+  border-radius: 50px;
+`;
diff --git a/src/entities/projects/ui/projects-stats/ProjectsStats.tsx b/src/entities/projects/ui/projects-stats/ProjectsStats.tsx
new file mode 100644
index 0000000..7bbdca3
--- /dev/null
+++ b/src/entities/projects/ui/projects-stats/ProjectsStats.tsx
@@ -0,0 +1,91 @@
+import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
+import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import { Card, CardContent, Stack, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const ProjectsStats = (): JSX.Element => {
+  const mock = [
+    {
+      id: "a",
+      title: "진행중인 프로젝트",
+      value: 110,
+      icon: <RocketLaunchIcon sx={{ fontSize: "4.8rem" }} />,
+      color: "#2563eb",
+    },
+    {
+      id: "b",
+      title: "활성 사용자",
+      value: 120,
+      icon: <PeopleAltIcon sx={{ fontSize: "4.8rem" }} />,
+      color: "#16a34a",
+    },
+    {
+      id: "c",
+      title: "완성된 프로젝트",
+      value: 130,
+      icon: <EmojiEventsIcon sx={{ fontSize: "4.8rem" }} />,
+      color: "#eab308",
+    },
+  ];
+
+  return (
+    <>
+      {mock.map((stat) => {
+        return (
+          <ProjectStatsCard key={stat.id}>
+            <CardContent>
+              <ProjectStatsStack>
+                <ProjectStatsIcon color={stat.color}>
+                  {stat.icon}
+                </ProjectStatsIcon>
+                <ProjectStatsCount variant="subtitle2">
+                  {`${stat.value}+`}
+                </ProjectStatsCount>
+                <ProjectStatsTitle variant="body1">
+                  {stat.title}
+                </ProjectStatsTitle>
+              </ProjectStatsStack>
+            </CardContent>
+          </ProjectStatsCard>
+        );
+      })}
+    </>
+  );
+};
+
+export default ProjectsStats;
+
+interface ProjectStatsIconProps {
+  color: string;
+}
+
+const ProjectStatsCard = styled(Card)(() => ({
+  flex: 1,
+}));
+
+const ProjectStatsIcon = styled("span")<ProjectStatsIconProps>(({ color }) => ({
+  color: color,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "12px",
+  padding: "1.6rem",
+  backgroundColor: `${color}10`,
+}));
+
+const ProjectStatsStack = styled(Stack)(() => ({
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "column",
+  gap: "0.8rem",
+}));
+
+const ProjectStatsCount = styled(Typography)(() => ({
+  fontSize: "2.4rem",
+  fontWeight: "bold",
+}));
+
+const ProjectStatsTitle = styled(Typography)(() => ({
+  fontSize: "1.6rem",
+}));
diff --git a/src/entities/search/api/getFilteredProjectLists.ts b/src/entities/search/api/getFilteredProjectLists.ts
new file mode 100644
index 0000000..d5e4130
--- /dev/null
+++ b/src/entities/search/api/getFilteredProjectLists.ts
@@ -0,0 +1,156 @@
+import { getDocs, getCountFromServer } from "firebase/firestore";
+import type { QueryDocumentSnapshot, DocumentData } from "firebase/firestore";
+
+import { SearchFilterBuilder } from "@entities/search/model/searchFilterBuilder";
+import type { ProjectSearchFilterOption } from "@entities/search/types";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+interface GetFilteredProjectListsOptions {
+  cursor?: QueryDocumentSnapshot<DocumentData> | null;
+  pageSize?: number;
+}
+
+interface ProjectListWithPagination {
+  projects: ProjectListRes[];
+  lastVisible: QueryDocumentSnapshot<DocumentData> | null;
+  hasMore: boolean;
+  totalCount?: number;
+}
+
+export const getFilteredProjectCount = async (
+  collectionName: string,
+  filter: ProjectSearchFilterOption
+): Promise<number> => {
+  const queryBuilder = new SearchFilterBuilder(collectionName)
+    .setTitle(filter.title || undefined)
+    .setCategory(filter.category === "all" ? undefined : filter.category)
+    .setStatus(filter.status === "all" ? undefined : filter.status)
+    .setWorkflow(filter.workflow === "all" ? undefined : filter.workflow);
+
+  const query = queryBuilder.build();
+
+  const snapshot = await getCountFromServer(query);
+
+  if (filter.position && filter.position !== "all") {
+    const allDocs = await getDocs(query);
+
+    const filteredProjects = allDocs.docs.filter((doc) => {
+      const data = doc.data() as ProjectListRes;
+      return data.positions.some(
+        (position) => position.position === filter.position
+      );
+    });
+
+    return filteredProjects.length;
+  }
+
+  return snapshot.data().count;
+};
+
+export const getFilteredProjectsByPage = async (
+  collectionName: string,
+  filter: ProjectSearchFilterOption,
+  page: number = 1,
+  pageSize: number = 6
+): Promise<ProjectListRes[]> => {
+  const queryBuilder = new SearchFilterBuilder(collectionName)
+    .setTitle(filter.title || undefined)
+    .setCategory(filter.category === "all" ? undefined : filter.category)
+    .setStatus(filter.status === "all" ? undefined : filter.status)
+    .setWorkflow(filter.workflow === "all" ? undefined : filter.workflow)
+    .setSortBy(filter.sortBy || "latest");
+
+  if (filter.position && filter.position !== "all") {
+    queryBuilder.addLimit(pageSize * 5);
+  } else {
+    const offset = (page - 1) * pageSize;
+    queryBuilder.addLimit(offset + pageSize * 2);
+  }
+
+  const query = queryBuilder.build();
+
+  const snapshot = await getDocs(query);
+
+  let projects = snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as ProjectListRes[];
+
+  if (filter.position && filter.position !== "all") {
+    projects = projects.filter((project) =>
+      project.positions.some(
+        (position) => position.position === filter.position
+      )
+    );
+  }
+
+  const offset = (page - 1) * pageSize;
+  const startIndex = offset;
+  const endIndex = startIndex + pageSize;
+
+  const result = projects.slice(startIndex, endIndex);
+
+  return result;
+};
+
+const getFilteredProjectLists = async (
+  collectionName: string,
+  filter: ProjectSearchFilterOption,
+  options: GetFilteredProjectListsOptions = {}
+): Promise<ProjectListWithPagination> => {
+  const { cursor, pageSize = 6 } = options;
+
+  let queryBuilder = new SearchFilterBuilder(collectionName)
+    .setTitle(filter.title || undefined)
+    .setCategory(filter.category === "all" ? undefined : filter.category)
+    .setStatus(filter.status === "all" ? undefined : filter.status)
+    .setWorkflow(filter.workflow === "all" ? undefined : filter.workflow)
+    .setSortBy(filter.sortBy || "latest");
+
+  if (cursor) {
+    queryBuilder.addStartAfter(cursor);
+  }
+
+  queryBuilder.addLimit(pageSize + 1);
+
+  const query = queryBuilder.build();
+
+  const snapshot = await getDocs(query);
+  let projects = snapshot.docs.map((doc) => ({
+    id: doc.id,
+    ...doc.data(),
+  })) as ProjectListRes[];
+
+  if (filter.position && filter.position !== "all") {
+    projects = projects.filter((project) =>
+      project.positions.some(
+        (position) => position.position === filter.position
+      )
+    );
+  }
+
+  const hasMore = projects.length > pageSize;
+  if (hasMore) {
+    projects = projects.slice(0, pageSize);
+  }
+
+  const lastVisible =
+    projects.length > 0 ? snapshot.docs[projects.length - 1] : null;
+
+  return {
+    projects,
+    lastVisible,
+    hasMore,
+  };
+};
+
+export const getFilteredProjectListsSimple = async (
+  collectionName: string,
+  filter: ProjectSearchFilterOption
+): Promise<ProjectListRes[]> => {
+  const result = await getFilteredProjectLists(collectionName, filter);
+  return result.projects;
+};
+
+export default getFilteredProjectLists;
diff --git a/src/entities/search/hooks/useFilteredProjects.ts b/src/entities/search/hooks/useFilteredProjects.ts
new file mode 100644
index 0000000..02f6249
--- /dev/null
+++ b/src/entities/search/hooks/useFilteredProjects.ts
@@ -0,0 +1,126 @@
+import { useState } from "react";
+
+import type { ProjectSearchFilterOption, SortBy } from "@entities/search/types";
+
+import {
+  RecruitmentStatus,
+  type ProjectCategory,
+  type Workflow,
+} from "@shared/types/project";
+import type { UserRole } from "@shared/types/user";
+
+interface UseFilteredProjects {
+  filterState: ProjectSearchFilterOption;
+  title: string;
+  category: ProjectCategory | "all";
+  position: UserRole | "all";
+  status: RecruitmentStatus | "all";
+  workflow: Workflow | "all";
+  sortBy: SortBy | "latest";
+  updateTitle: (newTitle: string) => void;
+  updateCategory: (newCategory: ProjectCategory | "all") => void;
+  updatePosition: (newPosition: UserRole | "all") => void;
+  updateStatus: (newStatus: RecruitmentStatus | "all") => void;
+  updateWorkflow: (newWorkflow: Workflow | "all") => void;
+  updateSortBy: (newSortBy: SortBy | "latest") => void;
+  resetFilters: () => void;
+  getActiveFiltersCount: () => number;
+  getCleanFilter: () => ProjectSearchFilterOption;
+}
+
+const useFilteredProjects = (): UseFilteredProjects => {
+  const [title, setTitle] = useState<string>("");
+  const [category, setCategory] = useState<ProjectCategory | "all">("all");
+  const [position, setPosition] = useState<UserRole | "all">("all");
+  const [status, setStatus] = useState<RecruitmentStatus | "all">("all");
+  const [workflow, setWorkflow] = useState<Workflow | "all">("all");
+  const [sortBy, setSortBy] = useState<SortBy | "latest">("latest");
+
+  const updateTitle = (newTitle: string): void => {
+    setTitle(newTitle);
+  };
+
+  const updateCategory = (newCategory: ProjectCategory | "all"): void => {
+    setCategory(newCategory);
+  };
+
+  const updatePosition = (newPosition: UserRole | "all"): void => {
+    setPosition(newPosition);
+  };
+
+  const updateStatus = (newStatus: RecruitmentStatus | "all"): void => {
+    setStatus(newStatus);
+  };
+
+  const updateWorkflow = (newWorkflow: Workflow | "all"): void => {
+    setWorkflow(newWorkflow);
+  };
+
+  const updateSortBy = (newSortBy: SortBy | "latest"): void => {
+    setSortBy(newSortBy);
+  };
+
+  const resetFilters = (): void => {
+    setTitle("");
+    setCategory("all");
+    setPosition("all");
+    setStatus("all");
+    setWorkflow("all");
+    setSortBy("latest");
+  };
+
+  const getActiveFiltersCount = (): number => {
+    let count = 0;
+    if (title) count++;
+    if (category !== "all") count++;
+    if (position !== "all") count++;
+    if (status !== "all") count++;
+    if (workflow !== "all") count++;
+    return count;
+  };
+
+  const getCleanFilter = (): ProjectSearchFilterOption => {
+    const cleanFilter: ProjectSearchFilterOption = {
+      title: title || "",
+      category: category === "all" ? undefined : category,
+      position: position === "all" ? undefined : position,
+      status: status === "all" ? undefined : status,
+      workflow: workflow === "all" ? undefined : workflow,
+      sortBy: sortBy || "latest",
+    };
+
+    return Object.fromEntries(
+      Object.entries(cleanFilter).filter(([_, value]) => value !== undefined)
+    ) as ProjectSearchFilterOption;
+  };
+
+  const filterState = {
+    title,
+    category,
+    position,
+    status,
+    workflow,
+    sortBy,
+  };
+
+  return {
+    filterState,
+    title,
+    category,
+    position,
+    status,
+    workflow,
+    sortBy,
+    updateTitle,
+    updateCategory,
+    updatePosition,
+    updateStatus,
+    updateWorkflow,
+    updateSortBy,
+    resetFilters,
+    getActiveFiltersCount,
+    getCleanFilter,
+  };
+};
+
+export default useFilteredProjects;
diff --git a/src/entities/search/hooks/useProjectListPage.ts b/src/entities/search/hooks/useProjectListPage.ts
new file mode 100644
index 0000000..8f511ea
--- /dev/null
+++ b/src/entities/search/hooks/useProjectListPage.ts
@@ -0,0 +1,81 @@
+import { useState } from "react";
+
+import {
+  useGetFilteredProjectsByPage,
+  useGetFilteredProjectsCount,
+} from "@entities/search/queries/useGetFilteredProjectLists";
+import type { ProjectSearchFilterOption } from "@entities/search/types";
+
+import { usePaginationWithState } from "@shared/hooks/usePagination";
+import type { ProjectListRes } from "@shared/types/project";
+
+const ITEMS_PER_PAGE = 6;
+
+interface UseProjectListPageReturn {
+  projects: ProjectListRes[];
+  totalCount: number;
+  currentFilter: ProjectSearchFilterOption;
+
+  currentPage: number;
+  totalPages: number;
+
+  isLoading: boolean;
+  isError: boolean;
+
+  handleSearch: (filter: ProjectSearchFilterOption) => void;
+  handlePageChange: (page: number) => void;
+}
+
+const useProjectListPage = (): UseProjectListPageReturn => {
+  const [currentFilter, setCurrentFilter] = useState<ProjectSearchFilterOption>(
+    {}
+  );
+
+  const {
+    data: totalCount = 0,
+    isLoading: isCountLoading,
+    isError: isCountError,
+  } = useGetFilteredProjectsCount(currentFilter);
+
+  const { currentPage, totalPages, setPage, goToReset } =
+    usePaginationWithState({
+      totalCount,
+      perPage: ITEMS_PER_PAGE,
+    });
+
+  const {
+    data: projects = [],
+    isLoading: isProjectsLoading,
+    isError: isProjectsError,
+  } = useGetFilteredProjectsByPage(currentFilter, currentPage, ITEMS_PER_PAGE);
+
+  const isLoading = isProjectsLoading || isCountLoading;
+  const isError = isProjectsError || isCountError;
+
+  const handleSearch = (filter: ProjectSearchFilterOption): void => {
+    setCurrentFilter(filter);
+    goToReset();
+  };
+
+  const handlePageChange = (page: number): void => {
+    if (page === currentPage || isLoading) return;
+    setPage(page);
+  };
+
+  return {
+    projects,
+    totalCount,
+    currentFilter,
+
+    currentPage,
+    totalPages,
+
+    isLoading,
+    isError,
+
+    handleSearch,
+    handlePageChange,
+  };
+};
+
+export default useProjectListPage;
diff --git a/src/entities/search/model/searchFilterBuilder.ts b/src/entities/search/model/searchFilterBuilder.ts
new file mode 100644
index 0000000..7d1b720
--- /dev/null
+++ b/src/entities/search/model/searchFilterBuilder.ts
@@ -0,0 +1,144 @@
+import {
+  query,
+  collection,
+  where,
+  orderBy,
+  limit,
+  startAfter,
+  type Query,
+  type QueryDocumentSnapshot,
+  type DocumentData,
+} from "firebase/firestore";
+
+import type { ProjectSearchFilterOption, SortBy } from "@entities/search/types";
+
+import { db } from "@shared/firebase/firebase";
+import type { FilterBuilder } from "@shared/types/firebase";
+import type {
+  ProjectCategory,
+  RecruitmentStatus,
+  Workflow,
+} from "@shared/types/project";
+import type { UserRole } from "@shared/types/user";
+
+export class SearchFilterBuilder implements FilterBuilder {
+  private filter: ProjectSearchFilterOption;
+  private baseQuery: Query;
+  private limitValue?: number;
+  private startAfterCursor?: QueryDocumentSnapshot<DocumentData>;
+
+  constructor(collectionName: string) {
+    this.baseQuery = query(collection(db, collectionName));
+    this.filter = {};
+  }
+
+  setTitle(title?: string): this {
+    if (title && title.trim()) {
+      this.filter.title = title.trim();
+    }
+    return this;
+  }
+
+  setCategory(category?: ProjectCategory | "all"): this {
+    if (category) {
+      this.filter.category = category;
+    }
+    return this;
+  }
+
+  setPosition(position?: UserRole | "all"): this {
+    if (position) {
+      this.filter.position = position;
+    }
+    return this;
+  }
+
+  setStatus(status?: RecruitmentStatus | "all"): this {
+    if (status) {
+      this.filter.status = status;
+    }
+    return this;
+  }
+
+  setWorkflow(workflow?: Workflow | "all"): this {
+    if (workflow) {
+      this.filter.workflow = workflow;
+    }
+    return this;
+  }
+
+  setSortBy(sortBy?: SortBy): this {
+    if (sortBy) {
+      this.filter.sortBy = sortBy;
+    }
+    return this;
+  }
+
+  addLimit(limitValue: number): this {
+    this.limitValue = limitValue;
+    return this;
+  }
+
+  addStartAfter(cursor: QueryDocumentSnapshot<DocumentData>): this {
+    this.startAfterCursor = cursor;
+    return this;
+  }
+
+  build(): Query {
+    let builtQuery: Query = this.baseQuery;
+
+    if (this.filter.title) {
+      const titleLower = this.filter.title.toLowerCase();
+      builtQuery = query(
+        builtQuery,
+        where("title", ">=", titleLower),
+        where("title", "<", titleLower + "\uf8ff")
+      );
+    }
+
+    if (this.filter.category) {
+      builtQuery = query(
+        builtQuery,
+        where("category", "==", this.filter.category)
+      );
+    }
+
+    if (this.filter.status) {
+      builtQuery = query(builtQuery, where("status", "==", this.filter.status));
+    }
+
+    if (this.filter.workflow) {
+      builtQuery = query(
+        builtQuery,
+        where("workflow", "==", this.filter.workflow)
+      );
+    }
+
+    if (this.filter.sortBy) {
+      switch (this.filter.sortBy) {
+        case "latest":
+          builtQuery = query(builtQuery, orderBy("createdAt", "desc"));
+          break;
+        case "deadline":
+          builtQuery = query(builtQuery, orderBy("closedDate", "asc"));
+          break;
+        case "applicants":
+          builtQuery = query(builtQuery, orderBy("applicants", "desc"));
+          break;
+        case "popularity":
+          builtQuery = query(builtQuery, orderBy("likedUsers", "desc"));
+          break;
+      }
+    }
+
+    if (this.startAfterCursor) {
+      builtQuery = query(builtQuery, startAfter(this.startAfterCursor));
+    }
+
+    if (this.limitValue) {
+      builtQuery = query(builtQuery, limit(this.limitValue));
+    }
+
+    return builtQuery;
+  }
+}
diff --git a/src/entities/search/model/searchOptions.ts b/src/entities/search/model/searchOptions.ts
new file mode 100644
index 0000000..2a297d2
--- /dev/null
+++ b/src/entities/search/model/searchOptions.ts
@@ -0,0 +1,31 @@
+import type { UserRole } from "@shared/types/user";
+
+export const POSITION_OPTIONS: { value: UserRole; label: string }[] = [
+  { value: "frontend", label: "프론트앤드" },
+  { value: "backend", label: "백엔드" },
+  { value: "fullstack", label: "풀스택" },
+  { value: "designer", label: "UI/UX 디자이너" },
+  { value: "pm", label: "PM" },
+];
+
+export const SEARCH_FORM_LABELS = {
+  CATEGORY: "🎯 프로젝트 분야",
+  POSITION: "👥 모집 포지션",
+  STATUS: "📢 모집 상태",
+  WORKFLOW: "🌍 진행 방식",
+  SORT: "📊 정렬 방식",
+} as const;
+
+export const DROPDOWN_DEFAULTS = {
+  ALL_CATEGORIES: "전체 카테고리",
+  ALL_POSITIONS: "전체 직무",
+  ALL_STATUS: "전체 상태",
+  ALL_REGIONS: "전체 지역",
+} as const;
+
+export const SORT_OPTIONS = {
+  LATEST: { value: "latest", label: "최신순" },
+  DEADLINE: { value: "deadline", label: "마감순" },
+  APPLICANTS: { value: "applicants", label: "지원자순" },
+  POPULARITY: { value: "popularity", label: "인기순" },
+} as const;
diff --git a/src/entities/search/model/selectFieldConfigs.ts b/src/entities/search/model/selectFieldConfigs.ts
new file mode 100644
index 0000000..d0045fb
--- /dev/null
+++ b/src/entities/search/model/selectFieldConfigs.ts
@@ -0,0 +1,73 @@
+import {
+  DROPDOWN_DEFAULTS,
+  POSITION_OPTIONS,
+  SEARCH_FORM_LABELS,
+  SORT_OPTIONS,
+} from "@entities/search/model/searchOptions";
+
+import {
+  ProjectCategory,
+  RecruitmentStatus,
+  Workflow,
+} from "@shared/types/project";
+
+export interface SelectFieldConfig {
+  label: string;
+  defaultValue: string;
+  options: { value: string; label: string }[];
+  fieldKey: string;
+}
+
+export const SELECT_FIELD_CONFIGS: Record<string, SelectFieldConfig> = {
+  category: {
+    label: SEARCH_FORM_LABELS.CATEGORY,
+    defaultValue: DROPDOWN_DEFAULTS.ALL_CATEGORIES,
+    options: [
+      { value: "all", label: DROPDOWN_DEFAULTS.ALL_CATEGORIES },
+      ...Object.values(ProjectCategory).map((category) => ({
+        value: category,
+        label: category,
+      })),
+    ],
+    fieldKey: "category",
+  },
+  position: {
+    label: SEARCH_FORM_LABELS.POSITION,
+    defaultValue: DROPDOWN_DEFAULTS.ALL_POSITIONS,
+    options: [
+      { value: "all", label: DROPDOWN_DEFAULTS.ALL_POSITIONS },
+      ...POSITION_OPTIONS,
+    ],
+    fieldKey: "position",
+  },
+  status: {
+    label: SEARCH_FORM_LABELS.STATUS,
+    defaultValue: DROPDOWN_DEFAULTS.ALL_STATUS,
+    options: [
+      { value: "all", label: DROPDOWN_DEFAULTS.ALL_STATUS },
+      ...Object.values(RecruitmentStatus).map((status) => ({
+        value: status,
+        label: status,
+      })),
+    ],
+    fieldKey: "status",
+  },
+  workflow: {
+    label: SEARCH_FORM_LABELS.WORKFLOW,
+    defaultValue: DROPDOWN_DEFAULTS.ALL_REGIONS,
+    options: [
+      { value: "all", label: DROPDOWN_DEFAULTS.ALL_REGIONS },
+      ...Object.values(Workflow).map((workflow) => ({
+        value: workflow,
+        label: workflow,
+      })),
+    ],
+    fieldKey: "workflow",
+  },
+  sortBy: {
+    label: SEARCH_FORM_LABELS.SORT,
+    defaultValue: SORT_OPTIONS.LATEST.label,
+    options: Object.values(SORT_OPTIONS),
+    fieldKey: "sortBy",
+  },
+};
diff --git a/src/entities/search/queries/useGetFilteredProjectLists.ts b/src/entities/search/queries/useGetFilteredProjectLists.ts
new file mode 100644
index 0000000..30f1691
--- /dev/null
+++ b/src/entities/search/queries/useGetFilteredProjectLists.ts
@@ -0,0 +1,95 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+import type { QueryDocumentSnapshot, DocumentData } from "firebase/firestore";
+
+import getFilteredProjectLists, {
+  getFilteredProjectListsSimple,
+  getFilteredProjectCount,
+  getFilteredProjectsByPage,
+} from "@entities/search/api/getFilteredProjectLists";
+import type { ProjectSearchFilterOption } from "@entities/search/types";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+interface PaginatedSearchOptions {
+  filter: ProjectSearchFilterOption;
+  cursor?: QueryDocumentSnapshot<DocumentData> | null;
+  pageSize?: number;
+}
+
+interface PaginatedSearchResult {
+  projects: ProjectListRes[];
+  lastVisible: QueryDocumentSnapshot<DocumentData> | null;
+  hasMore: boolean;
+}
+
+const useGetFilteredProjectLists = (
+  filter: ProjectSearchFilterOption,
+  enabled: boolean = true
+): UseQueryResult<ProjectListRes[], Error> => {
+  return useQuery({
+    queryKey: ["filteredProjects", filter],
+    queryFn: () => getFilteredProjectListsSimple("projects", filter),
+    enabled,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    placeholderData: (previousData) => previousData,
+  });
+};
+
+export const useGetFilteredProjectListsWithPagination = (
+  options: PaginatedSearchOptions,
+  enabled: boolean = true
+): UseQueryResult<PaginatedSearchResult, Error> => {
+  return useQuery({
+    queryKey: [
+      "filteredProjectsPaginated",
+      options.filter,
+      options.cursor,
+      options.pageSize,
+    ],
+    queryFn: () =>
+      getFilteredProjectLists("projects", options.filter, {
+        cursor: options.cursor,
+        pageSize: options.pageSize,
+      }),
+    enabled,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    placeholderData: (previousData) => previousData,
+  });
+};
+
+export const useGetFilteredProjectsCount = (
+  filter: ProjectSearchFilterOption,
+  enabled: boolean = true
+): UseQueryResult<number, Error> => {
+  return useQuery({
+    queryKey: ["filteredProjectsCount", filter],
+    queryFn: () => getFilteredProjectCount("projects", filter),
+    enabled,
+    staleTime: 10 * 60 * 1000,
+    gcTime: 15 * 60 * 1000,
+    placeholderData: (previousData) => previousData,
+  });
+};
+
+export const useGetFilteredProjectsByPage = (
+  filter: ProjectSearchFilterOption,
+  page: number,
+  pageSize: number = 6,
+  enabled: boolean = true
+): UseQueryResult<ProjectListRes[], Error> => {
+  return useQuery({
+    queryKey: ["filteredProjectsByPage", filter, page, pageSize],
+    queryFn: () =>
+      getFilteredProjectsByPage("projects", filter, page, pageSize),
+    enabled,
+    staleTime: 3 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    retry: 1,
+    placeholderData: (previousData) => previousData,
+  });
+};
+
+export default useGetFilteredProjectLists;
diff --git a/src/entities/search/types/index.ts b/src/entities/search/types/index.ts
new file mode 100644
index 0000000..7000be9
--- /dev/null
+++ b/src/entities/search/types/index.ts
@@ -0,0 +1,46 @@
+import type {
+  ProjectCategory,
+  RecruitmentStatus,
+  Workflow,
+} from "@shared/types/project";
+import type { UserRole } from "@shared/types/user";
+
+export type FilterOperator =
+  | "=="
+  | "!="
+  | "<"
+  | "<="
+  | ">"
+  | ">="
+  | "array-contains"
+  | "array-contains-any"
+  | "in"
+  | "not-in";
+
+export type FilterCondition = {
+  field: string;
+  operator: FilterOperator;
+  value: any;
+};
+
+export type SortOption = {
+  field: string;
+  direction: "asc" | "desc";
+};
+
+export type BaseFilterOption = {
+  conditions?: FilterCondition[];
+  sortBy?: SortOption[];
+  limit?: number;
+};
+
+export type ProjectSearchFilterOption = {
+  title?: string | "";
+  category?: ProjectCategory | "all";
+  position?: UserRole | "all";
+  status?: RecruitmentStatus | "all";
+  workflow?: Workflow | "all";
+  sortBy?: SortBy | "latest";
+};
+
+export type SortBy = "latest" | "deadline" | "applicants" | "popularity";
diff --git a/src/entities/search/ui/ProjectSearchForm.tsx b/src/entities/search/ui/ProjectSearchForm.tsx
new file mode 100644
index 0000000..d4e676b
--- /dev/null
+++ b/src/entities/search/ui/ProjectSearchForm.tsx
@@ -0,0 +1,369 @@
+import FilterListIcon from "@mui/icons-material/FilterList";
+import Search from "@mui/icons-material/Search";
+import TuneIcon from "@mui/icons-material/Tune";
+import {
+  Box,
+  Button,
+  TextField,
+  Paper,
+  alpha,
+  Typography,
+  Chip,
+  styled,
+  useMediaQuery,
+  useTheme,
+  Divider,
+} from "@mui/material";
+import type { JSX } from "react";
+
+import useFilteredProjects from "@entities/search/hooks/useFilteredProjects";
+import { SELECT_FIELD_CONFIGS } from "@entities/search/model/selectFieldConfigs";
+import type { ProjectSearchFilterOption } from "@entities/search/types";
+import ProjectSearchSelectBox from "@entities/search/ui/project-search-input/ProjectSearchSelectBox";
+
+interface ProjectSearchFormProps {
+  onSearch: (filter: ProjectSearchFilterOption) => void;
+  isLoading?: boolean;
+}
+
+const ProjectSearchForm = ({
+  onSearch,
+  isLoading = false,
+}: ProjectSearchFormProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const {
+    title,
+    category,
+    position,
+    status,
+    workflow,
+    sortBy,
+    updateTitle,
+    updateCategory,
+    updatePosition,
+    updateStatus,
+    updateWorkflow,
+    updateSortBy,
+    resetFilters,
+    getActiveFiltersCount,
+    getCleanFilter,
+  } = useFilteredProjects();
+
+  const activeFiltersCount = getActiveFiltersCount();
+
+  return (
+    <StyledContainer>
+      <HeaderSection>
+        <TitleArea>
+          <TextContainer>
+            <MainTitle variant={isMobile ? "h5" : "h4"}>
+              프로젝트 찾기
+            </MainTitle>
+            <SubTitle variant="body1">
+              원하는 조건으로 프로젝트를 검색하고 필터링하세요
+            </SubTitle>
+          </TextContainer>
+        </TitleArea>
+
+        <StatusArea>
+          {activeFiltersCount > 0 && (
+            <ActiveFiltersChip
+              icon={<FilterListIcon fontSize="small" />}
+              label={`${activeFiltersCount}개 활성 필터`}
+              size="medium"
+            />
+          )}
+          <ResetButton
+            variant="outlined"
+            startIcon={<TuneIcon fontSize="small" />}
+            onClick={resetFilters}
+            disabled={isLoading}
+          >
+            필터 초기화
+          </ResetButton>
+        </StatusArea>
+      </HeaderSection>
+
+      <SearchSection>
+        <SearchContainer>
+          <StyledTextField
+            fullWidth
+            label="프로젝트 제목 검색"
+            placeholder="어떤 프로젝트를 찾고 계신가요?"
+            value={title}
+            onChange={(e) => updateTitle(e.target.value)}
+            variant="outlined"
+            InputProps={{
+              startAdornment: <StyledSearchIcon />,
+            }}
+          />
+        </SearchContainer>
+      </SearchSection>
+
+      <FiltersSection>
+        <SectionHeader>
+          <SectionTitle variant="h6">상세 필터</SectionTitle>
+          <SectionDivider />
+        </SectionHeader>
+
+        <FiltersGrid>
+          <ProjectSearchSelectBox
+            config={SELECT_FIELD_CONFIGS.category}
+            value={category || "all"}
+            onChange={(value) => updateCategory(value as any)}
+          />
+
+          <ProjectSearchSelectBox
+            config={SELECT_FIELD_CONFIGS.position}
+            value={position || "all"}
+            onChange={(value) => updatePosition(value as any)}
+          />
+
+          <ProjectSearchSelectBox
+            config={SELECT_FIELD_CONFIGS.status}
+            value={status || "all"}
+            onChange={(value) => updateStatus(value as any)}
+          />
+
+          <ProjectSearchSelectBox
+            config={SELECT_FIELD_CONFIGS.workflow}
+            value={workflow || "all"}
+            onChange={(value) => updateWorkflow(value as any)}
+          />
+
+          <ProjectSearchSelectBox
+            config={SELECT_FIELD_CONFIGS.sortBy}
+            value={sortBy || "latest"}
+            onChange={(value) => updateSortBy(value as any)}
+          />
+        </FiltersGrid>
+      </FiltersSection>
+
+      <ActionSection>
+        <SearchButton
+          variant="contained"
+          size="large"
+          fullWidth={isMobile}
+          startIcon={<Search />}
+          onClick={() => onSearch(getCleanFilter())}
+          disabled={isLoading}
+        >
+          {isLoading ? "검색 중..." : "프로젝트 검색"}
+        </SearchButton>
+      </ActionSection>
+    </StyledContainer>
+  );
+};
+
+export default ProjectSearchForm;
+
+const StyledContainer = styled(Paper)(({ theme }) => ({
+  width: "100%",
+  borderRadius: theme.spacing(3),
+  overflow: "hidden",
+  marginBottom: theme.spacing(4),
+  backgroundColor: theme.palette.background.paper,
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.08)}`,
+  boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.04)}`,
+}));
+
+const HeaderSection = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "flex-start",
+  padding: theme.spacing(4),
+  backgroundColor: theme.palette.background.paper,
+
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+    gap: theme.spacing(3),
+    alignItems: "stretch",
+  },
+}));
+
+const TitleArea = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+}));
+
+const TextContainer = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+}));
+
+const MainTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 800,
+  color: theme.palette.text.primary,
+  letterSpacing: "-0.02em",
+}));
+
+const SubTitle = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontWeight: 500,
+}));
+
+const StatusArea = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(2),
+
+  [theme.breakpoints.down("md")]: {
+    justifyContent: "space-between",
+  },
+}));
+
+const ActiveFiltersChip = styled(Chip)(({ theme }) => ({
+  fontWeight: 600,
+  fontSize: "0.875rem",
+  height: 40,
+  backgroundColor: alpha(theme.palette.primary.main, 0.12),
+  color: theme.palette.primary.main,
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+
+  "& .MuiChip-icon": {
+    color: theme.palette.primary.main,
+  },
+}));
+
+const ResetButton = styled(Button)(({ theme }) => ({
+  height: 40,
+  fontWeight: 600,
+  borderRadius: theme.spacing(1.5),
+  borderColor: alpha(theme.palette.text.secondary, 0.3),
+  color: theme.palette.text.secondary,
+
+  "&:hover": {
+    borderColor: theme.palette.primary.main,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04),
+    color: theme.palette.primary.main,
+  },
+}));
+
+const SearchSection = styled(Box)(({ theme }) => ({
+  padding: `${theme.spacing(2)} ${theme.spacing(4)}`,
+  backgroundColor: theme.palette.background.paper,
+}));
+
+const SearchContainer = styled(Box)(() => ({
+  width: "100%",
+}));
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  "& .MuiOutlinedInput-root": {
+    borderRadius: theme.spacing(2),
+    fontSize: "1.6rem",
+    backgroundColor: theme.palette.background.paper,
+    transition: "all 0.2s ease-in-out",
+    padding: theme.spacing(0.5, 1.5),
+
+    "&:hover": {
+      boxShadow: `0 4px 20px ${alpha(theme.palette.primary.main, 0.08)}`,
+
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderColor: alpha(theme.palette.primary.main, 0.4),
+      },
+    },
+
+    "&.Mui-focused": {
+      boxShadow: `0 4px 24px ${alpha(theme.palette.primary.main, 0.12)}`,
+
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderColor: theme.palette.primary.main,
+        borderWidth: 2,
+      },
+    },
+  },
+
+  "& .MuiInputLabel-root": {
+    fontWeight: 700,
+    fontSize: "1.5rem",
+  },
+
+  "& .MuiOutlinedInput-input": {
+    fontSize: "1.5rem",
+    padding: theme.spacing(2.5),
+    fontWeight: 500,
+  },
+}));
+
+const StyledSearchIcon = styled(Search)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  marginRight: theme.spacing(1.5),
+  fontSize: "1.5rem",
+}));
+
+const FiltersSection = styled(Box)(({ theme }) => ({
+  padding: `0 ${theme.spacing(4)} ${theme.spacing(3)}`,
+  backgroundColor: theme.palette.background.paper,
+}));
+
+const SectionHeader = styled(Box)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: theme.spacing(3),
+  gap: theme.spacing(2),
+}));
+
+const SectionTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: 700,
+  color: theme.palette.text.primary,
+  flexShrink: 0,
+}));
+
+const SectionDivider = styled(Divider)(({ theme }) => ({
+  flex: 1,
+  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+}));
+
+const FiltersGrid = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
+  gap: theme.spacing(3),
+
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "repeat(3, 1fr)",
+  },
+
+  [theme.breakpoints.up("lg")]: {
+    gridTemplateColumns: "repeat(5, 1fr)",
+  },
+}));
+
+const ActionSection = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(4),
+  paddingTop: theme.spacing(2),
+  display: "flex",
+  justifyContent: "center",
+  backgroundColor: theme.palette.background.paper,
+}));
+
+const SearchButton = styled(Button)(({ theme }) => ({
+  minWidth: 240,
+  height: 56,
+  fontSize: "1.1rem",
+  fontWeight: 700,
+  borderRadius: theme.spacing(2),
+  background: `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.dark} 100%)`,
+  boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.3)}`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  textTransform: "none",
+
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: `0 12px 32px ${alpha(theme.palette.primary.main, 0.4)}`,
+    background: `linear-gradient(135deg, ${theme.palette.primary.dark} 0%, ${theme.palette.primary.main} 100%)`,
+  },
+
+  "&:active": {
+    transform: "translateY(0px)",
+  },
+
+  "&:disabled": {
+    transform: "none",
+    background: theme.palette.action.disabledBackground,
+    boxShadow: "none",
+  },
+}));
diff --git a/src/entities/search/ui/project-search-input/ProjectSearchSelectBox.tsx b/src/entities/search/ui/project-search-input/ProjectSearchSelectBox.tsx
new file mode 100644
index 0000000..f181c5f
--- /dev/null
+++ b/src/entities/search/ui/project-search-input/ProjectSearchSelectBox.tsx
@@ -0,0 +1,34 @@
+import { Select, InputLabel, FormControl, MenuItem } from "@mui/material";
+import type { JSX } from "react";
+import { memo } from "react";
+
+import type { SelectFieldConfig } from "@entities/search/model/selectFieldConfigs";
+
+interface ProjectSearchSelectBoxProps {
+  config: SelectFieldConfig;
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const ProjectSearchSelectBox = memo(
+  ({ config, value, onChange }: ProjectSearchSelectBoxProps): JSX.Element => {
+    return (
+      <FormControl fullWidth>
+        <InputLabel>{config.label}</InputLabel>
+        <Select
+          value={value || "all"}
+          label={config.label}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {config.options.map((option) => (
+            <MenuItem key={option.value} value={option.value}>
+              {option.label}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
+);
+
+export default ProjectSearchSelectBox;
diff --git a/src/entities/search/ui/project-search-input/StatusSelectField.tsx b/src/entities/search/ui/project-search-input/StatusSelectField.tsx
new file mode 100644
index 0000000..2ac06e1
--- /dev/null
+++ b/src/entities/search/ui/project-search-input/StatusSelectField.tsx
@@ -0,0 +1,45 @@
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import type { JSX } from "react";
+
+import {
+  DROPDOWN_DEFAULTS,
+  SEARCH_FORM_LABELS,
+} from "@entities/search/model/searchOptions";
+
+import { RecruitmentStatus } from "@shared/types/project";
+
+interface StatusSelectFieldProps {
+  value: RecruitmentStatus | "all";
+  onChange: (status: RecruitmentStatus | "all") => void;
+}
+
+const StatusSelectField = ({
+  value,
+  onChange,
+}: StatusSelectFieldProps): JSX.Element => {
+  return (
+    <FormControl fullWidth>
+      <InputLabel>{SEARCH_FORM_LABELS.STATUS}</InputLabel>
+      <Select
+        value={value}
+        label={SEARCH_FORM_LABELS.STATUS}
+        onChange={(e) =>
+          onChange(
+            e.target.value === "all"
+              ? "all"
+              : (e.target.value as RecruitmentStatus)
+          )
+        }
+      >
+        <MenuItem value="all">{DROPDOWN_DEFAULTS.ALL_STATUS}</MenuItem>
+        {Object.values(RecruitmentStatus).map((status) => (
+          <MenuItem key={status} value={status}>
+            {status}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default StatusSelectField;
diff --git a/src/entities/user/api/userApi.ts b/src/entities/user/api/userApi.ts
new file mode 100644
index 0000000..0538fe0
--- /dev/null
+++ b/src/entities/user/api/userApi.ts
@@ -0,0 +1,18 @@
+import { doc, setDoc, getDoc } from "firebase/firestore";
+
+import { db } from "@shared/firebase/firebase";
+import type { User } from "@shared/types/user";
+
+export const saveUser = async (uid: string, userInfo: User): Promise<void> => {
+  const userDoc = doc(db, "users", uid);
+  await setDoc(userDoc, userInfo);
+};
+
+export const getUser = async (uid: string): Promise<User | null> => {
+  const userDoc = doc(db, "users", uid);
+  const userSnap = await getDoc(userDoc);
+  if (userSnap.exists()) {
+    return userSnap.data() as User;
+  }
+  return null;
+};
diff --git a/src/entities/user/hooks/useSignUp.ts b/src/entities/user/hooks/useSignUp.ts
new file mode 100644
index 0000000..533673e
--- /dev/null
+++ b/src/entities/user/hooks/useSignUp.ts
@@ -0,0 +1,40 @@
+import { useNavigate } from "react-router-dom";
+
+import { saveUser } from "@entities/user/api/userApi";
+
+import { useAuthStore } from "@shared/stores/authStore";
+import type { UserInput } from "@shared/types/user";
+
+export const useSignUp = (): {
+  signUp: (userInput: UserInput) => Promise<void>;
+} => {
+  const navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+
+  const signUp = async (userInput: UserInput): Promise<void> => {
+    if (!user) return;
+
+    const { name, userRole, experience, introduceMyself } = userInput;
+
+    const finalIntroduceMyself =
+      (introduceMyself ?? "").trim() !== ""
+        ? introduceMyself
+        : "코딩하고 싶은 밤이에요~😘";
+
+    await saveUser(user.uid, {
+      id: user.uid,
+      name,
+      userRole,
+      experience,
+      email: user.email ?? "",
+      avatar: user.photoURL || "",
+      likeProjects: [],
+      appliedProjects: [],
+      introduceMyself: finalIntroduceMyself,
+    });
+
+    navigate("/");
+  };
+
+  return { signUp };
+};
diff --git a/src/entities/user/hooks/useSignUpForm.ts b/src/entities/user/hooks/useSignUpForm.ts
new file mode 100644
index 0000000..06e97ee
--- /dev/null
+++ b/src/entities/user/hooks/useSignUpForm.ts
@@ -0,0 +1,86 @@
+import { useState } from "react";
+
+import { useSignUp } from "@entities/user/hooks/useSignUp";
+
+import { useAuthStore } from "@shared/stores/authStore";
+import type { UserExperience, UserRole } from "@shared/types/user";
+
+// 반환 타입 정의
+interface UseSignUpFormReturn {
+  name: string;
+  userRole: string;
+  experience: string;
+  introduceMyself: string;
+  errors: { name: boolean; userRole: boolean; experience: boolean };
+  handleChange: (
+    field: "name" | "userRole" | "experience" | "introduceMyself"
+  ) => (value: string) => void;
+  handleSubmit: () => void;
+}
+
+export function useSignUpForm(): UseSignUpFormReturn {
+  const { signUp } = useSignUp();
+  const { user } = useAuthStore();
+  const defaultName = user?.displayName || "";
+
+  const [name, setName] = useState(defaultName);
+  const [userRole, setUserRole] = useState("");
+  const [experience, setExperience] = useState("");
+  const [introduceMyself, setIntroduceMyself] = useState("");
+  const [errors, setErrors] = useState({
+    name: false,
+    userRole: false,
+    experience: false,
+  });
+
+  const handleChange =
+    (field: "name" | "userRole" | "experience" | "introduceMyself") =>
+    (value: string) => {
+      switch (field) {
+        case "name":
+          setName(value);
+          if (errors.name) setErrors((prev) => ({ ...prev, name: false }));
+          break;
+        case "userRole":
+          setUserRole(value);
+          if (errors.userRole)
+            setErrors((prev) => ({ ...prev, userRole: false }));
+          break;
+        case "experience":
+          setExperience(value);
+          if (errors.experience)
+            setErrors((prev) => ({ ...prev, experience: false }));
+          break;
+        case "introduceMyself":
+          setIntroduceMyself(value);
+          break;
+      }
+    };
+
+  const handleSubmit = (): void => {
+    if (name === "" || userRole === "" || experience === "") {
+      setErrors({
+        name: name === "",
+        userRole: userRole === "",
+        experience: experience === "",
+      });
+      return;
+    }
+    signUp({
+      name,
+      userRole: userRole as UserRole,
+      experience: experience as UserExperience,
+      introduceMyself,
+    });
+  };
+
+  return {
+    name,
+    userRole,
+    experience,
+    introduceMyself,
+    errors,
+    handleChange,
+    handleSubmit,
+  };
+}
diff --git a/src/entities/user/ui/SubmitButton.tsx b/src/entities/user/ui/SubmitButton.tsx
new file mode 100644
index 0000000..83ad08e
--- /dev/null
+++ b/src/entities/user/ui/SubmitButton.tsx
@@ -0,0 +1,17 @@
+import { Button, styled } from "@mui/material";
+import type { JSX } from "react";
+
+const SubmitButton = ({ onClick }: { onClick: () => void }): JSX.Element => {
+  return <SignupButton onClick={onClick}>회원가입 완료</SignupButton>;
+};
+
+export default SubmitButton;
+
+const SignupButton = styled(Button)({
+  width: "100%",
+  marginBottom: "16px",
+  textTransform: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
diff --git a/src/entities/user/ui/UserInfoForm.tsx b/src/entities/user/ui/UserInfoForm.tsx
new file mode 100644
index 0000000..7342684
--- /dev/null
+++ b/src/entities/user/ui/UserInfoForm.tsx
@@ -0,0 +1,123 @@
+import {
+  Box,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+  FormControl,
+  FormHelperText,
+  InputLabel,
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { type JSX } from "react";
+
+import { useSignUpForm } from "@entities/user/hooks/useSignUpForm";
+import SubmitButton from "@entities/user/ui/SubmitButton";
+
+// import { useAuthStore } from "@shared/stores/authStore";
+
+const UserInfoForm = (): JSX.Element => {
+  const {
+    name,
+    userRole,
+    experience,
+    introduceMyself,
+    errors,
+    handleChange,
+    handleSubmit,
+  } = useSignUpForm();
+
+  return (
+    <FormContainer>
+      <Title variant="h5">회원 정보 입력</Title>
+      {/* 이름 입력 */}
+      <FormControl error={errors.name} variant="outlined" fullWidth>
+        <StyledTextField
+          label="🙋 닉네임 *"
+          variant="outlined"
+          value={name}
+          onChange={(e) => handleChange("name")(e.target.value)}
+          error={errors.name}
+          onFocus={() => errors.name && handleChange("name")(name)}
+          InputLabelProps={{ shrink: true }}
+        />
+        {errors.name && <ErrorText>이름을 입력해주세요.</ErrorText>}
+      </FormControl>
+      {/* 직무 선택 */}
+      <FormControl error={errors.userRole} variant="outlined" fullWidth>
+        <InputLabel shrink>👔 직무 *</InputLabel>
+        <StyledSelect
+          label="👔 직무 *"
+          value={userRole}
+          onChange={(e) => handleChange("userRole")(e.target.value as string)}
+          displayEmpty
+        >
+          <MenuItem value="">직무 선택</MenuItem>
+          <MenuItem value="frontend">프론트엔드</MenuItem>
+          <MenuItem value="backend">백엔드</MenuItem>
+          <MenuItem value="fullstack">풀스택</MenuItem>
+          <MenuItem value="designer">디자이너</MenuItem>
+          <MenuItem value="pm">PM</MenuItem>
+        </StyledSelect>
+        {errors.userRole && <ErrorText>직무를 선택해주세요.</ErrorText>}
+      </FormControl>
+      {/* 경력 선택 */}
+      <FormControl error={errors.experience} variant="outlined" fullWidth>
+        <InputLabel shrink>💼 경력 *</InputLabel>
+        <StyledSelect
+          label="💼 경력 *"
+          value={experience}
+          onChange={(e) => handleChange("experience")(e.target.value as string)}
+          displayEmpty
+        >
+          <MenuItem value="">경력 선택</MenuItem>
+          <MenuItem value="junior">주니어 (3년 이하)</MenuItem>
+          <MenuItem value="mid">미들 (3년 이상 10년 이하)</MenuItem>
+          <MenuItem value="senior">시니어 (10년 이상)</MenuItem>
+        </StyledSelect>
+        {errors.experience && <ErrorText>경력을 선택해주세요.</ErrorText>}
+      </FormControl>
+      <StyledTextField
+        label="💬 자기소개"
+        variant="outlined"
+        value={introduceMyself}
+        onChange={(e) => handleChange("introduceMyself")(e.target.value)}
+        placeholder="코딩하고 싶은 밤이에요~😘"
+        multiline
+        rows={4}
+        InputLabelProps={{ shrink: true }}
+      />
+      <SubmitButton onClick={handleSubmit} />
+    </FormContainer>
+  );
+};
+
+export default UserInfoForm;
+
+const FormContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: "16px",
+  width: "300px",
+  margin: "0 auto",
+});
+
+const Title = styled(Typography)({
+  textAlign: "center",
+  marginBottom: "16px",
+});
+
+const StyledTextField = styled(TextField)({
+  width: "100%",
+});
+
+const StyledSelect = styled(Select)({
+  width: "100%",
+});
+
+// 🔥 에러 메시지 커스텀
+const ErrorText = styled(FormHelperText)({
+  fontSize: "1.3rem",
+  color: "#f44336", // MUI 기본 error color
+  marginLeft: "14px",
+});
diff --git a/src/entities/user/ui/user-profile/EmptyProjectCard.tsx b/src/entities/user/ui/user-profile/EmptyProjectCard.tsx
new file mode 100644
index 0000000..d6afdc4
--- /dev/null
+++ b/src/entities/user/ui/user-profile/EmptyProjectCard.tsx
@@ -0,0 +1,98 @@
+import {
+  Typography,
+  Box,
+  Card,
+  CardContent,
+  Divider,
+  styled,
+} from "@mui/material";
+import type { JSX } from "react";
+
+import NavigateButton from "@shared/ui/NavigateButton";
+
+interface EmptyProjectCardProps {
+  message: string;
+}
+
+const EmptyProjectCard = ({ message }: EmptyProjectCardProps): JSX.Element => (
+  <StyledCard>
+    <StyledCardContent>
+      <Box
+        flex={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        minHeight={60}
+      >
+        <Typography variant="body1" color="text.secondary" align="center">
+          {message}
+        </Typography>
+      </Box>
+      <StyledDivider />
+      <Box
+        flex={1}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        minHeight={80}
+        gap={2}
+      >
+        <NavigateButton to="/project">프로젝트 찾기</NavigateButton>
+        <NavigateButton to="/project/insert">프로젝트 등록</NavigateButton>
+      </Box>
+    </StyledCardContent>
+  </StyledCard>
+);
+
+export default EmptyProjectCard;
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  height: "auto",
+  minHeight: 180,
+  maxWidth: 320,
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  border: `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(1.5, 1.5, 1.5, 1.5),
+
+  "&:hover": {
+    transform: "translateY(-0.4rem)",
+    boxShadow:
+      "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    borderColor: theme.palette.primary.light,
+  },
+
+  [theme.breakpoints.up("sm")]: {
+    flex: 1,
+    maxWidth: 340,
+    "&:hover": {
+      transform: "translateY(-0.6rem)",
+    },
+  },
+
+  [theme.breakpoints.up("md")]: {
+    maxWidth: 360,
+    maxHeight: 320,
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+  padding: theme.spacing(2),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+    padding: theme.spacing(2.5),
+  },
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: `${theme.spacing(0.8)} 0`,
+  backgroundColor: theme.palette.divider,
+}));
diff --git a/src/entities/user/ui/user-profile/ProjectTabPanel.tsx b/src/entities/user/ui/user-profile/ProjectTabPanel.tsx
new file mode 100644
index 0000000..211e191
--- /dev/null
+++ b/src/entities/user/ui/user-profile/ProjectTabPanel.tsx
@@ -0,0 +1,36 @@
+import { Box } from "@mui/material";
+import type { JSX } from "react";
+
+import type { ProjectListRes } from "@shared/types/project";
+import ProjectCard from "@shared/ui/ProjectCard";
+
+import EmptyProjectCard from "./EmptyProjectCard";
+
+interface ProjectTabPanelProps {
+  projects: ProjectListRes[];
+  emptyMessage: string;
+}
+
+const ProjectTabPanel = ({
+  projects,
+  emptyMessage,
+}: ProjectTabPanelProps): JSX.Element =>
+  projects && projects.length > 0 ? (
+    <Box
+      display="grid"
+      gridTemplateColumns={{
+        xs: "1fr",
+        sm: "repeat(2, 1fr)",
+        md: "repeat(3, 1fr)",
+      }}
+      gap={2}
+    >
+      {projects.slice(0, 3).map((project) => (
+        <ProjectCard key={project.id} project={project} simple />
+      ))}
+    </Box>
+  ) : (
+    <EmptyProjectCard message={emptyMessage} />
+  );
+
+export default ProjectTabPanel;
diff --git a/src/entities/user/ui/user-profile/TapWithBadge.tsx b/src/entities/user/ui/user-profile/TapWithBadge.tsx
new file mode 100644
index 0000000..c43cbfe
--- /dev/null
+++ b/src/entities/user/ui/user-profile/TapWithBadge.tsx
@@ -0,0 +1,37 @@
+import { Badge } from "@mui/material";
+import type { JSX } from "react";
+
+interface TabWithBadgeProps {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+  ProfileTabChip: any;
+}
+
+const TabWithBadge = ({
+  label,
+  count,
+  active,
+  onClick,
+  ProfileTabChip,
+}: TabWithBadgeProps): JSX.Element => (
+  <Badge
+    badgeContent={count}
+    color={active ? "primary" : "secondary"}
+    anchorOrigin={{ vertical: "top", horizontal: "right" }}
+    overlap="rectangular"
+    sx={{
+      "& .MuiBadge-badge": {
+        fontSize: "1.1rem",
+        fontWeight: 700,
+        minWidth: 24,
+        height: 24,
+      },
+    }}
+  >
+    <ProfileTabChip label={label} active={active} clickable onClick={onClick} />
+  </Badge>
+);
+
+export default TabWithBadge;
diff --git a/src/entities/user/ui/user-profile/UserProfileCard.tsx b/src/entities/user/ui/user-profile/UserProfileCard.tsx
new file mode 100644
index 0000000..71ec1b7
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileCard.tsx
@@ -0,0 +1,145 @@
+import SettingsIcon from "@mui/icons-material/Settings";
+import {
+  Box,
+  Avatar,
+  Typography,
+  Card,
+  CardContent,
+  IconButton,
+  Divider,
+} from "@mui/material";
+import { styled as muiStyled } from "@mui/material/styles";
+import type { JSX } from "react";
+
+import TabWithBadge from "./TapWithBadge";
+
+// Chip 컴포넌트는 상위에서 import해서 prop으로 넘겨야 함
+
+interface UserProfileCardProps {
+  userProfile: any;
+  PROFILE_TABS: { label: string; color: string }[];
+  likeProjects: any[];
+  appliedProjects: any[];
+  tab: number;
+  setTab: (idx: number) => void;
+  ProfileTabChip: any;
+}
+
+const userRoleMap: Record<string, string> = {
+  frontend: "프론트엔드",
+  backend: "백엔드",
+  fullstack: "풀스택",
+  designer: "디자이너",
+  pm: "PM",
+};
+const experienceMap: Record<string, string> = {
+  junior: "주니어 (3년 이하)",
+  mid: "미들 (3년 이상 10년 이하)",
+  senior: "시니어 (10년 이상)",
+};
+
+const UserProfileCard = ({
+  userProfile,
+  PROFILE_TABS,
+  likeProjects,
+  appliedProjects,
+  tab,
+  setTab,
+  ProfileTabChip,
+}: UserProfileCardProps): JSX.Element => {
+  return (
+    <ProfileCard>
+      <ProfileCardContent>
+        <ProfileCardHeader>
+          <IconButton size="small" aria-label="프로필 수정">
+            <SettingsIcon />
+          </IconButton>
+        </ProfileCardHeader>
+        <ProfileMainRow>
+          <ProfileAvatar src={userProfile.avatar} />
+          <ProfileInfoCol>
+            <Typography variant="h5" fontWeight={700}>
+              {userProfile.name}
+            </Typography>
+            <Typography>
+              {userRoleMap[userProfile.userRole] || userProfile.userRole}
+            </Typography>
+            <Typography>
+              {experienceMap[userProfile.experience] || userProfile.experience}
+            </Typography>
+          </ProfileInfoCol>
+        </ProfileMainRow>
+        <Box mt={2} width="100%">
+          <Typography>{userProfile.introduceMyself}</Typography>
+        </Box>
+        <Divider sx={{ my: 2 }} />
+        <ProfileEmail>{userProfile.email}</ProfileEmail>
+        <Box mt={2} display="flex" gap={1} justifyContent="center">
+          {PROFILE_TABS.map((tabInfo, idx) => (
+            <TabWithBadge
+              key={tabInfo.label}
+              label={tabInfo.label}
+              count={
+                idx === 0
+                  ? likeProjects?.length || 0
+                  : appliedProjects?.length || 0
+              }
+              active={tab === idx}
+              onClick={() => setTab(idx)}
+              ProfileTabChip={ProfileTabChip}
+            />
+          ))}
+        </Box>
+      </ProfileCardContent>
+    </ProfileCard>
+  );
+};
+
+export default UserProfileCard;
+
+// 스타일 컴포넌트 재사용
+const ProfileCard = muiStyled(Card)(({ theme }) => ({
+  minWidth: 280,
+  maxWidth: 320,
+  borderRadius: 12,
+  boxShadow: theme.shadows[2],
+  position: "relative",
+  padding: 0,
+}));
+const ProfileCardContent = muiStyled(CardContent)(({ theme }) => ({
+  padding: theme.spacing(3),
+  paddingBottom: "16px",
+  "&:last-child": {
+    paddingBottom: "16px",
+  },
+}));
+const ProfileCardHeader = muiStyled(Box)({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  marginBottom: 8,
+  minHeight: 32,
+});
+const ProfileMainRow = muiStyled(Box)({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 16,
+});
+const ProfileAvatar = muiStyled(Avatar)({
+  width: 100,
+  height: 100,
+  marginBottom: 0,
+});
+const ProfileInfoCol = muiStyled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+const ProfileEmail = muiStyled(Typography)(({ theme }) => ({
+  color: theme.palette.text.disabled,
+  fontSize: "0.95rem",
+  fontStyle: "italic",
+  fontWeight: 400,
+  marginTop: theme.spacing(1),
+}));
diff --git a/src/entities/user/ui/user-profile/UserProfileHeader.tsx b/src/entities/user/ui/user-profile/UserProfileHeader.tsx
new file mode 100644
index 0000000..270fb21
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileHeader.tsx
@@ -0,0 +1,49 @@
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface UserProfileHeaderProps {
+  title?: string;
+  backText?: string;
+  backTo?: string;
+}
+
+const UserProfileHeader = ({
+  title = "마이페이지",
+  backText = "홈으로 돌아가기",
+  backTo = "/",
+}: UserProfileHeaderProps): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <HeadBox>
+      <ClickSpan onClick={() => navigate(backTo)}>
+        <ArrowBackIcon fontSize="small" />
+        {backText}
+      </ClickSpan>
+      <span>/</span>
+      <TitleSpan>{title}</TitleSpan>
+    </HeadBox>
+  );
+};
+
+export default UserProfileHeader;
+
+const HeadBox = styled(Box)`
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  font-size: 14px;
+  gap: 8px;
+`;
+const ClickSpan = styled("span")`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+`;
+const TitleSpan = styled("span")`
+  font-size: 14px;
+  /* 필요시 font-weight, color 등 추가 */
+`;
diff --git a/src/entities/user/ui/user-profile/UserProfileProjectList.tsx b/src/entities/user/ui/user-profile/UserProfileProjectList.tsx
new file mode 100644
index 0000000..2fad7f8
--- /dev/null
+++ b/src/entities/user/ui/user-profile/UserProfileProjectList.tsx
@@ -0,0 +1,46 @@
+import { Box, Tabs, Tab } from "@mui/material";
+import type { JSX } from "react";
+
+import ProjectTabPanel from "@entities/user/ui/user-profile/ProjectTabPanel";
+
+import type { ProjectListRes } from "@shared/types/project";
+
+interface UserProfileProjectListProps {
+  PROFILE_TABS: { label: string; color: string }[];
+  tab: number;
+  setTab: (idx: number) => void;
+  likeProjects: ProjectListRes[];
+  appliedProjects: ProjectListRes[];
+}
+
+const UserProfileProjectList = ({
+  PROFILE_TABS,
+  tab,
+  setTab,
+  likeProjects,
+  appliedProjects,
+}: UserProfileProjectListProps): JSX.Element => {
+  return (
+    <Box flex={1}>
+      <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 3 }}>
+        {PROFILE_TABS.map((tabInfo, _idx) => (
+          <Tab key={tabInfo.label} label={tabInfo.label} />
+        ))}
+      </Tabs>
+      {tab === 0 && (
+        <ProjectTabPanel
+          projects={likeProjects}
+          emptyMessage="아직 관심 프로젝트가 없습니다."
+        />
+      )}
+      {tab === 1 && (
+        <ProjectTabPanel
+          projects={appliedProjects}
+          emptyMessage="아직 지원한 프로젝트가 없습니다."
+        />
+      )}
+    </Box>
+  );
+};
+
+export default UserProfileProjectList;
diff --git a/src/features/auth/hooks/useSocialLogin.ts b/src/features/auth/hooks/useSocialLogin.ts
new file mode 100644
index 0000000..beb08f4
--- /dev/null
+++ b/src/features/auth/hooks/useSocialLogin.ts
@@ -0,0 +1,63 @@
+import {
+  signInWithPopup,
+  fetchSignInMethodsForEmail,
+  getAdditionalUserInfo,
+} from "firebase/auth";
+import type { AuthProvider } from "firebase/auth";
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+import { auth } from "@shared/firebase/firebase";
+
+export const useSocialLogin = (): {
+  socialLogin: (provider: AuthProvider) => Promise<void>;
+} => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirect = searchParams.get("redirect") || "/";
+
+  const socialLogin = async (provider: AuthProvider): Promise<void> => {
+    try {
+      const result = await signInWithPopup(auth, provider);
+      const user = result.user;
+
+      console.log("소셜 로그인 성공: ", user);
+
+      // Firebase 신규 유저 여부 확인
+      const additionalInfo = getAdditionalUserInfo(result);
+      const isNewUser = additionalInfo?.isNewUser;
+
+      if (isNewUser) {
+        navigate("/signup");
+      } else {
+        navigate(redirect);
+      }
+    } catch (error: any) {
+      console.error("소셜 로그인 실패: ", error);
+
+      if (error.code !== "auth/account-exists-with-different-credential")
+        return;
+
+      const email = error.customData?.email;
+      if (!email) {
+        alert("이메일 정보를 가져올 수 없습니다.");
+        return;
+      }
+
+      const methods = await fetchSignInMethodsForEmail(auth, email);
+      if (methods.length === 0) {
+        alert("이미 다른 로그인 방법으로 가입된 이메일입니다.");
+        return;
+      }
+
+      if (methods.includes("google.com")) {
+        alert(
+          "이미 Google 계정으로 가입된 이메일입니다. Google 로그인을 이용해주세요."
+        );
+      } else {
+        alert(`이미 가입된 로그인 방법: ${methods.join(", ")}`);
+      }
+    }
+  };
+
+  return { socialLogin };
+};
diff --git a/src/features/auth/hooks/useUserProfile.ts b/src/features/auth/hooks/useUserProfile.ts
new file mode 100644
index 0000000..3038f9e
--- /dev/null
+++ b/src/features/auth/hooks/useUserProfile.ts
@@ -0,0 +1,13 @@
+import { useQuery, type UseQueryResult } from "@tanstack/react-query";
+
+import { getUser } from "@entities/user/api/userApi";
+
+import type { User } from "@shared/types/user";
+
+export function useUserProfile(uid: string): UseQueryResult<User | null> {
+  return useQuery<User | null>({
+    queryKey: ["userProfile", uid],
+    queryFn: () => getUser(uid),
+    enabled: !!uid, // uid가 있을 때만 쿼리 실행
+  });
+}
diff --git a/src/features/auth/ui/LoginButton.tsx b/src/features/auth/ui/LoginButton.tsx
new file mode 100644
index 0000000..89ed306
--- /dev/null
+++ b/src/features/auth/ui/LoginButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+const LoginButton = (): JSX.Element => {
+  const navigate = useNavigate();
+
+  return (
+    <Button variant="outlined" onClick={() => navigate("/login")}>
+      로그인
+    </Button>
+  );
+};
+
+export default LoginButton;
diff --git a/src/features/auth/ui/LoginForm.tsx b/src/features/auth/ui/LoginForm.tsx
new file mode 100644
index 0000000..3ad7540
--- /dev/null
+++ b/src/features/auth/ui/LoginForm.tsx
@@ -0,0 +1,30 @@
+import type { JSX } from "react";
+
+import { useSocialLogin } from "@features/auth/hooks/useSocialLogin";
+import { LoginTitle } from "@features/auth/ui/LoginTitle";
+import { SocialLoginButton } from "@features/auth/ui/SocialLoginButton";
+
+import { githubProvider, googleProvider } from "@shared/firebase/firebase";
+
+const LoginForm = (): JSX.Element => {
+  const { socialLogin } = useSocialLogin();
+
+  return (
+    <>
+      <LoginTitle />
+
+      <SocialLoginButton
+        label="Google로 로그인"
+        logo="https://developers.google.com/identity/images/g-logo.png"
+        onClick={() => socialLogin(googleProvider)}
+      />
+      <SocialLoginButton
+        label="GitHub로 로그인"
+        logo="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+        onClick={() => socialLogin(githubProvider)}
+      />
+    </>
+  );
+};
+
+export { LoginForm };
diff --git a/src/features/auth/ui/LoginTitle.tsx b/src/features/auth/ui/LoginTitle.tsx
new file mode 100644
index 0000000..37566c1
--- /dev/null
+++ b/src/features/auth/ui/LoginTitle.tsx
@@ -0,0 +1,17 @@
+import { Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const LoginTitle = (): JSX.Element => {
+  return (
+    <>
+      <Typography variant="h5" fontWeight={700} mb={3}>
+        로그인
+      </Typography>
+      <Typography variant="body2" mb={3} color="textSecondary">
+        소셜 계정으로 간편하게 시작하세요 ✨
+      </Typography>
+    </>
+  );
+};
+
+export { LoginTitle };
diff --git a/src/features/auth/ui/LogoutButton.tsx b/src/features/auth/ui/LogoutButton.tsx
new file mode 100644
index 0000000..8049c16
--- /dev/null
+++ b/src/features/auth/ui/LogoutButton.tsx
@@ -0,0 +1,23 @@
+import { Button } from "@mui/material";
+import { signOut } from "firebase/auth";
+import type { JSX } from "react";
+
+import { auth } from "@shared/firebase/firebase";
+import { useAuthStore } from "@shared/stores/authStore";
+
+const LogoutButton = (): JSX.Element => {
+  const logout = useAuthStore((state) => state.logout);
+
+  const handleLogout = async (): Promise<void> => {
+    await signOut(auth);
+    logout();
+  };
+
+  return (
+    <Button variant="outlined" onClick={handleLogout}>
+      로그아웃
+    </Button>
+  );
+};
+
+export default LogoutButton;
diff --git a/src/features/auth/ui/SocialLoginButton.tsx b/src/features/auth/ui/SocialLoginButton.tsx
new file mode 100644
index 0000000..ba902b4
--- /dev/null
+++ b/src/features/auth/ui/SocialLoginButton.tsx
@@ -0,0 +1,36 @@
+import { Button, styled } from "@mui/material";
+import type { JSX } from "react";
+
+interface SocialLoginButtonProps {
+  label: string;
+  logo: string;
+  onClick: () => void;
+}
+
+const SocialLoginButton = ({
+  label,
+  logo,
+  onClick,
+}: SocialLoginButtonProps): JSX.Element => {
+  return (
+    <SocialButton variant="outlined" onClick={onClick}>
+      <img
+        src={logo}
+        alt="Social Logo"
+        style={{ width: "18px", marginRight: "8px" }}
+      />
+      {label}
+    </SocialButton>
+  );
+};
+
+export { SocialLoginButton };
+
+const SocialButton = styled(Button)({
+  width: "100%",
+  marginBottom: "16px",
+  textTransform: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
diff --git a/src/features/projects/api/projectsApi.ts b/src/features/projects/api/projectsApi.ts
new file mode 100644
index 0000000..5c2c9b6
--- /dev/null
+++ b/src/features/projects/api/projectsApi.ts
@@ -0,0 +1,158 @@
+import {
+  addDoc,
+  collection,
+  doc,
+  serverTimestamp,
+  deleteDoc,
+  updateDoc,
+  arrayUnion,
+  arrayRemove,
+} from "firebase/firestore";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import { db } from "@shared/firebase/firebase";
+import type { ProjectItemInsertReq } from "@shared/types/project";
+
+/** firebase projects에 item 등록 */
+export const insertProjectItem = async (
+  projectItem: ProjectItemInsertReq
+): Promise<ApiResMessage> => {
+  try {
+    const postsRef = collection(db, "projects");
+    const docRef = await addDoc(postsRef, {
+      ...projectItem,
+      createdAt: serverTimestamp(),
+    });
+
+    return {
+      success: true,
+      message: "프로젝트가 성공적으로 등록되었습니다.",
+      id: docRef.id,
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      success: false,
+      message: "프로젝트 등록에 실패하였습니다.",
+    };
+  }
+};
+
+/** firebase projectsItem 삭제 */
+export const deleteProjectItem = async (id: string): Promise<ApiResMessage> => {
+  if (!window.confirm("정말로 삭제하시겠습니까?")) {
+    return { success: false, message: "" };
+  }
+
+  try {
+    const docRef = doc(db, "projects", id);
+    await deleteDoc(docRef);
+
+    return {
+      success: true,
+      message: "프로젝트를 정상적으로 삭제하였습니다.",
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      success: false,
+      message: "프로젝트 삭제에 실패하였습니다.",
+    };
+  }
+};
+
+/** firebase projectsItem(게시글) 수정 */
+export const updateProjectItem = async (): Promise<void> => {
+  return;
+};
+
+/**
+ *  프로젝트 지원하기
+ * projects - applicants에 uid 넣기
+ * user - appliedProjects에 projectID 넣기
+ *
+ *  프로젝트 좋아요
+ * projects - likedUsers uid 넣기
+ * user - likeProjects projectID 넣기
+ */
+const fleidMap = {
+  apply: {
+    projectField: "applicants",
+    userField: "appliedProjects",
+    successMessage: "지원이 완료되었습니다. 행운을 빌어요 🚀",
+  },
+  like: {
+    projectField: "likedUsers",
+    userField: "likeProjects",
+    successMessage: "",
+  },
+};
+
+export const updateApplyOrLike = async (
+  uid: string,
+  projectID: string,
+  type: "apply" | "like"
+): Promise<ApiResMessage> => {
+  const projecstRef = doc(db, "projects", projectID);
+  const usersRef = doc(db, "users", uid);
+
+  const { projectField, userField, successMessage } = fleidMap[type];
+
+  try {
+    const updateProject = updateDoc(projecstRef, {
+      [projectField]: arrayUnion(uid),
+    });
+    const updateUser = updateDoc(usersRef, {
+      [userField]: arrayUnion(projectID),
+    });
+
+    await Promise.all([updateProject, updateUser]);
+
+    return {
+      success: true,
+      message: successMessage,
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      success: false,
+      message: "실패하였습니다. 동작이 반복 될 시 관리자에게 문의 주세요.",
+    };
+  }
+};
+
+/**
+ * 프로젝트 좋아요 취소
+ * projects - likedUsers uid 빼기
+ * user - likeProjects projectID 빼기
+ */
+export const updateUnLike = async (
+  uid: string,
+  projectID: string
+): Promise<ApiResMessage> => {
+  const projecstRef = doc(db, "projects", projectID);
+  const usersRef = doc(db, "users", uid);
+
+  try {
+    const updateProject = updateDoc(projecstRef, {
+      likedUsers: arrayRemove(uid),
+    });
+    const updateUser = updateDoc(usersRef, {
+      likeProjects: arrayRemove(projectID),
+    });
+
+    await Promise.all([updateProject, updateUser]);
+
+    return {
+      success: true,
+      message: "",
+    };
+  } catch (err) {
+    console.log(err);
+    return {
+      success: false,
+      message: "실패하였습니다. 동작이 반복 될 시 관리자에게 문의 주세요.",
+    };
+  }
+};
diff --git a/src/features/projects/hook/useApplyFrom.tsx b/src/features/projects/hook/useApplyFrom.tsx
new file mode 100644
index 0000000..9bfe6f6
--- /dev/null
+++ b/src/features/projects/hook/useApplyFrom.tsx
@@ -0,0 +1,53 @@
+import { useState, type ChangeEvent } from "react";
+
+import useProjectApply from "@features/projects/queries/useProjectApply";
+
+interface ApplyFormResult {
+  openForm: {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+  };
+  message: {
+    value: string;
+    update: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  };
+  submit: () => void;
+}
+
+const useApplyFrom = (projectID: string): ApplyFormResult => {
+  const { mutate: updateApply } = useProjectApply();
+
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [applyMessage, setApplyMessage] = useState("");
+
+  const openForm = (): void => setIsFormOpen(true);
+  const closeForm = (): void => setIsFormOpen(false);
+
+  const updateApplyMessage = (e: ChangeEvent<HTMLTextAreaElement>): void =>
+    setApplyMessage(e.target.value);
+
+  const submit = (): void => {
+    if (!projectID) return;
+    if (!applyMessage.trim()) {
+      alert("메세지를 적어주세요");
+      return;
+    }
+    updateApply(projectID);
+  };
+
+  return {
+    openForm: {
+      isOpen: isFormOpen,
+      open: openForm,
+      close: closeForm,
+    },
+    message: {
+      value: applyMessage,
+      update: updateApplyMessage,
+    },
+    submit,
+  };
+};
+
+export default useApplyFrom;
diff --git a/src/features/projects/hook/useLike.tsx b/src/features/projects/hook/useLike.tsx
new file mode 100644
index 0000000..1b70ae6
--- /dev/null
+++ b/src/features/projects/hook/useLike.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+
+import useProjectLike from "@features/projects/queries/useProjectLike";
+import useProjectUnLike from "@features/projects/queries/useProjectUnLike";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+interface LikeResult {
+  isLike: boolean;
+  like: () => void;
+  unlike: () => void;
+}
+
+const useLike = ({
+  projectID,
+  likedUsers,
+}: {
+  projectID: string;
+  likedUsers: string[];
+}): LikeResult => {
+  const user = useAuthStore((state) => state.user);
+  const { mutate: updateLike, isPending: likePending } = useProjectLike();
+  const { mutate: updateUnLike, isPending: unLikePending } = useProjectUnLike();
+
+  const initLike = user && likedUsers.includes(user.uid);
+  const [isLike, setIsLike] = useState(initLike || false);
+
+  const like = (): void => {
+    if (!projectID) return;
+    if (likePending || unLikePending) {
+      alert("동작이 너무 빠릅니다. 잠시 후에 시도해주십시오.");
+      return;
+    }
+    setIsLike(true);
+    updateLike(projectID);
+  };
+
+  const unlike = (): void => {
+    if (!projectID) return;
+    if (likePending || unLikePending) {
+      alert("동작이 너무 빠릅니다. 잠시 후에 시도해주십시오.");
+      return;
+    }
+    setIsLike(false);
+    updateUnLike(projectID);
+  };
+
+  return {
+    isLike,
+    like,
+    unlike,
+  };
+};
+
+export default useLike;
diff --git a/src/features/projects/hook/useProjectInsertForm.ts b/src/features/projects/hook/useProjectInsertForm.ts
new file mode 100644
index 0000000..71d129c
--- /dev/null
+++ b/src/features/projects/hook/useProjectInsertForm.ts
@@ -0,0 +1,133 @@
+import { Timestamp } from "firebase/firestore";
+import { useState } from "react";
+
+import useProjectInsert from "@features/projects/queries/useProjectInsert";
+
+import {
+  ProjectCategory,
+  RecruitmentStatus,
+  Workflow,
+  type ProjectItemInsertReq,
+} from "@shared/types/project";
+import { ExpectedPeriod } from "@shared/types/schedule";
+import { UserExperience } from "@shared/types/user";
+
+// 이하 InitData 개선 예정
+type Setp1Type = Pick<
+  ProjectItemInsertReq,
+  "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
+>;
+
+interface InsertFormResult {
+  form: {
+    step1: Setp1Type;
+  };
+  page: {
+    currentStep: number;
+    goPrev: () => void;
+    goNext: () => void;
+  };
+  submit: () => Promise<void>;
+}
+
+const useProjectInsertForm = (): InsertFormResult => {
+  const { mutate: insertItem, isPending } = useProjectInsert();
+
+  const [currentStep, setCurrentStep] = useState(1);
+  // const [formStep1, setFormStep1] = useState<Setp1Type>(initForm1);
+
+  const handlePrev = (): void => setCurrentStep((prev) => prev - 1);
+  const handleNext = (): void => setCurrentStep((prev) => prev + 1);
+
+  const submit = async (): Promise<void> => {
+    if (!window.confirm("등록을 완료 하시겠습니까?")) return;
+    if (isPending) return;
+    // form 검사 추가 바람
+    insertItem(TestData);
+  };
+
+  return {
+    form: {
+      step1: initForm1,
+    },
+    page: {
+      currentStep: currentStep,
+      goPrev: handlePrev,
+      goNext: handleNext,
+    },
+    submit,
+  };
+};
+
+export default useProjectInsertForm;
+
+const initForm1 = {
+  title: "",
+  oneLineInfo: "",
+  category: ProjectCategory.webDevelopment,
+  closedDate: Timestamp.now(),
+  simpleInfo: "",
+};
+
+// 테스트용 form 입니다.
+const TestData: ProjectItemInsertReq = {
+  projectOwner: {
+    id: "user1234",
+    name: "홍길동",
+    userRole: "frontend",
+    email: "test@test.com",
+    experience: UserExperience.junior,
+    avatar: "https://via.placeholder.com/150",
+  },
+  applicants: [],
+  status: RecruitmentStatus.recruiting,
+  title: "AI 기반 음악 추천 서비스 개발",
+  oneLineInfo: "AI로 사용자 취향을 분석하는 음악 추천 프로젝트입니다.",
+  simpleInfo: "음악 취향 데이터를 기반으로 개인화 추천 시스템을 구현합니다.",
+  techStack: ["React", "Node.js", "Python", "TensorFlow", "MongoDB"],
+  teamSize: 5,
+  expectedPeriod: ExpectedPeriod.threeMonths,
+  description:
+    "이 프로젝트는 사용자의 음악 청취 데이터를 수집하여, AI 알고리즘을 통해 개인화된 추천 서비스를 제공하는 웹 앱을 개발하는 것이 목표입니다.",
+  workflow: Workflow.online,
+  requirements: [
+    "주 2회 이상 정기 미팅 참석 가능",
+    "기본적인 Git 사용 경험",
+    "성실한 커뮤니케이션",
+  ],
+  preferentialTreatment: [
+    "음악 도메인에 관심 있는 분",
+    "TensorFlow 사용 경험",
+    "UX/UI에 관심 있는 프론트엔드 개발자",
+  ],
+  positions: [
+    {
+      position: "frontend",
+      count: 2,
+      experience: ExpectedPeriod.oneMonth,
+      applicants: [],
+    },
+    {
+      position: "frontend",
+      count: 5,
+      experience: ExpectedPeriod.threeMonths,
+      applicants: [],
+    },
+    {
+      position: "frontend",
+      count: 6,
+      experience: ExpectedPeriod.fourMonths,
+      applicants: [],
+    },
+  ],
+  schedules: [
+    {
+      stageName: "기획",
+      period: ExpectedPeriod.oneMonth,
+      description: "기획 단계",
+    },
+  ],
+  likedUsers: [],
+  category: ProjectCategory.webDevelopment,
+  closedDate: Timestamp.now(),
+};
diff --git a/src/features/projects/queries/useProjectApply.ts b/src/features/projects/queries/useProjectApply.ts
new file mode 100644
index 0000000..b8c06bc
--- /dev/null
+++ b/src/features/projects/queries/useProjectApply.ts
@@ -0,0 +1,34 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+import { updateApplyOrLike } from "@features/projects/api/projectsApi";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+const useProjectApply = (): UseMutationResult<ApiResMessage, Error, string> => {
+  const Navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+
+  return useMutation({
+    mutationFn: (projectID: string) => {
+      if (!user) {
+        throw new Error("로그인을 해주세요.");
+      }
+      return updateApplyOrLike(user.uid, projectID, "apply");
+    },
+    onSuccess: (data) => {
+      // 지원 완료 후 프로필로 이동
+      alert(data.message);
+      if (data.success) {
+        Navigate("/profile");
+      }
+    },
+    onError: (err) => {
+      alert(err);
+      console.log(err);
+    },
+  });
+};
+export default useProjectApply;
diff --git a/src/features/projects/queries/useProjectDelete.ts b/src/features/projects/queries/useProjectDelete.ts
new file mode 100644
index 0000000..4457292
--- /dev/null
+++ b/src/features/projects/queries/useProjectDelete.ts
@@ -0,0 +1,45 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+import { deleteProjectItem } from "@features/projects/api/projectsApi";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+interface IDsType {
+  postID: string;
+  projectOwnerID: string;
+}
+
+const useProjectDelete = (): UseMutationResult<
+  ApiResMessage,
+  Error,
+  IDsType
+> => {
+  const Navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+
+  return useMutation({
+    mutationFn: ({ postID, projectOwnerID }: IDsType) => {
+      if (user?.uid !== projectOwnerID) {
+        throw new Error("삭제 권한이 없습니다.");
+      }
+      return deleteProjectItem(postID);
+    },
+    onSuccess: (data) => {
+      if (data.message) {
+        alert(data.message);
+      }
+      // 게시글 삭제 후 목록페이지로 이동
+      if (data.success) {
+        Navigate("/project");
+      }
+    },
+    onError: (err) => {
+      alert(err || "정상적으로 삭제되지 않았습니다.");
+      console.log(err);
+    },
+  });
+};
+export default useProjectDelete;
diff --git a/src/features/projects/queries/useProjectInsert.ts b/src/features/projects/queries/useProjectInsert.ts
new file mode 100644
index 0000000..75091c7
--- /dev/null
+++ b/src/features/projects/queries/useProjectInsert.ts
@@ -0,0 +1,39 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+
+import { insertProjectItem } from "@features/projects/api/projectsApi";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import { useAuthStore } from "@shared/stores/authStore";
+import type { ProjectItemInsertReq } from "@shared/types/project";
+
+const useProjectInsert = (): UseMutationResult<
+  ApiResMessage,
+  Error,
+  ProjectItemInsertReq
+> => {
+  const Navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+
+  return useMutation({
+    mutationFn: (projectItem: ProjectItemInsertReq) => {
+      if (!user) {
+        throw new Error("로그인을 해주세요.");
+      }
+      return insertProjectItem(projectItem);
+    },
+    onSuccess: (data) => {
+      // 게시글 등록 후 본인 게시글로 이동
+      if (data.success && data.id) {
+        alert("게시글이 등록 되었습니다.");
+        Navigate(`/project/${data.id}`);
+      }
+    },
+    onError: (err) => {
+      alert(err || "게시글이 정상적으로 등록되지 않았습니다.");
+      console.log(err);
+    },
+  });
+};
+export default useProjectInsert;
diff --git a/src/features/projects/queries/useProjectLike.ts b/src/features/projects/queries/useProjectLike.ts
new file mode 100644
index 0000000..70591be
--- /dev/null
+++ b/src/features/projects/queries/useProjectLike.ts
@@ -0,0 +1,34 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+
+import { updateApplyOrLike } from "@features/projects/api/projectsApi";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import queryClient from "@shared/react-query/queryClient";
+import { useAuthStore } from "@shared/stores/authStore";
+
+const useProjectLike = (): UseMutationResult<ApiResMessage, Error, string> => {
+  const user = useAuthStore((state) => state.user);
+
+  return useMutation({
+    mutationFn: (projectID: string) => {
+      if (!user) {
+        throw new Error("로그인을 해주세요.");
+      }
+      return updateApplyOrLike(user.uid, projectID, "like");
+    },
+    onSuccess: (data, projectID) => {
+      if (data.success) {
+        queryClient.invalidateQueries({
+          queryKey: ["project-detail", projectID],
+        });
+        return;
+      }
+    },
+    onError: (err) => {
+      alert(err);
+      console.log(err);
+    },
+  });
+};
+export default useProjectLike;
diff --git a/src/features/projects/queries/useProjectUnLike.ts b/src/features/projects/queries/useProjectUnLike.ts
new file mode 100644
index 0000000..1794717
--- /dev/null
+++ b/src/features/projects/queries/useProjectUnLike.ts
@@ -0,0 +1,38 @@
+import { useMutation, type UseMutationResult } from "@tanstack/react-query";
+
+import { updateUnLike } from "@features/projects/api/projectsApi";
+
+import type { ApiResMessage } from "@entities/projects/types/firebase";
+
+import queryClient from "@shared/react-query/queryClient";
+import { useAuthStore } from "@shared/stores/authStore";
+
+const useProjectUnLike = (): UseMutationResult<
+  ApiResMessage,
+  Error,
+  string
+> => {
+  const user = useAuthStore((state) => state.user);
+
+  return useMutation({
+    mutationFn: (projectID: string) => {
+      if (!user) {
+        throw new Error("로그인을 해주세요.");
+      }
+      return updateUnLike(user.uid, projectID);
+    },
+    onSuccess: (data, projectID) => {
+      if (data.success) {
+        queryClient.invalidateQueries({
+          queryKey: ["project-detail", projectID],
+        });
+        return;
+      }
+    },
+    onError: (err) => {
+      alert(err);
+      console.log(err);
+    },
+  });
+};
+export default useProjectUnLike;
diff --git a/src/features/projects/ui/ProjectApplyForm.tsx b/src/features/projects/ui/ProjectApplyForm.tsx
new file mode 100644
index 0000000..9506b3f
--- /dev/null
+++ b/src/features/projects/ui/ProjectApplyForm.tsx
@@ -0,0 +1,111 @@
+import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+import { useParams } from "react-router-dom";
+
+import useApplyFrom from "@features/projects/hook/useApplyFrom";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+const ProjectApplyForm = ({
+  applicants,
+}: {
+  applicants: string[];
+}): JSX.Element => {
+  const { id } = useParams();
+  const user = useAuthStore((state) => state.user);
+  const { openForm, message, submit } = useApplyFrom(id || "");
+
+  if (user && applicants.includes(user?.uid || "")) {
+    return (
+      <MessageBtn className="done">
+        <Typography>지원완료</Typography>
+      </MessageBtn>
+    );
+  }
+
+  /* 지원하기 폼 닫혀있을 때 */
+  if (!openForm.isOpen) {
+    return (
+      <MessageBtn className="apply" onClick={openForm.open}>
+        <RocketLaunchIcon />
+        <Typography>지원하기 🚀</Typography>
+      </MessageBtn>
+    );
+  }
+
+  /* 지원하기 폼 열려 있을 때 */
+  return (
+    <>
+      <Typography variant="body2" fontWeight={500}>
+        지원 메세지
+      </Typography>
+
+      <ApplyTextarea
+        value={message.value}
+        onChange={message.update}
+        placeholder="자기소개와 프로젝트에 기여할 수 있는 부분을 작성해주세요! 열정적인 메세지를 기다리고 있어요 🔥"
+      />
+
+      <Box display={"flex"} gap={1}>
+        <MessageBtn onClick={openForm.close}>
+          <Typography>취소</Typography>
+        </MessageBtn>
+        <MessageBtn className="apply" onClick={submit}>
+          <Typography>지원하기</Typography>
+        </MessageBtn>
+      </Box>
+    </>
+  );
+};
+
+export default ProjectApplyForm;
+
+const ApplyTextarea = styled("textarea")`
+  width: 100%;
+  height: 10rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  font-size: 14px;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  resize: vertical;
+  outline: 0;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+
+  &:focus {
+    border-color: #858585;
+  }
+`;
+
+const MessageBtn = styled(Box)`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  gap: 8px;
+  border-radius: 4px;
+  border: 1px solid #dddddd;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+
+  &.apply {
+    background: linear-gradient(to bottom right, #666df2, #9134ea);
+    border: 0;
+    color: white;
+    &:hover {
+      background: linear-gradient(to bottom right, #474dc0, #7324bd);
+    }
+  }
+
+  &.done {
+    cursor: default;
+    color: #858585;
+    background-color: #f0f0f0;
+  }
+`;
diff --git a/src/features/projects/ui/ProjectDelete.tsx b/src/features/projects/ui/ProjectDelete.tsx
new file mode 100644
index 0000000..6608695
--- /dev/null
+++ b/src/features/projects/ui/ProjectDelete.tsx
@@ -0,0 +1,45 @@
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+import { useParams } from "react-router-dom";
+
+import useProjectDelete from "@features/projects/queries/useProjectDelete";
+
+const ProjectDelete = ({
+  projectOwnerID,
+}: {
+  projectOwnerID: string;
+}): JSX.Element => {
+  const { id: postID } = useParams();
+  const { mutate: projectdelete, isPending } = useProjectDelete();
+
+  const handleDeleteBtn = (): void => {
+    if (postID && !isPending) {
+      projectdelete({ postID, projectOwnerID });
+    }
+  };
+
+  return (
+    <MessageBtn onClick={handleDeleteBtn}>
+      <Typography>삭제</Typography>
+    </MessageBtn>
+  );
+};
+
+export default ProjectDelete;
+
+const MessageBtn = styled(Box)`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  border-radius: 4px;
+  color: white;
+  background-color: tomato;
+  transition: background-color 0.3s ease;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #e14b30;
+  }
+`;
diff --git a/src/features/projects/ui/ProjectLike.tsx b/src/features/projects/ui/ProjectLike.tsx
new file mode 100644
index 0000000..d722906
--- /dev/null
+++ b/src/features/projects/ui/ProjectLike.tsx
@@ -0,0 +1,77 @@
+import type { JSX } from "@emotion/react/jsx-runtime";
+import FavoriteBorderIcon from "@mui/icons-material/FavoriteBorder";
+import FavoriteOutlinedIcon from "@mui/icons-material/FavoriteOutlined";
+import ShareIcon from "@mui/icons-material/Share";
+import { Box, styled } from "@mui/material";
+import { useParams } from "react-router-dom";
+
+import useLike from "@features/projects/hook/useLike";
+
+import { getStatusClassname } from "@shared/libs/utils/projectDetail";
+import type { ProjectListRes } from "@shared/types/project";
+
+type ProjectLikeType = Pick<ProjectListRes, "status" | "likedUsers">;
+
+const ProjectLike = ({ values }: { values: ProjectLikeType }): JSX.Element => {
+  const { id } = useParams();
+  const { like, unlike, isLike } = useLike({
+    projectID: id || "",
+    likedUsers: values.likedUsers,
+  });
+
+  return (
+    <Box display="flex" alignItems="center" justifyContent="space-between">
+      <StatusBox className={getStatusClassname(values.status)}>
+        {values.status}
+      </StatusBox>
+
+      <Box display="flex">
+        <HeadIconBox>
+          {isLike ? (
+            <FavoriteOutlinedIcon color="error" onClick={unlike} />
+          ) : (
+            <FavoriteBorderIcon onClick={like} />
+          )}
+        </HeadIconBox>
+        <HeadIconBox>
+          <ShareIcon />
+        </HeadIconBox>
+      </Box>
+    </Box>
+  );
+};
+export default ProjectLike;
+
+const HeadIconBox = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3rem;
+  padding: 0.5rem 1rem;
+  margin-left: 10px;
+  border: 1px solid #dddddd;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+`;
+
+const StatusBox = styled("div")`
+  padding: 0.5rem 1.2rem;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  color: white;
+  border-radius: 50px;
+
+  &.ing {
+    background-color: black;
+  }
+  &.done {
+    background-color: ${({ theme }) => theme.palette.primary.main};
+  }
+`;
diff --git a/src/features/projects/ui/project-insert/PageNaviBtn.tsx b/src/features/projects/ui/project-insert/PageNaviBtn.tsx
new file mode 100644
index 0000000..f8b16cc
--- /dev/null
+++ b/src/features/projects/ui/project-insert/PageNaviBtn.tsx
@@ -0,0 +1,48 @@
+import { Box, Button, styled } from "@mui/material";
+import type { JSX } from "react";
+
+const PageNaviBtn = ({
+  currentStep,
+  handlePrev,
+  handleNext,
+  handleSubmit, // type=submit 버튼이 노출될 때 submit이 실행되는 오류가 있어서 임시로 ..
+}: {
+  currentStep: number;
+  handlePrev: () => void;
+  handleNext: () => void;
+  handleSubmit: () => void;
+}): JSX.Element => {
+  return (
+    <Box display="flex" justifyContent="space-between" mt={4}>
+      {currentStep === 1 ? (
+        <div />
+      ) : (
+        <PrevBtn variant="outlined" onClick={handlePrev}>
+          이전 단계
+        </PrevBtn>
+      )}
+
+      {currentStep < 4 ? (
+        <Button variant="contained" onClick={handleNext}>
+          다음 단계 →
+        </Button>
+      ) : (
+        <Button onClick={handleSubmit} variant="contained">
+          프로젝트 등록하기
+        </Button>
+      )}
+    </Box>
+  );
+};
+
+export default PageNaviBtn;
+
+const PrevBtn = styled(Button)`
+  color: black;
+  background-color: white;
+  border: 1px solid #dddddd;
+
+  &:hover {
+    background-color: #f4f4f4;
+  }
+`;
diff --git a/src/features/projects/ui/project-insert/Step1.tsx b/src/features/projects/ui/project-insert/Step1.tsx
new file mode 100644
index 0000000..c40bf88
--- /dev/null
+++ b/src/features/projects/ui/project-insert/Step1.tsx
@@ -0,0 +1,76 @@
+import { Box, styled, useMediaQuery, useTheme } from "@mui/material";
+import type { JSX } from "react";
+
+import ProjectCategoryCard from "@entities/projects/ui/project-insert/ProjectCategoryCard";
+import ProjectDeadlineCard from "@entities/projects/ui/project-insert/ProjectDeadlineCard";
+import ProjectOneLineCard from "@entities/projects/ui/project-insert/ProjectOneLineCard";
+import ProjectSimpleDescCard from "@entities/projects/ui/project-insert/ProjectSimpleDescCard";
+import ProjectTitleCard from "@entities/projects/ui/project-insert/ProjectTitleCard";
+
+import { formatDate } from "@shared/libs/utils/projectDetail";
+import type { ProjectItemInsertReq } from "@shared/types/project";
+
+type SetpType = Pick<
+  ProjectItemInsertReq,
+  "title" | "oneLineInfo" | "category" | "closedDate" | "simpleInfo"
+>;
+
+const Step1 = ({ form }: { form: SetpType }): JSX.Element => {
+  const theme = useTheme();
+  const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
+
+  const handleChange = (): void => {};
+
+  return (
+    <StepBox>
+      <ProjectTitleCard
+        value={form.title}
+        onChange={handleChange}
+        large
+        style={{ gridColumn: "span 1" }}
+      />
+      <ProjectOneLineCard
+        value={form.oneLineInfo}
+        onChange={handleChange}
+        large
+        style={{ gridColumn: "span 1" }}
+      />
+      {/* category의 type이 enum이라 콘솔에 경고가 뜹니다 */}
+      <ProjectCategoryCard
+        value={form.category}
+        onChange={handleChange}
+        large
+        style={{ gridColumn: "span 1" }}
+      />
+      <ProjectDeadlineCard
+        value={formatDate(form.closedDate)}
+        onChange={handleChange}
+        large
+        style={{ gridColumn: "span 1" }}
+      />
+      <ProjectSimpleDescCard
+        value={form.simpleInfo}
+        onChange={handleChange}
+        large
+        // ??
+        style={{ gridColumn: isMdDown ? "span 1" : "1 / -1" }}
+      />
+    </StepBox>
+  );
+};
+
+export default Step1;
+
+export const StepBox = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr", // 기본값(xs)
+
+  gap: theme.spacing(2), // 기본값(sm 이하)
+
+  marginBottom: 0,
+
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "1fr 1fr",
+    gap: theme.spacing(4),
+  },
+}));
diff --git a/src/features/projects/ui/project-insert/Step2.tsx b/src/features/projects/ui/project-insert/Step2.tsx
new file mode 100644
index 0000000..6fdd06d
--- /dev/null
+++ b/src/features/projects/ui/project-insert/Step2.tsx
@@ -0,0 +1,20 @@
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+
+const Step2 = (): JSX.Element => {
+  return <StepBox>Step2</StepBox>;
+};
+
+export default Step2;
+
+export const StepBox = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr", // 기본값(xs)
+  gap: theme.spacing(2), // 기본값(sm 이하)
+  marginBottom: 0,
+
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "1fr 1fr",
+    gap: theme.spacing(4),
+  },
+}));
diff --git a/src/features/projects/ui/project-insert/Step3.tsx b/src/features/projects/ui/project-insert/Step3.tsx
new file mode 100644
index 0000000..3c3bc43
--- /dev/null
+++ b/src/features/projects/ui/project-insert/Step3.tsx
@@ -0,0 +1,20 @@
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+
+const Step3 = (): JSX.Element => {
+  return <StepBox>Step3</StepBox>;
+};
+
+export default Step3;
+
+export const StepBox = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr", // 기본값(xs)
+  gap: theme.spacing(2), // 기본값(sm 이하)
+  marginBottom: 0,
+
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "1fr 1fr",
+    gap: theme.spacing(4),
+  },
+}));
diff --git a/src/features/projects/ui/project-insert/Step4.tsx b/src/features/projects/ui/project-insert/Step4.tsx
new file mode 100644
index 0000000..b03c4e8
--- /dev/null
+++ b/src/features/projects/ui/project-insert/Step4.tsx
@@ -0,0 +1,20 @@
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+
+const Step4 = (): JSX.Element => {
+  return <StepBox>Step4</StepBox>;
+};
+
+export default Step4;
+
+export const StepBox = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr", // 기본값(xs)
+  gap: theme.spacing(2), // 기본값(sm 이하)
+  marginBottom: 0,
+
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "1fr 1fr",
+    gap: theme.spacing(4),
+  },
+}));
diff --git a/src/pages/home/ui/HomePage.tsx b/src/pages/home/ui/HomePage.tsx
new file mode 100644
index 0000000..81afb70
--- /dev/null
+++ b/src/pages/home/ui/HomePage.tsx
@@ -0,0 +1,82 @@
+import { Box, Container, styled } from "@mui/material";
+import type { JSX } from "react";
+
+import Hero from "@widgets/hero/ui/Hero";
+
+import useGetProjects from "@entities/projects/hook/useGetProjects";
+import ProjectCard from "@entities/projects/ui/projects-card/ProjectCard";
+import ProjectsStats from "@entities/projects/ui/projects-stats/ProjectsStats";
+
+const HomePage = (): JSX.Element => {
+  console.log("API_KEY: ", import.meta.env.VITE_API_KEY);
+  const { data: projects } = useGetProjects({ pageSize: 3 });
+
+  return (
+    <MainContainer>
+      <HeroContainer>
+        <Hero />
+      </HeroContainer>
+      <ProjectStatsContainer>
+        <ProjectsStats />
+      </ProjectStatsContainer>
+      <ProjectCardContainer>
+        {projects?.projects.map((project) => (
+          <ProjectCard key={project.id} project={project} />
+        ))}
+      </ProjectCardContainer>
+    </MainContainer>
+  );
+};
+
+export default HomePage;
+
+const MainContainer = styled(Container)(({ theme }) => ({
+  flexGrow: 1,
+  minHeight: "100vh",
+  backgroundColor: theme.palette.background.default,
+}));
+
+const HeroContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: theme.palette.background.default,
+  padding: "2rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    padding: "4rem 2rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: "6rem 2.4rem",
+  },
+}));
+
+const ProjectStatsContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: "3.2rem",
+  justifyContent: "center",
+  padding: "2rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    flexDirection: "row",
+    padding: "4rem 2rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: "6rem 2.4rem",
+  },
+}));
+
+const ProjectCardContainer = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "1fr",
+  gap: "1.6rem",
+  padding: "2rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+    padding: "4rem 2rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
+    padding: "6rem 2.4rem",
+  },
+}));
diff --git a/src/pages/login/ui/LoginPage.tsx b/src/pages/login/ui/LoginPage.tsx
new file mode 100644
index 0000000..8461f08
--- /dev/null
+++ b/src/pages/login/ui/LoginPage.tsx
@@ -0,0 +1,46 @@
+import { Box, Typography, styled } from "@mui/material";
+import type { JSX } from "react";
+
+import BackToHome from "@widgets/BackToHome/BackToHome";
+
+import { LoginForm } from "@features/auth/ui/LoginForm";
+
+const LoginPage = (): JSX.Element => {
+  console.log("API_KEY: ", import.meta.env.VITE_API_KEY);
+  return (
+    <PageWrapper>
+      <Typography variant="h3" fontWeight={700} mb={1} color="#4F46E5B">
+        ⚡ 프로젝트 잼
+      </Typography>
+      <Typography variant="body1" mb={6} color="textSecondary">
+        함께 만들어가는 사이드 프로젝트
+      </Typography>
+
+      <LoginBox>
+        <LoginForm />
+      </LoginBox>
+      <BackToHome />
+    </PageWrapper>
+  );
+};
+
+export default LoginPage;
+
+const PageWrapper = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  backgroundColor: "#f5f7fb",
+});
+
+const LoginBox = styled(Box)({
+  width: "100%",
+  maxWidth: "400px",
+  padding: "32px",
+  borderRadius: "12px",
+  backgroundColor: "#fff",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  textAlign: "center",
+});
diff --git a/src/pages/not-found/ui/NotFoundPage.tsx b/src/pages/not-found/ui/NotFoundPage.tsx
new file mode 100644
index 0000000..1961601
--- /dev/null
+++ b/src/pages/not-found/ui/NotFoundPage.tsx
@@ -0,0 +1,16 @@
+import type { JSX } from "react";
+import { Link } from "react-router-dom";
+
+const NotFoundPage = (): JSX.Element => {
+  return (
+    <div style={{ textAlign: "center", padding: "2rem" }}>
+      <h1>404 - 페이지를 찾을 수 없습니다</h1>
+      <p>요청하신 페이지가 존재하지 않습니다.</p>
+      <Link to="/" style={{ color: "#007bff", textDecoration: "underline" }}>
+        홈으로 돌아가기
+      </Link>
+    </div>
+  );
+};
+
+export default NotFoundPage;
diff --git a/src/pages/project-detail/ui/ProjectDetailPage.tsx b/src/pages/project-detail/ui/ProjectDetailPage.tsx
new file mode 100644
index 0000000..ba68425
--- /dev/null
+++ b/src/pages/project-detail/ui/ProjectDetailPage.tsx
@@ -0,0 +1,155 @@
+import { Box, Card, Container, styled } from "@mui/material";
+import { type JSX } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+
+import ProjectApplyForm from "@features/projects/ui/ProjectApplyForm";
+import ProjectDelete from "@features/projects/ui/ProjectDelete";
+import ProjectLike from "@features/projects/ui/ProjectLike";
+
+import useProjectsItem from "@entities/projects/queries/useProjectsItem";
+import ProjectApply from "@entities/projects/ui/post-info/ProjectApply";
+import ProjectLeader from "@entities/projects/ui/post-info/ProjectLeader";
+import ProjectPostInfo from "@entities/projects/ui/post-info/ProjectPostInfo";
+import ProjectDescription from "@entities/projects/ui/projects-detail/ProjectDescription";
+import DetailHeader from "@entities/projects/ui/projects-detail/ProjectHeader";
+import ProjectInfo from "@entities/projects/ui/projects-detail/ProjectInfo";
+import ProjectPositions from "@entities/projects/ui/projects-detail/ProjectPositions";
+import ProjectRequirements from "@entities/projects/ui/projects-detail/ProjectRequirements";
+import ProjectSchedule from "@entities/projects/ui/projects-detail/ProjectSchedule";
+import TechStack from "@entities/projects/ui/projects-detail/TechStack";
+
+import { useAuthStore } from "@shared/stores/authStore";
+import type { RecruitmentStatus } from "@shared/types/project";
+
+const ProjectDetailPage = (): JSX.Element | null => {
+  const { id } = useParams();
+  const Navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+  const {
+    data: project,
+    isLoading,
+    isError,
+  } = useProjectsItem({ id: id || null });
+
+  const projectLikeValues = {
+    status: (project?.status as RecruitmentStatus) || "모집중",
+    likedUsers: project?.likedUsers || [],
+  };
+
+  const projectInfoValues = !project
+    ? null
+    : {
+        title: project.title,
+        teamSize: project.teamSize,
+        workflow: project.workflow,
+        simpleInfo: project.simpleInfo,
+        closedDate: project.closedDate,
+        oneLineInfo: project.oneLineInfo,
+        expectedPeriod: project.expectedPeriod,
+      };
+
+  const techStackValues = {
+    techStack: project?.techStack || [],
+  };
+
+  const descriptionlValues = {
+    description: project?.description || "",
+  };
+
+  const positionsValues = {
+    positions: project?.positions || [],
+  };
+
+  const schedulesValues = {
+    schedules: project?.schedules || [],
+  };
+
+  const requirementsValues = {
+    requirements: project?.requirements || [],
+    preferentialTreatment: project?.preferentialTreatment || [],
+  };
+
+  const postInfoValues = !project
+    ? null
+    : {
+        createdAt: project.createdAt,
+        applicants: project.applicants,
+        likedUsers: project.likedUsers,
+      };
+
+  if (isLoading) {
+    return <div>로딩중</div>;
+  }
+  if (!project || isError) {
+    Navigate("/error");
+    return null;
+  }
+  return (
+    <MainContainer>
+      <DetailHeader title={project?.title || ""} />
+
+      <CardContainer>
+        <Box flex={3}>
+          <CardBox>
+            <ProjectLike values={projectLikeValues} />
+            <ProjectInfo values={projectInfoValues} />
+          </CardBox>
+          <CardBox>
+            <TechStack {...techStackValues} />
+          </CardBox>
+          <CardBox>
+            <ProjectDescription {...descriptionlValues} />
+          </CardBox>
+          <CardBox>
+            <ProjectPositions {...positionsValues} />
+          </CardBox>
+          <CardBox>
+            <ProjectSchedule {...schedulesValues} />
+          </CardBox>
+          <CardBox>
+            <ProjectRequirements {...requirementsValues} />
+          </CardBox>
+        </Box>
+
+        <Box flex={1.5}>
+          <CardBox>
+            <ProjectLeader projectOwner={project?.projectOwner} />
+          </CardBox>
+          <CardBox>
+            <ProjectApply applicants={project.applicants.length} />
+            {user?.uid === project.projectOwner.id ? (
+              <ProjectDelete projectOwnerID={project?.projectOwner.id} />
+            ) : (
+              <ProjectApplyForm applicants={project?.applicants || []} />
+            )}
+          </CardBox>
+          <CardBox>
+            <ProjectPostInfo values={postInfoValues} />
+          </CardBox>
+        </Box>
+      </CardContainer>
+    </MainContainer>
+  );
+};
+
+export default ProjectDetailPage;
+
+const MainContainer = styled(Container)(({ theme }) => ({
+  flexGrow: 1,
+  minHeight: "100vh",
+  backgroundColor: theme.palette.background.default,
+}));
+
+const CardContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  gap: "2rem",
+
+  [theme.breakpoints.down("md")]: {
+    flexDirection: "column",
+  },
+}));
+
+const CardBox = styled(Card)`
+  padding: 2rem;
+  margin-bottom: 2rem;
+`;
diff --git a/src/pages/project-insert/ui/HoneyTipBox.tsx b/src/pages/project-insert/ui/HoneyTipBox.tsx
new file mode 100644
index 0000000..5bf1588
--- /dev/null
+++ b/src/pages/project-insert/ui/HoneyTipBox.tsx
@@ -0,0 +1,77 @@
+import { Box, styled } from "@mui/material";
+import type { JSX } from "react";
+
+import TextWithEmoji from "@shared/ui/project-insert/TextWithEmoji";
+
+// Typography에 fontSize={number}은 적용되지 않으므로 삭제하엿습니다.
+// 스타일이 반복되어 사용되고 있기에 공통 컴포넌트로 만들어 재사용하였습니다.
+
+const HoneyTipBox = (): JSX.Element => {
+  return (
+    <TipBox>
+      <TextWithEmoji
+        emoji="💡"
+        emoji_label="lightbulb"
+        mainText="꿀팁 모음집"
+      />
+
+      <Box
+        display="flex"
+        flexWrap="wrap"
+        gap={4}
+        mt={3}
+        flexDirection={{ xs: "column", sm: "row" }}
+      >
+        <Box flex={1}>
+          <TextWithEmoji
+            emoji="🎯"
+            emoji_label="dart"
+            mainText="구체적인 계획을 세우세요"
+            subText="일정과 역할이 명확할수록 좋은 팀원을 만날 수 있어요"
+          />
+          <TextWithEmoji
+            emoji="🤝"
+            emoji_label="handshake"
+            mainText="초보자도 환영해요"
+            subText="경험보다 열정이 더 중요할 때가 많아요"
+          />
+        </Box>
+        <Box flex={1}>
+          <TextWithEmoji
+            emoji="💬"
+            emoji_label="chat"
+            mainText="소통 방식 미리 정하기"
+            subText="언제, 어떻게 만날지 미리 정해두면 좋아요"
+          />
+          <TextWithEmoji
+            emoji="🎉"
+            emoji_label="fun"
+            mainText="재미있게 표현하기"
+            subText="딱딱한 설명보다 재미있는 설명이 더 매력적이에요"
+          />
+        </Box>
+      </Box>
+    </TipBox>
+  );
+};
+
+export default HoneyTipBox;
+
+// 해당 Box는 부모의 MainContainer 밖으로 넘어가지 않으므로 MaxWidth, marginX 설정을 제거하였습니다.
+const TipBox = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(6), // default spacing이 8px ... 라고 하네요
+  backgroundColor: "#fffbe6",
+  border: "1.5px solid #ffe6a0",
+  borderRadius: theme.spacing(1),
+  padding: theme.spacing(3),
+  paddingLeft: theme.spacing(1),
+  paddingRight: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  [theme.breakpoints.up("md")]: {
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(3),
+  },
+}));
diff --git a/src/pages/project-insert/ui/ProjectInsertPage.tsx b/src/pages/project-insert/ui/ProjectInsertPage.tsx
new file mode 100644
index 0000000..abd0b33
--- /dev/null
+++ b/src/pages/project-insert/ui/ProjectInsertPage.tsx
@@ -0,0 +1,59 @@
+import type { CSSObject } from "@emotion/react";
+import { Container } from "@mui/material";
+import type { ContainerProps } from "@mui/material/Container";
+import type { Theme } from "@mui/material/styles";
+import { styled } from "@mui/material/styles";
+import type { JSX } from "react";
+
+import HoneyTipBox from "@pages/project-insert/ui/HoneyTipBox";
+import StepBox from "@pages/project-insert/ui/StepBox";
+import TopTitle from "@pages/project-insert/ui/TopTitle";
+
+import useProjectInsert from "@features/projects/hook/useProjectInsertForm";
+import PageNaviBtn from "@features/projects/ui/project-insert/PageNaviBtn";
+import Step1 from "@features/projects/ui/project-insert/Step1";
+import Step2 from "@features/projects/ui/project-insert/Step2";
+import Step3 from "@features/projects/ui/project-insert/Step3";
+import Step4 from "@features/projects/ui/project-insert/Step4";
+
+const ProjectInsertPage = (): JSX.Element => {
+  const { form, page, submit } = useProjectInsert();
+
+  return (
+    <MainContainer>
+      {/* 상단 타이틀/설명 */}
+      <TopTitle />
+
+      {/* 스텝바 */}
+      <StepBox currentStep={page.currentStep} />
+
+      {/* Step별 컴포넌트 */}
+      {page.currentStep === 1 && <Step1 form={form.step1} />}
+      {page.currentStep === 2 && <Step2 />}
+      {page.currentStep === 3 && <Step3 />}
+      {page.currentStep === 4 && <Step4 />}
+
+      {/* 네비게이션 버튼 */}
+      <PageNaviBtn
+        currentStep={page.currentStep}
+        handlePrev={page.goPrev}
+        handleNext={page.goNext}
+        handleSubmit={submit}
+      />
+
+      {/* 꿀팁 모음집 */}
+      <HoneyTipBox />
+    </MainContainer>
+  );
+};
+
+export default ProjectInsertPage;
+
+const MainContainer = styled(Container)<ContainerProps>(
+  ({ theme }: { theme: Theme }): CSSObject => ({
+    flexGrow: 1,
+    minHeight: "100vh",
+    padding: "3rem",
+    backgroundColor: theme.palette.background.default,
+  })
+);
diff --git a/src/pages/project-insert/ui/StepBox.tsx b/src/pages/project-insert/ui/StepBox.tsx
new file mode 100644
index 0000000..0ef745d
--- /dev/null
+++ b/src/pages/project-insert/ui/StepBox.tsx
@@ -0,0 +1,64 @@
+import { Box, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+// 현재는 setps를 객체로 된 배열로 관리하지만 단순한 스타일의 반복이니
+// JS로 탐색 후 뿌려주는 것 보단 공통 스타일 컴포넌트를 생성하여 구성하는 것이 더 좋아보입니다!
+// 추후에 여유가 될 때 리팩토링 해주시면 좋을거같습니다 ~
+const steps = [
+  { id: 1, title: "기본 정보" },
+  { id: 2, title: "팀 구성" },
+  { id: 3, title: "프로젝트 계획" },
+  { id: 4, title: "모집 조건" },
+];
+
+// 스타일이 많아 코드 가독성 + 추후 재사용성을 고려하여 styled 컴포넌트로 빼내었습니다.
+// 이렇게 하면 굳이 PRIMARY를 변수로 선언하지 않아도 theme에 저장된 색상을 불러올 수 있씁니다!
+// key는 배열의 idx로 설정해 두었으며(가장 간단)
+// '->'를 표시하기위한 삼항연산자도 간결하게 수정하였습니다
+// 여기 또한 Typography에 fontSize={number} 설정은 적용되지 않으므로 삭제하엿습니다
+
+const StepBox = ({ currentStep }: { currentStep: number }): JSX.Element => {
+  return (
+    <Box display="flex" justifyContent="center" gap={4} mb={5}>
+      {steps.map((step, idx) => (
+        <Box key={idx} display="flex" alignItems="center">
+          <StepNumber active={currentStep === step.id}>{step.id}</StepNumber>
+          <StepName active={currentStep === step.id}>{step.title}</StepName>
+          {idx !== 3 && (
+            <Box color="#bbb" fontSize={22}>
+              →
+            </Box>
+          )}
+        </Box>
+      ))}
+    </Box>
+  );
+};
+
+export default StepBox;
+
+const StepNumber = styled(Box, {
+  //  active prop은 DOM에 전달되지 않도록 shouldForwardProp 필수
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: boolean }>(({ active, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 38,
+  height: 38,
+  fontSize: 18,
+  fontWeight: 700,
+  color: active ? "#fff" : "#888",
+  background: active ? theme.palette.primary.main : "#e0e7ef",
+  borderRadius: "50%",
+  border: `2px solid ${active ? theme.palette.primary.main : "#e0e7ef"}`,
+}));
+
+const StepName = styled(Typography, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{ active: boolean }>(({ active, theme }) => ({
+  marginLeft: theme.spacing(1),
+  marginRight: theme.spacing(1),
+  fontWeight: active ? 700 : 500,
+  color: active ? theme.palette.primary.main : "#888",
+}));
diff --git a/src/pages/project-insert/ui/TopTitle.tsx b/src/pages/project-insert/ui/TopTitle.tsx
new file mode 100644
index 0000000..617025f
--- /dev/null
+++ b/src/pages/project-insert/ui/TopTitle.tsx
@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+// Box: maxWidth={700} mx="auto" 설정이 불필요하여 삭제히였습니다.
+// Typography 엔 fontSize 설정이 적용되지 않아 삭제하였습니다.
+const TopTitle = (): JSX.Element => {
+  return (
+    <Box pb={2} textAlign="center">
+      <Typography variant="h3" fontWeight={800} mb={1} color="#222">
+        같이 할 사람 구해요! 🚀
+      </Typography>
+      <Typography variant="h6" color="#555" mb={0.5}>
+        멋진 아이디어가 있다면 팀원을 모집해보세요
+      </Typography>
+      <Typography color="#888">
+        혼자서는 힘들어도 함께라면 뭐든 할 수 있어요!
+      </Typography>
+    </Box>
+  );
+};
+
+export default TopTitle;
diff --git a/src/pages/project-list/ui/ProjectListPage.tsx b/src/pages/project-list/ui/ProjectListPage.tsx
new file mode 100644
index 0000000..f4c35cc
--- /dev/null
+++ b/src/pages/project-list/ui/ProjectListPage.tsx
@@ -0,0 +1,161 @@
+import { Box, Typography, Container, styled } from "@mui/material";
+import { type JSX } from "react";
+
+import ProjectCard from "@entities/projects/ui/projects-card/ProjectCard";
+import useProjectListPage from "@entities/search/hooks/useProjectListPage";
+import ProjectSearchForm from "@entities/search/ui/ProjectSearchForm";
+
+import LoadingSpinner from "@shared/ui/loading-spinner/LoadingSpinner";
+import Pagination from "@shared/ui/pagination";
+
+const ProjectListPage = (): JSX.Element => {
+  const {
+    projects,
+    totalCount,
+    currentPage,
+    totalPages,
+    isLoading,
+    isError,
+    handleSearch,
+    handlePageChange,
+  } = useProjectListPage();
+
+  return (
+    <MainContainer>
+      <SearchContainer>
+        <ProjectSearchForm onSearch={handleSearch} isLoading={isLoading} />
+      </SearchContainer>
+
+      {isLoading && (
+        <LoadingContainer>
+          <LoadingSpinner />
+        </LoadingContainer>
+      )}
+
+      {!isLoading && (
+        <ResultsContainer>
+          <ResultsHeader variant="h6">
+            📊 전체 프로젝트: 총 {totalCount}개{" "}
+            {totalPages > 1 && `(${currentPage}/${totalPages} 페이지)`}
+          </ResultsHeader>
+
+          {projects.length > 0 ? (
+            <>
+              <ProjectListContainer>
+                {projects.map((project) => (
+                  <ProjectCard key={project.id} project={project} />
+                ))}
+              </ProjectListContainer>
+
+              {totalPages > 1 && (
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={handlePageChange}
+                  disabled={isLoading}
+                />
+              )}
+            </>
+          ) : (
+            <EmptyState variant="body1">
+              조건에 맞는 프로젝트가 없습니다. 다른 조건으로 검색해보세요.
+            </EmptyState>
+          )}
+        </ResultsContainer>
+      )}
+
+      {isError && (
+        <ErrorContainer>
+          <ErrorText variant="body1">
+            데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해주세요.
+          </ErrorText>
+        </ErrorContainer>
+      )}
+    </MainContainer>
+  );
+};
+
+export default ProjectListPage;
+
+const MainContainer = styled(Container)(({ theme }) => ({
+  flexGrow: 1,
+  minHeight: "100vh",
+  backgroundColor: theme.palette.background.default,
+}));
+
+const SearchContainer = styled(Box)(({ theme }) => ({
+  padding: "0rem 0rem 2rem",
+  [theme.breakpoints.up("sm")]: {
+    padding: "0rem 2rem 3rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: "0rem 2.4rem 4rem",
+  },
+}));
+
+const ResultsContainer = styled(Box)(({ theme }) => ({
+  padding: "1rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    padding: "2rem 2rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: "3rem 2.4rem",
+  },
+}));
+
+const ResultsHeader = styled(Typography)(({ theme }) => ({
+  fontWeight: 600,
+  color: theme.palette.text.primary,
+  marginBottom: "2rem",
+}));
+
+const ProjectListContainer = styled(Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  gap: "1.6rem",
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+  },
+  [theme.breakpoints.up("md")]: {
+    gridTemplateColumns: "repeat(auto-fill, minmax(350px, 1fr))",
+  },
+  [theme.breakpoints.up("lg")]: {
+    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+  },
+}));
+
+const EmptyState = styled(Typography)(({ theme }) => ({
+  textAlign: "center",
+  color: theme.palette.text.secondary,
+  padding: "4rem 0",
+  fontWeight: 500,
+}));
+
+const LoadingContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "4rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    padding: "6rem 2rem",
+  },
+  [theme.breakpoints.up("md")]: {
+    padding: "8rem 2.4rem",
+  },
+}));
+
+const ErrorContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: "4rem 0rem",
+  [theme.breakpoints.up("sm")]: {
+    padding: "6rem 2rem",
+  },
+}));
+
+const ErrorText = styled(Typography)(({ theme }) => ({
+  textAlign: "center",
+  color: theme.palette.error.main,
+  fontWeight: 500,
+}));
diff --git a/src/pages/signup/ui/SignUpPage.tsx b/src/pages/signup/ui/SignUpPage.tsx
new file mode 100644
index 0000000..f79e6e9
--- /dev/null
+++ b/src/pages/signup/ui/SignUpPage.tsx
@@ -0,0 +1,42 @@
+import { Box, Paper, styled, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+import BackToHome from "@widgets/BackToHome/BackToHome";
+
+import UserInfoForm from "@entities/user/ui/UserInfoForm";
+
+const SignUpPage = (): JSX.Element => {
+  return (
+    <PageContainer>
+      <Typography variant="h4" mb={2}>
+        회원가입
+      </Typography>
+      <Typography variant="body1" mb={3}>
+        정보를 입력하고 새로운 여정을 시작해보세요! 🚀
+      </Typography>
+      <FormCard elevation={3}>
+        <UserInfoForm />
+      </FormCard>
+      <BackToHome />
+    </PageContainer>
+  );
+};
+
+export default SignUpPage;
+
+const PageContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100vh",
+  backgroundColor: "#f5f5f5",
+});
+
+const FormCard = styled(Paper)({
+  padding: "32px",
+  width: "400px",
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+});
diff --git a/src/pages/user-profile/ui/UserProfilePage.tsx b/src/pages/user-profile/ui/UserProfilePage.tsx
new file mode 100644
index 0000000..232e6b7
--- /dev/null
+++ b/src/pages/user-profile/ui/UserProfilePage.tsx
@@ -0,0 +1,98 @@
+import { Box, Container, Chip as MuiChip } from "@mui/material";
+import { styled as muiStyled } from "@mui/material/styles";
+import type { JSX } from "react";
+import { useState } from "react";
+
+import { useUserProfile } from "@features/auth/hooks/useUserProfile";
+
+import { useProjectsByIds } from "@entities/projects/hook/useProjectsByIds";
+import UserProfileCard from "@entities/user/ui/user-profile/UserProfileCard";
+import UserProfileHeader from "@entities/user/ui/user-profile/UserProfileHeader";
+import UserProfileProjectList from "@entities/user/ui/user-profile/UserProfileProjectList";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+// 탭 이름 상수 배열
+const PROFILE_TABS = [
+  { label: "관심있는 프로젝트", color: "primary" },
+  { label: "지원한 프로젝트", color: "secondary" },
+];
+
+const UserProfilePage = (): JSX.Element => {
+  const { user } = useAuthStore();
+  const uid = user?.uid;
+  const { data: userProfile } = useUserProfile(uid ?? "");
+
+  // 관심있는/지원한 프로젝트 id 배열
+  const likeIds = userProfile?.likeProjects ?? [];
+  const appliedIds = userProfile?.appliedProjects ?? [];
+
+  // 프로젝트 데이터 가져오기
+  const { data: likeProjects } = useProjectsByIds(likeIds);
+  const { data: appliedProjects } = useProjectsByIds(appliedIds);
+  console.log(likeProjects);
+  console.log(appliedProjects);
+
+  const [tab, setTab] = useState(0);
+  if (!userProfile) {
+    return <div>UserProfilePage</div>;
+  }
+
+  return (
+    <MainContainer maxWidth="lg">
+      <UserProfileHeader />
+      <Box display="flex" gap={4}>
+        {/* 왼쪽 프로필 사이드바 */}
+        <UserProfileCard
+          userProfile={userProfile}
+          PROFILE_TABS={PROFILE_TABS}
+          likeProjects={likeProjects ?? []}
+          appliedProjects={appliedProjects ?? []}
+          tab={tab}
+          setTab={setTab}
+          ProfileTabChip={ProfileTabChip}
+        />
+        {/* 오른쪽 메인: 탭 + 프로젝트 카드 */}
+        <UserProfileProjectList
+          PROFILE_TABS={PROFILE_TABS}
+          tab={tab}
+          setTab={setTab}
+          likeProjects={likeProjects ?? []}
+          appliedProjects={appliedProjects ?? []}
+        />
+      </Box>
+    </MainContainer>
+  );
+};
+
+export default UserProfilePage;
+
+const MainContainer = muiStyled(Container)(({ theme }) => ({
+  paddingBottom: theme.spacing(2),
+  [theme.breakpoints.up("sm")]: {
+    paddingBottom: theme.spacing(4),
+  },
+  [theme.breakpoints.up("md")]: {
+    paddingBottom: theme.spacing(6),
+  },
+  backgroundColor: theme.palette.background.default,
+  minHeight: "100dvh",
+}));
+
+// 커스텀 Chip: 액티브일 때만 border, 글씨색 파란색, 배경은 그대로
+const ProfileTabChip = muiStyled(MuiChip, {
+  shouldForwardProp: (prop) => prop !== "active",
+})<{
+  active?: boolean;
+}>(({ theme, active }) => ({
+  borderColor: active ? theme.palette.primary.main : theme.palette.divider,
+  color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+  backgroundColor: theme.palette.background.paper,
+  fontWeight: 600,
+  fontSize: "0.98rem",
+  borderWidth: 1,
+  borderStyle: "solid",
+  "&:hover": {
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
diff --git a/src/shared/firebase/firebase.ts b/src/shared/firebase/firebase.ts
new file mode 100644
index 0000000..ff8bf0f
--- /dev/null
+++ b/src/shared/firebase/firebase.ts
@@ -0,0 +1,21 @@
+import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_API_KEY,
+  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_APP_ID,
+  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const googleProvider = new GoogleAuthProvider();
+export const githubProvider = new GithubAuthProvider();
+
+export const db = getFirestore(app);
diff --git a/src/shared/hooks/useAuthObserver.ts b/src/shared/hooks/useAuthObserver.ts
new file mode 100644
index 0000000..494a15a
--- /dev/null
+++ b/src/shared/hooks/useAuthObserver.ts
@@ -0,0 +1,19 @@
+import { onAuthStateChanged } from "firebase/auth";
+import { useEffect } from "react";
+
+import { auth } from "@shared/firebase/firebase";
+import { useAuthStore } from "@shared/stores/authStore";
+
+export const useAuthObserver = (): void => {
+  const setUser = useAuthStore((state) => state.setUser);
+  const setLoading = useAuthStore((state) => state.setLoading);
+
+  useEffect(() => {
+    const unsubscribe = onAuthStateChanged(auth, (user) => {
+      setUser(user);
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, [setUser, setLoading]);
+};
diff --git a/src/shared/hooks/useDraggable.ts b/src/shared/hooks/useDraggable.ts
new file mode 100644
index 0000000..fd91e3a
--- /dev/null
+++ b/src/shared/hooks/useDraggable.ts
@@ -0,0 +1,67 @@
+import { useRef, useCallback } from "react";
+
+interface ReturnTypes<T> {
+  scrollRef: React.RefObject<T | null>;
+  handleMouseDown: (e: React.MouseEvent) => void;
+}
+
+const useDraggable = <T extends HTMLDivElement | null>(): ReturnTypes<T> => {
+  const scrollRef = useRef<T>(null);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent): void => {
+    const slider = scrollRef.current;
+    if (!slider) return;
+
+    e.preventDefault();
+
+    let isDown = true;
+    let startX = e.pageX;
+    let scrollLeft = slider.scrollLeft;
+    let hasMoved = false;
+
+    slider.style.cursor = "grabbing";
+    slider.style.userSelect = "none";
+
+    const handleMouseMove = (e: MouseEvent): void => {
+      if (!isDown) return;
+      e.preventDefault();
+
+      hasMoved = true;
+      const x = e.pageX;
+      const walk = (x - startX) * 1.5;
+      slider.scrollLeft = scrollLeft - walk;
+    };
+
+    const handleMouseUp = (): void => {
+      isDown = false;
+
+      slider.style.cursor = "grab";
+      slider.style.userSelect = "";
+
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+
+      if (hasMoved) {
+        const preventClick = (e: Event): void => {
+          e.stopPropagation();
+          e.preventDefault();
+        };
+
+        slider.addEventListener("click", preventClick, { once: true });
+        setTimeout(() => {
+          slider.removeEventListener("click", preventClick);
+        }, 0);
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove, { passive: false });
+    document.addEventListener("mouseup", handleMouseUp);
+  }, []);
+
+  return {
+    scrollRef,
+    handleMouseDown,
+  };
+};
+
+export default useDraggable;
diff --git a/src/shared/hooks/usePagination.ts b/src/shared/hooks/usePagination.ts
new file mode 100644
index 0000000..61a57c7
--- /dev/null
+++ b/src/shared/hooks/usePagination.ts
@@ -0,0 +1,171 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+
+interface UsePaginationProps {
+  currentPage: number;
+  totalPages: number;
+  maxVisiblePages?: number;
+}
+
+interface UsePaginationReturn {
+  pageNumbers: (number | "ellipsis")[];
+  canGoPrev: boolean;
+  canGoNext: boolean;
+}
+
+interface UsePaginationWithStateProps {
+  totalCount: number;
+  perPage?: number;
+  maxVisiblePages?: number;
+}
+
+interface UsePaginationWithStateReturn extends UsePaginationReturn {
+  currentPage: number;
+  totalPages: number;
+  setPage: (page: number) => void;
+  goToReset: () => void;
+}
+
+const usePagination = ({
+  currentPage,
+  totalPages,
+  maxVisiblePages = 5,
+}: UsePaginationProps): UsePaginationReturn => {
+  const generatePageNumbers = (): (number | "ellipsis")[] => {
+    const pages: (number | "ellipsis")[] = [];
+
+    if (totalPages <= maxVisiblePages) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      if (currentPage <= 3) {
+        for (let i = 1; i <= maxVisiblePages; i++) {
+          pages.push(i);
+        }
+        if (totalPages > maxVisiblePages) {
+          pages.push("ellipsis");
+          pages.push(totalPages);
+        }
+      } else if (currentPage >= totalPages - 2) {
+        pages.push(1);
+        if (totalPages > maxVisiblePages) {
+          pages.push("ellipsis");
+        }
+        for (let i = totalPages - (maxVisiblePages - 1); i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        pages.push(1);
+        pages.push("ellipsis");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push("ellipsis");
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = generatePageNumbers();
+  const canGoPrev = currentPage > 1;
+  const canGoNext = currentPage < totalPages;
+
+  return {
+    pageNumbers,
+    canGoPrev,
+    canGoNext,
+  };
+};
+
+export const usePaginationWithState = ({
+  totalCount,
+  perPage = 6,
+  maxVisiblePages = 5,
+}: UsePaginationWithStateProps): UsePaginationWithStateReturn => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const isInternalUpdate = useRef(false);
+
+  const [currentPage, setCurrentPage] = useState(() => {
+    const pageParam = searchParams.get("page");
+    const page = pageParam ? parseInt(pageParam, 10) : 1;
+    return page > 0 ? page : 1;
+  });
+
+  const totalPages = Math.ceil(totalCount / perPage);
+
+  const updatePageInURL = useCallback(
+    (page: number): void => {
+      isInternalUpdate.current = true;
+      const newParams = new URLSearchParams(searchParams);
+      if (page > 1) {
+        newParams.set("page", page.toString());
+      } else {
+        newParams.delete("page");
+      }
+      setSearchParams(newParams);
+    },
+    [searchParams, setSearchParams]
+  );
+
+  const setPage = (page: number): void => {
+    if (page < 1 || page > totalPages) return;
+    setCurrentPage(page);
+    updatePageInURL(page);
+  };
+
+  const goToReset = (): void => {
+    setCurrentPage(1);
+    updatePageInURL(1);
+  };
+
+  useEffect(() => {
+    if (isInternalUpdate.current) {
+      isInternalUpdate.current = false;
+      return;
+    }
+
+    const pageParam = searchParams.get("page");
+    const urlPage = pageParam ? parseInt(pageParam, 10) : 1;
+    const validPage = urlPage > 0 ? urlPage : 1;
+
+    setCurrentPage((prevPage) => {
+      if (validPage !== prevPage) {
+        return validPage;
+      }
+      return prevPage;
+    });
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (totalPages > 0) {
+      setCurrentPage((prevPage) => {
+        if (prevPage > totalPages) {
+          updatePageInURL(totalPages);
+          return totalPages;
+        }
+        return prevPage;
+      });
+    }
+  }, [totalPages, updatePageInURL]);
+
+  const { pageNumbers, canGoPrev, canGoNext } = usePagination({
+    currentPage,
+    totalPages,
+    maxVisiblePages,
+  });
+
+  return {
+    currentPage,
+    totalPages,
+    pageNumbers,
+    canGoPrev,
+    canGoNext,
+    setPage,
+    goToReset,
+  };
+};
+
+export default usePagination;
diff --git a/src/shared/libs/utils/paginnation.ts b/src/shared/libs/utils/paginnation.ts
new file mode 100644
index 0000000..60c4aff
--- /dev/null
+++ b/src/shared/libs/utils/paginnation.ts
@@ -0,0 +1,11 @@
+export const makePagingArr = (totalCount: number): number[] => {
+  const perPage = 6;
+  const lastPageNum =
+    totalCount % perPage > 0
+      ? Math.floor(totalCount / perPage) + 1
+      : Math.floor(totalCount / perPage);
+
+  const pageArray = Array.from({ length: lastPageNum }, (_, i) => i + 1);
+
+  return pageArray;
+};
diff --git a/src/shared/libs/utils/projectDetail.ts b/src/shared/libs/utils/projectDetail.ts
new file mode 100644
index 0000000..1f93b5a
--- /dev/null
+++ b/src/shared/libs/utils/projectDetail.ts
@@ -0,0 +1,18 @@
+import { Timestamp } from "firebase/firestore";
+
+export const getStatusClassname = (
+  status: "모집중" | "모집완료"
+): "ing" | "done" => (status === "모집중" ? "ing" : "done");
+
+export const formatDate = (date?: string | Timestamp): string => {
+  if (!date) return "";
+
+  if (date instanceof Timestamp) {
+    return date.toDate().toLocaleDateString("ko-KR", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    });
+  }
+  return date;
+};
diff --git a/src/shared/react-query/queryClient.ts b/src/shared/react-query/queryClient.ts
new file mode 100644
index 0000000..85b0eae
--- /dev/null
+++ b/src/shared/react-query/queryClient.ts
@@ -0,0 +1,12 @@
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+});
+
+export default queryClient;
diff --git a/src/shared/stores/authStore.ts b/src/shared/stores/authStore.ts
new file mode 100644
index 0000000..a67bd00
--- /dev/null
+++ b/src/shared/stores/authStore.ts
@@ -0,0 +1,20 @@
+import type { User } from "firebase/auth";
+import { create } from "zustand";
+
+interface AuthState {
+  user: User | null;
+  isLoading: boolean;
+  setUser: (user: User | null) => void;
+  setLoading: (loading: boolean) => void;
+  logout: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  isLoading: true,
+
+  setUser: (user) => set({ user }),
+  setLoading: (loading) => set({ isLoading: loading }),
+
+  logout: () => set({ user: null }),
+}));
diff --git a/src/shared/types/firebase.ts b/src/shared/types/firebase.ts
new file mode 100644
index 0000000..fbc3fc4
--- /dev/null
+++ b/src/shared/types/firebase.ts
@@ -0,0 +1,5 @@
+import type { Query } from "firebase/firestore";
+
+export interface FilterBuilder {
+  build(): Query;
+}
diff --git a/src/shared/types/project.ts b/src/shared/types/project.ts
new file mode 100644
index 0000000..46f3531
--- /dev/null
+++ b/src/shared/types/project.ts
@@ -0,0 +1,62 @@
+import type { Timestamp } from "firebase/firestore";
+
+import type { ExpectedPeriod, ProjectSchedule } from "@shared/types/schedule";
+import type { User, UserRole } from "@shared/types/user";
+
+export interface ProjectItemInsertReq {
+  projectOwner: User; // 프로젝트 오너 유저 정보
+  status: RecruitmentStatus;
+  category: ProjectCategory; // 프로젝트 분야
+  title: string; // 타이틀
+  oneLineInfo: string; // 프로젝트 한줄 소개
+  simpleInfo: string; // 프로젝트 간단 소개
+  teamSize: number; // 팀 규모
+  expectedPeriod: ExpectedPeriod; // 예상기간
+  closedDate: Timestamp; // 모집 마감 시간
+  workflow: Workflow; // 진행 방식
+  techStack: string[]; // 기술 스택
+  description: string; // 상세 설명
+  positions: Positions[]; // 모집 포지션
+  schedules: ProjectSchedule[]; // 프로젝트 일정
+  requirements: string[]; // 지원 요구사항
+  preferentialTreatment: string[]; //  우대사항
+  applicants: string[]; // 지원자들
+  likedUsers: string[]; // 좋아요 누른 사람들
+}
+
+export enum ProjectCategory {
+  webDevelopment = "웹 개발",
+  mobileDevelopment = "모바일 개발",
+  aiMl = "AI/ML",
+  blockchain = "블록체인",
+  gameDevelopment = "게임 개발",
+  dataScience = "데이터 사이언스",
+  iotHardware = "IoT/하드웨어",
+  webDesign = "웹 디자인",
+  etc = "기타",
+}
+
+export enum Workflow {
+  online = "온라인 (원격)",
+  offlineInBusan = "오프라인 (부산)",
+  offlineInSeoul = "오프라인 (서울)",
+  offlineInAnywhere = "오프라인 (자유)",
+  hybrid = "하이브리드(온라인 + 오프라인)",
+}
+
+export interface Positions {
+  position: UserRole; // 포지션
+  count: number; // 모집 인원
+  experience: string; // 경력
+  status?: RecruitmentStatus;
+  applicants: string[];
+}
+export interface ProjectListRes extends ProjectItemInsertReq {
+  id: string; // firebase 문서 id
+  createdAt: Timestamp; // 게시글 등록일자
+}
+
+export enum RecruitmentStatus {
+  recruiting = "모집중",
+  completed = "모집완료",
+}
diff --git a/src/shared/types/schedule.ts b/src/shared/types/schedule.ts
new file mode 100644
index 0000000..092508d
--- /dev/null
+++ b/src/shared/types/schedule.ts
@@ -0,0 +1,14 @@
+export interface ProjectSchedule {
+  stageName: string;
+  period: ExpectedPeriod;
+  description: string;
+}
+
+export enum ExpectedPeriod {
+  oneMonth = "1개월 이내(빠르게)",
+  twoMonths = "2개월(적당히)",
+  threeMonths = "3개월(여유롭게)",
+  fourMonths = "4개월",
+  sixMonths = "6개월(장기프로젝트)",
+  moreThanSixMonths = "6개월 이상(대장정)",
+}
diff --git a/src/shared/types/user.ts b/src/shared/types/user.ts
new file mode 100644
index 0000000..ed25e75
--- /dev/null
+++ b/src/shared/types/user.ts
@@ -0,0 +1,23 @@
+export interface User {
+  id: string; // 유저 아이디
+  name: string; // 유저 이름
+  userRole: UserRole; // 유저 역할
+  email: string; // 이메일
+  experience: UserExperience; // 경력
+  avatar?: string; // 프로필 이미지
+  likeProjects?: string[]; // 좋아요 누른 프로젝트
+  appliedProjects?: string[]; // 지원한 프로젝트
+  introduceMyself?: string; // 자기소개
+}
+
+export type UserRole = "frontend" | "backend" | "fullstack" | "designer" | "pm";
+export enum UserExperience {
+  junior = "주니어 (3년 이하)",
+  mid = "미들 (3년 이상 10년 이하)",
+  senior = "시니어 (10년 이상)",
+}
+
+export type UserInput = Pick<
+  User,
+  "name" | "userRole" | "experience" | "introduceMyself"
+>;
diff --git a/src/shared/ui/DragScrollContainer.tsx b/src/shared/ui/DragScrollContainer.tsx
new file mode 100644
index 0000000..d894864
--- /dev/null
+++ b/src/shared/ui/DragScrollContainer.tsx
@@ -0,0 +1,65 @@
+import { Box, Stack, styled } from "@mui/material";
+import type { JSX, ReactNode } from "react";
+
+import useDraggable from "@shared/hooks/useDraggable";
+
+const DragScrollContainer = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
+  const { scrollRef, handleMouseDown } = useDraggable();
+
+  return (
+    <Container>
+      <DragScrollSection ref={scrollRef} onMouseDown={handleMouseDown}>
+        {children}
+      </DragScrollSection>
+    </Container>
+  );
+};
+
+export default DragScrollContainer;
+
+const Container = styled(Box)(({ theme }) => ({
+  overflow: "hidden",
+  position: "relative",
+  marginTop: theme.spacing(0.4),
+
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    right: 0,
+    width: "2rem",
+    height: "100%",
+    background: `linear-gradient(to right, transparent, ${theme.palette.background.paper})`,
+    pointerEvents: "none",
+    zIndex: 1,
+  },
+}));
+
+const DragScrollSection = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: theme.spacing(0.8),
+  overflowX: "auto",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  paddingBottom: theme.spacing(0.4),
+  paddingRight: theme.spacing(2),
+  cursor: "grab",
+
+  "&::-webkit-scrollbar": {
+    display: "none",
+  },
+
+  "&:active": {
+    cursor: "grabbing",
+  },
+
+  scrollBehavior: "smooth",
+  WebkitOverflowScrolling: "touch",
+
+  minHeight: "3.2rem",
+  alignItems: "center",
+}));
diff --git a/src/shared/ui/NavigateButton.tsx b/src/shared/ui/NavigateButton.tsx
new file mode 100644
index 0000000..48ef59b
--- /dev/null
+++ b/src/shared/ui/NavigateButton.tsx
@@ -0,0 +1,47 @@
+import { Button, styled } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface NavigateButtonProps {
+  to: string;
+  children: React.ReactNode;
+  sx?: any;
+}
+
+const NavigateButton = ({
+  to,
+  children,
+  sx,
+}: NavigateButtonProps): JSX.Element => {
+  const navigate = useNavigate();
+  const handleClick = (): void => {
+    navigate(to);
+  };
+  return (
+    <StyledButton
+      variant="contained"
+      color="primary"
+      onClick={handleClick}
+      sx={sx}
+    >
+      {children}
+    </StyledButton>
+  );
+};
+
+export default NavigateButton;
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  borderRadius: theme.spacing(0.8),
+  boxShadow: "none",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    transform: "translateY(-0.1rem)",
+    boxShadow: "0 4px 8px -2px rgba(37, 99, 235, 0.3)",
+  },
+  "&:active": {
+    transform: "translateY(0)",
+  },
+}));
diff --git a/src/shared/ui/ProjectCard.tsx b/src/shared/ui/ProjectCard.tsx
new file mode 100644
index 0000000..5b68c63
--- /dev/null
+++ b/src/shared/ui/ProjectCard.tsx
@@ -0,0 +1,283 @@
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import LocationPinIcon from "@mui/icons-material/LocationPin";
+import PeopleAltIcon from "@mui/icons-material/PeopleAlt";
+import {
+  Button,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+  Stack,
+  styled,
+  Typography,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import type { JSX } from "react";
+import { memo } from "react";
+import { Link } from "react-router-dom";
+
+import { type ProjectListRes } from "@shared/types/project";
+import DragScrollContainer from "@shared/ui/DragScrollContainer";
+import UserProfileAvatar from "@shared/ui/user/UserProfileAvatar";
+import UserProfileWithNamePosition from "@shared/ui/user/UserProfileWithNamePosition";
+
+// 여러곳에서 사용될 것 같아서 shared로 빼놓음 (현재 경로 @shared/ui/ProjectCard.tsx)
+// 기존 entities/projects/ui/projects-card/ProjectCard.tsx 는 사용하시는 분들 오류가 있을 것 같아 파일 삭제하지 않음
+// 해당 경로로 import 하고 계신분들은 확인하시고 경로수정 확인 바래요!
+
+interface ProjectCardProps {
+  project: ProjectListRes;
+  simple?: boolean;
+  sx?: any;
+}
+
+const ProjectCard = ({
+  project,
+  simple = false,
+  sx,
+}: ProjectCardProps): JSX.Element => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.up("sm"));
+
+  return (
+    <StyledCard sx={{ ...(simple && { minHeight: 260 }), ...sx }}>
+      <StyledCardContent>
+        <ProjectHeader>
+          <StatusChip label={project.status} color="primary" size="small" />
+        </ProjectHeader>
+
+        <ContentSection>
+          <ProjectTitle variant="h5" fontWeight={700}>
+            {project.title}
+          </ProjectTitle>
+          {!simple && (
+            <>
+              <OneLineInfo variant="body1" color="primary" fontWeight={600}>
+                {project.oneLineInfo}
+              </OneLineInfo>
+              <SimpleInfo variant="body2" color="text.secondary">
+                {project.simpleInfo}
+              </SimpleInfo>
+            </>
+          )}
+        </ContentSection>
+        <Stack flexDirection={"row"} gap={"0.8rem"} alignItems={"flex-start"}>
+          {isMobile ? (
+            <UserProfileAvatar
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              avatar={project.projectOwner.avatar}
+              flexDirection="row"
+            />
+          ) : (
+            <UserProfileWithNamePosition
+              name={project.projectOwner.name}
+              userRole={project.projectOwner.userRole}
+              flexDirection="row"
+            />
+          )}
+        </Stack>
+        {!simple && (
+          <DragScrollContainer>
+            {project.techStack.map((stack, index) => (
+              <TechChip key={index} label={stack} size="small" />
+            ))}
+          </DragScrollContainer>
+        )}
+
+        {!simple && (
+          <ProjectDetails>
+            <DetailItem>
+              <PeopleAltIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.teamSize}명
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <AccessTimeIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                {project.expectedPeriod}
+              </Typography>
+            </DetailItem>
+            <DetailItem>
+              <LocationPinIcon fontSize="small" color="action" />
+              <Typography variant="body2" color="text.secondary">
+                온라인
+              </Typography>
+            </DetailItem>
+          </ProjectDetails>
+        )}
+
+        <StyledDivider />
+
+        <FooterSection>
+          <Typography variant="body1" color="textPrimary">
+            <TextHighlight>{project.applicants.length}명</TextHighlight> 지원
+          </Typography>
+          <StyledLink to={`/project/${project.id}`}>
+            <ActionButton variant="contained" color="primary" size="medium">
+              자세히 보기
+            </ActionButton>
+          </StyledLink>
+        </FooterSection>
+      </StyledCardContent>
+    </StyledCard>
+  );
+};
+
+export default memo(ProjectCard);
+
+const StyledCard = styled(Card)(({ theme }) => ({
+  height: "100%",
+  flex: 1,
+  width: "100%",
+  display: "flex",
+  flexDirection: "column",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  cursor: "pointer",
+  border: `1px solid ${theme.palette.divider}`,
+
+  "&:hover": {
+    transform: "translateY(-0.4rem)",
+    boxShadow:
+      "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
+    borderColor: theme.palette.primary.light,
+  },
+
+  [theme.breakpoints.up("sm")]: {
+    flex: 1,
+    "&:hover": {
+      transform: "translateY(-0.6rem)",
+    },
+  },
+
+  [theme.breakpoints.up("md")]: {
+    maxWidth: "48rem",
+    maxHeight: "54rem",
+  },
+}));
+
+const StyledCardContent = styled(CardContent)(({ theme }) => ({
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(1),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const ProjectHeader = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+}));
+
+const StatusChip = styled(Chip)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.primary.contrastText,
+
+  "&:hover": {
+    backgroundColor: theme.palette.primary.dark,
+  },
+}));
+
+const ContentSection = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing(0.8),
+}));
+
+const ProjectTitle = styled(Typography)(({ theme }) => ({
+  lineHeight: 1.3,
+  letterSpacing: "-0.015em",
+  color: theme.palette.text.primary,
+}));
+
+const OneLineInfo = styled(Typography)(() => ({
+  lineHeight: 1.4,
+  fontWeight: 600,
+}));
+
+const SimpleInfo = styled(Typography)(() => ({
+  lineHeight: 1.5,
+  overflow: "hidden",
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+}));
+
+const TechChip = styled(Chip)(({ theme }) => ({
+  backgroundColor: theme.palette.background.default,
+  border: `1px solid ${theme.palette.divider}`,
+  fontWeight: 500,
+  fontSize: "1.1rem",
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+
+  [theme.breakpoints.up("sm")]: {
+    fontSize: "1.2rem",
+  },
+}));
+
+const ProjectDetails = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  flexWrap: "wrap",
+  gap: theme.spacing(1.6),
+  marginTop: theme.spacing(0.8),
+
+  [theme.breakpoints.up("sm")]: {
+    gap: theme.spacing(2),
+  },
+}));
+
+const DetailItem = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: theme.spacing(0.6),
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  margin: `${theme.spacing(0.8)} 0`,
+  backgroundColor: theme.palette.divider,
+}));
+
+const FooterSection = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  justifyContent: "space-between",
+  alignItems: "center",
+  marginTop: "auto",
+  gap: theme.spacing(1.2),
+}));
+
+const StyledLink = styled(Link)(() => ({
+  textDecoration: "none",
+  flexShrink: 0,
+}));
+
+const ActionButton = styled(Button)(({ theme }) => ({
+  fontWeight: 600,
+  letterSpacing: "0.025em",
+  borderRadius: theme.spacing(0.8),
+  boxShadow: "none",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+
+  "&:hover": {
+    transform: "translateY(-0.1rem)",
+    boxShadow: "0 4px 8px -2px rgba(37, 99, 235, 0.3)",
+  },
+
+  "&:active": {
+    transform: "translateY(0)",
+  },
+}));
+
+const TextHighlight = styled("span")(({ theme }) => ({
+  color: theme.palette.primary.main,
+  fontWeight: 600,
+}));
diff --git a/src/shared/ui/loading-spinner/LoadingSpinner.tsx b/src/shared/ui/loading-spinner/LoadingSpinner.tsx
new file mode 100644
index 0000000..6e665c2
--- /dev/null
+++ b/src/shared/ui/loading-spinner/LoadingSpinner.tsx
@@ -0,0 +1,96 @@
+import { Box, CircularProgress, Typography, styled } from "@mui/material";
+import type { JSX } from "react";
+
+interface LoadingSpinnerProps {
+  size?: number;
+  message?: string;
+  variant?: "default" | "overlay" | "minimal";
+}
+
+const LoadingSpinner = ({
+  size = 40,
+  message = "로딩 중...",
+  variant = "default",
+}: LoadingSpinnerProps): JSX.Element => {
+  if (variant === "minimal") {
+    return (
+      <MinimalContainer>
+        <StyledCircularProgress size={size} />
+      </MinimalContainer>
+    );
+  }
+
+  if (variant === "overlay") {
+    return (
+      <OverlayContainer>
+        <SpinnerContainer>
+          <StyledCircularProgress size={size} />
+          <LoadingText variant="body2">{message}</LoadingText>
+        </SpinnerContainer>
+      </OverlayContainer>
+    );
+  }
+
+  return (
+    <DefaultContainer>
+      <StyledCircularProgress size={size} />
+      <LoadingText variant="body2">{message}</LoadingText>
+    </DefaultContainer>
+  );
+};
+
+export default LoadingSpinner;
+
+const DefaultContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(2),
+  padding: theme.spacing(4),
+}));
+
+const MinimalContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+}));
+
+const OverlayContainer = styled(Box)(() => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  backgroundColor: "rgba(255, 255, 255, 0.8)",
+  backdropFilter: "blur(2px)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 9999,
+}));
+
+const SpinnerContainer = styled(Box)(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: theme.spacing(2),
+  padding: theme.spacing(3),
+  backgroundColor: "white",
+  borderRadius: theme.spacing(2),
+  boxShadow: theme.shadows[8],
+}));
+
+const StyledCircularProgress = styled(CircularProgress)(({ theme }) => ({
+  color: theme.palette.primary.main,
+  animationDuration: "1s",
+  "& .MuiCircularProgress-circle": {
+    strokeLinecap: "round",
+  },
+}));
+
+const LoadingText = styled(Typography)(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontWeight: 500,
+  userSelect: "none",
+}));
diff --git a/src/shared/ui/pagination.tsx b/src/shared/ui/pagination.tsx
new file mode 100644
index 0000000..704f634
--- /dev/null
+++ b/src/shared/ui/pagination.tsx
@@ -0,0 +1,131 @@
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import { Box, Button, styled, IconButton } from "@mui/material";
+import { type JSX } from "react";
+
+import usePagination from "@shared/hooks/usePagination";
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  disabled?: boolean;
+}
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  disabled = false,
+}: PaginationProps): JSX.Element => {
+  const { pageNumbers, canGoPrev, canGoNext } = usePagination({
+    currentPage,
+    totalPages,
+  });
+
+  if (totalPages <= 1) {
+    return <></>;
+  }
+
+  return (
+    <PaginationContainer>
+      <NavButton
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={!canGoPrev || disabled}
+        size="medium"
+      >
+        <ChevronLeftIcon />
+      </NavButton>
+      <PageNumbersContainer>
+        {pageNumbers.map((page, index) => (
+          <Box key={index}>
+            {page === "ellipsis" ? (
+              <EllipsisButton disabled>
+                <MoreHorizIcon fontSize="medium" />
+              </EllipsisButton>
+            ) : (
+              <PageButton
+                variant={page === currentPage ? "contained" : "outlined"}
+                size="medium"
+                onClick={() => onPageChange(page)}
+                disabled={disabled}
+                $isActive={page === currentPage}
+              >
+                {page}
+              </PageButton>
+            )}
+          </Box>
+        ))}
+      </PageNumbersContainer>
+      <NavButton
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={!canGoNext || disabled}
+        size="medium"
+      >
+        <ChevronRightIcon />
+      </NavButton>
+    </PaginationContainer>
+  );
+};
+
+export default Pagination;
+
+const PaginationContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.75rem",
+  padding: "2rem 0",
+}));
+
+const PageNumbersContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+}));
+
+const PageButton = styled(Button)<{ $isActive: boolean }>(
+  ({ theme, $isActive }) => ({
+    minWidth: "3rem",
+    height: "3rem",
+    padding: "0",
+    fontSize: "1rem",
+    fontWeight: $isActive ? 600 : 500,
+    borderRadius: "0.5rem",
+    ...($isActive && {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.primary.contrastText,
+      "&:hover": {
+        backgroundColor: theme.palette.primary.dark,
+      },
+    }),
+    "&:not(.Mui-disabled):hover": {
+      transform: "translateY(-1px)",
+      boxShadow: theme.shadows[2],
+    },
+    transition: "all 0.2s ease-in-out",
+  })
+);
+
+const NavButton = styled(IconButton)(({ theme }) => ({
+  minWidth: "3rem",
+  height: "3rem",
+  borderRadius: "0.5rem",
+  border: `1px solid ${theme.palette.divider}`,
+  "&:not(.Mui-disabled):hover": {
+    backgroundColor: theme.palette.action.hover,
+    transform: "translateY(-1px)",
+    boxShadow: theme.shadows[1],
+  },
+  transition: "all 0.2s ease-in-out",
+}));
+
+const EllipsisButton = styled(IconButton)(() => ({
+  minWidth: "3rem",
+  height: "3rem",
+  cursor: "default",
+  "&:hover": {
+    backgroundColor: "transparent",
+  },
+}));
diff --git a/src/shared/ui/project-detail/InfoRow.tsx b/src/shared/ui/project-detail/InfoRow.tsx
new file mode 100644
index 0000000..0098720
--- /dev/null
+++ b/src/shared/ui/project-detail/InfoRow.tsx
@@ -0,0 +1,23 @@
+import { Box, Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const InfoRow = ({
+  title,
+  content,
+  color,
+}: {
+  title: string;
+  content: string;
+  color?: "primary" | "error";
+}): JSX.Element => {
+  return (
+    <Box display="flex" justifyContent="space-between" marginBottom={1}>
+      <Typography>{title}</Typography>
+      <Typography fontWeight={500} color={color || "textPrimary"}>
+        {content}
+      </Typography>
+    </Box>
+  );
+};
+
+export default InfoRow;
diff --git a/src/shared/ui/project-detail/InfoWithIcon.tsx b/src/shared/ui/project-detail/InfoWithIcon.tsx
new file mode 100644
index 0000000..04a2771
--- /dev/null
+++ b/src/shared/ui/project-detail/InfoWithIcon.tsx
@@ -0,0 +1,26 @@
+import { Box, Typography, type SvgIconProps } from "@mui/material";
+import type { JSX } from "react";
+
+const InfoWithIcon = ({
+  item,
+  Icon,
+  content,
+}: {
+  item: string;
+  Icon: React.ElementType<SvgIconProps>;
+  content: string;
+}): JSX.Element => {
+  return (
+    <Box display="flex" alignItems="center" flex={1} gap={1}>
+      <Icon fontSize="large" color="primary" />
+      <div>
+        <Typography variant="body2" color="gray">
+          {item}
+        </Typography>
+        <Typography variant="h6">{content}</Typography>
+      </div>
+    </Box>
+  );
+};
+
+export default InfoWithIcon;
diff --git a/src/shared/ui/project-detail/TitleWithIcon.tsx b/src/shared/ui/project-detail/TitleWithIcon.tsx
new file mode 100644
index 0000000..e4752d7
--- /dev/null
+++ b/src/shared/ui/project-detail/TitleWithIcon.tsx
@@ -0,0 +1,28 @@
+import { Box, Typography, type SvgIconProps } from "@mui/material";
+import type { JSX } from "react";
+
+const TitleWithIcon = ({
+  title,
+  Icon,
+  color = "primary",
+  marginBottom = 2,
+}: {
+  title: string;
+  Icon: React.ElementType<SvgIconProps>;
+  color?: "primary" | "success" | "warning";
+  marginBottom?: number;
+}): JSX.Element => {
+  return (
+    <Box
+      gap={1}
+      display={"flex"}
+      alignItems={"center"}
+      marginBottom={marginBottom}
+    >
+      <Icon fontSize="large" color={color} />
+      <Typography variant="h3">{title}</Typography>
+    </Box>
+  );
+};
+
+export default TitleWithIcon;
diff --git a/src/shared/ui/project-insert/TextWithEmoji.tsx b/src/shared/ui/project-insert/TextWithEmoji.tsx
new file mode 100644
index 0000000..cf4d1b3
--- /dev/null
+++ b/src/shared/ui/project-insert/TextWithEmoji.tsx
@@ -0,0 +1,39 @@
+import { Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const TextWithEmoji = ({
+  emoji,
+  emoji_label,
+  mainText,
+  subText,
+}: {
+  emoji: string;
+  emoji_label: string;
+  mainText: string;
+  subText?: string;
+}): JSX.Element => {
+  return (
+    <>
+      <Typography
+        variant="h5"
+        mb={0.5}
+        color="#222"
+        display="flex"
+        alignItems="center"
+        gap={1}
+      >
+        <span role="img" aria-label={emoji_label}>
+          {emoji}
+        </span>{" "}
+        {mainText}
+      </Typography>
+      {subText && (
+        <Typography color="#555" mb={2}>
+          {subText}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default TextWithEmoji;
diff --git a/src/shared/ui/user/UserProfileAvatar.tsx b/src/shared/ui/user/UserProfileAvatar.tsx
new file mode 100644
index 0000000..0757443
--- /dev/null
+++ b/src/shared/ui/user/UserProfileAvatar.tsx
@@ -0,0 +1,37 @@
+import { Avatar, Box, styled } from "@mui/material";
+import type { CSSProperties, JSX } from "react";
+
+import type { User } from "@shared/types/user";
+import UserProfileWithNamePosition from "@shared/ui/user/UserProfileWithNamePosition";
+
+interface UserProfileAvatarProps
+  extends Pick<User, "name" | "userRole" | "avatar"> {
+  flexDirection?: CSSProperties["flexDirection"];
+}
+
+const UserProfileAvatar = ({
+  name,
+  userRole,
+  avatar,
+  flexDirection = "row",
+}: UserProfileAvatarProps): JSX.Element => {
+  return (
+    <UserProfileAvatarContainer>
+      <Avatar src={avatar} />
+      <UserProfileWithNamePosition
+        name={name}
+        userRole={userRole}
+        flexDirection={flexDirection}
+      />
+    </UserProfileAvatarContainer>
+  );
+};
+
+export default UserProfileAvatar;
+
+const UserProfileAvatarContainer = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "0.8rem",
+}));
diff --git a/src/shared/ui/user/UserProfileWithNamePosition.tsx b/src/shared/ui/user/UserProfileWithNamePosition.tsx
new file mode 100644
index 0000000..4adf43f
--- /dev/null
+++ b/src/shared/ui/user/UserProfileWithNamePosition.tsx
@@ -0,0 +1,24 @@
+import { Stack, Typography } from "@mui/material";
+import type { CSSProperties, JSX } from "react";
+
+import type { User } from "@shared/types/user";
+
+interface UserProfileWithNamePositionProps
+  extends Pick<User, "name" | "userRole"> {
+  flexDirection?: CSSProperties["flexDirection"];
+}
+
+const UserProfileWithNamePosition = ({
+  name,
+  userRole,
+  flexDirection = "column",
+}: UserProfileWithNamePositionProps): JSX.Element => {
+  return (
+    <Stack flexDirection={flexDirection} gap={"0.4rem"} alignItems={"center"}>
+      <Typography variant="h6">{name}</Typography>
+      <Typography variant="body1">{userRole}</Typography>
+    </Stack>
+  );
+};
+
+export default UserProfileWithNamePosition;
diff --git a/src/widgets/BackToHome/BackToHome.tsx b/src/widgets/BackToHome/BackToHome.tsx
new file mode 100644
index 0000000..2d9d23a
--- /dev/null
+++ b/src/widgets/BackToHome/BackToHome.tsx
@@ -0,0 +1,23 @@
+import { Box } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+const BackToHome = (): JSX.Element => {
+  const navigate = useNavigate();
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        cursor: "pointer",
+        mt: 2,
+        color: "text.secondary",
+      }}
+      onClick={() => navigate("/")}
+    >
+      ← 홈으로 돌아가기
+    </Box>
+  );
+};
+
+export default BackToHome;
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
new file mode 100644
index 0000000..228a4cb
--- /dev/null
+++ b/src/widgets/Header/Header.tsx
@@ -0,0 +1,78 @@
+import { Box, styled, Avatar, Button } from "@mui/material";
+import type { JSX } from "react";
+import { useNavigate } from "react-router-dom";
+
+import LoginButton from "@features/auth/ui/LoginButton";
+import LogoutButton from "@features/auth/ui/LogoutButton";
+
+import { useAuthStore } from "@shared/stores/authStore";
+
+const Header = (): JSX.Element => {
+  const user = useAuthStore((state) => state.user);
+  const navigate = useNavigate();
+
+  return (
+    <HeaderContainer>
+      <LogoBox onClick={() => navigate("/")}>
+        {/* 로고 이미지가 있으면 아래 img src 수정 */}
+        {/* <img src="/logo.svg" alt="로고" style={{ height: 32, marginRight: 8 }} /> */}
+        <span style={{ fontWeight: 700, fontSize: "2rem" }}>프로젝트 잼</span>
+      </LogoBox>
+      <NavBox>
+        <NavButton onClick={() => navigate("/project")}>
+          프로젝트 찾기
+        </NavButton>
+        <NavButton onClick={() => navigate("/project/insert")}>
+          프로젝트 등록
+        </NavButton>
+        {user ? (
+          <>
+            <Avatar
+              src={user.photoURL || ""}
+              alt={user.displayName || "profile"}
+              sx={{ width: 36, height: 36, cursor: "pointer", ml: 2 }}
+              onClick={() => navigate("/profile")}
+            />
+            <LogoutButton />
+          </>
+        ) : (
+          <LoginButton />
+        )}
+      </NavBox>
+    </HeaderContainer>
+  );
+};
+
+export default Header;
+
+const HeaderContainer = styled(Box)({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "0 2rem",
+  backgroundColor: "#f5f5f5",
+  height: "64px",
+});
+
+const LogoBox = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  cursor: "pointer",
+});
+
+const NavBox = styled(Box)({
+  display: "flex",
+  alignItems: "center",
+  gap: "1.5rem",
+});
+
+const NavButton = styled(Button)({
+  background: "none",
+  color: "#3b36f4",
+  fontWeight: 600,
+  fontSize: "1.1rem",
+  boxShadow: "none",
+  "&:hover": {
+    background: "rgba(59,54,244,0.08)",
+  },
+});
diff --git a/src/widgets/hero/ui/Hero.tsx b/src/widgets/hero/ui/Hero.tsx
new file mode 100644
index 0000000..fd88a1a
--- /dev/null
+++ b/src/widgets/hero/ui/Hero.tsx
@@ -0,0 +1,82 @@
+import AddIcon from "@mui/icons-material/Add";
+import SearchIcon from "@mui/icons-material/Search";
+import {
+  Box,
+  Button,
+  styled,
+  Typography,
+  type ButtonProps,
+} from "@mui/material";
+import type { JSX } from "react";
+import { Link } from "react-router-dom";
+
+const Hero = (): JSX.Element => {
+  return (
+    <>
+      <HeroTitle variant="subtitle1">
+        함께 만들어가는{" "}
+        <HeroTitleHighlight>사이드 프로젝트 🚀</HeroTitleHighlight>
+      </HeroTitle>
+      <HeroDescription variant="body1">
+        아이디어는 있지만 팀이 없나요? <br />
+        프로젝트 잼에서 함께할 동료를 찾아보세요!
+      </HeroDescription>
+      <HeroMessage variant="body1">
+        혼자서는 힘들어도 함께라면 뭐든 할 수 있어요 ✨
+      </HeroMessage>
+      <HeroButtonContainer>
+        <HeroButtonLink to="/project">
+          <HeroButton variant="contained" color="primary">
+            <SearchIcon />
+            프로젝트 찾기
+          </HeroButton>
+        </HeroButtonLink>
+        <HeroButtonLink to="/project/insert">
+          <HeroButton variant="contained" color="inherit">
+            <AddIcon />
+            프로젝트 등록
+          </HeroButton>
+        </HeroButtonLink>
+      </HeroButtonContainer>
+    </>
+  );
+};
+
+export default Hero;
+
+const HeroTitle = styled(Typography)(() => ({
+  textAlign: "center",
+  marginBottom: "2.4rem",
+}));
+
+const HeroTitleHighlight = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle1,
+  color: theme.palette.primary.main,
+}));
+
+const HeroDescription = styled(Typography)(() => ({
+  textAlign: "center",
+  marginBottom: "1.6rem",
+}));
+
+const HeroMessage = styled(Typography)(() => ({
+  textAlign: "center",
+  marginBottom: "3.2rem",
+}));
+
+const HeroButtonContainer = styled(Box)(() => ({
+  display: "flex",
+  justifyContent: "center",
+  gap: "1.6rem",
+}));
+
+const HeroButton = styled(Button)<ButtonProps>(() => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.8rem",
+}));
+
+const HeroButtonLink = styled(Link)(() => ({
+  textDecoration: "none",
+  color: "inherit",
+}));
diff --git a/vite.config.ts b/vite.config.ts
index d923827..5472fd0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,14 +1,37 @@
 import { resolve } from "path";
 
 import react from "@vitejs/plugin-react";
+import { visualizer } from "rollup-plugin-visualizer";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    visualizer({
+      filename: "dist/stats.html",
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
   root: "./src/app",
   build: {
-    outDir: "dist",
+    outDir: "../../dist",
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          "react-vendor": ["react", "react-dom"],
+          "mui-vendor": ["@mui/material", "@mui/icons-material"],
+          "firebase-vendor": [
+            "firebase/app",
+            "firebase/auth",
+            "firebase/firestore",
+          ],
+          "query-vendor": ["@tanstack/react-query"],
+          "router-vendor": ["react-router-dom"],
+        },
+      },
+    },
   },
   publicDir: "src/app/public",
   server: {