Merge pull request #66 from KERT-core/feat/code-refactoring

refactor: mypage에 react-query 적용하여 코드 리팩토링
KERT-core · Nov 3, 2024 · 13aaa07 · 13aaa07
2 parents 3d2571b + 71b9519
commit 13aaa07
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 141 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@swc/core": "^1.7.28",
+    "@tanstack/react-query": "^5.59.16",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^3.1.0",
     "@toast-ui/editor-plugin-color-syntax": "^3.1.0",
     "@toast-ui/react-editor": "^3.2.3",

diff --git a/src/App.jsx b/src/App.jsx
@@ -5,6 +5,7 @@
 
 import { Routes, Route, useLocation } from 'react-router-dom';
 import { CookiesProvider } from 'react-cookie';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 import { GlobalStyle } from './styles/global';
 import { MainLayout } from './components/layouts/MainLayout';
@@ -29,50 +30,54 @@ import MyPage from './pages/MyPage';
 
 import History from './pages/History';
 
+const queryClient = new QueryClient();
+
 export default function App() {
   // location.key을 통해 화면 전환 시 컴포넌트 충돌/중복 방지 용으로 사용됩니다.
   const location = useLocation();
 
   return (
     <>
-      <CookiesProvider>
-        <AuthProvider>
-          <GlobalStyle />
-          <Navigator />
-          <Routes>
-            <Route path="/" element={<MainLayout />}>
-              <Route index path="/" element={<MainPage />} />
-              <Route path="/history" element={<History />} />
-              <Route path="/developer" element={<DevDocument />} />
-              <Route path="/board">
-                <Route index path="/board" element={<Board />} />
-                <Route path="/board/new" element={<NewArticleEditor />} />
-              </Route>
-              <Route path="/articles/:id" element={<Article />} />
-              <Route path="/login" element={<Login />} />
-              <Route path="/signup" element={<SignUp />} />
-              <Route path="/mypage" element={<MyPage />} />
-              <Route path="*" element={<NotFound />} />
+      <QueryClientProvider client={queryClient}>
+        <CookiesProvider>
+          <AuthProvider>
+            <GlobalStyle />
+            <Navigator />
+            <Routes>
+              <Route path="/" element={<MainLayout />}>
+                <Route index path="/" element={<MainPage />} />
+                <Route path="/history" element={<History />} />
+                <Route path="/developer" element={<DevDocument />} />
+                <Route path="/board">
+                  <Route index path="/board" element={<Board />} />
+                  <Route path="/board/new" element={<NewArticleEditor />} />
+                </Route>
+                <Route path="/articles/:id" element={<Article />} />
+                <Route path="/login" element={<Login />} />
+                <Route path="/signup" element={<SignUp />} />
+                <Route path="/mypage" element={<MyPage />} />
+                <Route path="*" element={<NotFound />} />
 
-              {/* 대시보드 페이지 */}
-              <Route element={<DashboardLayout location={location} />}>
-                <Route index path="/dashboard" element={<Dashboard.Home />} />
-                <Route
-                  path="/dashboard/history"
-                  element={<Dashboard.History />}
-                />
-                <Route
-                  path="/dashboard/executive"
-                  element={<Dashboard.Executive />}
-                />
-                <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
-                <Route path="/dashboard/users" element={<Dashboard.Users />} />
-                <Route path="/dashboard/*" element={<NotFound />} />
+                {/* 대시보드 페이지 */}
+                <Route element={<DashboardLayout location={location} />}>
+                  <Route index path="/dashboard" element={<Dashboard.Home />} />
+                  <Route
+                    path="/dashboard/history"
+                    element={<Dashboard.History />}
+                  />
+                  <Route
+                    path="/dashboard/executive"
+                    element={<Dashboard.Executive />}
+                  />
+                  <Route path="/dashboard/admin" element={<Dashboard.Admin />} />
+                  <Route path="/dashboard/users" element={<Dashboard.Users />} />
+                  <Route path="/dashboard/*" element={<NotFound />} />
+                </Route>
               </Route>
-            </Route>
-          </Routes>
-        </AuthProvider>
-      </CookiesProvider>
+            </Routes>
+          </AuthProvider>
+        </CookiesProvider>
+      </QueryClientProvider>
     </>
   );
 }