✨ feat: product caroucel

:%s

src/components/common/CarouselCommon/CaroucelCommon.module.scss

@@ -1,5 +1,25 @@
-.navigation_wrapper{
+@import '../../../styles/utilities';
+.navigationWrapper{
     @apply relative;
     min-height: theme("caroucel.arrow-height") ;
-    
+    .isPadding{
+        @apply spacing-horizontal;
+    }
+    :global(.customArrow) {
+        width: 64px;
+        height:  64px;
+        &:focus{
+            outline: none;
+        }
+        @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+        &:global(.leftArrow){
+            @apply left-0;
+        }
+        &:global(.rightArrow){
+            @apply right-0;
+        }
+        &:global(.isDisabledArrow){
+            @apply hidden ;
+        }
+    }
 }

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -1,21 +1,30 @@
 import { useKeenSlider } from 'keen-slider/react'
 import React from 'react'
 import 'keen-slider/keen-slider.min.css'
-import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow';
-import s from "./CaroucelCommon.module.scss"
-interface CarouselCommonProps {
-  children?: React.ReactNode
-  data?: any[]
-  Component: React.ComponentType<any>
-  isArrow?:Boolean
-  itemKey:String
+import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
+import s from './CaroucelCommon.module.scss'
+import { TOptionsEvents } from 'keen-slider'
+import classNames from 'classnames'
+export interface CarouselCommonProps<T> {
+  data: T[]
+  Component: React.ComponentType<T>
+  isArrow?: Boolean
+  itemKey: String
+  option: TOptionsEvents
+  keenClassname?: string
+  isPadding?: boolean
 }
 
-const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
+const CarouselCommon = <T,>({
+  data,
+  Component,
+  itemKey,
+  keenClassname,isPadding=false,
+  option: { slideChanged, ...sliderOption },
+}: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
-    slidesPerView: 1,
-    initial: 0,
+    ...sliderOption,
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
     },
@@ -28,28 +37,28 @@ const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
     slider.prev()
   }
   return (
-    <div className={s.navigation_wrapper}>
-      <div ref={sliderRef} className="keen-slider">
-        {data?.map((props,index) => (
+    <div className={s.navigationWrapper}>
+      <div ref={sliderRef} className={classNames('keen-slider', keenClassname,{[s.isPadding]:isPadding})}>
+        {data?.map((props, index) => (
           <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
             <Component {...props} />
           </div>
         ))}
       </div>
       {slider && (
-          <>
-            <CustomCarouselArrow
-              side="right"
-              onClick={handleRightArrowClick}
-              isDisabled={currentSlide === slider.details().size - 1}
-            />
-            <CustomCarouselArrow
-              side="left"
-              onClick={handleLeftArrowClick}
-              isDisabled={currentSlide === 0}
-            />
-          </>
-        )}
+        <>
+          <CustomCarouselArrow
+            side="right"
+            onClick={handleRightArrowClick}
+            // isDisabled={currentSlide === slider.details().size - 1}
+          />
+          <CustomCarouselArrow
+            side="left"
+            onClick={handleLeftArrowClick}
+            // isDisabled={currentSlide === 0}
+          />
+        </>
+      )}
     </div>
   )
 }

src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss

@@ -1,17 +1,37 @@
-.custom_arrow{
-    width: 64px;
-    height:  64px;
-    &:focus{
-        outline: none;
-    }
-    @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
-    &.left{
-        @apply left-0;
-    }
-    &.right{
-        @apply right-0;
-    }
-    &.isDisabled{
-        @apply hidden ;
+// .customArrow{
+//     width: 64px;
+//     height:  64px;
+//     &:focus{
+//         outline: none;
+//     }
+//     @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+//     &.leftArrow{
+//         @apply left-0;
+//     }
+//     &.rightArrow{
+//         @apply right-0;
+//     }
+//     &.isDisabled{
+//         @apply hidden ;
+//     }
+// }
+.navigationWrapper{
+    :global(.customArrow) {
+        width: 64px;
+        height:  64px;
+        &:focus{
+            outline: none;
+        }
+        @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
+        &.leftArrow{
+            @apply left-0;
+        }
+        &.rightArrow{
+            @apply right-0;
+        }
+        &.isDisabled{
+            @apply hidden ;
+        }
     }
 }
+

src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx

@@ -2,11 +2,13 @@ import classNames from 'classnames'
 import React from 'react'
 import ArrowLeft from 'src/components/icons/ArrowLeft'
 import ArrowRight from 'src/components/icons/ArrowRight'
-import s from "./CustomCarouselArrow.module.scss"
+import "./CustomCarouselArrow.module.scss"
+// import s from "../CaroucelCommon.module.scss"
+
 interface CustomCarouselArrowProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   side: 'left' | 'right'
-	isDisabled:Boolean
+	isDisabled?:Boolean
 }
 
 export const CustomCarouselArrow = ({
@@ -16,7 +18,8 @@ export const CustomCarouselArrow = ({
   return (
     <button
       {...props}
-      className={classNames(`${s.custom_arrow}`, { [`${s[side]}`]: side,[`${s.isDisabled}`]:isDisabled })}
+      // className={classNames(`${s.customArrow}`, { [`${s[`${side}Arrow`]}`]: side,[`${s.isDisabled}`]:isDisabled })}
+      className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
     >
 			{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
 		</button>