feat: 학습하기 메인 탭 구현

GlowTales · Aug 26, 2024 · c67e2d1 · c67e2d1
1 parent d19e4e5
commit c67e2d1
Show file tree

Hide file tree

Showing 16 changed files with 251 additions and 56 deletions.
diff --git a/src/apis/createTales.ts b/src/apis/createTales.ts
@@ -53,11 +53,13 @@ export const getTale = async (lanId: number, taleId: number) => {
   }
 };
 
-export const getRecentTale = async () => {
+export const getRecentTale = async (count?: number) => {
   try {
     const access = LocalStorage.getItem("access");
     const authAxios = getAuthAxios(access);
-    const response = await authAxios.get(`${baseURL}/tales/recently`);
+    const response = await authAxios.get(
+      `${baseURL}/tales/recently${count ? `&count=${count}` : ""}`
+    );
     console.log(response.data.data.tales);
     return response.data.data.tales;
   } catch (error) {

diff --git a/src/apis/home.ts b/src/apis/home.ts
@@ -13,7 +13,7 @@ export const getWord = async (count?: number) => {
     const response = await authAxios.get(
       `${baseURL}/tales/word${count ? `?count=${count}` : ""}`
     );
-    return response.data;
+    return response.data.data;
   } catch (error) {
     throw error;
   }
@@ -32,7 +32,7 @@ export const getUnlearnedTales = async (
     const response = await authAxios.get(
       `${baseURL}/tales/unlearned?koreanVersion=${koreanVersion}${count ? `&count=${count}` : ""}`
     );
-    return response.data;
+    return response.data.data;
   } catch (error) {
     throw error;
   }
@@ -41,7 +41,7 @@ export const getUnlearnedTales = async (
 /**
  * 최근 학습한 동화 전체 조회
  */
-export const getStudiedTales = async (
+export const getLearnedTales = async (
   koreanVersion: boolean,
   count?: number
 ) => {
@@ -51,7 +51,7 @@ export const getStudiedTales = async (
     const response = await authAxios.get(
       `${baseURL}/tales/studied?koreanVersion=${koreanVersion}${count ? `&count=${count}` : ""}`
     );
-    return response.data;
+    return response.data.data;
   } catch (error) {
     throw error;
   }

diff --git a/src/components/common/common.styled.ts b/src/components/common/common.styled.ts
@@ -74,4 +74,5 @@ export const MainWrapper = styled.div`
   align-items: flex-start;
   gap: 3rem;
   padding-top: 3rem;
+  padding-bottom: 140px;
 `;
diff --git a/src/components/home/homeRecentTales/Card.styled.ts b/src/components/home/homeRecentTales/Card.styled.ts
@@ -24,17 +24,23 @@ export const CardWrapper = styled.div`
   padding: 1.2rem 2.4rem;
   margin-left: 1.5rem;
   button {
+    min-width: 80px;
+    width: 100%;
+    background-color: #ffffff;
     border: none;
     border-radius: 4px;
     padding: 8px;
     font-size: 1.6rem;
     font-weight: 700;
+    margin-bottom: 2rem;
+    cursor: pointer;
   }
 `;
 
 export const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
+  margin-top: 0.5rem;
   gap: 1rem;
 `;
 
@@ -54,3 +60,15 @@ export const CardImg = styled.img`
   width: 100%;
   margin-bottom: 1rem;
 `;
+
+export const BtnWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  div {
+    margin-top: 0.5rem;
+    font-size: 3rem;
+    font-weight: 700;
+  }
+`;
diff --git a/src/components/home/homeRecentTales/Card.tsx b/src/components/home/homeRecentTales/Card.tsx
@@ -31,7 +31,14 @@ const Card = (props: CardProps) => {
             <S.CardCreatedAt>{props.createdAt}</S.CardCreatedAt>
           </S.TitleWrapper>
           {props.btnText ? (
-            <button onClick={props.learnFunction}>{props.btnText}</button>
+            props.point ? (
+              <S.BtnWrapper>
+                <div>{props.point}</div>
+                <button onClick={props.learnFunction}>{props.btnText}</button>
+              </S.BtnWrapper>
+            ) : (
+              <button onClick={props.unLearnedFunction}>{props.btnText}</button>
+            )
           ) : (
             <S.CardImg src={imgSrc} />
           )}

diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -71,7 +71,6 @@ const HomeRecentTales = () => {
             <ItemWrapper>
               {taleGroup.map((tale) => (
                 <Card
-                  key={tale.taleId}
                   taleId={tale.taleId}
                   title={tale.title}
                   createdAt={tale.createdAt}

diff --git a/src/components/home/homeRecentTales/MoreRecentTales.tsx b/src/components/home/homeRecentTales/MoreRecentTales.tsx
@@ -48,7 +48,6 @@ const MoreRecentTales = () => {
                 <ItemWrapper>
                   {taleGroup.map((tale) => (
                     <Card
-                      key={tale.taleId}
                       taleId={tale.taleId}
                       title={tale.title}
                       createdAt={tale.createdAt}

diff --git a/src/components/learn/learnMain/Learn.tsx b/src/components/learn/learnMain/Learn.tsx
@@ -1,55 +1,16 @@
-import {
-  CommonTitle,
-  CommonTitleWrapper,
-  ItemWrapper,
-  MainWrapper,
-} from "@components/common/common.styled";
-import * as S from "./Learn.styeld";
+import { MainWrapper } from "@components/common/common.styled";
 import TabBar from "@components/common/tabBar/TabBar";
+import Word from "./word/Word";
+import UnLearned from "./unLearned/UnLearned";
+import Learned from "./learned/Learned";
 
 const Learn = () => {
-  const handleMoreClick = () => {
-    console.log(1);
-  };
   return (
     <>
       <MainWrapper>
-        <CommonTitleWrapper>
-          <CommonTitle>단어장</CommonTitle>
-          <div className="more" onClick={handleMoreClick}>
-            {"더보기 >"}
-          </div>
-        </CommonTitleWrapper>
-        <S.GridWrapper>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-        </S.GridWrapper>
-        <CommonTitleWrapper>
-          <CommonTitle>아직 학습하지 않은 동화</CommonTitle>
-          <div className="more" onClick={handleMoreClick}>
-            {"더보기 >"}
-          </div>
-        </CommonTitleWrapper>
-        <ItemWrapper>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-        </ItemWrapper>
-        <CommonTitleWrapper>
-          <CommonTitle>최근 학습한 동화</CommonTitle>
-          <div className="more" onClick={handleMoreClick}>
-            {"더보기 >"}
-          </div>
-        </CommonTitleWrapper>
-        <ItemWrapper>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-          <S.WordCard>단어장</S.WordCard>
-        </ItemWrapper>
+        <Word />
+        <UnLearned />
+        <Learned />
       </MainWrapper>
       <TabBar />
     </>

diff --git a/src/components/learn/learnMain/learned/Learned.tsx b/src/components/learn/learnMain/learned/Learned.tsx
@@ -0,0 +1,54 @@
+import { getLearnedTales } from "@apis/home";
+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 { useNavigate } from "react-router-dom";
+
+const Learned = () => {
+  const navigate = useNavigate();
+  const handleMoreClick = () => {
+    navigate("/more", { state: { learned } });
+  };
+
+  const [learned, setLearned] = useState<LearnedProps[]>([]);
+  const sliceLearned = learned.slice(0, 3);
+
+  useEffect(() => {
+    const fetchGetStudiedTales = async () => {
+      const response: LearnedProps[] = await getLearnedTales(true);
+      setLearned(response);
+    };
+    fetchGetStudiedTales();
+  }, []);
+
+  return (
+    <>
+      <CommonTitleWrapper>
+        <CommonTitle>최근 학습한 동화</CommonTitle>
+        <div className="more" onClick={handleMoreClick}>
+          {"더보기 >"}
+        </div>
+      </CommonTitleWrapper>
+      <ItemWrapper>
+        {sliceLearned.map((learned: LearnedProps) => (
+          <Card
+            taleId={learned.tale_id}
+            title={learned.languageTale.title}
+            createdAt={learned.createdAt}
+            point={"4/10"}
+            btnText="복습하기"
+            // readFunction={() => handleMoreClick()}
+          />
+        ))}
+      </ItemWrapper>
+    </>
+  );
+};
+
+export default Learned;
diff --git a/src/components/learn/learnMain/learned/LearnedMore.tsx b/src/components/learn/learnMain/learned/LearnedMore.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+
+const LearnedMore = () => {
+  const location = useLocation();
+
+  return <div>LearnedMore</div>;
+};
+
+export default LearnedMore;
diff --git a/src/components/learn/learnMain/unLearned/UnLearned.tsx b/src/components/learn/learnMain/unLearned/UnLearned.tsx
@@ -0,0 +1,52 @@
+import { getUnlearnedTales } from "@apis/home";
+import {
+  CommonTitle,
+  CommonTitleWrapper,
+  ItemWrapper,
+} from "@components/common/common.styled";
+import Card from "@components/home/homeRecentTales/Card";
+import { UnLearnedProps } from "@type/card";
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const UnLearned = () => {
+  const navigate = useNavigate();
+  const handleMoreClick = () => {
+    navigate("/more", { state: { unLearned } });
+  };
+  const [unLearned, setUnLearned] = useState<UnLearnedProps[]>([]);
+  const sliceUnLearned = unLearned.slice(0, 3);
+
+  useEffect(() => {
+    const fetchUnLearnTales = async () => {
+      const response: UnLearnedProps[] = await getUnlearnedTales(true);
+      setUnLearned(response);
+    };
+
+    fetchUnLearnTales();
+  }, []);
+  return (
+    <>
+      <CommonTitleWrapper>
+        <CommonTitle>아직 학습하지 않은 동화</CommonTitle>
+        <div className="more" onClick={handleMoreClick}>
+          {"더보기 >"}
+        </div>
+      </CommonTitleWrapper>
+      <ItemWrapper>
+        {sliceUnLearned.map((unLearned: UnLearnedProps) => (
+          <Card
+            taleId={unLearned.tale_id}
+            title={unLearned.languageTale.title}
+            createdAt={unLearned.createdAt}
+            btnText="학습하기✏️"
+            readFunction={() => handleMoreClick()}
+          />
+        ))}
+      </ItemWrapper>
+    </>
+  );
+};
+
+export default UnLearned;
diff --git a/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx b/src/components/learn/learnMain/unLearned/UnLearnedMore.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { useLocation } from "react-router-dom";
+
+const UnLearnedMore = () => {
+  const location = useLocation();
+
+  return <div>UnLearnedMore</div>;
+};
+
+export default UnLearnedMore;
diff --git a/...omponents/learn/learnMain/Learn.styeld.ts → ...nents/learn/learnMain/word/Word.styled.ts b/...omponents/learn/learnMain/Learn.styeld.ts → ...nents/learn/learnMain/word/Word.styled.ts
@@ -10,7 +10,6 @@ export const GridWrapper = styled.div`
   @media (max-width: 768px) {
     grid-template-columns: repeat(2, 1fr);
   }
-
   @media (max-width: 480px) {
     grid-template-columns: 1fr;
   }

diff --git a/src/components/learn/learnMain/word/Word.tsx b/src/components/learn/learnMain/word/Word.tsx
@@ -0,0 +1,46 @@
+import { getWord } from "@apis/home";
+import {
+  CommonTitle,
+  CommonTitleWrapper,
+} from "@components/common/common.styled";
+import { WordProps } from "@type/card";
+import * as S from "./Word.styled";
+
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const Word = () => {
+  const navigate = useNavigate();
+  const handleMoreClick = () => {
+    navigate("/more", { state: { word } });
+  };
+  const [word, setWord] = useState<WordProps[]>([]);
+  const sliceWord = word.slice(0, 6);
+
+  useEffect(() => {
+    const fetchWord = async () => {
+      const response: WordProps[] = await getWord();
+      setWord(response);
+    };
+
+    fetchWord();
+  }, []);
+
+  return (
+    <>
+      <CommonTitleWrapper>
+        <CommonTitle>단어장</CommonTitle>
+        <div className="more" onClick={handleMoreClick}>
+          {"더보기 >"}
+        </div>
+      </CommonTitleWrapper>
+      <S.GridWrapper>
+        {sliceWord.map((word: WordProps) => (
+          <S.WordCard>{word.word}</S.WordCard>
+        ))}
+      </S.GridWrapper>
+    </>
+  );
+};
+
+export default Word;
diff --git a/src/components/learn/learnMain/word/WordMore.tsx b/src/components/learn/learnMain/word/WordMore.tsx
@@ -0,0 +1,9 @@
+import { useLocation } from "react-router-dom";
+
+const WordMore = () => {
+  const location = useLocation();
+
+  return <div>WordMore</div>;
+};
+
+export default WordMore;