✨ Feature(#46): Quiz 타입 수정

src/apis/quiz.ts → src/apis/quizzes.ts

@@ -2,8 +2,8 @@ import { useQuery } from '@tanstack/react-query';
 import Quiz from '../types/Quiz';
 import api from './axios/instance';
 
-const QUIZ = {
-  getQuizzes: (sectionId: string | null, part: string | null) => {
+const QuizzesApi = {
+  get: (sectionId: Quiz['sectionId'], part: Quiz['part']) => {
     return useQuery<Quiz[]>({
       queryKey: ['quizzes', { sectionId, part }],
       queryFn: () =>
@@ -17,4 +17,4 @@ const QUIZ = {
     });
   },
 };
-export default QUIZ;
+export default QuizzesApi;

src/hooks/useQueryParams.ts

@@ -12,7 +12,6 @@ function useQueryParams(params: string[]): (string | null)[] {
   params.forEach(param => {
     result.push(queryParams.get(param));
   });
-
   return result;
 }
 

src/pages/Quiz/Quiz.tsx

@@ -5,7 +5,7 @@ import {
   HeaderSection,
   ProgressSection,
   TotalResultsSection,
-} from './styles';
+} from '../quiz/styles';
 import type Quiz from '../../types/Quiz';
 import { useClientQuizStore } from '../../store/useQuizStore';
 import Combination from '../../features/quiz/ui/Combination';
@@ -14,13 +14,13 @@ import OXSelector from '../../features/quiz/ui/OXSelector';
 import ShortAnswer from '../../features/quiz/ui/ShortAnswer';
 import componentMapping from '../../utils/componentMap';
 import useRefreshWaringAlert from '../../hooks/useRefreshWaringAlert';
-import QUIZ from '../../apis/quiz';
 import ResultModal from '../../features/quiz/ui/ResultModal';
 import useQueryParams from '../../hooks/useQueryParams';
 import TotalResults from '../../features/quiz/ui/TotalResults';
 import { useState } from 'react';
 import arraysEqual from '../../utils/arraysEqual';
 import { ResponseButton, SubmitSection } from '../../features/quiz/styles';
+import QuizzesApi from './../../apis/quizzes';
 //퀴즈페이지
 export default function Quiz() {
   const { currentPage, totalResults, userResponseAnswer } =
@@ -29,7 +29,10 @@ export default function Quiz() {
   const [result, setResult] = useState<boolean>(false);
   const [isResultModal, setIsResultModal] = useState<boolean>(false);
   useRefreshWaringAlert();
-  const { data: quizzes, isLoading } = QUIZ.getQuizzes(section, part);
+  if (section === null || part === null) {
+    return <div>404</div>;
+  }
+  const { data: quizzes, isLoading } = QuizzesApi.get(Number(section), part);
   if (isLoading) return <div>Loading</div>;
   if (!quizzes) return <div>404</div>;
   if (quizzes.length === totalResults.length) {

src/route/Router.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import Main from '../pages/main/Main';
 import Quest from '../pages/Quest/Quest';
 import Ranking from '../pages/Ranking/Ranking';
-import Quiz from '../pages/Quiz/Quiz';
+import Quiz from '../pages/quiz/Quiz';
 import Admin from '../admin/Admin';
 import CreateQuiz from '../admin/CreateQuiz';
 import Login from '../pages/login/Login';

src/types/Quiz.ts

@@ -1,6 +1,6 @@
 export default interface Quiz {
   id: number;
-  partId: number;
+  part: string;
   sectionId: number;
   title: string;
   question: string;