Gmmq 72 feat: 라우터 설정하기 (#2)

* feat: 라우터 적용을 위한 페이지 생성

* feat: 레이아웃 생성

* feat: 라우터 설정

* chore: index 파일 수정

* feat: Page 폴더 구조 정리

* feat: 라우터 설정

* chore: 사용하지 않는 파일 제거

* fix: 경로 수정

* chore: index 파일 삭제

* fix: 라우팅 변경, 파일 이름 변경

src/App.tsx

@@ -1,11 +1,7 @@
-import Test from '~/Test';
+import Layout from '~/routes/Layout';
 
-function App() {
-  return (
-    <>
-      <Test></Test>
-    </>
-  );
-}
+const App = () => {
+  return <Layout />;
+};
 
 export default App;

src/main.tsx

@@ -2,15 +2,16 @@ import { ChakraProvider } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import { RouterProvider } from 'react-router-dom';
+import router from '~/routes/router';
 
 const queryClient = new QueryClient();
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <ChakraProvider>
-        <App />
+        <RouterProvider router={router} />
       </ChakraProvider>
     </QueryClientProvider>
   </React.StrictMode>,

src/pages/AdminPage/AdminPage.tsx

@@ -0,0 +1,5 @@
+const AdminPage = () => {
+  return <div>admin</div>;
+};
+
+export default AdminPage;

src/pages/ApplyEventPage/ApplyEventPage.tsx

@@ -0,0 +1,5 @@
+const ApplyEventPage = () => {
+  return <></>;
+};
+
+export default ApplyEventPage;

src/pages/EventPage/ApplyEventPage.tsx

@@ -0,0 +1,5 @@
+const ApplyEventPage = () => {
+  return <></>;
+};
+
+export default ApplyEventPage;

src/pages/EventPage/CreateEventPage.tsx

@@ -0,0 +1,5 @@
+const CreateEventPage = () => {
+  return <></>;
+};
+
+export default CreateEventPage;

src/pages/EventPage/EventDetailPage.tsx

@@ -0,0 +1,5 @@
+const EventDetailPage = () => {
+  return <></>;
+};
+
+export default EventDetailPage;

src/pages/EventPage/EventListPage.tsx

@@ -0,0 +1,5 @@
+const EventListPage = () => {
+  return <></>;
+};
+
+export default EventListPage;

src/pages/MainPage/MainPage.tsx

@@ -0,0 +1,5 @@
+const MainPage = () => {
+  return <></>;
+};
+
+export default MainPage;

src/pages/MyPage/MenteeMyPage.tsx

@@ -0,0 +1,5 @@
+const MenteeMyPage = () => {
+  return <></>;
+};
+
+export default MenteeMyPage;

src/pages/MyPage/MentorMyPage.tsx

@@ -0,0 +1,5 @@
+const MentorMyPage = () => {
+  return <></>;
+};
+
+export default MentorMyPage;

src/pages/MyPage/WriteReviewPage.tsx

@@ -0,0 +1,5 @@
+const WriteReviewPage = () => {
+  return <></>;
+};
+
+export default WriteReviewPage;

src/pages/ProfilePage/MenteeEditProfilePage.tsx

@@ -0,0 +1,5 @@
+const MenteeEditProfilePage = () => {
+  return <></>;
+};
+
+export default MenteeEditProfilePage;

src/pages/ProfilePage/MentorEditProfilePage.tsx

@@ -0,0 +1,5 @@
+const MentorEditProfilePage = () => {
+  return <></>;
+};
+
+export default MentorEditProfilePage;

src/pages/ResumePage/CommentResumePage.tsx

@@ -0,0 +1,5 @@
+const CommentResumePage = () => {
+  return <></>;
+};
+
+export default CommentResumePage;

src/pages/ResumePage/CreateResumePage.tsx

@@ -0,0 +1,5 @@
+const CreateResumePage = () => {
+  return <></>;
+};
+
+export default CreateResumePage;

src/pages/ResumePage/EditResumePage.tsx

@@ -0,0 +1,5 @@
+const EditResumePage = () => {
+  return <></>;
+};
+
+export default EditResumePage;

src/pages/ResumePage/ResumeDetailPage.tsx

@@ -0,0 +1,5 @@
+const ResumeDetailPage = () => {
+  return <></>;
+};
+
+export default ResumeDetailPage;

src/pages/SignInPage/SignInPage.tsx

@@ -0,0 +1,5 @@
+const SignInPage = () => {
+  return <></>;
+};
+
+export default SignInPage;

src/pages/SignUpPage/CommonSignUpPage.tsx

@@ -0,0 +1,5 @@
+const CommonSignUpPage = () => {
+  return <></>;
+};
+
+export default CommonSignUpPage;

src/pages/SignUpPage/MenteeSignUpPage.tsx

@@ -0,0 +1,5 @@
+const MenteeSignUpPage = () => {
+  return <></>;
+};
+
+export default MenteeSignUpPage;

src/pages/SignUpPage/MentorSignUpPage.tsx

@@ -0,0 +1,5 @@
+const MentorSignUpPage = () => {
+  return <></>;
+};
+
+export default MentorSignUpPage;

src/routes/Layout.tsx

@@ -0,0 +1,13 @@
+import { Heading } from '@chakra-ui/react';
+import { Outlet } from 'react-router-dom';
+
+const Layout = () => {
+  return (
+    <>
+      <Heading>예를 들어 Header가 들어갈 공간, Outlet에는 경로가 "/"일 때 null 값이 들어감</Heading>
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

src/routes/router.tsx

@@ -0,0 +1,55 @@
+import { createBrowserRouter } from 'react-router-dom';
+import App from '~/App';
+import AdminPage from '~/pages/AdminPage/AdminPage';
+import ApplyEventPage from '~/pages/ApplyEventPage/ApplyEventPage';
+import CreateEventPage from '~/pages/EventPage/CreateEventPage';
+import EventDetailPage from '~/pages/EventPage/EventDetailPage';
+import EventListPage from '~/pages/EventPage/EventListPage';
+import MainPage from '~/pages/MainPage/MainPage';
+import MenteeMyPage from '~/pages/MyPage/MenteeMyPage';
+import MentorMyPage from '~/pages/MyPage/MentorMyPage';
+import WriteReviewPage from '~/pages/MyPage/WriteReviewPage';
+import MenteeEditProfilePage from '~/pages/ProfilePage/MenteeEditProfilePage';
+import MentorEditProfilePage from '~/pages/ProfilePage/MentorEditProfilePage';
+import CommentResumePage from '~/pages/ResumePage/CommentResumePage';
+import CreateResumePage from '~/pages/ResumePage/CreateResumePage';
+import EditResumePage from '~/pages/ResumePage/EditResumePage';
+import ResumeDetailPage from '~/pages/ResumePage/ResumeDetailPage';
+import SignInPage from '~/pages/SignInPage/SignInPage';
+import CommonSignUpPage from '~/pages/SignUpPage/CommonSignUpPage';
+import MenteeSignUpPage from '~/pages/SignUpPage/MenteeSignUpPage';
+import MentorSignUpPage from '~/pages/SignUpPage/MentorSignUpPage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      { index: true, element: <MainPage /> },
+      { path: 'mypage/mentee', element: <MenteeMyPage /> },
+      { path: 'mypage/mentor', element: <MentorMyPage /> },
+      { path: 'user/edit-info/mentee', element: <MenteeEditProfilePage /> },
+      { path: 'user/edit-info/mentor', element: <MentorEditProfilePage /> },
+
+      { path: 'resume/create', element: <CreateResumePage /> },
+      { path: 'resume/:id/edit', element: <EditResumePage /> },
+      { path: 'resume/:id/comment', element: <CommentResumePage /> },
+      { path: 'resume/:id', element: <ResumeDetailPage /> },
+      { path: 'write-review', element: <WriteReviewPage /> },
+
+      { path: 'event/create', element: <CreateEventPage /> },
+      { path: 'event/view', element: <EventListPage /> },
+      { path: 'event/view/:eventId', element: <EventDetailPage /> },
+      { path: 'event/apply', element: <ApplyEventPage /> },
+
+      { path: 'sign-up/common', element: <CommonSignUpPage /> },
+      { path: 'sign-up/mentee', element: <MenteeSignUpPage /> },
+      { path: 'sign-up/mentor', element: <MentorSignUpPage /> },
+      { path: 'sign-in', element: <SignInPage /> },
+
+      { path: 'admin', element: <AdminPage /> },
+    ],
+  },
+]);
+
+export default router;