메가메뉴 닫힘 딜레이이

src/app/components/AppHeader.tsx

@@ -18,6 +18,19 @@ export function AppHeader() {
   const [leftPositions, setLeftPositions] = React.useState<Record<string, number>>({});
   const [panelHeight, setPanelHeight] = React.useState<number>(0);
   const [blockWidths, setBlockWidths] = React.useState<Record<string, number>>({});
+  const closeTimer = React.useRef<number | null>(null);
+
+  const cancelClose = React.useCallback(() => {
+    if (closeTimer.current) {
+      window.clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+
+  const scheduleClose = React.useCallback(() => {
+    cancelClose();
+    closeTimer.current = window.setTimeout(() => setMegaOpen(false), 150);
+  }, [cancelClose]);
   // 카테고리 로드
   React.useEffect(() => {
     fetch("/api/categories", { cache: "no-store" })
@@ -120,8 +133,8 @@ export function AppHeader() {
         {/* 데스크톱 메가메뉴 */}
         <div
           className="relative hidden xl:block pl-10"
-          onMouseEnter={() => setMegaOpen(true)}
-          onMouseLeave={() => setMegaOpen(false)}
+          onMouseEnter={() => { cancelClose(); setMegaOpen(true); }}
+          onMouseLeave={() => { scheduleClose(); }}
           onFocusCapture={() => setMegaOpen(true)}
           onBlurCapture={(e) => {
             const next = (e as unknown as React.FocusEvent<HTMLDivElement>).relatedTarget as Node | null;
@@ -153,8 +166,10 @@ export function AppHeader() {
               megaOpen ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
             style={{ top: headerBottom }}
+            onMouseEnter={() => { cancelClose(); setMegaOpen(true); }}
+            onMouseLeave={() => { scheduleClose(); }}
           >
-            <div className="px-4 py-4 w-screen">
+            <div className="px-4 py-4 w-full max-w-7xl mx-auto overflow-x-hidden">
               <div ref={panelRef} className="relative">
                 {categories.map((cat) => (
                   <div