fix: TOC 미작동 버그 수정

Author: cobocho

app/layout.tsx

@@ -61,13 +61,13 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ThemeProvider initialTheme="light">
-          <div className="flex overflow-y-hidden">
+          <div className="flex h-screen overflow-y-hidden">
             <div className="fixed top-0 left-0 z-50 hidden h-screen w-80 p-4 md:block">
               <Sidebar categories={categories} />
             </div>
             <div
               id="content-wrapper"
-              className="flex-1 overflow-x-hidden px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
+              className="flex-1 overflow-x-hidden overflow-y-auto px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
             >
               <ScrollRestoration />
               {children}

src/components/post/table-of-contents.tsx

@@ -78,6 +78,22 @@ export const TableOfContents = () => {
           <li key={id} style={{ paddingLeft: `${(level - 1) * 12}px` }}>
             <a
               href={`#${id}`}
+              onClick={(e) => {
+                e.preventDefault();
+                const target = document.getElementById(id);
+                if (target) {
+                  const wrapper = document.getElementById("content-wrapper");
+                  if (wrapper) {
+                    const wrapperRect = wrapper.getBoundingClientRect();
+                    const targetRect = target.getBoundingClientRect();
+                    wrapper.scrollTo({
+                      top: wrapper.scrollTop + targetRect.top - wrapperRect.top - 40,
+                      behavior: "smooth",
+                    });
+                  }
+                }
+                window.history.pushState(null, "", `#${id}`);
+              }}
               className="relative block text-sm leading-snug transition-all duration-200"
             >
               {text}