design: 추천 상품 목록 디자인 수정

Kernel360 · Mar 5, 2024 · eac23af · eac23af
1 parent a12cf4f
commit eac23af
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 45 deletions.
diff --git a/src/components/shared/carousel/RecommendList.scss b/src/components/shared/carousel/RecommendList.scss
@@ -1,37 +1,10 @@
-/* stylelint-disable selector-class-pattern */
-
-.recommend-slide {
-    .slick-list {
-        box-sizing: border-box;
-        padding: 0 var(--default-padding);
-
-        .slick-track {
-            .slick-slide {
-                width: 85px !important;
-                margin-right: 8px;
-
-                & > div {
-                    a {
-                        box-sizing: border-box;
-                        text-align: center;
-
-                        .img-container {
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            width: 100%;
-                            height: 85px;
-                            margin: 0 auto 3px;
-                            border-radius: 16px;
-                            background-color: #eff9ff;
-
-                            img {
-                                vertical-align: top;
-                            }
-                        }
-                    }
-                }
-            }
-        }
+.imageContainer {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    text-align: center;
+
+    span {
+        width: 85px;
     }
 }
diff --git a/src/components/shared/carousel/RecommendList.tsx b/src/components/shared/carousel/RecommendList.tsx
@@ -9,6 +9,8 @@ import Link from 'next/link';
 import { RecommendProductsType } from '@remote/api/types/home';
 import Text from '@shared/text/Text';
 
+import Spacing from '../spacing/Spacing';
+
 const settings = {
   infinite: true,
   slidesToShow: 4,
@@ -19,6 +21,7 @@ const settings = {
   arrows: false,
   speed: 2000,
   autoplaySpeed: 5000,
+  swipeToSlide: true,
 };
 
 // eslint-disable-next-line max-len
@@ -29,16 +32,15 @@ function RecommendList({ recommendProductsData }: { recommendProductsData: Recom
     <Slider {...settings} className="recommend-slide">
       {recommendList?.map((slide) => {
         return (
-          <Link href={`/product/${slide.productNo.toString()}`} key={slide.productNo}>
-            <div className="img-container">
-              <Image
-                // src={slide.imageSource}
-                src={slide.item === '코팅제' ? '/assets/코팅제.webp' : '/assets/세정제.webp'}
-                alt={slide.alt}
-                width={60}
-                height={60}
-              />
-            </div>
+          <Link href={`/product/${slide.productNo.toString()}`} key={slide.productNo} className="imageContainer">
+            <Image
+              // src={slide.imageSource}
+              src={slide.item === '코팅제' ? '/assets/코팅제.webp' : '/assets/세정제.webp'}
+              alt={slide.alt}
+              width={85}
+              height={85}
+            />
+            <Spacing size={4} />
             <Text color="gray800" typography="t7" className="ellipsis" css={{ height: '35px' }}>{slide.productName}</Text>
           </Link>
         );