feat: Router 연결

frontend/src/Router.jsx

@@ -1,7 +1,19 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createBrowserRouter } from 'react-router-dom';
 import PageLayout from './components/Layout/PageLayout';
-import { HomePage } from './pages/HomePage';
-import { NotFoundPage } from './pages/NotFoundPage';
+import HomePage from './pages/HomePage';
+import NotFoundPage from './pages/NotFoundPage';
+import { lazy } from 'react';
+
+const LectureLayout = lazy(async () => await import('./components/Layout/LectureLayout'));
+const LearningLectureDetailPage = lazy(async () => await import('./pages/LearningLectureDetailPage'));
+const NoticeListPage = lazy(async () => await import('./pages/NoticeListPage'));
+const NoticeDetailPage = lazy(async () => await import('./pages/NoticeDetailPage'));
+const LectureInfoPage = lazy(async () => await import('./pages/LectureInfoPage'));
+const QuestionListPage = lazy(async () => await import('./pages/QuestionListPage'));
+const QuestionDetailPage = lazy(async () => await import('./pages/QuestionDetailPage'));
+const CreateQuestionPage = lazy(async () => await import('./pages/CreateQuestionPage'));
+const NoticeWritePage = lazy(async () => await import('./pages/NoticeWritePage/NoticeWritePage'));
 
 const router = createBrowserRouter([
   {
@@ -11,9 +23,56 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        path: '',
         element: <HomePage />,
       },
+      {
+        path: 'lecture/:lectureId/info',
+        element: <LectureInfoPage />,
+      },
+      {
+        path: 'lecture/:lectureId',
+        element: <LectureLayout />,
+        children: [
+          {
+            index: true,
+            element: <LearningLectureDetailPage />,
+          },
+          {
+            path: 'notice',
+            children: [
+              {
+                index: true,
+                element: <NoticeListPage />,
+              },
+              {
+                path: ':noticeId',
+                element: <NoticeDetailPage />,
+              },
+              {
+                path: 'write',
+                element: <NoticeWritePage />,
+              },
+            ],
+          },
+          {
+            path: 'qna',
+            children: [
+              {
+                index: true,
+                element: <QuestionListPage />,
+              },
+              {
+                path: ':questionId',
+                element: <QuestionDetailPage />,
+              },
+              {
+                path: 'write',
+                element: <CreateQuestionPage />,
+              },
+            ],
+          },
+        ],
+      },
     ],
   },
 ]);

frontend/src/components/Layout/LectureLayout.jsx

@@ -2,6 +2,7 @@ import { Outlet } from 'react-router-dom';
 import LectureHeader from '../LectureHeader/LectureHeader';
 import { SideBar, SideLink } from '../SideBar';
 import MaxWidthLayout from './MaxWidthLayout';
+import { Suspense } from 'react';
 
 export default function LectureLayout() {
   const lecture = {
@@ -27,7 +28,9 @@ export default function LectureLayout() {
           </SideBar>
         </aside>
         <main>
-          <Outlet />
+          <Suspense fallback={<div>loading</div>}>
+            <Outlet />
+          </Suspense>
         </main>
       </MaxWidthLayout>
     </>

frontend/src/components/Layout/PageLayout.jsx

@@ -2,6 +2,7 @@ import { Outlet } from 'react-router-dom';
 import { Footer } from '../Footer';
 import { Header } from '../Header';
 import styles from './PageLayout.module.css';
+import { Suspense } from 'react';
 
 export default function PageLayout() {
   return (
@@ -9,7 +10,9 @@ export default function PageLayout() {
       <Header />
       <div className={styles.body}>
         <div className={styles.contents}>
-          <Outlet />
+          <Suspense fallback={<div>loading</div>}>
+            <Outlet />
+          </Suspense>
         </div>
         <Footer />
       </div>