fix: 메인 카드 스크롤 문제 해결

delicious-algorithme · Dec 12, 2024 · a5bc660 · a5bc660
1 parent d171f71
commit a5bc660
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/src/components/common/slider/sliderSetting.js b/src/components/common/slider/sliderSetting.js
@@ -4,7 +4,7 @@ const sliderSettings = {
     centerMode: true,
     dots: true,
     infinite: true,
-    speed: 1000,
+    speed: 500,
     slidesToShow: 3,
     slidesToScroll: 1,
     arrow: false,
@@ -17,15 +17,28 @@ const sliderSettings = {
             settings: {
                 slidesToShow: 2,
                 slidesToScroll: 1,
-                infinite: true,
                 dots: true,
             },
         },
         {
             breakpoint: 768,
             settings: {
+                centerMode: false,
+                slidesToShow: 2,
+                slidesToScroll: 2,
+                initialSlide: 0,
+                infinite: false,
+                dots: true,
+            },
+        },
+
+        {
+            breakpoint: 420,
+            settings: {
+                centerMode: true,
                 slidesToShow: 1,
-                initialSlide: 1,
+                slidesToScroll: 1,
+                initialSlide: 0,
                 infinite: false,
                 dots: true,
             },

diff --git a/src/components/main/contents/TopRecommendations.jsx b/src/components/main/contents/TopRecommendations.jsx
@@ -23,12 +23,14 @@ const TopRecommendations = () => {
 
     return (
         <div style={{ minHeight: '450px' }}>
-            <MainContentsWrap
-                ranking={true}
-                title="맛 알고리즘이 엄선한 TOP 10"
-                description="맛알고리즘에서 긍정키워드로 분석한 맛집 컬렉션 10"
-                stores={topStores}
-            />
+            {topStores.length > 0 && (
+                <MainContentsWrap
+                    ranking={true}
+                    title="맛 알고리즘이 엄선한 TOP 10"
+                    description="맛알고리즘에서 긍정키워드로 분석한 맛집 컬렉션 10"
+                    stores={topStores}
+                />
+            )}
         </div>
     );
 };

diff --git a/src/components/main/slider/MainContentsWrap.jsx b/src/components/main/slider/MainContentsWrap.jsx
@@ -72,7 +72,6 @@ const SlideContainer = styled.div`
 
     .slick-slide {
         display: flex;
-        padding-right: 10px;
     }
 
     & .slick-dots {
@@ -112,9 +111,7 @@ const SlideContainer = styled.div`
         justify-content: center;
         align-items: center;
 
-        /* 라이브러리 기본 스타일을 덮어쓰기 위해 사용 */
         .slick-slide {
-            width: 210px !important;
             display: flex;
             justify-content: center;
             align-items: center;