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

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>