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

src/App.tsx

@@ -1,15 +1,13 @@
 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 (
     <>
       <RouterProvider router={router} />
-      <Toaster richColors position="top-center" />
     </>
   );
 }

src/components/auth/findEmailStep/Step01Phone.tsx

@@ -134,7 +134,7 @@ export default function Step01Phone({ onNext }: IStep01PhoneProps) {
           <button
             type="button"
             className="font-body2 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
-            onClick={() => navigate("/auth/find-pw")}
+            onClick={() => navigate("/find-pw")}
           >
             비밀번호 찾기
           </button>

src/components/auth/findEmailStep/Step02Email.tsx

@@ -30,7 +30,7 @@ export default function Step02Email() {
           <button
             type="button"
             className="shrink-0 h-8 px-2 border border-gray-200 bg-white rounded-lg text-xs text-text-sub hover:bg-gray-50 transition-colors"
-            onClick={() => navigate("/auth/find-pw")}
+            onClick={() => navigate("/find-pw")}
           >
             비밀번호 재설정
           </button>
@@ -39,7 +39,7 @@ export default function Step02Email() {
         <Button
           size="big"
           fullWidth
-          onClick={() => navigate("/auth/login")}
+          onClick={() => navigate("/login")}
           variant="gradient"
         >
           로그인으로 돌아가기

src/components/auth/findPwStep/Step02ResetPassword.tsx

@@ -31,7 +31,7 @@ export default function Step02ResetPassword() {
     toast.success("비밀번호가 변경되었습니다.", {
       description: "로그인 페이지로 이동합니다.",
     });
-    navigate("/auth/login");
+    navigate("/login");
   };
 
   return (

src/components/auth/signupStep/Step03Profile.tsx

@@ -45,7 +45,7 @@ export default function SignupProfile() {
     toast.success("회원가입이 완료되었습니다!", {
       description: `이름: ${data.name}, 환영합니다!`,
     });
-    navigate("/auth/login");
+    navigate("/login");
   };
 
   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

@@ -1,12 +1,14 @@
 import { Outlet } from "react-router-dom";
+import { Toaster } from "sonner";
 
 import ModalProvider from "@/components/modal/ModalProvider";
 
-export default function RootLayout() {
+export default function DefaultLayout() {
   return (
     <>
       <Outlet />
       <ModalProvider />
+      <Toaster richColors position="top-center" />
     </>
   );
 }

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/ads/list/AdsListPage.tsx

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

src/pages/ads/new/AdsCreatePage.tsx

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

src/pages/auth/Login.tsx

@@ -59,7 +59,7 @@ export default function Login() {
           />
 
           <Link
-            to="/auth/find-email"
+            to="/find-email"
             className="block w-full text-center mt-3 font-caption text-text-sub underline underline-offset-4 hover:text-text-auth-sub"
           >
             이메일/비밀번호를 잊어버렸어요
@@ -117,7 +117,7 @@ export default function Login() {
           </div>
 
           <Link
-            to="/auth/signup"
+            to="/signup"
             state={{ step: 1 }}
             className="mt-6 font-body3 text-text-placeholder underline underline-offset-4 hover:text-text-auth-sub"
           >

src/pages/auth/Signup.tsx

@@ -84,7 +84,7 @@ export default function Signup() {
       <div className="font-body3 text-text-sub mt-15 flex gap-2">
         <span>이미 사용자 계정이 있다면?</span>
         <Link
-          to="/auth/login"
+          to="/login"
           className="text-text-sub underline hover:text-text-auth-sub"
         >
           로그인하기

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/ads/new/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,43 @@
+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";
+import Error from "@/pages/common/Error";
+
+function AuthGuard({ children }: { children: React.ReactNode }) {
+  // 실제 인증 상태 확인 로직으로 대체 예정
+  const isAuthenticated = false;
+
+  if (!isAuthenticated) {
+    return <Navigate to="/signup" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+export const router = createBrowserRouter([
+  {
+    element: <DefaultLayout />,
+    errorElement: <Error />,
+    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;