제어관리 캔버스 테이블 및 컬럼 db에서 가져오기

frontend/components/dataflow/DataFlowDesigner.tsx

@@ -284,8 +284,12 @@ export const DataFlowDesigner: React.FC<DataFlowDesignerProps> = ({
               description: "", // 새로 추가된 노드는 description 없이 통일
               columns: Array.isArray(table.columns)
                 ? table.columns.map((col) => ({
-                    name: col.columnName || "unknown",
-                    type: col.dataType || "varchar", // 기존과 동일한 기본값 사용
+                    columnName: col.columnName || "unknown",
+                    name: col.columnName || "unknown", // 호환성을 위해 유지
+                    displayName: col.displayName, // 한국어 라벨
+                    columnLabel: col.columnLabel, // 한국어 라벨
+                    type: col.dataType || "varchar",
+                    dataType: col.dataType || "varchar",
                     description: col.description || "",
                   }))
                 : [],

frontend/components/dataflow/TableNode.tsx

@@ -4,9 +4,13 @@ import React from "react";
 import { Handle, Position } from "@xyflow/react";
 
 interface TableColumn {
-  name: string;
-  type: string;
-  description: string;
+  columnName: string;
+  name?: string; // 호환성을 위해 유지
+  columnLabel?: string;
+  displayName?: string;
+  dataType?: string;
+  type?: string; // 호환성을 위해 유지
+  description?: string;
 }
 
 interface Table {
@@ -43,21 +47,24 @@ export const TableNode: React.FC<{ data: TableNodeData }> = ({ data }) => {
       <div className="flex-1 overflow-hidden p-2" onMouseEnter={onScrollAreaEnter} onMouseLeave={onScrollAreaLeave}>
         <div className="space-y-1">
           {table.columns.map((column) => {
-            const isSelected = selectedColumns.includes(column.name);
+            const columnKey = column.columnName || column.name || "";
+            const columnDisplayName = column.displayName || column.columnLabel || column.name || column.columnName;
+            const columnType = column.dataType || column.type || "";
+            const isSelected = selectedColumns.includes(columnKey);
 
             return (
               <div
-                key={column.name}
+                key={columnKey}
                 className={`relative cursor-pointer rounded px-2 py-1 text-xs transition-colors ${
                   isSelected ? "bg-blue-100 text-blue-800 ring-2 ring-blue-500" : "text-gray-700 hover:bg-gray-100"
                 }`}
-                onClick={() => onColumnClick(table.tableName, column.name)}
+                onClick={() => onColumnClick(table.tableName, columnKey)}
               >
                 {/* 핸들 제거됨 - 컬럼 클릭으로만 연결 생성 */}
 
                 <div className="flex items-center justify-between">
-                  <span className="font-mono font-medium">{column.name}</span>
-                  <span className="text-gray-500">{column.type}</span>
+                  <span className="font-mono font-medium">{columnDisplayName}</span>
+                  <span className="text-gray-500">{columnType}</span>
                 </div>
                 {column.description && <div className="mt-0.5 text-gray-500">{column.description}</div>}
               </div>

frontend/lib/api/dataflow.ts

@@ -376,7 +376,13 @@ export class DataFlowAPI {
       }
 
       // 페이지네이션된 응답에서 columns 배열만 추출
-      return response.data.data?.columns || [];
+      const columns = response.data.data?.columns || [];
+
+      // 이미 displayName에 라벨이 포함되어 있으므로 추가 처리 불필요
+      return columns.map((column) => ({
+        ...column,
+        columnLabel: column.displayName || column.columnName, // displayName을 columnLabel로도 설정
+      }));
     } catch (error) {
       console.error("컬럼 정보 조회 오류:", error);
       throw error;
@@ -390,11 +396,37 @@ export class DataFlowAPI {
     try {
       const columns = await this.getTableColumns(tableName);
 
+      // 테이블 라벨 정보 조회
+      let tableLabel = tableName;
+      let tableDescription = `${tableName} 테이블`;
+
+      try {
+        const response = await apiClient.get(`/table-management/tables/${tableName}/labels`);
+        if (response.data.success && response.data.data) {
+          tableLabel = response.data.data.tableLabel || tableName;
+          tableDescription = response.data.data.description || `${tableName} 테이블`;
+        }
+      } catch {
+        // 라벨 정보가 없으면 기본값 사용
+        console.log(`테이블 라벨 정보 없음: ${tableName}`);
+      }
+
+      // TableNode가 기대하는 컬럼 구조로 변환
+      const formattedColumns = columns.map((column) => ({
+        columnName: column.columnName,
+        name: column.columnName, // TableNode에서 사용하는 필드
+        displayName: column.displayName, // 한국어 라벨
+        columnLabel: column.displayName, // 동일한 값으로 설정
+        type: column.dataType, // TableNode에서 사용하는 필드
+        dataType: column.dataType,
+        description: column.description || "",
+      }));
+
       return {
         tableName,
-        displayName: tableName,
-        description: `${tableName} 테이블`,
-        columns,
+        displayName: tableLabel,
+        description: tableDescription,
+        columns: formattedColumns,
       };
     } catch (error) {
       console.error("테이블 및 컬럼 정보 조회 오류:", error);