From efe57a0ada9b665790e6820325ecbc1e1ffdcb13 Mon Sep 17 00:00:00 2001 From: gominzip Date: Tue, 27 Aug 2024 13:51:59 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=20=EA=B5=AC=EC=A1=B0?= =?UTF-8?q?=20=ED=99=95=EC=9E=A5=EC=84=B1=20=EC=9E=88=EA=B2=8C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20api=20=EC=97=B0=EA=B2=B0=20(#45)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/home/homeRecentTales/Card.tsx | 40 +++++++++++++++++-- .../home/homeRecentTales/HomeRecentTales.tsx | 3 +- .../home/homeRecentTales/MoreRecentTales.tsx | 11 ++--- .../learn/learnMain/learned/Learned.tsx | 2 +- .../learn/learnMain/learned/LearnedMore.tsx | 4 +- .../learn/learnMain/unLearned/UnLearned.tsx | 2 +- .../learnMain/unLearned/UnLearnedMore.tsx | 14 +++---- src/components/tales/readTale/ReadTale.tsx | 2 +- src/pages/TaleLearnPage.tsx | 2 + src/type/card.d.ts | 7 ++-- 10 files changed, 60 insertions(+), 27 deletions(-) diff --git a/src/components/home/homeRecentTales/Card.tsx b/src/components/home/homeRecentTales/Card.tsx index 64b5710..facf032 100644 --- 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 ( <> { + goTaleRead(props.taleId); + }} height={height} backgroundColor1={backgroundColor1} backgroundColor2={backgroundColor2} @@ -34,10 +54,24 @@ const Card = (props: CardProps) => { props.point ? (
{props.point}
- + ) : ( - + ) ) : ( diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx index d20b82a..b096246 100644 --- 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} /> ))} diff --git a/src/components/home/homeRecentTales/MoreRecentTales.tsx b/src/components/home/homeRecentTales/MoreRecentTales.tsx index 2cb3489..5d5a2a7 100644 --- 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 ( <>
@@ -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 && ( @@ -52,7 +47,7 @@ const MoreRecentTales = () => { taleId={tale.taleId} title={tale.title} createdAt={tale.createdAt} - readFunction={() => goRead(tale)} + languageTaleId={tale.languageTaleId} /> ))} diff --git a/src/components/learn/learnMain/learned/Learned.tsx b/src/components/learn/learnMain/learned/Learned.tsx index f7aee83..51a83bf 100644 --- 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()} /> ))} diff --git a/src/components/learn/learnMain/learned/LearnedMore.tsx b/src/components/learn/learnMain/learned/LearnedMore.tsx index 03a6114..715cf68 100644 --- a/src/components/learn/learnMain/learned/LearnedMore.tsx +++ b/src/components/learn/learnMain/learned/LearnedMore.tsx @@ -30,11 +30,11 @@ const LearnedMore = () => { <> goRead(tale)} /> {(index + 1) % 2 === 0 && index !== learnedSlice.length - 1 && ( @@ -50,11 +50,11 @@ const LearnedMore = () => { {learnedGroup.map((learned: LearnedProps) => ( goRead(learned)} /> ))} diff --git a/src/components/learn/learnMain/unLearned/UnLearned.tsx b/src/components/learn/learnMain/unLearned/UnLearned.tsx index 6c5fe38..96bf8fa 100644 --- 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={} /> ))} diff --git a/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx b/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx index 8109343..51cb339 100644 --- 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 = () => { ))} ) : ( - chunkedTales.map((learnedGroup) => ( + chunkedTales.map((unLearnedGroup) => ( <> - {learnedGroup.map((learned: UnLearnedProps) => ( + {unLearnedGroup.map((unLearned: UnLearnedProps) => ( ))} diff --git a/src/components/tales/readTale/ReadTale.tsx b/src/components/tales/readTale/ReadTale.tsx index 49fc5dc..dda021d 100644 --- 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(null); const [data, setData] = useState(); const [selectedIndex, setSelectedIndex] = useState(null); diff --git a/src/pages/TaleLearnPage.tsx b/src/pages/TaleLearnPage.tsx index 6110c3a..d59e8f6 100644 --- 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 index 1501649..0acf91a 100644 --- 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: {