feat: QuizDetailCard 수정 및 StudentReportDetailPage 임시 추가(API연결 확인 필요)

frontend/src/hooks/api/useStudentReportDetail.js

@@ -5,6 +5,6 @@ import { API_URL } from '../../constants';
 export function useStudentReportDetail(reportId) {
   return useSuspenseQuery({
     queryKey: ['studentreportdetail', reportId],
-    queryFn: () => instance.get(`${API_URL}/report/myreportdetail/${reportId}`),
+    queryFn: () => instance.get(`${API_URL}/report/reportDetail/${reportId}`),
   });
 }

frontend/src/hooks/api/useStudentReports.js

@@ -2,9 +2,9 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import instance from '../../utils/axios/instance';
 import { API_URL } from '../../constants';
 
-export function useStudentReports() {
+export function useStudentReports(lectureId) {
   return useSuspenseQuery({
     queryKey: ['studentreports'],
-    queryFn: () => instance.get(`${API_URL}/report/myreport`),
+    queryFn: () => instance.get(`${API_URL}/report/student/${lectureId}`),
   });
 }

frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx

@@ -1,37 +1,36 @@
 import { Link, useParams } from 'react-router-dom';
-import styles from './StudentReportDetailPage';
+import styles from './StudentReportDetailPage.module.css';
 import BackIcon from '/src/assets/icons/back.svg?react';
-import { useStudentReportDetail } from '../../hooks/api/useStudentReportDetail';
+// import { useStudentReportDetail } from '../../hooks/api/useStudentReportDetail';
+import { QuizDetailCard } from '../../components/QuizForm';
 
 export default function StudentReportDetailPage() {
   const { reportId } = useParams();
   console.log(reportId);
-  const { data } = useStudentReportDetail(reportId);
-  console.log(data);
+  // const report = useStudentReportDetail(reportId);
+  // console.log(report);
+  // TODO: API 연결 후 실제 동작 확인 및 QuizDetailCard에 Map 적용
 
   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>
+        <Link
+          to={'..'}
+          className={styles.goBack}
+        >
+          <BackIcon />
+          <span>퀴즈 목록</span>
+        </Link>
+        <div className={styles.title}>퀴즈명</div>
       </header>
-      <div>
-        <h3>맞은 퀴즈</h3>
-        <div></div>
-      </div>
-      <div>
-        <h3>틀린 퀴즈</h3>
-        <div></div>
+      <p>점수 : 70점 ( 7 / 10 )</p>
+      <div className={styles.grid}>
+        <QuizDetailCard
+          index={1}
+          question={'??'}
+          answer={'!!'}
+          choices={[]}
+        />
       </div>
     </div>
   );

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

@@ -11,12 +11,6 @@
 }
 
 .header {
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-}
-
-.headerInside {
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -38,7 +32,6 @@
   font-size: 32px;
   line-height: 1.2;
   font-weight: 800;
-  margin: 0;
 }
 
 .author {
@@ -59,3 +52,11 @@
 .icon {
   stroke: var(--text-color);
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 440px);
+  gap: 20px;
+  justify-content: start;
+  margin-bottom: 40px;
+}

frontend/src/pages/StudentReportPage/StudentReportPage.jsx

@@ -3,10 +3,14 @@ import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
 import { ReportCard } from '../../components/ReportCard';
 import styles from './StudentReportPage.module.css';
 import { useStudentReports } from '../../hooks/api/useStudentReports';
+import { useParams } from 'react-router-dom';
 
 export default function StudentReportPage() {
-  const { data } = useStudentReports();
-  // const reports = data?.data;
+  const { lectureId } = useParams();
+  const { data } = useStudentReports(lectureId);
+  console.log(data);
+  const reportss = data?.data;
+  console.log(reportss);
   const reports = [
     {
       reportId: 1,