diff options
Diffstat (limited to 'components/layout/Header.tsx')
| -rw-r--r-- | components/layout/Header.tsx | 54 |
1 files changed, 29 insertions, 25 deletions
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx index 0b04c0c3..0e9e2abe 100644 --- a/components/layout/Header.tsx +++ b/components/layout/Header.tsx @@ -36,7 +36,8 @@ import { MenuSection, MenuItem, mainNavVendor, - additionalNavVendor + additionalNavVendor, + domainBrandingKeys } from "@/config/menuConfig"; import { MobileMenu } from "./MobileMenu"; import { CommandMenu } from "./command-menu"; @@ -44,6 +45,7 @@ import { useSession, signOut } from "next-auth/react"; import GroupedMenuRenderer from "./GroupedMenuRender"; import { useActiveMenus, filterActiveMenus, filterActiveAdditionalMenus } from "@/hooks/use-active-menus"; import { NotificationDropdown } from "./NotificationDropdown"; +import { useTranslation } from '@/i18n/client' export function Header() { const params = useParams(); @@ -51,8 +53,8 @@ export function Header() { const pathname = usePathname(); const { data: session } = useSession(); const { activeMenus, isLoading } = useActiveMenus(); + const { t } = useTranslation(lng, 'menu'); - console.log(session) const userName = session?.user?.name || ""; const domain = session?.user?.domain || ""; @@ -74,7 +76,7 @@ export function Header() { main: mainNavVendor, additional: additionalNavVendor, logoHref: `/${lng}/partners`, - brandName: "eVCP Partners", + brandNameKey: domainBrandingKeys.partners, basePath: `/${lng}/partners` }; } @@ -84,7 +86,7 @@ export function Header() { main: procurementNav, additional: additional2Nav, logoHref: `/${lng}/procurement`, - brandName: "eVCP 구매관리", + brandNameKey: domainBrandingKeys.procurement, basePath: `/${lng}/procurement` }; } @@ -94,7 +96,7 @@ export function Header() { main: salesNav, additional: additional2Nav, logoHref: `/${lng}/sales`, - brandName: "eVCP 기술영업", + brandNameKey: domainBrandingKeys.sales, basePath: `/${lng}/sales` }; } @@ -104,7 +106,7 @@ export function Header() { main: engineeringNav, additional: additional2Nav, logoHref: `/${lng}/engineering`, - brandName: "eVCP 설계관리", + brandNameKey: domainBrandingKeys.engineering, basePath: `/${lng}/engineering` }; } @@ -114,12 +116,12 @@ export function Header() { main: mainNav, additional: additionalNav, logoHref: `/${lng}/evcp`, - brandName: "eVCP 삼성중공업", + brandNameKey: domainBrandingKeys.evcp, basePath: `/${lng}/evcp` }; }; - const { main: originalMain, additional: originalAdditional, logoHref, brandName, basePath } = getDomainConfig(pathname); + const { main: originalMain, additional: originalAdditional, logoHref, brandNameKey, basePath } = getDomainConfig(pathname); // 활성 메뉴만 필터링 (로딩 중이거나 에러 시에는 모든 메뉴 표시) const main = isLoading ? originalMain : filterActiveMenus(originalMain, activeMenus); @@ -150,10 +152,10 @@ export function Header() { d="M3.75 9h16.5m-16.5 6.75h16.5" /> </svg> - <span className="sr-only">Toggle Menu</span> + <span className="sr-only">{t('menu.toggle_menu')}</span> </Button> - {/* 로고 영역 - 도메인별 브랜딩 */} + {/* 로고 영역 - 도메인별 브랜딩 (번역된) */} <div className="mr-4 flex-shrink-0 flex items-center gap-2 lg:mr-6"> <Link href={logoHref} className="flex items-center gap-2"> <Image @@ -164,20 +166,20 @@ export function Header() { height={20} /> <span className="hidden font-bold lg:inline-block"> - {brandName} + {t(brandNameKey)} </span> </Link> </div> - {/* 네비게이션 메뉴 - 도메인별 활성화된 메뉴만 표시 */} + {/* 네비게이션 메뉴 - 도메인별 활성화된 메뉴만 표시 (번역된) */} <div className="hidden md:block flex-1 min-w-0"> <NavigationMenu className="relative z-50"> <div className="w-full overflow-x-auto pb-1"> <NavigationMenuList className="flex-nowrap w-max"> {main.map((section: MenuSection) => ( - <NavigationMenuItem key={section.title}> + <NavigationMenuItem key={section.titleKey}> <NavigationMenuTrigger className="px-2 xl:px-3 text-sm whitespace-nowrap"> - {section.title} + {t(section.titleKey)} </NavigationMenuTrigger> {/* 그룹핑이 필요한 메뉴의 경우 GroupedMenuRenderer 사용 */} @@ -187,6 +189,7 @@ export function Header() { items={section.items} lng={lng} activeMenus={activeMenus} + t={t} /> </NavigationMenuContent> ) : ( @@ -194,11 +197,11 @@ export function Header() { <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] "> {section.items.map((item) => ( <ListItem - key={item.title} - title={item.title} + key={item.titleKey} + title={t(item.titleKey)} href={`/${lng}${item.href}`} > - {item.description} + {item.descriptionKey && t(item.descriptionKey)} </ListItem> ))} </ul> @@ -207,9 +210,9 @@ export function Header() { </NavigationMenuItem> ))} - {/* 추가 네비게이션 항목 - 도메인별 활성화된 것만 */} + {/* 추가 네비게이션 항목 - 도메인별 활성화된 것만 (번역된) */} {additional.map((item) => ( - <NavigationMenuItem key={item.title}> + <NavigationMenuItem key={item.titleKey}> <Link href={`/${lng}${item.href}`} legacyBehavior passHref> <NavigationMenuLink className={cn( @@ -217,7 +220,7 @@ export function Header() { "px-2 xl:px-3 text-sm whitespace-nowrap" )} > - {item.title} + {t(item.titleKey)} </NavigationMenuLink> </Link> </NavigationMenuItem> @@ -233,14 +236,14 @@ export function Header() { <div className="hidden md:block md:w-auto"> <CommandMenu /> </div> - <Button variant="ghost" size="icon" className="md:hidden" aria-label="Search"> + <Button variant="ghost" size="icon" className="md:hidden" aria-label={t('common.search')}> <SearchIcon className="h-5 w-5" /> </Button> {/* 알림 버튼 */} <NotificationDropdown /> - {/* 사용자 메뉴 */} + {/* 사용자 메뉴 (번역된) */} <DropdownMenu> <DropdownMenuTrigger asChild> <Avatar className="cursor-pointer h-8 w-8"> @@ -251,14 +254,14 @@ export function Header() { </Avatar> </DropdownMenuTrigger> <DropdownMenuContent className="w-48" align="end"> - <DropdownMenuLabel>My Account</DropdownMenuLabel> + <DropdownMenuLabel>{t('user.my_account')}</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem asChild> - <Link href={`${basePath}/settings`}>Settings</Link> + <Link href={`${basePath}/settings`}>{t('user.settings')}</Link> </DropdownMenuItem> <DropdownMenuSeparator /> <DropdownMenuItem onSelect={() => signOut({ callbackUrl: `/${lng}/${domain}` })}> - Logout + {t('user.logout')} </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> @@ -274,6 +277,7 @@ export function Header() { activeMenus={activeMenus} domainMain={originalMain} domainAdditional={originalAdditional} + t={t} /> )} </header> |