feat: protectedRoute / unProtectedRoute 생성

softeerbootcamp4th · Aug 11, 2024 · d2c9af4 · d2c9af4
1 parent ce16917
commit d2c9af4
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 21 deletions.
diff --git a/admin/src/components/Route/index.tsx b/admin/src/components/Route/index.tsx
@@ -0,0 +1,27 @@
+import { useCookies } from "react-cookie";
+import { Navigate, Outlet } from "react-router-dom";
+import { COOKIE_KEY } from "@/constants/cookie";
+
+interface RouteProps {
+    redirectPath?: string;
+}
+
+export function ProtectedRoute({ redirectPath = "/login" }: RouteProps) {
+    const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
+
+    if (!cookies[COOKIE_KEY.ACCESS_TOKEN]) {
+        return <Navigate to={redirectPath} replace />;
+    }
+
+    return <Outlet />;
+}
+
+export function UnProtectedRoute({ redirectPath = "/lottery" }: RouteProps) {
+    const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]);
+
+    if (cookies[COOKIE_KEY.ACCESS_TOKEN]) {
+        return <Navigate to={redirectPath} replace />;
+    }
+
+    return <Outlet />;
+}
diff --git a/admin/src/router.tsx b/admin/src/router.tsx
@@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import { LotteryAPI } from "./apis/lotteryAPI";
 import Layout from "./components/Layout";
+import { ProtectedRoute, UnProtectedRoute } from "./components/Route";
 import Login from "./pages/Login";
 import Lottery from "./pages/Lottery";
 import LotteryWinner from "./pages/LotteryWinner";
@@ -14,37 +15,47 @@ export const router = createBrowserRouter([
         element: <Layout />,
         children: [
             {
-                path: "login/",
-                element: <Login />,
-            },
-            {
-                path: "lottery/",
+                element: <UnProtectedRoute />,
                 children: [
                     {
-                        index: true,
-                        element: <Lottery />,
-                    },
-                    {
-                        path: "winner",
-                        element: <LotteryWinner />,
-                        loader: LotteryAPI.getLottery,
-                    },
-                    {
-                        path: "winner-list",
-                        element: <LotteryWinnerList />,
+                        path: "login/",
+                        element: <Login />,
                     },
                 ],
             },
             {
-                path: "rush/",
+                element: <ProtectedRoute />,
                 children: [
                     {
-                        index: true,
-                        element: <Rush />,
+                        path: "lottery/",
+                        children: [
+                            {
+                                index: true,
+                                element: <Lottery />,
+                            },
+                            {
+                                path: "winner",
+                                element: <LotteryWinner />,
+                                loader: LotteryAPI.getLottery,
+                            },
+                            {
+                                path: "winner-list",
+                                element: <LotteryWinnerList />,
+                            },
+                        ],
                     },
                     {
-                        path: "winner-list",
-                        element: <RushWinnerList />,
+                        path: "rush/",
+                        children: [
+                            {
+                                index: true,
+                                element: <Rush />,
+                            },
+                            {
+                                path: "winner-list",
+                                element: <RushWinnerList />,
+                            },
+                        ],
                     },
                 ],
             },