[feat/#482] ✨ feat: 기존 퀴즈 가져오기

Team-WeQuiz · May 22, 2024 · 453e5ba · 453e5ba
1 parent dafd743
commit 453e5ba
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 35 deletions.
diff --git a/chatty-fe/src/app/(game)/_components/AuthCheck.tsx b/chatty-fe/src/app/(game)/_components/AuthCheck.tsx
@@ -58,5 +58,9 @@ export default function AuthCheck({ children }: AuthCheckProps) {
     }
   }, [accessToken, id]);
 
+  useEffect(() => {
+    console.log('set token:', accessToken);
+  }, [accessToken]);
+
   return <>{children}</>;
 }
diff --git a/chatty-fe/src/app/(game)/create-room/_components/DropBox/DropBox.tsx b/chatty-fe/src/app/(game)/create-room/_components/DropBox/DropBox.tsx
@@ -1,27 +1,42 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as styles from './DropBox.css';
 import Image from 'next/image';
+type ExistQuiz = {
+  quizDocId: string;
+  description: string;
+  numberOfQuiz: number;
+};
 
-const List = [
-  { id: 1, name: '1번 문제 리스트' },
-  { id: 2, name: '2번 문제 리스트' },
-  { id: 3, name: '3번 문제 리스트' },
-  { id: 4, name: '4번 문제 리스트' },
-  { id: 5, name: '5번 문제 리스트' },
-  { id: 6, name: '6번 문제 리스트' },
-  { id: 7, name: '7번 문제 리스트' },
-  { id: 8, name: '8번 문제 리스트' },
-];
-
-export default function DropBox() {
+type DropBoxProps = {
+  List: ExistQuiz[];
+  setNumberOfProblems: (numberOfProblems: number) => void;
+  selectedList: string | null;
+  setSelectedList: (selectedList: string | null) => void;
+};
+export default function DropBox({
+  List,
+  setNumberOfProblems,
+  selectedList,
+  setSelectedList,
+}: DropBoxProps) {
   const [isOpen, setIsOpen] = useState(false);
-  const [selected, setSelected] = useState('');
+  const [quizList, setQuizList] = useState<ExistQuiz[]>([]);
+  useEffect(() => {
+    setQuizList(List);
+  }, []);
+  useEffect(() => {
+    console.log('quizList:', quizList);
+  }, [quizList]);
+  const handleSelected = (selected: string, numberOfProblems: number) => {
+    setSelectedList(selected);
+    setNumberOfProblems(numberOfProblems);
+  };
 
   return (
     <div className={styles.MainContainer}>
       <div className={styles.Container} onClick={() => setIsOpen(!isOpen)}>
-        <span className={selected === '' ? styles.NoneSelected : ''}>
-          {selected || '문제를 선택해주세요.'}
+        <span className={selectedList === '' ? styles.NoneSelected : ''}>
+          {selectedList || '문제를 선택해주세요.'}
         </span>
         <button className={styles.ButtonWrapper}>
           <Image
@@ -35,11 +50,11 @@ export default function DropBox() {
       <ul className={isOpen ? styles.List : styles.ListNone}>
         {List.map((item) => (
           <li
-            onClick={() => setSelected(item.name)}
+            onClick={() => handleSelected(item.quizDocId, item.numberOfQuiz)}
             className={styles.ListItem}
-            key={item.id}
+            key={item.quizDocId}
           >
-            {item.name}
+            {item.quizDocId}
           </li>
         ))}
       </ul>

diff --git a/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.tsx b/chatty-fe/src/app/(game)/create-room/_components/FileUploadBox.tsx
@@ -4,7 +4,7 @@ import * as styles from './FileUploadBox.css';
 import Image from 'next/image';
 
 type FileUploadBoxProps = {
-  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+  setFiles: React.Dispatch<React.SetStateAction<File[] | null>>;
 };
 
 export default function FileUploadBox({ setFiles }: FileUploadBoxProps) {

diff --git a/chatty-fe/src/app/(game)/create-room/page.tsx b/chatty-fe/src/app/(game)/create-room/page.tsx
@@ -1,44 +1,95 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import * as styles from './page.css';
 import ContentsBox from './_components/ContentsBox';
 import TextInputField from '@/app/_components/TextInputField';
 import FileUploadBox from './_components/FileUploadBox';
-import { postRoom } from '@/app/_api/createRoom';
+import { getExistQuiz, postRoom } from '@/app/_api/createRoom';
 import { useRouter } from 'next/navigation';
 import GradButton from '@/app/_components/GradButton';
 import QuestionMaker from './_components/QuestionMaker/QuestionMaker';
 import DropBox from './_components/DropBox/DropBox';
+import useAuthStore from '@/app/_store/useAuthStore';
+
+type ExistQuiz = {
+  quizDocId: string;
+  description: string;
+  numberOfQuiz: number;
+};
 
 export default function CreateRoom() {
   const [isLoading, setIsLoading] = useState(false);
-  const [files, setFiles] = useState<File[]>([]);
+  const [files, setFiles] = useState<File[] | null>(null);
   const [title, setTitle] = useState('');
   const [description, setDescription] = useState('');
   const [numberOfParticipants, setNumberOfParticipants] = useState(1);
   const [numberOfProblems, setNumberOfProblems] = useState(5);
   const [qustionType, setQuestionType] = useState<'list' | 'create'>('create');
-
+  const [existQuiz, setExistQuiz] = useState<ExistQuiz[]>([]);
+  const [selectedList, setSelectedList] = useState<string | null>(null);
+  const [isNumberUnable, setIsNumberUnable] = useState(false);
+  const { accessToken } = useAuthStore();
   const router = useRouter();
 
+  const handleNumberOfProblems = (numberOfProblems: number) => {
+    setNumberOfProblems(numberOfProblems);
+    setIsNumberUnable(true);
+  };
+
+  useEffect(() => {
+    console.log(selectedList);
+  }, [selectedList]);
+
+  useEffect(() => {
+    console.log(numberOfProblems);
+  }, [numberOfProblems]);
+
+  useEffect(() => {
+    if (qustionType === 'list') {
+      setIsNumberUnable(true);
+      setFiles(null);
+    } else {
+      setIsNumberUnable(false);
+      setSelectedList(null);
+    }
+  }, [qustionType]);
+
   const isFileSizeBigger = () => {
     const MAX_FILE_SIZE = 100 * 1024 * 1024;
-    if (files.some((file) => file.size > MAX_FILE_SIZE)) {
+    if (files?.some((file) => file.size > MAX_FILE_SIZE)) {
       alert('파일 크기는 100MB를 초과할 수 없습니다.');
       return true;
     }
     return false;
   };
 
+  const fetchExistQuiz = async () => {
+    const data = await getExistQuiz();
+    setExistQuiz(data.existQuizList);
+    console.log(accessToken);
+    console.log(existQuiz);
+  };
+
+  useEffect(() => {
+    if (accessToken) fetchExistQuiz();
+  }, [accessToken]);
+
   const onSubmit = async () => {
+    console.log(title);
+    console.log(description);
+    console.log(numberOfProblems);
+    console.log(numberOfParticipants);
+    console.log(files);
+    console.log(selectedList);
     if (
       !title ||
       !description ||
       !numberOfParticipants ||
-      !numberOfProblems ||
-      !files.length
+      (!files?.length && !selectedList)
     ) {
-      alert('방 제목, 설명, 인원 수, 문제 수는 필수 입력 항목입니다.');
+      alert(
+        '방 제목, 설명, 인원 수, 문제 수, 문제 목록은 필수 입력 항목입니다.',
+      );
       return;
     }
     if (isFileSizeBigger()) {
@@ -52,6 +103,7 @@ export default function CreateRoom() {
         numberOfProblems,
         numberOfParticipants,
         files,
+        selectedList,
       );
       console.log(response);
       if (response) {
@@ -131,6 +183,7 @@ export default function CreateRoom() {
                     name="numberOfProblems"
                     value={5}
                     onChange={() => setNumberOfProblems(5)}
+                    disabled={isNumberUnable}
                     checked={numberOfProblems === 5}
                   />
                   <label htmlFor="5">5개</label>
@@ -139,15 +192,19 @@ export default function CreateRoom() {
                     id="10"
                     name="numberOfProblems"
                     value={10}
+                    disabled={isNumberUnable}
                     onChange={() => setNumberOfProblems(10)}
+                    checked={numberOfProblems === 10}
                   />
                   <label htmlFor="10">10개</label>
                   <input
                     type="radio"
                     id="15"
                     name="numberOfProblems"
                     value={15}
+                    disabled={isNumberUnable}
                     onChange={() => setNumberOfProblems(15)}
+                    checked={numberOfProblems === 15}
                   />
                   <label htmlFor="15">15개</label>
                 </div>
@@ -164,7 +221,12 @@ export default function CreateRoom() {
             setQuestionType={setQuestionType}
           />
           {qustionType === 'list' ? (
-            <DropBox />
+            <DropBox
+              List={existQuiz}
+              setNumberOfProblems={handleNumberOfProblems}
+              selectedList={selectedList}
+              setSelectedList={setSelectedList}
+            />
           ) : (
             <FileUploadBox setFiles={setFiles} />
           )}

diff --git a/chatty-fe/src/app/_api/createRoom.ts b/chatty-fe/src/app/_api/createRoom.ts
@@ -7,15 +7,17 @@ export const postRoom = async (
   description: string,
   numOfQuiz: number,
   playerLimitNum: number,
-  files: File[],
+  files?: File[] | null,
+  existDocId?: string | null,
 ) => {
   try {
-    const formData: any = new FormData();
+    const formData = new FormData();
     formData.append('name', name);
     formData.append('description', description);
     formData.append('numOfQuiz', String(numOfQuiz));
     formData.append('playerLimitNum', String(playerLimitNum));
-    formData.append('files', files[0], files[0].name);
+    if (files) formData.append('files', files[0], files[0].name);
+    if (existDocId) formData.append('existQuizDocId', existDocId);
 
     const response = await client.post('/rooms', formData, {
       headers: {
@@ -24,18 +26,34 @@ export const postRoom = async (
       },
     });
 
+    if (!response || !response.data) {
+      throw new Error('응답이 유효하지 않습니다.');
+    }
+
     console.log(response.data);
     return response.data;
   } catch (error: any) {
-    if (error.response.data.exceptionCode > 1000)
+    console.error('API 호출 중 오류 발생:', error);
+    if (
+      error.response &&
+      error.response.data &&
+      error.response.data.exceptionCode > 1000
+    ) {
       throw new Error(error.response.data.message);
-    else throw new Error('오류가 발생했습니다.');
+    } else {
+      throw new Error('오류가 발생했습니다.');
+    }
   }
 };
 
 export const getExistQuiz = async () => {
   try {
-    const response = await client.get('/rooms/existQuiz');
+    const response = await client.get('/rooms/existQuiz', {
+      headers: {
+        Authorization: `Bearer ${useAuthStore.getState().accessToken} `,
+      },
+    });
+    console.log(response);
     console.log(response.data);
     return response.data;
   } catch (error: any) {