feat: StudentReportDetailPage 기본 형태 추가

frontend/src/Router.jsx

@@ -38,6 +38,7 @@ const FreeboardDetailPage = lazy(async () => await import('./pages/FreeboardDeta
 const EditFreeboardPage = lazy(async () => await import('./pages/EditFreeboardPage'));
 const PasswordResetAuthPage = lazy(async () => await import('./pages/PasswordResetAuthPage'));
 const StudentReportPage = lazy(async () => await import('./pages/StudentReportPage'));
+const StudentReportDetailPage = lazy(async () => await import('./pages/StudentReportDetailPage'));
 const LivePage = lazy(async () => await import('./pages/LivePage'));
 
 const router = createBrowserRouter([
@@ -82,10 +83,10 @@ const router = createBrowserRouter([
             path: 'report',
             element: <StudentReportPage />,
           },
-          // {
-          //   path: 'report/:reportId',
-          //   element:
-          // },
+          {
+            path: 'report/:reportId',
+            element: <StudentReportDetailPage />,
+          },
           {
             path: 'edit',
             element: <LectureEditPage />,

frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx

@@ -0,0 +1,38 @@
+import { Link, useParams } from 'react-router-dom';
+import styles from './StudentReportDetailPage';
+import BackIcon from '/src/assets/icons/back.svg?react';
+import { useStudentReportDetail } from '../../hooks/api/useStudentReportDetail';
+
+export default function StudentReportDetailPage() {
+  const { reportId } = useParams();
+  console.log(reportId);
+  const { data } = useStudentReportDetail(reportId);
+  console.log(data);
+
+  return (
+    <div className={styles.wrapper}>
+      <header className={styles.header}>
+        <div className={styles.headerInside}>
+          <Link
+            to={'..'}
+            className={styles.goBack}
+          >
+            <BackIcon />
+            <span>퀴즈 성적</span>
+          </Link>
+          <div>
+            <h1 className={styles.title}>퀴즈명</h1>
+          </div>
+        </div>
+      </header>
+      <div>
+        <h3>맞은 퀴즈</h3>
+        <div></div>
+      </div>
+      <div>
+        <h3>틀린 퀴즈</h3>
+        <div></div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css

@@ -0,0 +1,61 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+  background-color: var(--background-default);
+  color: var(--text-color);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+
+.headerInside {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.goBack {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 20px;
+  line-height: 1.2;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
+}
+
+.title {
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  margin: 0;
+}
+
+.author {
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+  color: var(--text-color-secondary);
+}
+
+.content {
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 400;
+  margin: 0;
+  white-space: pre-line;
+}
+
+.icon {
+  stroke: var(--text-color);
+}

frontend/src/pages/StudentReportDetailPage/index.js

@@ -0,0 +1 @@
+export { default } from './StudentReportDetailPage';