Merge pull request #12 from GU-99/feature/router-setting

페이지 라우터 설정하기

src/layouts/DefaultLayout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom';
+
+export default function DefaultLayout() {
+  return (
+    <>
+      <h3>Default Layout</h3>
+      <Outlet />
+    </>
+  );
+}

src/layouts/ProjectLayout.tsx

@@ -0,0 +1,10 @@
+import { Outlet, useParams } from 'react-router-dom';
+
+export default function ProjectLayout() {
+  return (
+    <>
+      <h3>Project Layout</h3>
+      <Outlet />
+    </>
+  );
+}

src/layouts/SettingLayout.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom';
+
+export default function SettingLayout() {
+  return (
+    <>
+      <h3>Setting Layout</h3>
+      <Outlet />
+    </>
+  );
+}

src/layouts/TeamLayout.tsx

@@ -0,0 +1,15 @@
+import { Outlet, useLocation } from 'react-router-dom';
+
+export default function TeamLayout() {
+  const location = useLocation();
+
+  const hasProjectRoute = location.pathname.split('/').includes('projects');
+  if (hasProjectRoute) return <Outlet />;
+
+  return (
+    <>
+      <h3>Team Layout</h3>
+      <Outlet />
+    </>
+  );
+}

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
 import './index.css';
+import MainRouter from './routes/MainRouter.tsx';
 
 async function enableMocking() {
   if (!import.meta.env.DEV) return;
@@ -13,7 +13,7 @@ async function enableMocking() {
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-      <App />
+      <MainRouter />
     </React.StrictMode>,
   );
 });

src/pages/ErrorPage.tsx

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

src/pages/NotFoundPage.tsx

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

src/pages/project/CalendarPage.tsx

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

src/pages/project/KanbanPage.tsx

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

src/pages/setting/TeamSettingPage.tsx

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

src/pages/setting/UserSettingPage.tsx

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

src/pages/team/TeamPage.tsx

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

src/pages/user/SearchIdPage.tsx

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

src/pages/user/SearchPasswordPage.tsx

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

src/pages/user/SignInPage.tsx

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

src/pages/user/SignUpPage.tsx

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

src/routes/AfterLoginRoute.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export default function AfterLoginRoute({ children }: PropsWithChildren) {
+  /**
+   * ToDo: 로그인 기능이 완성되었을 때, 로그인 확인 로직 추가
+   * 로그인 했을 때만, 사용할 수 있도록 경로를 설정하는 컴포넌트, 로그인 상태를 확인해주는 로직이 필요.
+   * AfterLoginRoute BeforeLoginRoute 둘 다 로그인 확인 로직이 필요하므로, 공통 로직을 커스텀 훅으로 추출할 것.
+   */
+  const isAuthenticated = true;
+
+  if (!isAuthenticated) return <Navigate to="/signin" replace />;
+
+  return children || <Outlet />;
+}

src/routes/BeforeLoginRoute.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export default function BeforeLoginRoute({ children }: PropsWithChildren) {
+  /**
+   * ToDo: 로그인 기능이 완성되었을 때, 로그인 확인 로직 추가
+   * 로그인을 하지 않았을 때만, 사용할 수 있도록 경로를 설정하는 라우트 컴포넌트, 로그인 상태를 확인해주는 로직이 필요.
+   * AfterLoginRoute BeforeLoginRoute 둘 다 로그인 확인 로직이 필요하므로, 공통 로직을 커스텀 훅으로 추출할 것.
+   */
+  const isAuthenticated = false;
+
+  if (isAuthenticated) return <Navigate to="/" replace />;
+
+  return children || <Outlet />;
+}

src/routes/MainRouter.tsx

@@ -0,0 +1,82 @@
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import AfterLoginRoute from '@routes/AfterLoginRoute';
+import BeforeLoginRoute from '@routes/BeforeLoginRoute';
+
+import TeamLayout from '@layouts/TeamLayout';
+import DefaultLayout from '@layouts/DefaultLayout';
+import SettingLayout from '@layouts/SettingLayout';
+import ProjectLayout from '@layouts/ProjectLayout';
+
+import SignUpPage from '@pages/user/SignUpPage';
+import SignInPage from '@pages/user/SignInPage';
+import SearchIdPage from '@pages/user/SearchIdPage';
+import SearchPasswordPage from '@pages/user/SearchPasswordPage';
+import UserSettingPage from '@pages/setting/UserSettingPage';
+import TeamSettingPage from '@pages/setting/TeamSettingPage';
+import TeamPage from '@pages/team/TeamPage';
+import CalendarPage from '@pages/project/CalendarPage';
+import KanbanPage from '@pages/project/KanbanPage';
+import ErrorPage from '@pages/ErrorPage';
+import NotFoundPage from '@pages/NotFoundPage';
+
+export default function MainRouter() {
+  const router = createBrowserRouter([
+    {
+      path: '/',
+      element: <BeforeLoginRoute />,
+      errorElement: <ErrorPage />,
+      children: [
+        { path: 'signup', element: <SignUpPage /> },
+        { path: 'signin', element: <SignInPage /> },
+        { path: 'search/id', element: <SearchIdPage /> },
+        { path: 'search/password', element: <SearchPasswordPage /> },
+      ],
+    },
+    {
+      path: '/',
+      element: (
+        <AfterLoginRoute>
+          <DefaultLayout />
+        </AfterLoginRoute>
+      ),
+      errorElement: <ErrorPage />,
+      children: [
+        { index: true, element: <TeamPage /> },
+        {
+          path: 'setting',
+          element: <SettingLayout />,
+          children: [
+            { index: true, element: <UserSettingPage /> },
+            { path: 'user', element: <UserSettingPage /> },
+            { path: 'team/:teamId', element: <TeamSettingPage /> },
+          ],
+        },
+        {
+          path: 'teams',
+          element: <TeamLayout />,
+          children: [
+            { index: true, element: <TeamPage /> },
+            {
+              path: ':teamId',
+              children: [
+                { index: true, element: <TeamPage /> },
+                {
+                  path: 'projects/:projectId',
+                  element: <ProjectLayout />,
+                  children: [
+                    { index: true, element: <CalendarPage /> },
+                    { path: 'calendar', element: <CalendarPage /> },
+                    { path: 'kanban', element: <KanbanPage /> },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    { path: '*', element: <NotFoundPage /> },
+  ]);
+
+  return <RouterProvider router={router} />;
+}

tsconfig.json

@@ -35,6 +35,7 @@
       "@layouts/*": ["src/layouts/*"],
       "@mocks/*": ["src/mocks/*"],
       "@pages/*": ["src/pages/*"],
+      "@routes/*": ["src/routes/*"],
       "@services/*": ["src/services/*"],
       "@stories/*": ["src/stories/*"],
       "@types/*": ["src/types/*"],

vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
       { find: '@layouts', replacement: path.resolve(__dirname, 'src/layouts') },
       { find: '@mocks', replacement: path.resolve(__dirname, 'src/mocks') },
       { find: '@pages', replacement: path.resolve(__dirname, 'src/pages') },
+      { find: '@routes', replacement: path.resolve(__dirname, 'src/routes') },
       { find: '@services', replacement: path.resolve(__dirname, 'src/services') },
       { find: '@stories', replacement: path.resolve(__dirname, 'src/stories') },
       { find: '@types', replacement: path.resolve(__dirname, 'src/types') },