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

feat: home 컴포넌트 반응형 구현
GlowTales · Aug 26, 2024 · eabff69 · eabff69
2 parents bdfbe7b + af92a5f
commit eabff69
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.1",
     "styled-components": "^6.1.12",
     "zustand": "^4.5.5"

diff --git a/src/components/home/homeRecentTales/HomeRecentTales.styled.ts b/src/components/home/homeRecentTales/HomeRecentTales.styled.ts
@@ -30,15 +30,24 @@ export const CardWrapper = styled.div`
   justify-content: center;
   align-items: flex-end;
   @media (max-width: 710px) {
-    flex-direction: column;
-    align-items: center;
+    margin-top: 2rem;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: 1rem;
   }
 `;
 
+export const ShelfWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+`;
+
 export const Shelf = styled.img`
   @media (max-width: 710px) {
+    width: 550px;
+  }
+  @media (max-width: 450px) {
     display: none;
   }
 `;
diff --git a/src/components/home/homeRecentTales/HomeRecentTales.tsx b/src/components/home/homeRecentTales/HomeRecentTales.tsx
@@ -5,8 +5,13 @@ import { getRecentTale } from "@apis/createTales";
 import { useEffect, useState } from "react";
 import { CardProps } from "@type/card";
 import { useNavigate } from "react-router-dom";
+import { getToken } from "@apis/login";
+import { useMediaQuery } from "react-responsive";
 
 const HomeRecentTales = () => {
+  const mediaQuery = useMediaQuery({ query: "(max-width: 710px)" });
+
+  getToken();
   const [tales, setTales] = useState<CardProps[]>([]);
   const navigate = useNavigate();
 
@@ -17,6 +22,7 @@ const HomeRecentTales = () => {
     };
     recentTales();
   }, []);
+  // const sliceTales = tales.slice(0, 9);
 
   const chunkedTales = [];
   const sliceTales = tales.slice(0, 9);
@@ -40,9 +46,25 @@ const HomeRecentTales = () => {
           {"더보기 >"}
         </div>
       </S.TitleWrapper>
-      {chunkedTales.map((taleGroup, index) => (
-        <>
-          <div key={index}>
+      {mediaQuery ? (
+        <S.CardWrapper>
+          {sliceTales.map((tale, index) => (
+            <>
+              <Card
+                taleId={tale.taleId}
+                title={tale.title}
+                createdAt={tale.createdAt}
+                readFunction={() => goRead(tale)}
+              />
+              {(index + 1) % 2 === 0 && index !== sliceTales.length - 1 && (
+                <S.Shelf src="shelf.png" key={`shelf-${index}`} />
+              )}
+            </>
+          ))}
+        </S.CardWrapper>
+      ) : (
+        chunkedTales.map((taleGroup) => (
+          <>
             <S.CardWrapper>
               {taleGroup.map((tale) => (
                 <Card
@@ -54,10 +76,10 @@ const HomeRecentTales = () => {
                 />
               ))}
             </S.CardWrapper>
-          </div>
-          <S.Shelf src="shelf.png" />
-        </>
-      ))}
+            <S.Shelf src="shelf.png" />
+          </>
+        ))
+      )}
     </S.Wrapper>
   );
 };