필요없는 부분 삭제제
This commit is contained in:
parent
34b16d61d8
commit
6dfdd50c9e
@ -1,297 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import Link from "next/link";
|
|
||||||
import { usePathname } from "next/navigation";
|
|
||||||
import { cn } from "@/lib/utils";
|
|
||||||
import { usePermissions } from "@/hooks/usePermissions";
|
|
||||||
import { useAuth } from "@/hooks/useAuth";
|
|
||||||
import { useQuery } from "@tanstack/react-query";
|
|
||||||
import { useAuthStore } from "@/stores/auth";
|
|
||||||
import { api } from "@/lib/api";
|
|
||||||
import {
|
|
||||||
Building2,
|
|
||||||
Box,
|
|
||||||
ChevronDown,
|
|
||||||
ChevronRight,
|
|
||||||
Calendar,
|
|
||||||
Gauge
|
|
||||||
} from "lucide-react";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
interface DBMenuItem {
|
|
||||||
id: string;
|
|
||||||
menu_type: string;
|
|
||||||
parent_id: string | null;
|
|
||||||
menu_name_kor: string;
|
|
||||||
menu_name_eng: string;
|
|
||||||
seq: string;
|
|
||||||
menu_url: string;
|
|
||||||
menu_desc?: string;
|
|
||||||
isActive: boolean;
|
|
||||||
children?: DBMenuItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DBApiResponse {
|
|
||||||
success: boolean;
|
|
||||||
data: {
|
|
||||||
success: boolean;
|
|
||||||
data: DBMenuItem[];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProcessedMenuItem {
|
|
||||||
id: string;
|
|
||||||
title: string;
|
|
||||||
href?: string;
|
|
||||||
icon: React.ComponentType<{ className?: string }>;
|
|
||||||
items?: ProcessedMenuItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MenuItemProps {
|
|
||||||
item: ProcessedMenuItem;
|
|
||||||
depth: number;
|
|
||||||
openSections: { [key: string]: boolean };
|
|
||||||
onToggle: (id: string) => void;
|
|
||||||
pathname: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const MenuItemComponent: React.FC<MenuItemProps> = ({
|
|
||||||
item,
|
|
||||||
depth,
|
|
||||||
openSections,
|
|
||||||
onToggle,
|
|
||||||
pathname,
|
|
||||||
}) => {
|
|
||||||
const hasChildren = item.items && item.items.length > 0;
|
|
||||||
const isOpen = openSections[item.id];
|
|
||||||
const IconComponent = item.icon || Box;
|
|
||||||
|
|
||||||
// 들여쓰기 계산
|
|
||||||
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>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
const buildMenuItem = (menu: DBMenuItem): ProcessedMenuItem => {
|
|
||||||
// 자식 메뉴들을 seq 기준으로 정렬
|
|
||||||
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 processedChildren = sortedChildren.map(buildMenuItem);
|
|
||||||
|
|
||||||
return {
|
|
||||||
id: menu.id,
|
|
||||||
title: menu.menu_name_kor,
|
|
||||||
href: menu.menu_url || undefined,
|
|
||||||
icon: Box,
|
|
||||||
...(processedChildren.length > 0 && { items: processedChildren }),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
// 최상위 메뉴들을 찾고 권한 체크 후 seq로 정렬
|
|
||||||
return menuData
|
|
||||||
.filter(menu =>
|
|
||||||
(menu.menu_type !== "0" || ["super_admin", "company_admin"].includes(role)) &&
|
|
||||||
!menu.parent_id
|
|
||||||
)
|
|
||||||
.sort((a, b) => {
|
|
||||||
const seqA = parseInt(a.seq) || 0;
|
|
||||||
const seqB = parseInt(b.seq) || 0;
|
|
||||||
return seqA - seqB;
|
|
||||||
})
|
|
||||||
.map(buildMenuItem);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SideNav() {
|
|
||||||
const pathname = usePathname();
|
|
||||||
const { user } = useAuth();
|
|
||||||
const { hasPermission } = usePermissions();
|
|
||||||
const { token } = useAuthStore();
|
|
||||||
|
|
||||||
const { data: dbMenuData } = useQuery<DBApiResponse>({
|
|
||||||
queryKey: ["menus"],
|
|
||||||
queryFn: async () => {
|
|
||||||
const response = await api.get("/api/v1/app/common/menu");
|
|
||||||
return response.data;
|
|
||||||
},
|
|
||||||
enabled: !!token,
|
|
||||||
});
|
|
||||||
|
|
||||||
const menuItems = dbMenuData ? processMenuItems(dbMenuData, user?.role || "") : [];
|
|
||||||
|
|
||||||
const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>(
|
|
||||||
() => {
|
|
||||||
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 = (id: string) => {
|
|
||||||
setOpenSections((prev) => ({
|
|
||||||
...prev,
|
|
||||||
[id]: !prev[id],
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav className="w-64 bg-white border-r border-gray-200 h-screen flex flex-col">
|
|
||||||
<div
|
|
||||||
className="sticky top-0 z-10 bg-white p-4 border-b border-gray-200 cursor-pointer"
|
|
||||||
onClick={() => (window.location.href = "/dashboard/overview")}
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<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">
|
|
||||||
{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-4 w-4 text-gray-500 mt-0.5" />
|
|
||||||
<div className="flex-1">
|
|
||||||
<h3 className="text-sm text-gray-900">
|
|
||||||
{user?.companyName} - {user?.branchName}
|
|
||||||
</h3>
|
|
||||||
<p className="text-xs text-gray-500">
|
|
||||||
사업자번호: {user?.businessNumber || ""}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<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 text-gray-900">
|
|
||||||
{user?.contractEndDate || "정보 없음"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SideNav;
|
|
||||||
Loading…
Reference in New Issue
Block a user