From 7be502ac0c44cc3c5f1ac7097d3650ab5ac21eca Mon Sep 17 00:00:00 2001
From: hyeonsu <hyeonsu@wace.me>
Date: Thu, 18 Sep 2025 10:05:28 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0:=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EB=B0=8F=20=EC=BB=AC=EB=9F=BC=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80,?=
 =?UTF-8?q?=20=EA=B8=B0=EC=A1=B4=20=ED=95=84=EB=93=9C=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=20=EB=B0=A9=EC=8B=9D=EA=B3=BC=EC=9D=98=20=ED=98=B8=ED=99=98?=
 =?UTF-8?q?=EC=84=B1=20=EC=9C=A0=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dataflow/ConnectionSetupModal.tsx         |  2 +
 .../connection/ActionConditionRenderer.tsx    | 66 ++++++++++++++++---
 .../connection/ActionConditionsSection.tsx    | 10 +++
 .../dataflow/connection/DataSaveSettings.tsx  |  7 ++
 frontend/lib/api/dataflow.ts                  |  1 +
 5 files changed, 76 insertions(+), 10 deletions(-)

diff --git a/frontend/components/dataflow/ConnectionSetupModal.tsx b/frontend/components/dataflow/ConnectionSetupModal.tsx
index 60fefa9d..7baac19c 100644
--- a/frontend/components/dataflow/ConnectionSetupModal.tsx
+++ b/frontend/components/dataflow/ConnectionSetupModal.tsx
@@ -476,6 +476,8 @@ export const ConnectionSetupModal: React.FC<ConnectionSetupModalProps> = ({
             availableTables={availableTables}
             fromTableColumns={fromTableColumns}
             toTableColumns={toTableColumns}
+            fromTableName={selectedFromTable}
+            toTableName={selectedToTable}
             tableColumnsCache={tableColumnsCache}
           />
         );
diff --git a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
index eae8066a..fb542ebc 100644
--- a/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionRenderer.tsx
@@ -3,7 +3,15 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Trash2 } from "lucide-react";
 import { ConditionNode, ColumnInfo } from "@/lib/api/dataflow";
 import { DataSaveSettings } from "@/types/connectionTypes";
@@ -16,6 +24,9 @@ interface ActionConditionRendererProps {
   settings: DataSaveSettings;
   onSettingsChange: (settings: DataSaveSettings) => void;
   fromTableColumns: ColumnInfo[];
+  toTableColumns: ColumnInfo[];
+  fromTableName?: string;
+  toTableName?: string;
   getActionCurrentGroupLevel: (conditions: ConditionNode[], conditionIndex: number) => number;
 }
 
@@ -26,6 +37,9 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
   settings,
   onSettingsChange,
   fromTableColumns,
+  toTableColumns,
+  fromTableName,
+  toTableName,
   getActionCurrentGroupLevel,
 }) => {
   const removeConditionGroup = (groupId: string) => {
@@ -53,7 +67,9 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
   };
 
   const renderConditionValue = () => {
-    const selectedColumn = fromTableColumns.find((col) => col.columnName === condition.field);
+    // 선택된 테이블 타입에 따라 컬럼 찾기
+    const targetColumns = condition.tableType === "from" ? fromTableColumns : toTableColumns;
+    const selectedColumn = targetColumns.find((col) => col.columnName === condition.field);
     const dataType = selectedColumn?.dataType?.toLowerCase() || "string";
     const inputType = getInputTypeForDataType(dataType);
 
@@ -167,16 +183,46 @@ export const ActionConditionRenderer: React.FC<ActionConditionRendererProps> = (
           marginLeft: `${getActionCurrentGroupLevel(settings.actions[actionIndex].conditions || [], condIndex) * 15}px`,
         }}
       >
-        <Select value={condition.field || ""} onValueChange={(value) => updateCondition("field", value)}>
-          <SelectTrigger className="h-6 flex-1 text-xs">
-            <SelectValue placeholder="필드" />
+        {/* 1단계: 테이블 선택 */}
+        <Select
+          value={condition.tableType || ""}
+          onValueChange={(value: "from" | "to") => {
+            updateCondition("tableType", value);
+            // 테이블이 변경되면 필드 초기화
+            updateCondition("field", "");
+          }}
+        >
+          <SelectTrigger className="h-6 w-20 text-xs">
+            <SelectValue placeholder="테이블" />
           </SelectTrigger>
           <SelectContent>
-            {fromTableColumns.map((column) => (
-              <SelectItem key={column.columnName} value={column.columnName}>
-                {column.columnName}
-              </SelectItem>
-            ))}
+            {fromTableColumns.length > 0 && <SelectItem value="from">{fromTableName || "From 테이블"}</SelectItem>}
+            {toTableColumns.length > 0 && <SelectItem value="to">{toTableName || "To 테이블"}</SelectItem>}
+          </SelectContent>
+        </Select>
+
+        {/* 2단계: 선택된 테이블의 컬럼 선택 */}
+        <Select
+          value={condition.field || ""}
+          onValueChange={(value) => updateCondition("field", value)}
+          disabled={!condition.tableType}
+        >
+          <SelectTrigger className="h-6 flex-1 text-xs">
+            <SelectValue placeholder={condition.tableType ? "컬럼" : "테이블을 먼저 선택하세요"} />
+          </SelectTrigger>
+          <SelectContent>
+            {condition.tableType === "from" &&
+              fromTableColumns.map((column) => (
+                <SelectItem key={column.columnName} value={column.columnName}>
+                  {column.columnName}
+                </SelectItem>
+              ))}
+            {condition.tableType === "to" &&
+              toTableColumns.map((column) => (
+                <SelectItem key={column.columnName} value={column.columnName}>
+                  {column.columnName}
+                </SelectItem>
+              ))}
           </SelectContent>
         </Select>
         <Select
diff --git a/frontend/components/dataflow/connection/ActionConditionsSection.tsx b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
index f9edd44b..9e40cade 100644
--- a/frontend/components/dataflow/connection/ActionConditionsSection.tsx
+++ b/frontend/components/dataflow/connection/ActionConditionsSection.tsx
@@ -15,6 +15,9 @@ interface ActionConditionsSectionProps {
   settings: DataSaveSettings;
   onSettingsChange: (settings: DataSaveSettings) => void;
   fromTableColumns: ColumnInfo[];
+  toTableColumns: ColumnInfo[];
+  fromTableName?: string;
+  toTableName?: string;
 }
 
 export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = ({
@@ -23,6 +26,9 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
   settings,
   onSettingsChange,
   fromTableColumns,
+  toTableColumns,
+  fromTableName,
+  toTableName,
 }) => {
   const { addActionGroupStart, addActionGroupEnd, getActionCurrentGroupLevel } = useActionConditionHelpers();
 
@@ -39,6 +45,7 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
       operator: "=" as const,
       value: "",
       dataType: "string",
+      tableType: undefined, // 사용자가 직접 선택하도록
       // 첫 번째 조건이 아니고, 바로 앞이 group-start가 아니면 logicalOperator 추가
       ...(currentConditions.length > 0 &&
         currentConditions[currentConditions.length - 1]?.type !== "group-start" && {
@@ -119,6 +126,9 @@ export const ActionConditionsSection: React.FC<ActionConditionsSectionProps> = (
                     settings={settings}
                     onSettingsChange={onSettingsChange}
                     fromTableColumns={fromTableColumns}
+                    toTableColumns={toTableColumns}
+                    fromTableName={fromTableName}
+                    toTableName={toTableName}
                     getActionCurrentGroupLevel={getActionCurrentGroupLevel}
                   />
                 </div>
diff --git a/frontend/components/dataflow/connection/DataSaveSettings.tsx b/frontend/components/dataflow/connection/DataSaveSettings.tsx
index 94dee4b3..15047f6a 100644
--- a/frontend/components/dataflow/connection/DataSaveSettings.tsx
+++ b/frontend/components/dataflow/connection/DataSaveSettings.tsx
@@ -18,6 +18,8 @@ interface DataSaveSettingsProps {
   availableTables: TableInfo[];
   fromTableColumns: ColumnInfo[];
   toTableColumns: ColumnInfo[];
+  fromTableName?: string;
+  toTableName?: string;
   tableColumnsCache: { [tableName: string]: ColumnInfo[] };
 }
 
@@ -27,6 +29,8 @@ export const DataSaveSettings: React.FC<DataSaveSettingsProps> = ({
   availableTables,
   fromTableColumns,
   toTableColumns,
+  fromTableName,
+  toTableName,
   tableColumnsCache,
 }) => {
   const addAction = () => {
@@ -126,6 +130,9 @@ export const DataSaveSettings: React.FC<DataSaveSettingsProps> = ({
                     settings={settings}
                     onSettingsChange={onSettingsChange}
                     fromTableColumns={fromTableColumns}
+                    toTableColumns={toTableColumns}
+                    fromTableName={fromTableName}
+                    toTableName={toTableName}
                   />
 
                   {/* 데이터 분할 설정 */}
diff --git a/frontend/lib/api/dataflow.ts b/frontend/lib/api/dataflow.ts
index 0924705a..9c702ca2 100644
--- a/frontend/lib/api/dataflow.ts
+++ b/frontend/lib/api/dataflow.ts
@@ -15,6 +15,7 @@ export interface ConditionNode {
   operator?: "=" | "!=" | ">" | "<" | ">=" | "<=" | "LIKE";
   value?: string | number | boolean;
   dataType?: string;
+  tableType?: "from" | "to"; // 어느 테이블의 필드인지 구분
   logicalOperator?: "AND" | "OR"; // 다음 조건과의 논리 연산자
   groupId?: string; // 그룹 ID (group-start와 group-end가 같은 groupId를 가짐)
   groupLevel?: number; // 중첩 레벨 (0, 1, 2, ...)