Merge pull request #49 from GlowTales/feat/#41

[FEAT] 최근 생성 동화 API 연결 및 더보기 구현
GlowTales · Aug 26, 2024 · bdfbe7b · bdfbe7b
2 parents 96abdee + 37c35de
commit bdfbe7b
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 73 deletions.
diff --git a/src/apis/createTales.ts b/src/apis/createTales.ts
@@ -58,6 +58,7 @@ export const getRecentTale = async () => {
     const access = LocalStorage.getItem("access");
     const authAxios = getAuthAxios(access);
     const response = await authAxios.get(`${baseURL}/tales/recently`);
+    console.log(response.data.data.tales);
     return response.data.data.tales;
   } catch (error) {
     throw error;

diff --git a/src/components/home/Home.styled.ts b/src/components/home/Home.styled.ts
@@ -8,11 +8,5 @@ export const Wrapper = styled.div`
   justify-content: flex-start;
   align-items: flex-start;
   gap: 3rem;
-  padding: 3rem;
-  @media (min-width: 850px) {
-    margin-bottom: 160px;
-  }
-  @media (min-height: 900px) {
-    margin-bottom: 0;
-  }
+  padding-top: 3rem;
 `;
diff --git a/src/components/home/homeRecentTales/Card.tsx b/src/components/home/homeRecentTales/Card.tsx
@@ -14,42 +14,29 @@ const getRandomColorPair = () => {
 };
 
 const Card = (props: CardProps) => {
-  const cards = Array.from({ length: 3 }, (_, index) => {
-    const [backgroundColor1, backgroundColor2, height, imgSrc] =
-      getRandomColorPair();
-    return {
-      key: index,
-      backgroundColor1,
-      backgroundColor2,
-      height,
-      imgSrc,
-    };
-  });
+  const [backgroundColor1, backgroundColor2, height, imgSrc] =
+    getRandomColorPair();
 
   return (
     <>
-      {cards.map(
-        ({ key, backgroundColor1, backgroundColor2, height, imgSrc }) => (
-          <S.CardContainer
-            key={key}
-            height={height}
-            backgroundColor1={backgroundColor1}
-            backgroundColor2={backgroundColor2}
-          >
-            <S.CardWrapper>
-              <S.TitleWrapper>
-                <S.CardTitle>사과나무 위에 사과가 있다</S.CardTitle>
-                <S.CardCreatedAt>2024/08/26</S.CardCreatedAt>
-              </S.TitleWrapper>
-              {props.btnText ? (
-                <button onClick={props.onClick}>{props.btnText}</button>
-              ) : (
-                <S.CardImg src={imgSrc} />
-              )}
-            </S.CardWrapper>
-          </S.CardContainer>
-        )
-      )}
+      <S.CardContainer
+        onClick={props.readFunction}
+        height={height}
+        backgroundColor1={backgroundColor1}
+        backgroundColor2={backgroundColor2}
+      >
+        <S.CardWrapper>
+          <S.TitleWrapper>
+            <S.CardTitle>{props.title}</S.CardTitle>
+            <S.CardCreatedAt>{props.createdAt}</S.CardCreatedAt>
+          </S.TitleWrapper>
+          {props.btnText ? (
+            <button onClick={props.learnFunction}>{props.btnText}</button>
+          ) : (
+            <S.CardImg src={imgSrc} />
+          )}
+        </S.CardWrapper>
+      </S.CardContainer>
     </>
   );
 };

diff --git a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
@@ -5,6 +5,7 @@ export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  padding-bottom: 80px;
 `;
 
 export const TitleWrapper = styled.div`
@@ -26,6 +27,18 @@ export const TitleWrapper = styled.div`
 export const CardWrapper = styled.div`
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: flex-end;
+  @media (max-width: 710px) {
+    flex-direction: column;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+  }
+`;
+
+export const Shelf = styled.img`
+  @media (max-width: 710px) {
+    display: none;
+  }
 `;
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -1,32 +1,63 @@
 import { CommonTitle } from "@components/common/common.styled";
 import Card from "./Card";
 import * as S from "./HomeRecentTales.styled";
-import { getToken } from "@apis/login";
 import { getRecentTale } from "@apis/createTales";
+import { useEffect, useState } from "react";
+import { CardProps } from "@type/card";
+import { useNavigate } from "react-router-dom";
 
 const HomeRecentTales = () => {
-  getToken();
-  const response = getRecentTale();
-  console.log(response);
-  const onClick = () => {
-    console.log("A");
+  const [tales, setTales] = useState<CardProps[]>([]);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const recentTales = async () => {
+      const response: CardProps[] = await getRecentTale();
+      setTales(response);
+    };
+    recentTales();
+  }, []);
+
+  const chunkedTales = [];
+  const sliceTales = tales.slice(0, 9);
+  for (let i = 0; i < sliceTales.length; i += 3) {
+    chunkedTales.push(sliceTales.slice(i, i + 3));
+  }
+
+  const goRead = (response: CardProps) => {
+    navigate(`/readTale`, { state: { response } });
   };
+
+  const handleMoreClick = () => {
+    navigate("/more", { state: { allTales: tales } });
+  };
+
   return (
     <S.Wrapper>
       <S.TitleWrapper>
         <CommonTitle>최근 생성한 동화</CommonTitle>
-        <div className="more" onClick={onClick}>
+        <div className="more" onClick={handleMoreClick}>
           {"더보기 >"}
         </div>
       </S.TitleWrapper>
-      <S.CardWrapper>
-        <Card />
-      </S.CardWrapper>
-      <img src="shelf.png" />
-      <S.CardWrapper>
-        <Card />
-      </S.CardWrapper>
-      <img src="shelf.png" />
+      {chunkedTales.map((taleGroup, index) => (
+        <>
+          <div key={index}>
+            <S.CardWrapper>
+              {taleGroup.map((tale) => (
+                <Card
+                  key={tale.taleId}
+                  taleId={tale.taleId}
+                  title={tale.title}
+                  createdAt={tale.createdAt}
+                  readFunction={() => goRead(tale)}
+                />
+              ))}
+            </S.CardWrapper>
+          </div>
+          <S.Shelf src="shelf.png" />
+        </>
+      ))}
     </S.Wrapper>
   );
 };

diff --git a/src/components/home/homeRecentTales/MoreRecentTales.tsx b/src/components/home/homeRecentTales/MoreRecentTales.tsx
@@ -0,0 +1,47 @@
+import Header from "@components/common/header/Header";
+import { useLocation, useNavigate } from "react-router-dom";
+import * as S from "./HomeRecentTales.styled";
+import Card from "./Card";
+import { CardProps } from "@type/card";
+
+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="최근 생성한 동화" />
+      <S.Wrapper>
+        {chunkedTales.map((taleGroup, index) => (
+          <>
+            <div key={index}>
+              <S.CardWrapper>
+                {taleGroup.map((tale) => (
+                  <Card
+                    key={tale.taleId}
+                    taleId={tale.taleId}
+                    title={tale.title}
+                    createdAt={tale.createdAt}
+                    readFunction={() => goRead(tale)}
+                  />
+                ))}
+              </S.CardWrapper>
+            </div>
+            <S.Shelf src="shelf.png" />
+          </>
+        ))}
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default MoreRecentTales;
diff --git a/src/components/home/homeStatus/HomeStatus.tsx b/src/components/home/homeStatus/HomeStatus.tsx
@@ -7,8 +7,8 @@ const HomeStatus = () => {
       <S.StatusWrapper>
         <S.Status>
           <S.TitleWrapper>
-            <S.StatusTitle>글로우테일과 함께하는</S.StatusTitle>
-            <S.StatusTitle>다문화 동화</S.StatusTitle>
+            <S.StatusTitle>글로우테일과 함께</S.StatusTitle>
+            <S.StatusTitle>이야기 속으로 떠나볼까요?</S.StatusTitle>
           </S.TitleWrapper>
           <S.StateWrapper>
             <S.State>생성한 동화 | {n}개</S.State>

diff --git a/src/components/tales/createMain/CreateMain.styled.ts b/src/components/tales/createMain/CreateMain.styled.ts
@@ -48,6 +48,8 @@ export const OptionContainer = styled.div`
   justify-content: space-evenly;
   align-items: center;
   @media (max-width: 600px) {
+    width: 100%;
+    flex-direction: column;
     flex-wrap: wrap;
     gap: 1.5rem;
   }

diff --git a/src/components/tales/readTale/ReadTale.tsx b/src/components/tales/readTale/ReadTale.tsx
@@ -103,7 +103,7 @@ const ReadTale = () => {
                 text="학습하기"
                 handleBtn={() => {
                   navigate(`/learnTale`, {
-                    state: { taleId : response.taleId },
+                    state: { taleId: response.taleId },
                   });
                 }}
               />

diff --git a/src/router.tsx b/src/router.tsx
@@ -12,6 +12,7 @@ import CreateMainPage from "@pages/CreateMainPage";
 import CreateTalePage from "@pages/CreateTalePage";
 import TaleLearnPage from "@pages/TaleLearnPage";
 import PreLearningQuestionPage from "@pages/PreLearningQuestionPage";
+import MoreRecentTales from "@components/home/homeRecentTales/MoreRecentTales";
 
 const router = createBrowserRouter([
   {
@@ -30,6 +31,10 @@ const router = createBrowserRouter([
     path: "/home",
     element: <HomePage />,
   },
+  {
+    path: "/more",
+    element: <MoreRecentTales />,
+  },
   {
     path: "/createTale",
     element: <CreateMainPage />,

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -3,7 +3,7 @@
 html {
   -webkit-text-size-adjust: none;
   width: 100%;
-  height: fit-content;
+  height: 100%;
   margin: 0;
   font-size: 62.5%;
   overflow: scroll;
@@ -25,7 +25,8 @@ body {
   flex-direction: column;
   align-items: center;
   width: 100%;
-  min-height: 99vh; /* 화면 스크롤 방지를 위해 최소높이 지정 */
+  min-height: 99vh;
+  /* 화면 스크롤 방지를 위해 최소높이 지정 */
   margin: 0;
   padding: 0;
   background-color: white;

diff --git a/src/type/card.d.ts b/src/type/card.d.ts
@@ -5,6 +5,10 @@ export interface CardContainerProps {
 }
 
 export interface CardProps {
+  taleId: string;
+  title: string;
+  createdAt: string;
   btnText?: string;
-  onClick?: () => void;
+  readFunction?: () => void;
+  learnFunction?: () => void;
 }
diff --git a/src/utils/defaultData.ts b/src/utils/defaultData.ts
@@ -1,7 +1,12 @@
 import { DropdownElement } from "@type/dropdown";
 import { ColorSet } from "@type/selectList";
 
-export const baseLanguageElements: DropdownElement[] = [
+export const commonLanguageElements: DropdownElement[] = [
+  {
+    imgURL: `/korea.png`,
+    text: "한국어",
+    value: 2,
+  },
   {
     imgURL: `/america.png`,
     text: "영어",
@@ -19,21 +24,12 @@ export const baseLanguageElements: DropdownElement[] = [
   },
 ];
 
-export const commonLanguageElements: DropdownElement[] = [
-  {
-    imgURL: `/korea.png`,
-    text: "한국어",
-    value: 2,
-  },
-  ...baseLanguageElements,
-];
-
 export const nationElements: DropdownElement[] = [
   {
     text: "선택해주세요",
     value: null,
   },
-  ...baseLanguageElements,
+  ...commonLanguageElements,
 ];
 
 export const moodElements: DropdownElement[] = [