[Refactor/#20] 라우터 구조 리팩토링 및 lazy loading 적용

src/App.tsx

@@ -3,7 +3,7 @@ import "./App.css";
 import { RouterProvider } from "react-router-dom";
 import { Toaster } from "sonner";
 
-import router from "./routes/routes";
+import { router } from "@/routes/Router";
 
 function App() {
   return (

src/layout/auth/AuthLayout.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { Outlet } from "react-router-dom";
 
 import OnboardingIntro from "@/components/auth/common/OnboardingIntro";
@@ -11,7 +12,9 @@ export default function AuthLayout() {
 
       <div className="flex w-full items-center justify-center bg-white 2xl:w-[65%]">
         <div className="w-full max-w-md px-6">
-          <Outlet />
+          <Suspense fallback={<div>Loading...</div>}>
+            <Outlet />
+          </Suspense>
         </div>
       </div>
     </div>

src/layout/common/RootLayout.tsx → src/layout/default/DefaultLayout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from "react-router-dom";
 
 import ModalProvider from "@/components/modal/ModalProvider";
 
-export default function RootLayout() {
+export default function DefaultLayout() {
   return (
     <>
       <Outlet />

src/layout/main/MainLayout.tsx

@@ -0,0 +1,12 @@
+import { Suspense } from "react";
+import { Outlet } from "react-router-dom";
+
+export default function MainLayout() {
+  return (
+    <div>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Outlet />
+      </Suspense>
+    </div>
+  );
+}

src/pages/AdsCreatePage.tsx

@@ -0,0 +1,3 @@
+export default function AdsCreatePage() {
+  return <div>AdsCreatePage</div>;
+}

src/pages/ads/list/AdsListPage.tsx

@@ -0,0 +1,3 @@
+export default function AdsListPage() {
+  return <div>AdsListPage</div>;
+}

src/routes/AuthRoutes.tsx

@@ -0,0 +1,28 @@
+import { lazy } from "react";
+import type { RouteObject } from "react-router-dom";
+
+const FindEmail = lazy(() => import("@/pages/auth/FindEmail"));
+const FindPw = lazy(() => import("@/pages/auth/FindPw"));
+const Login = lazy(() => import("@/pages/auth/Login"));
+const Signup = lazy(() => import("@/pages/auth/Signup"));
+
+const AuthRoutes: RouteObject[] = [
+  {
+    path: "signup",
+    element: <Signup />,
+  },
+  {
+    path: "login",
+    element: <Login />,
+  },
+  {
+    path: "find-email",
+    element: <FindEmail />,
+  },
+  {
+    path: "find-pw",
+    element: <FindPw />,
+  },
+];
+
+export default AuthRoutes;

src/routes/MainRoutes.tsx

@@ -0,0 +1,37 @@
+import { lazy } from "react";
+import type { RouteObject } from "react-router-dom";
+
+const OverviewDashboard = lazy(
+  () => import("@/pages/dashboard/overview/OverviewDashboard"),
+);
+const PlatformDashboard = lazy(
+  () => import("@/pages/dashboard/platform/PlatformDashboard"),
+);
+const Timeline = lazy(() => import("@/pages/dashboard/timeline/Timeline"));
+const AdsListPage = lazy(() => import("@/pages/ads/list/AdsListPage"));
+const AdsCreatePage = lazy(() => import("@/pages/AdsCreatePage"));
+
+const MainRoutes: RouteObject[] = [
+  {
+    path: "/",
+    element: <OverviewDashboard />,
+  },
+  {
+    path: "platform",
+    element: <PlatformDashboard />,
+  },
+  {
+    path: "timeline",
+    element: <Timeline />,
+  },
+  {
+    path: "ads",
+    element: <AdsListPage />,
+  },
+  {
+    path: "ads/create",
+    element: <AdsCreatePage />,
+  },
+];
+
+export default MainRoutes;

src/routes/Router.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { createBrowserRouter, Navigate } from "react-router-dom";
+
+import AuthRoutes from "./AuthRoutes";
+import MainRoutes from "./MainRoutes";
+import UserRoutes from "./UserRoutes";
+
+import AuthLayout from "@/layout/auth/AuthLayout";
+import DefaultLayout from "@/layout/default/DefaultLayout";
+import MainLayout from "@/layout/main/MainLayout";
+
+function AuthGuard({ children }: { children: React.ReactNode }) {
+  // 실제 인증 상태 확인 로직으로 대체 예정
+  const isAuthenticated = false;
+
+  if (!isAuthenticated) {
+    return <Navigate to="/signup" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export const router = createBrowserRouter([
+  {
+    element: <DefaultLayout />,
+    children: [
+      {
+        element: <AuthLayout />,
+        children: AuthRoutes,
+      },
+      {
+        element: (
+          <AuthGuard>
+            <MainLayout />
+          </AuthGuard>
+        ),
+        children: [...MainRoutes, ...UserRoutes],
+      },
+    ],
+  },
+]);

src/routes/UserRoutes.tsx

@@ -0,0 +1,18 @@
+import { lazy } from "react";
+import type { RouteObject } from "react-router-dom";
+
+const Setting = lazy(() => import("@/pages/setting/Setting"));
+const Workspace = lazy(() => import("@/pages/workspace/Workspace"));
+
+const UserRoutes: RouteObject[] = [
+  {
+    path: "setting",
+    element: <Setting />,
+  },
+  {
+    path: "workspace",
+    element: <Workspace />,
+  },
+];
+
+export default UserRoutes;