From a1bee42b42f7ff260131ec78240159b624bd3fb9 Mon Sep 17 00:00:00 2001
From: unknown <kc21ynje@gmail.com>
Date: Fri, 8 Nov 2024 11:39:45 +0900
Subject: [PATCH 1/2] =?UTF-8?q?Feat(router):=20Protected=20Route=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/routes/components/index.ts            |  1 +
 .../protected-route/ProtectedRoute.tsx        | 38 ++++++++
 .../components/protected-route/index.ts       |  1 +
 src/app/routes/path.ts                        | 10 +-
 src/app/routes/router.tsx                     | 94 ++++++++++++-------
 5 files changed, 103 insertions(+), 41 deletions(-)
 create mode 100644 src/app/routes/components/protected-route/ProtectedRoute.tsx
 create mode 100644 src/app/routes/components/protected-route/index.ts

diff --git a/src/app/routes/components/index.ts b/src/app/routes/components/index.ts
index e69de29b..4acbc303 100644
--- a/src/app/routes/components/index.ts
+++ b/src/app/routes/components/index.ts
@@ -0,0 +1 @@
+export * from './protected-route';
diff --git a/src/app/routes/components/protected-route/ProtectedRoute.tsx b/src/app/routes/components/protected-route/ProtectedRoute.tsx
new file mode 100644
index 00000000..04511a31
--- /dev/null
+++ b/src/app/routes/components/protected-route/ProtectedRoute.tsx
@@ -0,0 +1,38 @@
+import { Navigate } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
+
+import { RouterPath } from '../../path';
+
+type Props = {
+  requiresAuth?: boolean;
+  sinittoOnly?: boolean;
+  guardOnly?: boolean;
+};
+
+const ProtectedRoute = ({ requiresAuth, sinittoOnly, guardOnly }: Props) => {
+  const accessToken = localStorage.getItem('accessToken');
+  const isSinitto = localStorage.getItem('isSinitto') === 'true';
+
+  if (requiresAuth && !accessToken) {
+    return <Navigate to={RouterPath.ROOT} />;
+  }
+  if (accessToken) {
+    if (sinittoOnly && !isSinitto) {
+      return <Navigate to={RouterPath.GUARD} />;
+    }
+    if (guardOnly && isSinitto) {
+      return <Navigate to={RouterPath.SINITTO} />;
+    }
+    if (!requiresAuth) {
+      return isSinitto ? (
+        <Navigate to={RouterPath.SINITTO} />
+      ) : (
+        <Navigate to={RouterPath.GUARD} />
+      );
+    }
+  }
+
+  return <Outlet />;
+};
+
+export default ProtectedRoute;
diff --git a/src/app/routes/components/protected-route/index.ts b/src/app/routes/components/protected-route/index.ts
new file mode 100644
index 00000000..4de35d06
--- /dev/null
+++ b/src/app/routes/components/protected-route/index.ts
@@ -0,0 +1 @@
+export { default as ProtectedRoute } from './ProtectedRoute';
diff --git a/src/app/routes/path.ts b/src/app/routes/path.ts
index 260efe46..51330b3d 100644
--- a/src/app/routes/path.ts
+++ b/src/app/routes/path.ts
@@ -1,9 +1,9 @@
 export const RouterPath = {
   ROOT: '/',
-  LOGIN: '/login',
-  SIGNUP: '/signup',
-  REGISTER: '/register',
-  REDIRECT: '/redirection',
+  LOGIN: 'login',
+  SIGNUP: 'signup',
+  REGISTER: 'register',
+  REDIRECT: 'redirection',
   GUARD: '/guard',
   MYPAGE: `mypage`,
   GUARD_GUIDELINE: `:seniorId/:guidelineType`,
@@ -16,7 +16,7 @@ export const RouterPath = {
   CALL_BACK_LIST: `call-back`,
   CALL_BACK_DETAIL: `:callBackId`,
   CALL_BACK_GUID_LINE: `:guideLineId`,
-  SENIOR_REGISTER: `/senior-register`,
+  SENIOR_REGISTER: `senior-register`,
   SINITTO_REVIEW: `review`,
 
   DUMMY_LOGIN: `/dummy`,
diff --git a/src/app/routes/router.tsx b/src/app/routes/router.tsx
index a11600a4..76b4dc3d 100644
--- a/src/app/routes/router.tsx
+++ b/src/app/routes/router.tsx
@@ -1,5 +1,6 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
+import { ProtectedRoute } from './components';
 import { RouterPath } from './path';
 import {
   MainPage,
@@ -27,39 +28,41 @@ import { Layout } from '@/shared/components';
 export const router = createBrowserRouter([
   {
     path: RouterPath.ROOT,
-    element: <MainPage />,
-  },
-  {
-    path: RouterPath.SIGNUP,
-    element: <Layout title='회원가입' />,
+    element: <ProtectedRoute />,
     children: [
       {
-        index: true,
-        element: <RegisterPage />,
+        path: '',
+        children: [
+          {
+            index: true,
+            element: <MainPage />,
+          },
+        ],
       },
-    ],
-  },
-  {
-    path: RouterPath.REDIRECT,
-    children: [
       {
-        index: true,
-        element: <RedirectPage />,
+        path: RouterPath.SIGNUP,
+        element: <Layout title='회원가입' />,
+        children: [
+          {
+            index: true,
+            element: <RegisterPage />,
+          },
+        ],
       },
-    ],
-  },
-  {
-    path: RouterPath.DUMMY_LOGIN,
-    element: <Layout title='더미 로그인 Redirect' />,
-    children: [
       {
-        index: true,
-        element: <DummyRedirectPage />,
+        path: RouterPath.REDIRECT,
+        children: [
+          {
+            index: true,
+            element: <RedirectPage />,
+          },
+        ],
       },
     ],
   },
   {
     path: RouterPath.GUARD,
+    element: <ProtectedRoute requiresAuth guardOnly />,
     children: [
       {
         path: '',
@@ -125,10 +128,36 @@ export const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: RouterPath.SENIOR_REGISTER,
+        element: <Layout title='시니어 등록하기' />,
+        children: [
+          {
+            index: true,
+            element: <SeniorRegisterPage />,
+          },
+        ],
+      },
+      {
+        path: RouterPath.CALL_BACK_LIST,
+        children: [
+          {
+            path: RouterPath.SINITTO_REVIEW,
+            element: <Layout title='시니또 평가하기' />,
+            children: [
+              {
+                index: true,
+                element: <SinittoReviewPage />,
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
   {
     path: RouterPath.SINITTO,
+    element: <ProtectedRoute requiresAuth sinittoOnly />,
     children: [
       {
         index: true,
@@ -182,16 +211,6 @@ export const router = createBrowserRouter([
               },
             ],
           },
-          {
-            path: RouterPath.SINITTO_REVIEW,
-            element: <Layout title='시니또 평가하기' />,
-            children: [
-              {
-                index: true,
-                element: <SinittoReviewPage />,
-              },
-            ],
-          },
         ],
       },
 
@@ -199,7 +218,10 @@ export const router = createBrowserRouter([
         path: RouterPath.HELLO_CALL,
         element: <Layout title='안부전화 서비스' />,
         children: [
-          { index: true, element: <HelloCallListPage /> },
+          {
+            index: true,
+            element: <HelloCallListPage />,
+          },
           {
             path: RouterPath.HELLO_CALL_SERVICE,
             element: <HelloCallServicePage />,
@@ -214,12 +236,12 @@ export const router = createBrowserRouter([
     ],
   },
   {
-    path: RouterPath.SENIOR_REGISTER,
-    element: <Layout title='시니어 등록하기' />,
+    path: RouterPath.DUMMY_LOGIN,
+    element: <Layout title='더미 로그인 Redirect' />,
     children: [
       {
         index: true,
-        element: <SeniorRegisterPage />,
+        element: <DummyRedirectPage />,
       },
     ],
   },

From 6c17b29876f1a532ff66f8e5f698adc3ba58d8e4 Mon Sep 17 00:00:00 2001
From: unknown <kc21ynje@gmail.com>
Date: Fri, 8 Nov 2024 12:27:40 +0900
Subject: [PATCH 2/2] =?UTF-8?q?Fix:=20import=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/routes/components/protected-route/ProtectedRoute.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/routes/components/protected-route/ProtectedRoute.tsx b/src/app/routes/components/protected-route/ProtectedRoute.tsx
index 04511a31..caebc46b 100644
--- a/src/app/routes/components/protected-route/ProtectedRoute.tsx
+++ b/src/app/routes/components/protected-route/ProtectedRoute.tsx
@@ -1,5 +1,4 @@
-import { Navigate } from 'react-router-dom';
-import { Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from 'react-router-dom';
 
 import { RouterPath } from '../../path';