🎨 restyle: Home Feature

src/components/modules/home/HomeFeature/HomeFeature.module.scss

@@ -1,16 +1,5 @@
 @import "../../../../styles/utilities";
 
 .homeFeature {
-    @apply spacing-horizontal;
-    background-color: #ffffff;
-    height: fit-content;
-    margin: 3.2rem auto;
-    @screen md {
-        @apply grid grid-cols-3;
-        grid-gap: 2.4rem;
-        margin: 6.4rem auto;
-    }
-    @screen md {
-        grid-gap: 4rem;
-    }
+    @apply spacing-horizontal-left bg-white;
 }

src/components/modules/home/HomeFeature/HomeFeature.tsx

@@ -1,25 +1,34 @@
 import React from 'react'
 import s from './HomeFeature.module.scss'
 
-import HomeFeatureItem from './components/HomeFeatureItem/HomeFeatureItem'
+import FirstPic from './assets/10h30-11h.png'
+import SecondPic from './assets/8h.png'
+import ThirdPic from './assets/green.png'
 
-const HomeFeature = () => {
+import HomeFeatureCarousel from './components/HomeFeatureCarousel/HomeFeatureCarousel'
+
+const CAROUSEL_DATA = [
+    {
+        image: FirstPic,
+        children: <span>Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>,
+    },
+    {
+        image: SecondPic,
+        children: <span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>,
+    },
+    {
+        image: ThirdPic,
+        children: <span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>,
+    },
+]
+
+const HomeFeature = ()  => {
     return (
-        <section className={s.homeFeature}>       
-            <HomeFeatureItem image="firstImg">
-                <span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>
-            </HomeFeatureItem>
-
-            <HomeFeatureItem image="secondImg">
-                <span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
-            </HomeFeatureItem>
-
-            <HomeFeatureItem image="thirdImg">
-                <span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
-            </HomeFeatureItem>
-        </section>
+        <div className={s.homeFeature}>
+            <HomeFeatureCarousel data={CAROUSEL_DATA} itemKey="Home Feature" isArrow={false} />
+        </div>
     )
 
 }
 
-export default HomeFeature
+export default HomeFeature

src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { TOptionsEvents } from 'keen-slider'
+
+import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem'
+import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon'
+
+interface HomeFeatureCarouselProps
+  extends Omit<CarouselCommonProps<HomeFeatureItemProps>, 'Component' | "option"> {
+  option?: TOptionsEvents
+}
+
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 1.2,
+    mode: 'free',
+    breakpoints: {
+      '(min-width: 640px)': {
+        slidesPerView: 1.8,
+      },
+      '(min-width: 768px)': {
+        slidesPerView: 2.1,
+      },
+      '(min-width: 1008px)': {
+        slidesPerView: 2.3,
+      },
+      '(min-width: 1280px)': {
+        slidesPerView: 2.8,
+      },
+      '(min-width: 1440px)': {
+        slidesPerView: 3,
+      },
+    },
+  }
+
+const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps)  => {
+    return (
+        <div>
+            <CarouselCommon<HomeFeatureItemProps>
+                data={data}
+                Component={HomeFeatureItem}
+                {...props}
+                option={{ ...OPTION_DEFAULT, ...option }}
+             />
+        </div>
+    )
+
+}
+
+export default HomeFeatureCarousel

src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss

@@ -1,56 +1,18 @@
 @import "../../../../../../styles/utilities";
 
 .homeFeatureItem {
-    @apply flex items-center;
-    width: fit-content;
-    margin: auto;
-
-    @screen md {
-        @apply flex flex-col items-center justify-between;
-    }
-
-    @screen lg {
-        @apply flex flex-row;
-    }
+    @apply flex items-center justify-center;
+    margin-right: 0.8rem;
+    height: 100%;
 
     .itemImg {
-        @apply flex float-left clear-both;
         margin-right: 2.4rem;
-        align-items: center;
-        &.firstImg {
-            margin-top: 1rem;
-            content: url("../../assets/10h30-11h-desktop.png");
-        }
-        &.secondImg {
-            margin-top: 1rem;
-            content: url("../../assets/8h-desktop.png");
-        }
-        &.thirdImg {
-            margin-top: 1rem;
-            content: url("../../assets/green-desktop.png");
-        }
-
-        @screen md {
-            @apply flex flex-col justify-center items-center;
-            margin: auto;
-            margin-top: 0.8rem;
-        }
-
-        @screen lg {
-            @apply flex float-left clear-both;
-            margin-right: 2.4rem;
-            margin-top: 0;
-        }
+        max-width: 12rem;
+        min-width: 8rem;
     }
 
     .itemText {
         max-width: 28rem;
-        min-width: 12rem;
-        @screen md {
-            @apply text-center;
-        }
-        @screen lg {
-            @apply text-left;
-        }
+        min-width: none;
     }
 }

src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx

@@ -1,21 +1,21 @@
 import React from 'react'
-import classNames from 'classnames'
 import s from './HomeFeatureItem.module.scss'
 
+import { StaticImage } from 'src/components/common'
 
-interface HomeFeatureItemProps {
-    image: string;
-    children: any;
+export interface HomeFeatureItemProps {
+    image: StaticImageData;
+    children: React.ReactNode;
 }
 
 const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
     
     return (
         <div className={s.homeFeatureItem}>
-            <img className={classNames(s.itemImg, {
-                [s[image]]: image,
-            })}
-            alt="home feature item img" /> 
+            <div className={s.itemImg}>
+                <StaticImage src={image} alt="home feature item img" />
+            </div>
+            
             <div className={s.itemText}>{children}</div>
         </div> 
     )