diff options
| -rw-r--r-- | components/layout/Header.tsx | 51 |
1 files changed, 40 insertions, 11 deletions
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index c5c83e64..b3d9ee6a 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -3,7 +3,6 @@ import * as React from "react"; import Link from "next/link"; import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; import { DropdownMenu, @@ -22,7 +21,7 @@ import { NavigationMenuTrigger, navigationMenuTriggerStyle, } from "@/components/ui/navigation-menu"; -import { SearchIcon, BellIcon, Menu } from "lucide-react"; +import { SearchIcon } from "lucide-react"; import { useParams, usePathname, useSearchParams } from "next/navigation"; import { cn } from "@/lib/utils"; import Image from "next/image"; @@ -34,7 +33,6 @@ import { salesNav, engineeringNav, MenuSection, - MenuItem, mainNavVendor, additionalNavVendor, domainBrandingKeys @@ -58,20 +56,29 @@ export function Header() { const userName = session?.user?.name || ""; - const domain = session?.user?.domain || ""; const initials = userName .split(" ") .map((word) => word[0]?.toUpperCase()) .join(""); const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); + const [openMenuKey, setOpenMenuKey] = React.useState<string>(""); const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen); }; + const toggleMenu = React.useCallback((menuKey: string) => { + setOpenMenuKey(prev => prev === menuKey ? "" : menuKey); + }, []); + + // 페이지 이동 시 메뉴 닫기 + React.useEffect(() => { + setOpenMenuKey(""); + }, [pathname]); + // 도메인별 메뉴 및 브랜딩 정보 가져오기 - const getDomainConfig = (pathname: string) => { + const getDomainConfig = (pathname: string | null) => { if (pathname?.includes("/partners")) { return { main: mainNavVendor, @@ -175,18 +182,35 @@ export function Header() { {/* 네비게이션 메뉴 - 도메인별 활성화된 메뉴만 표시 (번역된) */} <div className="hidden md:block flex-1 min-w-0"> - <NavigationMenu className="relative z-50"> + <NavigationMenu + className="relative z-50" + value={openMenuKey} + > <div className="w-full overflow-x-auto pb-1"> <NavigationMenuList className="flex-nowrap w-max"> {main.map((section: MenuSection) => ( - <NavigationMenuItem key={section.titleKey}> - <NavigationMenuTrigger className="px-2 xl:px-3 text-sm whitespace-nowrap"> + <NavigationMenuItem key={section.titleKey} value={section.titleKey}> + <NavigationMenuTrigger + className="px-2 xl:px-3 text-sm whitespace-nowrap" + onClick={(e) => { + e.preventDefault(); + e.stopPropagation(); + toggleMenu(section.titleKey); + }} + onPointerEnter={(e) => e.preventDefault()} + onPointerMove={(e) => e.preventDefault()} + > {t(section.titleKey)} </NavigationMenuTrigger> {/* 그룹핑이 필요한 메뉴의 경우 GroupedMenuRenderer 사용 */} {section.useGrouping ? ( - <NavigationMenuContent className="max-h-[80vh] overflow-y-auto"> + <NavigationMenuContent + className="max-h-[80vh] overflow-y-auto" + onPointerEnter={(e) => e.preventDefault()} + onPointerLeave={(e) => e.preventDefault()} + forceMount={openMenuKey === section.titleKey ? true : undefined} + > <GroupedMenuRenderer items={section.items} lng={lng} @@ -195,7 +219,12 @@ export function Header() { /> </NavigationMenuContent> ) : ( - <NavigationMenuContent className="max-h-[70vh] overflow-y-auto"> + <NavigationMenuContent + className="max-h-[70vh] overflow-y-auto" + onPointerEnter={(e) => e.preventDefault()} + onPointerLeave={(e) => e.preventDefault()} + forceMount={openMenuKey === section.titleKey ? true : undefined} + > <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> {section.items.map((item) => ( <ListItem @@ -317,7 +346,7 @@ ListItem.displayName = "ListItem"; export function RouteLogger() { const path = usePathname(); - const qs = useSearchParams().toString(); + const qs = useSearchParams()?.toString(); React.useEffect(() => { console.log("[URL]", path + (qs ? "?" + qs : "")); }, [path, qs]); |