From 786d610531f969a4cc559d1593534370f1ba4258 Mon Sep 17 00:00:00 2001
From: gominzip <ahaminji@naver.com>
Date: Tue, 27 Aug 2024 17:52:59 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/card/Card.styled.ts            | 11 +++++++++++
 src/components/common/common.styled.ts               |  5 ++++-
 src/components/main/learnMain/learned/Learned.tsx    | 12 +++++++-----
 .../main/learnMain/unLearned/UnLearned.tsx           | 11 +++++++----
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/common/card/Card.styled.ts b/src/components/common/card/Card.styled.ts
index 396c3b5..ebb4a1e 100644
--- 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,6 +40,9 @@ export const CardWrapper = styled.div`
     margin-bottom: 2rem;
     cursor: pointer;
   }
+  @media (max-width: 466px) {
+    margin-left: 10%;
+  }
 `;
 
 export const TitleWrapper = styled.div`
@@ -42,6 +50,9 @@ export const TitleWrapper = styled.div`
   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
index 8a92122..ccaed5d 100644
--- 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
index b3fb67d..3a907b9 100644
--- 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
index 72ef97c..a304369 100644
--- 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>