feat: 퀴즈셋 상세페이지에서 tested에 따라 수정 버튼 표시 기능 추가

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/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}
     />
   );
 }