[FE][hotfix] 전체 코드 리팩터링 (#77)

* refactor: types 파일에는 전역 타입만 두기

* refactor: Store에서 비즈니스 로직 분리

* refactor: Socket 관련 코드 리팩터링

마지막 PR과 동일한 상태: 게임 페이지 렌더링 이슈 있음

* docs: README.md 업데이트

fe/README.md

@@ -1,7 +1,5 @@
 ## 🔍 문제 해결 과정
 
-### 새로고침 시 상태가 제대로 유지가 안 되고 있음
+### 새로운 게임방이 추가될 때 순서대로 추가되지 않음
 
-- 게임 페이지 내에서 새로고침 시 방장만 남고 입장한 참가자는 사라짐
-- 계속 새로고침하면 렌더링도 안 됨
-- 새로 생성한 방도 유지가 안 됨 -> 이건 DB에 저장이 안 되는 건가.. 뭐가 문제지.. 머리가 너무 아픔
+### 게임 페이지에서 새로고침하면 렌더링이 되지 않음

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",
+    "@tanstack/react-query": "^5.59.20",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -32,6 +33,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@tanstack/react-query-devtools": "^5.59.20",
     "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.8.7",

fe/src/App.tsx

@@ -2,17 +2,22 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
 import RoomPage from './pages/RoomPage';
 import GamePage from './pages/GamePage';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
 
 function App() {
   return (
-    <div className="app">
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<RoomPage />} />
-          <Route path="/game/:roomId" element={<GamePage />} />
-        </Routes>
-      </BrowserRouter>
-    </div>
+    <QueryClientProvider client={queryClient}>
+      <div className="app">
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<RoomPage />} />
+            <Route path="/game/:roomId" element={<GamePage />} />
+          </Routes>
+        </BrowserRouter>
+      </div>
+    </QueryClientProvider>
   );
 }