(김준회) 권한통제 메뉴 오류 수정

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)}
                 />
               );