Merge branch 'FE/useQuizsetWrite' into 'frontend'

[Front-End] feat: useQuizsetWrite 추가 외

See merge request s11-webmobile1-sub2/S11P12A701!32

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 (
-    <form className={styles.infoEditForm}>
+    <form
+      onSubmit={(e) => onSubmit(e, username, useremail)}
+      className={styles.infoEditForm}
+    >
       <p className={styles.textHeading}>이름 변경</p>
       <div className={styles.inputBox}>
         <label

frontend/src/components/PasswordChangeForm/PasswordChangeForm.jsx

@@ -1,13 +1,13 @@
 import { useState, useRef } from 'react';
 import styles from './PasswordChangeForm.module.css';
 
-export default function PasswordChangeForm() {
+export default function PasswordChangeForm({ onSubmit, onPwError = false }) {
+  // TODO: onPwError(현재 비밀번호와 같음) 시 응답을 받아 표시
   const [errorConfirmMessage, setErrorConfirmMessage] = useState(false);
   const [errorSameMessage, setErrorSameMessage] = useState(false);
   const currentPasswordRef = useRef('');
   const newPasswordRef = useRef('');
   const confirmPasswordRef = useRef('');
-  const userPassword = '1234';
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -15,13 +15,15 @@ export default function PasswordChangeForm() {
     const newPassword = newPasswordRef.current.value;
     const confirmPassword = confirmPasswordRef.current.value;
 
-    if (currentPassword === userPassword) {
-      setErrorSameMessage(false);
-    } else {
-      setErrorSameMessage(true);
-    }
     if (newPassword === confirmPassword) {
       setErrorConfirmMessage(false);
+      onSubmit(currentPassword, newPassword, confirmPassword);
+
+      if (onPwError) {
+        setErrorSameMessage(true);
+      } else {
+        setErrorSameMessage(false);
+      }
     } else {
       setErrorConfirmMessage(true);
     }

frontend/src/components/QuizForm/QuizCard.jsx

@@ -1,15 +1,18 @@
 import { useState } from 'react';
 import styles from './QuizCard.module.css';
 
-export default function QuizCard({ quiz, index, updateQuiz }) {
+export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
   const [question, setQuestion] = useState(quiz.question || '');
   const [answer, setAnswer] = useState(quiz.answer || '');
   const [choices, setChoices] = useState(quiz.choices || []);
+  const [imageFile, setImageFile] = useState(quiz.imageFile || null);
 
   const handleChoiceChange = (num, content) => {
-    const updatedChoices = choices.map((choice) => (choice.num === num ? { ...choice, content } : choice));
+    const updatedChoices = choices.map((choice) =>
+      choice.num === num ? { ...choice, content } : choice
+    );
     setChoices(updatedChoices);
-    updateQuiz(index, { question, answer, choices: updatedChoices });
+    updateQuiz(quiz.id, { ...quiz, question, answer, choices: updatedChoices, imageFile });
   };
 
   const handleAddChoice = () => {
@@ -17,7 +20,7 @@ export default function QuizCard({ quiz, index, updateQuiz }) {
       const newChoice = { num: choices.length + 1, content: '' };
       const updatedChoices = [...choices, newChoice];
       setChoices(updatedChoices);
-      updateQuiz(index, { question, answer, choices: updatedChoices });
+      updateQuiz(quiz.id, { ...quiz, question, answer, choices: updatedChoices, imageFile });
     }
   };
 
@@ -25,19 +28,29 @@ export default function QuizCard({ quiz, index, updateQuiz }) {
     if (choices.length > 0) {
       const updatedChoices = choices.slice(0, -1);
       setChoices(updatedChoices);
-      updateQuiz(index, { question, answer, choices: updatedChoices });
+      updateQuiz(quiz.id, { ...quiz, question, answer, choices: updatedChoices, imageFile });
     }
   };
 
+  const handleFileChange = (e) => {
+    const file = e.target.files[0] ?? null;
+    setImageFile(file);
+    updateQuiz(quiz.id, { ...quiz, question, answer, choices, imageFile: file });
+  };
+
   return (
     <div className={styles.card}>
+      <div className={styles.header}>
+        <span>퀴즈 생성 카드</span>
+        <span onClick={() => deleteQuiz(quiz.id)}>X</span> {/* id를 기반으로 삭제 */}
+      </div>
       <label>질문</label>
       <input
         type="text"
         value={question}
         onChange={(e) => {
           setQuestion(e.target.value);
-          updateQuiz(index, { question: e.target.value, answer, choices });
+          updateQuiz(quiz.id, { ...quiz, question: e.target.value, answer, choices, imageFile });
         }}
         placeholder="질문 내용을 입력하세요"
       />
@@ -47,7 +60,7 @@ export default function QuizCard({ quiz, index, updateQuiz }) {
         value={answer}
         onChange={(e) => {
           setAnswer(e.target.value);
-          updateQuiz(index, { question, answer: e.target.value, choices });
+          updateQuiz(quiz.id, { ...quiz, question, answer: e.target.value, choices, imageFile });
         }}
         placeholder="정답을 입력하세요"
       />
@@ -55,18 +68,10 @@ export default function QuizCard({ quiz, index, updateQuiz }) {
         <span>Tip: 선택지를 넣지 않는다면 단답형 문제가 됩니다</span>
       </div>
       <div className={styles.buttonsWrapper}>
-        <button
+        <button type="button" onClick={handleAddChoice} className={styles.button}>
-          type="button"
-          onClick={handleAddChoice}
-          className={styles.button}
-        >
           선택지 추가하기
         </button>
-        <button
+        <button type="button" onClick={handlePopChoice} className={styles.removeButton}>
-          type="button"
-          onClick={handlePopChoice}
-          className={styles.removeButton}
-        >
           선택지 줄이기
         </button>
       </div>
@@ -81,6 +86,8 @@ export default function QuizCard({ quiz, index, updateQuiz }) {
           />
         </div>
       ))}
+      <label>퀴즈 이미지</label>
+      <input type="file" accept=".png, .jpg, .jpeg" onChange={handleFileChange} />
     </div>
   );
 }

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;

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 updateQuiz = (id, updatedQuiz) => {
-    const updatedQuizzes = quizzes.map((quiz, i) => (i === index ? updatedQuiz : quiz));
+    const updatedQuizzes = quizzes.map((quiz) =>
+      quiz.id === id ? updatedQuiz : quiz
+    );
     setQuizzes(updatedQuizzes);
   };
 
-  const handleFileChange = (e) => {
+  const deleteQuiz = (id) => {
-    const file = e.target.files?.[0];
+    setQuizzes(quizzes.filter((quiz) => quiz.id !== id));
-    setImageFile(file);
   };
 
   return (
     <div className={styles.quizsetForm}>
       <header className={styles.header}>
-        <Link
+        <Link to={to} className={styles.goBack}>
-          to={to}
-          className={styles.goBack}
-        >
           <BackIcon />
           <span>{headerTitle}</span>
         </Link>
@@ -39,7 +40,7 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit }) {
       </header>
       <form
         className={styles.form}
-        onSubmit={(e) => onSubmit(e, title, quizzes, imageFile)}
+        onSubmit={(e) => onSubmit(e, title, quizzes)}
       >
         <input
           type="text"
@@ -47,12 +48,12 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit }) {
           onChange={(e) => setTitle(e.target.value)}
           placeholder="퀴즈셋 제목을 입력해주세요"
         />
-        {quizzes.map((quiz, index) => (
+        {quizzes.map((quiz) => (
           <QuizCard
-            key={index}
+            key={quiz.id}
             quiz={quiz}
-            index={index}
             updateQuiz={updateQuiz}
+            deleteQuiz={deleteQuiz}
           />
         ))}
         <button
@@ -62,16 +63,7 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit }) {
         >
           퀴즈 추가하기
         </button>
-        <label>퀴즈 이미지</label>
+        <button type="submit" className={styles.button}>
-        <input
-          type="file"
-          accept=".png, .jpg, .jpeg"
-          onChange={handleFileChange}
-        />
-        <button
-          type="submit"
-          className={styles.button}
-        >
           <EditIcon />
           <div>제출</div>
         </button>

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 (
     <div className={styles.quizsetDetail}>
       <header className={styles.header}>
@@ -17,6 +17,24 @@ export default function QuizsetDetail({ topic, title }) {
           <h1 className={styles.title}>{title}</h1>
         </div>
       </header>
+      <div>
+        {quizzes.map((quiz, index) => (
+          <div key={index}>
+            <div>질문 : {quiz.question}</div>
+            <img
+              src={quiz.image}
+              alt="강의 이미지"
+            />
+            <div>정답이 응답에 없네요</div>
+          </div>
+        ))}
+      </div>
+      <button
+        type="button"
+        onClick={onDelete}
+      >
+        퀴즈셋 삭제
+      </button>
     </div>
   );
 }

frontend/src/hooks/api/useAuth.js

@@ -55,5 +55,23 @@ export function useAuth() {
       .catch((e) => console.log(e));
   };
 
-  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 };
 }

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 };
+}

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 };
+}

frontend/src/pages/LectureCreatePage/LectureCreatePage.jsx

@@ -17,13 +17,12 @@ export default function LectureCreatePage() {
   };
 
   return (
-    <div>
-      <h1>강의 생성</h1>
     <LectureForm
-        title={'강의 생성'}
+      title={'강의 홈'}
+      topic={'강의 생성'}
+      to={'..'}
       onSubmit={handleSubmit}
       onCreate={true}
     />
-    </div>
   );
 }

frontend/src/pages/LectureEditPage/LectureEditPage.jsx

@@ -21,7 +21,6 @@ export default function LecutreEditPage() {
   };
 
   return (
-    <div>
     <LectureForm
       initialValues={initialData}
       onSubmit={handleSubmit}
@@ -29,6 +28,5 @@ export default function LecutreEditPage() {
       topic={'강의 수정'}
       to={'..'}
     />
-    </div>
   );
 }

frontend/src/pages/MyInfoChangePage/MyInfoChangePage.jsx

@@ -1,5 +1,15 @@
 import { InfoEditForm } from '../../components/InfoEditForm';
+import { useAuth } from '../../hooks/api/useAuth';
 
 export default function MyInfoChangePage() {
-  return <InfoEditForm />;
+  const { updateInfo } = useAuth();
+
+  const handleSubmit = async (e, username, useremail) => {
+    e.preventDefault();
+    await updateInfo(username, useremail)
+      .then((res) => console.log(res))
+      .catch((err) => console.log(err));
+  };
+
+  return <InfoEditForm onSubmit={handleSubmit} />;
 }

frontend/src/pages/PasswordChangePage/PasswordChangePage.jsx

@@ -1,5 +1,12 @@
 import { PasswordChangeForm } from '../../components/PasswordChangeForm';
+import { useAuth } from '../../hooks/api/useAuth';
 
 export default function PasswordChangePage() {
-  return <PasswordChangeForm />;
+  // TODO: 400에러 고치기
+  const { updatePassword } = useAuth();
+  const handleSubmit = async (currentPw, newPw, newPwCheck) => {
+    console.log(currentPw, newPw);
+    await updatePassword(currentPw, newPw, newPwCheck);
+  };
+  return <PasswordChangeForm onSubmit={handleSubmit} />;
 }

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() {
+export default function QuizsetDetailPage() {
-  const { lectureId } = useParams();
+  const navigate = useNavigate();
-  const { data } = useQuizsetDetail(lectureId);
+  const { quizsetId } = useParams();
-  const quizset = data?.data ?? [];
+  const { quizsetDelete } = useQuizsetDelete();
+  const { data } = useQuizsetDetail(quizsetId);
+  const quizset = data.data;
   console.log(quizset);
-  return <QuizsetDetail title={quizset.title} />;
+  const handleDelete = async () => {
+    await quizsetDelete(quizsetId);
+    navigate('..');
+  };
+  return (
+    <QuizsetDetail
+      topic={'퀴즈 목록'}
+      title={quizset.title}
+      quizzes={quizset.quizzes}
+      onDelete={handleDelete}
+    />
+  );
 }

frontend/src/pages/QuizsetWritePage/QuizsetWritePage.jsx

@@ -1,26 +1,47 @@
 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' }));
+    formData.append(
+      'quizSetCreateRequest',
+      new Blob([JSON.stringify(quizsetObject)], { type: 'application/json' })
+    );
+
+    images.forEach((imageFile) => {
       if (imageFile) {
-      formData.append('image', imageFile);
+        formData.append('images', imageFile);
+      } else {
+        formData.append('images', new Blob([''], { type: 'image/jpg' }));
       }
-    const response = await quizsetWrite(formData);
+    });
-    console.log(response);
+
+    await quizsetWrite(formData);
+    navigate('..');
   };
+
   return (
     <QuizsetForm
       onSubmit={handleSubmit}

frontend/src/utils/axios/instance.js

@@ -12,7 +12,7 @@ const instance = axios.create({
 
 instance.interceptors.request.use((config) => {
   const accessToken = useBoundStore.getState().token;
-
+  console.log(accessToken);
   if (accessToken) {
     config.headers.Authorization = `${accessToken}`;
   }