📝 Modify⚙Setting(#39): 리엑트쿼리, 개발도구 설치 및 라우터 분리

package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -1,17 +1,14 @@
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Main from './pages/main/Main';
-import Quest from './pages/Quest/Quest';
-import Ranking from './pages/Ranking/Ranking';
+import Router from './route/router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 function App() {
+  const queryClient = new QueryClient();
   return (
     <>
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Main />}></Route>
-          <Route path="/quest" element={<Quest />}></Route>
-          <Route path="/Ranking" element={<Ranking />}></Route>
-        </Routes>
-      </BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <Router />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
     </>
   );
 }

src/route/Router.tsx

@@ -0,0 +1,17 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import Main from '../pages/main/Main';
+import Quest from '../pages/Quest/Quest';
+import Ranking from '../pages/Ranking/Ranking';
+export default function Router() {
+  return (
+    <>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Main />}></Route>
+          <Route path="/quest" element={<Quest />}></Route>
+          <Route path="/Ranking" element={<Ranking />}></Route>
+        </Routes>
+      </BrowserRouter>
+    </>
+  );
+}