fix: 루트 overflow 수정

Author: cobocho

app/layout.tsx

@@ -1,6 +1,5 @@
 import "./globals.css";
 
-import { AnimatePresence } from "motion/react";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 
@@ -61,21 +60,19 @@ export default async function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ThemeProvider initialTheme="light">
-          <AnimatePresence>
-            <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 overflow-y-scroll px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
-              >
-                <ScrollRestoration />
-                {children}
-              </div>
-              <MobileBottomTab />
+          <div className="flex 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>
-          </AnimatePresence>
+            <div
+              id="content-wrapper"
+              className="flex-1 overflow-x-hidden px-4 pb-24 md:pb-0 md:pl-84 lg:pr-0"
+            >
+              <ScrollRestoration />
+              {children}
+            </div>
+            <MobileBottomTab />
+          </div>
         </ThemeProvider>
       </body>
     </html>

app/search/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import { SITE_NAME } from "@/constants/site-metadata";
+
 import { SearchPageClient } from "../../src/components/search/search-page-client";
 
 export const metadata: Metadata = {

src/components/post/post-detail.tsx

@@ -127,7 +127,7 @@ export const PostDetail = ({
       </motion.div>
 
       <motion.div
-        className="relative z-50 hidden w-[280px] shrink-0 border-l bg-white/90 p-6 backdrop-blur-md min-[1600px]:block dark:border-neutral-700 dark:bg-neutral-900/90"
+        className="fixed top-0 right-0 z-50 hidden h-screen w-[280px] overflow-hidden border-l bg-white/90 p-6 backdrop-blur-md min-[1600px]:block dark:border-neutral-700 dark:bg-neutral-900/90"
         initial={{ opacity: 0, x: 40 }}
         animate={{ opacity: 1, x: 0 }}
       >

src/components/post/sticky-post-header.tsx

@@ -26,17 +26,16 @@ export function StickyPostHeader({ title, onBack }: StickyPostHeaderProps) {
 
   useEffect(() => {
     const sentinel = sentinelRef.current;
-    if (!sentinel) return;
 
-    const root = document.getElementById("content-wrapper");
+    if (!sentinel) return;
 
     const observer = new IntersectionObserver(
       ([entry]) => {
         const isVisible = !entry.isIntersecting;
         setVisible(isVisible);
         if (isVisible) updateRect();
       },
-      { root, threshold: 0 },
+      { root: null, threshold: 0 },
     );
 
     observer.observe(sentinel);