diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/system/permissionsTree.tsx | 60 |
1 files changed, 37 insertions, 23 deletions
diff --git a/components/system/permissionsTree.tsx b/components/system/permissionsTree.tsx index 8f6adfb0..b9555eaf 100644 --- a/components/system/permissionsTree.tsx +++ b/components/system/permissionsTree.tsx @@ -9,8 +9,10 @@ import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem'; import { Minus, MinusSquare, Plus, SquarePlus } from 'lucide-react'; import { Button } from "@/components/ui/button"; -import { mainNav, additionalNav, MenuSection } from "@/config/menuConfig"; +import { mainNav, additionalNav } from "@/config/menuConfig"; import { PermissionDialog } from './permissionDialog'; +import { useParams } from 'next/navigation'; +import { useTranslation } from '@/i18n/client'; // ------------------- Custom TreeItem Style ------------------- const CustomTreeItem = styled(TreeItem)({ @@ -42,6 +44,10 @@ interface SelectedKey { } export default function PermissionsTree() { + const params = useParams(); + const lng = (params?.lng as string) || 'ko'; + const { t } = useTranslation(lng, 'menu'); + const [expandedItems, setExpandedItems] = React.useState<string[]>([]); const [dialogOpen, setDialogOpen] = React.useState(false); const [selectedKey, setSelectedKey] = React.useState<SelectedKey | null>(null); @@ -67,14 +73,20 @@ export default function PermissionsTree() { const collectAllIds = React.useCallback(() => { const ids: string[] = []; - // mainNav: 상위 = section.title, 하위 = item.title - mainNav.forEach((section) => { - ids.push(section.title); // 상위 - section.items.forEach((itm) => ids.push(itm.title)); + // mainNav: 상위 = section.titleKey, 하위 = item.titleKey + mainNav.forEach((section, sectionIndex) => { + ids.push(`main-section-${sectionIndex}-${section.titleKey}`); // 상위 + section.items.forEach((itm, itemIndex) => { + const lastSegment = itm.href.split("/").pop() || itm.titleKey; + ids.push(`main-item-${sectionIndex}-${itemIndex}-${lastSegment}`); + }); }); - // additionalNav를 "기타메뉴" 아래에 넣을 경우, "기타메뉴" 라는 itemId + each item - additionalNav.forEach((itm) => ids.push(itm.title)); + // additionalNav items + additionalNav.forEach((itm, index) => { + const lastSegment = itm.href.split("/").pop() || itm.titleKey; + ids.push(`additional-item-${index}-${lastSegment}`); + }); return ids; }, []); @@ -118,20 +130,21 @@ export default function PermissionsTree() { expandedItems={expandedItems} > {/* (A) mainNav를 트리로 렌더 */} - {mainNav.map((section) => ( + {mainNav.map((section, sectionIndex) => ( <CustomTreeItem - key={section.title} - itemId={section.title} - label={section.title} + key={`main-section-${sectionIndex}-${section.titleKey}`} + itemId={`main-section-${sectionIndex}-${section.titleKey}`} + label={t(section.titleKey)} > - {section.items.map((itm) => { - const lastSegment = itm.href.split("/").pop() || itm.title; - const key = { key: lastSegment, title: itm.title } + {section.items.map((itm, itemIndex) => { + const lastSegment = itm.href.split("/").pop() || itm.titleKey; + const key = { key: lastSegment, title: t(itm.titleKey) } + const uniqueItemId = `main-item-${sectionIndex}-${itemIndex}-${lastSegment}`; return ( <CustomTreeItem - key={lastSegment} - itemId={lastSegment} - label={itm.title} + key={uniqueItemId} + itemId={uniqueItemId} + label={t(itm.titleKey)} onClick={() => handleItemClick(key)} /> ); @@ -140,14 +153,15 @@ export default function PermissionsTree() { ))} - {additionalNav.map((itm) => { - const lastSegment = itm.href.split("/").pop() || itm.title; - const key = { key: lastSegment, title: itm.title } + {additionalNav.map((itm, index) => { + const lastSegment = itm.href.split("/").pop() || itm.titleKey; + const key = { key: lastSegment, title: t(itm.titleKey) } + const uniqueItemId = `additional-item-${index}-${lastSegment}`; return ( <CustomTreeItem - key={lastSegment} - itemId={lastSegment} - label={itm.title} + key={uniqueItemId} + itemId={uniqueItemId} + label={t(itm.titleKey)} onClick={() => handleItemClick(key)} /> ); |