From 495d8a229c2d2b319d8218562d80173b47d7be97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Thu, 8 Aug 2024 14:50:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20QuizDetailCard=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20StudentReportDetailPage=20=EC=9E=84=EC=8B=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80(API=EC=97=B0=EA=B2=B0=20=ED=99=95=EC=9D=B8?=
 =?UTF-8?q?=20=ED=95=84=EC=9A=94)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/hooks/api/useStudentReportDetail.js   |  2 +-
 frontend/src/hooks/api/useStudentReports.js   |  4 +-
 .../StudentReportDetailPage.jsx               | 45 +++++++++----------
 .../StudentReportDetailPage.module.css        | 15 ++++---
 .../StudentReportPage/StudentReportPage.jsx   |  8 +++-
 5 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/frontend/src/hooks/api/useStudentReportDetail.js b/frontend/src/hooks/api/useStudentReportDetail.js
index 7ef143f..362bd1b 100644
--- a/frontend/src/hooks/api/useStudentReportDetail.js
+++ b/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}`),
   });
 }
diff --git a/frontend/src/hooks/api/useStudentReports.js b/frontend/src/hooks/api/useStudentReports.js
index 5264bcb..2b230e2 100644
--- a/frontend/src/hooks/api/useStudentReports.js
+++ b/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}`),
   });
 }
diff --git a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx
index c4e32dd..676e2c0 100644
--- a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.jsx
+++ b/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>
   );
diff --git a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css b/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css
index b9782df..67233dd 100644
--- a/frontend/src/pages/StudentReportDetailPage/StudentReportDetailPage.module.css
+++ b/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;
+}
diff --git a/frontend/src/pages/StudentReportPage/StudentReportPage.jsx b/frontend/src/pages/StudentReportPage/StudentReportPage.jsx
index 49007dc..602b352 100644
--- a/frontend/src/pages/StudentReportPage/StudentReportPage.jsx
+++ b/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,