[React] react-slick 모바일 클릭시 autoplay 멈춤현상

react-slick을 사용하여 autoplay 설정을 통해 자동으로 다음 item으로 넘어가게 설정해놓았다.

그런데 item에 홈페이지 링크를 달아 클릭시 홈페이지가 열리게 만들었더니 모바일에서 react-slick의 autoplay가 자동으로 멈추는 현상이 발생했다.

수없이 많은 사이트에서 slick에 링크 연결해서 쓸텐데 왜 어째서 도대체 클릭하면 autoplay를 멈추게 라이브러리를 만들어놓은건지 아직도 이해가 불가능하다.

const StyledCarousel = styled(Slider)`  
// 라이브러리 기본 CSS 변경
`;

1. useRef 선언
const sliderRef = useRef(null);

const linkImgs = [
  {
    Img: "이미지경로1",
    pageLink: "실제 url1",
  },
  {
    Img: "이미지경로2",
    pageLink: "실제 url2",
  },
  {
    Img: "이미지경로3",
    pageLink: "실제 url3",
  },
];


3. 캐러셀 Slider의 item 이미지 클릭시 sliderRef.current.slickPlay();
사용하여 멈춘 autoPlay를 재실행
const handleClickImgs = (item) => {
    if (!dragging) {window.open(item, "_blank");
    sliderRef.current.slickPlay();
  }
  

		2. 선언한 useRef를 캐러셀 Slider와 연결
       <StyledCarousel ref={sliderRef} {...settings}>
       {linkImgs.map((item) => (
         <CardBox>
           <CardImg
             src={item.Img}
             onClick={() => {
               handleClickImgs(item.pageLink);
             }}
           />
         </CardBox>
       ))}
     </StyledCarousel>