From b6604426cdc0367aafdbc47322a006a6f258aac7 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 13:20:52 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=80=B4=EC=A6=88=EC=85=8B=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20tested?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=88=98=EC=A0=95=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=91=9C=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../QuizsetDetail/QuizsetDetail.jsx           | 52 +++++++++++--------
 .../QuizsetDetail/QuizsetDetail.module.css    | 30 +++++++++++
 .../QuizsetDetailPage/QuizsetDetailPage.jsx   |  4 +-
 3 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx
index a244dd5..b1a3c14 100644
--- 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>
   );
 }
diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css
index 033c587..cdbcc91 100644
--- 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);
+}
diff --git a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx b/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx
index 366e623..1a4a72c 100644
--- 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}
     />
   );
 }