[refactor] createPortal 추가

EunbinJung · EunbinJung · commit 67cfc08ab980 · 2025-09-26T09:21:40.000+09:00
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,10 +18,7 @@ export default function RootLayout({
     <html lang="ko-KR">
       <body className="relative flex flex-col min-h-screen">
         <Header />
-        <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">
-          <div id="observer-target" className="h-[0.5px]"></div>
-          {children}
-        </main>
+        <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">{children}</main>
         <FooterWrapper />
 
         <div id="modal-root"></div>
diff --git a/src/shared/components/header/DropdownMenu.tsx b/src/shared/components/header/DropdownMenu.tsx
@@ -4,9 +4,10 @@ import Close from '@/shared/assets/icons/close_32.svg';
 import User from '@/shared/assets/icons/user_24.svg';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import gsap from 'gsap';
 import { useAuthStore } from '@/shared/@store/auth';
+import { createPortal } from 'react-dom';
 
 interface Props {
   isClicked: boolean;
@@ -54,29 +55,29 @@ function DropdownMenu({ isClicked, setIsClicked, visible, setVisible }: Props) {
     };
   }, [isClicked]);
 
-  const handleMouseEnter = (index: number) => {
-    const el = textRef.current[index];
-    if (!el) return;
-    gsap.to(el, {
-      y: -5,
-      duration: 0.3,
-      ease: 'power1.out',
-    });
-  };
+  // const handleMouseEnter = (index: number) => {
+  //   const el = textRef.current[index];
+  //   if (!el) return;
+  //   gsap.to(el, {
+  //     y: -5,
+  //     duration: 0.3,
+  //     ease: 'power1.out',
+  //   });
+  // };
 
-  const handleMouseLeave = (index: number) => {
-    const el = textRef.current[index];
-    if (!el) return;
-    gsap.to(el, {
-      y: 0,
-      duration: 0.3,
-      ease: 'power1.out',
-    });
-  };
+  // const handleMouseLeave = (index: number) => {
+  //   const el = textRef.current[index];
+  //   if (!el) return;
+  //   gsap.to(el, {
+  //     y: 0,
+  //     duration: 0.3,
+  //     ease: 'power1.out',
+  //   });
+  // };
 
-  return (
+  return createPortal(
     <nav
-      className={`w-full h-screen bg-secondary absolute top-0 left-0 px-[12px] font-serif block sm:hidden ${visible ? 'block' : 'hidden'} `}
+      className={`w-full h-full z-1000 bg-secondary absolute top-0 left-0 px-[12px] font-serif block sm:hidden ${visible ? 'block' : 'hidden'} `}
       role="navigation"
       aria-label="메인 네비게이션 메뉴"
       tabIndex={-1}
@@ -94,7 +95,10 @@ function DropdownMenu({ isClicked, setIsClicked, visible, setVisible }: Props) {
       </div>
       <ul className="flex flex-col gap-[12px] text-black px-2 my-5">
         {navItem.map(({ label, href }, idx) => (
-          <li className={`font-normal ${pathname === href ? 'pl-1' : 'px-3 py-[12px]'}`} key={href}>
+          <li
+            className={`font-normal transition-colors duration-300 ease-in-out ${pathname === href ? 'pl-1' : 'px-3 py-[12px]'}`}
+            key={href}
+          >
             <Link
               href={href}
               onNavigate={() => setIsClicked(false)}
@@ -107,8 +111,8 @@ function DropdownMenu({ isClicked, setIsClicked, visible, setVisible }: Props) {
                 ref={(el) => {
                   textRef.current[idx] = el;
                 }}
-                onMouseEnter={() => handleMouseEnter(idx)}
-                onMouseLeave={() => handleMouseLeave(idx)}
+                // onMouseEnter={() => handleMouseEnter(idx)}
+                // onMouseLeave={() => handleMouseLeave(idx)}
               >
                 {label}
               </span>
@@ -153,7 +157,8 @@ function DropdownMenu({ isClicked, setIsClicked, visible, setVisible }: Props) {
           <Close color="var(--color-primary)" className="w-8 h-8" aria-hidden />
         </button>
       </div>
-    </nav>
+    </nav>,
+    document.body
   );
 }
 
