desgin: 퀴즈 생성/ 수정 디자인 변경

frontend/src/components/QuizForm/QuizCard.jsx

@@ -51,22 +51,38 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
   return (
     <div className={styles.card}>
       <div className={styles.header}>
-        <span>퀴즈 생성 카드</span>
-        <button onClick={() => deleteQuiz(quiz.id)}>X</button>
+        <span className={styles.heading}>퀴즈 생성 카드</span>
+        <button
+          className={`${styles.button} ${styles.remove}`}
+          onClick={() => deleteQuiz(quiz.id)}
+        >
+          X
+        </button>
       </div>
-      <label>퀴즈 이미지</label>
+      <label
+        htmlFor={`file-input-${quiz.id}`}
+        className={styles.imageLabel}
+      >
+        {imagePreview ? (
+          <img
+            src={imagePreview}
+            alt="Preview"
+            className={styles.imagePreview}
+          />
+        ) : (
+          <div className={styles.imagePreview}>
+            {/* <CompassIcon /> */}
+            <div>이미지 업로드</div>
+          </div>
+        )}
+      </label>
       <input
+        id={`file-input-${quiz.id}`}
         type="file"
         accept=".png, .jpg, .jpeg"
         onChange={handleFileChange}
+        className={styles.hiddenInput}
       />
-      {imagePreview && (
-        <img
-          src={imagePreview}
-          alt="Preview"
-          className={styles.imagePreview}
-        />
-      )}
       <label className={styles.label}>질문</label>
       <input
         type="text"
@@ -109,9 +125,13 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
         </button>
       </div>
       {choices.map?.((choice, idx) => (
-        <div key={idx}>
-          <label>선택지 {choice.num} : </label>
+        <div
+          className={styles.choiceDiv}
+          key={idx}
+        >
+          <label>선택지 {choice.num} </label>
           <input
+            className={`${styles.input} ${styles.choiceInput}`}
             type="text"
             value={choice.content}
             onChange={(e) => handleChoiceChange(choice.num, e.target.value)}

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

@@ -2,7 +2,7 @@
   border: 1px solid var(--border-color);
   border-radius: 8px;
   padding: 16px 12px;
-  width: 400px;
+  width: 416px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -14,6 +14,12 @@
   justify-content: space-between;
 }
 
+.heading {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
 .label {
   color: var(--text-color);
   font-size: 14px;
@@ -23,11 +29,19 @@
 }
 
 .imagePreview {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 10px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 295px;
+  height: 220px;
+  margin: 10px auto;
   border-radius: 8px;
+  background-color: var(--background-secondary);
+  cursor: pointer;
+}
+
+.hiddenInput {
+  display: none;
 }
 
 .input {
@@ -40,6 +54,19 @@
   font-weight: 400;
 }
 
+.choiceDiv {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.choiceInput {
+  flex-grow: 1;
+  padding: 7px;
+}
+
 .input::placeholder {
   color: var(--text-color-tertiary);
 }

frontend/src/components/QuizForm/QuizsetForm.jsx

@@ -69,19 +69,19 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialV
               deleteQuiz={deleteQuiz}
             />
           ))}
-          <button
+          <div
             type="button"
             onClick={handleAddQuiz}
-            className={`${styles.button} ${styles.add}`}
+            className={styles.addCard}
           >
-            퀴즈 추가하기
-          </button>
+            카드 추가
+          </div>
         </div>
         <button
           type="submit"
-          className={styles.createButton}
+          className={`${styles.button} ${styles.add} ${styles.create}`}
         >
-          <EditIcon className={styles.edit} />
+          <EditIcon />
           <div>퀴즈 생성하기</div>
         </button>
       </form>

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

@@ -64,17 +64,29 @@
 }
 
 .grid {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 440px);
   gap: 20px;
-  align-items: start;
-  border: 1px solid var(--border-color);
+  justify-content: start;
+  margin-bottom: 40px;
+}
+
+.addCard {
+  width: 440px;
+  cursor: pointer;
+  height: 592px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--background-secondary);
+  stroke: var(--text-color);
   border-radius: 8px;
-  padding: 20px;
 }
 
 .button {
   display: flex;
+  justify-content: center;
+  align-items: center;
   gap: 8px;
   padding: 12px 16px;
   font-size: 16px;
@@ -91,21 +103,8 @@
   stroke: var(--on-primary);
 }
 
-.createButton {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 24px;
-  line-height: 1.2;
-  font-weight: 700;
-  border: 1px solid var(--accent-color);
-  background-color: var(--accent-color);
-  color: var(--on-primary);
-  stroke: var(--on-primary);
+.create {
+  margin-top: 60px;
 }
 
 .edit {