[FEAT] 메인 api 연결 및 카드 구조 변경

src/Layout.tsx

@@ -0,0 +1,13 @@
+import ScrollToTop from "@utils/ScrollToTop";
+import { Outlet } from "react-router-dom";
+
+const Layout = () => {
+  return (
+    <>
+      <ScrollToTop />
+      <Outlet />
+    </>
+  );
+};
+
+export default Layout;

src/components/home/homeRecentTales/Card.styled.ts → src/components/common/card/Card.styled.ts

@@ -13,6 +13,11 @@ export const CardContainer = styled.div<CardContainerProps>`
   border-radius: 8px;
   margin: 5px;
   box-sizing: border-box;
+  @media (max-width: 466px) {
+    width: 100%;
+    height: 150px;
+    overflow: hidden;
+  }
 `;
 
 export const CardWrapper = styled.div`
@@ -35,13 +40,19 @@ export const CardWrapper = styled.div`
     margin-bottom: 2rem;
     cursor: pointer;
   }
+  @media (max-width: 466px) {
+    margin-left: 10%;
+  }
 `;
 
 export const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 0.5rem;
   gap: 1rem;
+  @media (max-width: 466px) {
+    margin-bottom: 1rem;
+  }
 `;
 
 export const CardTitle = styled.div`

src/components/home/homeRecentTales/Card.tsx → src/components/common/card/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,26 @@ const Card = (props: CardProps) => {
   const [backgroundColor1, backgroundColor2, height, imgSrc] =
     getRandomColorPair();
 
+  const navigate = useNavigate();
+
+  const goTaleRead = () => {
+    navigate(`/readTale`, { state: { response: { taleId: props.taleId } } });
+  };
+
+  const goTaleLearn = () => {
+    navigate(`/learnTale/pre`, { state: { taleId: props.taleId } });
+  };
+
+  const goTaleQuiz = () => {
+    navigate(`/learnTale/quiz`, { state: props.languageTaleId });
+  };
+
   return (
     <>
       <S.CardContainer
-        onClick={props.readFunction}
+        onClick={() => {
+          goTaleRead();
+        }}
         height={height}
         backgroundColor1={backgroundColor1}
         backgroundColor2={backgroundColor2}
@@ -31,13 +48,27 @@ const Card = (props: CardProps) => {
             <S.CardCreatedAt>{props.createdAt}</S.CardCreatedAt>
           </S.TitleWrapper>
           {props.btnText ? (
-            props.point ? (
+            props.firstQuizCount !== undefined ? (
               <S.BtnWrapper>
-                <div>{props.point}</div>
-                <button onClick={props.learnFunction}>{props.btnText}</button>
+                <div>{props.firstQuizCount}/10</div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    goTaleQuiz();
+                  }}
+                >
+                  {props.btnText}
+                </button>
               </S.BtnWrapper>
             ) : (
-              <button onClick={props.unLearnedFunction}>{props.btnText}</button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  goTaleLearn();
+                }}
+              >
+                {props.btnText}
+              </button>
             )
           ) : (
             <S.CardImg src={imgSrc} />

src/components/common/common.styled.ts

@@ -86,7 +86,10 @@ export const Shelf = styled.img`
   @media (max-width: 710px) {
     width: 520px;
   }
-  @media (max-width: 519px) {
+  @media (max-width: 550px) {
+    width: 420px;
+  }
+  @media (max-width: 466px) {
     display: none;
   }
 `;

src/components/learn/TaleLearn.tsx

@@ -2,21 +2,21 @@ import FinishScreen from "@components/common/FinishScreen";
 import NextBtn from "@components/common/NextBtn";
 import ProgressBar from "@components/common/progressBar/ProgressBar";
 import useLearning from "@hooks/useLearning";
-import ChoiceQuiz from "./ChoiceQuiz";
-import EssayQuiz from "./EssayQuiz";
-import SentenceQuiz from "./SentenceQuiz";
+import ChoiceQuiz from "./quiz/ChoiceQuiz";
+import SentenceQuiz from "./quiz/SentenceQuiz";
 import {
   EssayQuestions,
   MultipleChoices,
   QuizData,
   SentenceArrangements,
 } from "@type/learning";
 import { QUIZ_STAGES, QuizType } from "@utils/constants/QuizStage";
-import SpeakPractice from "./SpeakPractice";
+import SpeakPractice from "./quiz/SpeakPractice";
 import { useEffect } from "react";
 import { postAnswerCount } from "@apis/learning";
 import Header from "@components/common/header/Header";
 import styled from "styled-components";
+import EssayQuiz from "./quiz/EssayQuiz";
 
 interface TaleLearnProps {
   quizData?: QuizData;

src/components/learn/PreLearningQuestion.tsx → src/components/learn/pre/PreLearningQuestion.tsx

@@ -1,4 +1,4 @@
-import * as S from "./learn.styled";
+import * as S from "../learn.styled";
 import Header from "@common/header/Header";
 import { useLocation, useNavigate } from "react-router-dom";
 import ProgressBar from "@components/common/progressBar/ProgressBar";
@@ -8,10 +8,10 @@ import { nationElements } from "@utils/defaultData";
 import { useResult } from "@hooks/useResult";
 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";
 import styled from "styled-components";
+import CreateQuiz from "./CreateQuiz";
 
 const PreLearningQuestion = () => {
   const location = useLocation();

src/components/learn/ChoiceQuiz.tsx → src/components/learn/quiz/ChoiceQuiz.tsx

@@ -1,5 +1,5 @@
 import SelectOptionList from "@components/common/selectOption/SelectOptionList";
-import * as S from "./learn.styled";
+import * as S from "../learn.styled";
 import { useEffect, useState } from "react";
 import { ChoiceQuizProps } from "@type/learning";
 import { shuffleArray } from "@utils/learnUtil";

src/components/learn/EssayQuiz.tsx → src/components/learn/quiz/EssayQuiz.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import * as S from "./learn.styled";
+import * as S from "../learn.styled";
 import SelectBtn from "@components/common/selectOption/SelectBtn";
 import { EssayQuizProps } from "@type/learning";
 

src/components/learn/SentenceQuiz.tsx → src/components/learn/quiz/SentenceQuiz.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import * as S from "./learn.styled";
+import * as S from "../learn.styled";
 import { SentenceQuizProps } from "@type/learning";
 import { shuffleArray } from "@utils/learnUtil";
 

src/components/learn/SpeakPractice.tsx → src/components/learn/quiz/SpeakPractice.tsx

@@ -1,6 +1,6 @@
 import { SpeakPracticeProps } from "@type/learning";
 import { speakText } from "@utils/speechUtil";
-import * as S from "./speakPractice.styled";
+import * as S from "../speakPractice.styled";
 
 const SpeakPractice = ({ data }: { data: SpeakPracticeProps }) => {
   return (

src/components/login/Login.tsx

@@ -10,8 +10,8 @@ const Login = () => {
   return (
     <CommonWrapper>
       <S.Title>
-        <div>메인 소개 멘트 어쩌구</div>
-        <div>글로우테일로 동화를 어쩌구</div>
+        <div>글로우테일에서 동화를 만들고,</div>
+        <div>퀴즈로 학습의 재미를 더해보세요!</div>
       </S.Title>
       <S.Image src="/loginGraphic.png" />
       <S.LoginBtn>

src/components/home/Home.tsx → src/components/main/homeMain/Home.tsx

@@ -1,8 +1,8 @@
 import TabBar from "@components/common/tabBar/TabBar";
-import HomeHeader from "./homeHeader/HomeHeader";
 import * as S from "./Home.styled";
-import HomeStatus from "./homeStatus/HomeStatus";
 import HomeRecentTales from "./homeRecentTales/HomeRecentTales";
+import HomeStatus from "./homeStatus/HomeStatus";
+import HomeHeader from "./homeHeader/HomeHeader";
 // import Modal from "@components/common/modal/Modal";
 
 const Home = () => {

src/components/home/homeRecentTales/HomeRecentTales.tsx → src/components/main/homeMain/homeRecentTales/HomeRecentTales.tsx

@@ -4,13 +4,13 @@ import {
   ItemWrapper,
   Shelf,
 } from "@components/common/common.styled";
-import Card from "./Card";
 import * as S from "./HomeRecentTales.styled";
 import { getRecentTale } from "@apis/createTales";
 import { useEffect, useState } from "react";
 import { CardProps } from "@type/card";
 import { useNavigate } from "react-router-dom";
 import { useMediaQuery } from "react-responsive";
+import Card from "@components/common/card/Card";
 
 const HomeRecentTales = () => {
   const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
@@ -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>

src/components/home/homeRecentTales/MoreRecentTales.tsx → src/components/main/homeMain/homeRecentTales/MoreRecentTales.tsx

@@ -1,27 +1,22 @@
 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";
 import { useMediaQuery } from "react-responsive";
 import { ItemWrapper, Shelf } from "@components/common/common.styled";
+import Card from "@components/common/card/Card";
 
 const MoreRecentTales = () => {
   const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
 
   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" />

src/components/learn/learnMain/learned/Learned.tsx → src/components/main/learnMain/learned/Learned.tsx

@@ -1,32 +1,34 @@
 import { getLearnedTales } from "@apis/home";
+import Card from "@components/common/card/Card";
 import {
   CommonTitle,
   CommonTitleWrapper,
   ItemWrapper,
 } from "@components/common/common.styled";
-import Card from "@components/home/homeRecentTales/Card";
 import { LearnedProps } from "@type/card";
 
 import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router-dom";
 
 const Learned = () => {
   const navigate = useNavigate();
-  const handleMoreClick = () => {
-    navigate("/learnTale/moreLearned", { state: { learned } });
-  };
-
+  const isMobile = useMediaQuery({ query: "(max-width: 710px)" });
   const [learned, setLearned] = useState<LearnedProps[]>([]);
-  const sliceLearned = learned.slice(0, 3);
+  const sliceLearned = learned.slice(0, isMobile ? 2 : 3);
 
   useEffect(() => {
     const fetchGetStudiedTales = async () => {
-      const response: LearnedProps[] = await getLearnedTales(true);
+      const response: LearnedProps[] = await getLearnedTales(false);
       setLearned(response);
     };
     fetchGetStudiedTales();
   }, []);
 
+  const handleMoreClick = () => {
+    navigate("/learnTale/moreLearned", { state: { learned } });
+  };
+
   return (
     <>
       <CommonTitleWrapper>
@@ -39,11 +41,11 @@ const Learned = () => {
         {sliceLearned.map((learned: LearnedProps) => (
           <Card
             taleId={learned.tale_id}
-            title={learned.languageTale.title}
+            title={`${learned.koreanTitle} (${learned.languageId === 1 ? "영어" : learned.languageId === 2 ? "한국어" : learned.languageId === 3 ? "일본어" : "중국어"})`}
             createdAt={learned.createdAt}
-            point={"4/10"}
+            languageTaleId={learned.languageTale.id}
+            firstQuizCount={learned.firstQuizCount}
             btnText="복습하기"
-            // readFunction={() => handleMoreClick()}
           />
         ))}
       </ItemWrapper>

src/components/learn/learnMain/learned/LearnedMore.tsx → src/components/main/learnMain/learned/LearnedMore.tsx

@@ -1,10 +1,10 @@
+import Card from "@components/common/card/Card";
 import {
   ItemWrapper,
   MainWrapper,
   Shelf,
 } from "@components/common/common.styled";
 import Header from "@components/common/header/Header";
-import Card from "@components/home/homeRecentTales/Card";
 import { LearnedProps } from "@type/card";
 import { useMediaQuery } from "react-responsive";
 import { useLocation } from "react-router-dom";
@@ -30,11 +30,11 @@ const LearnedMore = () => {
                 <>
                   <Card
                     taleId={learned.tale_id}
-                    title={learned.languageTale.title}
+                    languageTaleId={learned.languageTale.id}
+                    title={`${learned.koreanTitle} (${learned.languageId === 1 ? "영어" : learned.languageId === 2 ? "한국어" : learned.languageId === 3 ? "일본어" : "중국어"})`}
                     createdAt={learned.createdAt}
-                    point={"4/10"}
+                    firstQuizCount={learned.firstQuizCount}
                     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}
-                      title={learned.languageTale.title}
+                      languageTaleId={learned.languageTale.id}
+                      title={`${learned.koreanTitle} (${learned.languageId === 1 ? "영어" : learned.languageId === 2 ? "한국어" : learned.languageId === 3 ? "일본어" : "중국어"})`}
                       createdAt={learned.createdAt}
-                      point={"4/10"}
+                      firstQuizCount={learned.firstQuizCount}
                       btnText="복습하기"
-                      //   readFunction={() => goRead(learned)}
                     />
                   ))}
                 </ItemWrapper>