Merge pull request #57 from DevSimpleQuiz/#46-퀴즈페이지변경

[#46] 퀴즈 페이지 api 및 무한 퀴즈 챌린지 UI 변경

src/api/quiz.api.ts

@@ -1,14 +1,13 @@
-import { QuizItem, QuizResult } from "../models/quiz.model";
+import { quizAnswer, QuizItem, QuizResult } from "../models/quiz.model";
 import { httpClient } from "./http";
 
 interface FetchQuizzesResponse {
   quizzes: QuizItem[];
 }
 
 export const fetchQuizzes = async () => {
-
   try{
-    const response = await httpClient.get<FetchQuizzesResponse>("/quiz");
+    const response = await httpClient.get<FetchQuizzesResponse>("/quizzes");
     return response.data;
   }catch (error) {
     return {
@@ -17,10 +16,20 @@ export const fetchQuizzes = async () => {
   }   
 };
 
+export const fetchAnswer = async (quizId: number, answer: string) : Promise<quizAnswer>=> {
+  try{
+    const response = await httpClient.get<quizAnswer>(`/quizzes/${quizId}/mark?answer=${answer}`);
+    return response.data;
+  }catch (error) {
+    console.error("API 요청 오류:", error);
+    throw error;
+  }   
+};
+
 // 퀴즈 결과 저장
 export const result = async (data: QuizResult) => {
   try {
-    await httpClient.post("/quiz/result", data);
+    await httpClient.post("/quizzes/result", data);
   } catch (error) {
     console.error("결과 저장에 실패하였습니다.", error);
   }

src/hooks/useAnswer.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { fetchAnswer } from "../api/quiz.api";
+
+export const useAnswer= () => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isCorrectAnswer, setIsCorrect] = useState<boolean | null>(null); // 정답 여부 저장
+  const [correctAnswer, setCorrectAnswer] = useState<string | null>(null); // 올바른 답 저장
+
+  // 퀴즈 답안을 제출하는 함수
+  const submitAnswer = async (quizId: number, answer: string) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetchAnswer(quizId, answer);
+
+      // 서버로부터 받은 응답에서 isCorrectAnswer와 correctAnswer를 저장
+      setIsCorrect(response.isCorrectAnswer);
+      setCorrectAnswer(response.correctAnswer);
+
+      return response; 
+    } catch (err) {
+      setError('답안 제출에 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { loading, error, isCorrectAnswer, correctAnswer, submitAnswer };
+};

src/hooks/useSaveQuizResult.ts

@@ -3,30 +3,27 @@ import { useAuthStore } from "../store/authStore";
 import { result } from "../api/quiz.api";
 import { QuizResult } from "../models/quiz.model";
 
-export const useSaveQuizResult = (
-  totalQuestions: number,
-  totalScore: number
-) => {
+export const useSaveQuizResult = () => {
   const { isLoggedIn } = useAuthStore();
 
-  useEffect(() => {
-    const saveResult = async () => {
-      if (isLoggedIn) {
-        console.log(`${totalScore} 점 저장 완료`);
-        const quizResult: QuizResult = {
-          totalQuizCount: totalQuestions,
-          solvedQuizCount: totalScore / 10,
-          totalQuizScore: totalScore,
-        };
-        try {
-          await result(quizResult);
-        } catch (error) {
-          console.error("퀴즈 결과 저장 중 오류 발생", error);
-        }
-      } else {
-        console.log("로그인하지 않으면 퀴즈 결과가 저장되지 않습니다.");
+  const saveResult = async (totalQuestions: number, totalScore: number, quizId: number) => {
+    if (isLoggedIn) {
+      console.log(`${totalScore} 점 저장 완료`);
+      const quizResult: QuizResult = {
+        totalQuizCount: totalQuestions,
+        solvedQuizCount: totalScore / 10,
+        totalQuizScore: totalScore,
+        quizId: quizId,
+      };
+      try {
+        await result(quizResult);
+      } catch (error) {
+        console.error("퀴즈 결과 저장 중 오류 발생", error);
       }
-    };
-    saveResult();
-  }, [isLoggedIn, totalQuestions, totalScore]);
-};
+    } else {
+      console.log("로그인하지 않으면 퀴즈 결과가 저장되지 않습니다.");
+    }
+  };
+
+  return saveResult; // 함수 반환
+};

src/models/quiz.model.ts

@@ -1,13 +1,27 @@
 export interface QuizItem{
+    quizId: number;
     word: string;
     definition: string;
     initialConstant: string;
     wordLength: number;
+    quizAnswerStats : IquizAnswerStats;
+}
+
+export interface IquizAnswerStats{
+    correctAnswersCount : number;
+    totalAttemptsUntilFirstCorrectAnswer: number;
+
+}
+
+export interface quizAnswer{
+    isCorrectAnswer : boolean;
+    correctAnswer : string;
 }
 
 export interface QuizResult {
     totalQuizCount: number;
     solvedQuizCount: number;
     totalQuizScore: number;
+    quizId: number,
   }