design: 퀴즈 상세정보 표시용 카드 임시 적용

frontend/src/components/QuizForm/QuizDetailCard.jsx

@@ -0,0 +1,49 @@
+import styles from './QuizCard.module.css';
+import { STATIC_URL } from '../../constants';
+
+export default function QuizCard({ index, question, answer, image, choices }) {
+  console.log(question, answer, image, choices);
+  return (
+    <div className={styles.card}>
+      <div className={styles.header}>
+        <span className={styles.heading}>{index}번 퀴즈</span>
+      </div>
+      {image ? (
+        <img
+          src={`${STATIC_URL}${image}`}
+          alt="이미지 없음"
+          className={styles.imagePreview}
+        />
+      ) : (
+        <div className={styles.imagePreview}>
+          <div>이미지 없음</div>
+        </div>
+      )}
+      <label className={styles.label}>질문</label>
+      <input
+        type="text"
+        value={question}
+        className={styles.input}
+      />
+      <label className={styles.label}>정답</label>
+      <input
+        type="text"
+        value={answer}
+        className={styles.input}
+      />
+      {choices.map?.((choice, idx) => (
+        <div
+          className={styles.choiceDiv}
+          key={idx}
+        >
+          <label>선택지 {choice.num} </label>
+          <input
+            className={`${styles.input} ${styles.choiceInput}`}
+            type="text"
+            value={choice.content}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,111 @@
+.card {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 16px 12px;
+  width: 416px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.heading {
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.label {
+  color: var(--text-color);
+  font-size: 14px;
+  line-height: 1.4;
+  font-weight: 400;
+  margin-bottom: 4px;
+}
+
+.imagePreview {
+  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 {
+  padding: 14px;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 1.4;
+  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);
+}
+
+.buttonsWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+
+.button {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 16px;
+  line-height: 1.4;
+  font-weight: 700;
+  align-self: end;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.add {
+  border: 1px solid var(--primary-color);
+  background-color: var(--primary-color);
+  color: var(--on-primary);
+  stroke: var(--on-primary);
+}
+
+.remove {
+  border: 1px solid var(--blue100);
+  background-color: var(--blue100);
+  color: var(--info-color);
+  stroke: var(--info-color);
+}
+
+.cardRemove {
+  border: 1px solid var(--background-secondary);
+  background-color: var(--background-secondary);
+  color: var(--text-color-secondary);
+  stroke: var(--text-color-secondary);
+}

frontend/src/components/QuizForm/index.js

@@ -1,2 +1,3 @@
 export { default as QuizCard } from './QuizCard';
 export { default as QuizsetForm } from './QuizsetForm';
+export { default as QuizDetailCard } from './QuizDetailCard';

frontend/src/components/QuizsetDetail/QuizsetDetail.jsx

@@ -1,9 +1,10 @@
 import BackIcon from '/src/assets/icons/back.svg?react';
 import { Link } from 'react-router-dom';
 import styles from './QuizsetDetail.module.css';
-import { STATIC_URL } from '../../constants';
+import { QuizDetailCard } from '../QuizForm';
 
 export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, onEdit }) {
+  console.log('topic', topic, 'title', title, 'quizzes', quizzes);
   return (
     <div className={styles.quizsetDetail}>
       <header className={styles.header}>
@@ -18,27 +19,16 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on
           <h1 className={styles.title}>{title}</h1>
         </div>
       </header>
-      <div>
-        {quizzes.map((quiz, index) => (
-          <div key={index}>
-            <div>질문 : {quiz.question}</div>
-            {quiz.image && (
-              <img
-                src={`${STATIC_URL}${quiz.image}`}
-                alt="강의 이미지"
-                className={styles.image}
-              />
-            )}
-            <div>정답 : {quiz.answer}</div>
-            {quiz.choices != [] &&
-              quiz.choices.map?.((choice, choiceIndex) => (
-                <div key={choice.id}>
-                  <div>
-                    선택지 {choiceIndex + 1} : {choice.content}
-                  </div>
-                </div>
-              ))}
-          </div>
+      <div className={styles.grid}>
+        {quizzes.map?.((quiz, index) => (
+          <QuizDetailCard
+            key={index}
+            index={index + 1}
+            question={quiz.question}
+            answer={quiz.answer}
+            choices={quiz.choices}
+            image={quiz.image}
+          />
         ))}
       </div>
       <button

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

@@ -42,3 +42,11 @@
   border-radius: 8px;
   background-color: var(--background-secondary);
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 440px);
+  gap: 20px;
+  justify-content: start;
+  margin-bottom: 40px;
+}