diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx new file mode 100644 index 0000000..7f0abdf --- /dev/null +++ b/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 ( +
+
+ {index}번 퀴즈 +
+ {image ? ( + 이미지 없음 + ) : ( +
+
이미지 없음
+
+ )} + + + + + {choices.map?.((choice, idx) => ( +
+ + +
+ ))} +
+ ); +} diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css new file mode 100644 index 0000000..05cbd09 --- /dev/null +++ b/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); +} diff --git a/frontend/src/components/QuizForm/index.js b/frontend/src/components/QuizForm/index.js index 188a7d1..76196ed 100644 --- a/frontend/src/components/QuizForm/index.js +++ b/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'; diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx index cae045f..a244dd5 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx +++ b/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 (
@@ -18,27 +19,16 @@ export default function QuizsetDetail({ topic, title, quizzes = [], onDelete, on

{title}

-
- {quizzes.map((quiz, index) => ( -
-
질문 : {quiz.question}
- {quiz.image && ( - 강의 이미지 - )} -
정답 : {quiz.answer}
- {quiz.choices != [] && - quiz.choices.map?.((choice, choiceIndex) => ( -
-
- 선택지 {choiceIndex + 1} : {choice.content} -
-
- ))} -
+
+ {quizzes.map?.((quiz, index) => ( + ))}