[UI] Scroll Box

💡스크롤 박스 컴포넌트란?

스크롤 박스(Scroll Box) 컴포넌트는 콘텐츠가 지정된 크기를 초과할 때 스크롤을 통해 내용을 확인할 수 있도록 하는 UI 요소입니다. 일반적으로 CSS의 overflow 속성을 활용하며, 가로 또는 세로 스크롤을 제공할 수 있습니다.

스크롤 기능뿐만 아니라, 버튼을 통해 이용자가 클릭 시 적절한 양만큼 데이터를 이동시켜 가로로 많은 양의 데이터를 제공해야 할 때 많이 사용하는 컴포넌트입니다.

❗️구현 내용

다수의 element를 받을 수 있는 useIntersectionObserver

const useIntersectionObserver = (
  elemRef: RefObject<Elem | Elem[]>,
  options: IntersectionObserverInit = DefaultOption,
) => {
  const observerRef = useRef<IntersectionObserver>()
  const [entries, setEntries] = useState<IntersectionObserverEntry[]>([])

  useEffect(() => {
    const node = elemRef.current
    const handleIntersect = (entries: IntersectionObserverEntry[]) => {
      setEntries(prev => {
        return Array.from(new Map(prev.concat(entries).map(e => [e.target, e])).values()).filter(
          e => e.isIntersecting,
        )
      })
    }
    if (!node) return

    const observer = new IntersectionObserver(handleIntersect, options)
    observerRef.current = observer
    if (Array.isArray(node)) node.forEach(n => n && observer.observe(n))
    else observer.observe(node)

    return () => {
      observer?.disconnect()
    }
  }, [elemRef, options])

  return {
    entries,
    observerRef,
  }
}

  setEntries(prev => {
        // entries: 새로 변경된 내용
        // prev: 기존 entries
        // 위 둘을 조합해서 newEntries를 만들어야 함. (isIntersecting: true인 애들로만)
        // 중복 제거 / 최신정보 업데이트 => Map을 사용해보겠다.
        return Array.from(new Map(prev.concat(entries).map(e => [e.target, e])).values()).filter(
          e => e.isIntersecting,
        )
      })

IntersectionObserve 는 intersection 정보가 변경된 값들이 있을 때, 변경된 값들을 인자(entries)로 실행되기 때문에 기존 값과 같은 요소들이 있을 수 있습니다.

이러한 중복을 막기 위해 Map객체를 활용하였으며, isIntersecting 즉 화면에 보이는 요소들만 상태로 반환하였습니다

좌우 버튼의 활성화 여부

   const { entries: watcherEntries } = useIntersectionObserver(watcherRef)


  useEffect(() => {
    if (!watcherEntries.length) {
      setButtonEnabled(DefaultButtonState)
    }
    setButtonEnabled(prev => {
      const newState = { ...DefaultButtonState }
      watcherEntries.forEach(e => {
        const direction = (e.target as HTMLLIElement).dataset.direction as Direction
        newState[direction] = false
      })
      return newState
    })
  }, [watcherEntries])


  return (
    <div className={cx('scrollBox', wrapperClassName)}>
      <ul className={cx('list')} ref={listRef}>
        <li
          className={cx('observer')}
          ref={r => {
            watcherRef.current[0] = r
          }}
          data-direction="prev"
        />
                {... 중략}
        <li
          className={cx('observer')}
          ref={r => {
            watcherRef.current[1] = r
          }}
          data-direction="next"
        />
      </ul>
      <button
        className={cx('nav-button', 'prev', { on: buttonEnabled.prev })}
        onClick={() => move('prev')}
      />
      <button
        className={cx('nav-button', 'next', { on: buttonEnabled.next })}
        onClick={() => move('next')}
      />
    </div>
  )

좌해당 리스트가 끝인지 아닌지를 확인하기 위해 각각에 숨김요소를 넣고, 이 요소들을 useInterscetionObserver를 활용하여 감시하여 줍니다. 위에서 본 것처럼 useIntersectionObserver의 enties는 현재 보이고 있는 요소들을 배열로 반환하기 때문에, 해당요소 (ex:prev)가 보인다면 그 값을 false로 바꾸어 버튼을 비활성화 처리합니다.

얼마나 이동할지 결정함는 함수

각 버튼을 클릭할 때, 어떻게 다음 페이지를 보여주는 로직입니다.

  const move = useCallback((direction: Direction) => {
    if (!listRef.current || !itemsRef.current.length) return
    const { left, right } = getVisibileEdgeItems(listRef.current, itemsRef.current)
    const elem = direction === 'prev' ? left : right // 보여지는 맨 끝 아이템!
    elem?.scrollIntoView({
      inline: direction === 'prev' ? 'end' : 'start', // 가로위치 'start' | 'end' | 'nearest' | 'center'
      block: 'nearest', // 세로위치 'start' | 'end' | 'nearest' | 'center'
      behavior: 'smooth', // 애니메이션 유무. smooth: O / instant: X / auto: 알아서...
    })
  }, [])

getVisibleEdgeItems를 활용해서 현재 보여지는 양 끝 아이템을 찾았고, 현재 클릭한 버튼에 따라(ex: prev) 현재 가장 왼쪽에 있는 요소가 가로위치 오른쪽 끝으로 이동하게 하였습니다.

뷰포트 내에서 좌우 끝에있는 요소를 구하는 함수

const getVisibileEdgeItems = ($list: HTMLUListElement, $items: ItemElemType[]) => {
  const { left: lLeft, right: lRight } = $list.getBoundingClientRect()
  const isVisible = ($item: ItemElemType) => {
    const { left, right } = $item?.getBoundingClientRect() || { left: 0, right: 0 }
    // 전부 화면상에 존재하는 조건: left >= lLeft && right <= lRight
    // 애매하게 걸친 경우까지 인정하는 조건: left <=lRight && right >= lLeft
    return left <= lRight && right >= lLeft // 애매하게 보이는 경우까지 모두 포함시킴.
  }
  const leftIndex = Math.max($items.findIndex(isVisible), 0)
  const rightIndex = Math.min($items.findLastIndex(isVisible), $items.length - 1)
  return { left: $items[leftIndex], right: $items[rightIndex] }
}

내부요소들을 감싸는 ul요소와 내부요소들 li를 인자로 받는 함수입니다. ul요소의 getBoundingClientRect를 활용해서 ul 요소의 왼쪽과 오른쪽의 뷰포트기준 상대좌표를 구합니다.

isVisible은 li요소들의 상대좌표를 구하는 함수입니다.

만약 li의 left가 ul의 left → lleft 보다 크고, right 가 lright 보다 작다면 현재 그 요소는 완벽하게 보이고 있는 상태입니다.

반면에, left 가 lleft 보다 작지만, right 가 lright 보다 작다면 왼쪽에 걸치고 있는 상태 즉 보이는 요소 중에 가장 왼쪽에 있는 경우이며, 그 반대는 오른쪽에 걸친 상태입니다.

위 예시는 걸치는 경우도 isVisible로 포함하여 가장 왼쪽요소와 오른쪽 요소를 찾고 있습니다.

이렇게 반환된 값이 위의 move로 전달되어 prev 기준 가장 오른쪽에 있는 요소가 뷰포트 가장 왼쪽으로, next 기준 가장 왼쪽에 있는 요소가 뷰포트 가장 오른쪽으로 이동되게 합니다.

끝으로

IntersectionObserver와 getBoundingClient를 활용해서 현재 요소가 보이고있는지 안 보이고 있는지, 또한 어떤 요소가 양끝에 있는지 파악할 수 있었습니다. 가로 스크롤 박스에 경우에는 캐러셀이나 이미지슬라이드와 비슷하지만 오토슬라이드가 없다는 점에서 구현이 훨씬 간단했습니다.

이런 비슷한 요구사항에 보통 slider나 slick 과 같은 라이브러리를 많이 사용하는데 이와 같이 비교적 간단한 기능에는 이렇게 직접 구현하는 게 오히려 시간이 덜 들 수도 있을 것 같습니다.