Merge branch 'FE/QuizCard' into 'frontend'

[Front-End] design:quizCard

See merge request s11-webmobile1-sub2/S11P12A701!110

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,13 +115,15 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
         >
           선택지 추가하기
         </button>
-        <button
-          type="button"
-          onClick={handlePopChoice}
-          className={`${styles.button} ${styles.remove}`}
-        >
-          선택지 줄이기
-        </button>
+        {choices.length > 0 && (
+          <button
+            type="button"
+            onClick={handlePopChoice}
+            className={`${styles.button} ${styles.remove}`}
+          >
+            선택지 줄이기
+          </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);