fix: 메인페이지 카드 너비, 정렬 수정

delicious-algorithme · Dec 13, 2024 · fd1faf3 · fd1faf3
1 parent a5bc660
commit fd1faf3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/common/slider/sliderSetting.js b/src/components/common/slider/sliderSetting.js
@@ -33,9 +33,9 @@ const sliderSettings = {
         },
 
         {
-            breakpoint: 420,
+            breakpoint: 500,
             settings: {
-                centerMode: true,
+                centerMode: false,
                 slidesToShow: 1,
                 slidesToScroll: 1,
                 initialSlide: 0,

diff --git a/src/components/main/slider/StoreCardWrap.jsx b/src/components/main/slider/StoreCardWrap.jsx
@@ -4,7 +4,7 @@ import { Orange } from '../../../color';
 
 const StoreCardWrapper = ({ ranking, store, index }) => {
     return (
-        <div>
+        <CardWrapper>
             {ranking && <RankingText>{index + 1}</RankingText>}
             <StoreCard
                 image={store.imageUrls}
@@ -15,7 +15,7 @@ const StoreCardWrapper = ({ ranking, store, index }) => {
                 keyword={store.positiveKeywords}
                 name={store.name}
             />
-        </div>
+        </CardWrapper>
     );
 };
 export default StoreCardWrapper;
@@ -25,3 +25,10 @@ const RankingText = styled.p`
     font-weight: bold;
     font-size: 24px;
 `;
+
+const CardWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+`;
diff --git a/src/components/storeCard/StoreCard.jsx b/src/components/storeCard/StoreCard.jsx
@@ -54,7 +54,7 @@ const StoreCardContainer = styled.div`
     }
 
     @media screen and (max-width: 500px) {
-        width: 200px;
+        width: 300px;
         margin: 5px;
         height: 280px;