From 8dec80fe2272b7b8bf7a09f44c756f338352f964 Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Fri, 19 Sep 2025 10:45:09 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=97=B0=EA=B2=B0=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=BB=AC=EB=9F=BC=20db=EC=97=90=EC=84=9C=20=EA=B0=80=EC=A0=B8?=
 =?UTF-8?q?=EC=98=A4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/dataflow/ConnectionSetupModal.tsx     | 7 +++++--
 .../components/dataflow/condition/ConditionRenderer.tsx   | 2 +-
 .../dataflow/connection/ActionConditionRenderer.tsx       | 4 ++--
 .../dataflow/connection/ActionFieldMappings.tsx           | 4 ++--
 .../components/dataflow/connection/ActionSplitConfig.tsx  | 4 ++--
 .../components/dataflow/connection/ColumnTableSection.tsx | 8 ++++++--
 .../components/dataflow/connection/SimpleKeySettings.tsx  | 4 ++--
 7 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index b0c27fe9..781d7c33 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -185,6 +185,9 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
   // 모달이 열릴 때 기본값 설정
   useEffect(() => {
     if (isOpen && connection) {
+      // 모달이 열릴 때마다 캐시 초기화 (라벨 업데이트 반영)
+      setTableColumnsCache({});
+
       const fromTableName = connection.fromNode.tableName;
       const toTableName = connection.toNode.tableName;
       const fromDisplayName = connection.fromNode.displayName;
@@ -283,8 +286,8 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
   }, [selectedFromColumns, selectedToColumns]);
 
   // 테이블 컬럼 로드 함수 (캐시 활용)
-  const loadTableColumns = async (tableName: string): Promise<ColumnInfo[]> => {
-    if (tableColumnsCache[tableName]) {
+  const loadTableColumns = async (tableName: string, forceReload = false): Promise<ColumnInfo[]> => {
+    if (tableColumnsCache[tableName] && !forceReload) {
       return tableColumnsCache[tableName];
     }
 
diff --git a/frontend/components/dataflow/condition/ConditionRenderer.tsx b/frontend/components/dataflow/condition/ConditionRenderer.tsx
index 88a1dbff..17c38bf9 100644
--- a/frontend/components/dataflow/condition/ConditionRenderer.tsx
+++ b/frontend/components/dataflow/condition/ConditionRenderer.tsx
@@ -172,7 +172,7 @@ export const ConditionRenderer: React.FC<ConditionRendererProps> = ({
                     <SelectContent>
                       {fromTableColumns.map((column) => (
                         <SelectItem key={column.columnName} value={column.columnName}>
-                          {column.columnName}
+                          {column.displayName || column.columnLabel || column.columnName}
                         </SelectItem>
                       ))}
                     </SelectContent>
diff --git a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
index fb542ebc..6c0cb933 100644
--- a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
@@ -214,13 +214,13 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
             {condition.tableType === "from" &&
               fromTableColumns.map((column) => (
                 <SelectItem key={column.columnName} value={column.columnName}>
-                  {column.columnName}
+                  {column.displayName || column.columnLabel || column.columnName}
                 </SelectItem>
               ))}
             {condition.tableType === "to" &&
               toTableColumns.map((column) => (
                 <SelectItem key={column.columnName} value={column.columnName}>
-                  {column.columnName}
+                  {column.displayName || column.columnLabel || column.columnName}
                 </SelectItem>
               ))}
           </SelectContent>
diff --git a/frontend/components/dataflow/connection/ActionFieldMappings.tsx b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
index dcd56cf6..008b6a32 100644
--- a/frontend/components/dataflow/connection/ActionFieldMappings.tsx
+++ b/frontend/components/dataflow/connection/ActionFieldMappings.tsx
@@ -154,7 +154,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                       tableColumnsCache[mapping.sourceTable]?.map((column) => (
                         <SelectItem key={column.columnName} value={column.columnName}>
                           <div className="truncate" title={column.columnName}>
-                            {column.columnName}
+                            {column.displayName || column.columnLabel || column.columnName}
                           </div>
                         </SelectItem>
                       ))}
@@ -200,7 +200,7 @@ export const ActionFieldMappings: React.FC<ActionFieldMappingsProps> = ({
                       tableColumnsCache[mapping.targetTable]?.map((column) => (
                         <SelectItem key={column.columnName} value={column.columnName}>
                           <div className="truncate" title={column.columnName}>
-                            {column.columnName}
+                            {column.displayName || column.columnLabel || column.columnName}
                           </div>
                         </SelectItem>
                       ))}
diff --git a/frontend/components/dataflow/connection/ActionSplitConfig.tsx b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
index 9538a50a..685c85a1 100644
--- a/frontend/components/dataflow/connection/ActionSplitConfig.tsx
+++ b/frontend/components/dataflow/connection/ActionSplitConfig.tsx
@@ -90,7 +90,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
                 <SelectContent>
                   {fromTableColumns.map((column) => (
                     <SelectItem key={column.columnName} value={column.columnName}>
-                      {column.columnName}
+                      {column.displayName || column.columnLabel || column.columnName}
                     </SelectItem>
                   ))}
                 </SelectContent>
@@ -117,7 +117,7 @@ export const ActionSplitConfig: React.FC<ActionSplitConfigProps> = ({
                 <SelectContent>
                   {toTableColumns.map((column) => (
                     <SelectItem key={column.columnName} value={column.columnName}>
-                      {column.columnName}
+                      {column.displayName || column.columnLabel || column.columnName}
                     </SelectItem>
                   ))}
                 </SelectContent>
diff --git a/frontend/components/dataflow/connection/ColumnTableSection.tsx b/frontend/components/dataflow/connection/ColumnTableSection.tsx
index 0edbd0a6..eff8ba18 100644
--- a/frontend/components/dataflow/connection/ColumnTableSection.tsx
+++ b/frontend/components/dataflow/connection/ColumnTableSection.tsx
@@ -198,7 +198,9 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                 <div className="flex items-start justify-between gap-2">
                   <div className="min-w-0 flex-1">
                     <div className="flex items-center gap-2">
-                      <span className="truncate font-medium">{column.columnName}</span>
+                      <span className="truncate font-medium">
+                        {column.displayName || column.columnLabel || column.columnName}
+                      </span>
                       {isSelected && <span className="flex-shrink-0 text-blue-500">●</span>}
                       {isMapped && <span className="flex-shrink-0 text-green-500">✓</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
@@ -264,7 +266,9 @@ export const ColumnTableSection: React.FC<ColumnTableSectionProps> = ({
                 >
                   <div className="flex min-w-0 flex-col justify-between">
                     <div className="flex items-center gap-2">
-                      <span className="truncate font-medium">{column.columnName}</span>
+                      <span className="truncate font-medium">
+                        {column.displayName || column.columnLabel || column.columnName}
+                      </span>
                       {isSelected && <span className="flex-shrink-0 text-green-500">●</span>}
                       {oppositeSelectedColumn && !isTypeCompatible && (
                         <span className="flex-shrink-0 text-red-500" title="데이터 타입이 호환되지 않음">
diff --git a/frontend/components/dataflow/connection/SimpleKeySettings.tsx b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
index c5fc5abe..57b5dd91 100644
--- a/frontend/components/dataflow/connection/SimpleKeySettings.tsx
+++ b/frontend/components/dataflow/connection/SimpleKeySettings.tsx
@@ -83,7 +83,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     }}
                     className="rounded"
                   />
-                  <span>{column.columnName}</span>
+                  <span>{column.displayName || column.columnLabel || column.columnName}</span>
                   <span className="text-xs text-gray-500">({column.dataType})</span>
                 </label>
               ))}
@@ -112,7 +112,7 @@ export const SimpleKeySettings: React.FC<SimpleKeySettingsProps> = ({
                     }}
                     className="rounded"
                   />
-                  <span>{column.columnName}</span>
+                  <span>{column.displayName || column.columnLabel || column.columnName}</span>
                   <span className="text-xs text-gray-500">({column.dataType})</span>
                 </label>
               ))}