<!-- HTML 예시 -->
<div id="마크다운_컨텐츠_컨테이너">
  <!-- 마크다운 본문 -->
  <div class="md">
    <!-- ... -->
    <h1 id="1-%EA%B0%9C%EC%9A%94">1. 개요</h1>
    <!-- ... -->
    <h1 id="2-%EA%B5%AC%ED%98%84">2. 구현</h1>
    <!-- ... -->
    <h1 id="3-%EB%8B%A4%EC%9D%8C">3. 다음</h1>
    <!-- ... -->
    <h1 id="4-%EC%B0%B8%EA%B3%A0">4. 참고</h1>
    <!-- ... -->
  </div>
  <!-- 목차 -->
  <div class="toc">
    <ul>
      <li><a href="#1-%EA%B0%9C%EC%9A%94">1. 개요</a></li>
      <li><a href="#2-%EA%B5%AC%ED%98%84">2. 구현</a></li>
      <li><a href="#3-%EB%8B%A4%EC%9D%8C">3. 다음</a></li>
      <li><a href="#4-%EC%B0%B8%EA%B3%A0">4. 참고</a></li>
    </ul>
  </div>
</div>

/* src/components/MdxContent.tsx */

// ...

@media (min-width: 1100px) {
  .toc {
    position: absolute;
    top: 8px;
    left: calc(50% + 400px);
    height: 100%;

    // ...

    > ul {
      position: sticky;
      top: 10px;
      // ...
    }

    .highlight {
      color: #ffffff;
      text-decoration: underline;
      code {
        color: #ffffff;
        text-decoration: underline;
      }
    }
  }
  // ...
}

// src/pages/posts/{mdx.frontmatter__slug}.tsx

// ...

function PostDetailPage({ data, children }: PageProps<PostDetailPageData>) {
  // 마크다운 컨텐츠 컨테이너의 ref
  const ref = React.useRef<HTMLDivElement>();

  // ...

  React.useEffect(() => {
    // 마크다운 컨텐츠 내에 있는 헤딩 엘리먼트들을 `headingElements` 변수에 넣는다.
    const headingElements = ref.current?.querySelectorAll<HTMLElement>(
      ".md h1, .md h2, .md h3, .md h4, .md h5, .md h6"
    );

    // `headingElements` 에게 적용할 `IntersectionObserver`
    const observer = new IntersectionObserver(
      // `headingElements` 전체에 이 옵저버를 적용할 것이므로
      // 이벤트의 대상인 `entries` 는 하나일 수도 있고 여럿일 수도 있다.
      // (이 클래스 생성자의 두 번째 인자가 `{ threshold: 1.0 }` 이기 때문에
      //  `entries` 가 빈 배열일 수는 없다.)
      (entries) => {
        const targets = entries.filter(
          // threshold 를 1 로 해놓아도 `intersectionRatio` 가 1보다 작은 경우가 존재한다.
          // `IntersectionObserver` 가 비동기적이기 때문에,
          // 이벤트가 발생한 시점과 이 리스너가 실행되는 시점이 살짝 달라서 생기는 오차인 것 같다.
          // 일단 확실히 보이는 경우에만 보이는 걸로 처리하고 싶으니까 필터링을 해준다.
          (entry) => entry.isIntersecting && entry.intersectionRatio >= 1
        );

        // 대상이 하나도 없을 때는 아무 일도 하지 않는다.
        if (targets.length === 0) {
          return;
        }

        // 대상이 하나 이상 있을 때는 기존에 하이라이팅 처리된 엘리먼트들에서
        // 하이라이팅 처리를 비활성화 해준다.
        ref.current
          ?.querySelectorAll(".highlight")
          .forEach((element) => element.classList.remove("highlight"));

        // 대상들을 순회하면서
        targets.forEach((it) => {
          // 대상 헤딩 엘리먼트의 id 어트리뷰트를 추출하고
          const targetId = it.target.getAttribute("id");
          // 그 아이디 값을 href 어트리뷰트로 갖고 있는 목차 내 앵커 아이템을 찾아서
          const linkSelector = `.toc a[href='#${encodeURI(targetId ?? "")}']`;
          const linkElement = ref.current?.querySelector(linkSelector);
          // 해당 앵커 엘리먼트를 하이라이팅 해준다.
          linkElement?.classList.add("highlight");
        });
      },
      { threshold: 1.0 }
    );

    // `headingElements` 들에게 위에서 작성한 옵저버를 적용한다.
    headingElements?.forEach((element) => observer.observe(element));

    return () => observer.disconnect();
  }, []);

  // ...

  return (
    <Layout>
      {/* ... */}
      <PostContent ref={ref as React.RefObject<HTMLDivElement>}>
        {children}
      </PostContent>
    </Layout>
  );
}

// ...

// src/pages/posts/{mdx.frontmatter__slug}.tsx

// ...

React.useEffect(() => {
  const headingElements = ref.current?.querySelectorAll<HTMLElement>(
    ".md h1, .md h2, .md h3, .md h4, .md h5, d h6"
  );

  const observer = new IntersectionObserver(
    // 이벤트의 대상인 `entries` 에는 이제 관심이 없어졌다.
    // 우리는 이벤트가 발생했는지 여부에만 관심이 있다.
    (/* entries */) => {
      if (!headingElements) {
        return;
      }

      const offset = 10;
      // 현재 스크롤 위치를 가져온다.
      // 마크다운 컨텐츠 컨테이너가 `position: relative;` 이므로
      // 해당 엘리먼트의 위치도 더해줘야 한다.
      const scrollTop =
        document.documentElement.scrollTop +
        offset -
        (ref.current?.offsetTop ?? 0);

      let targetHeading;
      // `targetElements` 를 차례로 순회하며
      for (let i = 0; i < headingElements.length; i++) {
        // `scrollTop` 보다 더 아래에 있는 엘리먼트를 발견한 순간,
        if (headingElements[i].offsetTop > scrollTop) {
          // 바로 그 직전의 헤딩 엘리먼트를 `targetHeading` 변수에 저장한다.
          // 화면 최상단의 표시되는 컨텐츠의 제목이 바로 이 엘리먼트다.
          // 만약 없다면 `null` 을 넣어줘서 제일 위 제목보다도 윗 영역에
          // 스크롤되었다는 것을 표시한다.
          targetHeading = headingElements[i - 1] ?? null;
          break;
        }
      }
      // `targetElements` 를 모두 순회했는데도 `targetHeading` 을 못찾았다면
      // 가장 마지막 헤딩 엘리먼트가 `targetHeading` 이다.
      if (targetHeading === undefined) {
        targetHeading = headingElements[headingElements.length - 1];
      }

      ref.current
        ?.querySelectorAll(".highlight")
        .forEach((element) => element.classList.remove("highlight"));

      // `targetHeading` 엘리먼트와 연결된 목차의 링크를 하이라이팅 해준다.`
      if (targetHeading) {
        const targetId = targetHeading.getAttribute("id");
        const linkSelector = `.toc a[href='#${encodeURI(targetId ?? "")}']`;
        const linkElement = ref.current?.querySelector(linkSelector);
        linkElement?.classList.add("highlight");
      }
    },
    {
      // 화면 전체가 아닌 화면 최상단에서만 옵저버를 실행시켜야 정확하다.
      rootMargin: "0px 0px -90% 0px",
      // 헤딩 엘리먼트가 보이게 되었을 때 혹은 안 보이게 되었을 때 모두 실행시켜야 좀 더 정확하다.
      threshold: [0, 1.0],
    }
  );

  headingElements?.forEach((element) => observer.observe(element));

  return () => observer.disconnect();
}, []);