Nextjs에서 TOC 구현하기

오늘은 남들 다 달려있는 TOC를 만들어보기로 했다.

나는 지금 마크다운으로 쓴 글을 next-mdx-remote로 컴파일해서 보여주고 있다.

rehype-slug로 이미 제목 태그마다 모두 아이디가 부여되어 있으니 이미 반은 준비되어 있다.

일단은 useEffect와 querySelectorAll로 간단하게 만들어보자.

1. 간단하게 TOC 만들어보기

뭔가 처음 시도해보는 것이라 길을 찾지 못할 때는 질문하는 법을 아는 것도 능력이다.

조언할 사람이 없는 나같은 독학러들은 뤼튼, 클로드, 지피티 같은 큰 형님들에게 조언을 구하는게 가장 빠른 길.

큰 형님들에게 받은 코드를 조금 고쳐서 써보았다.

"use client";

import { useEffect, useState } from "react";

interface StringKeyValue {
  [key: string]: string;
}

export default function TOC() {
  const [headings, setHeadings] = useState<StringKeyValue[]>([]);
  const [toc, setToc] = useState(false);

  // 먼저 컴포넌트가 로드되면 1번 실행한다.
  useEffect(() => {
    // querySelectorAll로 h2, h3, h4 수준의 태그들을 찾는다.
    const hTags = document.querySelectorAll<HTMLHeadingElement>("h2, h3, h4");
    // 요소들을 배열로 만들어준다.
    const headings = [...hTags];
    if (headings.length == 0) {
      return;
    }
    setToc(true);

    // 요소에서 TOC를 만들기 위해 필요한 내용만 추출
    const allHeadings = headings.map((heading) => ({
      text: heading.innerText,
      id: heading.id || heading.innerText.replace(/\s+/g, "-").toLowerCase(),
      tagName: heading.tagName,
    }));

    setHeadings(allHeadings);
  }, []);

  return (
    toc && (
      // TOC는 게시물의 바로 옆에 오도록 calc로 위치를 계산해 주었다.
      <div className="fixed hidden xl:block top-40 w-64 p-4 left-[calc(50%+390px)]">
        <div className="text-2xl mb-4">Contents</div>
        <div className="pl-2">
          <ul className="prose">
            {headings.map((heading) => (
              // 어차피 h4 수준 까지 들어갈 일은 없어서 h3 태그 까지만 클래스를 설정했다.
              <li
                key={heading.id}
                className={`${
                  heading.tagName == "H3" && "pl-6"
                } border-l-2 border-gray-200`}
              >
                <a
                  href={`#${heading.id}`}
                  className={`block no-underline pl-2`}
                >
                  // 제목에 1. 2. 과 같은 숫자를 항상 붙여주기에 replace와
                  정규형으로 제거해 줌.
                  {heading.text.replace(/^\d+\.\s*/, "")}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    )
  );
}

그리고 globals.css에서 스크롤에 smooth 옵션을 주면 이동시 스크롤이 부드러워진다.

어차피 딱딱한 스크롤은 별로 쓸데가 없으니 상남자처럼 글로벌로 집어넣었다.

@layer base {
    html {
        scroll-behavior: smooth;
    }
}

클릭 테스트를 해보았다.

잘된다.

이제 intersection observer로 뷰포인트 안에 들어온 태그들을 강조해주자.

2. Intersection Observer

함수에 들어가는 파라미터들은 아래와 같다.

const options = {
  root: null, // 기본값은 뷰포트. 기준이 될 htmlelement 등록 가능.
  rootMargin: '0px', // 뷰포트 경계 설정.
  threshold: 0.5 // 50%가 뷰포트로 들어오면 콜백 호출
};

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`${entry.target.id}가 보임.`);
    } else {
      console.log('${entry.target.id}가 보임.');
    }
  });
}, options);

// 관찰할 요소 선택
const target = document.querySelector('#target');
observer.observe(target);

useRef로 옵저버 변수를 하나 만들고 여기에 인터렉션 옵저버를 할당하자.

코드는 ssoon-m님의 velog를 참고했다.

export default function TOC() {

...
  const observer = useRef<IntersectionObserver>();
  const [activeToc, setActiveToc] = useState("");

  useEffect(() => {

    ...
    // observer.current로 인터렉션 옵저버 할당
    observer.current = new IntersectionObserver(
      (entries) => {
        // 감시하는 요소들 중 인터렉션 중인 요소의 아이디를 activeToc로 등록
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          setActiveToc(entry.target.id);
        });
      },
      {
        // 최상단부터 최하단에서 -70%인 지점 사이를 감시
        rootMargin: "0px 0px -70% 0px",
        threshold: 0.8,
      }
    );

    ...
    const allHeadings = headings.map((heading) => {
        //인터렉션옵저버에서 요소를 감시함.
      observer.current?.observe(heading);
    ...
    });

    ...
    //return에 익명함수를 호출하면서 cleanup 함수를 부여함.
    return () => observer.current?.disconnect();
  }, []);

  return (
    toc && (
        ...
        // 대충 현재 제목 강조하는 클래스 부여
            {headings.map((heading) => (
              <li
                key={heading.id}
                className={`${
                  heading.tagName === "H3" && "pl-6"
                } ${activeToc == heading.id ? "border-l-4 border-gray-500":"border-l-2 border-gray-200"} `}
              >
                <a
                  href={`#${heading.id}`}
                  className={`block no-underline pl-2 ${
                    activeToc == heading.id ? "text-black font-black" : "text-gray-500"
                  }`}
                >
        ...
  );
}