카테고리 라벨 보이지 않는 문제 수정

frontend/components/screen/InteractiveDataTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
@@ -188,6 +189,16 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const screenContext = useScreenContextOptional(); // 화면 컨텍스트 (좌측/우측 위치 확인용)
   const splitPanelPosition = screenContext?.splitPanelPosition; // 분할 패널 내 위치
   
+  // URL에서 menuObjid 가져오기 (카테고리 값 조회 시 필요)
+  const searchParams = useSearchParams();
+  const menuObjid = useMemo(() => {
+    // 1. ScreenContext에서 가져오기
+    if (screenContext?.menuObjid) return screenContext.menuObjid;
+    // 2. URL 쿼리에서 가져오기
+    const urlMenuObjid = searchParams.get("menuObjid");
+    return urlMenuObjid ? parseInt(urlMenuObjid) : undefined;
+  }, [screenContext?.menuObjid, searchParams]);
+  
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
@@ -365,8 +376,10 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
         for (const col of categoryColumns) {
           try {
+            // menuObjid가 있으면 쿼리 파라미터로 전달 (메뉴별 카테고리 색상 적용)
+            const queryParams = menuObjid ? `?menuObjid=${menuObjid}` : "";
             const response = await apiClient.get(
-              `/table-categories/${component.tableName}/${col.columnName}/values`
+              `/table-categories/${component.tableName}/${col.columnName}/values${queryParams}`
             );
 
             if (response.data.success && response.data.data) {
@@ -379,7 +392,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 };
               });
               mappings[col.columnName] = mapping;
-              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping);
+              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping, { menuObjid });
             }
           } catch (error) {
             console.error(`❌ 카테고리 값 로드 실패 [${col.columnName}]:`, error);
@@ -394,7 +407,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     };
 
     loadCategoryMappings();
-  }, [component.tableName, component.columns, getColumnWebType]);
+  }, [component.tableName, component.columns, getColumnWebType, menuObjid]);
 
   // 파일 상태 확인 함수
   const checkFileStatus = useCallback(