🐛 bug: dot

:%s

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -1,14 +1,16 @@
 import { useKeenSlider } from 'keen-slider/react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import 'keen-slider/keen-slider.min.css'
 import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
 import s from './CaroucelCommon.module.scss'
 import { TOptionsEvents } from 'keen-slider'
 import classNames from 'classnames'
+import CustomDot from './CustomDot/CustomDot'
 export interface CarouselCommonProps<T> {
   data: T[]
   Component: React.ComponentType<T>
   isArrow?: Boolean
+  isDot?: Boolean
   itemKey: String
   option: TOptionsEvents
   keenClassname?: string
@@ -19,12 +21,18 @@ const CarouselCommon = <T,>({
   data,
   Component,
   itemKey,
-  keenClassname,isPadding=false,
-  option: { slideChanged, ...sliderOption },
+  keenClassname,
+  isPadding = false,
+  isArrow = true,
+  isDot = false,
+  option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
+  const [dotActive, setDotActive] = React.useState<number>(0)
+  const [dotArr, setDotArr] = React.useState<number[]>([])
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
     ...sliderOption,
+    slidesPerView,
     slideChanged(s) {
       setCurrentSlide(s.details().relativeSlide)
     },
@@ -33,19 +41,37 @@ const CarouselCommon = <T,>({
     slider.next()
   }
 
+  useEffect(() => {
+    if(isDot && slider){
+      console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1)))
+      setDotArr([...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()])
+    }
+  }, [isDot,slider])
+
   const handleLeftArrowClick = () => {
     slider.prev()
   }
+
+  const onDotClick = (index:number) => {
+    slider.moveToSlide(((Number(slider.details().slidesPerView)||1)*index))
+    setDotActive(index)
+
+  }
   return (
     <div className={s.navigationWrapper}>
-      <div ref={sliderRef} className={classNames('keen-slider', keenClassname,{[s.isPadding]:isPadding})}>
+      <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 && (
+      {slider && isArrow && (
         <>
           <CustomCarouselArrow
             side="right"
@@ -59,6 +85,15 @@ const CarouselCommon = <T,>({
           />
         </>
       )}
+      {slider && isDot && (
+        <div className="dots">
+          {dotArr.map((index) => {
+            return (
+              <CustomDot key={`dot-${index}`} index={index} dotActive={dotActive} onClick={onDotClick}/>
+            )
+          })}
+        </div>
+      )}
     </div>
   )
 }