Merge branch 'fe/fixEditQuiz' into 'frontend'
[Front-End] fix: 퀴즈 수정 폼 수정 See merge request s11-webmobile1-sub2/S11P12A701!187
This commit is contained in:
commit
bc3cfaa66f
@ -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/*"
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
|
@ -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
|
||||||
|
@ -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(() => {
|
||||||
|
setTimeout(() => {
|
||||||
window.close();
|
window.close();
|
||||||
|
}, 200);
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -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}>
|
||||||
|
Loading…
Reference in New Issue
Block a user