diff --git a/admin/src/components/Route/index.tsx b/admin/src/components/Route/index.tsx new file mode 100644 index 00000000..3fc05ffb --- /dev/null +++ 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 ; + } + + return ; +} + +export function UnProtectedRoute({ redirectPath = "/lottery" }: RouteProps) { + const [cookies] = useCookies([COOKIE_KEY.ACCESS_TOKEN]); + + if (cookies[COOKIE_KEY.ACCESS_TOKEN]) { + return ; + } + + return ; +} diff --git a/admin/src/router.tsx b/admin/src/router.tsx index 72094bc7..8fdc2eb8 100644 --- 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: , children: [ { - path: "login/", - element: , - }, - { - path: "lottery/", + element: , children: [ { - index: true, - element: , - }, - { - path: "winner", - element: , - loader: LotteryAPI.getLottery, - }, - { - path: "winner-list", - element: , + path: "login/", + element: , }, ], }, { - path: "rush/", + element: , children: [ { - index: true, - element: , + path: "lottery/", + children: [ + { + index: true, + element: , + }, + { + path: "winner", + element: , + loader: LotteryAPI.getLottery, + }, + { + path: "winner-list", + element: , + }, + ], }, { - path: "winner-list", - element: , + path: "rush/", + children: [ + { + index: true, + element: , + }, + { + path: "winner-list", + element: , + }, + ], }, ], },