From 28c3e0c7109abcfd225e9b108f8129024054670e 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 16:10:30 +0900
Subject: [PATCH] =?UTF-8?q?design:=20QuizCard=20/=20QuizsetForm(=ED=80=B4?=
 =?UTF-8?q?=EC=A6=88=20=EC=83=9D=EC=84=B1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/QuizForm/QuizCard.jsx | 25 +++++++++++--------
 .../components/QuizForm/QuizCard.module.css   | 14 ++++++++---
 .../src/components/QuizForm/QuizsetForm.jsx   |  4 ++-
 .../QuizForm/QuizsetForm.module.css           |  8 +++++-
 .../QuizsetDetail/QuizsetDetail.module.css    |  2 +-
 5 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/QuizForm/QuizCard.jsx b/frontend/src/components/QuizForm/QuizCard.jsx
index 19a43b8..8127169 100644
--- a/frontend/src/components/QuizForm/QuizCard.jsx
+++ b/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
diff --git a/frontend/src/components/QuizForm/QuizCard.module.css b/frontend/src/components/QuizForm/QuizCard.module.css
index 48abeb7..7857268 100644
--- a/frontend/src/components/QuizForm/QuizCard.module.css
+++ b/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;
 }
diff --git a/frontend/src/components/QuizForm/QuizsetForm.jsx b/frontend/src/components/QuizForm/QuizsetForm.jsx
index ad5bb6e..66d5b76 100644
--- a/frontend/src/components/QuizForm/QuizsetForm.jsx
+++ b/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
diff --git a/frontend/src/components/QuizForm/QuizsetForm.module.css b/frontend/src/components/QuizForm/QuizsetForm.module.css
index ce134af..b19b8d8 100644
--- a/frontend/src/components/QuizForm/QuizsetForm.module.css
+++ b/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 {
diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css
index cdbcc91..594af87 100644
--- a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css
+++ b/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);