feat: TableOfContents IntersectionObserver rootMargin 커스터마이징 지원

[01-binary]

현황

TableOfContents 컴포넌트의 IntersectionObserver rootMargin이 -10% 0px -20% 0px로 하드코딩되어 있습니다.

https://github.com/01-binary/notion-to-jsx/blob/main/packages/notion-to-jsx/src/components/TableOfContents/index.tsx#L62

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        setActiveId(entry.target.id);
      }
    });
  },
  { rootMargin: '-10% 0px -20% 0px' }
);

요청

레이아웃에 따라 활성 heading 감지 영역을 조정할 수 있도록 rootMargin prop을 지원해야 합니다.

interface TableOfContentsProps {
  headings: Heading[];
  scrollOffset?: number;
  rootMargin?: string; // 기본값: '-10% 0px -20% 0px'
}