fix: router에 React.lazy 적용

boostcampwm-2024 · Dec 3, 2024 · 60270a4 · 60270a4
1 parent 11f0254
commit 60270a4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 50 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -1,52 +1,5 @@
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { lazy, Suspense, useEffect } from 'react';
-import Layout from '@/components/layout/Layout';
-import LoadingSpinner from '@/components/common/LoadingSpinner';
-import PublicRoute from '@/components/PublicRoute';
-import PrivateRoute from '@/components/PrivateRoute';
-
-const LandingPage = lazy(() => import('@/pages/landingPage/index'));
-const LobbyPage = lazy(() => import('@/pages/lobbyPage/index'));
-const GamePage = lazy(() => import('@/pages/gamePage/index'));
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Layout />,
-    children: [
-      {
-        index: true,
-        element: (
-          <PublicRoute>
-            <Suspense fallback={<LoadingSpinner />}>
-              <LandingPage />
-            </Suspense>
-          </PublicRoute>
-        ),
-      },
-      {
-        path: 'lobby',
-        element: (
-          <PrivateRoute>
-            <Suspense fallback={<LoadingSpinner />}>
-              <LobbyPage />
-            </Suspense>
-          </PrivateRoute>
-        ),
-      },
-      {
-        path: 'game/:gsid',
-        element: (
-          <PrivateRoute>
-            <Suspense fallback={<LoadingSpinner />}>
-              <GamePage />
-            </Suspense>
-          </PrivateRoute>
-        ),
-      },
-    ],
-  },
-]);
+import { useEffect } from 'react';
+import AppRouter from './routes/router';
 
 function App() {
   useEffect(() => {
@@ -61,7 +14,7 @@ function App() {
     };
   }, []);
 
-  return <RouterProvider router={router} />;
+  return <AppRouter />;
 }
 
 export default App;
diff --git a/packages/frontend/src/routes/router.tsx b/packages/frontend/src/routes/router.tsx
@@ -0,0 +1,54 @@
+import LoadingSpinner from '@/components/common/LoadingSpinner';
+import Layout from '@/components/layout/Layout';
+import { lazy } from 'react';
+import PrivateRoute from '@/components/PrivateRoute';
+import PublicRoute from '@/components/PublicRoute';
+import { Suspense } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+const LandingPage = lazy(() => import('@/pages/landingPage/index'));
+const LobbyPage = lazy(() => import('@/pages/lobbyPage/index'));
+const GamePage = lazy(() => import('@/pages/gamePage/index'));
+
+export default function AppRouter() {
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      element: <Layout />,
+      children: [
+        {
+          index: true,
+          element: (
+            <PublicRoute>
+              <Suspense fallback={<LoadingSpinner />}>
+                <LandingPage />
+              </Suspense>
+            </PublicRoute>
+          ),
+        },
+        {
+          path: 'lobby',
+          element: (
+            <PrivateRoute>
+              <Suspense fallback={<LoadingSpinner />}>
+                <LobbyPage />
+              </Suspense>
+            </PrivateRoute>
+          ),
+        },
+        {
+          path: 'game/:gsid',
+          element: (
+            <PrivateRoute>
+              <Suspense fallback={<LoadingSpinner />}>
+                <GamePage />
+              </Suspense>
+            </PrivateRoute>
+          ),
+        },
+      ],
+    },
+  ]);
+
+  return <RouterProvider router={router} />;
+}