fix(blog): 긴 TOC 스크롤 영역 복원

긴 블로그 글에서 desktop TOC가 viewport 아래로 넘치면 하단 항목에 접근할 수 없는 문제가 있었어요.

native hash link 동작은 유지하고 TOC 영역에 bottom constraint와 내부 overflow scroll을 복원했어요.

Author: dev-wooyeon

blog/ui/components/TableOfContents.test.tsx

@@ -30,8 +30,11 @@ describe('TableOfContents', () => {
     fireEvent.click(link);
 
     expect(container.querySelector('nav')).toBeNull();
-    expect(document.body.querySelector('nav')).not.toHaveClass('bottom-8');
-    expect(document.body.querySelector('nav > div')).not.toHaveClass('h-full');
+    expect(document.body.querySelector('nav')).toHaveClass('bottom-8');
+    expect(document.body.querySelector('nav > div')).toHaveClass(
+      'h-full',
+      'overflow-y-auto'
+    );
     expect(document.body.querySelector('ul')).toHaveClass('m-0', 'p-0');
     expect(link).toHaveAttribute('href', `#${item.id}`);
     expect(link).toHaveStyle({

blog/ui/components/TableOfContents/TableOfContents.tsx

@@ -52,10 +52,10 @@ export default function TableOfContents({ items }: TableOfContentsProps) {
 
   return createPortal(
     <nav
-      className="fixed right-8 top-20 hidden w-64 xl:block"
+      className="fixed right-8 top-20 bottom-8 hidden w-64 xl:block"
       aria-label="이 글의 목차"
     >
-      <div className="rounded-[var(--radius-md)] bg-[var(--color-grey-50)] p-4">
+      <div className="h-full overflow-y-auto rounded-[var(--radius-md)] bg-[var(--color-grey-50)] p-4">
         <h2 className="text-sm font-semibold text-[var(--color-grey-900)] mb-4 sticky top-0 bg-[var(--color-grey-50)] pb-2">
           이 글의 목차
         </h2>