From 685a0380b46a955cb8d34a3cd4c57cfbabec066b Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sun, 9 Jun 2024 19:41:29 +0900 Subject: [PATCH 1/5] =?UTF-8?q?Config:=20#10=20routes=20=EC=A0=88=EB=8C=80?= =?UTF-8?q?=20=EA=B2=BD=EB=A1=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 1 + vite.config.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/tsconfig.json b/tsconfig.json index 27b24c18..38f55b68 100644 --- a/tsconfig.json +++ b/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/*"], diff --git a/vite.config.ts b/vite.config.ts index 3da201d3..3461c821 100644 --- a/vite.config.ts +++ b/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') }, From 023d3728dd25a9a315304a838a747286fc60e95a Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sun, 9 Jun 2024 19:44:37 +0900 Subject: [PATCH 2/5] =?UTF-8?q?Design:=20#10=20router=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/.gitkeep | 0 src/pages/ErrorPage.tsx | 3 +++ src/pages/NotFoundPage.tsx | 3 +++ src/pages/project/CalendarPage.tsx | 3 +++ src/pages/project/KanbanPage.tsx | 3 +++ src/pages/setting/TeamSettingPage.tsx | 3 +++ src/pages/setting/UserSettingPage.tsx | 3 +++ src/pages/team/TeamPage.tsx | 3 +++ src/pages/user/SearchIdPage.tsx | 3 +++ src/pages/user/SearchPasswordPage.tsx | 3 +++ src/pages/user/SignInPage.tsx | 3 +++ src/pages/user/SignUpPage.tsx | 3 +++ 12 files changed, 33 insertions(+) delete mode 100644 src/pages/.gitkeep create mode 100644 src/pages/ErrorPage.tsx create mode 100644 src/pages/NotFoundPage.tsx create mode 100644 src/pages/project/CalendarPage.tsx create mode 100644 src/pages/project/KanbanPage.tsx create mode 100644 src/pages/setting/TeamSettingPage.tsx create mode 100644 src/pages/setting/UserSettingPage.tsx create mode 100644 src/pages/team/TeamPage.tsx create mode 100644 src/pages/user/SearchIdPage.tsx create mode 100644 src/pages/user/SearchPasswordPage.tsx create mode 100644 src/pages/user/SignInPage.tsx create mode 100644 src/pages/user/SignUpPage.tsx diff --git a/src/pages/.gitkeep b/src/pages/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/ErrorPage.tsx b/src/pages/ErrorPage.tsx new file mode 100644 index 00000000..93fe324c --- /dev/null +++ b/src/pages/ErrorPage.tsx @@ -0,0 +1,3 @@ +export default function ErrorPage() { + return
ErrorPage
; +} diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx new file mode 100644 index 00000000..5f472d66 --- /dev/null +++ b/src/pages/NotFoundPage.tsx @@ -0,0 +1,3 @@ +export default function NotFoundPage() { + return
NotFoundPage
; +} diff --git a/src/pages/project/CalendarPage.tsx b/src/pages/project/CalendarPage.tsx new file mode 100644 index 00000000..f593dc04 --- /dev/null +++ b/src/pages/project/CalendarPage.tsx @@ -0,0 +1,3 @@ +export default function CalendarPage() { + return
CalendarPage
; +} diff --git a/src/pages/project/KanbanPage.tsx b/src/pages/project/KanbanPage.tsx new file mode 100644 index 00000000..d4696480 --- /dev/null +++ b/src/pages/project/KanbanPage.tsx @@ -0,0 +1,3 @@ +export default function KanbanPage() { + return
KanbanPage
; +} diff --git a/src/pages/setting/TeamSettingPage.tsx b/src/pages/setting/TeamSettingPage.tsx new file mode 100644 index 00000000..ea578756 --- /dev/null +++ b/src/pages/setting/TeamSettingPage.tsx @@ -0,0 +1,3 @@ +export default function TeamSettingPage() { + return
TeamSettingPage
; +} diff --git a/src/pages/setting/UserSettingPage.tsx b/src/pages/setting/UserSettingPage.tsx new file mode 100644 index 00000000..34ef9eb2 --- /dev/null +++ b/src/pages/setting/UserSettingPage.tsx @@ -0,0 +1,3 @@ +export default function UserSettingPage() { + return
UserSettingPage
; +} diff --git a/src/pages/team/TeamPage.tsx b/src/pages/team/TeamPage.tsx new file mode 100644 index 00000000..7e44d21b --- /dev/null +++ b/src/pages/team/TeamPage.tsx @@ -0,0 +1,3 @@ +export default function TeamPage() { + return
TeamPage
; +} diff --git a/src/pages/user/SearchIdPage.tsx b/src/pages/user/SearchIdPage.tsx new file mode 100644 index 00000000..734eea66 --- /dev/null +++ b/src/pages/user/SearchIdPage.tsx @@ -0,0 +1,3 @@ +export default function SearchIdPage() { + return
SearchIdPage
; +} diff --git a/src/pages/user/SearchPasswordPage.tsx b/src/pages/user/SearchPasswordPage.tsx new file mode 100644 index 00000000..a8669445 --- /dev/null +++ b/src/pages/user/SearchPasswordPage.tsx @@ -0,0 +1,3 @@ +export default function SearchPasswordPage() { + return
SearchPasswordPage
; +} diff --git a/src/pages/user/SignInPage.tsx b/src/pages/user/SignInPage.tsx new file mode 100644 index 00000000..2ac27c76 --- /dev/null +++ b/src/pages/user/SignInPage.tsx @@ -0,0 +1,3 @@ +export default function SignInPage() { + return
SignInPage
; +} diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx new file mode 100644 index 00000000..be64afeb --- /dev/null +++ b/src/pages/user/SignUpPage.tsx @@ -0,0 +1,3 @@ +export default function SignUpPage() { + return
SignUpPage
; +} From a152bb46d5e371122c71b39c68b6c344a7ac2012 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sun, 9 Jun 2024 19:47:50 +0900 Subject: [PATCH 3/5] =?UTF-8?q?Design:=20#10=20router=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EC=97=90=20=ED=95=84=EC=9A=94=ED=95=9C=20layout=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B3=A8=EA=B2=A9=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/DefaultLayout.tsx | 10 ++++++++++ src/layouts/ProjectLayout.tsx | 10 ++++++++++ src/layouts/SettingLayout.tsx | 10 ++++++++++ src/layouts/TeamLayout.tsx | 15 +++++++++++++++ 4 files changed, 45 insertions(+) create mode 100644 src/layouts/DefaultLayout.tsx create mode 100644 src/layouts/ProjectLayout.tsx create mode 100644 src/layouts/SettingLayout.tsx create mode 100644 src/layouts/TeamLayout.tsx diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx new file mode 100644 index 00000000..99ca7bc1 --- /dev/null +++ b/src/layouts/DefaultLayout.tsx @@ -0,0 +1,10 @@ +import { Outlet } from 'react-router-dom'; + +export default function DefaultLayout() { + return ( + <> +

Default Layout

+ + + ); +} diff --git a/src/layouts/ProjectLayout.tsx b/src/layouts/ProjectLayout.tsx new file mode 100644 index 00000000..e86ef4b5 --- /dev/null +++ b/src/layouts/ProjectLayout.tsx @@ -0,0 +1,10 @@ +import { Outlet, useParams } from 'react-router-dom'; + +export default function ProjectLayout() { + return ( + <> +

Project Layout

+ + + ); +} diff --git a/src/layouts/SettingLayout.tsx b/src/layouts/SettingLayout.tsx new file mode 100644 index 00000000..ac177c37 --- /dev/null +++ b/src/layouts/SettingLayout.tsx @@ -0,0 +1,10 @@ +import { Outlet } from 'react-router-dom'; + +export default function SettingLayout() { + return ( + <> +

Setting Layout

+ + + ); +} diff --git a/src/layouts/TeamLayout.tsx b/src/layouts/TeamLayout.tsx new file mode 100644 index 00000000..7a9ee1a3 --- /dev/null +++ b/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 ; + + return ( + <> +

Team Layout

+ + + ); +} From b33d983e1852bfc3b936d0f45ed92712cd818502 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sun, 9 Jun 2024 19:51:51 +0900 Subject: [PATCH 4/5] =?UTF-8?q?Feat:=20#10=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= =?UTF-8?q?=20=EC=A0=84,=20=ED=9B=84=EC=97=90=EB=A7=8C=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=A0=9C=ED=95=9C=ED=95=98=EB=8A=94=20Router=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/AfterLoginRoute.tsx | 15 +++++++++++++++ src/routes/BeforeLoginRoute.tsx | 15 +++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 src/routes/AfterLoginRoute.tsx create mode 100644 src/routes/BeforeLoginRoute.tsx diff --git a/src/routes/AfterLoginRoute.tsx b/src/routes/AfterLoginRoute.tsx new file mode 100644 index 00000000..3c80ff51 --- /dev/null +++ b/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 ; + + return children || ; +} diff --git a/src/routes/BeforeLoginRoute.tsx b/src/routes/BeforeLoginRoute.tsx new file mode 100644 index 00000000..bf3e407f --- /dev/null +++ b/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 ; + + return children || ; +} From 822a31ff853cfbcec7400dcc21122ccf0abab386 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Sun, 9 Jun 2024 19:53:54 +0900 Subject: [PATCH 5/5] =?UTF-8?q?Feat:=20#10=20Router=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.tsx | 4 +- src/routes/MainRouter.tsx | 82 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 2 deletions(-) create mode 100644 src/routes/MainRouter.tsx diff --git a/src/main.tsx b/src/main.tsx index 4be69977..b74e1b5d 100644 --- a/src/main.tsx +++ b/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( - + , ); }); diff --git a/src/routes/MainRouter.tsx b/src/routes/MainRouter.tsx new file mode 100644 index 00000000..c85d5c57 --- /dev/null +++ b/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: , + errorElement: , + children: [ + { path: 'signup', element: }, + { path: 'signin', element: }, + { path: 'search/id', element: }, + { path: 'search/password', element: }, + ], + }, + { + path: '/', + element: ( + + + + ), + errorElement: , + children: [ + { index: true, element: }, + { + path: 'setting', + element: , + children: [ + { index: true, element: }, + { path: 'user', element: }, + { path: 'team/:teamId', element: }, + ], + }, + { + path: 'teams', + element: , + children: [ + { index: true, element: }, + { + path: ':teamId', + children: [ + { index: true, element: }, + { + path: 'projects/:projectId', + element: , + children: [ + { index: true, element: }, + { path: 'calendar', element: }, + { path: 'kanban', element: }, + ], + }, + ], + }, + ], + }, + ], + }, + { path: '*', element: }, + ]); + + return ; +}