feat: 카드 구조 확장성 있게 변경 및 api 연결 (#45)

GlowTales · Aug 27, 2024 · efe57a0 · efe57a0
1 parent 23e933e
commit efe57a0
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 27 deletions.
diff --git a/src/components/home/homeRecentTales/Card.tsx b/src/components/home/homeRecentTales/Card.tsx
@@ -1,5 +1,6 @@
 import { CardProps } from "@type/card";
 import * as S from "./Card.styled";
+import { useNavigate } from "react-router-dom";
 
 const pairs = [
   ["#FFC300", "#FFE249", "250px", "/taleGraphic1.png"],
@@ -17,10 +18,29 @@ const Card = (props: CardProps) => {
   const [backgroundColor1, backgroundColor2, height, imgSrc] =
     getRandomColorPair();
 
+  const navigate = useNavigate();
+
+  const goTaleRead = (taleId: number) => {
+    navigate(`/readTale`, { state: { response: { taleId: taleId } } });
+  };
+
+  const goTaleLearn = (taleId: number) => {
+    console.log("이동");
+    navigate(`/learnTale/pre`, { state: { taleId } });
+  };
+
+  const goTaleQuiz = (languageTaleId: number) => {
+    console.log("이동");
+    console.log(languageTaleId);
+    navigate(`/learnTale/quiz`, { state: languageTaleId });
+  };
+
   return (
     <>
       <S.CardContainer
-        onClick={props.readFunction}
+        onClick={() => {
+          goTaleRead(props.taleId);
+        }}
         height={height}
         backgroundColor1={backgroundColor1}
         backgroundColor2={backgroundColor2}
@@ -34,10 +54,24 @@ const Card = (props: CardProps) => {
             props.point ? (
               <S.BtnWrapper>
                 <div>{props.point}</div>
-                <button onClick={props.learnFunction}>{props.btnText}</button>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goTaleQuiz(props.languageTaleId);
+                  }}
+                >
+                  {props.btnText}
+                </button>
               </S.BtnWrapper>
             ) : (
-              <button onClick={props.unLearnedFunction}>{props.btnText}</button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  goTaleLearn(props.languageTaleId);
+                }}
+              >
+                {props.btnText}
+              </button>
             )
           ) : (
             <S.CardImg src={imgSrc} />

diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -56,6 +56,7 @@ const HomeRecentTales = () => {
                 taleId={tale.taleId}
                 title={tale.title}
                 createdAt={tale.createdAt}
+                languageTaleId={tale.taleId}
                 readFunction={() => goRead(tale)}
               />
               {(index + 1) % 2 === 0 && index !== sliceTales.length - 1 && (
@@ -73,7 +74,7 @@ const HomeRecentTales = () => {
                   taleId={tale.taleId}
                   title={tale.title}
                   createdAt={tale.createdAt}
-                  readFunction={() => goRead(tale)}
+                  languageTaleId={tale.taleId}
                 />
               ))}
             </ItemWrapper>

diff --git a/src/components/home/homeRecentTales/MoreRecentTales.tsx b/src/components/home/homeRecentTales/MoreRecentTales.tsx
@@ -1,5 +1,5 @@
 import Header from "@components/common/header/Header";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import * as S from "./HomeRecentTales.styled";
 import Card from "./Card";
 import { CardProps } from "@type/card";
@@ -11,17 +11,12 @@ const MoreRecentTales = () => {
 
   const location = useLocation();
   const { allTales } = location.state || { allTales: [] };
-  const navigate = useNavigate();
 
   const chunkedTales: CardProps[][] = [];
   for (let i = 0; i < allTales.length; i += 3) {
     chunkedTales.push(allTales.slice(i, i + 3));
   }
 
-  const goRead = (response: CardProps) => {
-    navigate(`/readTale`, { state: { response } });
-  };
-
   return (
     <>
       <Header text="최근 생성한 동화" />
@@ -35,7 +30,7 @@ const MoreRecentTales = () => {
                     taleId={tale.taleId}
                     title={tale.title}
                     createdAt={tale.createdAt}
-                    readFunction={() => goRead(tale)}
+                    languageTaleId={tale.languageTaleId}
                   />
                   {(index + 1) % 2 === 0 && index !== allTales.length - 1 && (
                     <Shelf src="/shelf.png" key={`shelf-${index}`} />
@@ -52,7 +47,7 @@ const MoreRecentTales = () => {
                       taleId={tale.taleId}
                       title={tale.title}
                       createdAt={tale.createdAt}
-                      readFunction={() => goRead(tale)}
+                      languageTaleId={tale.languageTaleId}
                     />
                   ))}
                   <Shelf src="/shelf.png" />

diff --git a/src/components/learn/learnMain/learned/Learned.tsx b/src/components/learn/learnMain/learned/Learned.tsx
@@ -41,9 +41,9 @@ const Learned = () => {
             taleId={learned.tale_id}
             title={learned.languageTale.title}
             createdAt={learned.createdAt}
+            languageTaleId={learned.languageTale.id}
             point={"4/10"}
             btnText="복습하기"
-            // readFunction={() => handleMoreClick()}
           />
         ))}
       </ItemWrapper>

diff --git a/src/components/learn/learnMain/learned/LearnedMore.tsx b/src/components/learn/learnMain/learned/LearnedMore.tsx
@@ -30,11 +30,11 @@ const LearnedMore = () => {
                 <>
                   <Card
                     taleId={learned.tale_id}
+                    languageTaleId={learned.languageTale.id}
                     title={learned.languageTale.title}
                     createdAt={learned.createdAt}
                     point={"4/10"}
                     btnText="복습하기"
-                    // readFunction={() => goRead(tale)}
                   />
                   {(index + 1) % 2 === 0 &&
                     index !== learnedSlice.length - 1 && (
@@ -50,11 +50,11 @@ const LearnedMore = () => {
                   {learnedGroup.map((learned: LearnedProps) => (
                     <Card
                       taleId={learned.tale_id}
+                      languageTaleId={learned.languageTale.id}
                       title={learned.languageTale.title}
                       createdAt={learned.createdAt}
                       point={"4/10"}
                       btnText="복습하기"
-                      //   readFunction={() => goRead(learned)}
                     />
                   ))}
                 </ItemWrapper>

diff --git a/src/components/learn/learnMain/unLearned/UnLearned.tsx b/src/components/learn/learnMain/unLearned/UnLearned.tsx
@@ -41,8 +41,8 @@ const UnLearned = () => {
             taleId={unLearned.tale_id}
             title={unLearned.languageTale.title}
             createdAt={unLearned.createdAt}
+            languageTaleId={unLearned.languageTale.id}
             btnText="학습하기✏️"
-            // readFunction={}
           />
         ))}
       </ItemWrapper>

diff --git a/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx b/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx
@@ -32,8 +32,8 @@ const UnLearnedMore = () => {
                     taleId={unLearned.tale_id}
                     title={unLearned.languageTale.title}
                     createdAt={unLearned.createdAt}
+                    languageTaleId={unLearned.languageTale.id}
                     btnText="학습하기✏️"
-                    // readFunction={() => goRead(tale)}
                   />
                   {(index + 1) % 2 === 0 &&
                     index !== unLearnedSlice.length - 1 && (
@@ -43,16 +43,16 @@ const UnLearnedMore = () => {
               ))}
             </ItemWrapper>
           ) : (
-            chunkedTales.map((learnedGroup) => (
+            chunkedTales.map((unLearnedGroup) => (
               <>
                 <ItemWrapper>
-                  {learnedGroup.map((learned: UnLearnedProps) => (
+                  {unLearnedGroup.map((unLearned: UnLearnedProps) => (
                     <Card
-                      taleId={learned.tale_id}
-                      title={learned.languageTale.title}
-                      createdAt={learned.createdAt}
+                      taleId={unLearned.tale_id}
+                      title={unLearned.languageTale.title}
+                      createdAt={unLearned.createdAt}
+                      languageTaleId={unLearned.languageTale.id}
                       btnText="학습하기✏️"
-                      //   readFunction={}
                     />
                   ))}
                 </ItemWrapper>

diff --git a/src/components/tales/readTale/ReadTale.tsx b/src/components/tales/readTale/ReadTale.tsx
@@ -10,10 +10,10 @@ import { ResponseTaleData } from "@type/createTale";
 import { speakText, toggleSpeech } from "@utils/speechUtil";
 
 const ReadTale = () => {
+
   const location = useLocation();
   const { response } = location.state || {};
   const navigate = useNavigate();
-
   const [language, setLanguage] = useState<string | number | null>(null);
   const [data, setData] = useState<ResponseTaleData>();
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);

diff --git a/src/pages/TaleLearnPage.tsx b/src/pages/TaleLearnPage.tsx
@@ -9,6 +9,8 @@ const TaleLearnPage = () => {
   const location = useLocation();
   const id = location.state || {};
 
+  console.log(id);
+
   useEffect(() => {
     const getQuiz = async (taleId: number) => {
       const response = await getQuizAndAnswer(taleId);

diff --git a/src/type/card.d.ts b/src/type/card.d.ts
@@ -5,8 +5,9 @@ export interface CardContainerProps {
 }
 
 export interface CardProps {
-  taleId: string;
+  taleId: number;
   title: string;
+  languageTaleId: number;
   createdAt: string;
   btnText?: string;
   point?: string;
@@ -21,7 +22,7 @@ export interface WordProps {
 }
 
 export interface UnLearnedProps {
-  tale_id: string;
+  tale_id: number;
   createdAt: string;
   languageTale: {
     title: string;
@@ -31,7 +32,7 @@ export interface UnLearnedProps {
 }
 
 export interface LearnedProps {
-  tale_id: string;
+  tale_id: number;
   createdAt: string;
   point?: string;
   languageTale: {