// useHeroSection 코드 일부분
import useScroll from '@/hooks/useScroll';

const useHeroSection = () => {
	const canvasRef = useRef<HTMLCanvasElement>(null);
	
	const { scrollPosition } = useScroll();	
	const scrollPositionInt = scrollPosition + SCROLL_INTERVAL;

	const createCanvas = (
	    canvas: HTMLCanvasElement,
	    ctx: CanvasRenderingContext2D,
	    x: number,
	    y: number,
	    radius: number
	  ) => {
	    const scale = window.devicePixelRatio;
	    canvas.width = Math.floor(window.innerWidth * scale);
	    canvas.height = Math.floor(window.innerHeight * scale);
	    ctx.scale(scale, scale);
	
	    ctx.beginPath();
	    let circlePath = new Path2D();
	    circlePath.arc(x, y, radius, 0, Math.PI * 2);
	    circlePath.rect(0, 0, window.innerWidth, window.innerHeight);
	    ctx.clip(circlePath, 'evenodd'); // 조명 만들기
	    ctx.fillStyle = '#000000';
	    ctx.fillRect(0, 0, canvas.width, canvas.height);
	    ctx.closePath();
	  };

	const onMouseMove = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
		const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');

		const x = e.nativeEvent.offsetX;
        const y = e.nativeEvent.offsetY;
		const radius = CIRCLE_SIZE * scrollPositionInt;

		{...}

		createCanvas(canvas, ctx, x, y, radius);
	};

	return { onMouseMove, canvasRef };
}

// HeroSection 코드 일부분
const HeroSection: React.FC = () => {
  const { onMouseMove, canvasRef } = useHeroSection();

  return (
    <section onMouseMove={onMouseMove}>
      <div>
        <div css={/*img 스타일*/}>
            <img src={logo} alt="logo" />
        <div>
        <span>아래로 내려주세요.</span>
        <canvas css={/*cavas 스타일*/} ref={canvasRef}></canvas>
      </div>
    </section>
  );
};

import useScroll from '@/hooks/useScroll';

const Landing: React.FC = () => {

  return (
    <div>
      <HeroSection />
      <ViewSection1 />
      <ViewSection2 />
      <ViewSection3 />
      <ViewSection4 />
      <ViewSection5 />
    </div>
  );
};

const HeroSection: React.FC = () => {
	const { scrollPosition } = useScroll(); // 스크롤 위치 값
	// scrollPosition 값으로 애니메이션 제어
}

const ViewSection1: React.FC = () => {
	const { scrollPosition } = useScroll();
	// scrollPosition 값으로 애니메이션 제어
}

const useIntersectionObserver = <T extends Element>(targetRef: RefObject<T>, threshold: number = 0) => {
  const observerRef = useRef<IntersectionObserver>();
  const [isLoaded, setIsLoaded] = useState(false);

  const intersectionCallBack = (entries: IntersectionObserverEntry[], io: IntersectionObserver) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        setIsLoaded(true);
				// 타겟 요소가 화면에 보이는 지 체크
      }
    });
  };

  useEffect(() => {
    if (!observerRef.current) {
      observerRef.current = new IntersectionObserver(intersectionCallBack, {
        threshold, // 타겟 요소의 가시성 퍼센티지를 나타내는 속성
      });
    }

    targetRef.current && observerRef.current.observe(targetRef.current);

    return () => {
      observerRef.current.disconnect();
			// 해당 요소가 언마운트 시 disconnect
    };
  }, [targetRef.current]);

  return { isLoaded };
};

import useIntersectionObserver from './useIntersectionObserver';

const useOnContainerScroll = (container: RefObject<HTMLElement>, onScroll: () => void) => {
  const { isLoaded } = useIntersectionObserver<HTMLElement>(container);

  const dimension = {
    top: 0,
    width: 0,
    height: 0,
    scrollHeight: 0,
    windowHeight: 0,
  };
  const scrollInfo: ScrollInfo = { scrollY: 0, progress: 0 };
  const buffer = 1000;

  let isRunning = false;
  let latestRequestedTime = 0;

  const onRunScroll = () => {
    latestRequestedTime = Date.now();

    if (isRunning) {
      return;
    }

    isRunning = true;

    const play = () => {
      requestAnimationFrame(() => {
        const now = Date.now() - buffer;
        const scrolledY = window.pageYOffset + window.innerHeight;
        scrollInfo.scrollY = Math.max(scrolledY - dimension.top, 0);
        scrollInfo.progress = Math.min(scrollInfo.scrollY / dimension.scrollHeight, 1);

        onScroll();

        if (now < latestRequestedTime) {
          play();
        } else {
          isRunning = false;
        }
      });
    };

    play();
  };

  const setDimension = () => {
		// 현재 container의 수치로 dimension의 값을 할당 함
		dimension.width = container.current.clientWidth;
		{...}
  };

  useEffect(() => {
    if (isLoaded) {
      window.addEventListener('scroll', onRunScroll);
      window.addEventListener('resize', setDimension);
      setDimension();
    }
    return () => {
      window.removeEventListener('scroll', onRunScroll);
      window.removeEventListener('resize', setDimension);
    };
  }, [isLoaded]);

	return { dimension, scrollInfo };
};

import useOnContainerScroll from '@/hooks/useOnContainerScroll';

const ViewSection1 = () => {
  const sectionRef = useRef<HTMLDivElement>(null);

  const { dimension, scrollInfo } = useOnContainerScroll(sectionRef, () => {
    const progress = Math.min(Math.max(0, scrollInfo.scrollY / dimension.windowHeight), 1) * 100;
		// progress 값으로 애니메이션으로 실행 시키면 됩니다.
		if(progress > 30){...}
		if(progress > 80){...}
		{...}
  });
};