메뉴 사이드바 구조처리리
This commit is contained in:
parent
f82393c9bd
commit
7ece0dd180
@ -11,9 +11,6 @@ import { api } from "@/lib/api";
|
||||
import {
|
||||
Building2,
|
||||
Box,
|
||||
DollarSign,
|
||||
Users,
|
||||
Sliders,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Calendar,
|
||||
@ -42,100 +39,138 @@ interface DBApiResponse {
|
||||
}
|
||||
}
|
||||
|
||||
interface MenuItem {
|
||||
id: string; // id 추가
|
||||
interface ProcessedMenuItem {
|
||||
id: string;
|
||||
title: string;
|
||||
items: {
|
||||
id: string; // id 추가
|
||||
title: string;
|
||||
href: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}[];
|
||||
href?: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
items?: ProcessedMenuItem[];
|
||||
}
|
||||
|
||||
interface MenuItemProps {
|
||||
item: MenuItem;
|
||||
isOpen: boolean;
|
||||
onToggle: () => void;
|
||||
item: ProcessedMenuItem;
|
||||
depth: number;
|
||||
openSections: { [key: string]: boolean };
|
||||
onToggle: (id: string) => void;
|
||||
pathname: string;
|
||||
}
|
||||
|
||||
const MenuItemComponent: React.FC<MenuItemProps> = ({
|
||||
item,
|
||||
isOpen,
|
||||
onToggle,
|
||||
pathname,
|
||||
}) => {
|
||||
const IconComponent = Box;
|
||||
item,
|
||||
depth,
|
||||
openSections,
|
||||
onToggle,
|
||||
pathname,
|
||||
}) => {
|
||||
const hasChildren = item.items && item.items.length > 0;
|
||||
const isOpen = openSections[item.id];
|
||||
const IconComponent = item.icon || Box;
|
||||
|
||||
return (
|
||||
<div className="mb-1">
|
||||
<button
|
||||
onClick={onToggle}
|
||||
className={cn(
|
||||
"w-full flex items-center px-3 py-2 text-sm font-medium rounded-md",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-gray-100",
|
||||
isOpen ? "text-blue-600 bg-blue-50" : "text-gray-700"
|
||||
// 들여쓰기 계산
|
||||
const getIndentClass = (depth: number) => {
|
||||
if (depth === 0) return "px-3";
|
||||
if (depth === 1) return "px-3 pl-7";
|
||||
return "px-3 pl-11";
|
||||
};
|
||||
|
||||
const itemContent = (
|
||||
<>
|
||||
<IconComponent className="h-4 w-4 mr-2 flex-shrink-0 text-gray-600" />
|
||||
<span className="flex-1 text-left text-sm">{item.title}</span>
|
||||
{hasChildren && (
|
||||
<div className="flex items-center">
|
||||
{isOpen
|
||||
? <ChevronDown className="h-4 w-4 text-gray-400" />
|
||||
: <ChevronRight className="h-4 w-4 text-gray-400" />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<IconComponent className="h-5 w-5 mr-2" />
|
||||
<span className="flex-1 text-left">{item.title}</span>
|
||||
{isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
|
||||
{isOpen && (
|
||||
<div className="ml-9 mt-1 space-y-1">
|
||||
{item.items.map((subItem) => (
|
||||
<Link
|
||||
key={subItem.id}
|
||||
href={subItem.href}
|
||||
className={cn(
|
||||
"flex items-center px-3 py-2 text-sm rounded-md",
|
||||
"transition-colors duration-150",
|
||||
pathname === subItem.href
|
||||
? "bg-blue-50 text-blue-600 font-medium"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
)}
|
||||
>
|
||||
<Box className="h-4 w-4 mr-2 flex-shrink-0" />
|
||||
{subItem.title}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
function processMenuItems(responseData: DBApiResponse, role: string): MenuItem[] {
|
||||
return (
|
||||
<div>
|
||||
{item.href ? (
|
||||
<Link
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex items-center h-8",
|
||||
getIndentClass(depth),
|
||||
"transition-colors duration-150",
|
||||
pathname === item.href
|
||||
? "bg-blue-50 text-blue-600"
|
||||
: cn(
|
||||
"text-gray-700 hover:bg-gray-50",
|
||||
depth > 0 && "bg-gray-50/50"
|
||||
)
|
||||
)}
|
||||
>
|
||||
{itemContent}
|
||||
</Link>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => onToggle(item.id)}
|
||||
className={cn(
|
||||
"w-full flex items-center h-8",
|
||||
getIndentClass(depth),
|
||||
"transition-colors duration-150",
|
||||
isOpen
|
||||
? "bg-blue-50 text-blue-600"
|
||||
: cn(
|
||||
"text-gray-700 hover:bg-gray-50",
|
||||
depth > 0 && "bg-gray-50/50"
|
||||
)
|
||||
)}
|
||||
>
|
||||
{itemContent}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{hasChildren && isOpen && (
|
||||
<div>
|
||||
{item.items?.map((subItem) => (
|
||||
<MenuItemComponent
|
||||
key={subItem.id}
|
||||
item={subItem}
|
||||
depth={depth + 1}
|
||||
openSections={openSections}
|
||||
onToggle={onToggle}
|
||||
pathname={pathname}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function processMenuItems(responseData: DBApiResponse, role: string): ProcessedMenuItem[] {
|
||||
if (!responseData?.data?.data) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const menuData = responseData.data.data;
|
||||
|
||||
// 트리 구조로 된 메뉴 데이터로부터 MenuItem[] 생성
|
||||
const buildMenuItem = (menu: DBMenuItem): MenuItem => {
|
||||
const children = menu.children || [];
|
||||
|
||||
const buildMenuItem = (menu: DBMenuItem): ProcessedMenuItem => {
|
||||
// 자식 메뉴들을 seq 기준으로 정렬
|
||||
const sortedChildren = [...children].sort((a, b) => {
|
||||
const seqA = parseInt(a.seq) || 0;
|
||||
const seqB = parseInt(b.seq) || 0;
|
||||
return seqA - seqB;
|
||||
});
|
||||
const sortedChildren = menu.children
|
||||
? [...menu.children].sort((a, b) => {
|
||||
const seqA = parseInt(a.seq) || 0;
|
||||
const seqB = parseInt(b.seq) || 0;
|
||||
return seqA - seqB;
|
||||
})
|
||||
: [];
|
||||
|
||||
// 메뉴 아이템 생성
|
||||
const result = {
|
||||
// 재귀적으로 자식 메뉴들을 처리
|
||||
const processedChildren = sortedChildren.map(buildMenuItem);
|
||||
|
||||
return {
|
||||
id: menu.id,
|
||||
title: menu.menu_name_kor,
|
||||
items: sortedChildren.map(child => ({
|
||||
id: child.id,
|
||||
title: child.menu_name_kor,
|
||||
href: child.menu_url || '#',
|
||||
icon: Box
|
||||
}))
|
||||
href: menu.menu_url || undefined,
|
||||
icon: Box,
|
||||
...(processedChildren.length > 0 && { items: processedChildren }),
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
// 최상위 메뉴들을 찾고 권한 체크 후 seq로 정렬
|
||||
@ -151,6 +186,7 @@ function processMenuItems(responseData: DBApiResponse, role: string): MenuItem[]
|
||||
})
|
||||
.map(buildMenuItem);
|
||||
}
|
||||
|
||||
export function SideNav() {
|
||||
const pathname = usePathname();
|
||||
const { user } = useAuth();
|
||||
@ -170,36 +206,40 @@ export function SideNav() {
|
||||
|
||||
const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>(
|
||||
() => {
|
||||
return menuItems.reduce((acc: { [key: string]: boolean }, item) => {
|
||||
if (item.items?.some((subItem) => subItem.href === pathname)) {
|
||||
acc[item.title] = true;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
const findOpenSections = (items: ProcessedMenuItem[], path: string): string[] => {
|
||||
const openSections: string[] = [];
|
||||
|
||||
const findPath = (items: ProcessedMenuItem[]): boolean => {
|
||||
for (const item of items) {
|
||||
if (item.href === path) {
|
||||
return true;
|
||||
}
|
||||
if (item.items) {
|
||||
if (findPath(item.items)) {
|
||||
openSections.push(item.id);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
findPath(items);
|
||||
return openSections;
|
||||
};
|
||||
|
||||
const openIds = findOpenSections(menuItems, pathname);
|
||||
return openIds.reduce((acc, id) => ({ ...acc, [id]: true }), {});
|
||||
}
|
||||
);
|
||||
|
||||
const toggleSection = (title: string) => {
|
||||
const toggleSection = (id: string) => {
|
||||
setOpenSections((prev) => ({
|
||||
...prev,
|
||||
[title]: !prev[title],
|
||||
[id]: !prev[id],
|
||||
}));
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString("ko-KR", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
};
|
||||
|
||||
const formatBusinessNumber = (number: string) => {
|
||||
if (!number) return "";
|
||||
const cleaned = number.replace(/[^0-9]/g, "");
|
||||
return `${cleaned.slice(0, 3)}-${cleaned.slice(3, 5)}-${cleaned.slice(5)}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="w-64 bg-white border-r border-gray-200 h-screen flex flex-col">
|
||||
<div
|
||||
@ -207,46 +247,44 @@ export function SideNav() {
|
||||
onClick={() => (window.location.href = "/dashboard/overview")}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Gauge className="h-8 w-6 text-blue-600" />
|
||||
<h1 className="text-xl font-semibold text-gray-900">PLM</h1>
|
||||
<Gauge className="h-5 w-5 text-blue-600" />
|
||||
<h1 className="text-lg text-gray-900">PLM</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-3">
|
||||
{menuItems.map((item) => (
|
||||
<MenuItemComponent
|
||||
key={item.id} // title 대신 id 사용
|
||||
item={item}
|
||||
isOpen={openSections[item.title]}
|
||||
onToggle={() => toggleSection(item.title)}
|
||||
pathname={pathname}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{menuItems.map((item) => (
|
||||
<MenuItemComponent
|
||||
key={item.id}
|
||||
item={item}
|
||||
depth={0}
|
||||
openSections={openSections}
|
||||
onToggle={toggleSection}
|
||||
pathname={pathname}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-auto border-t border-gray-200 p-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start space-x-3">
|
||||
<Building2 className="h-5 w-5 text-gray-500 mt-0.5" />
|
||||
<Building2 className="h-4 w-4 text-gray-500 mt-0.5" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-medium text-gray-900">
|
||||
<h3 className="text-sm text-gray-900">
|
||||
{user?.companyName} - {user?.branchName}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500">
|
||||
사업자번호: {formatBusinessNumber(user?.businessNumber || "")}
|
||||
사업자번호: {user?.businessNumber || ""}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<Calendar className="h-5 w-5 text-gray-500" />
|
||||
<Calendar className="h-4 w-4 text-gray-500" />
|
||||
<div className="flex-1">
|
||||
<p className="text-xs text-gray-500">계약 만료일:</p>
|
||||
<p className="text-sm font-medium text-gray-900">
|
||||
{user?.contractEndDate
|
||||
? formatDate(user.contractEndDate)
|
||||
: "정보 없음"}
|
||||
<p className="text-sm text-gray-900">
|
||||
{user?.contractEndDate || "정보 없음"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user