[UI] Scroll Spy [UI 요소 만들기]

📌 스크롤 스파이(ScrollSpy) 컴포넌트란?

ScrollSpy(스크롤 스파이) 컴포넌트는 페이지에서 특정 요소가 뷰포트(viewport)에 들어오는지 감지하고, 이를 기반으로 UI를 업데이트하는 기능을 합니다. 보통 내비게이션 메뉴와 함께 사용되며, 사용자가 페이지를 스크롤할 때 현재 보고 있는 섹션을 강조하는 데 사용됩니다.

🎯 주요 기능

1. 특정 섹션이 뷰포트에 들어올 때 네비게이션을 활성화
2. 스크롤 위치를 기반으로 현재 섹션을 강조 표시
3. IntersectionObserver 또는 scroll 이벤트를 사용하여 동작

scrollspy

❗️구현 내용

현재 보여지고 있는 요소 확인하기

1. Scroll Event 활용

  useEffect(() => {
    const calculateItems = () => {
      const scrollTop = document.scrollingElement!.scrollTop
      itemsRef.current = data.map((d, i) => {
        const $item = document.getElementById(d.id)
        if (!$item) return null
        const { top, height } = $item.getBoundingClientRect()
        return { elem: $item, top: top + scrollTop, height, index: i }
      })
    }
    calculateItems()

    const resizeObserver = new ResizeObserver(calculateItems)
    resizeObserver.observe(document.scrollingElement!)

    return () => {
      resizeObserver.disconnect()
    }
  }, [])

document.scrollingElement 사이즈의 변화가 있을 때마다 아이템들의 정보(scroll Top) 갱신

 // viewportTop은 document의 resizeObserver를 통해 scrollTop이 감지되고있음
 const setCurrentItem = useCallback(() => {
    const scrollTop = viewportTop * -1
    const target = itemsRef.current.find(
      item =>
        item &&
        scrollTop >= item.top - HeaderHeight - item.height / 2 &&
        scrollTop < item.top - HeaderHeight + item.height / 2,
    )
    if (target) {
      setCurrentIndex(target.index)
      navsRef.current[target.index]?.scrollIntoView({
        block: 'nearest',
        inline: 'center',
        behavior: 'instant',
      })
    }
  }, [viewportTop])


 useEffect(() => {
    setCurrentItem()
  }, [viewportTop])

스크롤 이벤트가 발생할 때마다 viewportTop이 변경되는 것을 활용. 해당 변경이 있을 때마다, 현재 보이는 아이템 계산

• 스크롤탑 + 헤더의 높이보다 top이 아래에 있어야하는 요소 중에 가장 작은 값을 찾음
• 이때, -item.height / 2, +item.height / 2를 통해서 아이템이 반정도 스크롤탑을 넘더라도, 허용. 즉 스크롤을 바로 올리거나 내리자마자 포커싱이 바뀌지 않음

2. Intersection Observer 활용

const IOOptions: IntersectionObserverInit = {
  rootMargin: `-${HeaderHeight}px 0% 0% 0%`,
  threshold: [0.5, 1],
}

const { entries } = useIntersectionObserver(itemsRef, IOOptions)

IntersectionObserverOption을 통해 header만큼 마진을 주었으며, 요소가 절반이 보이지 않더라도 보이는 것으로 처리되게 함

  useEffect(() => {
    const entryIndexes = entries.map(e => +((e.target as HTMLElement).dataset.index || 0))
    const minIndex = Math.min(...entryIndexes)
    const $target = entries.find(e => +((e.target as HTMLElement).dataset.index || 0) === minIndex)
      ?.target as HTMLElement
    const index = $target?.dataset.index
    if (typeof index === 'string') setCurrentItem(+index)
  }, [entries])

entries의 변경을 감지(IntersectionObserverOption 덕분에 이미 조건에 맞는 값들만 감지됨), 가장 작은 index를 발견해서 그 index의 번호를 현재 포커스 하는 요소로 변경

외부에서 특정 버튼을 클릭할 때, 특정 요소로 이동

  const handleNavClick = useCallback(
    (item: unknown, index: number) => () => {
      const scrollTop = document.scrollingElement!.scrollTop
      const itemY = itemsRef.current[index]?.getBoundingClientRect().top || 0
      const top = scrollTop + itemY - HeaderHeight
      window.scrollTo({
        top,
        behavior: 'smooth',
      })
    },
    [],
  )

• 렌더링 할 item정보를 미리 itemRefs의 저장
• index를 바탕으로 items를 index로 접근하며, 해당요소의 위치로 이동

스크롤 이동 시, 헤더의 스크롤 이동 (스크롤 박스 활용)

  const scrollFocus = useCallback((index: number, behavior: 'instant' | 'smooth' = 'instant') => {
    itemsRef.current[index]?.scrollIntoView({
      block: 'nearest',
      inline: 'center',
      behavior,
    })
  }, [])

  useImperativeHandle(
    ref,
    () => ({
      scrollFocus,
    }),
    [],
  )

useImperativeHandle을 활용하여, 부모요소에서 특정 아이템을 화면의 중간으로 이동할 수 있도록 활용

 const setCurrentItem = useCallback((index: number) => {
    setCurrentIndex(index)
    scrollboxRef.current?.scrollFocus(index)
  }, [])

특정 인덱스를 포커스 할 때, 위 함수도 함께 호출하여 헤더의 스크롤도 조작