조건 설정 컴포넌트 개선: 테이블 및 컬럼 선택 기능 추가, 기존 필드 선택 방식과의 호환성 유지

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}
           />
         );

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

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>

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}
                   />
 
                   {/* 데이터 분할 설정 */}

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, ...)