카테고리값 자동감지

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -185,6 +185,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const [rightCategoryMappings, setRightCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({}); // 우측 카테고리 매핑
+  
+  // 카테고리 코드 라벨 캐시 (CATEGORY_* 코드 -> 라벨)
+  const [categoryCodeLabels, setCategoryCodeLabels] = useState<Record<string, string>>({});
+  
   const { toast } = useToast();
 
   // 추가 모달 상태
@@ -713,6 +717,14 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
         );
       }
 
+      // 🆕 카테고리 코드 패턴 감지 (CATEGORY_로 시작하는 값)
+      if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+        const cachedLabel = categoryCodeLabels[value];
+        if (cachedLabel) {
+          return <span className="text-sm">{cachedLabel}</span>;
+        }
+      }
+
       // 🆕 자동 날짜 감지 (ISO 8601 형식 또는 Date 객체)
       if (typeof value === "string" && value.match(/^\d{4}-\d{2}-\d{2}(T|\s)/)) {
         return formatDateValue(value, "YYYY-MM-DD");
@@ -734,7 +746,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
       // 일반 값
       return String(value);
     },
-    [formatDateValue, formatNumberValue],
+    [formatDateValue, formatNumberValue, categoryCodeLabels],
   );
 
   // 좌측 데이터 로드
@@ -1079,6 +1091,49 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
     ],
   );
 
+  // 🆕 카테고리 코드 라벨 로드 (rightData 변경 시)
+  useEffect(() => {
+    const loadCategoryCodeLabels = async () => {
+      if (!rightData) return;
+      
+      const categoryCodes = new Set<string>();
+      
+      // rightData가 배열인 경우 (조인 모드)
+      const dataArray = Array.isArray(rightData) ? rightData : [rightData];
+      
+      dataArray.forEach((row: Record<string, any>) => {
+        if (row) {
+          Object.values(row).forEach((value) => {
+            if (typeof value === "string" && value.startsWith("CATEGORY_")) {
+              categoryCodes.add(value);
+            }
+          });
+        }
+      });
+
+      // 새로운 카테고리 코드만 필터링 (이미 캐시된 것 제외)
+      const newCodes = Array.from(categoryCodes).filter((code) => !categoryCodeLabels[code]);
+
+      if (newCodes.length > 0) {
+        try {
+          console.log("🏷️ [SplitPanel] 카테고리 코드 라벨 조회:", newCodes);
+          const response = await apiClient.post("/table-categories/labels-by-codes", { valueCodes: newCodes });
+          if (response.data.success && response.data.data) {
+            console.log("🏷️ [SplitPanel] 카테고리 라벨 조회 결과:", response.data.data);
+            setCategoryCodeLabels((prev) => ({
+              ...prev,
+              ...response.data.data,
+            }));
+          }
+        } catch (error) {
+          console.error("카테고리 라벨 조회 실패:", error);
+        }
+      }
+    };
+
+    loadCategoryCodeLabels();
+  }, [rightData]);
+
   // 🆕 추가 탭 데이터 로딩 함수
   const loadTabData = useCallback(
     async (tabIndex: number, leftItem: any) => {