📑 목차 스크롤 ( TOC )

Next.js + tailwind css를 이용한 TOC(Table Of Contents) 구현 방법에 대한 정리 포스트입니다.

Next.js를 이용하긴 했지만, 굳이 Next.js가 아니더라도 상관없습니다.

• 참고 사항
  1. 특정 태그의 id가 존재한다면 <a href="#id"> 형태로 만든 앵커를 클릭하면 해당 아이디를 가진 태그가 화면에 보이도록 스크롤이 이동됩니다.
  2. IntersectionObserver는 원하는 태그가 화면에 렌더링될 때 특정 이벤트를 실행하도록 도와주는 API입니다. ( 참고 )
  3. 특정 태그 내부의 텍스트 값을 textContent라고 명칭 하겠습니다.

🧐 구현 방법

1. TOC를 원하는 영역을 모두 포함하는 최상위 태그를 찾는다.
2. 최상위 태그의 하위 태그중에 <h*>태그들을 모두 순서대로 찾는다.
3. <h*>태그들에 각각 id로 textContent를 넣는다.
4. <a href="#textContent">형태로 만들어서 우측 상단에 렌더링한다.
5. ![](https://velog.velcdn.com/images/1-blue/post/ab3cecbd-1094-40f7-898f-02f3b43229d6/image.gif) 를 이용해서 특정 목차가 화면에 렌더링되면 강조 표시해준다.

✨ 코드 적용 예시

import { useEffect, useState } from "react";

// 클래스들을 하나의 문자열로 합쳐주는 헬퍼 함수
import { combineClassNames } from "@src/libs/utils";

const TOC = () => {
  // 목차 리스트 ( index: 목차, size: 목차의 크기 ( h1~h6는 크기를 다르게 렌더링해주기 위함 ) )
  const [indexList, setIndexList] = useState<{ index: string; size: number }[]>([]);
  
  // 현재 보이는 목차 ( 강조 표시 해주기 위함 )
  const [currentIndex, setCurrentIndex] = useState<string>("");

  useEffect(() => {
    // 1. <main> 내부에서만 목차를 만들거라서 <main> 선택
    // 2. <h1>, <h2>, <h3> 찾기 ( h4~h6는 없기도 하고 안쓸거라서 생략 )
    const hNodeList = document
      .querySelector("main")
      ?.querySelectorAll("h1, h2, h3") as NodeListOf<Element>;

    // IntersectionObserver들이 들어갈 배열 ( 이벤트 해제를 위해 )
    const IOList: IntersectionObserver[] = [];
    let IO: IntersectionObserver;

    // 만약 여기서 오류가 난다면 "spread opeartor"는 es6부터 지원되는 문법이라서 그 이전에 사용하기 위해서는 "downlevelIteration"에 대해서 찾아보면 된다.
    [...hNodeList].forEach((node) => {
      // 목차 내용이랑 사이즈 구해서 저장
      const index = node.textContent as string;
      const size = (+node.nodeName[1] - 1) * 20;
      setIndexList((prev) => {
        if (prev.map((v) => v.index).includes(index)) return prev;
        return [...prev, { index, size }];
      });

      // 3. 각 <h*>에 id로 현재 컨텐츠 내용 추가
      node.id = index;

      // 5. 화면에 보이면 강조되도록 "IntersectionObserver" 등록
      IO = new IntersectionObserver(
        ([
          {
            isIntersecting,
            target: { textContent },
          },
        ]) => {
          if (!isIntersecting) return;
          setCurrentIndex(textContent!);
        },
        { threshold: 0.5 }
      );
      IO.observe(node);

      // 이벤트 해제를 위해 등록
      IOList.push(IO);
    });

    // 이벤트 해제
    return () => IOList.forEach((IO) => IO.disconnect());
  }, []);

  return (
    <aside className="fixed top-10 right-10 border-l-4 border-indigo-400 px-4 py-2 bg-white z-10">
      // 4.
      <ul>
        {indexList.map(({ index, size }) => (
          <li
            key={index}
            style={{
              paddingLeft: size + "px",
              fontSize: 17 - size / 12 + "px",
            }}
            className={combineClassNames(
              "transition-all hover:text-blue-600",
              currentIndex === index ? "text-indigo-400 scale-105" : ""
            )}
          >
            <a href={`/#${index}`}>{index}</a>
          </li>
        ))}
      </ul>
    </aside>
  );
};

export default TOC;

🙂 부드러운 스크롤 적용법

html {
  scroll-behavior: smooth;
}