Merge branch 'FE/QuizDetailCard' into 'frontend'

[Front-End ] feat: StudentReportDetailPage 추가 See merge request s11-webmobile1-sub2/S11P12A701!105
2024-08-08 14:55:53 +09:00 · 2024-08-08 14:55:53 +09:00 · 5e8ffc1f8a
commit 5e8ffc1f8a
parent a868c6e3f7 495d8a229c
10 changed files with 117 additions and 80 deletions
--- a/frontend/src/components/QuizForm/QuizDetailCard.jsx
+++ b/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
-        type="text"
-        value={question}
-        className={styles.input}
-      />
+      <div className={styles.input}>{question}</div>
      <label className={styles.label}>정답</label>
-      <input
-        type="text"
-        value={answer}
-        className={styles.input}
-      />
+      <div className={styles.input}>{answer}</div>
+      {choices.length > 0 && <label className={styles.label}>선택지</label>}
      {choices.map?.((choice, idx) => (
        <div
          className={styles.choiceDiv}
          key={idx}
        >
-          <label>선택지 {choice.num} </label>
-          <input
-            className={`${styles.input} ${styles.choiceInput}`}
-            type="text"
-            value={choice.content}
-          />
+          <label className={styles.numLabel}>{choice.num} </label>
+          <div className={`${styles.input} ${styles.choiceInput}`}>{choice.content}</div>
        </div>
      ))}
    </div>
--- a/frontend/src/components/QuizForm/QuizDetailCard.module.css
+++ b/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;
-}
-
-.hiddenInput {
-  display: none;
+  border: 1px solid var(--background-secondary);
 }

 .input {
@ -62,6 +59,12 @@
  gap: 8px;
 }

+.numLabel {
+  width: 40px;
+  text-align: right;
+  display: block;
+}
+
 .choiceInput {
  flex-grow: 1;
  padding: 7px;
--- a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx
+++ b/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
-          to={'..'}
-          className={styles.goBack}
-        >
-          <BackIcon />
-          <span>{topic}</span>
-        </Link>
-        <div>
-          <h1 className={styles.title}>{title}</h1>
+        <div className={styles.headerInside}>
+          <Link
+            to={'..'}
+            className={styles.goBack}
+          >
+            <BackIcon />
+            <span>{topic}</span>
+          </Link>
+          <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
-        type="button"
-        onClick={onDelete}
-      >
-        퀴즈셋 삭제
-      </button>
-      <button
-        type="button"
-        onClick={onEdit}
-      >
-        퀴즈셋 수정
-      </button>
+      {tested && <div className={styles.tested}>이미 진행된 퀴즈는 수정이 불가능합니다.</div>}
    </div>
  );
 }
--- a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css
+++ b/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);
+}
--- 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}`),
  });
 }
--- 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}`),
  });
 }
--- a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx
+++ b/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}
    />
  );
 }
--- 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>
  );
--- 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;
+}
--- 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,