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

frontend/src/components/QuizsetDetail/QuizsetDetail.jsx

@@ -3,11 +3,12 @@ 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}>
+        <div className={styles.headerInside}>
           <Link
             to={'..'}
             className={styles.goBack}
@@ -18,6 +19,24 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on
           <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}>
         {quizzes.map?.((quiz, index) => (
@@ -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>
   );
 }

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