feat: 퀴즈 만들기 api 연결 (#33)

src/apis/learning.ts

@@ -33,7 +33,20 @@ export const getLearningLevel = async (languageId: number) => {
     const response = await authAxios.get(
       `${baseURL}/members/learningLevel?languageId=${languageId}`
     );
-    return response.data.data;
+    return response.data.data.learningLevel;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const getLearnedHistory = async (taleId: number) => {
+  try {
+    const access = LocalStorage.getItem("access");
+    const authAxios = getAuthAxios(access);
+    const response = await authAxios.get(
+      `${baseURL}/tales/learned?taleId=${taleId}`
+    );
+    return response.data.data.isLearnedInfos;
   } catch (error) {
     throw error;
   }

src/components/learn/CreateQuiz.tsx

@@ -1,11 +1,26 @@
+import { createQuiz } from "@apis/learning";
 import LoadingScreen from "@components/common/spinner/LoadingScreen";
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 
 interface CreateQuizProps {
   languageTaleId: number;
   learningLevel: string;
 }
-const CreateQuiz = ({ languageTaleId, learningLevel }: CreateQuizProps) => {
-  console.log(languageTaleId, learningLevel);
+const CreateQuiz = (props: CreateQuizProps) => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const createData = async () => {
+      const response = await createQuiz({
+        languageTaleId: props.languageTaleId,
+        learningLevel: props.learningLevel,
+      });
+      if (response.result === "SUCCESS")
+        navigate(`/learnTale/${props.languageTaleId}`);
+    };
+    createData();
+  }, [props]);
+
   return (
     <>
       <LoadingScreen text="퀴즈" />;

src/components/learn/PreLearningQuestion.tsx

@@ -6,30 +6,67 @@ import NextBtn from "@components/common/NextBtn";
 import Dropdown from "@components/common/dropDown/Dropdown";
 import { nationElements } from "@utils/defaultData";
 import { useResult } from "@hooks/useResult";
-import { getLearningLevel } from "@apis/learning";
-import { useState } from "react";
+import { getLearnedHistory, getLearningLevel } from "@apis/learning";
+import { useEffect, useState } from "react";
 import CreateQuiz from "./CreateQuiz";
 import useSelectLevel from "@hooks/useSelectLevel";
 import SelectOptionList from "@common/selectOption/SelectOptionList";
 
 const PreLearningQuestion = () => {
   const location = useLocation();
   const navigate = useNavigate();
-  const languageTaleIds = location.state || {};
+  const { taleId } = location.state || {};
+
   const [selectLanguage, setSelectLanguage] = useResult();
   const { selectedLevel, setSelectedLevel, levelOptions } = useSelectLevel();
   const [step, setStep] = useState(0);
 
+  const [userLearnedInfo, setUserLearnedInfo] = useState<any[]>();
+
   const language = nationElements.find((e) => e.value === selectLanguage);
+  const [currLanguageTaleId, setCurrLanguageTaleId] = useState<number>();
 
-  const handleNextStep = async () => {
-    if (step === 0 && selectLanguage) {
-      const response = await getLearningLevel(selectLanguage as number);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const learnedHistory = await getLearnedHistory(taleId);
 
-      if (response.isLearned === "YES") {
-        setSelectedLevel(response.learningLevel);
-        if (response.isCreated === "YES") {
-          navigate(`/learnTale/${languageTaleIds[language?.value as number]}`);
+        const updatedLearnedInfo = await Promise.all(
+          learnedHistory.map(
+            async (info: {
+              languageId: number;
+              languageTaleId: number;
+              isLearned: "NO" | "YES";
+            }) => {
+              const level = await getLearningLevel(info.languageId);
+              return {
+                ...info,
+                learningLevel: level,
+              };
+            }
+          )
+        );
+
+        setUserLearnedInfo(updatedLearnedInfo);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, [taleId]);
+
+  const handleNextStep = () => {
+    const userInfo = userLearnedInfo?.find(
+      (info) => info.languageId === selectLanguage
+    );
+    setCurrLanguageTaleId(userInfo.languageTaleId);
+
+    if (step === 0 && selectLanguage) {
+      if (userInfo?.learningLevel !== null) {
+        setSelectedLevel(userInfo.learningLevel);
+        if (userInfo.isLearned === "YES") {
+          navigate(`/learnTale/${userInfo.languageTaleId}`);
         } else {
           setStep(2);
         }
@@ -71,14 +108,18 @@ const PreLearningQuestion = () => {
 
         {step === 2 && (
           <CreateQuiz
-            languageTaleId={languageTaleIds[language?.value as number]}
+            languageTaleId={currLanguageTaleId as number}
             learningLevel={selectedLevel as string}
           />
         )}
 
         {step !== 2 && (
           <NextBtn
-            isActive={selectLanguage ? true : false}
+            isActive={
+              (step === 0 && selectLanguage) || (step === 1 && selectedLevel)
+                ? true
+                : false
+            }
             text={step === 0 ? "다음" : "학습 시작"}
             handleBtn={handleNextStep}
           />

src/hooks/useOnboarding.ts

@@ -19,7 +19,6 @@ const useOnboarding = () => {
           age: Number(age),
         });
         if (!result) throw new Error("회원 등록 실패");
-        console.log("회원 등록 성공:", result);
       }
     } catch (error) {
       console.error("회원 등록 중 오류 발생:", error);

src/type/learning.d.ts

@@ -1,7 +1,6 @@
 export interface LearningInfoData {
-  taleId: number;
-  languageId: number;
-  learningLevel: "1000" | "2000" | "3000" | "4000" | "5000";
+  languageTaleId: number;
+  learningLevel: string
 }
 
 export interface QuizData {