자동 슬라이더가 활성화되면 페이지 스크롤이 이동합니다.

const delay = 3000;

export default function Banner() {
  const [index, setIndex] = useState(0);
  const timeoutRef = useRef<any>(null);

  const banners = [...];

  const handleIndex = (prop: number) => {
    if (prop <= 0) {
      setIndex(0);

      return;
    }

    if (prop >= banners.length - 1) {
      setIndex(banners.length - 1);

      return;
    }

    setIndex(prop);
  };

  const resetTimeout = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  };

  useEffect(() => {
    resetTimeout();

    timeoutRef.current = setTimeout(() => {
      if (index >= banners.length - 1) {
        setIndex(0);

        return;
      }

      setIndex(index + 1);
    }, delay);

    return () => {
      resetTimeout();
    };
  }, [index]);

  return <Template index={index} banners={banners} handleIndex={handleIndex} />;
}