From 30b524711612dd20893480c114b0de8cefba55c1 Mon Sep 17 00:00:00 2001
From: gominzip <ahaminji@naver.com>
Date: Tue, 27 Aug 2024 02:18:44 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=EA=B2=BD=EA=B3=A0=20=ED=9B=84=20?=
 =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=9D=B4=EB=8F=99,=20=EB=AF=B8=EB=94=94?=
 =?UTF-8?q?=EC=96=B4=EC=BF=BC=EB=A6=AC,=20=EA=B8=B0=EB=B3=B8=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/createTales.ts                         |  1 +
 .../homeRecentTales/HomeRecentTales.styled.ts   |  2 +-
 src/utils/defaultData.ts                        | 17 ++++++++++-------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/apis/createTales.ts b/src/apis/createTales.ts
index 4fd63e5..7baf890 100644
--- 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/home/homeRecentTales/HomeRecentTales.styled.ts b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
index c84d5fb..0e3ce92 100644
--- a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
+++ b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
@@ -47,7 +47,7 @@ export const Shelf = styled.img`
   @media (max-width: 710px) {
     width: 550px;
   }
-  @media (max-width: 450px) {
+  @media (max-width: 519px) {
     display: none;
   }
 `;
diff --git a/src/utils/defaultData.ts b/src/utils/defaultData.ts
index c393419..f5ca6d5 100644
--- 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[] = [

From 79f095f6cb4bcd1e6330dcaf9fc6e68e80c7bae1 Mon Sep 17 00:00:00 2001
From: gominzip <ahaminji@naver.com>
Date: Tue, 27 Aug 2024 03:01:13 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20?=
 =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=90=EB=9F=AC=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabBar/TabBar.tsx       |  2 +-
 src/components/learn/CreateQuiz.tsx           | 20 +++++++++-----
 src/components/learn/PreLearningQuestion.tsx  |  5 ++--
 .../createMain/SelectOption/InputImg.tsx      |  2 +-
 .../createMain/SelectOption/SelectOption.tsx  |  2 +-
 .../tales/createTale/CreateTale.tsx           |  9 +++++--
 src/components/tales/readTale/ReadTale.tsx    |  2 +-
 .../tales/selectKeyword/SelectKeyword.tsx     |  2 +-
 .../tales/taleDetail/TaleDetail.tsx           |  2 +-
 src/pages/TaleLearnPage.tsx                   |  7 ++---
 src/router.tsx                                | 26 +++++++++----------
 11 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/components/common/tabBar/TabBar.tsx b/src/components/common/tabBar/TabBar.tsx
index e1d5843..9f76974 100644
--- 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
index e13abca..9d9b28d 100644
--- 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
index 96493d8..0fa157b 100644
--- 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;
-`;
\ No newline at end of file
+`;
diff --git a/src/components/tales/createMain/SelectOption/InputImg.tsx b/src/components/tales/createMain/SelectOption/InputImg.tsx
index 21b839d..8be7ed0 100644
--- 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
index 8b45f8d..5e78877 100644
--- 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
index b33a86c..b32437c 100644
--- 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
index f1b08d2..49fc5dc 100644
--- 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
index 5c7413a..ddf81f4 100644
--- 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
index 0eb6e65..0a65216 100644
--- 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
index 359aa09..6110c3a 100644
--- 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
index 3530219..7013b83 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -23,6 +23,10 @@ const router = createBrowserRouter([
     path: "/login",
     element: <LoginPage />,
   },
+  {
+    path: "/kakao",
+    element: <KakaoRedirect />,
+  },
   {
     path: "/onboarding",
     element: <OnboardingPage />,
@@ -36,27 +40,23 @@ const router = createBrowserRouter([
     element: <MoreRecentTales />,
   },
   {
-    path: "/createTale",
-    element: <CreateMainPage />,
-  },
-  {
-    path: "/kakao",
-    element: <KakaoRedirect />,
+    path: "/learnTale",
+    element: <LearningPage />,
   },
   {
-    path: "/learning",
-    element: <LearningPage />,
+    path: "/createTale",
+    element: <CreateMainPage />,
   },
   {
-    path: "/selectKeyword",
+    path: "/createTale/keyword",
     element: <SelectKeywordPage />,
   },
   {
-    path: "/taleDetail",
+    path: "/createTale/details",
     element: <TaleDetailPage />,
   },
   {
-    path: "/create",
+    path: "/createTale/generate",
     element: <CreateTalePage />,
   },
   {
@@ -64,11 +64,11 @@ const router = createBrowserRouter([
     element: <ReadTalePage />,
   },
   {
-    path: "/learnTale",
+    path: "/learnTale/pre",
     element: <PreLearningQuestionPage />,
   },
   {
-    path: "/learnTale/:id",
+    path: "/learnTale/quiz",
     element: <TaleLearnPage />,
   },
 ]);

From e4da4bf49b9456b6456aa4c82b03765a87644b90 Mon Sep 17 00:00:00 2001
From: gominzip <ahaminji@naver.com>
Date: Tue, 27 Aug 2024 03:18:47 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=ED=86=A0=ED=81=B0=20=EC=97=AC?=
 =?UTF-8?q?=EB=B6=80=20=ED=99=95=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router.tsx | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/router.tsx b/src/router.tsx
index 7013b83..1aee51a 100644
--- 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([
   {
@@ -29,47 +30,47 @@ const router = createBrowserRouter([
   },
   {
     path: "/onboarding",
-    element: <OnboardingPage />,
+    element: <PrivateRoute element={<OnboardingPage />} />,
   },
   {
     path: "/home",
-    element: <HomePage />,
+    element: <PrivateRoute element={<HomePage />} />,
   },
   {
     path: "/more",
-    element: <MoreRecentTales />,
+    element: <PrivateRoute element={<MoreRecentTales />} />,
   },
   {
     path: "/learnTale",
-    element: <LearningPage />,
+    element: <PrivateRoute element={<LearningPage />} />,
   },
   {
     path: "/createTale",
-    element: <CreateMainPage />,
+    element: <PrivateRoute element={<CreateMainPage />} />,
   },
   {
     path: "/createTale/keyword",
-    element: <SelectKeywordPage />,
+    element: <PrivateRoute element={<SelectKeywordPage />} />,
   },
   {
     path: "/createTale/details",
-    element: <TaleDetailPage />,
+    element: <PrivateRoute element={<TaleDetailPage />} />,
   },
   {
     path: "/createTale/generate",
-    element: <CreateTalePage />,
+    element: <PrivateRoute element={<CreateTalePage />} />,
   },
   {
     path: "/readTale",
-    element: <ReadTalePage />,
+    element: <PrivateRoute element={<ReadTalePage />} />,
   },
   {
     path: "/learnTale/pre",
-    element: <PreLearningQuestionPage />,
+    element: <PrivateRoute element={<PreLearningQuestionPage />} />,
   },
   {
     path: "/learnTale/quiz",
-    element: <TaleLearnPage />,
+    element: <PrivateRoute element={<TaleLearnPage />} />,
   },
 ]);