refactor: 메인 카드 캐러셀 스타일 변경

delicious-algorithme · Dec 12, 2024 · 681116f · 681116f
1 parent fba5fe8
commit 681116f
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/src/components/common/slider/CustomArrow.jsx b/src/components/common/slider/CustomArrow.jsx
@@ -33,6 +33,10 @@ const StyledNextArrowButton = styled.div`
     background-color: ${White};
     border-radius: 50%;
     cursor: pointer;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
 
 const StyledPrevArrowButton = styled.div`
@@ -50,4 +54,8 @@ const StyledPrevArrowButton = styled.div`
     background-color: ${White};
     border-radius: 50%;
     cursor: pointer;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
diff --git a/src/components/main/cateogryAndMap/CategoryAndMap.jsx b/src/components/main/cateogryAndMap/CategoryAndMap.jsx
@@ -44,8 +44,10 @@ const CategoryAndMapLayout = styled.div`
             flex-wrap: nowrap;
         }
     }
+
     @media screen and (max-width: 768px) {
         width: 100%;
+        margin-top: 0px;
         min-height: 1140px;
         align-items: center;
     }

diff --git a/src/components/main/slider/MainContentsWrap.jsx b/src/components/main/slider/MainContentsWrap.jsx
@@ -95,9 +95,15 @@ const SlideContainer = styled.div`
         margin: 0;
     }
 
-    @media screen and (max-width: 768px) {
+    @media screen and (max-width: 500px) {
         width: 100%;
         gap: 5px;
+
+        /* 라이브러리 기본 스타일을 덮어쓰기 위해 사용 */
+        .slick-slide {
+            width: 210px !important;
+        }
+
         .slick-dots li button::before {
             display: none;
         }

diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx
@@ -54,10 +54,9 @@ const StoreCardContainer = styled.div`
     }
 
     @media screen and (max-width: 500px) {
-        width: fit-content;
-        max-width: 280px;
+        width: 200px;
         margin: 5px;
-        height: 350px;
+        height: 280px;
     }
 `;
 
@@ -109,6 +108,12 @@ const NameAndBookmarkContainer = styled.div`
         text-align: center;
         font-weight: bold;
     }
+
+    @media screen and (max-width: 500px) {
+        & > p {
+            font-size: 16px;
+        }
+    }
 `;
 
 const ContentsContainer = styled.div`
@@ -132,4 +137,8 @@ const LocationBox = styled.div`
 
     color: ${DarkGrey};
     font-size: 14px;
+
+    @media screen and (max-width: 500px) {
+        display: none;
+    }
 `;
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
@@ -97,6 +97,7 @@ const MainPageLayout = styled.div`
 
     @media screen and (max-width: 500px) {
         gap: 10px;
+
         & > img {
             width: 100%;
             border-radius: 0px;
@@ -112,7 +113,7 @@ const SearchBarContainer = styled.div`
     }
 
     @media screen and (max-width: 500px) {
-        display: none;
+        width: 90%;
     }
 `;
 
@@ -126,4 +127,8 @@ const SliderContents = styled.section`
         width: 80%;
         max-width: 980px;
     }
+
+    @media screen and (max-width: 500px) {
+        width: 100%;
+    }
 `;