@@ -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,