feat : Page Routing 완료 (#76)

package.json

@@ -21,6 +21,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
+        "react-router-dom": "^7.0.1",
         "react-spring": "^9.7.4",
         "react-spring-bottom-sheet": "^3.4.1",
         "sharp": "^0.33.5",

src/App.tsx

@@ -1,9 +1,11 @@
 import ToastContainer from './components/Common/ToastContainer/ToastContainer';
-
+import { RouterProvider } from 'react-router-dom';
+import { router } from '@/router';
 export const App = () => {
     return (
         <>
             <ToastContainer />
+            <RouterProvider router={router} />
             즐거운 최종 프로젝트!!!
         </>
     );

src/pages/ArchivedPage.tsx

@@ -0,0 +1,3 @@
+export const ArchivedPage = () => {
+    return <div className="">ArchivedPage</div>;
+};

src/pages/CreateLetterPage.tsx

@@ -0,0 +1,7 @@
+export const CreateLetterPage = () => {
+  return (
+    <div className="">
+      CreateLetterPage
+    </div>
+  )
+}

src/pages/ErrorPage.tsx

@@ -0,0 +1,3 @@
+export const ErrorPage = () => {
+    return <div className="">ErrorPage</div>;
+};

src/pages/HomePage.tsx

@@ -0,0 +1,7 @@
+export const HomePage = () => {
+  return (
+    <div className="">
+      HomePage
+    </div>
+  )
+}

src/pages/LabelCollectionsPage.tsx

@@ -0,0 +1,3 @@
+export const LabelCollectionsPage = () => {
+    return <div className="">LabelCollectionsPage</div>;
+};

src/pages/LetterDetailPage.tsx

@@ -0,0 +1,7 @@
+export const LetterDetailPage = () => {
+  return (
+    <div className="">
+      LetterDetailPage
+    </div>
+  )
+}

src/pages/LoginPage.tsx

@@ -0,0 +1,3 @@
+export const LoginPage = () => {
+    return <div className="">LoginPage</div>;
+};

src/pages/MapExplorerPage.tsx

@@ -0,0 +1,7 @@
+export const MapExplorerPage = () => {
+  return (
+    <div className="">
+      MapExplorerPage
+    </div>
+  )
+}

src/pages/MyPage.tsx

@@ -0,0 +1,7 @@
+export const MyPage = () => {
+  return (
+    <div className="">
+      MyPage
+    </div>
+  )
+}

src/pages/NotificationPage.tsx

@@ -0,0 +1,7 @@
+export const NotificationPage = () => {
+  return (
+    <div className="">
+      NotificationPage
+    </div>
+  )
+}

src/pages/RegisterPage.tsx

@@ -0,0 +1,3 @@
+export const RegisterPage = () => {
+    return <div className="">RegisterPage</div>;
+};

src/pages/SentPage.tsx

@@ -0,0 +1,7 @@
+export const SentPage = () => {
+  return (
+    <div className="">
+      SentPage
+    </div>
+  )
+}

src/pages/SharePage.tsx

@@ -0,0 +1,3 @@
+export const SharePage = () => {
+    return <div className="">SharePage</div>;
+};

src/pages/index.tsx

@@ -0,0 +1,29 @@
+import { ErrorPage } from '@/pages/ErrorPage';
+import { HomePage } from '@/pages/HomePage';
+import { CreateLetterPage } from '@/pages/CreateLetterPage';
+import { MapExplorerPage } from '@/pages/MapExplorerPage';
+import { MyPage } from '@/pages/MyPage';
+import { LoginPage } from '@/pages/LoginPage';
+import { RegisterPage } from '@/pages/RegisterPage';
+import { ArchivedPage } from '@/pages/ArchivedPage';
+import { LabelCollectionsPage } from '@/pages/LabelCollectionsPage';
+import { LetterDetailPage } from '@/pages/LetterDetailPage';
+import { NotificationPage } from '@/pages/NotificationPage';
+import { SentPage } from '@/pages/SentPage';
+import { SharePage } from '@/pages/SharePage';
+
+export {
+    ErrorPage,
+    HomePage,
+    CreateLetterPage,
+    MapExplorerPage,
+    MyPage,
+    LoginPage,
+    RegisterPage,
+    ArchivedPage,
+    LabelCollectionsPage,
+    LetterDetailPage,
+    NotificationPage,
+    SentPage,
+    SharePage
+};

src/router.tsx

@@ -0,0 +1,80 @@
+import { createBrowserRouter, Outlet } from 'react-router-dom';
+import { NavigationBar } from '@/components/Common/NavigationBar/NavigationBar';
+import {
+    ErrorPage,
+    HomePage,
+    CreateLetterPage,
+    MapExplorerPage,
+    MyPage,
+    LoginPage,
+    RegisterPage,
+    ArchivedPage,
+    LabelCollectionsPage,
+    LetterDetailPage,
+    NotificationPage,
+    SentPage,
+    SharePage
+} from './pages';
+
+export const router = createBrowserRouter([
+    {
+        path: '/',
+        element: (
+            <>
+                <Outlet />
+                <NavigationBar />
+            </>
+        ),
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: '/',
+                element: <HomePage />
+            },
+            {
+                path: '/letter/create',
+                element: <CreateLetterPage />
+            },
+            {
+                path: '/mapexplorer',
+                element: <MapExplorerPage />
+            },
+            {
+                path: '/mypage',
+                element: <MyPage />
+            },
+            {
+                path: '/archived',
+                element: <ArchivedPage />
+            },
+            {
+                path: '/labelcollections',
+                element: <LabelCollectionsPage />
+            },
+            {
+                path: '/letter/:id',
+                element: <LetterDetailPage />
+            },
+            {
+                path: '/notification',
+                element: <NotificationPage />
+            },
+            {
+                path: '/sent',
+                element: <SentPage />
+            },
+            {
+                path: '/share',
+                element: <SharePage />
+            }
+        ]
+    },
+    {
+        path: '/login',
+        element: <LoginPage />
+    },
+    {
+        path: '/register',
+        element: <RegisterPage />
+    }
+]);

yarn.lock

@@ -3069,6 +3069,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 10c0/5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149
+  languageName: node
+  linkType: hard
+
 "@types/doctrine@npm:^0.0.9":
   version: 0.0.9
   resolution: "@types/doctrine@npm:0.0.9"
@@ -4547,6 +4554,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "cookie@npm:1.0.2"
+  checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b
+  languageName: node
+  linkType: hard
+
 "core-js-compat@npm:^3.38.0, core-js-compat@npm:^3.38.1":
   version: 3.39.0
   resolution: "core-js-compat@npm:3.39.0"
@@ -8243,6 +8257,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-router-dom@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "react-router-dom@npm:7.0.1"
+  dependencies:
+    react-router: "npm:7.0.1"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  checksum: 10c0/aebc0af4ea4ac4e9482b0501c06f3af42adc68b4064c556b00954dcb7a6ec233d41f3eac86e388b9a8068e8ba5d44b854b7e29c806af9ed6a8798682d6984b46
+  languageName: node
+  linkType: hard
+
+"react-router@npm:7.0.1":
+  version: 7.0.1
+  resolution: "react-router@npm:7.0.1"
+  dependencies:
+    "@types/cookie": "npm:^0.6.0"
+    cookie: "npm:^1.0.1"
+    set-cookie-parser: "npm:^2.6.0"
+    turbo-stream: "npm:2.4.0"
+  peerDependencies:
+    react: ">=18"
+    react-dom: ">=18"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 10c0/aac4c9989ae6b9cf989b5ddcda88f505ba0704a4e4b37ae04c819c2bd02f080361f9eb1793695e3ecf41080d91b79aee454c3163b586d1b19ceca13f6eacec0e
+  languageName: node
+  linkType: hard
+
 "react-spring-bottom-sheet@npm:^3.4.1":
   version: 3.4.1
   resolution: "react-spring-bottom-sheet@npm:3.4.1"
@@ -8737,6 +8781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"set-cookie-parser@npm:^2.6.0":
+  version: 2.7.1
+  resolution: "set-cookie-parser@npm:2.7.1"
+  checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a
+  languageName: node
+  linkType: hard
+
 "set-function-length@npm:^1.2.1":
   version: 1.2.2
   resolution: "set-function-length@npm:1.2.2"
@@ -9658,6 +9709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"turbo-stream@npm:2.4.0":
+  version: 2.4.0
+  resolution: "turbo-stream@npm:2.4.0"
+  checksum: 10c0/e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a
+  languageName: node
+  linkType: hard
+
 "tween-functions@npm:^1.2.0":
   version: 1.2.0
   resolution: "tween-functions@npm:1.2.0"
@@ -10114,6 +10172,7 @@ __metadata:
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
     react-icons: "npm:^5.3.0"
+    react-router-dom: "npm:^7.0.1"
     react-spring: "npm:^9.7.4"
     react-spring-bottom-sheet: "npm:^3.4.1"
     sharp: "npm:^0.33.5"