Merge branch 'FE/QuizDetailCard' into 'frontend'

[Front-End ] feat: StudentReportDetailPage 추가

See merge request s11-webmobile1-sub2/S11P12A701!105

frontend/src/components/QuizForm/QuizDetailCard.jsx

@@ -2,7 +2,8 @@ import styles from './QuizCard.module.css';
 import { STATIC_URL } from '../../constants';
 
 export default function QuizCard({ index, question, answer, image, choices }) {
-  console.log(question, answer, image, choices);
+  // TODO: 정답 / 오답 관련 표현 필요 시 추가
+  console.log(choices);
   return (
     <div className={styles.card}>
       <div className={styles.header}>
@@ -20,28 +21,17 @@ export default function QuizCard({ index, question, answer, image, choices }) {
         </div>
       )}
       <label className={styles.label}>질문</label>
-      <input
+      <div className={styles.input}>{question}</div>
-        type="text"
-        value={question}
-        className={styles.input}
-      />
       <label className={styles.label}>정답</label>
-      <input
+      <div className={styles.input}>{answer}</div>
-        type="text"
+      {choices.length > 0 && <label className={styles.label}>선택지</label>}
-        value={answer}
-        className={styles.input}
-      />
       {choices.map?.((choice, idx) => (
         <div
           className={styles.choiceDiv}
           key={idx}
         >
-          <label>선택지 {choice.num} </label>
+          <label className={styles.numLabel}>{choice.num} </label>
-          <input
+          <div className={`${styles.input} ${styles.choiceInput}`}>{choice.content}</div>
-            className={`${styles.input} ${styles.choiceInput}`}
-            type="text"
-            value={choice.content}
-          />
         </div>
       ))}
     </div>

frontend/src/components/QuizForm/QuizDetailCard.module.css

@@ -36,12 +36,9 @@
   height: 220px;
   margin: 10px auto;
   border-radius: 8px;
+  object-fit: contain;
   background-color: var(--background-secondary);
-  cursor: pointer;
+  border: 1px solid var(--background-secondary);
-}
-
-.hiddenInput {
-  display: none;
 }
 
 .input {
@@ -62,6 +59,12 @@
   gap: 8px;
 }
 
+.numLabel {
+  width: 40px;
+  text-align: right;
+  display: block;
+}
+
 .choiceInput {
   flex-grow: 1;
   padding: 7px;

frontend/src/components/QuizsetDetail/QuizsetDetail.jsx

@@ -3,20 +3,39 @@ import { Link } from 'react-router-dom';
 import styles from './QuizsetDetail.module.css';
 import { QuizDetailCard } from '../QuizForm';
 
-export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, onEdit }) {
+export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, onEdit, tested = false }) {
   console.log('topic', topic, 'title', title, 'quizzes', quizzes);
   return (
     <div className={styles.quizsetDetail}>
       <header className={styles.header}>
-        <Link
+        <div className={styles.headerInside}>
-          to={'..'}
+          <Link
-          className={styles.goBack}
+            to={'..'}
-        >
+            className={styles.goBack}
-          <BackIcon />
+          >
-          <span>{topic}</span>
+            <BackIcon />
-        </Link>
+            <span>{topic}</span>
-        <div>
+          </Link>
-          <h1 className={styles.title}>{title}</h1>
+          <div>
+            <h1 className={styles.title}>{title}</h1>
+          </div>
+        </div>
+        <div className={styles.actionGroup}>
+          {!tested && (
+            <button
+              className={styles.edit}
+              onClick={onEdit}
+            >
+              수정
+            </button>
+          )}
+          <button
+            type="button"
+            className={styles.delete}
+            onClick={onDelete}
+          >
+            삭제
+          </button>
         </div>
       </header>
       <div className={styles.grid}>
@@ -31,18 +50,7 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on
           />
         ))}
       </div>
-      <button
+      {tested && <div className={styles.tested}>이미 진행된 퀴즈는 수정이 불가능합니다.</div>}
-        type="button"
-        onClick={onDelete}
-      >
-        퀴즈셋 삭제
-      </button>
-      <button
-        type="button"
-        onClick={onEdit}
-      >
-        퀴즈셋 수정
-      </button>
     </div>
   );
 }

frontend/src/components/QuizsetDetail/QuizsetDetail.module.css

@@ -11,12 +11,25 @@
 }
 
 .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+}
+
+.headerInside {
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 8px;
 }
 
+.actionGroup {
+  display: flex;
+  align-items: end;
+  gap: 20px;
+  color: var(--text-color);
+}
+
 .goBack {
   display: flex;
   align-items: center;
@@ -52,3 +65,20 @@
   justify-content: start;
   margin-bottom: 40px;
 }
+
+.edit,
+.delete {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background-color: var(--background);
+  color: var(--text-color-tertiary);
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.delete {
+  color: var(--error-color);
+}

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/QuizsetDetailPage/QuizsetDetailPage.jsx

@@ -9,7 +9,8 @@ export default function QuizsetDetailPage() {
   const { quizsetDelete } = useQuizsetDelete();
   const { data } = useTeacherQuizsetDetail(quizsetId);
   const quizset = data.data;
-  console.log(quizset);
+  const tested = quizset.tested;
+  console.log(tested);
   const handleEdit = () => {
     navigate('edit', { state: { initialValue: quizset } });
   };
@@ -25,6 +26,7 @@ export default function QuizsetDetailPage() {
       quizzes={quizset.quizzes}
       onDelete={handleDelete}
       onEdit={handleEdit}
+      tested={tested}
     />
   );
 }

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);
+  // const report = useStudentReportDetail(reportId);
-  console.log(data);
+  // console.log(report);
+  // TODO: API 연결 후 실제 동작 확인 및 QuizDetailCard에 Map 적용
 
   return (
     <div className={styles.wrapper}>
       <header className={styles.header}>
-        <div className={styles.headerInside}>
+        <Link
-          <Link
+          to={'..'}
-            to={'..'}
+          className={styles.goBack}
-            className={styles.goBack}
+        >
-          >
+          <BackIcon />
-            <BackIcon />
+          <span>퀴즈 목록</span>
-            <span>퀴즈 성적</span>
+        </Link>
-          </Link>
+        <div className={styles.title}>퀴즈명</div>
-          <div>
-            <h1 className={styles.title}>퀴즈명</h1>
-          </div>
-        </div>
       </header>
-      <div>
+      <p>점수 : 70점 ( 7 / 10 )</p>
-        <h3>맞은 퀴즈</h3>
+      <div className={styles.grid}>
-        <div></div>
+        <QuizDetailCard
-      </div>
+          index={1}
-      <div>
+          question={'??'}
-        <h3>틀린 퀴즈</h3>
+          answer={'!!'}
-        <div></div>
+          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 { lectureId } = useParams();
-  // const reports = data?.data;
+  const { data } = useStudentReports(lectureId);
+  console.log(data);
+  const reportss = data?.data;
+  console.log(reportss);
   const reports = [
     {
       reportId: 1,