diff --git a/frontend/src/components/QuizForm/QuizCard.jsx b/frontend/src/components/QuizForm/QuizCard.jsx index 76549d5..4b0617b 100644 --- a/frontend/src/components/QuizForm/QuizCard.jsx +++ b/frontend/src/components/QuizForm/QuizCard.jsx @@ -6,7 +6,7 @@ import PlusIcon from '/src/assets/icons/plus.svg?react'; export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) { // TODO: 카드 디자인 완성 및 이쁘게 바꾸기 const [question, setQuestion] = useState(quiz.question || ''); - const [answer, setAnswer] = useState(quiz.answer || ''); + const [answer, setAnswer] = useState(Number(quiz.answer) || ''); const [choices, setChoices] = useState(quiz.choices || []); const [image, setImage] = useState(quiz.image || null); const [imagePreview, setImagePreview] = useState( @@ -31,6 +31,9 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) { if (choices.length > 0) { const updatedChoices = choices.slice(0, -1); setChoices(updatedChoices); + if (updatedChoices.length < answer) { + setAnswer(''); + } updateQuiz(quiz.id, { ...quiz, question, answer, choices: updatedChoices, image }); } }; @@ -55,6 +58,12 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) { } }; + const handleChoiceSelect = (choiceContent) => { + console.log(choiceContent); + setAnswer(choiceContent); + updateQuiz(quiz.id, { ...quiz, question, answer: choiceContent, choices, image }); + }; + return (
@@ -100,17 +109,32 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) { placeholder="질문 내용을 입력하세요" /> - { - setAnswer(e.target.value); - updateQuiz(quiz.id, { ...quiz, question, answer: e.target.value, choices, image }); - }} - className={styles.input} - placeholder="정답을 입력하세요" - /> + {choices.length > 0 ? ( +
+ {choices.map((choice, index) => ( + + ))} +
+ ) : ( + { + setAnswer(e.target.value); + updateQuiz(quiz.id, { ...quiz, question, answer: e.target.value, choices, image }); + }} + className={styles.input} + placeholder="정답을 입력하세요" + /> + )}
Tip: 선택지를 넣지 않는다면 단답형 문제가 됩니다
diff --git a/frontend/src/components/QuizForm/QuizCard.module.css b/frontend/src/components/QuizForm/QuizCard.module.css index 7857268..9d29f94 100644 --- a/frontend/src/components/QuizForm/QuizCard.module.css +++ b/frontend/src/components/QuizForm/QuizCard.module.css @@ -116,3 +116,39 @@ cursor: pointer; padding: 0; } + +.choicesWrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} + +.choiceButton { + padding: 10px 16px; + background-color: var(--background-secondary); + border: 1px solid var(--background-tertiary); + border-radius: 4px; + cursor: pointer; + transition: + background-color 0.25s, + border-color 0.25s, + stroke 0.25s, + color 0.25s; +} + +.choiceButton:hover { + background-color: var(--background-tertiary); +} + +.selected { + border: 1px solid var(--primary-color); + background-color: var(--primary-color); + color: var(--on-primary); + stroke: var(--on-primary); +} + +.selected:hover { + border: 1px solid var(--primary-color); + background-color: var(--primary-color); +} diff --git a/frontend/src/components/QuizForm/QuizDetailCard.jsx b/frontend/src/components/QuizForm/QuizDetailCard.jsx index 6546a41..870af6f 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.jsx +++ b/frontend/src/components/QuizForm/QuizDetailCard.jsx @@ -1,4 +1,4 @@ -import styles from './QuizCard.module.css'; +import styles from './QuizDetailCard.module.css'; import { STATIC_URL } from '../../constants'; export default function QuizDetailCard({ index, question, answer, image, choices, userAnswer = null, correct = true }) { diff --git a/frontend/src/components/QuizForm/QuizDetailCard.module.css b/frontend/src/components/QuizForm/QuizDetailCard.module.css index e6265b5..a0e1e1d 100644 --- a/frontend/src/components/QuizForm/QuizDetailCard.module.css +++ b/frontend/src/components/QuizForm/QuizDetailCard.module.css @@ -77,10 +77,6 @@ padding: 7px; } -.input::placeholder { - color: var(--text-color-tertiary); -} - .buttonsWrapper { display: flex; flex-direction: row; diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css index 594af87..2157a16 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css +++ b/frontend/src/components/QuizsetDetail/QuizsetDetail.module.css @@ -46,6 +46,7 @@ line-height: 1.2; font-weight: 800; margin: 0; + word-break: break-all; } .image { diff --git a/frontend/src/pages/QuizsetEditPage/QuizsetEditPage.jsx b/frontend/src/pages/QuizsetEditPage/QuizsetEditPage.jsx index 17fcb30..f3c55a2 100644 --- a/frontend/src/pages/QuizsetEditPage/QuizsetEditPage.jsx +++ b/frontend/src/pages/QuizsetEditPage/QuizsetEditPage.jsx @@ -12,18 +12,39 @@ export default function QuizsetEditPage() { const handleSubmit = async (e, title, quizzes) => { e.preventDefault(); + if (title === '') { + window.alert('퀴즈 제목이 없는 퀴즈셋은 생성할 수 없습니다'); + return; + } + + if (quizzes.length === 0) { + window.alert('퀴즈가 없는 퀴즈셋은 생성할 수 없습니다'); + return; + } + const images = []; const quizContents = []; - quizzes.forEach((quiz) => { - const { image, ...quizData } = quiz; - images.push(image); - if (quizData.id > initialValue.quizzes[initialValue.quizzes.length - 1].id) { - const { question, answer, choices } = quizData; - quizContents.push({ question, answer, choices }); - } else { - quizContents.push(quizData); + + for (let quiz of quizzes) { + const { image, question, answer, choices } = quiz; + + if (question === '' || answer === '') { + window.alert('질문과 정답은 모든 문제에 필수값입니다.'); + return; } - }); + + if (choices.length > 0) { + for (let choice of choices) { + if (choice.content === '') { + window.alert('모든 선택지에는 내용이 필요합니다.'); + return; + } + } + } + + images.push(image); + quizContents.push({ question, answer, choices }); + } const quizsetObject = { id: quizsetId, diff --git a/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx b/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx index 3614fea..b229b81 100644 --- a/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx +++ b/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx @@ -8,6 +8,12 @@ export default function QuizsetWritePage() { const handleSubmit = async (e, title, quizzes) => { e.preventDefault(); + + if (title === '') { + window.alert('퀴즈 제목이 없는 퀴즈셋은 생성할 수 없습니다'); + return; + } + if (quizzes.length === 0) { window.alert('퀴즈가 없는 퀴즈셋은 생성할 수 없습니다'); return; @@ -16,12 +22,26 @@ export default function QuizsetWritePage() { const images = []; const quizContents = []; - quizzes.forEach((quiz) => { - // eslint-disable-next-line no-unused-vars + for (let quiz of quizzes) { const { image, question, answer, choices } = quiz; + + if (question === '' || answer === '') { + window.alert('질문과 정답은 모든 문제에 필수값입니다.'); + return; + } + + if (choices.length > 0) { + for (let choice of choices) { + if (choice.content === '') { + window.alert('모든 선택지에는 내용이 필요합니다.'); + return; + } + } + } + images.push(image); quizContents.push({ question, answer, choices }); - }); + } const quizsetObject = { title,