fix: 퀴즈 수정 폼 수정

This commit is contained in:
jhynsoo 2024-08-13 13:58:29 +09:00
parent f62cfdf260
commit 7a4d6f936e
7 changed files with 30 additions and 34 deletions

View File

@ -58,7 +58,6 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
endDate: new Date(endDate).toISOString(), endDate: new Date(endDate).toISOString(),
time: time, time: time,
}; };
console.log(lectureObject);
const formData = new FormData(); const formData = new FormData();
formData.append('lectureCreateRequest', new Blob([JSON.stringify(lectureObject)], { type: 'application/json' })); formData.append('lectureCreateRequest', new Blob([JSON.stringify(lectureObject)], { type: 'application/json' }));
@ -161,6 +160,7 @@ export default function LectureForm({ title, topic, to = '..', initialValues = {
{onCreate && ( {onCreate && (
<div className={styles.inputField}> <div className={styles.inputField}>
<label className={styles.label}>수업 이미지</label> <label className={styles.label}>수업 이미지</label>
<label className={styles.secondary}>* 여백이 충분히 있고 배경이 투명한 이미지를 사용해 주세요</label>
<input <input
type="file" type="file"
accept="image/*" accept="image/*"

View File

@ -72,6 +72,13 @@
line-height: 1.4; line-height: 1.4;
} }
.secondary {
color: var(--text-color-secondary);
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
.input { .input {
background: var(--background-color); background: var(--background-color);
padding: 16px; padding: 16px;

View File

@ -28,17 +28,6 @@ export default function LectureHeader({ img, title, tutorImg, tutor, isLive = fa
<h1 className={styles.title}>{title}</h1> <h1 className={styles.title}>{title}</h1>
<div className={styles.desc}> <div className={styles.desc}>
<div className={styles.tutor}> <div className={styles.tutor}>
{tutorImg ? (
<img
src={tutorImg}
alt="강사 사진"
className={styles.tutorImg}
/>
) : (
<div className={styles.tutorImg}>
<UserIcon />
</div>
)}
<div>{tutor}</div> <div>{tutor}</div>
</div> </div>
<div> <div>

View File

@ -58,18 +58,6 @@
align-items: center; align-items: center;
} }
.tutorImg {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
stroke: var(--text-color-secondary);
border: 1px solid var(--border-color);
}
@keyframes glow { @keyframes glow {
0% { 0% {
box-shadow: 0 0 0 0 var(--error-color); box-shadow: 0 0 0 0 var(--error-color);

View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react'; import { useState } from 'react';
import styles from './QuizCard.module.css'; import styles from './QuizCard.module.css';
import CloseIcon from '/src/assets/icons/close.svg?react'; import CloseIcon from '/src/assets/icons/close.svg?react';
import PlusIcon from '/src/assets/icons/plus.svg?react'; import PlusIcon from '/src/assets/icons/plus.svg?react';
@ -6,12 +6,24 @@ import { Toggle } from '../Toggle';
import { STATIC_URL } from '../../constants'; import { STATIC_URL } from '../../constants';
export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) { export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
const isChoice = quiz.choices.length > 0;
const [question, setQuestion] = useState(quiz.question || ''); const [question, setQuestion] = useState(quiz.question || '');
const [answer, setAnswer] = useState(Number(quiz.answer) || ''); const [answer, setAnswer] = useState(isChoice ? Number(quiz.answer) || 1 : quiz.answer || '');
const [choices, setChoices] = useState(quiz.choices || [{ num: 1, content: '' }]); const [choices, setChoices] = useState(quiz.choices || [{ num: 1, content: '' }]);
const [image, setImage] = useState(quiz.image || null); const [image, setImage] = useState(quiz.image || null);
const [imagePreview, setImagePreview] = useState(quiz.image ? `${STATIC_URL}${quiz.image}` : null); const [imagePreview, setImagePreview] = useState(quiz.image ? `${STATIC_URL}${quiz.image}` : null);
const [quizType, setQuizType] = useState('단답식'); const [quizType, setQuizType] = useState(isChoice ? '객관식' : '단답식');
const handleToggle = (type) => {
setQuizType(type);
if (type === '단답식') {
setAnswer('');
setChoices([]);
return;
}
setAnswer(1);
setChoices([{ num: 1, content: '' }]);
};
const clearImage = () => { const clearImage = () => {
setImage(null); setImage(null);
@ -75,10 +87,6 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
updateQuiz(quiz.id, { ...quiz, question, answer: choiceContent, choices, image }); updateQuiz(quiz.id, { ...quiz, question, answer: choiceContent, choices, image });
}; };
useEffect(() => {
quizType === '단답식' ? setAnswer('') : setAnswer(1);
}, [quizType]);
return ( return (
<div className={styles.card}> <div className={styles.card}>
<div className={styles.header}> <div className={styles.header}>
@ -131,7 +139,7 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
<div className={styles.answerArea}> <div className={styles.answerArea}>
<Toggle <Toggle
active={quizType} active={quizType}
setActive={setQuizType} setActive={handleToggle}
choices={['단답식', '객관식']} choices={['단답식', '객관식']}
/> />
<input <input

View File

@ -15,6 +15,9 @@ export default function LivePage() {
const { data } = await instance.post(`${API_URL}/video/joinroom/${roomId}`).catch(() => { const { data } = await instance.post(`${API_URL}/video/joinroom/${roomId}`).catch(() => {
alert('방에 입장할 수 없습니다.'); alert('방에 입장할 수 없습니다.');
window.close(); window.close();
setTimeout(() => {
window.location.href = '/';
}, 100);
}); });
return data.token; return data.token;
@ -37,7 +40,9 @@ export default function LivePage() {
.post(`${API_URL}/video/deleteroom/${roomId}`) .post(`${API_URL}/video/deleteroom/${roomId}`)
.catch(() => {}) .catch(() => {})
.finally(() => { .finally(() => {
window.close(); setTimeout(() => {
window.close();
}, 200);
}); });
}} }}
> >

View File

@ -12,7 +12,6 @@ export default function StudentReportDetailPage() {
const { allCount, correctCount, quizzes, title } = report; const { allCount, correctCount, quizzes, title } = report;
const score = Math.round((100 * correctCount) / allCount); const score = Math.round((100 * correctCount) / allCount);
const userType = useBoundStore((state) => state.userType); const userType = useBoundStore((state) => state.userType);
console.log(userType);
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>