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

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