hjjeong
e208d26e51
RPS 는 탭 기반 라우터라 usePathname() 이 /main 으로 고정됨. 사용자 보고: M-BOM 페이지에서 PageHeader 가 메뉴명을 못 잡아 빈 상태. 수정: useCurrent2ndLevelMenuObjid 와 동일 패턴 적용 - useTabStore.selectTabs / selectActiveTabId 로 활성 탭 조회 - pathname='/main' 이면 활성 탭의 adminUrl 로 매칭 - stripCompanyPrefix 로 /COMPANY_NN 무시 → menu_info.menu_url 양방향 비교 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* PageHeader — 페이지 상단 메뉴명 + 설명 + 액션 슬롯.
|
|
*
|
|
* customer-cs/cs 페이지 패턴 1:1 추출. 모든 RPS 메뉴 페이지의 상단에 의무 배치.
|
|
*
|
|
* 자동 매칭 (탭 시스템 대응):
|
|
* - RPS 는 탭 기반이라 usePathname() 이 /main 으로 고정됨.
|
|
* - useTabStore 의 활성 탭 adminUrl → /COMPANY_NN prefix 제거 → menu_info.menu_url 매칭.
|
|
* - useCurrent2ndLevelMenuObjid 와 동일 패턴.
|
|
*
|
|
* 명시 지정:
|
|
* <PageHeader title="M-BOM 관리" description="생산용 BOM 트리" actions={...} />
|
|
*
|
|
* 원칙:
|
|
* - 모든 page.tsx 의 최상위 자식으로 <PageHeader /> 를 배치한다.
|
|
* - menu_info 에 등록만 되어 있으면 props 없이도 자동 매칭.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { useMenu } from "@/contexts/MenuContext";
|
|
import { useTabStore, selectTabs, selectActiveTabId } from "@/stores/tabStore";
|
|
import type { MenuItem } from "@/lib/api/menu";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PageHeaderProps {
|
|
title?: string;
|
|
description?: string;
|
|
actions?: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
function stripCompanyPrefix(p: string): string {
|
|
return p.replace(/^\/COMPANY_\d+/, "") || "/";
|
|
}
|
|
|
|
function findByUrl(menus: MenuItem[], strippedUrl: string): MenuItem | null {
|
|
// menu_info.menu_url 이 /COMPANY_16/... 으로 저장되어 있으므로 양쪽 비교
|
|
for (const m of menus) {
|
|
if (!m.menu_url) continue;
|
|
if (m.menu_url === strippedUrl) return m;
|
|
if (stripCompanyPrefix(m.menu_url) === strippedUrl) return m;
|
|
}
|
|
let best: MenuItem | null = null;
|
|
let bestLen = 0;
|
|
for (const m of menus) {
|
|
if (!m.menu_url) continue;
|
|
const stripped = stripCompanyPrefix(m.menu_url);
|
|
if (strippedUrl.startsWith(stripped) && stripped.length > bestLen) {
|
|
best = m;
|
|
bestLen = stripped.length;
|
|
}
|
|
}
|
|
return best;
|
|
}
|
|
|
|
export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
|
|
const pathname = usePathname() ?? "";
|
|
const tabs = useTabStore(selectTabs);
|
|
const activeTabId = useTabStore(selectActiveTabId);
|
|
|
|
let menu: MenuItem | null = null;
|
|
try {
|
|
const { userMenus, adminMenus } = useMenu();
|
|
// RPS 탭 시스템: pathname=/main 이면 활성 탭의 adminUrl 사용
|
|
let targetUrl = stripCompanyPrefix(pathname);
|
|
const isRootLike = pathname === "/main" || pathname === "/" || pathname === "";
|
|
if (isRootLike) {
|
|
const activeTab = tabs.find((t: any) => t.id === activeTabId);
|
|
if (activeTab?.adminUrl) {
|
|
targetUrl = stripCompanyPrefix(activeTab.adminUrl);
|
|
}
|
|
}
|
|
menu = findByUrl(userMenus as MenuItem[], targetUrl) ?? findByUrl(adminMenus as MenuItem[], targetUrl);
|
|
} catch {
|
|
/* Provider 밖 — 자동 매칭 생략 */
|
|
}
|
|
|
|
const resolvedTitle = title ?? menu?.menu_name_kor ?? "";
|
|
const resolvedDesc = description ?? menu?.menu_desc ?? "";
|
|
|
|
if (!resolvedTitle && !resolvedDesc && !actions) return null;
|
|
|
|
return (
|
|
<div className={cn("flex flex-shrink-0 items-end justify-between gap-3 border-b pb-3", className)}>
|
|
<div>
|
|
{resolvedTitle && (
|
|
<h1 className="text-xl font-bold tracking-tight">{resolvedTitle}</h1>
|
|
)}
|
|
{resolvedDesc && (
|
|
<p className="text-xs text-muted-foreground">{resolvedDesc}</p>
|
|
)}
|
|
</div>
|
|
{actions && <div className="flex items-center gap-1.5">{actions}</div>}
|
|
</div>
|
|
);
|
|
}
|