feat: 카드 반응형 구현

GlowTales · Aug 27, 2024 · 786d610 · 786d610
1 parent b45112c
commit 786d610
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 10 deletions.
diff --git a/src/components/common/card/Card.styled.ts b/src/components/common/card/Card.styled.ts
@@ -13,6 +13,11 @@ export const CardContainer = styled.div<CardContainerProps>`
   border-radius: 8px;
   margin: 5px;
   box-sizing: border-box;
+  @media (max-width: 466px) {
+    width: 100%;
+    height: 150px;
+    overflow: hidden;
+  }
 `;
 
 export const CardWrapper = styled.div`
@@ -35,13 +40,19 @@ export const CardWrapper = styled.div`
     margin-bottom: 2rem;
     cursor: pointer;
   }
+  @media (max-width: 466px) {
+    margin-left: 10%;
+  }
 `;
 
 export const TitleWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 0.5rem;
   gap: 1rem;
+  @media (max-width: 466px) {
+    margin-bottom: 1rem;
+  }
 `;
 
 export const CardTitle = styled.div`

diff --git a/src/components/common/common.styled.ts b/src/components/common/common.styled.ts
@@ -86,7 +86,10 @@ export const Shelf = styled.img`
   @media (max-width: 710px) {
     width: 520px;
   }
-  @media (max-width: 519px) {
+  @media (max-width: 550px) {
+    width: 420px;
+  }
+  @media (max-width: 466px) {
     display: none;
   }
 `;
diff --git a/src/components/main/learnMain/learned/Learned.tsx b/src/components/main/learnMain/learned/Learned.tsx
@@ -8,16 +8,14 @@ import {
 import { LearnedProps } from "@type/card";
 
 import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router-dom";
 
 const Learned = () => {
   const navigate = useNavigate();
-  const handleMoreClick = () => {
-    navigate("/learnTale/moreLearned", { state: { learned } });
-  };
-
+  const isMobile = useMediaQuery({ query: "(max-width: 710px)" });
   const [learned, setLearned] = useState<LearnedProps[]>([]);
-  const sliceLearned = learned.slice(0, 3);
+  const sliceLearned = learned.slice(0, isMobile ? 2 : 3);
 
   useEffect(() => {
     const fetchGetStudiedTales = async () => {
@@ -27,6 +25,10 @@ const Learned = () => {
     fetchGetStudiedTales();
   }, []);
 
+  const handleMoreClick = () => {
+    navigate("/learnTale/moreLearned", { state: { learned } });
+  };
+
   return (
     <>
       <CommonTitleWrapper>

diff --git a/src/components/main/learnMain/unLearned/UnLearned.tsx b/src/components/main/learnMain/unLearned/UnLearned.tsx
@@ -7,15 +7,14 @@ import {
 } from "@components/common/common.styled";
 import { UnLearnedProps } from "@type/card";
 import { useEffect, useState } from "react";
+import { useMediaQuery } from "react-responsive";
 import { useNavigate } from "react-router-dom";
 
 const UnLearned = () => {
   const navigate = useNavigate();
-  const handleMoreClick = () => {
-    navigate("/learnTale/moreUnLearned", { state: { unLearned } });
-  };
+  const isMobile = useMediaQuery({ query: "(max-width: 710px)" });
   const [unLearned, setUnLearned] = useState<UnLearnedProps[]>([]);
-  const sliceUnLearned = unLearned.slice(0, 3);
+  const sliceUnLearned = unLearned.slice(0, isMobile ? 2 : 3);
 
   useEffect(() => {
     const fetchUnLearnTales = async () => {
@@ -26,6 +25,10 @@ const UnLearned = () => {
     fetchUnLearnTales();
   }, []);
 
+  const handleMoreClick = () => {
+    navigate("/learnTale/moreUnLearned", { state: { unLearned } });
+  };
+
   return (
     <>
       <CommonTitleWrapper>