[React]drag와 onClick 이벤트 제어하기

drag와 onClick 기능이 함께 있을 경우 drag를 하나의 스테이트에 따로 관리하여 제어하였다

//drag 관리하는 state
const [isDragging, setIsDragging] = useState<boolean>(false);

  const beforeChange = () => {
    setIsDragging(true)
  }
  
  const afterChange = () => {
    setIsDragging(false)
  }
  

//drag 기능의 carousel
  const carouselSettings = {
    dots: true,
    arrows: false,
    centerMode: false,
    swipeToSlide: true,
    adaptiveHeight: true,
    beforeChange: beforeChange,
    afterChange: afterChange,
  };

//return될 UI
<SliderStyle>
 <Carousel ref={carouselRef} {...carouselSettings}>
  {SampleCardList.map((card: any, index: number) => {
    return (
      <Image
        key={index}
        src={card.imgPath}
        ratio={'1/1'}
        effect={'opacity'}
        onClick={(e :any) => {
        !isDragging && navigate(card.path);
        }}
        sx={{ width: '100%', height: '100%', cursor: 'pointer' }}
       />
      );
    })}
 </Carousel>
</SliderStyle>


// SliderStyle 따로 스타일링 (혹시 SliderStyle이 뭔지 헷갈릴까봐 참고용으로 첨부)
const SliderStyle = styled('div')({
  '.slick-dots li': {
    margin: 0,
    marginRight: pxToRem(4),
  },
  '.slick-dots li button:before': {
    opacity: 100,
    color: '#EEEEEE',
  },
  '.slick-dots li.slick-active button:before': {
    opacity: 100,
    color: '#FF7F3F',
  },
  '.slick-dots li, .slick-dots li button, .slick-dots li button:before': {
    width: pxToRem(8),
    height: pxToRem(8),
  },
});