useIntersectionObserver: 무한 스크롤과 레이지 로딩의 핵심

// ❌ 크리스의 성능 파괴자
useEffect(() => {
  const handleScroll = () => {
    // 매번 스크롤 위치를 수학적으로 계산한다.
    const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
    
    // 바닥에 닿았는지 1px 단위로 체크
    if (scrollTop + clientHeight >= scrollHeight - 10) {
      loadMoreItems();
    }
  };

  // 스크롤 할 때마다 수백 번씩 실행됨 (메인 스레드 점유)
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

// useIntersectionObserver.ts
import { useEffect, useState, RefObject } from 'react';

// 옵션 타입 (감도 조절 등)
interface Args extends IntersectionObserverInit {
  freezeOnceVisible?: boolean; // 한 번 보이면 감시 중단할지 여부
}

export function useIntersectionObserver(
  elementRef: RefObject<Element>,
  {
    threshold = 0.1, // 10% 보이면 감지
    root = null, // null이면 브라우저 뷰포트 기준
    rootMargin = '0%', // 마진 (미리 감지하고 싶을 때 사용)
    freezeOnceVisible = false,
  }: Args = {}
): IntersectionObserverEntry | undefined {
  const [entry, setEntry] = useState<IntersectionObserverEntry>();
  const [frozen, setFrozen] = useState(false);

  useEffect(() => {
    const node = elementRef?.current; // 감시할 DOM 요소
    const hasIOSupport = !!window.IntersectionObserver;

    // 지원하지 않거나 이미 한 번 보여서 멈춘 상태라면 패스
    if (!hasIOSupport || frozen || !node) return;

    const observerParams = { threshold, root, rootMargin };

    const observer = new IntersectionObserver(([entry]) => {
      // 교차 상태 업데이트
      setEntry(entry);

      // 한 번만 감지하고 싶다면 감시 중단 (예: 레이지 로딩)
      if (entry.isIntersecting && freezeOnceVisible) {
        setFrozen(true);
      }
    }, observerParams);

    observer.observe(node); // 감시 시작

    return () => observer.disconnect(); // 클린업: 감시 종료
  }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen]);

  return entry;
}

// ProductList.tsx
function ProductList() {
  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(...);
  
  // 1. 바닥 감지용 Ref 생성
  const bottomRef = useRef<HTMLDivElement>(null);
  
  // 2. 훅 연결
  const entry = useIntersectionObserver(bottomRef, {});
  const isIntersecting = !!entry?.isIntersecting;

  // 3. 바닥이 보이면 다음 페이지 불러오기
  useEffect(() => {
    if (isIntersecting && hasNextPage) {
      fetchNextPage();
    }
  }, [isIntersecting]);

  return (
    <div>
      {data.map(item => <ProductItem key={item.id} {...item} />)}
      
      {/* 이 투명한 박스가 화면에 들어오면 추가 로딩 */}
      <div ref={bottomRef} style={{ height: 20 }} />
    </div>
  );
}

function LazyImage({ src, alt }: { src: string; alt: string }) {
  const ref = useRef<HTMLImageElement>(null);
  
  // 한 번 보이면 감시를 중단한다 (freezeOnceVisible: true)
  const entry = useIntersectionObserver(ref, { freezeOnceVisible: true });
  const isVisible = !!entry?.isIntersecting;

  return (
    <div ref={ref} className="image-placeholder">
      {/* 화면에 들어왔을 때만 src를 할당 */}
      {isVisible && <img src={src} alt={alt} />}
    </div>
  );
}