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

[FEAT] home 스타일 코드 분리 및 Learn 페이지 구현 준비
GlowTales · Aug 26, 2024 · 8931c1b · 8931c1b
2 parents 5d531b8 + 23e3522
commit 8931c1b
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 61 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 />
     </>
   );
 };