design: QuizCard / QuizsetForm(퀴즈 생성)

frontend/src/components/QuizForm/QuizCard.jsx

@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import styles from './QuizCard.module.css';
+import CloseIcon from '/src/assets/icons/close.svg?react';
+import PlusIcon from '/src/assets/icons/plus.svg?react';
 
 export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
   // TODO: 카드 디자인 완성 및 이쁘게 바꾸기
@@ -53,10 +55,10 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
       <div className={styles.header}>
         <span className={styles.heading}>퀴즈 생성 카드</span>
         <button
-          className={`${styles.button} ${styles.cardRemove}`}
+          className={`${styles.cardRemove}`}
           onClick={() => deleteQuiz(quiz.id)}
         >
-          X
+          <CloseIcon />
         </button>
       </div>
       <label htmlFor={`file-input-${quiz.id}`}>
@@ -68,7 +70,8 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
           />
         ) : (
           <div className={styles.imagePreview}>
-            <div>이미지 업로드</div>
+            <PlusIcon />
+            <span>퀴즈 이미지 추가</span>
           </div>
         )}
       </label>
@@ -112,6 +115,7 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
         >
           선택지 추가하기
         </button>
+        {choices.length > 0 && (
           <button
             type="button"
             onClick={handlePopChoice}
@@ -119,6 +123,7 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
           >
             선택지 줄이기
           </button>
+        )}
       </div>
       {choices.map?.((choice, idx) => (
         <div

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

@@ -30,7 +30,10 @@
 
 .imagePreview {
   display: flex;
+  flex-direction: column;
   justify-content: center;
+  color: var(--text-color);
+  stroke: var(--text-color);
   align-items: center;
   width: 295px;
   height: 220px;
@@ -39,6 +42,7 @@
   background-color: var(--background-secondary);
   object-fit: contain;
   cursor: pointer;
+  gap: 10px;
 }
 
 .hiddenInput {
@@ -105,8 +109,10 @@
 }
 
 .cardRemove {
-  border: 1px solid var(--background-secondary);
-  background-color: var(--background-secondary);
-  color: var(--text-color-secondary);
-  stroke: var(--text-color-secondary);
+  border: 0;
+  background-color: var(--background);
+  color: var(--text-color);
+  stroke: var(--text-color);
+  cursor: pointer;
+  padding: 0;
 }

frontend/src/components/QuizForm/QuizsetForm.jsx

@@ -4,6 +4,7 @@ import styles from './QuizsetForm.module.css';
 import EditIcon from '/src/assets/icons/edit.svg?react';
 import BackIcon from '/src/assets/icons/back.svg?react';
 import { Link } from 'react-router-dom';
+import PlusIcon from '/src/assets/icons/plus.svg?react';
 
 export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialValue = null }) {
   const [title, setTitle] = useState('');
@@ -74,7 +75,8 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialV
             onClick={handleAddQuiz}
             className={styles.addCard}
           >
-            카드 추가
+            <PlusIcon />
+            <span>새 퀴즈 추가</span>
           </div>
         </div>
         <button

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

@@ -76,11 +76,17 @@
   cursor: pointer;
   height: 592px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: var(--background-secondary);
+  background-color: var(--background);
   stroke: var(--text-color);
   border-radius: 8px;
+  gap: 10px;
+}
+
+.addCard:hover {
+  background-color: var(--background-secondary);
 }
 
 .button {

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

@@ -1,7 +1,7 @@
 .quizsetDetail {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 40px;
   width: 100%;
   background-color: var(--background-default);
   color: var(--text-color);