From c269addd25fbda2c7a9f4175e208e0c1a1ad8928 Mon Sep 17 00:00:00 2001
From: dev-taewon-kim <dev.taewon.kim@gmail.com>
Date: Thu, 31 Oct 2024 19:48:00 +0900
Subject: [PATCH 01/12] =?UTF-8?q?config:=20FE=20Actions=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/fe.yml | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/fe.yml b/.github/workflows/fe.yml
index 2df991f..babb51f 100644
--- a/.github/workflows/fe.yml
+++ b/.github/workflows/fe.yml
@@ -28,10 +28,14 @@ jobs:
           node-version: 21.7.3
 
       - name: Install dependencies
-        run: npm ci
+        run: |
+          cd ./fe
+          npm ci
 
       - name: Build
-        run: npm run build
+        run: |
+          cd ./fe
+          npm run build
 
       - name: Setup SSH
         uses: webfactory/ssh-agent@v0.9.0
@@ -56,4 +60,4 @@ jobs:
             sudo chown -R ${{ secrets.SSH_USER }}:${{ secrets.SSH_USER }} /var/www/clovapatra.com/html
 
       - name: Transfer built files via rsync
-        run: rsync -avz -e 'ssh -p ${{ secrets.SERVER_PORT }}' ./dist/ ${{ secrets.SSH_USER }}@${{ secrets.SERVER_IP }}:/var/www/clovapatra.com/html
+        run: rsync -avz -e 'ssh -p ${{ secrets.SERVER_PORT }}' ./fe/dist/ ${{ secrets.SSH_USER }}@${{ secrets.SERVER_IP }}:/var/www/clovapatra.com/html

From c902f1c407ca0c3156589797038ea1b6660745bd Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Mon, 4 Nov 2024 21:17:34 +0900
Subject: [PATCH 02/12] =?UTF-8?q?[FE]=20=EB=B0=A9=20=EB=AA=A9=EB=A1=9D=20H?=
 =?UTF-8?q?eader=20UI=20=EA=B5=AC=ED=98=84=20(#25)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: tailwindcss 설치 및 설정

* feat: RoomHeader 컴포넌트 UI 구현
---
 fe/components.json                            |   20 +
 fe/package-lock.json                          | 1074 ++++++++++++++++-
 fe/package.json                               |   16 +-
 fe/postcss.config.js                          |    6 +
 fe/src/App.tsx                                |   75 +-
 fe/src/components/ui/button.tsx               |   56 +
 fe/src/index.css                              |  130 +-
 fe/src/lib/utils.ts                           |    6 +
 .../pages/RoomPage/RoomHeader/RoomHeader.tsx  |   12 +
 fe/src/pages/RoomPage/index.tsx               |   11 +
 fe/tailwind.config.js                         |   57 +
 fe/tsconfig.app.json                          |   13 +-
 fe/tsconfig.json                              |    8 +-
 fe/vite.config.ts                             |    6 +
 14 files changed, 1301 insertions(+), 189 deletions(-)
 create mode 100644 fe/components.json
 create mode 100644 fe/postcss.config.js
 create mode 100644 fe/src/components/ui/button.tsx
 create mode 100644 fe/src/lib/utils.ts
 create mode 100644 fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
 create mode 100644 fe/src/pages/RoomPage/index.tsx
 create mode 100644 fe/tailwind.config.js

diff --git a/fe/components.json b/fe/components.json
new file mode 100644
index 0000000..bb3bc42
--- /dev/null
+++ b/fe/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
\ No newline at end of file
diff --git a/fe/package-lock.json b/fe/package-lock.json
index 1730885..0fb9fd3 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -8,16 +8,28 @@
       "name": "fe",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-slot": "^1.1.0",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.454.0",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-icons": "^5.3.0",
+        "react-router-dom": "^6.27.0",
+        "tailwind-merge": "^2.5.4",
+        "tailwindcss-animate": "^1.0.7",
+        "uuid": "^11.0.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
         "@testing-library/jest-dom": "^6.6.2",
         "@testing-library/react": "^16.0.1",
+        "@types/node": "^22.8.7",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/uuid": "^10.0.0",
         "@vitejs/plugin-react": "^4.3.3",
+        "autoprefixer": "^10.4.20",
         "eslint": "^9.13.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-react": "^7.37.2",
@@ -25,7 +37,9 @@
         "eslint-plugin-react-refresh": "^0.4.14",
         "globals": "^15.11.0",
         "jsdom": "^25.0.1",
+        "postcss": "^8.4.47",
         "prettier": "3.3.3",
+        "tailwindcss": "^3.4.14",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.11.0",
         "vite": "^5.4.10",
@@ -38,6 +52,17 @@
       "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
       "dev": true
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -869,11 +894,26 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -887,7 +927,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -896,7 +935,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -904,14 +942,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -921,7 +957,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -934,7 +969,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -943,7 +977,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -952,6 +985,54 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.24.3",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz",
@@ -1332,17 +1413,26 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "22.8.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.7.tgz",
+      "integrity": "sha512-LidcG+2UeYIWcMuMUpBKOnryBWG/rnmOHQR5apjn8myTQcx3rinFRn7DcIFhMnS0PPFSC6OafdIKEad0lj6U0Q==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1357,6 +1447,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "dev": true
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.12.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.2.tgz",
@@ -1765,8 +1861,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -1775,7 +1869,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -1786,6 +1879,28 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1946,6 +2061,43 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -1964,8 +2116,18 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -1981,7 +2143,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -2058,6 +2219,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001676",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
@@ -2119,11 +2288,71 @@
         "node": ">= 16"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2134,8 +2363,7 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -2149,6 +2377,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2165,7 +2401,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2181,6 +2416,17 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssstyle": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.1.0.tgz",
@@ -2197,7 +2443,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/data-urls": {
       "version": "5.0.0",
@@ -2353,6 +2599,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -2372,12 +2628,22 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.49",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz",
       "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==",
       "dev": true
     },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -2847,7 +3113,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -2863,7 +3128,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2887,7 +3151,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -2908,7 +3171,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2960,6 +3222,21 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
@@ -2974,11 +3251,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -2992,7 +3281,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3069,11 +3357,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -3081,6 +3387,28 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/globals": {
       "version": "15.11.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
@@ -3200,7 +3528,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3358,6 +3685,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -3390,7 +3728,6 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -3435,7 +3772,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3452,6 +3788,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -3471,7 +3815,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -3507,7 +3850,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -3670,8 +4012,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.3",
@@ -3689,6 +4030,28 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3825,7 +4188,20 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/locate-path": {
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
@@ -3878,6 +4254,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.454.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
+      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -3901,7 +4285,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3910,7 +4293,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -3961,17 +4343,34 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3997,6 +4396,23 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/nwsapi": {
       "version": "2.2.13",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.13.tgz",
@@ -4007,11 +4423,18 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
@@ -4147,6 +4570,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4184,7 +4612,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4192,8 +4619,27 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
     },
     "node_modules/pathe": {
       "version": "1.1.2",
@@ -4213,14 +4659,12 @@
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -4228,6 +4672,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -4241,7 +4701,6 @@
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
       "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4265,6 +4724,142 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4347,7 +4942,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4386,6 +4980,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -4402,6 +5004,55 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "dependencies": {
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -4490,7 +5141,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -4543,7 +5193,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -4668,7 +5317,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -4680,7 +5328,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4709,11 +5356,21 @@
       "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
       "dev": true
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4730,6 +5387,52 @@
       "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
       "dev": true
     },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -4815,6 +5518,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/strip-indent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
@@ -4839,6 +5579,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4855,7 +5616,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4869,12 +5629,100 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
+      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
+      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -4936,7 +5784,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -4980,6 +5827,11 @@
         "typescript": ">=4.2.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5116,6 +5968,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -5155,6 +6013,23 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/uuid": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.0.2.tgz",
+      "integrity": "sha512-14FfcOJmqdjbBPdDjFQyk/SdT4NySW4eM0zcG+HqbHP5jzuH56xO3J1DGhgs/cEMCfwYi3HQI1gnTO62iaG+tQ==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.10",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
@@ -5359,7 +6234,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -5474,6 +6348,79 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/ws": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
@@ -5516,6 +6463,17 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/fe/package.json b/fe/package.json
index 85f825f..e70f6ac 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -12,16 +12,28 @@
   },
   "format": "prettier --write ./src",
   "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.454.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.27.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
+    "@types/node": "^22.8.7",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/uuid": "^10.0.0",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.37.2",
@@ -29,7 +41,9 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
     "jsdom": "^25.0.1",
+    "postcss": "^8.4.47",
     "prettier": "3.3.3",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
     "vite": "^5.4.10",
diff --git a/fe/postcss.config.js b/fe/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/fe/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
index 7d06aa2..7d12776 100644
--- a/fe/src/App.tsx
+++ b/fe/src/App.tsx
@@ -1,73 +1,16 @@
-import { useState, useEffect } from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
+import RoomPage from './pages/RoomPage';
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [apiResponse, setApiResponse] = useState('');
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    try {
-      const response = await fetch('/api/test');
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const data = await response.text();
-      setApiResponse(data);
-      setError('');
-    } catch (err) {
-      setError('Error');
-      setApiResponse('Error');
-    }
-  };
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </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>
-
-      {/* API 응답 표시 섹션 */}
-      <div className="mt-4 p-4 border rounded">
-        <h2 className="text-xl font-bold mb-2">API Response</h2>
-        {apiResponse && (
-          <div className="bg-green-50 p-3 rounded">
-            <p>{apiResponse}</p>
-          </div>
-        )}
-        {error && (
-          <div className="bg-red-50 p-3 rounded text-red-600">
-            <p>Error: {error}</p>
-          </div>
-        )}
-      </div>
-
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+    <div className="app">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<RoomPage />} />
+        </Routes>
+      </BrowserRouter>
+    </div>
   );
 }
 
diff --git a/fe/src/components/ui/button.tsx b/fe/src/components/ui/button.tsx
new file mode 100644
index 0000000..36496a2
--- /dev/null
+++ b/fe/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/fe/src/index.css b/fe/src/index.css
index 6119ad9..eea54b1 100644
--- a/fe/src/index.css
+++ b/fe/src/index.css
@@ -1,68 +1,80 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
-a:hover {
-  color: #535bf2;
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
-body {
+:root {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
+  padding: 0;
 
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
+  color-scheme: light;
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
 }
 
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+* {
+  box-sizing: border-box;
 }
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
new file mode 100644
index 0000000..bd0c391
--- /dev/null
+++ b/fe/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
new file mode 100644
index 0000000..2ad8476
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
@@ -0,0 +1,12 @@
+import { Button } from '@/components/ui/button';
+
+const RoomHeader = () => {
+  return (
+    <div className="flex justify-between items-center">
+      <span className="text-2xl font-bold">방 목록</span>
+      <Button>방 만들기</Button>
+    </div>
+  );
+};
+
+export default RoomHeader;
diff --git a/fe/src/pages/RoomPage/index.tsx b/fe/src/pages/RoomPage/index.tsx
new file mode 100644
index 0000000..b788148
--- /dev/null
+++ b/fe/src/pages/RoomPage/index.tsx
@@ -0,0 +1,11 @@
+import RoomHeader from './RoomHeader/RoomHeader';
+
+const RoomPage = () => {
+  return (
+    <div>
+      <RoomHeader />
+    </div>
+  );
+};
+
+export default RoomPage;
diff --git a/fe/tailwind.config.js b/fe/tailwind.config.js
new file mode 100644
index 0000000..4a40632
--- /dev/null
+++ b/fe/tailwind.config.js
@@ -0,0 +1,57 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ['class'],
+    content: ['./index.html', './src/**/*.{ts,tsx,js,jsx}'],
+  theme: {
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
diff --git a/fe/tsconfig.app.json b/fe/tsconfig.app.json
index f867de0..a85d5f3 100644
--- a/fe/tsconfig.app.json
+++ b/fe/tsconfig.app.json
@@ -16,11 +16,16 @@
     "jsx": "react-jsx",
 
     /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/fe/tsconfig.json b/fe/tsconfig.json
index 1ffef60..fec8c8e 100644
--- a/fe/tsconfig.json
+++ b/fe/tsconfig.json
@@ -3,5 +3,11 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }
diff --git a/fe/vite.config.ts b/fe/vite.config.ts
index a34cb95..9c35da5 100644
--- a/fe/vite.config.ts
+++ b/fe/vite.config.ts
@@ -1,6 +1,7 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,4 +11,9 @@ export default defineConfig({
     environment: 'jsdom',
     setupFiles: ['src/__tests__/setup.ts'],
   },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 });

From e0586131bf54596f2af99e0ca3b37f838fe523b7 Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Mon, 4 Nov 2024 22:31:53 +0900
Subject: [PATCH 03/12] =?UTF-8?q?feat:=20SearchBar=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84=20(#26)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/components/common/SearchBar.tsx | 17 +++++++++++++++++
 fe/src/components/ui/input.tsx         | 25 +++++++++++++++++++++++++
 fe/src/pages/RoomPage/index.tsx        |  2 ++
 3 files changed, 44 insertions(+)
 create mode 100644 fe/src/components/common/SearchBar.tsx
 create mode 100644 fe/src/components/ui/input.tsx

diff --git a/fe/src/components/common/SearchBar.tsx b/fe/src/components/common/SearchBar.tsx
new file mode 100644
index 0000000..6d5ecc9
--- /dev/null
+++ b/fe/src/components/common/SearchBar.tsx
@@ -0,0 +1,17 @@
+import { Input } from '@/components/ui/input';
+import { FiSearch } from 'react-icons/fi';
+
+const SearchBar = () => {
+  return (
+    <form className="relative w-full mt-6">
+      <FiSearch className="absolute left-2 top-3 h-4 w-4 text-muted-foreground" />
+      <Input
+        type="search"
+        placeholder="검색어를 입력하세요..."
+        className="pl-8"
+      />
+    </form>
+  );
+};
+
+export default SearchBar;
diff --git a/fe/src/components/ui/input.tsx b/fe/src/components/ui/input.tsx
new file mode 100644
index 0000000..a921025
--- /dev/null
+++ b/fe/src/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/fe/src/pages/RoomPage/index.tsx b/fe/src/pages/RoomPage/index.tsx
index b788148..c9e59b5 100644
--- a/fe/src/pages/RoomPage/index.tsx
+++ b/fe/src/pages/RoomPage/index.tsx
@@ -1,9 +1,11 @@
+import SearchBar from '@/components/common/SearchBar';
 import RoomHeader from './RoomHeader/RoomHeader';
 
 const RoomPage = () => {
   return (
     <div>
       <RoomHeader />
+      <SearchBar />
     </div>
   );
 };

From 8c513e11407710bb924138a212117d2a0a1e2deb Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Tue, 5 Nov 2024 14:51:57 +0900
Subject: [PATCH 04/12] =?UTF-8?q?feat:=20RoomDialog=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84=20(#27)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

방 만들기 버튼 클릭 시 Dialog 띄우기
---
 fe/package-lock.json                          | 436 +++++++++++++++++-
 fe/package.json                               |   2 +
 fe/src/components/ui/dialog.tsx               | 120 +++++
 fe/src/components/ui/label.tsx                |  24 +
 .../pages/RoomPage/RoomDialog/RoomDialog.tsx  |  61 +++
 .../pages/RoomPage/RoomHeader/RoomHeader.tsx  |  16 +-
 fe/src/types/room.ts                          |   4 +
 7 files changed, 658 insertions(+), 5 deletions(-)
 create mode 100644 fe/src/components/ui/dialog.tsx
 create mode 100644 fe/src/components/ui/label.tsx
 create mode 100644 fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
 create mode 100644 fe/src/types/room.ts

diff --git a/fe/package-lock.json b/fe/package-lock.json
index 0fb9fd3..df97c61 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -8,6 +8,8 @@
       "name": "fe",
       "version": "0.0.0",
       "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -994,6 +996,11 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -1008,6 +1015,226 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -1025,6 +1252,68 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -1442,7 +1731,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1907,6 +2196,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -2599,6 +2899,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -3340,6 +3645,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -3642,6 +3955,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -5004,6 +5325,51 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "6.27.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
@@ -5034,6 +5400,28 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5832,6 +6220,11 @@
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
       "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -6013,6 +6406,47 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/fe/package.json b/fe/package.json
index e70f6ac..0ea66ac 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -12,6 +12,8 @@
   },
   "format": "prettier --write ./src",
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/fe/src/components/ui/dialog.tsx b/fe/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..c23630e
--- /dev/null
+++ b/fe/src/components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/fe/src/components/ui/label.tsx b/fe/src/components/ui/label.tsx
new file mode 100644
index 0000000..683faa7
--- /dev/null
+++ b/fe/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
new file mode 100644
index 0000000..f4a144a
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
@@ -0,0 +1,61 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { RoomDialogProps } from '@/types/room';
+
+const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>방 만들기</DialogTitle>
+          <DialogDescription>
+            방 제목과 사용하실 닉네임을 입력해주세요.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="roomName" className="text-right">
+              방 제목
+            </Label>
+            <Input
+              id="roomName"
+              placeholder="방 제목을 입력하세요"
+              className="col-span-3"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="nickname" className="text-right">
+              닉네임
+            </Label>
+            <Input
+              id="nickname"
+              placeholder="닉네임을 입력하세요"
+              className="col-span-3"
+            />
+          </div>
+        </div>
+        <DialogFooter className="gap-2 mt-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+          >
+            취소
+          </Button>
+          <Button type="button">확인</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RoomDialog;
diff --git a/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
index 2ad8476..e1cd8dd 100644
--- a/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
+++ b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
@@ -1,11 +1,19 @@
 import { Button } from '@/components/ui/button';
+import { useState } from 'react';
+import RoomDialog from '../RoomDialog/RoomDialog';
 
 const RoomHeader = () => {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
   return (
-    <div className="flex justify-between items-center">
-      <span className="text-2xl font-bold">방 목록</span>
-      <Button>방 만들기</Button>
-    </div>
+    <>
+      <div className="flex justify-between items-center">
+        <span className="text-2xl font-bold">방 목록</span>
+        <Button onClick={() => setIsDialogOpen(true)}>방 만들기</Button>
+      </div>
+
+      <RoomDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} />
+    </>
   );
 };
 
diff --git a/fe/src/types/room.ts b/fe/src/types/room.ts
new file mode 100644
index 0000000..4bfbfa8
--- /dev/null
+++ b/fe/src/types/room.ts
@@ -0,0 +1,4 @@
+export interface RoomDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}

From 55e234836a65abcbe357b74367d0604e693c6565 Mon Sep 17 00:00:00 2001
From: Nahyun <from.owol@gmail.com>
Date: Tue, 5 Nov 2024 15:01:28 +0900
Subject: [PATCH 05/12] =?UTF-8?q?chore:=20CODEOWNERS=20=EC=9E=91=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/CODEOWNERS | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 .github/CODEOWNERS

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 0000000..8299426
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1 @@
+* @dev-taewon-kim @student079 @studioOwol
\ No newline at end of file

From de6d9d613ec56fe60b057480e85341808f23570a Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Tue, 5 Nov 2024 19:52:54 +0900
Subject: [PATCH 06/12] =?UTF-8?q?feat:=20GameRoom=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20Paginatio?=
 =?UTF-8?q?n=20UI=20=EA=B5=AC=ED=98=84=20(#35)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/package-lock.json                          | 31 +++++++-
 fe/package.json                               |  3 +-
 fe/src/App.css                                | 36 ---------
 fe/src/components/ui/badge.tsx                | 36 +++++++++
 fe/src/components/ui/card.tsx                 | 79 +++++++++++++++++++
 .../pages/RoomPage/RoomDialog/RoomDialog.tsx  | 32 +++++++-
 fe/src/pages/RoomPage/RoomList/GameRoom.tsx   | 42 ++++++++++
 fe/src/pages/RoomPage/RoomList/Pagination.tsx | 45 +++++++++++
 fe/src/pages/RoomPage/RoomList/RoomList.tsx   | 54 +++++++++++++
 fe/src/pages/RoomPage/index.tsx               |  2 +
 fe/src/store/useRoomStore.ts                  | 21 +++++
 fe/src/types/room.ts                          | 23 ++++++
 12 files changed, 364 insertions(+), 40 deletions(-)
 create mode 100644 fe/src/components/ui/badge.tsx
 create mode 100644 fe/src/components/ui/card.tsx
 create mode 100644 fe/src/pages/RoomPage/RoomList/GameRoom.tsx
 create mode 100644 fe/src/pages/RoomPage/RoomList/Pagination.tsx
 create mode 100644 fe/src/pages/RoomPage/RoomList/RoomList.tsx
 create mode 100644 fe/src/store/useRoomStore.ts

diff --git a/fe/package-lock.json b/fe/package-lock.json
index df97c61..248bff4 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -20,7 +20,8 @@
         "react-router-dom": "^6.27.0",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
-        "uuid": "^11.0.2"
+        "uuid": "^11.0.2",
+        "zustand": "^5.0.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.13.0",
@@ -6919,6 +6920,34 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.1.tgz",
+      "integrity": "sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==",
+      "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
+        }
+      }
     }
   }
 }
diff --git a/fe/package.json b/fe/package.json
index 0ea66ac..83d4102 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -24,7 +24,8 @@
     "react-router-dom": "^6.27.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.2",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
diff --git a/fe/src/App.css b/fe/src/App.css
index b9d355d..902778b 100644
--- a/fe/src/App.css
+++ b/fe/src/App.css
@@ -4,39 +4,3 @@
   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/fe/src/components/ui/badge.tsx b/fe/src/components/ui/badge.tsx
new file mode 100644
index 0000000..f000e3e
--- /dev/null
+++ b/fe/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/fe/src/components/ui/card.tsx b/fe/src/components/ui/card.tsx
new file mode 100644
index 0000000..f62edea
--- /dev/null
+++ b/fe/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
index f4a144a..e77e874 100644
--- a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
+++ b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
@@ -9,9 +9,23 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import useRoomStore from '@/store/useRoomStore';
 import { RoomDialogProps } from '@/types/room';
+import { useState } from 'react';
 
 const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
+  const [roomName, setRoomName] = useState('');
+  const [nickname, setNickname] = useState('');
+
+  const addRoom = useRoomStore((state) => state.addRoom);
+
+  const handleSubmit = () => {
+    addRoom(roomName.trim(), nickname.trim());
+    setRoomName('');
+    setNickname('');
+    onOpenChange(false);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
@@ -28,6 +42,10 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
             </Label>
             <Input
               id="roomName"
+              value={roomName}
+              onChange={(e) => {
+                setRoomName(e.target.value);
+              }}
               placeholder="방 제목을 입력하세요"
               className="col-span-3"
             />
@@ -38,6 +56,10 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
             </Label>
             <Input
               id="nickname"
+              value={nickname}
+              onChange={(e) => {
+                setNickname(e.target.value);
+              }}
               placeholder="닉네임을 입력하세요"
               className="col-span-3"
             />
@@ -47,11 +69,17 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
           <Button
             type="button"
             variant="outline"
-            onClick={() => onOpenChange(false)}
+            onClick={() => {
+              setRoomName('');
+              setNickname('');
+              onOpenChange(false);
+            }}
           >
             취소
           </Button>
-          <Button type="button">확인</Button>
+          <Button type="button" onClick={handleSubmit}>
+            확인
+          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
new file mode 100644
index 0000000..1e03484
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
@@ -0,0 +1,42 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { GameRoomProps } from '@/types/room';
+import { FaCircle, FaCrown, FaUsers } from 'react-icons/fa6';
+
+const GameRoom = ({ room }: GameRoomProps) => {
+  return (
+    <Card className="flex w-full mt-2">
+      <CardHeader className="space-y-1">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-xl">{room.name}</CardTitle>
+        </div>
+        <div className="space-y-2 text-md text-muted-foreground px-1">
+          <div className="flex items-center gap-2">
+            <FaCrown className="text-yellow-500" />
+            <span>방장: {room.creator}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <FaCircle
+              className={`text-sm ${room.isGameStarted ? 'text-red-500' : 'text-green-500'}`}
+            />
+            <span>
+              상태:{' '}
+              <span
+                className={
+                  room.isGameStarted ? 'text-red-500' : 'text-green-500'
+                }
+              >
+                {room.isGameStarted ? '게임 중' : '대기 중'}
+              </span>
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <FaUsers className="text-gray-500" />
+            <span>인원 수: {room.players.length} / 4</span>
+          </div>
+        </div>
+      </CardHeader>
+    </Card>
+  );
+};
+
+export default GameRoom;
diff --git a/fe/src/pages/RoomPage/RoomList/Pagination.tsx b/fe/src/pages/RoomPage/RoomList/Pagination.tsx
new file mode 100644
index 0000000..3357992
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomList/Pagination.tsx
@@ -0,0 +1,45 @@
+import { Button } from '@/components/ui/button';
+import { PaginationProps } from '@/types/room';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
+
+const Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) => {
+  return (
+    <div className="flex items-center justify-center gap-4 mt-6">
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 0}
+      >
+        <FaChevronLeft className="w-4 h-4" />
+      </Button>
+      <div className="flex items-center gap-2">
+        {Array.from({ length: totalPages }, (_, i) => (
+          <Button
+            key={i}
+            variant={currentPage === i ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onPageChange(i)}
+            className="w-8 h-8"
+          >
+            {i + 1}
+          </Button>
+        ))}
+      </div>
+      <Button
+        variant="outline"
+        size="icon"
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages - 1}
+      >
+        <FaChevronRight className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+};
+
+export default Pagination;
diff --git a/fe/src/pages/RoomPage/RoomList/RoomList.tsx b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
new file mode 100644
index 0000000..c6bb7a1
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
@@ -0,0 +1,54 @@
+import { Room } from '@/types/room';
+import { useEffect, useState } from 'react';
+import GameRoom from './GameRoom';
+import Pagination from './Pagination';
+import useRoomStore from '@/store/useRoomStore';
+
+const RoomList = () => {
+  const rooms = useRoomStore((state) => state.rooms);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const ROOMS_PER_PAGE = 9;
+  const totalPages = Math.ceil(rooms.length / ROOMS_PER_PAGE);
+
+  const currentRooms = rooms.slice(
+    currentPage * ROOMS_PER_PAGE,
+    (currentPage + 1) * ROOMS_PER_PAGE
+  );
+
+  useEffect(() => {
+    if (rooms.length > ROOMS_PER_PAGE * (currentPage + 1)) {
+      setCurrentPage(currentPage + 1);
+    }
+  }, [rooms.length, totalPages]);
+
+  return (
+    <div className="space-y-6 max-h-screen mt-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        {currentRooms.map((room) => (
+          <GameRoom key={room.id} room={room} />
+        ))}
+        {currentRooms.length > 0 &&
+          currentRooms.length < ROOMS_PER_PAGE &&
+          Array.from({ length: ROOMS_PER_PAGE - currentRooms.length }).map(
+            (_, i) => <div key={`empty-${i}`} className="w-full h-0"></div>
+          )}
+      </div>
+
+      {rooms.length > ROOMS_PER_PAGE && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={setCurrentPage}
+        />
+      )}
+      {rooms.length === 0 && (
+        <div className="text-center py-8 text-muted-foreground">
+          생성된 방이 없습니다.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default RoomList;
diff --git a/fe/src/pages/RoomPage/index.tsx b/fe/src/pages/RoomPage/index.tsx
index c9e59b5..d41b502 100644
--- a/fe/src/pages/RoomPage/index.tsx
+++ b/fe/src/pages/RoomPage/index.tsx
@@ -1,11 +1,13 @@
 import SearchBar from '@/components/common/SearchBar';
 import RoomHeader from './RoomHeader/RoomHeader';
+import RoomList from './RoomList/RoomList';
 
 const RoomPage = () => {
   return (
     <div>
       <RoomHeader />
       <SearchBar />
+      <RoomList />
     </div>
   );
 };
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
new file mode 100644
index 0000000..881f483
--- /dev/null
+++ b/fe/src/store/useRoomStore.ts
@@ -0,0 +1,21 @@
+import { Room, RoomStore } from '@/types/room';
+import { create } from 'zustand';
+
+const useRoomStore = create<RoomStore>((set) => ({
+  rooms: [],
+  addRoom: (roomName: string, nickname: string) => {
+    const newRoom: Room = {
+      id: Math.random().toString(36).substr(2, 9),
+      name: roomName,
+      creator: nickname,
+      players: [nickname],
+      isGameStarted: false,
+    };
+
+    set((state) => ({
+      rooms: [...state.rooms, newRoom],
+    }));
+  },
+}));
+
+export default useRoomStore;
diff --git a/fe/src/types/room.ts b/fe/src/types/room.ts
index 4bfbfa8..e0eefbf 100644
--- a/fe/src/types/room.ts
+++ b/fe/src/types/room.ts
@@ -2,3 +2,26 @@ export interface RoomDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
 }
+
+export interface Room {
+  id: string;
+  name: string;
+  creator: string;
+  players: string[];
+  isGameStarted: boolean;
+}
+
+export interface GameRoomProps {
+  room: Room;
+}
+
+export interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+export interface RoomStore {
+  rooms: Room[];
+  addRoom: (roomName: string, nickname: string) => void;
+}

From d0fd6c1a9ccf38c75f4a02c04d1993fe135d2c8c Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:51:59 +0900
Subject: [PATCH 07/12] =?UTF-8?q?[FE]=20Game=20Page=20=EB=B0=8F=20Player?=
 =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?(#36)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 전역 스타일 코드 수정

* chore: devtools 사용, uuid로 id 생성

* refactor: usePagination hook 분리 및 상수화

* feat: Dialog 확인 버튼 클릭 시 GamePage로 이동

* chore: 전역 스타일 및 상수 객체명 변경

* feat: Player 컴포넌트 생성 및 Game Page 구현

VolumeBar 컴포넌트 포함

* chore: 전역 스타일 수정
---
 fe/package-lock.json                          | 300 ++++++++++++++++++
 fe/package.json                               |   1 +
 fe/src/App.css                                |   7 +-
 fe/src/App.tsx                                |   2 +
 fe/src/components/ui/slider.tsx               |  26 ++
 fe/src/constants/rules.ts                     |   4 +
 fe/src/hooks/usePagination.ts                 |  31 ++
 fe/src/index.css                              |  17 +-
 fe/src/pages/GamePage/PlayerList/Player.tsx   |  27 ++
 .../pages/GamePage/PlayerList/PlayerList.tsx  |  23 ++
 .../pages/GamePage/PlayerList/VolumeBar.tsx   |  27 ++
 fe/src/pages/GamePage/index.tsx               |  31 ++
 .../pages/RoomPage/RoomDialog/RoomDialog.tsx  |  26 +-
 fe/src/pages/RoomPage/RoomList/GameRoom.tsx   |   2 +-
 fe/src/pages/RoomPage/RoomList/RoomList.tsx   |  37 +--
 fe/src/store/useRoomStore.ts                  |  51 ++-
 fe/src/types/player.ts                        |  14 +
 fe/src/types/room.ts                          |   3 +-
 18 files changed, 571 insertions(+), 58 deletions(-)
 create mode 100644 fe/src/components/ui/slider.tsx
 create mode 100644 fe/src/constants/rules.ts
 create mode 100644 fe/src/hooks/usePagination.ts
 create mode 100644 fe/src/pages/GamePage/PlayerList/Player.tsx
 create mode 100644 fe/src/pages/GamePage/PlayerList/PlayerList.tsx
 create mode 100644 fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
 create mode 100644 fe/src/pages/GamePage/index.tsx
 create mode 100644 fe/src/types/player.ts

diff --git a/fe/package-lock.json b/fe/package-lock.json
index 248bff4..472af25 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -849,6 +850,40 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -997,11 +1032,77 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
@@ -1065,6 +1166,20 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
@@ -1168,6 +1283,51 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
@@ -1236,6 +1396,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.1.tgz",
+      "integrity": "sha512-bEzQoDW0XP+h/oGbutF5VMWJPAl/UU8IJjr7h02SOHDIIIxq+cep8nItVNoBV+OMmahCdqdF38FTpmXoqQUGvw==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -1253,6 +1445,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz",
+      "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1315,6 +1540,81 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
+      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
diff --git a/fe/package.json b/fe/package.json
index 83d4102..ebcf8f4 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/fe/src/App.css b/fe/src/App.css
index 902778b..8b13789 100644
--- a/fe/src/App.css
+++ b/fe/src/App.css
@@ -1,6 +1 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
index 7d12776..f69a8b4 100644
--- a/fe/src/App.tsx
+++ b/fe/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
 import RoomPage from './pages/RoomPage';
+import GamePage from './pages/GamePage';
 
 function App() {
   return (
@@ -8,6 +9,7 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<RoomPage />} />
+          <Route path="/game/:roomId" element={<GamePage />} />
         </Routes>
       </BrowserRouter>
     </div>
diff --git a/fe/src/components/ui/slider.tsx b/fe/src/components/ui/slider.tsx
new file mode 100644
index 0000000..e161dae
--- /dev/null
+++ b/fe/src/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }
diff --git a/fe/src/constants/rules.ts b/fe/src/constants/rules.ts
new file mode 100644
index 0000000..f17a3b9
--- /dev/null
+++ b/fe/src/constants/rules.ts
@@ -0,0 +1,4 @@
+export const RULES = Object.freeze({
+  maxPage: 9,
+  maxPlayer: 4,
+});
diff --git a/fe/src/hooks/usePagination.ts b/fe/src/hooks/usePagination.ts
new file mode 100644
index 0000000..497a14c
--- /dev/null
+++ b/fe/src/hooks/usePagination.ts
@@ -0,0 +1,31 @@
+import useRoomStore from '@/store/useRoomStore';
+import { useState, useEffect } from 'react';
+
+const ROOMS_PER_PAGE = 9;
+
+export const usePagination = () => {
+  const rooms = useRoomStore((state) => state.rooms);
+  const [currentPage, setCurrentPage] = useState(0);
+
+  const totalPages = Math.ceil(rooms.length / ROOMS_PER_PAGE);
+
+  const currentRooms = rooms.slice(
+    currentPage * ROOMS_PER_PAGE,
+    (currentPage + 1) * ROOMS_PER_PAGE
+  );
+
+  useEffect(() => {
+    if (rooms.length > ROOMS_PER_PAGE * (currentPage + 1)) {
+      setCurrentPage(currentPage + 1);
+    }
+  }, [rooms.length, currentPage]);
+
+  return {
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    currentRooms,
+    isEmpty: rooms.length === 0,
+    showPagination: rooms.length > ROOMS_PER_PAGE,
+  };
+};
diff --git a/fe/src/index.css b/fe/src/index.css
index eea54b1..ac5f9f9 100644
--- a/fe/src/index.css
+++ b/fe/src/index.css
@@ -69,7 +69,7 @@
   margin: 0;
   padding: 0;
 
-  color-scheme: light;
+  color-scheme: light dark;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -78,3 +78,18 @@
 * {
   box-sizing: border-box;
 }
+
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  margin: 0;
+}
+
+.app {
+  @apply flex flex-col mx-auto justify-center max-w-[1074px] lg:px-0 p-8;
+}
diff --git a/fe/src/pages/GamePage/PlayerList/Player.tsx b/fe/src/pages/GamePage/PlayerList/Player.tsx
new file mode 100644
index 0000000..5e163d7
--- /dev/null
+++ b/fe/src/pages/GamePage/PlayerList/Player.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { PlayerProps } from '@/types/player';
+import { BsMicFill, BsMicMuteFill } from 'react-icons/bs';
+import { FaCrown } from 'react-icons/fa6';
+import VolumeBar from './VolumeBar';
+
+const Player = ({
+  nickname,
+  isCreator = false,
+  isAudioOn,
+  isReady = false,
+}: PlayerProps) => {
+  return (
+    <Card className="h-full">
+      <CardContent className="flex items-center justify-between h-full p-4">
+        <div className="flex items-center gap-2">
+          {isCreator && <FaCrown className="text-yellow-500" />}
+          <span className="font-medium">{nickname}</span>
+          {isReady && <span className="text-sm text-green-500">준비 완료</span>}
+        </div>
+        <VolumeBar isOn={isAudioOn} />
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Player;
diff --git a/fe/src/pages/GamePage/PlayerList/PlayerList.tsx b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
new file mode 100644
index 0000000..dbd155a
--- /dev/null
+++ b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
@@ -0,0 +1,23 @@
+import { RULES } from '@/constants/rules';
+import { PlayerListProps } from '@/types/player';
+import Player from './Player';
+
+const PlayerList = ({ players }: PlayerListProps) => {
+  const emptySlots = RULES.maxPlayer - players.length;
+
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {players.map((player) => (
+        <Player key={player.nickname} {...player} />
+      ))}
+      {Array.from({ length: emptySlots }).map((_, index) => (
+        <div
+          key={`empty-${index}`}
+          className="w-full h-[76px] border border-dashed rounded-lg border-muted-foreground/25"
+        />
+      ))}
+    </div>
+  );
+};
+
+export default PlayerList;
diff --git a/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx b/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
new file mode 100644
index 0000000..23e3ef7
--- /dev/null
+++ b/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
@@ -0,0 +1,27 @@
+import { Slider } from '@/components/ui/slider';
+import { HiSpeakerWave, HiSpeakerXMark } from 'react-icons/hi2';
+import { useState } from 'react';
+import { AudioControlProps } from '@/types/player';
+
+const VolumeBar = ({ isOn }: AudioControlProps) => {
+  const [volume, setVolume] = useState(50);
+
+  return (
+    <div className="flex items-center gap-2">
+      {volume > 0 && isOn ? (
+        <HiSpeakerWave className="h-4 w-4" />
+      ) : (
+        <HiSpeakerXMark className="h-4 w-4 text-muted-foreground" />
+      )}
+      <Slider
+        defaultValue={[volume]}
+        max={100}
+        step={1}
+        className="w-24"
+        onValueChange={(value) => setVolume(value[0])}
+      />
+    </div>
+  );
+};
+
+export default VolumeBar;
diff --git a/fe/src/pages/GamePage/index.tsx b/fe/src/pages/GamePage/index.tsx
new file mode 100644
index 0000000..da3c2ba
--- /dev/null
+++ b/fe/src/pages/GamePage/index.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import useRoomStore from '@/store/useRoomStore';
+import PlayerList from './PlayerList/PlayerList';
+
+const GamePage = () => {
+  const [isAudioOn, setIsAudioOn] = useState(true);
+  const { currentRoom } = useRoomStore();
+
+  if (!currentRoom) return null;
+
+  return (
+    <div className="h-screen relative p-4">
+      <div className="space-y-6">
+        <div className="h-[26rem] bg-muted rounded-lg flex items-center justify-center">
+          Game Screen
+        </div>
+        <PlayerList
+          players={currentRoom.players.map((nickname) => ({
+            nickname,
+            isCreator: nickname === currentRoom.creator,
+            isAudioOn,
+            isReady: false,
+          }))}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GamePage;
diff --git a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
index e77e874..17eb4dc 100644
--- a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
+++ b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
@@ -12,20 +12,28 @@ import { Label } from '@/components/ui/label';
 import useRoomStore from '@/store/useRoomStore';
 import { RoomDialogProps } from '@/types/room';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
   const [roomName, setRoomName] = useState('');
   const [nickname, setNickname] = useState('');
+  const navigate = useNavigate();
 
   const addRoom = useRoomStore((state) => state.addRoom);
 
-  const handleSubmit = () => {
-    addRoom(roomName.trim(), nickname.trim());
+  const resetAndClose = () => {
     setRoomName('');
     setNickname('');
     onOpenChange(false);
   };
 
+  const handleSubmit = () => {
+    if (!roomName.trim() || !nickname.trim()) return;
+    const roomId = addRoom(roomName.trim(), nickname.trim());
+    resetAndClose();
+    navigate(`/game/${roomId}`);
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-md">
@@ -66,18 +74,14 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
           </div>
         </div>
         <DialogFooter className="gap-2 mt-2">
+          <Button type="button" variant="outline" onClick={resetAndClose}>
+            취소
+          </Button>
           <Button
             type="button"
-            variant="outline"
-            onClick={() => {
-              setRoomName('');
-              setNickname('');
-              onOpenChange(false);
-            }}
+            onClick={handleSubmit}
+            disabled={!roomName.trim() || !nickname.trim()}
           >
-            취소
-          </Button>
-          <Button type="button" onClick={handleSubmit}>
             확인
           </Button>
         </DialogFooter>
diff --git a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
index 1e03484..85e208d 100644
--- a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
+++ b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 import { GameRoomProps } from '@/types/room';
 import { FaCircle, FaCrown, FaUsers } from 'react-icons/fa6';
 
diff --git a/fe/src/pages/RoomPage/RoomList/RoomList.tsx b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
index c6bb7a1..359c090 100644
--- a/fe/src/pages/RoomPage/RoomList/RoomList.tsx
+++ b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
@@ -1,26 +1,17 @@
-import { Room } from '@/types/room';
-import { useEffect, useState } from 'react';
 import GameRoom from './GameRoom';
 import Pagination from './Pagination';
-import useRoomStore from '@/store/useRoomStore';
+import { usePagination } from '@/hooks/usePagination';
+import { RULES } from '@/constants/rules';
 
 const RoomList = () => {
-  const rooms = useRoomStore((state) => state.rooms);
-  const [currentPage, setCurrentPage] = useState(0);
-
-  const ROOMS_PER_PAGE = 9;
-  const totalPages = Math.ceil(rooms.length / ROOMS_PER_PAGE);
-
-  const currentRooms = rooms.slice(
-    currentPage * ROOMS_PER_PAGE,
-    (currentPage + 1) * ROOMS_PER_PAGE
-  );
-
-  useEffect(() => {
-    if (rooms.length > ROOMS_PER_PAGE * (currentPage + 1)) {
-      setCurrentPage(currentPage + 1);
-    }
-  }, [rooms.length, totalPages]);
+  const {
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    currentRooms,
+    isEmpty,
+    showPagination,
+  } = usePagination();
 
   return (
     <div className="space-y-6 max-h-screen mt-2">
@@ -29,20 +20,20 @@ const RoomList = () => {
           <GameRoom key={room.id} room={room} />
         ))}
         {currentRooms.length > 0 &&
-          currentRooms.length < ROOMS_PER_PAGE &&
-          Array.from({ length: ROOMS_PER_PAGE - currentRooms.length }).map(
+          currentRooms.length < RULES.maxPage &&
+          Array.from({ length: RULES.maxPage - currentRooms.length }).map(
             (_, i) => <div key={`empty-${i}`} className="w-full h-0"></div>
           )}
       </div>
 
-      {rooms.length > ROOMS_PER_PAGE && (
+      {showPagination && (
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
           onPageChange={setCurrentPage}
         />
       )}
-      {rooms.length === 0 && (
+      {isEmpty && (
         <div className="text-center py-8 text-muted-foreground">
           생성된 방이 없습니다.
         </div>
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
index 881f483..ba39aad 100644
--- a/fe/src/store/useRoomStore.ts
+++ b/fe/src/store/useRoomStore.ts
@@ -1,21 +1,42 @@
 import { Room, RoomStore } from '@/types/room';
+import { v4 } from 'uuid';
 import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
 
-const useRoomStore = create<RoomStore>((set) => ({
-  rooms: [],
-  addRoom: (roomName: string, nickname: string) => {
-    const newRoom: Room = {
-      id: Math.random().toString(36).substr(2, 9),
-      name: roomName,
-      creator: nickname,
-      players: [nickname],
-      isGameStarted: false,
-    };
+const useRoomStore = create<RoomStore>()(
+  devtools(
+    (set, get) => ({
+      rooms: [],
+      currentRoom: null,
+      addRoom: (roomName: string, nickname: string) => {
+        const roomId = v4();
+        const newRoom: Room = {
+          id: roomId,
+          name: roomName,
+          creator: nickname,
+          players: [nickname],
+          isGameStarted: false,
+        };
 
-    set((state) => ({
-      rooms: [...state.rooms, newRoom],
-    }));
-  },
-}));
+        set((state) => ({
+          rooms: [...state.rooms, newRoom],
+          currentRoom: newRoom,
+        }));
+
+        return roomId;
+      },
+      setCurrentRoom: (roomId: string) => {
+        const room = get().rooms.find((r) => r.id === roomId);
+        set((state) => ({
+          ...state,
+          currentRoom: room || null,
+        }));
+      },
+    }),
+    {
+      name: 'Room Store',
+    }
+  )
+);
 
 export default useRoomStore;
diff --git a/fe/src/types/player.ts b/fe/src/types/player.ts
new file mode 100644
index 0000000..c95faa3
--- /dev/null
+++ b/fe/src/types/player.ts
@@ -0,0 +1,14 @@
+export interface PlayerProps {
+  nickname: string;
+  isCreator?: boolean;
+  isAudioOn: boolean;
+  isReady?: boolean;
+}
+
+export interface PlayerListProps {
+  players: PlayerProps[];
+}
+
+export interface AudioControlProps {
+  isOn: boolean;
+}
diff --git a/fe/src/types/room.ts b/fe/src/types/room.ts
index e0eefbf..eacdb73 100644
--- a/fe/src/types/room.ts
+++ b/fe/src/types/room.ts
@@ -23,5 +23,6 @@ export interface PaginationProps {
 
 export interface RoomStore {
   rooms: Room[];
-  addRoom: (roomName: string, nickname: string) => void;
+  currentRoom: Room | null;
+  addRoom: (roomName: string, nickname: string) => string;
 }

From 0598c685e2791a914726a021944ca228b9a924c1 Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Thu, 7 Nov 2024 00:14:44 +0900
Subject: [PATCH 08/12] =?UTF-8?q?[FE]=20=EB=B0=A9=20=EB=A7=8C=EB=93=A4?=
 =?UTF-8?q?=EA=B8=B0=20WebSocket=20API=20=EC=9A=94=EC=B2=AD=20(#59)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: 함수 분리

* chore: 타입 재정의

* feat: WebSocket 방 만들기 요청

Socket.io 사용

* docs: README.md 수정

* refactor: Socket 요청 이벤트명 및 변수명 수정

* docs: README.md 업데이트
---
 fe/README.md                                  |  53 +---
 fe/package-lock.json                          | 262 ++++++------------
 fe/package.json                               |   1 +
 fe/src/api/socketApi.ts                       |  33 +++
 fe/src/pages/GamePage/PlayerList/Player.tsx   |  10 +-
 .../pages/GamePage/PlayerList/PlayerList.tsx  |   4 +-
 .../pages/GamePage/PlayerList/VolumeBar.tsx   |   2 +-
 fe/src/pages/GamePage/index.tsx               |   6 +-
 .../pages/RoomPage/RoomDialog/RoomDialog.tsx  |  43 ++-
 .../pages/RoomPage/RoomHeader/RoomHeader.tsx  |   6 +-
 fe/src/pages/RoomPage/RoomList/GameRoom.tsx   |  16 +-
 fe/src/pages/RoomPage/RoomList/Pagination.tsx |   2 +-
 fe/src/pages/RoomPage/RoomList/RoomList.tsx   |   2 +-
 fe/src/store/useRoomStore.ts                  |  42 ++-
 fe/src/types/{player.ts => playerTypes.ts}    |   4 +-
 fe/src/types/{room.ts => roomTypes.ts}        |  10 +-
 fe/src/types/socketTypes.ts                   |  14 +
 17 files changed, 218 insertions(+), 292 deletions(-)
 create mode 100644 fe/src/api/socketApi.ts
 rename fe/src/types/{player.ts => playerTypes.ts} (81%)
 rename fe/src/types/{room.ts => roomTypes.ts} (70%)
 create mode 100644 fe/src/types/socketTypes.ts

diff --git a/fe/README.md b/fe/README.md
index 74872fd..b665050 100644
--- a/fe/README.md
+++ b/fe/README.md
@@ -1,50 +1,7 @@
-# React + TypeScript + Vite
+## 🔍 문제 해결 과정
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+### Socket API 요청 구현을 다 했는데, 클라이언트 쪽에 아무 에러도 안 나고, emit & on 자체가 안 되는 상황 발생
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
+- **백엔드와 소통을 잘 하자..**
+- 원인은 이벤트명 정의를 서로 다르게 해서 (내 잘못ㅠ)
+- 나는 스네이크 케이스로, 백엔드는 카멜 케이스로 😇 죄송합니다,,
diff --git a/fe/package-lock.json b/fe/package-lock.json
index 472af25..e14f03d 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -19,6 +19,7 @@
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "react-router-dom": "^6.27.0",
+        "socket.io-client": "^4.8.1",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "uuid": "^11.0.2",
@@ -850,40 +851,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
-      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.8"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.12",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
-      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
-      "dependencies": {
-        "@floating-ui/core": "^1.6.0",
-        "@floating-ui/utils": "^0.2.8"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
-      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
-      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
-    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1042,28 +1009,6 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
-      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
@@ -1283,51 +1228,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
-      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.0",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-use-callback-ref": "1.1.0",
-        "@radix-ui/react-use-layout-effect": "1.1.0",
-        "@radix-ui/react-use-rect": "1.1.0",
-        "@radix-ui/react-use-size": "1.1.0",
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-context": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
-      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
@@ -1445,39 +1345,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.3.tgz",
-      "integrity": "sha512-Z4w1FIS0BqVFI2c1jZvb/uDVJijJjJ2ZMuPV81oVgTZ7g3BZxobplnMVvXtFWgtozdvYJ+MFWtwkM5S2HnAong==",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.0",
-        "@radix-ui/react-compose-refs": "1.1.0",
-        "@radix-ui/react-context": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.1",
-        "@radix-ui/react-id": "1.1.0",
-        "@radix-ui/react-popper": "1.2.0",
-        "@radix-ui/react-portal": "1.1.2",
-        "@radix-ui/react-presence": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.0",
-        "@radix-ui/react-slot": "1.1.0",
-        "@radix-ui/react-use-controllable-state": "1.1.0",
-        "@radix-ui/react-visually-hidden": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -1554,23 +1421,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-use-rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
-      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
-      "dependencies": {
-        "@radix-ui/rect": "1.1.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-use-size": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
@@ -1588,33 +1438,6 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.0.tgz",
-      "integrity": "sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==",
-      "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/rect": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
-      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
-    },
     "node_modules/@remix-run/router": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
@@ -1857,6 +1680,11 @@
         "win32"
       ]
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -3114,7 +2942,6 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -3250,6 +3077,46 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.2.tgz",
+      "integrity": "sha512-TAr+NKeoVTjEVW8P3iHguO1LO6RlUz9O5Y8o7EY0fU+gY1NYqas7NN3slpFtbXEsLMHk0h90fJMfKjRkQ0qUIw==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4976,8 +4843,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/mz": {
       "version": "2.7.0",
@@ -6056,6 +5922,32 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -7192,6 +7084,14 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/fe/package.json b/fe/package.json
index ebcf8f4..030608d 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-router-dom": "^6.27.0",
+    "socket.io-client": "^4.8.1",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^11.0.2",
diff --git a/fe/src/api/socketApi.ts b/fe/src/api/socketApi.ts
new file mode 100644
index 0000000..63c38d2
--- /dev/null
+++ b/fe/src/api/socketApi.ts
@@ -0,0 +1,33 @@
+import { Room } from '@/types/roomTypes';
+import {
+  ClientToServerEvents,
+  ServerToClientEvents,
+} from '@/types/socketTypes';
+import { io, Socket } from 'socket.io-client';
+
+const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
+
+const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+  `${SOCKET_BASE_URL}/rooms`,
+  {
+    transports: ['websocket'],
+    withCredentials: true,
+  }
+);
+
+export const createRoom = async (
+  roomName: string,
+  hostNickname: string
+): Promise<Room> => {
+  return new Promise((resolve, reject) => {
+    socket.emit('createRoom', { roomName, hostNickname });
+
+    socket.on('roomCreated', (room) => {
+      resolve(room);
+    });
+
+    socket.on('error', (error) => {
+      reject(error);
+    });
+  });
+};
diff --git a/fe/src/pages/GamePage/PlayerList/Player.tsx b/fe/src/pages/GamePage/PlayerList/Player.tsx
index 5e163d7..fc717b1 100644
--- a/fe/src/pages/GamePage/PlayerList/Player.tsx
+++ b/fe/src/pages/GamePage/PlayerList/Player.tsx
@@ -1,12 +1,12 @@
 import { Card, CardContent } from '@/components/ui/card';
-import { PlayerProps } from '@/types/player';
+import { PlayerProps } from '@/types/playerTypes';
 import { BsMicFill, BsMicMuteFill } from 'react-icons/bs';
 import { FaCrown } from 'react-icons/fa6';
 import VolumeBar from './VolumeBar';
 
 const Player = ({
-  nickname,
-  isCreator = false,
+  playerNickname,
+  isHost = false,
   isAudioOn,
   isReady = false,
 }: PlayerProps) => {
@@ -14,8 +14,8 @@ const Player = ({
     <Card className="h-full">
       <CardContent className="flex items-center justify-between h-full p-4">
         <div className="flex items-center gap-2">
-          {isCreator && <FaCrown className="text-yellow-500" />}
-          <span className="font-medium">{nickname}</span>
+          {isHost && <FaCrown className="text-yellow-500" />}
+          <span className="font-medium">{playerNickname}</span>
           {isReady && <span className="text-sm text-green-500">준비 완료</span>}
         </div>
         <VolumeBar isOn={isAudioOn} />
diff --git a/fe/src/pages/GamePage/PlayerList/PlayerList.tsx b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
index dbd155a..085f39e 100644
--- a/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
+++ b/fe/src/pages/GamePage/PlayerList/PlayerList.tsx
@@ -1,5 +1,5 @@
 import { RULES } from '@/constants/rules';
-import { PlayerListProps } from '@/types/player';
+import { PlayerListProps } from '@/types/playerTypes';
 import Player from './Player';
 
 const PlayerList = ({ players }: PlayerListProps) => {
@@ -8,7 +8,7 @@ const PlayerList = ({ players }: PlayerListProps) => {
   return (
     <div className="grid grid-cols-2 gap-4">
       {players.map((player) => (
-        <Player key={player.nickname} {...player} />
+        <Player key={player.playerNickname} {...player} />
       ))}
       {Array.from({ length: emptySlots }).map((_, index) => (
         <div
diff --git a/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx b/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
index 23e3ef7..434a695 100644
--- a/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
+++ b/fe/src/pages/GamePage/PlayerList/VolumeBar.tsx
@@ -1,7 +1,7 @@
 import { Slider } from '@/components/ui/slider';
 import { HiSpeakerWave, HiSpeakerXMark } from 'react-icons/hi2';
 import { useState } from 'react';
-import { AudioControlProps } from '@/types/player';
+import { AudioControlProps } from '@/types/playerTypes';
 
 const VolumeBar = ({ isOn }: AudioControlProps) => {
   const [volume, setVolume] = useState(50);
diff --git a/fe/src/pages/GamePage/index.tsx b/fe/src/pages/GamePage/index.tsx
index da3c2ba..4ef6340 100644
--- a/fe/src/pages/GamePage/index.tsx
+++ b/fe/src/pages/GamePage/index.tsx
@@ -16,9 +16,9 @@ const GamePage = () => {
           Game Screen
         </div>
         <PlayerList
-          players={currentRoom.players.map((nickname) => ({
-            nickname,
-            isCreator: nickname === currentRoom.creator,
+          players={currentRoom.players.map((playerNickname) => ({
+            playerNickname,
+            isHost: playerNickname === currentRoom.hostNickname,
             isAudioOn,
             isReady: false,
           }))}
diff --git a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
index 17eb4dc..65642c3 100644
--- a/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
+++ b/fe/src/pages/RoomPage/RoomDialog/RoomDialog.tsx
@@ -10,28 +10,40 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import useRoomStore from '@/store/useRoomStore';
-import { RoomDialogProps } from '@/types/room';
+import { RoomDialogProps } from '@/types/roomTypes';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
   const [roomName, setRoomName] = useState('');
-  const [nickname, setNickname] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [hostNickname, setHostNickname] = useState('');
   const navigate = useNavigate();
 
   const addRoom = useRoomStore((state) => state.addRoom);
 
   const resetAndClose = () => {
     setRoomName('');
-    setNickname('');
+    setHostNickname('');
+    setIsLoading(false);
     onOpenChange(false);
   };
 
-  const handleSubmit = () => {
-    if (!roomName.trim() || !nickname.trim()) return;
-    const roomId = addRoom(roomName.trim(), nickname.trim());
-    resetAndClose();
-    navigate(`/game/${roomId}`);
+  const handleSubmit = async () => {
+    if (!roomName.trim() || !hostNickname.trim()) return;
+
+    try {
+      setIsLoading(true);
+      const roomId = await addRoom(roomName.trim(), hostNickname.trim());
+
+      resetAndClose();
+      navigate(`/game/${roomId}`);
+    } catch (error) {
+      console.error('방 생성 실패:', error);
+      // TODO: 에러 처리 토스트 메시지로
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -56,6 +68,7 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
               }}
               placeholder="방 제목을 입력하세요"
               className="col-span-3"
+              disabled={isLoading}
             />
           </div>
           <div className="space-y-2">
@@ -64,23 +77,29 @@ const RoomDialog = ({ open, onOpenChange }: RoomDialogProps) => {
             </Label>
             <Input
               id="nickname"
-              value={nickname}
+              value={hostNickname}
               onChange={(e) => {
-                setNickname(e.target.value);
+                setHostNickname(e.target.value);
               }}
               placeholder="닉네임을 입력하세요"
               className="col-span-3"
+              disabled={isLoading}
             />
           </div>
         </div>
         <DialogFooter className="gap-2 mt-2">
-          <Button type="button" variant="outline" onClick={resetAndClose}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={resetAndClose}
+            disabled={isLoading}
+          >
             취소
           </Button>
           <Button
             type="button"
             onClick={handleSubmit}
-            disabled={!roomName.trim() || !nickname.trim()}
+            disabled={!roomName.trim() || !hostNickname.trim() || isLoading}
           >
             확인
           </Button>
diff --git a/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
index e1cd8dd..cb71ecd 100644
--- a/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
+++ b/fe/src/pages/RoomPage/RoomHeader/RoomHeader.tsx
@@ -5,11 +5,15 @@ import RoomDialog from '../RoomDialog/RoomDialog';
 const RoomHeader = () => {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
+  const handleDialogOpen = () => {
+    setIsDialogOpen(true);
+  };
+
   return (
     <>
       <div className="flex justify-between items-center">
         <span className="text-2xl font-bold">방 목록</span>
-        <Button onClick={() => setIsDialogOpen(true)}>방 만들기</Button>
+        <Button onClick={handleDialogOpen}>방 만들기</Button>
       </div>
 
       <RoomDialog open={isDialogOpen} onOpenChange={setIsDialogOpen} />
diff --git a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
index 85e208d..b336288 100644
--- a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
+++ b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
@@ -1,31 +1,35 @@
 import { Card, CardHeader, CardTitle } from '@/components/ui/card';
-import { GameRoomProps } from '@/types/room';
+import { GameRoomProps } from '@/types/roomTypes';
 import { FaCircle, FaCrown, FaUsers } from 'react-icons/fa6';
 
 const GameRoom = ({ room }: GameRoomProps) => {
+  const isGameStarted = (status: string) => {
+    return status === 'playing';
+  };
+
   return (
     <Card className="flex w-full mt-2">
       <CardHeader className="space-y-1">
         <div className="flex items-center justify-between">
-          <CardTitle className="text-xl">{room.name}</CardTitle>
+          <CardTitle className="text-xl">{room.roomName}</CardTitle>
         </div>
         <div className="space-y-2 text-md text-muted-foreground px-1">
           <div className="flex items-center gap-2">
             <FaCrown className="text-yellow-500" />
-            <span>방장: {room.creator}</span>
+            <span>방장: {room.hostNickname}</span>
           </div>
           <div className="flex items-center gap-2">
             <FaCircle
-              className={`text-sm ${room.isGameStarted ? 'text-red-500' : 'text-green-500'}`}
+              className={`text-sm ${isGameStarted(room.status) ? 'text-red-500' : 'text-green-500'}`}
             />
             <span>
               상태:{' '}
               <span
                 className={
-                  room.isGameStarted ? 'text-red-500' : 'text-green-500'
+                  isGameStarted(room.status) ? 'text-red-500' : 'text-green-500'
                 }
               >
-                {room.isGameStarted ? '게임 중' : '대기 중'}
+                {isGameStarted(room.status) ? '게임 중' : '대기 중'}
               </span>
             </span>
           </div>
diff --git a/fe/src/pages/RoomPage/RoomList/Pagination.tsx b/fe/src/pages/RoomPage/RoomList/Pagination.tsx
index 3357992..749e38e 100644
--- a/fe/src/pages/RoomPage/RoomList/Pagination.tsx
+++ b/fe/src/pages/RoomPage/RoomList/Pagination.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button';
-import { PaginationProps } from '@/types/room';
+import { PaginationProps } from '@/types/roomTypes';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6';
 
 const Pagination = ({
diff --git a/fe/src/pages/RoomPage/RoomList/RoomList.tsx b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
index 359c090..aa87e8b 100644
--- a/fe/src/pages/RoomPage/RoomList/RoomList.tsx
+++ b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
@@ -17,7 +17,7 @@ const RoomList = () => {
     <div className="space-y-6 max-h-screen mt-2">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {currentRooms.map((room) => (
-          <GameRoom key={room.id} room={room} />
+          <GameRoom key={room.roomId} room={room} />
         ))}
         {currentRooms.length > 0 &&
           currentRooms.length < RULES.maxPage &&
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
index ba39aad..3dc4685 100644
--- a/fe/src/store/useRoomStore.ts
+++ b/fe/src/store/useRoomStore.ts
@@ -1,36 +1,30 @@
-import { Room, RoomStore } from '@/types/room';
-import { v4 } from 'uuid';
+import { createRoom } from '@/api/socketApi';
+import { RoomStore } from '@/types/roomTypes';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
 const useRoomStore = create<RoomStore>()(
   devtools(
-    (set, get) => ({
+    (set) => ({
       rooms: [],
       currentRoom: null,
-      addRoom: (roomName: string, nickname: string) => {
-        const roomId = v4();
-        const newRoom: Room = {
-          id: roomId,
-          name: roomName,
-          creator: nickname,
-          players: [nickname],
-          isGameStarted: false,
-        };
 
-        set((state) => ({
-          rooms: [...state.rooms, newRoom],
-          currentRoom: newRoom,
-        }));
+      addRoom: async (
+        roomName: string,
+        hostNickname: string
+      ): Promise<string> => {
+        try {
+          const newRoom = await createRoom(roomName, hostNickname);
 
-        return roomId;
-      },
-      setCurrentRoom: (roomId: string) => {
-        const room = get().rooms.find((r) => r.id === roomId);
-        set((state) => ({
-          ...state,
-          currentRoom: room || null,
-        }));
+          set((state) => ({
+            rooms: [...state.rooms, newRoom],
+            currentRoom: newRoom,
+          }));
+          return newRoom.roomId;
+        } catch (error) {
+          console.error('방 생성 실패:', error);
+          throw error;
+        }
       },
     }),
     {
diff --git a/fe/src/types/player.ts b/fe/src/types/playerTypes.ts
similarity index 81%
rename from fe/src/types/player.ts
rename to fe/src/types/playerTypes.ts
index c95faa3..fd1d0f4 100644
--- a/fe/src/types/player.ts
+++ b/fe/src/types/playerTypes.ts
@@ -1,6 +1,6 @@
 export interface PlayerProps {
-  nickname: string;
-  isCreator?: boolean;
+  playerNickname: string;
+  isHost?: boolean;
   isAudioOn: boolean;
   isReady?: boolean;
 }
diff --git a/fe/src/types/room.ts b/fe/src/types/roomTypes.ts
similarity index 70%
rename from fe/src/types/room.ts
rename to fe/src/types/roomTypes.ts
index eacdb73..7234358 100644
--- a/fe/src/types/room.ts
+++ b/fe/src/types/roomTypes.ts
@@ -4,11 +4,11 @@ export interface RoomDialogProps {
 }
 
 export interface Room {
-  id: string;
-  name: string;
-  creator: string;
+  roomId: string;
+  roomName: string;
+  hostNickname: string;
   players: string[];
-  isGameStarted: boolean;
+  status: 'waiting' | 'playing';
 }
 
 export interface GameRoomProps {
@@ -24,5 +24,5 @@ export interface PaginationProps {
 export interface RoomStore {
   rooms: Room[];
   currentRoom: Room | null;
-  addRoom: (roomName: string, nickname: string) => string;
+  addRoom: (roomName: string, hostNickname: string) => Promise<string>;
 }
diff --git a/fe/src/types/socketTypes.ts b/fe/src/types/socketTypes.ts
new file mode 100644
index 0000000..51ab36e
--- /dev/null
+++ b/fe/src/types/socketTypes.ts
@@ -0,0 +1,14 @@
+import { Room } from './roomTypes';
+
+export interface ServerToClientEvents {
+  roomCreated: (room: Room) => void;
+  roomJoined: (room: Room) => void;
+  roomLeft: (room: Room) => void;
+  error: (error: { code: string; message: string }) => void;
+}
+
+export interface ClientToServerEvents {
+  createRoom: (data: { roomName: string; hostNickname: string }) => void;
+  joinRoom: (data: { roomId: string; userNickname: string }) => void;
+  leaveRoom: (data: { roomId: string }) => void;
+}

From 048a8e925286f6ecb98578784e10ad11300869ca Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:56:29 +0900
Subject: [PATCH 09/12] =?UTF-8?q?feat:=20JoinDialog=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20UI=20=EA=B5=AC=ED=98=84=20(#63)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

생성된 GameRoom 클릭 시 닉네임 설정
---
 fe/src/pages/RoomPage/RoomList/GameRoom.tsx   | 18 +++-
 fe/src/pages/RoomPage/RoomList/JoinDialog.tsx | 89 +++++++++++++++++++
 fe/src/pages/RoomPage/RoomList/RoomList.tsx   | 21 ++++-
 fe/src/types/roomTypes.ts                     |  5 ++
 4 files changed, 130 insertions(+), 3 deletions(-)
 create mode 100644 fe/src/pages/RoomPage/RoomList/JoinDialog.tsx

diff --git a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
index b336288..709eac2 100644
--- a/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
+++ b/fe/src/pages/RoomPage/RoomList/GameRoom.tsx
@@ -2,13 +2,27 @@ import { Card, CardHeader, CardTitle } from '@/components/ui/card';
 import { GameRoomProps } from '@/types/roomTypes';
 import { FaCircle, FaCrown, FaUsers } from 'react-icons/fa6';
 
-const GameRoom = ({ room }: GameRoomProps) => {
+const GameRoom = ({ room, onJoinRoom }: GameRoomProps) => {
   const isGameStarted = (status: string) => {
     return status === 'playing';
   };
+  const isRoomFull = room.players.length >= 4;
+
+  const handleRoomClick = () => {
+    if (!isGameStarted(room.status) && !isRoomFull) {
+      onJoinRoom(room.roomId);
+    }
+  };
 
   return (
-    <Card className="flex w-full mt-2">
+    <Card
+      className={`flex w-full mt-2 ${
+        !isGameStarted(room.status) && !isRoomFull
+          ? 'cursor-pointer hover:bg-gray-50'
+          : 'opacity-70'
+      }`}
+      onClick={handleRoomClick}
+    >
       <CardHeader className="space-y-1">
         <div className="flex items-center justify-between">
           <CardTitle className="text-xl">{room.roomName}</CardTitle>
diff --git a/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx b/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx
new file mode 100644
index 0000000..a586537
--- /dev/null
+++ b/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx
@@ -0,0 +1,89 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { JoinDialogProps } from '@/types/roomTypes';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const JoinDialog = ({ open, onOpenChange, roomId }: JoinDialogProps) => {
+  const [nickname, setNickname] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+
+  const resetAndClose = () => {
+    setNickname('');
+    setIsLoading(false);
+    onOpenChange(false);
+  };
+
+  const handleJoin = async () => {
+    if (!nickname.trim()) return;
+
+    try {
+      setIsLoading(true);
+      // TODO: 방 입장 로직 구현
+      // await joinRoom(roomId, nickname.trim());
+
+      resetAndClose();
+      navigate(`/game/${roomId}`);
+    } catch (error) {
+      console.error('방 입장 실패:', error);
+      // TODO: 에러 처리 토스트 메시지로
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>방 입장하기</DialogTitle>
+          <DialogDescription>사용하실 닉네임을 입력해주세요.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="nickname" className="text-right">
+              닉네임
+            </Label>
+            <Input
+              id="nickname"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              placeholder="닉네임을 입력하세요"
+              className="col-span-3"
+              disabled={isLoading}
+            />
+          </div>
+        </div>
+        <DialogFooter className="gap-2 mt-2">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={resetAndClose}
+            disabled={isLoading}
+          >
+            취소
+          </Button>
+          <Button
+            type="button"
+            onClick={handleJoin}
+            disabled={!nickname.trim() || isLoading}
+          >
+            입장하기
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default JoinDialog;
diff --git a/fe/src/pages/RoomPage/RoomList/RoomList.tsx b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
index aa87e8b..88340a6 100644
--- a/fe/src/pages/RoomPage/RoomList/RoomList.tsx
+++ b/fe/src/pages/RoomPage/RoomList/RoomList.tsx
@@ -2,6 +2,8 @@ import GameRoom from './GameRoom';
 import Pagination from './Pagination';
 import { usePagination } from '@/hooks/usePagination';
 import { RULES } from '@/constants/rules';
+import { useState } from 'react';
+import JoinDialog from './JoinDialog';
 
 const RoomList = () => {
   const {
@@ -13,11 +15,19 @@ const RoomList = () => {
     showPagination,
   } = usePagination();
 
+  const [isJoinDialogOpen, setIsJoinDialogOpen] = useState(false);
+  const [selectedRoomId, setSelectedRoomId] = useState<string | null>(null);
+
+  const onJoinRoom = (roomId: string) => {
+    setSelectedRoomId(roomId);
+    setIsJoinDialogOpen(true);
+  };
+
   return (
     <div className="space-y-6 max-h-screen mt-2">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {currentRooms.map((room) => (
-          <GameRoom key={room.roomId} room={room} />
+          <GameRoom key={room.roomId} room={room} onJoinRoom={onJoinRoom} />
         ))}
         {currentRooms.length > 0 &&
           currentRooms.length < RULES.maxPage &&
@@ -33,11 +43,20 @@ const RoomList = () => {
           onPageChange={setCurrentPage}
         />
       )}
+
       {isEmpty && (
         <div className="text-center py-8 text-muted-foreground">
           생성된 방이 없습니다.
         </div>
       )}
+
+      {selectedRoomId && (
+        <JoinDialog
+          open={isJoinDialogOpen}
+          onOpenChange={setIsJoinDialogOpen}
+          roomId={selectedRoomId}
+        />
+      )}
     </div>
   );
 };
diff --git a/fe/src/types/roomTypes.ts b/fe/src/types/roomTypes.ts
index 7234358..126aad8 100644
--- a/fe/src/types/roomTypes.ts
+++ b/fe/src/types/roomTypes.ts
@@ -3,6 +3,10 @@ export interface RoomDialogProps {
   onOpenChange: (open: boolean) => void;
 }
 
+export interface JoinDialogProps extends RoomDialogProps {
+  roomId: string;
+}
+
 export interface Room {
   roomId: string;
   roomName: string;
@@ -13,6 +17,7 @@ export interface Room {
 
 export interface GameRoomProps {
   room: Room;
+  onJoinRoom: (roomId: string) => void;
 }
 
 export interface PaginationProps {

From aabdeca34e396acea51d1107d1f342953fac040f Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Thu, 7 Nov 2024 16:44:41 +0900
Subject: [PATCH 10/12] =?UTF-8?q?[FE]=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EB=8A=94=20=EA=B2=8C=EC=9E=84=EB=B0=A9=EC=97=90=20=EC=9E=85?=
 =?UTF-8?q?=EC=9E=A5=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8B=A4.=20(#65)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 게임방 입장(joinRoom) Socket 이벤트 함수 구현

* chore: 변수명 변경

* feat: 사용자 게임방 입장 시 상태 변경

* chore: Socket ID console.log에서 제거
---
 fe/src/api/socketApi.ts                       |  33 -----
 fe/src/pages/RoomPage/RoomList/JoinDialog.tsx |  24 ++--
 fe/src/services/gameSocket.ts                 | 113 ++++++++++++++++++
 fe/src/store/useRoomStore.ts                  |  25 +++-
 fe/src/types/roomTypes.ts                     |   6 +
 fe/src/types/socketTypes.ts                   |  30 ++++-
 6 files changed, 183 insertions(+), 48 deletions(-)
 delete mode 100644 fe/src/api/socketApi.ts
 create mode 100644 fe/src/services/gameSocket.ts

diff --git a/fe/src/api/socketApi.ts b/fe/src/api/socketApi.ts
deleted file mode 100644
index 63c38d2..0000000
--- a/fe/src/api/socketApi.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Room } from '@/types/roomTypes';
-import {
-  ClientToServerEvents,
-  ServerToClientEvents,
-} from '@/types/socketTypes';
-import { io, Socket } from 'socket.io-client';
-
-const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
-
-const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
-  `${SOCKET_BASE_URL}/rooms`,
-  {
-    transports: ['websocket'],
-    withCredentials: true,
-  }
-);
-
-export const createRoom = async (
-  roomName: string,
-  hostNickname: string
-): Promise<Room> => {
-  return new Promise((resolve, reject) => {
-    socket.emit('createRoom', { roomName, hostNickname });
-
-    socket.on('roomCreated', (room) => {
-      resolve(room);
-    });
-
-    socket.on('error', (error) => {
-      reject(error);
-    });
-  });
-};
diff --git a/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx b/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx
index a586537..a128f11 100644
--- a/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx
+++ b/fe/src/pages/RoomPage/RoomList/JoinDialog.tsx
@@ -9,34 +9,36 @@ import {
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import useRoomStore from '@/store/useRoomStore';
 import { JoinDialogProps } from '@/types/roomTypes';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 const JoinDialog = ({ open, onOpenChange, roomId }: JoinDialogProps) => {
-  const [nickname, setNickname] = useState('');
+  const [playerNickname, setPlayerNickname] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
+  const joinGameRoom = useRoomStore((state) => state.joinGameRoom);
 
   const resetAndClose = () => {
-    setNickname('');
+    setPlayerNickname('');
     setIsLoading(false);
     onOpenChange(false);
   };
 
   const handleJoin = async () => {
-    if (!nickname.trim()) return;
+    if (!playerNickname.trim()) return;
 
     try {
       setIsLoading(true);
-      // TODO: 방 입장 로직 구현
-      // await joinRoom(roomId, nickname.trim());
+      joinGameRoom(roomId, playerNickname.trim());
+
+      // stream은 별도의 상태 관리 필요 (예: audio store)
 
       resetAndClose();
       navigate(`/game/${roomId}`);
     } catch (error) {
       console.error('방 입장 실패:', error);
-      // TODO: 에러 처리 토스트 메시지로
     } finally {
       setIsLoading(false);
     }
@@ -51,13 +53,13 @@ const JoinDialog = ({ open, onOpenChange, roomId }: JoinDialogProps) => {
         </DialogHeader>
         <div className="space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="nickname" className="text-right">
+            <Label htmlFor="playerNickname" className="text-right">
               닉네임
             </Label>
             <Input
-              id="nickname"
-              value={nickname}
-              onChange={(e) => setNickname(e.target.value)}
+              id="playerNickname"
+              value={playerNickname}
+              onChange={(e) => setPlayerNickname(e.target.value)}
               placeholder="닉네임을 입력하세요"
               className="col-span-3"
               disabled={isLoading}
@@ -76,7 +78,7 @@ const JoinDialog = ({ open, onOpenChange, roomId }: JoinDialogProps) => {
           <Button
             type="button"
             onClick={handleJoin}
-            disabled={!nickname.trim() || isLoading}
+            disabled={!playerNickname.trim() || isLoading}
           >
             입장하기
           </Button>
diff --git a/fe/src/services/gameSocket.ts b/fe/src/services/gameSocket.ts
new file mode 100644
index 0000000..4dcd473
--- /dev/null
+++ b/fe/src/services/gameSocket.ts
@@ -0,0 +1,113 @@
+import { JoinGameRoomResult, Room } from '@/types/roomTypes';
+import {
+  ClientToServerEvents,
+  ServerToClientEvents,
+} from '@/types/socketTypes';
+import { io, Socket } from 'socket.io-client';
+
+const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
+
+const gameSocket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+  `${SOCKET_BASE_URL}/rooms`,
+  {
+    transports: ['websocket'],
+    withCredentials: true,
+  }
+);
+
+// 소켓 연결 상태 모니터링
+gameSocket.on('connect', () => {
+  console.log('Socket connected');
+});
+
+gameSocket.on('connect_error', (error) => {
+  console.error('Socket connection error:', error);
+});
+
+gameSocket.on('disconnect', (reason) => {
+  console.log('Socket disconnected:', reason);
+});
+
+export const createRoom = async (
+  roomName: string,
+  hostNickname: string
+): Promise<Room> => {
+  return new Promise((resolve, reject) => {
+    gameSocket.emit('createRoom', { roomName, hostNickname });
+
+    gameSocket.on('roomCreated', (room) => {
+      resolve(room);
+    });
+
+    gameSocket.on('error', (error) => {
+      reject(error);
+    });
+  });
+};
+
+export const joinRoom = async (
+  roomId: string,
+  playerNickname: string
+): Promise<JoinGameRoomResult> => {
+  if (!gameSocket.connected) {
+    throw new Error('서버와 연결이 되지 않았습니다.');
+  }
+
+  console.log('Attempting to join room:', { roomId, playerNickname });
+
+  return new Promise((resolve, reject) => {
+    let isResolved = false;
+
+    // updateUsers 이벤트 핸들러
+    const handleUpdateUsers = (players: string[]) => {
+      console.log('Received updateUsers:', players);
+
+      // 첫 업데이트에서만 resolve 하도록
+      if (!isResolved) {
+        isResolved = true;
+        cleanup();
+
+        // Room 객체 구성
+        const room: Room = {
+          roomId,
+          roomName: `Room ${roomId}`, // 서버에서 따로 제공하지 않음
+          hostNickname: players[0], // 첫 번째 플레이어를 호스트로 가정
+          players: players,
+          status: 'waiting',
+        };
+
+        resolve({
+          room,
+          stream: new MediaStream(),
+        });
+      }
+    };
+
+    const handleError = (error: { code: string; message: string }) => {
+      console.error('Error joining room:', error);
+      cleanup();
+      reject(error);
+    };
+
+    const cleanup = () => {
+      gameSocket.off('updateUsers', handleUpdateUsers);
+      gameSocket.off('error', handleError);
+      clearTimeout(timeoutId);
+    };
+
+    // 이벤트 리스너 등록
+    gameSocket.on('updateUsers', handleUpdateUsers);
+    gameSocket.on('error', handleError);
+
+    // 방 입장 요청
+    gameSocket.emit('joinRoom', { roomId, playerNickname });
+
+    // 타임아웃 설정
+    const timeoutId = setTimeout(() => {
+      if (!isResolved) {
+        cleanup();
+        reject(new Error('서버 응답 시간이 초과되었습니다.'));
+      }
+    }, 5000);
+  });
+};
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
index 3dc4685..17bab64 100644
--- a/fe/src/store/useRoomStore.ts
+++ b/fe/src/store/useRoomStore.ts
@@ -1,4 +1,4 @@
-import { createRoom } from '@/api/socketApi';
+import { createRoom, joinRoom } from '@/services/gameSocket';
 import { RoomStore } from '@/types/roomTypes';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
@@ -26,6 +26,29 @@ const useRoomStore = create<RoomStore>()(
           throw error;
         }
       },
+
+      joinGameRoom: async (roomId: string, playerNickname: string) => {
+        try {
+          const { room } = await joinRoom(roomId, playerNickname);
+
+          set((state) => {
+            const updatedRooms = state.rooms.map((existingRoom) =>
+              existingRoom.roomId === roomId
+                ? { ...existingRoom, players: room.players }
+                : existingRoom
+            );
+
+            return {
+              rooms: updatedRooms,
+              currentRoom:
+                updatedRooms.find((room) => room.roomId === roomId) || null,
+            };
+          });
+        } catch (error) {
+          console.error('방 입장 실패:', error);
+          throw error;
+        }
+      },
     }),
     {
       name: 'Room Store',
diff --git a/fe/src/types/roomTypes.ts b/fe/src/types/roomTypes.ts
index 126aad8..be5fa15 100644
--- a/fe/src/types/roomTypes.ts
+++ b/fe/src/types/roomTypes.ts
@@ -26,8 +26,14 @@ export interface PaginationProps {
   onPageChange: (page: number) => void;
 }
 
+export interface JoinGameRoomResult {
+  room: Room;
+  stream: MediaStream;
+}
+
 export interface RoomStore {
   rooms: Room[];
   currentRoom: Room | null;
   addRoom: (roomName: string, hostNickname: string) => Promise<string>;
+  joinGameRoom: (roomId: string, playerNickname: string) => void;
 }
diff --git a/fe/src/types/socketTypes.ts b/fe/src/types/socketTypes.ts
index 51ab36e..4afa66b 100644
--- a/fe/src/types/socketTypes.ts
+++ b/fe/src/types/socketTypes.ts
@@ -1,14 +1,38 @@
 import { Room } from './roomTypes';
 
+// 게임 서버 이벤트 타입
 export interface ServerToClientEvents {
   roomCreated: (room: Room) => void;
-  roomJoined: (room: Room) => void;
-  roomLeft: (room: Room) => void;
+  updateUsers: (players: string[]) => void;
   error: (error: { code: string; message: string }) => void;
 }
 
 export interface ClientToServerEvents {
   createRoom: (data: { roomName: string; hostNickname: string }) => void;
-  joinRoom: (data: { roomId: string; userNickname: string }) => void;
+  joinRoom: (data: { roomId: string; playerNickname: string }) => void;
   leaveRoom: (data: { roomId: string }) => void;
 }
+
+// 시그널링 서버 이벤트 타입
+export interface SignalingServerToClientEvents {
+  joinSuccess: () => void;
+  'peer-joined': (data: { peerId: string; userId: string }) => void;
+  'peer-left': (data: { peerId: string }) => void;
+  offer: (data: { targetId: string; sdp: RTCSessionDescriptionInit }) => void;
+  answer: (data: { targetId: string; sdp: RTCSessionDescriptionInit }) => void;
+  'ice-candidate': (data: {
+    targetId: string;
+    candidate: RTCIceCandidateInit;
+  }) => void;
+}
+
+export interface SignalingClientToServerEvents {
+  join: (data: { roomId: string; userId: string }) => void;
+  leave: (data: { roomId: string }) => void;
+  offer: (data: { targetId: string; sdp: RTCSessionDescriptionInit }) => void;
+  answer: (data: { targetId: string; sdp: RTCSessionDescriptionInit }) => void;
+  'ice-candidate': (data: {
+    targetId: string;
+    candidate: RTCIceCandidateInit;
+  }) => void;
+}

From 63d6959cab83fd332cefaf675b2fcfe71564af1b Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:40:31 +0900
Subject: [PATCH 11/12] =?UTF-8?q?[FE]=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EB=8A=94=20=EA=B2=8C=EC=9E=84=EB=B0=A9=EC=97=90=20=EC=9E=85?=
 =?UTF-8?q?=EC=9E=A5=ED=95=98=EB=A9=B4=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?=
 =?UTF-8?q?=EC=9D=8C=EC=84=B1=20=ED=86=B5=ED=99=94=EB=A5=BC=20=ED=95=A0=20?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=88=EB=8B=A4.=20(#68)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 마이크 권한 요청 기능 구현

* feat: WebRTC 실시간 음성 통화 기능 구현

* chore: 시그널링 서버 URL 변경
---
 fe/src/services/audioRequest.ts |  60 +++++++
 fe/src/services/gameSocket.ts   | 113 -------------
 fe/src/services/socket.ts       | 271 ++++++++++++++++++++++++++++++++
 fe/src/store/useRoomStore.ts    |   2 +-
 fe/src/types/audioTypes.ts      |   5 +
 5 files changed, 337 insertions(+), 114 deletions(-)
 create mode 100644 fe/src/services/audioRequest.ts
 delete mode 100644 fe/src/services/gameSocket.ts
 create mode 100644 fe/src/services/socket.ts
 create mode 100644 fe/src/types/audioTypes.ts

diff --git a/fe/src/services/audioRequest.ts b/fe/src/services/audioRequest.ts
new file mode 100644
index 0000000..feeabd4
--- /dev/null
+++ b/fe/src/services/audioRequest.ts
@@ -0,0 +1,60 @@
+import { AudioStreamSetup } from '@/types/audioTypes';
+
+export const requestAudioStream = async (): Promise<MediaStream> => {
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        echoCancellation: true,
+        noiseSuppression: true,
+        autoGainControl: true,
+        sampleRate: 48000,
+        channelCount: 1,
+      },
+      video: false,
+    });
+    return stream;
+  } catch (error) {
+    console.error('Error accessing microphone:', error);
+    if (error instanceof DOMException) {
+      if (error.name === 'NotAllowedError') {
+        throw new Error(
+          '마이크 사용 권한이 거부되었습니다. 권한을 허용해주세요.'
+        );
+      } else if (error.name === 'NotFoundError') {
+        throw new Error(
+          '마이크를 찾을 수 없습니다. 마이크가 연결되어 있는지 확인해주세요.'
+        );
+      }
+    }
+    throw new Error('마이크 접근에 실패했습니다.');
+  }
+};
+
+export const cleanupAudioStream = (stream: MediaStream) => {
+  stream.getTracks().forEach((track) => track.stop());
+};
+
+export const setupAudioStream = async (
+  stream: MediaStream
+): Promise<AudioStreamSetup> => {
+  try {
+    const audioContext = new AudioContext();
+    const source = audioContext.createMediaStreamSource(stream);
+    const gainNode = audioContext.createGain();
+
+    source.connect(gainNode);
+    gainNode.connect(audioContext.destination);
+
+    // 기본 볼륨 설정
+    gainNode.gain.value = 0.5;
+
+    return {
+      audioContext,
+      source,
+      gainNode,
+    };
+  } catch (error) {
+    console.error('Error setting up audio stream:', error);
+    throw error;
+  }
+};
diff --git a/fe/src/services/gameSocket.ts b/fe/src/services/gameSocket.ts
deleted file mode 100644
index 4dcd473..0000000
--- a/fe/src/services/gameSocket.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import { JoinGameRoomResult, Room } from '@/types/roomTypes';
-import {
-  ClientToServerEvents,
-  ServerToClientEvents,
-} from '@/types/socketTypes';
-import { io, Socket } from 'socket.io-client';
-
-const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
-
-const gameSocket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
-  `${SOCKET_BASE_URL}/rooms`,
-  {
-    transports: ['websocket'],
-    withCredentials: true,
-  }
-);
-
-// 소켓 연결 상태 모니터링
-gameSocket.on('connect', () => {
-  console.log('Socket connected');
-});
-
-gameSocket.on('connect_error', (error) => {
-  console.error('Socket connection error:', error);
-});
-
-gameSocket.on('disconnect', (reason) => {
-  console.log('Socket disconnected:', reason);
-});
-
-export const createRoom = async (
-  roomName: string,
-  hostNickname: string
-): Promise<Room> => {
-  return new Promise((resolve, reject) => {
-    gameSocket.emit('createRoom', { roomName, hostNickname });
-
-    gameSocket.on('roomCreated', (room) => {
-      resolve(room);
-    });
-
-    gameSocket.on('error', (error) => {
-      reject(error);
-    });
-  });
-};
-
-export const joinRoom = async (
-  roomId: string,
-  playerNickname: string
-): Promise<JoinGameRoomResult> => {
-  if (!gameSocket.connected) {
-    throw new Error('서버와 연결이 되지 않았습니다.');
-  }
-
-  console.log('Attempting to join room:', { roomId, playerNickname });
-
-  return new Promise((resolve, reject) => {
-    let isResolved = false;
-
-    // updateUsers 이벤트 핸들러
-    const handleUpdateUsers = (players: string[]) => {
-      console.log('Received updateUsers:', players);
-
-      // 첫 업데이트에서만 resolve 하도록
-      if (!isResolved) {
-        isResolved = true;
-        cleanup();
-
-        // Room 객체 구성
-        const room: Room = {
-          roomId,
-          roomName: `Room ${roomId}`, // 서버에서 따로 제공하지 않음
-          hostNickname: players[0], // 첫 번째 플레이어를 호스트로 가정
-          players: players,
-          status: 'waiting',
-        };
-
-        resolve({
-          room,
-          stream: new MediaStream(),
-        });
-      }
-    };
-
-    const handleError = (error: { code: string; message: string }) => {
-      console.error('Error joining room:', error);
-      cleanup();
-      reject(error);
-    };
-
-    const cleanup = () => {
-      gameSocket.off('updateUsers', handleUpdateUsers);
-      gameSocket.off('error', handleError);
-      clearTimeout(timeoutId);
-    };
-
-    // 이벤트 리스너 등록
-    gameSocket.on('updateUsers', handleUpdateUsers);
-    gameSocket.on('error', handleError);
-
-    // 방 입장 요청
-    gameSocket.emit('joinRoom', { roomId, playerNickname });
-
-    // 타임아웃 설정
-    const timeoutId = setTimeout(() => {
-      if (!isResolved) {
-        cleanup();
-        reject(new Error('서버 응답 시간이 초과되었습니다.'));
-      }
-    }, 5000);
-  });
-};
diff --git a/fe/src/services/socket.ts b/fe/src/services/socket.ts
new file mode 100644
index 0000000..7133bfd
--- /dev/null
+++ b/fe/src/services/socket.ts
@@ -0,0 +1,271 @@
+import { io, Socket } from 'socket.io-client';
+import { requestAudioStream, cleanupAudioStream } from './audioRequest';
+import { JoinGameRoomResult, Room } from '@/types/roomTypes';
+import {
+  ClientToServerEvents,
+  ServerToClientEvents,
+  SignalingServerToClientEvents,
+  SignalingClientToServerEvents,
+} from '@/types/socketTypes';
+
+const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
+const SIGNALING_URL = 'https://signaling.clovapatra.com';
+
+// 게임 서버 소켓
+const gameSocket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
+  `${SOCKET_BASE_URL}/rooms`,
+  {
+    transports: ['websocket'],
+    withCredentials: true,
+  }
+);
+
+// 시그널링 서버 소켓
+const signalingSocket: Socket<
+  SignalingServerToClientEvents,
+  SignalingClientToServerEvents
+> = io(SIGNALING_URL, {
+  transports: ['websocket'],
+  withCredentials: true,
+});
+
+// WebRTC 설정
+const configuration: RTCConfiguration = {
+  iceServers: [
+    {
+      urls: ['stun:stun.l.google.com:19302', 'stun:stun1.l.google.com:19302'],
+    },
+    {
+      urls: 'turn:turn.anyfirewall.com:443?transport=tcp',
+      credential: 'webrtc',
+      username: 'webrtc',
+    },
+  ],
+  // iceCandidatePoolSize가 필요한 경우에만 추가
+  iceCandidatePoolSize: 0,
+  // RTCConfiguration에 있는 옵션들만 사용
+  bundlePolicy: 'max-bundle',
+  rtcpMuxPolicy: 'require',
+  // iceTransportPolicy는 'all' | 'relay' 중 하나만 가능
+  iceTransportPolicy: 'all',
+};
+
+let peerConnections: Record<string, RTCPeerConnection> = {};
+let localStream: MediaStream | null = null;
+let currentRoomId: string | null = null;
+let currentUserId: string | null = null;
+
+export const createRoom = async (
+  roomName: string,
+  hostNickname: string
+): Promise<Room> => {
+  try {
+    // 1. 오디오 스트림 요청
+    const stream = await requestAudioStream();
+    localStream = stream;
+
+    return new Promise((resolve, reject) => {
+      // 2. 방 생성 요청
+      gameSocket.emit('createRoom', { roomName, hostNickname });
+
+      const handleRoomCreated = (room: Room) => {
+        currentRoomId = room.roomId;
+        currentUserId = hostNickname;
+
+        // 3. 시그널링 서버 조인
+        signalingSocket.emit('join', {
+          roomId: room.roomId,
+          userId: hostNickname,
+        });
+
+        cleanup();
+        resolve(room);
+      };
+
+      const handleError = (error: { code: string; message: string }) => {
+        cleanup();
+        cleanupAudioStream(stream);
+        reject(error);
+      };
+
+      const cleanup = () => {
+        gameSocket.off('roomCreated', handleRoomCreated);
+        gameSocket.off('error', handleError);
+      };
+
+      gameSocket.on('roomCreated', handleRoomCreated);
+      gameSocket.on('error', handleError);
+    });
+  } catch (error) {
+    console.error('방 생성 실패:', error);
+    throw error;
+  }
+};
+
+export const joinRoom = async (
+  roomId: string,
+  playerNickname: string
+): Promise<JoinGameRoomResult> => {
+  try {
+    // 1. 오디오 스트림 요청
+    const stream = await requestAudioStream();
+    localStream = stream;
+
+    return new Promise((resolve, reject) => {
+      let isResolved = false;
+
+      const handleUpdateUsers = (players: string[]) => {
+        if (!isResolved) {
+          isResolved = true;
+          cleanup();
+
+          const room: Room = {
+            roomId,
+            roomName: `Room ${roomId}`,
+            hostNickname: players[0],
+            players: players,
+            status: 'waiting',
+          };
+
+          currentRoomId = roomId;
+          currentUserId = playerNickname;
+
+          // 시그널링 서버 조인
+          signalingSocket.emit('join', {
+            roomId: roomId,
+            userId: playerNickname,
+          });
+
+          resolve({
+            room,
+            stream,
+          });
+        }
+      };
+
+      const handleError = (error: { code: string; message: string }) => {
+        cleanup();
+        cleanupAudioStream(stream);
+        reject(error);
+      };
+
+      const cleanup = () => {
+        gameSocket.off('updateUsers', handleUpdateUsers);
+        gameSocket.off('error', handleError);
+      };
+
+      gameSocket.on('updateUsers', handleUpdateUsers);
+      gameSocket.on('error', handleError);
+
+      gameSocket.emit('joinRoom', { roomId, playerNickname });
+    });
+  } catch (error) {
+    console.error('방 참가 실패:', error);
+    throw error;
+  }
+};
+
+// WebRTC 관련 함수들
+async function createPeerConnection(
+  peerId: string
+): Promise<RTCPeerConnection> {
+  try {
+    const pc = new RTCPeerConnection(configuration);
+
+    pc.onicecandidate = (event) => {
+      if (event.candidate) {
+        signalingSocket.emit('ice-candidate', {
+          targetId: peerId,
+          candidate: event.candidate,
+        });
+      }
+    };
+
+    pc.ontrack = (event) => {
+      const audioElement = new Audio();
+      audioElement.autoplay = true;
+      audioElement.srcObject = event.streams[0];
+      document.body.appendChild(audioElement);
+    };
+
+    if (localStream) {
+      localStream.getTracks().forEach((track) => {
+        pc.addTrack(track, localStream!);
+      });
+    }
+
+    peerConnections[peerId] = pc;
+    return pc;
+  } catch (error) {
+    console.error('Error creating peer connection:', error);
+    throw error;
+  }
+}
+
+// 시그널링 이벤트 핸들러 설정
+signalingSocket.on('joinSuccess', () => {
+  console.log('Successfully joined signaling room');
+});
+
+signalingSocket.on('peer-joined', async ({ peerId, userId }) => {
+  console.log('New peer joined:', { peerId, userId });
+  if (currentUserId && currentUserId < userId) {
+    const pc = await createPeerConnection(peerId);
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    signalingSocket.emit('offer', {
+      targetId: peerId,
+      sdp: pc.localDescription!,
+    });
+  }
+});
+
+signalingSocket.on('offer', async ({ targetId, sdp }) => {
+  const pc = await createPeerConnection(targetId);
+  await pc.setRemoteDescription(new RTCSessionDescription(sdp));
+  const answer = await pc.createAnswer();
+  await pc.setLocalDescription(answer);
+  signalingSocket.emit('answer', {
+    targetId: targetId,
+    sdp: pc.localDescription!,
+  });
+});
+
+signalingSocket.on('answer', async ({ targetId, sdp }) => {
+  const pc = peerConnections[targetId];
+  if (pc) {
+    await pc.setRemoteDescription(new RTCSessionDescription(sdp));
+  }
+});
+
+signalingSocket.on('ice-candidate', async ({ targetId, candidate }) => {
+  const pc = peerConnections[targetId];
+  if (pc) {
+    await pc.addIceCandidate(new RTCIceCandidate(candidate));
+  }
+});
+
+signalingSocket.on('peer-left', ({ peerId }) => {
+  const pc = peerConnections[peerId];
+  if (pc) {
+    pc.close();
+    delete peerConnections[peerId];
+  }
+});
+
+// 소켓 연결 상태 모니터링
+gameSocket.on('connect', () => {
+  console.log('Game socket connected');
+});
+
+signalingSocket.on('connect', () => {
+  console.log('Signaling socket connected');
+});
+
+gameSocket.on('connect_error', (error) => {
+  console.error('Game socket connection error:', error);
+});
+
+signalingSocket.on('connect_error', (error) => {
+  console.error('Signaling socket connection error:', error);
+});
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
index 17bab64..0789cc3 100644
--- a/fe/src/store/useRoomStore.ts
+++ b/fe/src/store/useRoomStore.ts
@@ -1,4 +1,4 @@
-import { createRoom, joinRoom } from '@/services/gameSocket';
+import { createRoom, joinRoom } from '@/services/socket';
 import { RoomStore } from '@/types/roomTypes';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
diff --git a/fe/src/types/audioTypes.ts b/fe/src/types/audioTypes.ts
new file mode 100644
index 0000000..ca5ae77
--- /dev/null
+++ b/fe/src/types/audioTypes.ts
@@ -0,0 +1,5 @@
+export interface AudioStreamSetup {
+  audioContext: AudioContext;
+  source: MediaStreamAudioSourceNode;
+  gainNode: GainNode;
+}

From f608a6ebc02b0c8c1fa72e320641d789bf21911b Mon Sep 17 00:00:00 2001
From: PARK NA HYUN <116629752+studioOwol@users.noreply.github.com>
Date: Thu, 7 Nov 2024 21:01:31 +0900
Subject: [PATCH 12/12] =?UTF-8?q?[FE]=20=EC=83=9D=EC=84=B1=EB=90=9C=20?=
 =?UTF-8?q?=EB=B0=A9=20=EB=AA=A9=EB=A1=9D=EC=9D=84=20=EA=B0=80=EC=A0=B8?=
 =?UTF-8?q?=EC=98=A8=EB=8B=A4.=20(#74)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 생성된 방 목록을 가져오는 기능 구현

* docs: README.md 업데이트
---
 fe/README.md                             |  8 ++---
 fe/package-lock.json                     | 43 ++++++++++++++++++++----
 fe/package.json                          |  1 +
 fe/src/api/api.ts                        | 16 +++++++++
 fe/src/{services => api}/audioRequest.ts |  0
 fe/src/{services => api}/socket.ts       | 41 ++++++++++++++++++++++
 fe/src/pages/GamePage/index.tsx          | 24 +++++++++++--
 fe/src/pages/RoomPage/index.tsx          | 14 ++++++++
 fe/src/store/useRoomStore.ts             | 38 +++++++++++++++++++--
 fe/src/types/roomTypes.ts                |  2 ++
 10 files changed, 171 insertions(+), 16 deletions(-)
 create mode 100644 fe/src/api/api.ts
 rename fe/src/{services => api}/audioRequest.ts (100%)
 rename fe/src/{services => api}/socket.ts (86%)

diff --git a/fe/README.md b/fe/README.md
index b665050..2e19e4a 100644
--- a/fe/README.md
+++ b/fe/README.md
@@ -1,7 +1,7 @@
 ## 🔍 문제 해결 과정
 
-### Socket API 요청 구현을 다 했는데, 클라이언트 쪽에 아무 에러도 안 나고, emit & on 자체가 안 되는 상황 발생
+### 새로고침 시 상태가 제대로 유지가 안 되고 있음
 
-- **백엔드와 소통을 잘 하자..**
-- 원인은 이벤트명 정의를 서로 다르게 해서 (내 잘못ㅠ)
-- 나는 스네이크 케이스로, 백엔드는 카멜 케이스로 😇 죄송합니다,,
+- 게임 페이지 내에서 새로고침 시 방장만 남고 입장한 참가자는 사라짐
+- 계속 새로고침하면 렌더링도 안 됨
+- 새로 생성한 방도 유지가 안 됨 -> 이건 DB에 저장이 안 되는 건가.. 뭐가 문제지.. 머리가 너무 아픔
diff --git a/fe/package-lock.json b/fe/package-lock.json
index e14f03d..662ca85 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-slider": "^1.2.1",
         "@radix-ui/react-slot": "^1.1.0",
+        "axios": "^1.7.7",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.454.0",
@@ -2487,8 +2488,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
@@ -2542,6 +2542,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2798,7 +2808,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -3013,7 +3022,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3686,6 +3694,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -3714,7 +3741,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
       "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
-      "dev": true,
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
@@ -4794,7 +4820,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -4803,7 +4828,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -5417,6 +5441,11 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/fe/package.json b/fe/package.json
index 030608d..5a2df28 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.454.0",
diff --git a/fe/src/api/api.ts b/fe/src/api/api.ts
new file mode 100644
index 0000000..bd23dd8
--- /dev/null
+++ b/fe/src/api/api.ts
@@ -0,0 +1,16 @@
+import { Room } from '@/types/roomTypes';
+import axios from 'axios';
+
+const BASE_URL = 'https://game.clovapatra.com';
+
+export const gameAPI = axios.create({
+  baseURL: BASE_URL,
+  timeout: 5000,
+  withCredentials: false,
+});
+
+export const getRooms = async (): Promise<Room[]> => {
+  const response = await gameAPI.get('/api/rooms');
+
+  return response.data;
+};
diff --git a/fe/src/services/audioRequest.ts b/fe/src/api/audioRequest.ts
similarity index 100%
rename from fe/src/services/audioRequest.ts
rename to fe/src/api/audioRequest.ts
diff --git a/fe/src/services/socket.ts b/fe/src/api/socket.ts
similarity index 86%
rename from fe/src/services/socket.ts
rename to fe/src/api/socket.ts
index 7133bfd..4917a63 100644
--- a/fe/src/services/socket.ts
+++ b/fe/src/api/socket.ts
@@ -7,6 +7,7 @@ import {
   SignalingServerToClientEvents,
   SignalingClientToServerEvents,
 } from '@/types/socketTypes';
+import useRoomStore from '@/store/useRoomStore';
 
 const SOCKET_BASE_URL = 'wss://game.clovapatra.com';
 const SIGNALING_URL = 'https://signaling.clovapatra.com';
@@ -269,3 +270,43 @@ gameSocket.on('connect_error', (error) => {
 signalingSocket.on('connect_error', (error) => {
   console.error('Signaling socket connection error:', error);
 });
+
+// 방 목록 갱신을 위한 이벤트
+gameSocket.on('roomCreated', async (room: Room) => {
+  console.log('Room created event received:', room);
+
+  try {
+    if (currentRoomId === room.roomId) {
+      // 방금 생성된 방이 현재 방이면 players도 업데이트
+      const store = useRoomStore.getState();
+      store.joinGameRoom(room.roomId, currentUserId || '');
+    }
+    // 전체 방 목록 갱신
+    await useRoomStore.getState().refreshRooms();
+  } catch (error) {
+    console.error('방 목록 갱신 실패:', error);
+  }
+});
+
+gameSocket.on('updateUsers', async (players: string[]) => {
+  console.log('Update users event received:', players);
+
+  const store = useRoomStore.getState();
+  const currentRoom = store.currentRoom;
+
+  if (currentRoom) {
+    const updatedRoom = {
+      ...currentRoom,
+      players,
+      hostNickname: players[0],
+    };
+    store.updateCurrentRoom(updatedRoom);
+  }
+
+  // 전체 방 목록도 갱신
+  try {
+    await useRoomStore.getState().refreshRooms();
+  } catch (error) {
+    console.error('방 목록 갱신 실패:', error);
+  }
+});
diff --git a/fe/src/pages/GamePage/index.tsx b/fe/src/pages/GamePage/index.tsx
index 4ef6340..2e34455 100644
--- a/fe/src/pages/GamePage/index.tsx
+++ b/fe/src/pages/GamePage/index.tsx
@@ -1,11 +1,31 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useRoomStore from '@/store/useRoomStore';
 import PlayerList from './PlayerList/PlayerList';
+import { getRooms } from '@/api/api';
 
 const GamePage = () => {
   const [isAudioOn, setIsAudioOn] = useState(true);
-  const { currentRoom } = useRoomStore();
+  const { roomId } = useParams();
+  const { currentRoom, updateCurrentRoom } = useRoomStore();
+
+  useEffect(() => {
+    const initializeRoom = async () => {
+      if (roomId) {
+        try {
+          const rooms = await getRooms();
+          const room = rooms.find((r) => r.roomId === roomId);
+          if (room) updateCurrentRoom(room);
+        } catch (error) {
+          console.error('Failed to restore room info:', error);
+        }
+      }
+    };
+
+    if (!currentRoom || currentRoom.roomId !== roomId) initializeRoom();
+  }, [roomId, currentRoom]);
+
+  console.log('GamePage render:', { currentRoom, roomId });
 
   if (!currentRoom) return null;
 
diff --git a/fe/src/pages/RoomPage/index.tsx b/fe/src/pages/RoomPage/index.tsx
index d41b502..73f6552 100644
--- a/fe/src/pages/RoomPage/index.tsx
+++ b/fe/src/pages/RoomPage/index.tsx
@@ -1,8 +1,22 @@
 import SearchBar from '@/components/common/SearchBar';
 import RoomHeader from './RoomHeader/RoomHeader';
 import RoomList from './RoomList/RoomList';
+import useRoomStore from '@/store/useRoomStore';
+import { useEffect } from 'react';
 
 const RoomPage = () => {
+  const refreshRooms = useRoomStore((state) => state.refreshRooms);
+
+  useEffect(() => {
+    refreshRooms();
+
+    const interval = setInterval(() => {
+      refreshRooms();
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [refreshRooms]);
+
   return (
     <div>
       <RoomHeader />
diff --git a/fe/src/store/useRoomStore.ts b/fe/src/store/useRoomStore.ts
index 0789cc3..44779de 100644
--- a/fe/src/store/useRoomStore.ts
+++ b/fe/src/store/useRoomStore.ts
@@ -1,5 +1,6 @@
-import { createRoom, joinRoom } from '@/services/socket';
-import { RoomStore } from '@/types/roomTypes';
+import { getRooms } from '@/api/api';
+import { createRoom, joinRoom } from '@/api/socket';
+import { Room, RoomStore } from '@/types/roomTypes';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
 
@@ -9,6 +10,36 @@ const useRoomStore = create<RoomStore>()(
       rooms: [],
       currentRoom: null,
 
+      refreshRooms: async () => {
+        try {
+          const rooms = await getRooms();
+
+          // currentRoom을 유지하면서 rooms 업데이트
+          set((state) => ({
+            rooms,
+            // 현재 방이 있다면 유지
+            currentRoom: state.currentRoom,
+          }));
+        } catch (error) {
+          console.error('방 목록 조회 실패:', error);
+          throw error;
+        }
+      },
+
+      updateCurrentRoom: (room: Room) => {
+        set((state) => {
+          // 현재 rooms 배열에서 해당 방을 찾아 업데이트
+          const updatedRooms = state.rooms.map((r) =>
+            r.roomId === room.roomId ? room : r
+          );
+
+          return {
+            rooms: updatedRooms,
+            currentRoom: room,
+          };
+        });
+      },
+
       addRoom: async (
         roomName: string,
         hostNickname: string
@@ -20,6 +51,7 @@ const useRoomStore = create<RoomStore>()(
             rooms: [...state.rooms, newRoom],
             currentRoom: newRoom,
           }));
+
           return newRoom.roomId;
         } catch (error) {
           console.error('방 생성 실패:', error);
@@ -41,7 +73,7 @@ const useRoomStore = create<RoomStore>()(
             return {
               rooms: updatedRooms,
               currentRoom:
-                updatedRooms.find((room) => room.roomId === roomId) || null,
+                updatedRooms.find((r) => r.roomId === roomId) || null,
             };
           });
         } catch (error) {
diff --git a/fe/src/types/roomTypes.ts b/fe/src/types/roomTypes.ts
index be5fa15..1a6d06b 100644
--- a/fe/src/types/roomTypes.ts
+++ b/fe/src/types/roomTypes.ts
@@ -34,6 +34,8 @@ export interface JoinGameRoomResult {
 export interface RoomStore {
   rooms: Room[];
   currentRoom: Room | null;
+  refreshRooms: () => Promise<void>;
   addRoom: (roomName: string, hostNickname: string) => Promise<string>;
   joinGameRoom: (roomId: string, playerNickname: string) => void;
+  updateCurrentRoom: (room: Room) => void;
 }