From 23e35220f37b9ee3803c64cef1b194ac3b0a26fd Mon Sep 17 00:00:00 2001
From: CJY <cjy3458@naver.com>
Date: Tue, 27 Aug 2024 03:01:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20home=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20Learn=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20=EC=A4=80?=
 =?UTF-8?q?=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/common.styled.ts        | 36 +++++++++++
 .../home/homeRecentTales/Card.styled.ts       |  4 +-
 .../homeRecentTales/HomeRecentTales.styled.ts | 46 ++++-----------
 .../home/homeRecentTales/HomeRecentTales.tsx  | 19 +++---
 .../home/homeRecentTales/MoreRecentTales.tsx  | 50 +++++++++++-----
 .../learn/learnMain/Learn.styeld.ts           | 34 +++++++++++
 src/components/learn/learnMain/Learn.tsx      | 59 +++++++++++++++++++
 src/pages/LearningPage.tsx                    |  5 +-
 8 files changed, 192 insertions(+), 61 deletions(-)
 create mode 100644 src/components/learn/learnMain/Learn.styeld.ts
 create mode 100644 src/components/learn/learnMain/Learn.tsx

diff --git a/src/components/common/common.styled.ts b/src/components/common/common.styled.ts
index 33a257a..27dfcca 100644
--- a/src/components/common/common.styled.ts
+++ b/src/components/common/common.styled.ts
@@ -39,3 +39,39 @@ export const CommonTitle = styled.div`
   font-weight: 800;
   text-align: center;
 `;
+
+export const CommonTitleWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin: 5px;
+  .more {
+    margin-right: 1rem;
+    font-size: 1.8rem;
+    text-align: center;
+    font-weight: 700;
+    color: #bdbdbd;
+    cursor: pointer;
+  }
+`;
+
+export const ItemWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 1rem;
+`;
+
+export const MainWrapper = styled.div`
+  width: 90%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 3rem;
+  padding-top: 3rem;
+`;
diff --git a/src/components/home/homeRecentTales/Card.styled.ts b/src/components/home/homeRecentTales/Card.styled.ts
index 092234f..214ec20 100644
--- a/src/components/home/homeRecentTales/Card.styled.ts
+++ b/src/components/home/homeRecentTales/Card.styled.ts
@@ -2,8 +2,8 @@ import { CardContainerProps } from "@type/card";
 import styled from "styled-components";
 
 export const CardContainer = styled.div<CardContainerProps>`
-  min-width: 220px;
-  width: 33%;
+  min-width: 196px;
+  width: 30%;
   height: ${({ height }) => height};
   background: linear-gradient(
     to right,
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
index c84d5fb..2388813 100644
--- a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
+++ b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
@@ -8,46 +8,22 @@ export const Wrapper = styled.div`
   padding-bottom: 80px;
 `;
 
-export const TitleWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin: 5px;
-  .more {
-    margin-right: 1rem;
-    font-size: 1.8rem;
-    text-align: center;
-    font-weight: 700;
-    color: #bdbdbd;
-    cursor: pointer;
-  }
-`;
-
-export const CardWrapper = styled.div`
+export const Shelf = styled.img`
   width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
   @media (max-width: 710px) {
-    margin-top: 2rem;
-    flex-wrap: wrap;
-    gap: 1rem;
+    width: 520px;
+  }
+  @media (max-width: 519px) {
+    display: none;
   }
 `;
 
-export const ShelfWrapper = styled.div`
-  width: 100%;
+export const MoreWrapper = styled.div`
+  width: 90%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  margin-top: 1rem;
-`;
-
-export const Shelf = styled.img`
-  @media (max-width: 710px) {
-    width: 550px;
-  }
-  @media (max-width: 450px) {
-    display: none;
-  }
+  align-items: center;
+  padding: 4rem;
+  gap: 2rem;
 `;
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
index c2e8bd2..06249fe 100644
--- a/src/components/home/homeRecentTales/HomeRecentTales.tsx
+++ b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -1,4 +1,9 @@
-import { CommonTitle } from "@components/common/common.styled";
+import {
+  CommonTitle,
+  CommonTitleWrapper,
+  ItemWrapper,
+  MainWrapper,
+} from "@components/common/common.styled";
 import Card from "./Card";
 import * as S from "./HomeRecentTales.styled";
 import { getRecentTale } from "@apis/createTales";
@@ -40,14 +45,14 @@ const HomeRecentTales = () => {
 
   return (
     <S.Wrapper>
-      <S.TitleWrapper>
+      <CommonTitleWrapper>
         <CommonTitle>최근 생성한 동화</CommonTitle>
         <div className="more" onClick={handleMoreClick}>
           {"더보기 >"}
         </div>
-      </S.TitleWrapper>
+      </CommonTitleWrapper>
       {mediaQuery ? (
-        <S.CardWrapper>
+        <ItemWrapper>
           {sliceTales.map((tale, index) => (
             <>
               <Card
@@ -61,11 +66,11 @@ const HomeRecentTales = () => {
               )}
             </>
           ))}
-        </S.CardWrapper>
+        </ItemWrapper>
       ) : (
         chunkedTales.map((taleGroup) => (
           <>
-            <S.CardWrapper>
+            <ItemWrapper>
               {taleGroup.map((tale) => (
                 <Card
                   key={tale.taleId}
@@ -75,7 +80,7 @@ const HomeRecentTales = () => {
                   readFunction={() => goRead(tale)}
                 />
               ))}
-            </S.CardWrapper>
+            </ItemWrapper>
             <S.Shelf src="shelf.png" />
           </>
         ))
diff --git a/src/components/home/homeRecentTales/MoreRecentTales.tsx b/src/components/home/homeRecentTales/MoreRecentTales.tsx
index 1e6197d..21fb588 100644
--- a/src/components/home/homeRecentTales/MoreRecentTales.tsx
+++ b/src/components/home/homeRecentTales/MoreRecentTales.tsx
@@ -3,8 +3,12 @@ import { useLocation, useNavigate } 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 } from "@components/common/common.styled";
 
 const MoreRecentTales = () => {
+  const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
+
   const location = useLocation();
   const { allTales } = location.state || { allTales: [] };
   const navigate = useNavigate();
@@ -20,26 +24,44 @@ const MoreRecentTales = () => {
   return (
     <>
       <Header text="최근 생성한 동화" />
-      <S.Wrapper>
-        {chunkedTales.map((taleGroup, index) => (
-          <>
-            <div key={index}>
-              <S.CardWrapper>
-                {taleGroup.map((tale) => (
+      <>
+        <S.MoreWrapper>
+          {mediaQuery ? (
+            <ItemWrapper>
+              {allTales.map((tale: CardProps, index: number) => (
+                <>
                   <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>
+                  {(index + 1) % 2 === 0 && index !== allTales.length - 1 && (
+                    <S.Shelf src="shelf.png" key={`shelf-${index}`} />
+                  )}
+                </>
+              ))}
+            </ItemWrapper>
+          ) : (
+            chunkedTales.map((taleGroup) => (
+              <>
+                <ItemWrapper>
+                  {taleGroup.map((tale) => (
+                    <Card
+                      key={tale.taleId}
+                      taleId={tale.taleId}
+                      title={tale.title}
+                      createdAt={tale.createdAt}
+                      readFunction={() => goRead(tale)}
+                    />
+                  ))}
+                </ItemWrapper>
+                <S.Shelf src="shelf.png" />
+              </>
+            ))
+          )}
+        </S.MoreWrapper>
+      </>
     </>
   );
 };
diff --git a/src/components/learn/learnMain/Learn.styeld.ts b/src/components/learn/learnMain/Learn.styeld.ts
new file mode 100644
index 0000000..ce5e884
--- /dev/null
+++ b/src/components/learn/learnMain/Learn.styeld.ts
@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const GridWrapper = styled.div`
+  width: 100%;
+  justify-content: center;
+  align-items: flex-end;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  @media (max-width: 768px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const WordCard = styled.div`
+  min-width: 220px;
+  width: 100%;
+  height: 56px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.5rem;
+  font-weight: 700;
+
+  border-radius: 8px;
+  border: 1px solid #dcdcdc;
+  background-color: #f4f4f4;
+`;
diff --git a/src/components/learn/learnMain/Learn.tsx b/src/components/learn/learnMain/Learn.tsx
new file mode 100644
index 0000000..41a3ee7
--- /dev/null
+++ b/src/components/learn/learnMain/Learn.tsx
@@ -0,0 +1,59 @@
+import {
+  CommonTitle,
+  CommonTitleWrapper,
+  ItemWrapper,
+  MainWrapper,
+} from "@components/common/common.styled";
+import * as S from "./Learn.styeld";
+import TabBar from "@components/common/tabBar/TabBar";
+
+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>
+      </MainWrapper>
+      <TabBar />
+    </>
+  );
+};
+
+export default Learn;
diff --git a/src/pages/LearningPage.tsx b/src/pages/LearningPage.tsx
index c11fb4e..1008973 100644
--- a/src/pages/LearningPage.tsx
+++ b/src/pages/LearningPage.tsx
@@ -1,10 +1,9 @@
-import TabBar from "@components/common/tabBar/TabBar";
+import Learn from "@components/learn/learnMain/Learn";
 
 const LearningPage = () => {
   return (
     <>
-      <div>LearningPage</div>
-      <TabBar />
+      <Learn />
     </>
   );
 };