Merge pull request #52 from GlowTales/feat/#47

[FEAT] 라우팅 경로 수정 및 토큰 관리 세팅
GlowTales · Aug 26, 2024 · a4942d8 · a4942d8
2 parents d19e4e5 + e4da4bf
commit a4942d8
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 48 deletions.
diff --git a/src/apis/createTales.ts b/src/apis/createTales.ts
@@ -25,6 +25,7 @@ export const createKeyword = async (body: FormData): Promise<string[]> => {
     alert(
       "이미지 화질이 안좋거나, 추출된 키워드가 없습니다. 다시 이미지를 업로드하세요!"
     );
+    window.location.href = "/createTale";
     throw error;
   }
 };

diff --git a/src/components/common/tabBar/TabBar.tsx b/src/components/common/tabBar/TabBar.tsx
@@ -13,7 +13,7 @@ const TabBar = () => {
       label: "동화만들기",
       path: "/createTale",
     },
-    { id: 3, icon: "/learnIcon.png", label: "학습하기", path: "/learning" },
+    { id: 3, icon: "/learnIcon.png", label: "학습하기", path: "/learnTale" },
   ];
 
   const selectedTab =

diff --git a/src/components/learn/CreateQuiz.tsx b/src/components/learn/CreateQuiz.tsx
@@ -6,17 +6,25 @@ import { useNavigate } from "react-router-dom";
 interface CreateQuizProps {
   languageTaleId: number;
   learningLevel: string;
+  taleId: number;
 }
 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}`);
+      try {
+        const response = await createQuiz({
+          languageTaleId: props.languageTaleId,
+          learningLevel: props.learningLevel,
+        });
+        if (response.result === "SUCCESS")
+          navigate(`/learnTale/quiz`, { state: props.languageTaleId });
+        else throw new Error();
+      } catch (error) {
+        alert("퀴즈 생성 중 에러가 발생했습니다. 다시 시도해주세요.");
+        const response = { taleId: props.taleId };
+        navigate(`/readTale`, { state: { response } });
+      }
     };
     createData();
   }, [props]);

diff --git a/src/components/learn/PreLearningQuestion.tsx b/src/components/learn/PreLearningQuestion.tsx
@@ -67,7 +67,7 @@ const PreLearningQuestion = () => {
       if (userInfo?.learningLevel !== null) {
         setSelectedLevel(userInfo.learningLevel);
         if (userInfo.isLearned === "YES") {
-          navigate(`/learnTale/${userInfo.languageTaleId}`);
+          navigate(`/learnTale/quiz`, { state: userInfo.languageTaleId });
         } else {
           setStep(2);
         }
@@ -111,6 +111,7 @@ const PreLearningQuestion = () => {
           <CreateQuiz
             languageTaleId={currLanguageTaleId as number}
             learningLevel={selectedLevel as string}
+            taleId={taleId}
           />
         )}
 
@@ -142,4 +143,4 @@ const Wrapper = styled.div`
   overflow: scroll;
   height: fit-content;
   padding-bottom: 2rem;
-`;
+`;
diff --git a/src/components/tales/createMain/SelectOption/InputImg.tsx b/src/components/tales/createMain/SelectOption/InputImg.tsx
@@ -14,7 +14,7 @@ const InputImg = ({ setIsLoading }: InputImgProps) => {
       formData.append("file", file);
       if (setIsLoading) setIsLoading(true);
       const keywords: string[] = await createKeyword(formData);
-      navigate("/selectKeyword", { state: { keywords } });
+      navigate("/createTale/keyword", { state: { keywords } });
     }
   };
   return (

diff --git a/src/components/tales/createMain/SelectOption/SelectOption.tsx b/src/components/tales/createMain/SelectOption/SelectOption.tsx
@@ -24,7 +24,7 @@ const SelectOption = ({ text, imgURL, setIsLoading }: SelectOptionProps) => {
       <S.Wrapper
         $colorSet={colorSets.lemonYellow}
         onClick={() => {
-          navigate("/taleDetail");
+          navigate("/createTale/details");
         }}
       >
         <S.ImgBox>

diff --git a/src/components/tales/createTale/CreateTale.tsx b/src/components/tales/createTale/CreateTale.tsx
@@ -11,8 +11,13 @@ const CreateTale = () => {
 
   useEffect(() => {
     const createData = async () => {
-      const response = await createTale(requestData);
-      navigate(`/readTale`, { state: { response } });
+      try {
+        const response = await createTale(requestData);
+        navigate(`/readTale`, { state: { response } });
+      } catch (error) {
+        alert("동화 생성 중 에러가 발생했습니다. 다시 시도해주세요.");
+        navigate(`/createTale`);
+      }
     };
     createData();
   }, [requestData]);

diff --git a/src/components/tales/readTale/ReadTale.tsx b/src/components/tales/readTale/ReadTale.tsx
@@ -102,7 +102,7 @@ const ReadTale = () => {
                 isActive={true}
                 text="학습하기"
                 handleBtn={() => {
-                  navigate(`/learnTale`, {
+                  navigate(`/learnTale/pre`, {
                     state: { taleId: response.taleId },
                   });
                 }}

diff --git a/src/components/tales/selectKeyword/SelectKeyword.tsx b/src/components/tales/selectKeyword/SelectKeyword.tsx
@@ -42,7 +42,7 @@ const SelectKeyword = () => {
     const selectKeywords = selectedKeywordIndices.map(
       (index) => keywords[index]
     );
-    navigate("/taleDetail", { state: { selectKeywords } });
+    navigate("/createTale/details", { state: { selectKeywords } });
   };
   return (
     <>

diff --git a/src/components/tales/taleDetail/TaleDetail.tsx b/src/components/tales/taleDetail/TaleDetail.tsx
@@ -73,7 +73,7 @@ const TaleDetail = () => {
           : [getRandomElement(charElements).value],
       contents: contents || getRandomElement(contentElements).value,
     };
-    navigate("/create", { state: { requestData } });
+    navigate("/createTale/generate", { state: { requestData } });
   };
 
   return (

diff --git a/src/pages/TaleLearnPage.tsx b/src/pages/TaleLearnPage.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { getQuizAndAnswer } from "@apis/learning";
 import TaleLearn from "@components/learn/TaleLearn";
 import styled from "styled-components";
 
 const TaleLearnPage = () => {
   const [quizData, setQuizData] = useState();
-  const { id } = useParams();
+  const location = useLocation();
+  const id = location.state || {};
 
   useEffect(() => {
     const getQuiz = async (taleId: number) => {
@@ -22,7 +23,7 @@ const TaleLearnPage = () => {
       }
     };
 
-    if (id) getQuiz(Number(id));
+    if (id) getQuiz(id);
   }, [id]);
 
   return (

diff --git a/src/router.tsx b/src/router.tsx
@@ -13,6 +13,7 @@ import CreateTalePage from "@pages/CreateTalePage";
 import TaleLearnPage from "@pages/TaleLearnPage";
 import PreLearningQuestionPage from "@pages/PreLearningQuestionPage";
 import MoreRecentTales from "@components/home/homeRecentTales/MoreRecentTales";
+import PrivateRoute from "@utils/PrivateRoute";
 
 const router = createBrowserRouter([
   {
@@ -23,53 +24,53 @@ const router = createBrowserRouter([
     path: "/login",
     element: <LoginPage />,
   },
+  {
+    path: "/kakao",
+    element: <KakaoRedirect />,
+  },
   {
     path: "/onboarding",
-    element: <OnboardingPage />,
+    element: <PrivateRoute element={<OnboardingPage />} />,
   },
   {
     path: "/home",
-    element: <HomePage />,
+    element: <PrivateRoute element={<HomePage />} />,
   },
   {
     path: "/more",
-    element: <MoreRecentTales />,
-  },
-  {
-    path: "/createTale",
-    element: <CreateMainPage />,
+    element: <PrivateRoute element={<MoreRecentTales />} />,
   },
   {
-    path: "/kakao",
-    element: <KakaoRedirect />,
+    path: "/learnTale",
+    element: <PrivateRoute element={<LearningPage />} />,
   },
   {
-    path: "/learning",
-    element: <LearningPage />,
+    path: "/createTale",
+    element: <PrivateRoute element={<CreateMainPage />} />,
   },
   {
-    path: "/selectKeyword",
-    element: <SelectKeywordPage />,
+    path: "/createTale/keyword",
+    element: <PrivateRoute element={<SelectKeywordPage />} />,
   },
   {
-    path: "/taleDetail",
-    element: <TaleDetailPage />,
+    path: "/createTale/details",
+    element: <PrivateRoute element={<TaleDetailPage />} />,
   },
   {
-    path: "/create",
-    element: <CreateTalePage />,
+    path: "/createTale/generate",
+    element: <PrivateRoute element={<CreateTalePage />} />,
   },
   {
     path: "/readTale",
-    element: <ReadTalePage />,
+    element: <PrivateRoute element={<ReadTalePage />} />,
   },
   {
-    path: "/learnTale",
-    element: <PreLearningQuestionPage />,
+    path: "/learnTale/pre",
+    element: <PrivateRoute element={<PreLearningQuestionPage />} />,
   },
   {
-    path: "/learnTale/:id",
-    element: <TaleLearnPage />,
+    path: "/learnTale/quiz",
+    element: <PrivateRoute element={<TaleLearnPage />} />,
   },
 ]);
 

diff --git a/src/utils/defaultData.ts b/src/utils/defaultData.ts
@@ -1,12 +1,7 @@
 import { DropdownElement } from "@type/dropdown";
 import { ColorSet } from "@type/selectList";
 
-export const commonLanguageElements: DropdownElement[] = [
-  {
-    imgURL: `/korea.png`,
-    text: "한국어",
-    value: 2,
-  },
+export const baseLanguageElements: DropdownElement[] = [
   {
     imgURL: `/america.png`,
     text: "영어",
@@ -23,13 +18,21 @@ export const commonLanguageElements: DropdownElement[] = [
     value: 4,
   },
 ];
+export const commonLanguageElements: DropdownElement[] = [
+  {
+    imgURL: `/korea.png`,
+    text: "한국어",
+    value: 2,
+  },
+  ...baseLanguageElements,
+];
 
 export const nationElements: DropdownElement[] = [
   {
     text: "선택해주세요",
     value: null,
   },
-  ...commonLanguageElements,
+  ...baseLanguageElements,
 ];
 
 export const moodElements: DropdownElement[] = [
-Original file line number
+Diff line change
@@ Expand Up @@
         alert(
           "이미지 화질이 안좋거나, 추출된 키워드가 없습니다. 다시 이미지를 업로드하세요!"
         );
+        window.location.href = "/createTale";
         throw error;
       }
     };
@@ Expand Down @@