🐛 bug: fix dot logic

:%s

pages/test.tsx

@@ -1,5 +1,10 @@
 import { useState } from 'react'
-import { ButtonCommon, Layout, ModalCommon, ProductCarousel } from 'src/components/common'
+import {
+  ButtonCommon,
+  Layout,
+  ModalCommon,
+  ProductCarousel,
+} from 'src/components/common'
 import { CollectionCarcousel } from 'src/components/modules/home'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
@@ -102,15 +107,37 @@ export default function Test() {
   return (
     <>
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalCommon visible={visible} onClose={onClose} >
-				<div className="">
-					Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod itaque, officia magni molestias! Architecto deserunt soluta laborum commodi nesciunt delectus similique temporibus distinctio? Facere eaque minima enim modi magni, laudantium, animi mollitia beatae repudiandae maxime labore error nesciunt, nisi est?
-				</div>
-			</ModalCommon>
+      <ModalCommon visible={visible} onClose={onClose}>
+        <div className="">
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
+          officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod
+          itaque, officia magni molestias! Architecto deserunt soluta laborum
+          commodi nesciunt delectus similique temporibus distinctio? Facere
+          eaque minima enim modi magni, laudantium, animi mollitia beatae
+          repudiandae maxime labore error nesciunt, nisi est?
+        </div>
+      </ModalCommon>
       <ProductCarousel
         data={dataTest}
         itemKey="product-2"
         isDot
+        option={{
+          slidesPerView: 1,
+          breakpoints: {
+            '(min-width: 640px)': {
+              slidesPerView: 3,
+            },
+            '(min-width: 768px)': {
+              slidesPerView: 4,
+            },
+            '(min-width: 1024px)': {
+              slidesPerView: 4.5,
+            },
+            '(min-width: 1280px)': {
+              slidesPerView: 5.5,
+            },
+          },
+        }}
       />
     </>
   )

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -28,37 +28,27 @@ const CarouselCommon = <T,>({
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
-  const [dotActive, setDotActive] = React.useState<number>(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)
-
     },
-    afterChange(s) {
-      let dot = 0 
-      dotArr.forEach((index)=>{
-        if(s.details().relativeSlide >= index){
-          dot = index
-        }
-      })
-      console.log(dot)
-      setDotActive(dot)
-    }
   })
   
   useEffect(() => {
-    if(isDot && slider){
+    if(isDot && slider && data){
       let array:number[]
-      array =  [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{
-        return (Number(slider.details().slidesPerView)||1)*i
-      })
-      console.log(array)
+      let number = data.length - Math.floor(slider.details().slidesPerView - 1)
+      if(number<1){
+        number = 1
+      }
+      array =  [...Array(number).keys()]
       setDotArr(array)
     }
-  }, [isDot,slider])
+  }, [isDot,slider,data])
 
   const handleRightArrowClick = () => {
     slider.next()
@@ -70,7 +60,6 @@ const CarouselCommon = <T,>({
 
   const onDotClick = (index:number) => {
     slider.moveToSlideRelative(index)
-    setDotActive(index)
   }
   return (
     <div className={s.navigationWrapper}>
@@ -102,7 +91,7 @@ const CarouselCommon = <T,>({
         <div className="dots">
           {dotArr.map((index) => {
             return (
-              <CustomDot key={`dot-${index}`} index={index} dotActive={dotActive} onClick={onDotClick}/>
+              <CustomDot key={`dot-${index}`} index={index} dotActive={currentSlide} onClick={onDotClick}/>
             )
           })}
         </div>

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

@@ -1,4 +1,4 @@
-@import '../../../../../../styles/utilities';
+@import "../../../../styles/utilities";
 
 .homeFeature {
     @apply spacing-horizontal-left grid grid-cols-1;