diff --git a/frontend/src/components/InfoEditForm/InfoEditForm.jsx b/frontend/src/components/InfoEditForm/InfoEditForm.jsx index 4938ea7..447add7 100644 --- a/frontend/src/components/InfoEditForm/InfoEditForm.jsx +++ b/frontend/src/components/InfoEditForm/InfoEditForm.jsx @@ -1,11 +1,15 @@ import styles from './InfoEditForm.module.css'; import { useState } from 'react'; -export default function InfoEditForm() { +export default function InfoEditForm({ onSubmit }) { const [username, setUsername] = useState(''); const [useremail, setUseremail] = useState(''); + return ( -
+ onSubmit(e, username, useremail)} + className={styles.infoEditForm} + >

이름 변경

))} + + ); -} +} \ No newline at end of file diff --git a/frontend/src/components/QuizForm/QuizCard.module.css b/frontend/src/components/QuizForm/QuizCard.module.css index b290a33..d92197e 100644 --- a/frontend/src/components/QuizForm/QuizCard.module.css +++ b/frontend/src/components/QuizForm/QuizCard.module.css @@ -8,6 +8,12 @@ gap: 8px; } +.header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + .buttonsWrapper { display: flex; flex-direction: row; diff --git a/frontend/src/components/QuizForm/QuizsetForm.jsx b/frontend/src/components/QuizForm/QuizsetForm.jsx index 7bca6cb..b06be51 100644 --- a/frontend/src/components/QuizForm/QuizsetForm.jsx +++ b/frontend/src/components/QuizForm/QuizsetForm.jsx @@ -6,32 +6,33 @@ import BackIcon from '/src/assets/icons/back.svg?react'; import { Link } from 'react-router-dom'; export default function QuizsetForm({ headerTitle, topic, to, onSubmit }) { - // TODO: 디자인 만들기 및 스타일 적용 const [title, setTitle] = useState(''); const [quizzes, setQuizzes] = useState([]); - const [imageFile, setImageFile] = useState(null); + const [quizId, setQuizId] = useState(0); const handleAddQuiz = () => { - setQuizzes([...quizzes, { question: '', answer: '', choices: [] }]); + setQuizzes([ + ...quizzes, + { id: quizId, question: '', answer: '', choices: [], imageFile: null }, + ]); + setQuizId(quizId + 1); }; - const updateQuiz = (index, updatedQuiz) => { - const updatedQuizzes = quizzes.map((quiz, i) => (i === index ? updatedQuiz : quiz)); + const updateQuiz = (id, updatedQuiz) => { + const updatedQuizzes = quizzes.map((quiz) => + quiz.id === id ? updatedQuiz : quiz + ); setQuizzes(updatedQuizzes); }; - const handleFileChange = (e) => { - const file = e.target.files?.[0]; - setImageFile(file); + const deleteQuiz = (id) => { + setQuizzes(quizzes.filter((quiz) => quiz.id !== id)); }; return (
- + {headerTitle} @@ -39,7 +40,7 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit }) {
onSubmit(e, title, quizzes, imageFile)} + onSubmit={(e) => onSubmit(e, title, quizzes)} > setTitle(e.target.value)} placeholder="퀴즈셋 제목을 입력해주세요" /> - {quizzes.map((quiz, index) => ( + {quizzes.map((quiz) => ( ))} - - -
); -} +} \ No newline at end of file diff --git a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx index 4abec2b..a6685c9 100644 --- a/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx +++ b/frontend/src/components/QuizsetDetail/QuizsetDetail.jsx @@ -2,7 +2,7 @@ import BackIcon from '/src/assets/icons/back.svg?react'; import { Link } from 'react-router-dom'; import styles from './QuizsetDetail.module.css'; -export default function QuizsetDetail({ topic, title }) { +export default function QuizsetDetail({ topic, title, quizzes = [], onDelete }) { return (
@@ -17,6 +17,24 @@ export default function QuizsetDetail({ topic, title }) {

{title}

+
+ {quizzes.map((quiz, index) => ( +
+
질문 : {quiz.question}
+ 강의 이미지 +
정답 : {quiz.answer}
+
+ ))} +
+ ); } diff --git a/frontend/src/hooks/api/useAuth.js b/frontend/src/hooks/api/useAuth.js index 11cd309..e570565 100644 --- a/frontend/src/hooks/api/useAuth.js +++ b/frontend/src/hooks/api/useAuth.js @@ -59,5 +59,23 @@ export function useAuth() { }); }; - return { login, logout, userRegister }; + const updateInfo = (name, email) => { + const infoBody = { + name, + email, + }; + return instance.put(`${API_URL}/user/updateinfo`, infoBody); + }; + + const updatePassword = (currentPw, newPw, newPwCheck) => { + const passwordBody = { + currentPassword: currentPw, + newPassword: newPw, + newPasswordCheck: newPwCheck, + }; + console.log(passwordBody); + return instance.put(`${API_URL}/user/updatepassword`, passwordBody); + }; + + return { login, logout, userRegister, updateInfo, updatePassword }; } diff --git a/frontend/src/hooks/api/useQuizsetDelete.js b/frontend/src/hooks/api/useQuizsetDelete.js new file mode 100644 index 0000000..3977714 --- /dev/null +++ b/frontend/src/hooks/api/useQuizsetDelete.js @@ -0,0 +1,10 @@ +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; + +export function useQuizsetDelete() { + const quizsetDelete = (quizsetId) => { + return instance.delete(`${API_URL}/quiz/teacher/${quizsetId}`); + }; + + return { quizsetDelete }; +} diff --git a/frontend/src/hooks/api/useQuizsetDetail.js b/frontend/src/hooks/api/useQuizsetDetail.js index 349ae2e..513f979 100644 --- a/frontend/src/hooks/api/useQuizsetDetail.js +++ b/frontend/src/hooks/api/useQuizsetDetail.js @@ -5,6 +5,6 @@ import { API_URL } from '../../constants'; export function useQuizsetDetail(id) { return useSuspenseQuery({ queryKey: ['quizset', id], - queryFn: () => instance.get(`${API_URL}/quiz/${id}`), + queryFn: () => instance.get(`${API_URL}/quiz/teacher/${id}`), }); } diff --git a/frontend/src/hooks/api/useQuizsetEdit.js b/frontend/src/hooks/api/useQuizsetEdit.js new file mode 100644 index 0000000..635f510 --- /dev/null +++ b/frontend/src/hooks/api/useQuizsetEdit.js @@ -0,0 +1,10 @@ +import instance from '../../utils/axios/instance'; +import { API_URL } from '../../constants'; + +export function useQuizsetEdit() { + const quizsetEdit = (quizsetId, quizsetObject) => { + return instance.put(`${API_URL}/lecture/${quizsetId}`, quizsetObject); + }; + + return { quizsetEdit }; +} diff --git a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx index 1a34335..a00cd42 100644 --- a/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx +++ b/frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx @@ -21,9 +21,10 @@ export default function LectureCreatePage() { return (
-

강의 생성

diff --git a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx b/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx index 30868b6..3e65ebb 100644 --- a/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx +++ b/frontend/src/pages/QuizsetDetailPage/QuizsetDetailPage.jsx @@ -1,11 +1,25 @@ import { useQuizsetDetail } from '../../hooks/api/useQuizsetDetail'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import { QuizsetDetail } from '../../components/QuizsetDetail'; +import { useQuizsetDelete } from '../../hooks/api/useQuizsetDelete'; -export default function QuizsetListPage() { - const { lectureId } = useParams(); - const { data } = useQuizsetDetail(lectureId); - const quizset = data?.data ?? []; +export default function QuizsetDetailPage() { + const navigate = useNavigate(); + const { quizsetId } = useParams(); + const { quizsetDelete } = useQuizsetDelete(); + const { data } = useQuizsetDetail(quizsetId); + const quizset = data.data; console.log(quizset); - return ; + const handleDelete = async () => { + await quizsetDelete(quizsetId); + navigate('..'); + }; + return ( + + ); } diff --git a/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx b/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx index d2eced1..2749f1e 100644 --- a/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx +++ b/frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx @@ -1,26 +1,44 @@ import { QuizsetForm } from '../../components/QuizForm'; import { useQuizsetWrite } from '../../hooks/api/useQuizsetWrite'; +import { useNavigate } from 'react-router-dom'; export default function QuizsetWritePage() { - // TODO: lecture에서 이미지 전송 성공 후 해당 방법으로 이미지 파일 입력 + const navigate = useNavigate(); const { quizsetWrite } = useQuizsetWrite(); - const handleSubmit = async (e, title, quizzes, imageFile = null) => { + + const handleSubmit = async (e, title, quizzes) => { e.preventDefault(); + console.log(quizzes); + + const images = []; + const quizContents = []; + + quizzes.forEach((quiz) => { + const { imageFile, ...quizData } = quiz; + images.push(imageFile); + quizContents.push(quizData); + }); + const quizsetObject = { title, - quizzes, + quizzes: quizContents, }; - console.log(quizsetObject); - console.log(imageFile); const formData = new FormData(); formData.append('quizSetCreateRequest', new Blob([JSON.stringify(quizsetObject)], { type: 'application/json' })); - if (imageFile) { - formData.append('image', imageFile); - } - const response = await quizsetWrite(formData); - console.log(response); + + images.forEach((imageFile) => { + if (imageFile) { + formData.append('images', imageFile); + } else { + formData.append('images', new Blob([''], { type: 'image/jpg' })); + } + }); + + await quizsetWrite(formData); + navigate('..'); }; + return (