diff options
Diffstat (limited to 'components/layout/Header.tsx')
| -rw-r--r-- | components/layout/Header.tsx | 117 |
1 files changed, 92 insertions, 25 deletions
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 6d70e6b2..45768a57 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -26,17 +26,30 @@ import { SearchIcon, BellIcon, Menu } from "lucide-react"; import { useParams, usePathname } from "next/navigation"; import { cn } from "@/lib/utils"; import Image from "next/image"; -import { mainNav, additionalNav, MenuSection, MenuItem, mainNavVendor, additionalNavVendor } from "@/config/menuConfig"; // 메뉴 구성 임포트 +import { + mainNav, + additionalNav, + additional2Nav, + procurementNav, + salesNav, + engineeringNav, + MenuSection, + MenuItem, + mainNavVendor, + additionalNavVendor +} from "@/config/menuConfig"; import { MobileMenu } from "./MobileMenu"; import { CommandMenu } from "./command-menu"; import { useSession, signOut } from "next-auth/react"; import GroupedMenuRenderer from "./GroupedMenuRender"; +import { useActiveMenus, filterActiveMenus, filterActiveAdditionalMenus } from "@/hooks/use-active-menus"; export function Header() { const params = useParams(); const lng = params?.lng as string; const pathname = usePathname(); const { data: session } = useSession(); + const { activeMenus, isLoading } = useActiveMenus(); const userName = session?.user?.name || ""; const domain = session?.user?.domain || ""; @@ -45,23 +58,72 @@ export function Header() { .map((word) => word[0]?.toUpperCase()) .join(""); - - const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); // 모바일 메뉴 상태 + const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false); const toggleMobileMenu = () => { setIsMobileMenuOpen(!isMobileMenuOpen); }; - const isPartnerRoute = pathname?.includes("/partners"); + // 도메인별 메뉴 및 브랜딩 정보 가져오기 + const getDomainConfig = (pathname: string) => { + if (pathname?.includes("/partners")) { + return { + main: mainNavVendor, + additional: additionalNavVendor, + logoHref: `/${lng}/partners`, + brandName: "eVCP Partners", + basePath: `/${lng}/partners` + }; + } + + if (pathname?.includes("/procurement")) { + return { + main: procurementNav, + additional: additional2Nav, + logoHref: `/${lng}/procurement`, + brandName: "eVCP 구매관리", + basePath: `/${lng}/procurement` + }; + } + + if (pathname?.includes("/sales")) { + return { + main: salesNav, + additional: additional2Nav, + logoHref: `/${lng}/sales`, + brandName: "eVCP 기술영업", + basePath: `/${lng}/sales` + }; + } + + if (pathname?.includes("/engineering")) { + return { + main: engineeringNav, + additional: additional2Nav, + logoHref: `/${lng}/engineering`, + brandName: "eVCP 설계관리", + basePath: `/${lng}/engineering` + }; + } + + // 기본값: /evcp (전체 메뉴) + return { + main: mainNav, + additional: additionalNav, + logoHref: `/${lng}/evcp`, + brandName: "eVCP 삼성중공업", + basePath: `/${lng}/evcp` + }; + }; - const main = isPartnerRoute ? mainNavVendor : mainNav; - const additional = isPartnerRoute ? additionalNavVendor : additionalNav; + const { main: originalMain, additional: originalAdditional, logoHref, brandName, basePath } = getDomainConfig(pathname); - const basePath = `/${lng}${isPartnerRoute ? "/partners" : "/evcp"}`; + // 활성 메뉴만 필터링 (로딩 중이거나 에러 시에는 모든 메뉴 표시) + const main = isLoading ? originalMain : filterActiveMenus(originalMain, activeMenus); + const additional = isLoading ? originalAdditional : filterActiveAdditionalMenus(originalAdditional, activeMenus); return ( <> - {/* <header className="border-grid sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"> */} <header className="border-grid sticky top-0 z-40 w-full border-b bg-slate-100 backdrop-blur supports-[backdrop-filter]:bg-background/60"> <div className="container-wrapper"> <div className="container flex h-14 items-center"> @@ -88,9 +150,9 @@ export function Header() { <span className="sr-only">Toggle Menu</span> </Button> - {/* 로고 영역 - 항상 표시 */} + {/* 로고 영역 - 도메인별 브랜딩 */} <div className="mr-4 flex-shrink-0 flex items-center gap-2 lg:mr-6"> - <Link href={`/${lng}/evcp`} className="flex items-center gap-2"> + <Link href={logoHref} className="flex items-center gap-2"> <Image className="dark:invert" src="/images/vercel.svg" @@ -99,20 +161,14 @@ export function Header() { height={20} /> <span className="hidden font-bold lg:inline-block"> - {isPartnerRoute - ? "eVCP Partners" - : pathname?.includes("/evcp") - ? "eVCP 삼성중공업" - : "eVCP"} + {brandName} </span> </Link> </div> - {/* 네비게이션 메뉴 - 내부 스크롤 적용, 드롭다운은 제약 없이 표시 */} + {/* 네비게이션 메뉴 - 도메인별 활성화된 메뉴만 표시 */} <div className="hidden md:block flex-1 min-w-0"> - {/* NavigationMenu는 z-index를 높게 설정하여 드롭다운이 제대로 표시되도록 함 */} <NavigationMenu className="relative z-50"> - {/* 스크롤 가능한 메뉴 리스트 컨테이너 */} <div className="w-full overflow-x-auto pb-1"> <NavigationMenuList className="flex-nowrap w-max"> {main.map((section: MenuSection) => ( @@ -124,7 +180,11 @@ export function Header() { {/* 그룹핑이 필요한 메뉴의 경우 GroupedMenuRenderer 사용 */} {section.useGrouping ? ( <NavigationMenuContent> - <GroupedMenuRenderer items={section.items} lng={lng} /> + <GroupedMenuRenderer + items={section.items} + lng={lng} + activeMenus={activeMenus} + /> </NavigationMenuContent> ) : ( <NavigationMenuContent> @@ -144,7 +204,7 @@ export function Header() { </NavigationMenuItem> ))} - {/* 추가 네비게이션 항목 */} + {/* 추가 네비게이션 항목 - 도메인별 활성화된 것만 */} {additional.map((item) => ( <NavigationMenuItem key={item.title}> <Link href={`/${lng}${item.href}`} legacyBehavior passHref> @@ -164,7 +224,7 @@ export function Header() { </NavigationMenu> </div> - {/* 우측 영역 - 고정 너비와 우선순위로 항상 표시되도록 함 */} + {/* 우측 영역 */} <div className="ml-auto flex flex-shrink-0 items-center space-x-2"> {/* 데스크탑에서는 CommandMenu, 모바일에서는 검색 아이콘만 */} <div className="hidden md:block md:w-auto"> @@ -177,11 +237,10 @@ export function Header() { {/* 알림 버튼 */} <Button variant="ghost" size="icon" className="relative" aria-label="Notifications"> <BellIcon className="h-5 w-5" /> - {/* 알림 뱃지 예시 */} <span className="absolute -top-1 -right-1 inline-flex h-2 w-2 rounded-full bg-red-500"></span> </Button> - {/* 사용자 메뉴 (DropdownMenu) */} + {/* 사용자 메뉴 */} <DropdownMenu> <DropdownMenuTrigger asChild> <Avatar className="cursor-pointer h-8 w-8"> @@ -207,8 +266,16 @@ export function Header() { </div> </div> - {/* 모바일 메뉴 */} - {isMobileMenuOpen && <MobileMenu lng={lng} onClose={toggleMobileMenu} />} + {/* 모바일 메뉴 - 도메인별 활성화된 메뉴만 전달 */} + {isMobileMenuOpen && ( + <MobileMenu + lng={lng} + onClose={toggleMobileMenu} + activeMenus={activeMenus} + domainMain={originalMain} + domainAdditional={originalAdditional} + /> + )} </header> </> ); |