diff --git a/backend-node/src/routes/dataflow/node-flows.ts b/backend-node/src/routes/dataflow/node-flows.ts
new file mode 100644
index 00000000..0e9a2d3e
--- /dev/null
+++ b/backend-node/src/routes/dataflow/node-flows.ts
@@ -0,0 +1,237 @@
+/**
+ * 노드 기반 데이터 플로우 API
+ */
+
+import { Router, Request, Response } from "express";
+import { query, queryOne } from "../../database/db";
+import { logger } from "../../utils/logger";
+import { NodeFlowExecutionService } from "../../services/nodeFlowExecutionService";
+
+const router = Router();
+
+/**
+ * 플로우 목록 조회
+ */
+router.get("/", async (req: Request, res: Response) => {
+  try {
+    const flows = await query(
+      `
+      SELECT 
+        flow_id as "flowId",
+        flow_name as "flowName",
+        flow_description as "flowDescription",
+        created_at as "createdAt",
+        updated_at as "updatedAt"
+      FROM node_flows
+      ORDER BY updated_at DESC
+      `,
+      []
+    );
+
+    return res.json({
+      success: true,
+      data: flows,
+    });
+  } catch (error) {
+    logger.error("플로우 목록 조회 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "플로우 목록을 조회하지 못했습니다.",
+    });
+  }
+});
+
+/**
+ * 플로우 상세 조회
+ */
+router.get("/:flowId", async (req: Request, res: Response) => {
+  try {
+    const { flowId } = req.params;
+
+    const flow = await queryOne(
+      `
+      SELECT 
+        flow_id as "flowId",
+        flow_name as "flowName",
+        flow_description as "flowDescription",
+        flow_data as "flowData",
+        created_at as "createdAt",
+        updated_at as "updatedAt"
+      FROM node_flows
+      WHERE flow_id = $1
+      `,
+      [flowId]
+    );
+
+    if (!flow) {
+      return res.status(404).json({
+        success: false,
+        message: "플로우를 찾을 수 없습니다.",
+      });
+    }
+
+    return res.json({
+      success: true,
+      data: flow,
+    });
+  } catch (error) {
+    logger.error("플로우 조회 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "플로우를 조회하지 못했습니다.",
+    });
+  }
+});
+
+/**
+ * 플로우 저장 (신규)
+ */
+router.post("/", async (req: Request, res: Response) => {
+  try {
+    const { flowName, flowDescription, flowData } = req.body;
+
+    if (!flowName || !flowData) {
+      return res.status(400).json({
+        success: false,
+        message: "플로우 이름과 데이터는 필수입니다.",
+      });
+    }
+
+    const result = await queryOne(
+      `
+      INSERT INTO node_flows (flow_name, flow_description, flow_data)
+      VALUES ($1, $2, $3)
+      RETURNING flow_id as "flowId"
+      `,
+      [flowName, flowDescription || "", flowData]
+    );
+
+    logger.info(`플로우 저장 성공: ${result.flowId}`);
+
+    return res.json({
+      success: true,
+      message: "플로우가 저장되었습니다.",
+      data: {
+        flowId: result.flowId,
+      },
+    });
+  } catch (error) {
+    logger.error("플로우 저장 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "플로우를 저장하지 못했습니다.",
+    });
+  }
+});
+
+/**
+ * 플로우 수정
+ */
+router.put("/", async (req: Request, res: Response) => {
+  try {
+    const { flowId, flowName, flowDescription, flowData } = req.body;
+
+    if (!flowId || !flowName || !flowData) {
+      return res.status(400).json({
+        success: false,
+        message: "플로우 ID, 이름, 데이터는 필수입니다.",
+      });
+    }
+
+    await query(
+      `
+      UPDATE node_flows
+      SET flow_name = $1,
+          flow_description = $2,
+          flow_data = $3,
+          updated_at = NOW()
+      WHERE flow_id = $4
+      `,
+      [flowName, flowDescription || "", flowData, flowId]
+    );
+
+    logger.info(`플로우 수정 성공: ${flowId}`);
+
+    return res.json({
+      success: true,
+      message: "플로우가 수정되었습니다.",
+      data: {
+        flowId,
+      },
+    });
+  } catch (error) {
+    logger.error("플로우 수정 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "플로우를 수정하지 못했습니다.",
+    });
+  }
+});
+
+/**
+ * 플로우 삭제
+ */
+router.delete("/:flowId", async (req: Request, res: Response) => {
+  try {
+    const { flowId } = req.params;
+
+    await query(
+      `
+      DELETE FROM node_flows
+      WHERE flow_id = $1
+      `,
+      [flowId]
+    );
+
+    logger.info(`플로우 삭제 성공: ${flowId}`);
+
+    return res.json({
+      success: true,
+      message: "플로우가 삭제되었습니다.",
+    });
+  } catch (error) {
+    logger.error("플로우 삭제 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message: "플로우를 삭제하지 못했습니다.",
+    });
+  }
+});
+
+/**
+ * 플로우 실행
+ * POST /api/dataflow/node-flows/:flowId/execute
+ */
+router.post("/:flowId/execute", async (req: Request, res: Response) => {
+  try {
+    const { flowId } = req.params;
+    const contextData = req.body;
+
+    logger.info(`🚀 플로우 실행 요청: flowId=${flowId}`, {
+      contextDataKeys: Object.keys(contextData),
+    });
+
+    // 플로우 실행
+    const result = await NodeFlowExecutionService.executeFlow(
+      parseInt(flowId, 10),
+      contextData
+    );
+
+    return res.json({
+      success: result.success,
+      message: result.message,
+      data: result,
+    });
+  } catch (error) {
+    logger.error("플로우 실행 실패:", error);
+    return res.status(500).json({
+      success: false,
+      message:
+        error instanceof Error
+          ? error.message
+          : "플로우 실행 중 오류가 발생했습니다.",
+    });
+  }
+});
+
+export default router;
diff --git a/backend-node/src/routes/dataflowRoutes.ts b/backend-node/src/routes/dataflowRoutes.ts
index fc6c235d..90e07075 100644
--- a/backend-node/src/routes/dataflowRoutes.ts
+++ b/backend-node/src/routes/dataflowRoutes.ts
@@ -21,6 +21,7 @@ import {
   testConditionalConnection,
   executeConditionalActions,
 } from "../controllers/conditionalConnectionController";
+import nodeFlowsRouter from "./dataflow/node-flows";
 
 const router = express.Router();
 
@@ -146,4 +147,10 @@ router.post("/diagrams/:diagramId/test-conditions", testConditionalConnection);
  */
 router.post("/diagrams/:diagramId/execute-actions", executeConditionalActions);
 
+/**
+ * 노드 기반 플로우 관리
+ * /api/dataflow/node-flows/*
+ */
+router.use("/node-flows", nodeFlowsRouter);
+
 export default router;
diff --git a/backend-node/src/services/nodeFlowExecutionService.ts b/backend-node/src/services/nodeFlowExecutionService.ts
new file mode 100644
index 00000000..f0510623
--- /dev/null
+++ b/backend-node/src/services/nodeFlowExecutionService.ts
@@ -0,0 +1,1073 @@
+/**
+ * 노드 플로우 실행 엔진
+ *
+ * 기능:
+ * - 위상 정렬 (Topological Sort)
+ * - 레벨별 병렬 실행 (Promise.allSettled)
+ * - 독립 트랜잭션 처리
+ * - 연쇄 중단 (부모 실패 시 자식 스킵)
+ */
+
+import { query, queryOne, transaction } from "../database/db";
+import { logger } from "../utils/logger";
+
+// ===== 타입 정의 =====
+
+export interface FlowNode {
+  id: string;
+  type: NodeType;
+  position?: { x: number; y: number };
+  data: NodeData;
+}
+
+export type NodeType =
+  | "tableSource"
+  | "externalDBSource"
+  | "restAPISource"
+  | "condition"
+  | "fieldMapping"
+  | "dataTransform"
+  | "insertAction"
+  | "updateAction"
+  | "deleteAction"
+  | "upsertAction"
+  | "comment"
+  | "log";
+
+export interface NodeData {
+  displayName?: string;
+  [key: string]: any;
+}
+
+export interface FlowEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string;
+  targetHandle?: string;
+}
+
+export interface ExecutionContext {
+  sourceData?: any[]; // 외부에서 주입된 데이터 (선택된 행 또는 폼 데이터)
+  dataSourceType?: string; // "table-selection" | "form" | "none"
+  nodeResults: Map<string, NodeResult>;
+  executionOrder: string[];
+  buttonContext?: ButtonContext;
+}
+
+export interface ButtonContext {
+  buttonId: string;
+  screenId?: number;
+  companyCode?: string;
+  userId?: string;
+  formData?: Record<string, any>;
+  selectedRowsData?: Record<string, any>[];
+}
+
+export interface NodeResult {
+  nodeId: string;
+  status: "pending" | "success" | "failed" | "skipped";
+  data?: any;
+  error?: Error;
+  startTime: number;
+  endTime?: number;
+}
+
+export interface ExecutionResult {
+  success: boolean;
+  message: string;
+  executionTime: number;
+  nodes: NodeExecutionSummary[];
+  summary: {
+    total: number;
+    success: number;
+    failed: number;
+    skipped: number;
+  };
+}
+
+export interface NodeExecutionSummary {
+  nodeId: string;
+  nodeName: string;
+  nodeType: NodeType;
+  status: "success" | "failed" | "skipped" | "pending";
+  duration?: number;
+  error?: string;
+}
+
+// ===== 메인 실행 서비스 =====
+
+export class NodeFlowExecutionService {
+  /**
+   * 플로우 실행 메인 함수
+   */
+  static async executeFlow(
+    flowId: number,
+    contextData: Record<string, any>
+  ): Promise<ExecutionResult> {
+    const startTime = Date.now();
+
+    try {
+      logger.info(`🚀 플로우 실행 시작: flowId=${flowId}`);
+
+      // 1. 플로우 데이터 조회
+      const flow = await queryOne<{
+        flow_id: number;
+        flow_name: string;
+        flow_data: any;
+      }>(
+        `SELECT flow_id, flow_name, flow_data FROM node_flows WHERE flow_id = $1`,
+        [flowId]
+      );
+
+      if (!flow) {
+        throw new Error(`플로우를 찾을 수 없습니다: flowId=${flowId}`);
+      }
+
+      const flowData =
+        typeof flow.flow_data === "string"
+          ? JSON.parse(flow.flow_data)
+          : flow.flow_data;
+
+      const { nodes, edges } = flowData;
+
+      logger.info(`📊 플로우 정보:`, {
+        flowName: flow.flow_name,
+        nodeCount: nodes.length,
+        edgeCount: edges.length,
+      });
+
+      // 2. 실행 컨텍스트 준비
+      const context: ExecutionContext = {
+        sourceData: contextData.sourceData || [],
+        dataSourceType: contextData.dataSourceType || "none",
+        nodeResults: new Map(),
+        executionOrder: [],
+        buttonContext: {
+          buttonId:
+            contextData.buttonId || contextData.context?.buttonId || "unknown",
+          screenId: contextData.screenId || contextData.context?.screenId,
+          companyCode:
+            contextData.companyCode || contextData.context?.companyCode,
+          userId: contextData.userId || contextData.context?.userId,
+          formData: contextData.formData || contextData.context?.formData,
+          selectedRowsData:
+            contextData.selectedRowsData ||
+            contextData.context?.selectedRowsData,
+        },
+      };
+
+      logger.info(`📦 실행 컨텍스트:`, {
+        dataSourceType: context.dataSourceType,
+        sourceDataCount: context.sourceData?.length || 0,
+        buttonContext: context.buttonContext,
+      });
+
+      // 3. 위상 정렬
+      const levels = this.topologicalSort(nodes, edges);
+      logger.info(`📋 실행 순서 (레벨별):`, levels);
+
+      // 4. 레벨별 실행
+      for (const level of levels) {
+        await this.executeLevel(level, nodes, edges, context);
+      }
+
+      // 5. 결과 생성
+      const executionTime = Date.now() - startTime;
+      const result = this.generateExecutionResult(
+        nodes,
+        context,
+        executionTime
+      );
+
+      logger.info(`✅ 플로우 실행 완료:`, result.summary);
+
+      return result;
+    } catch (error) {
+      logger.error(`❌ 플로우 실행 실패:`, error);
+      throw error;
+    }
+  }
+
+  /**
+   * 소스 데이터 준비
+   */
+  private static prepareSourceData(contextData: Record<string, any>): any[] {
+    const { controlDataSource, formData, selectedRowsData } = contextData;
+
+    switch (controlDataSource) {
+      case "form":
+        return formData ? [formData] : [];
+
+      case "table-selection":
+        return selectedRowsData || [];
+
+      case "both":
+        return [
+          { source: "form", data: formData },
+          { source: "table", data: selectedRowsData },
+        ];
+
+      default:
+        return formData ? [formData] : [];
+    }
+  }
+
+  /**
+   * 위상 정렬 (Topological Sort)
+   * DAG(Directed Acyclic Graph)를 레벨별로 그룹화
+   */
+  private static topologicalSort(
+    nodes: FlowNode[],
+    edges: FlowEdge[]
+  ): string[][] {
+    const levels: string[][] = [];
+    const inDegree = new Map<string, number>();
+    const adjacency = new Map<string, string[]>();
+
+    // 초기화
+    nodes.forEach((node) => {
+      inDegree.set(node.id, 0);
+      adjacency.set(node.id, []);
+    });
+
+    // 진입 차수 계산
+    edges.forEach((edge) => {
+      inDegree.set(edge.target, (inDegree.get(edge.target) || 0) + 1);
+      adjacency.get(edge.source)?.push(edge.target);
+    });
+
+    // 레벨별 분류
+    let currentLevel = nodes
+      .filter((node) => inDegree.get(node.id) === 0)
+      .map((node) => node.id);
+
+    while (currentLevel.length > 0) {
+      levels.push([...currentLevel]);
+
+      const nextLevel: string[] = [];
+      currentLevel.forEach((nodeId) => {
+        const neighbors = adjacency.get(nodeId) || [];
+        neighbors.forEach((neighbor) => {
+          const newDegree = (inDegree.get(neighbor) || 1) - 1;
+          inDegree.set(neighbor, newDegree);
+          if (newDegree === 0) {
+            nextLevel.push(neighbor);
+          }
+        });
+      });
+
+      currentLevel = nextLevel;
+    }
+
+    return levels;
+  }
+
+  /**
+   * 레벨 내 노드 병렬 실행
+   */
+  private static async executeLevel(
+    nodeIds: string[],
+    nodes: FlowNode[],
+    edges: FlowEdge[],
+    context: ExecutionContext
+  ): Promise<void> {
+    logger.info(`⏳ 레벨 실행 시작: ${nodeIds.length}개 노드`);
+
+    // Promise.allSettled로 병렬 실행
+    const results = await Promise.allSettled(
+      nodeIds.map((nodeId) => this.executeNode(nodeId, nodes, edges, context))
+    );
+
+    // 결과 저장
+    results.forEach((result, index) => {
+      const nodeId = nodeIds[index];
+      if (result.status === "fulfilled") {
+        context.nodeResults.set(nodeId, result.value);
+        context.executionOrder.push(nodeId);
+      } else {
+        context.nodeResults.set(nodeId, {
+          nodeId,
+          status: "failed",
+          error: result.reason,
+          startTime: Date.now(),
+          endTime: Date.now(),
+        });
+      }
+    });
+
+    logger.info(`✅ 레벨 실행 완료`);
+  }
+
+  /**
+   * 개별 노드 실행
+   */
+  private static async executeNode(
+    nodeId: string,
+    nodes: FlowNode[],
+    edges: FlowEdge[],
+    context: ExecutionContext
+  ): Promise<NodeResult> {
+    const startTime = Date.now();
+    const node = nodes.find((n) => n.id === nodeId);
+
+    if (!node) {
+      throw new Error(`노드를 찾을 수 없습니다: ${nodeId}`);
+    }
+
+    logger.info(`🔄 노드 실행 시작: ${nodeId} (${node.type})`);
+
+    // 1. 부모 노드 상태 확인 (연쇄 중단)
+    const parents = this.getParentNodes(nodeId, edges);
+    const parentFailed = parents.some((parentId) => {
+      const parentResult = context.nodeResults.get(parentId);
+      return parentResult?.status === "failed";
+    });
+
+    if (parentFailed) {
+      logger.warn(`⏭️ 노드 스킵 (부모 실패): ${nodeId}`);
+      return {
+        nodeId,
+        status: "skipped",
+        error: new Error("Parent node failed"),
+        startTime,
+        endTime: Date.now(),
+      };
+    }
+
+    // 2. 입력 데이터 준비
+    const inputData = this.prepareInputData(nodeId, parents, edges, context);
+
+    // 3. 노드 타입별 실행
+    try {
+      const result = await this.executeNodeByType(node, inputData, context);
+
+      logger.info(`✅ 노드 실행 성공: ${nodeId}`);
+
+      return {
+        nodeId,
+        status: "success",
+        data: result,
+        startTime,
+        endTime: Date.now(),
+      };
+    } catch (error) {
+      logger.error(`❌ 노드 실행 실패: ${nodeId}`, error);
+
+      return {
+        nodeId,
+        status: "failed",
+        error: error as Error,
+        startTime,
+        endTime: Date.now(),
+      };
+    }
+  }
+
+  /**
+   * 부모 노드 목록 조회
+   */
+  private static getParentNodes(nodeId: string, edges: FlowEdge[]): string[] {
+    return edges
+      .filter((edge) => edge.target === nodeId)
+      .map((edge) => edge.source);
+  }
+
+  /**
+   * 입력 데이터 준비
+   */
+  private static prepareInputData(
+    nodeId: string,
+    parents: string[],
+    edges: FlowEdge[],
+    context: ExecutionContext
+  ): any {
+    if (parents.length === 0) {
+      // 소스 노드: 원본 데이터 사용
+      return context.sourceData;
+    } else if (parents.length === 1) {
+      // 단일 부모: 부모의 결과 데이터 전달
+      const parentResult = context.nodeResults.get(parents[0]);
+      return parentResult?.data || context.sourceData;
+    } else {
+      // 다중 부모: 모든 부모의 데이터 병합
+      return parents.map((parentId) => {
+        const result = context.nodeResults.get(parentId);
+        return result?.data || context.sourceData;
+      });
+    }
+  }
+
+  /**
+   * 노드 타입별 실행 로직
+   */
+  private static async executeNodeByType(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any> {
+    switch (node.type) {
+      case "tableSource":
+        return this.executeTableSource(node, context);
+
+      case "dataTransform":
+        return this.executeDataTransform(node, inputData, context);
+
+      case "insertAction":
+        return this.executeInsertAction(node, inputData, context);
+
+      case "updateAction":
+        return this.executeUpdateAction(node, inputData, context);
+
+      case "deleteAction":
+        return this.executeDeleteAction(node, inputData, context);
+
+      case "upsertAction":
+        return this.executeUpsertAction(node, inputData, context);
+
+      case "condition":
+        return this.executeCondition(node, inputData, context);
+
+      case "comment":
+      case "log":
+        // 로그/코멘트는 실행 없이 통과
+        logger.info(`📝 ${node.type}: ${node.data.displayName || node.id}`);
+        return { message: "Logged" };
+
+      default:
+        logger.warn(`⚠️ 지원하지 않는 노드 타입: ${node.type}`);
+        return { message: "Unsupported node type" };
+    }
+  }
+
+  /**
+   * 테이블 소스 노드 실행
+   */
+  private static async executeTableSource(
+    node: FlowNode,
+    context: ExecutionContext
+  ): Promise<any[]> {
+    // 🔥 외부에서 주입된 데이터가 있으면 우선 사용
+    if (
+      context.sourceData &&
+      Array.isArray(context.sourceData) &&
+      context.sourceData.length > 0
+    ) {
+      logger.info(
+        `📊 외부 주입 데이터 사용: ${context.dataSourceType}, ${context.sourceData.length}건`
+      );
+      return context.sourceData;
+    }
+
+    // 외부 데이터가 없으면 DB 쿼리 실행
+    const { tableName, schema, whereConditions } = node.data;
+
+    if (!tableName) {
+      logger.warn(
+        "⚠️ 테이블 소스 노드에 테이블명이 없고, 외부 데이터도 없습니다."
+      );
+      return [];
+    }
+
+    const schemaPrefix = schema ? `${schema}.` : "";
+    const whereClause = whereConditions
+      ? `WHERE ${this.buildWhereClause(whereConditions)}`
+      : "";
+
+    const sql = `SELECT * FROM ${schemaPrefix}${tableName} ${whereClause}`;
+
+    const result = await query(sql, []);
+
+    logger.info(`📊 테이블 소스 조회: ${tableName}, ${result.length}건`);
+
+    return result;
+  }
+
+  /**
+   * INSERT 액션 노드 실행
+   */
+  private static async executeInsertAction(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any> {
+    const { targetTable, fieldMappings } = node.data;
+
+    return transaction(async (client) => {
+      const dataArray = Array.isArray(inputData) ? inputData : [inputData];
+      let insertedCount = 0;
+
+      for (const data of dataArray) {
+        const fields: string[] = [];
+        const values: any[] = [];
+        let paramIndex = 1;
+
+        fieldMappings.forEach((mapping: any) => {
+          fields.push(mapping.targetField);
+          const value =
+            mapping.staticValue !== undefined
+              ? mapping.staticValue
+              : data[mapping.sourceField];
+          values.push(value);
+        });
+
+        const sql = `
+          INSERT INTO ${targetTable} (${fields.join(", ")})
+          VALUES (${fields.map((_, i) => `$${i + 1}`).join(", ")})
+        `;
+
+        await client.query(sql, values);
+        insertedCount++;
+      }
+
+      logger.info(`✅ INSERT 완료: ${targetTable}, ${insertedCount}건`);
+
+      return { insertedCount };
+    });
+  }
+
+  /**
+   * UPDATE 액션 노드 실행
+   */
+  private static async executeUpdateAction(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any> {
+    const { targetTable, fieldMappings, whereConditions } = node.data;
+
+    return transaction(async (client) => {
+      const dataArray = Array.isArray(inputData) ? inputData : [inputData];
+      let updatedCount = 0;
+
+      for (const data of dataArray) {
+        const setClauses: string[] = [];
+        const values: any[] = [];
+        let paramIndex = 1;
+
+        fieldMappings.forEach((mapping: any) => {
+          const value =
+            mapping.staticValue !== undefined
+              ? mapping.staticValue
+              : data[mapping.sourceField];
+          setClauses.push(`${mapping.targetField} = $${paramIndex}`);
+          values.push(value);
+          paramIndex++;
+        });
+
+        const whereClause = this.buildWhereClause(
+          whereConditions,
+          data,
+          paramIndex
+        );
+
+        const sql = `
+          UPDATE ${targetTable}
+          SET ${setClauses.join(", ")}
+          ${whereClause}
+        `;
+
+        const result = await client.query(sql, values);
+        updatedCount += result.rowCount || 0;
+      }
+
+      logger.info(`✅ UPDATE 완료: ${targetTable}, ${updatedCount}건`);
+
+      return { updatedCount };
+    });
+  }
+
+  /**
+   * DELETE 액션 노드 실행
+   */
+  private static async executeDeleteAction(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any> {
+    const { targetTable, whereConditions } = node.data;
+
+    return transaction(async (client) => {
+      const dataArray = Array.isArray(inputData) ? inputData : [inputData];
+      let deletedCount = 0;
+
+      for (const data of dataArray) {
+        const whereClause = this.buildWhereClause(whereConditions, data, 1);
+
+        const sql = `DELETE FROM ${targetTable} ${whereClause}`;
+
+        const result = await client.query(sql, []);
+        deletedCount += result.rowCount || 0;
+      }
+
+      logger.info(`✅ DELETE 완료: ${targetTable}, ${deletedCount}건`);
+
+      return { deletedCount };
+    });
+  }
+
+  /**
+   * UPSERT 액션 노드 실행 (로직 기반)
+   * DB 제약 조건 없이 SELECT → UPDATE or INSERT 방식으로 구현
+   */
+  private static async executeUpsertAction(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any> {
+    const { targetTable, fieldMappings, conflictKeys } = node.data;
+
+    if (!targetTable || !fieldMappings || fieldMappings.length === 0) {
+      throw new Error("UPSERT 액션에 필수 설정이 누락되었습니다.");
+    }
+
+    if (!conflictKeys || conflictKeys.length === 0) {
+      throw new Error("UPSERT 액션에 충돌 키(Conflict Keys)가 필요합니다.");
+    }
+
+    return transaction(async (client) => {
+      const dataArray = Array.isArray(inputData) ? inputData : [inputData];
+      let insertedCount = 0;
+      let updatedCount = 0;
+
+      for (const data of dataArray) {
+        // 1. 충돌 키 값 추출
+        const conflictKeyValues: Record<string, any> = {};
+        conflictKeys.forEach((key: string) => {
+          const mapping = fieldMappings.find((m: any) => m.targetField === key);
+          if (mapping) {
+            conflictKeyValues[key] =
+              mapping.staticValue !== undefined
+                ? mapping.staticValue
+                : data[mapping.sourceField];
+          }
+        });
+
+        // 2. 존재 여부 확인 (SELECT)
+        const whereConditions = conflictKeys
+          .map((key: string, index: number) => `${key} = $${index + 1}`)
+          .join(" AND ");
+        const whereValues = conflictKeys.map(
+          (key: string) => conflictKeyValues[key]
+        );
+
+        const checkSql = `SELECT id FROM ${targetTable} WHERE ${whereConditions} LIMIT 1`;
+        const existingRow = await client.query(checkSql, whereValues);
+
+        if (existingRow.rows.length > 0) {
+          // 3-A. 존재하면 UPDATE
+          const setClauses: string[] = [];
+          const updateValues: any[] = [];
+          let paramIndex = 1;
+
+          fieldMappings.forEach((mapping: any) => {
+            // 충돌 키가 아닌 필드만 UPDATE
+            if (!conflictKeys.includes(mapping.targetField)) {
+              const value =
+                mapping.staticValue !== undefined
+                  ? mapping.staticValue
+                  : data[mapping.sourceField];
+              setClauses.push(`${mapping.targetField} = $${paramIndex}`);
+              updateValues.push(value);
+              paramIndex++;
+            }
+          });
+
+          // WHERE 조건 생성 (파라미터 인덱스 이어서)
+          const updateWhereConditions = conflictKeys
+            .map(
+              (key: string, index: number) => `${key} = $${paramIndex + index}`
+            )
+            .join(" AND ");
+
+          // WHERE 조건 값 추가
+          whereValues.forEach((val: any) => {
+            updateValues.push(val);
+          });
+
+          const updateSql = `
+            UPDATE ${targetTable}
+            SET ${setClauses.join(", ")}
+            WHERE ${updateWhereConditions}
+          `;
+
+          logger.info(`🔄 UPDATE 실행:`, {
+            table: targetTable,
+            conflictKeys,
+            conflictKeyValues,
+            sql: updateSql,
+            values: updateValues,
+          });
+
+          await client.query(updateSql, updateValues);
+          updatedCount++;
+        } else {
+          // 3-B. 없으면 INSERT
+          const columns: string[] = [];
+          const values: any[] = [];
+
+          fieldMappings.forEach((mapping: any) => {
+            const value =
+              mapping.staticValue !== undefined
+                ? mapping.staticValue
+                : data[mapping.sourceField];
+            columns.push(mapping.targetField);
+            values.push(value);
+          });
+
+          const placeholders = values.map((_, i) => `$${i + 1}`).join(", ");
+          const insertSql = `
+            INSERT INTO ${targetTable} (${columns.join(", ")})
+            VALUES (${placeholders})
+          `;
+
+          logger.info(`➕ INSERT 실행:`, {
+            table: targetTable,
+            conflictKeys,
+            conflictKeyValues,
+          });
+
+          await client.query(insertSql, values);
+          insertedCount++;
+        }
+      }
+
+      logger.info(
+        `✅ UPSERT 완료: ${targetTable}, INSERT ${insertedCount}건, UPDATE ${updatedCount}건`
+      );
+
+      return {
+        insertedCount,
+        updatedCount,
+        totalCount: insertedCount + updatedCount,
+      };
+    });
+  }
+
+  /**
+   * 조건 노드 실행
+   */
+  private static async executeCondition(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<boolean> {
+    const { conditions, logic } = node.data;
+
+    const results = conditions.map((condition: any) => {
+      const fieldValue = inputData[condition.field];
+      return this.evaluateCondition(
+        fieldValue,
+        condition.operator,
+        condition.value
+      );
+    });
+
+    const result =
+      logic === "OR"
+        ? results.some((r: boolean) => r)
+        : results.every((r: boolean) => r);
+
+    logger.info(`🔍 조건 평가 결과: ${result}`);
+
+    return result;
+  }
+
+  /**
+   * WHERE 절 생성
+   */
+  private static buildWhereClause(
+    conditions: any[],
+    data?: any,
+    startIndex: number = 1
+  ): string {
+    if (!conditions || conditions.length === 0) {
+      return "";
+    }
+
+    const clauses = conditions.map((condition, index) => {
+      const value = data ? data[condition.field] : condition.value;
+      return `${condition.field} ${condition.operator} $${startIndex + index}`;
+    });
+
+    return `WHERE ${clauses.join(" AND ")}`;
+  }
+
+  /**
+   * 조건 평가
+   */
+  private static evaluateCondition(
+    fieldValue: any,
+    operator: string,
+    expectedValue: any
+  ): boolean {
+    switch (operator) {
+      case "equals":
+      case "=":
+        return fieldValue === expectedValue;
+      case "notEquals":
+      case "!=":
+        return fieldValue !== expectedValue;
+      case "greaterThan":
+      case ">":
+        return fieldValue > expectedValue;
+      case "lessThan":
+      case "<":
+        return fieldValue < expectedValue;
+      case "contains":
+        return String(fieldValue).includes(String(expectedValue));
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * 실행 결과 생성
+   */
+  private static generateExecutionResult(
+    nodes: FlowNode[],
+    context: ExecutionContext,
+    executionTime: number
+  ): ExecutionResult {
+    const nodeSummaries: NodeExecutionSummary[] = nodes.map((node) => {
+      const result = context.nodeResults.get(node.id);
+      return {
+        nodeId: node.id,
+        nodeName: node.data.displayName || node.id,
+        nodeType: node.type,
+        status: result?.status || "pending",
+        duration: result?.endTime
+          ? result.endTime - result.startTime
+          : undefined,
+        error: result?.error?.message,
+      };
+    });
+
+    const summary = {
+      total: nodes.length,
+      success: nodeSummaries.filter((n) => n.status === "success").length,
+      failed: nodeSummaries.filter((n) => n.status === "failed").length,
+      skipped: nodeSummaries.filter((n) => n.status === "skipped").length,
+    };
+
+    const success = summary.failed === 0;
+
+    return {
+      success,
+      message: success
+        ? `플로우 실행 성공 (${summary.success}/${summary.total})`
+        : `플로우 실행 부분 실패 (성공: ${summary.success}, 실패: ${summary.failed})`,
+      executionTime,
+      nodes: nodeSummaries,
+      summary,
+    };
+  }
+
+  /**
+   * 데이터 변환 노드 실행
+   */
+  private static async executeDataTransform(
+    node: FlowNode,
+    inputData: any,
+    context: ExecutionContext
+  ): Promise<any[]> {
+    const { transformations } = node.data;
+
+    if (
+      !transformations ||
+      !Array.isArray(transformations) ||
+      transformations.length === 0
+    ) {
+      logger.warn(`⚠️ 데이터 변환 노드에 변환 규칙이 없습니다: ${node.id}`);
+      return Array.isArray(inputData) ? inputData : [inputData];
+    }
+
+    // inputData를 배열로 정규화
+    const rows = Array.isArray(inputData) ? inputData : [inputData];
+    logger.info(
+      `🔄 데이터 변환 시작: ${rows.length}개 행, ${transformations.length}개 변환`
+    );
+
+    // 각 변환 규칙을 순차적으로 적용
+    let transformedRows = rows;
+
+    for (const transform of transformations) {
+      const transformType = transform.type;
+      logger.info(`   🔹 변환 적용: ${transformType}`);
+
+      transformedRows = this.applyTransformation(transformedRows, transform);
+    }
+
+    logger.info(`✅ 데이터 변환 완료: ${transformedRows.length}개 행`);
+    return transformedRows;
+  }
+
+  /**
+   * 단일 변환 규칙 적용
+   */
+  private static applyTransformation(rows: any[], transform: any): any[] {
+    const {
+      type,
+      sourceField,
+      targetField,
+      delimiter,
+      separator,
+      searchValue,
+      replaceValue,
+      splitIndex,
+      castType,
+      expression,
+    } = transform;
+
+    // 타겟 필드 결정 (비어있으면 소스 필드 사용 = in-place)
+    const actualTargetField = targetField || sourceField;
+
+    switch (type) {
+      case "UPPERCASE":
+        return rows.map((row) => ({
+          ...row,
+          [actualTargetField]:
+            row[sourceField]?.toString().toUpperCase() || row[sourceField],
+        }));
+
+      case "LOWERCASE":
+        return rows.map((row) => ({
+          ...row,
+          [actualTargetField]:
+            row[sourceField]?.toString().toLowerCase() || row[sourceField],
+        }));
+
+      case "TRIM":
+        return rows.map((row) => ({
+          ...row,
+          [actualTargetField]:
+            row[sourceField]?.toString().trim() || row[sourceField],
+        }));
+
+      case "EXPLODE":
+        return this.applyExplode(
+          rows,
+          sourceField,
+          actualTargetField,
+          delimiter || ","
+        );
+
+      case "CONCAT":
+        return rows.map((row) => {
+          const value1 = row[sourceField] || "";
+          // CONCAT은 여러 필드를 합칠 수 있지만, 단순화하여 expression 사용
+          const value2 = expression || "";
+          return {
+            ...row,
+            [actualTargetField]: `${value1}${separator || ""}${value2}`,
+          };
+        });
+
+      case "SPLIT":
+        return rows.map((row) => {
+          const value = row[sourceField]?.toString() || "";
+          const parts = value.split(delimiter || ",");
+          const index = splitIndex !== undefined ? splitIndex : 0;
+          return {
+            ...row,
+            [actualTargetField]: parts[index] || "",
+          };
+        });
+
+      case "REPLACE":
+        return rows.map((row) => {
+          const value = row[sourceField]?.toString() || "";
+          const replaced = value.replace(
+            new RegExp(searchValue || "", "g"),
+            replaceValue || ""
+          );
+          return {
+            ...row,
+            [actualTargetField]: replaced,
+          };
+        });
+
+      case "CAST":
+        return rows.map((row) => {
+          const value = row[sourceField];
+          let castedValue = value;
+
+          switch (castType) {
+            case "string":
+              castedValue = value?.toString() || "";
+              break;
+            case "number":
+              castedValue = parseFloat(value) || 0;
+              break;
+            case "boolean":
+              castedValue = Boolean(value);
+              break;
+            case "date":
+              castedValue = new Date(value);
+              break;
+          }
+
+          return {
+            ...row,
+            [actualTargetField]: castedValue,
+          };
+        });
+
+      case "FORMAT":
+      case "CALCULATE":
+      case "JSON_EXTRACT":
+      case "CUSTOM":
+        // 표현식 기반 변환 (현재는 단순 구현)
+        logger.warn(`⚠️ ${type} 변환은 아직 완전히 구현되지 않았습니다.`);
+        return rows.map((row) => ({
+          ...row,
+          [actualTargetField]: row[sourceField] || "",
+        }));
+
+      default:
+        logger.warn(`⚠️ 지원하지 않는 변환 타입: ${type}`);
+        return rows;
+    }
+  }
+
+  /**
+   * EXPLODE 변환: 1개 행을 N개 행으로 확장
+   */
+  private static applyExplode(
+    rows: any[],
+    sourceField: string,
+    targetField: string,
+    delimiter: string
+  ): any[] {
+    const expandedRows: any[] = [];
+
+    for (const row of rows) {
+      const value = row[sourceField];
+
+      if (!value) {
+        // 값이 없으면 원본 행 유지
+        expandedRows.push(row);
+        continue;
+      }
+
+      // 문자열을 구분자로 분리
+      const values = value
+        .toString()
+        .split(delimiter)
+        .map((v: string) => v.trim());
+
+      // 각 값마다 새 행 생성
+      for (const val of values) {
+        expandedRows.push({
+          ...row, // 다른 필드들은 복제
+          [targetField]: val, // 타겟 필드에 분리된 값 저장
+        });
+      }
+    }
+
+    logger.info(
+      `   💥 EXPLODE: ${rows.length}개 행 → ${expandedRows.length}개 행`
+    );
+    return expandedRows;
+  }
+}
diff --git a/docs/노드_구조_개선안.md b/docs/노드_구조_개선안.md
new file mode 100644
index 00000000..7c2cc260
--- /dev/null
+++ b/docs/노드_구조_개선안.md
@@ -0,0 +1,481 @@
+# 노드 구조 개선안 - FROM/TO 테이블 명확화
+
+**작성일**: 2025-01-02  
+**버전**: 1.0  
+**상태**: 🤔 검토 중
+
+---
+
+## 📋 문제 인식
+
+### 현재 설계의 한계
+
+```
+현재 플로우:
+TableSource(user_info) → FieldMapping → InsertAction(targetTable: "orders")
+```
+
+**문제점**:
+
+1. 타겟 테이블(orders)이 노드로 표현되지 않음
+2. InsertAction의 속성으로만 존재 → 시각적으로 불명확
+3. FROM(user_info)과 TO(orders)의 관계가 직관적이지 않음
+4. 타겟 테이블의 스키마 정보를 참조하기 어려움
+
+---
+
+## 💡 개선 방안
+
+### 옵션 1: TableTarget 노드 추가 (권장 ⭐)
+
+**새로운 플로우**:
+
+```
+TableSource(user_info) → FieldMapping → TableTarget(orders) → InsertAction
+```
+
+**노드 추가**:
+
+- `TableTarget` - 타겟 테이블을 명시적으로 표현
+
+**장점**:
+
+- ✅ FROM/TO가 시각적으로 명확
+- ✅ 타겟 테이블 스키마를 미리 로드 가능
+- ✅ FieldMapping에서 타겟 필드 자동 완성 가능
+- ✅ 데이터 흐름이 직관적
+
+**단점**:
+
+- ⚠️ 노드 개수 증가 (복잡도 증가)
+- ⚠️ 기존 설계와 호환성 문제
+
+---
+
+### 옵션 2: Action 노드에 Target 속성 유지 (현재 방식)
+
+**현재 플로우 유지**:
+
+```
+TableSource(user_info) → FieldMapping → InsertAction(targetTable: "orders")
+```
+
+**개선 방법**:
+
+- Action 노드에서 타겟 테이블을 더 명확히 표시
+- 노드 UI에 타겟 테이블명을 크게 표시
+- Properties Panel에서 타겟 테이블 선택 시 스키마 정보 제공
+
+**장점**:
+
+- ✅ 기존 설계 유지 (구현 완료된 상태)
+- ✅ 노드 개수가 적음 (간결함)
+- ✅ 빠른 플로우 구성 가능
+
+**단점**:
+
+- ❌ 시각적으로 FROM/TO 관계가 불명확
+- ❌ FieldMapping 단계에서 타겟 필드 정보 접근이 어려움
+
+---
+
+### 옵션 3: 가상 노드 자동 표시 (신규 제안 ⭐⭐)
+
+**개념**:
+Action 노드에서 targetTable 속성을 설정하면, **시각적으로만** 타겟 테이블 노드를 자동 생성
+
+**실제 플로우 (저장되는 구조)**:
+
+```
+TableSource(user_info) → FieldMapping → InsertAction(targetTable: "orders")
+```
+
+**시각적 표시 (화면에 보이는 모습)**:
+
+```
+TableSource(user_info)
+  → FieldMapping
+    → InsertAction(targetTable: "orders")
+      → 👻 orders (가상 노드, 자동 생성)
+```
+
+**특징**:
+
+- 가상 노드는 선택/이동/삭제 불가능
+- 반투명하게 표시하여 가상임을 명확히 표시
+- Action 노드의 targetTable 속성 변경 시 자동 업데이트
+- 저장 시에는 가상 노드 제외
+
+**장점**:
+
+- ✅ 사용자는 기존대로 사용 (노드 추가 불필요)
+- ✅ 시각적으로 FROM/TO 관계 명확
+- ✅ 기존 설계 100% 유지
+- ✅ 구현 복잡도 낮음
+- ✅ 기존 플로우와 완벽 호환
+
+**단점**:
+
+- ⚠️ 가상 노드의 상호작용 제한 필요
+- ⚠️ "왜 클릭이 안 되지?" 혼란 가능성
+- ⚠️ 가상 노드 렌더링 로직 추가
+
+---
+
+### 옵션 4: 하이브리드 방식
+
+**조건부 사용**:
+
+```
+// 단순 케이스: TableTarget 생략
+TableSource → FieldMapping → InsertAction(targetTable 지정)
+
+// 복잡한 케이스: TableTarget 사용
+TableSource → FieldMapping → TableTarget → InsertAction
+```
+
+**장점**:
+
+- ✅ 유연성 제공
+- ✅ 단순/복잡한 케이스 모두 대응
+
+**단점**:
+
+- ❌ 사용자 혼란 가능성
+- ❌ 검증 로직 복잡
+
+---
+
+## 🎯 권장 방안 비교
+
+### 옵션 재평가
+
+| 항목              | 옵션 1<br/>(TableTarget) | 옵션 2<br/>(현재 방식) | 옵션 3<br/>(가상 노드) ⭐ |
+| ----------------- | ------------------------ | ---------------------- | ------------------------- |
+| **시각적 명확성** | ⭐⭐⭐⭐⭐               | ⭐⭐⭐                 | ⭐⭐⭐⭐⭐                |
+| **구현 복잡도**   | ⭐⭐⭐⭐                 | ⭐⭐                   | ⭐⭐⭐                    |
+| **사용자 편의성** | ⭐⭐⭐                   | ⭐⭐⭐⭐⭐             | ⭐⭐⭐⭐⭐                |
+| **기존 호환성**   | ⭐⭐                     | ⭐⭐⭐⭐⭐             | ⭐⭐⭐⭐⭐                |
+| **자동 완성**     | ⭐⭐⭐⭐⭐               | ⭐⭐                   | ⭐⭐⭐                    |
+| **유지보수성**    | ⭐⭐⭐⭐                 | ⭐⭐⭐                 | ⭐⭐⭐⭐                  |
+| **학습 곡선**     | ⭐⭐⭐                   | ⭐⭐⭐⭐⭐             | ⭐⭐⭐⭐⭐                |
+
+### 최종 권장: **옵션 3 (가상 노드 자동 표시)** ⭐⭐
+
+**선택 이유**:
+
+1. ✅ **최고의 시각적 명확성** - FROM/TO 관계가 한눈에 보임
+2. ✅ **사용자 편의성** - 기존 방식 그대로, 노드 추가 불필요
+3. ✅ **완벽한 호환성** - 기존 플로우 수정 불필요
+4. ✅ **낮은 학습 곡선** - 새로운 노드 타입 학습 불필요
+5. ✅ **적절한 구현 복잡도** - React Flow의 커스텀 렌더링 활용
+
+**구현 방식**:
+
+```typescript
+// Action 노드가 있으면 자동으로 가상 타겟 노드 생성
+function generateVirtualTargetNodes(nodes: FlowNode[]): VirtualNode[] {
+  return nodes
+    .filter((node) => isActionNode(node.type) && node.data.targetTable)
+    .map((actionNode) => ({
+      id: `virtual-target-${actionNode.id}`,
+      type: "virtualTarget",
+      position: {
+        x: actionNode.position.x,
+        y: actionNode.position.y + 150,
+      },
+      data: {
+        tableName: actionNode.data.targetTable,
+        sourceActionId: actionNode.id,
+        isVirtual: true,
+      },
+    }));
+}
+```
+
+---
+
+## 🎯 대안: 옵션 1 (TableTarget 추가)
+
+### 새로운 노드 타입 추가
+
+#### TableTarget 노드
+
+**타입**: `tableTarget`
+
+**데이터 구조**:
+
+```typescript
+interface TableTargetNodeData {
+  tableName: string; // 타겟 테이블명
+  schema?: string; // 스키마 (선택)
+  columns?: Array<{
+    // 타겟 컬럼 정보
+    name: string;
+    type: string;
+    nullable: boolean;
+    primaryKey: boolean;
+  }>;
+  displayName?: string;
+}
+```
+
+**특징**:
+
+- 입력: FieldMapping, DataTransform 등에서 받음
+- 출력: Action 노드로 전달
+- 타겟 테이블 스키마를 미리 로드하여 검증 가능
+
+**시각적 표현**:
+
+```
+┌────────────────────┐
+│ 📊 Table Target    │
+├────────────────────┤
+│ orders             │
+│ schema: public     │
+├────────────────────┤
+│ 컬럼:              │
+│ • order_id (PK)    │
+│ • customer_id      │
+│ • order_date       │
+│ • total_amount     │
+└────────────────────┘
+```
+
+---
+
+### 개선된 연결 규칙
+
+#### TableTarget 추가 시 연결 규칙
+
+**허용되는 연결**:
+
+```
+✅ FieldMapping → TableTarget
+✅ DataTransform → TableTarget
+✅ Condition → TableTarget
+✅ TableTarget → InsertAction
+✅ TableTarget → UpdateAction
+✅ TableTarget → UpsertAction
+```
+
+**금지되는 연결**:
+
+```
+❌ TableSource → TableTarget (직접 연결 불가)
+❌ TableTarget → DeleteAction (DELETE는 타겟 불필요)
+❌ TableTarget → TableTarget
+```
+
+**새로운 검증 규칙**:
+
+1. Action 노드는 TableTarget 또는 targetTable 속성 중 하나 필수
+2. TableTarget이 있으면 Action의 targetTable 속성 무시
+3. FieldMapping 이후에 TableTarget이 오면 자동 필드 매칭 제안
+
+---
+
+### 실제 사용 예시
+
+#### 예시 1: 단순 데이터 복사
+
+**기존 방식**:
+
+```
+TableSource(user_info)
+  → FieldMapping(user_id → customer_id, user_name → name)
+    → InsertAction(targetTable: "customers")
+```
+
+**개선 방식**:
+
+```
+TableSource(user_info)
+  → FieldMapping(user_id → customer_id)
+    → TableTarget(customers)
+      → InsertAction
+```
+
+**장점**:
+
+- customers 테이블 스키마를 FieldMapping에서 참조 가능
+- 필드 자동 완성 제공
+
+---
+
+#### 예시 2: 조건부 데이터 처리
+
+**개선 방식**:
+
+```
+TableSource(user_info)
+  → Condition(age >= 18)
+    ├─ TRUE → TableTarget(adult_users) → InsertAction
+    └─ FALSE → TableTarget(minor_users) → InsertAction
+```
+
+**장점**:
+
+- TRUE/FALSE 분기마다 다른 타겟 테이블 명확히 표시
+
+---
+
+#### 예시 3: 멀티 소스 + 단일 타겟
+
+**개선 방식**:
+
+```
+┌─ TableSource(users) ────┐
+│                          ↓
+└─ ExternalDB(orders) ─→ FieldMapping → TableTarget(user_orders) → InsertAction
+```
+
+**장점**:
+
+- 여러 소스에서 데이터를 받아 하나의 타겟으로 통합
+- 타겟 테이블이 시각적으로 명확
+
+---
+
+## 🔧 구현 계획
+
+### Phase 1: TableTarget 노드 구현
+
+**작업 항목**:
+
+1. ✅ `TableTargetNodeData` 인터페이스 정의
+2. ✅ `TableTargetNode.tsx` 컴포넌트 생성
+3. ✅ `TableTargetProperties.tsx` 속성 패널 생성
+4. ✅ Node Palette에 추가
+5. ✅ FlowEditor에 등록
+
+**예상 시간**: 2시간
+
+---
+
+### Phase 2: 연결 규칙 업데이트
+
+**작업 항목**:
+
+1. ✅ `validateConnection`에 TableTarget 규칙 추가
+2. ✅ Action 노드가 TableTarget 입력을 받도록 수정
+3. ✅ 검증 로직 업데이트
+
+**예상 시간**: 1시간
+
+---
+
+### Phase 3: 자동 필드 매핑 개선
+
+**작업 항목**:
+
+1. ✅ TableTarget이 연결되면 타겟 스키마 자동 로드
+2. ✅ FieldMapping에서 타겟 필드 자동 완성 제공
+3. ✅ 필드 타입 호환성 검증
+
+**예상 시간**: 2시간
+
+---
+
+### Phase 4: 기존 플로우 마이그레이션
+
+**작업 항목**:
+
+1. ✅ 기존 InsertAction의 targetTable을 TableTarget으로 변환
+2. ✅ 자동 마이그레이션 스크립트 작성
+3. ✅ 호환성 유지 모드 제공
+
+**예상 시간**: 2시간
+
+---
+
+## 🤔 고려사항
+
+### 1. 기존 플로우와의 호환성
+
+**문제**: 이미 저장된 플로우는 TableTarget 없이 구성됨
+
+**해결 방안**:
+
+- **옵션 A**: 자동 마이그레이션
+
+  - 플로우 로드 시 InsertAction의 targetTable을 TableTarget 노드로 변환
+  - 기존 데이터는 보존
+
+- **옵션 B**: 호환성 모드
+  - TableTarget 없이도 동작하도록 유지
+  - 새 플로우만 TableTarget 사용 권장
+
+**권장**: 옵션 B (호환성 모드)
+
+---
+
+### 2. 사용자 경험
+
+**우려**: 노드가 하나 더 추가되어 복잡해짐
+
+**완화 방안**:
+
+- 템플릿 제공: "TableSource → FieldMapping → TableTarget → InsertAction" 세트를 템플릿으로 제공
+- 자동 생성: InsertAction 생성 시 TableTarget 자동 생성 옵션
+- 가이드: 처음 사용자를 위한 튜토리얼
+
+---
+
+### 3. 성능
+
+**우려**: TableTarget이 스키마를 로드하면 성능 저하 가능성
+
+**완화 방안**:
+
+- 캐싱: 한 번 로드한 스키마는 캐싱
+- 지연 로딩: 필요할 때만 스키마 로드
+- 백그라운드 로딩: 비동기로 스키마 로드
+
+---
+
+## 📊 비교 분석
+
+| 항목                | 옵션 1 (TableTarget) | 옵션 2 (현재 방식) |
+| ------------------- | -------------------- | ------------------ |
+| **시각적 명확성**   | ⭐⭐⭐⭐⭐           | ⭐⭐⭐             |
+| **구현 복잡도**     | ⭐⭐⭐⭐             | ⭐⭐               |
+| **사용자 학습곡선** | ⭐⭐⭐               | ⭐⭐⭐⭐⭐         |
+| **자동 완성 지원**  | ⭐⭐⭐⭐⭐           | ⭐⭐               |
+| **유지보수성**      | ⭐⭐⭐⭐⭐           | ⭐⭐⭐             |
+| **기존 호환성**     | ⭐⭐                 | ⭐⭐⭐⭐⭐         |
+
+---
+
+## 🎯 결론
+
+### 권장 사항: **옵션 1 (TableTarget 추가)**
+
+**이유**:
+
+1. ✅ 데이터 흐름이 시각적으로 명확
+2. ✅ 스키마 기반 자동 완성 가능
+3. ✅ 향후 확장성 우수
+4. ✅ 복잡한 데이터 흐름에서 특히 유용
+
+**단계적 도입**:
+
+- Phase 1: TableTarget 노드 추가 (선택 사항)
+- Phase 2: 기존 방식과 공존
+- Phase 3: 사용자 피드백 수집
+- Phase 4: 장기적으로 TableTarget 방식 권장
+
+---
+
+## 📝 다음 단계
+
+1. **의사 결정**: 옵션 1 vs 옵션 2 선택
+2. **프로토타입**: TableTarget 노드 간단히 구현
+3. **테스트**: 실제 사용 시나리오로 검증
+4. **문서화**: 사용 가이드 작성
+5. **배포**: 단계적 릴리스
+
+---
+
+**피드백 환영**: 이 설계에 대한 의견을 주시면 개선하겠습니다! 💬
diff --git a/docs/노드_기반_제어_시스템_개선_계획.md b/docs/노드_기반_제어_시스템_개선_계획.md
new file mode 100644
index 00000000..5615ac8e
--- /dev/null
+++ b/docs/노드_기반_제어_시스템_개선_계획.md
@@ -0,0 +1,1920 @@
+# 🎯 노드 기반 데이터 제어 시스템 개선 계획
+
+## 📋 문서 정보
+
+- **작성일**: 2025-10-02
+- **최종 수정일**: 2025-10-02
+- **버전**: 1.5
+- **상태**: 🎉 Phase 1 완료! (100%)
+- **담당**: 개발팀
+
+## 📈 구현 진행 상황
+
+### ✅ 완료된 작업 (Phase 1)
+
+#### Week 1 - 완료 ✓
+
+- ✅ React Flow 11.10.4 통합 및 기본 설정
+  - ✅ 라이브러리 설치 및 설정
+  - ✅ 기본 캔버스 구현
+  - ✅ 그리드 배경 및 줌/팬 기능
+- ✅ 기본 노드 타입 구현 (3개/3개)
+  - ✅ 테이블 소스 노드 (TableSourceNode)
+  - ✅ INSERT 액션 노드 (InsertActionNode)
+  - ✅ 필드 매핑 노드 (FieldMappingNode)
+- ✅ 핵심 인프라
+  - ✅ TypeScript 타입 정의 완료 (types/node-editor.ts)
+  - ✅ Zustand 상태 관리 스토어 (flowEditorStore.ts)
+  - ✅ 노드 팔레트 설정 (nodePaletteConfig.ts)
+
+#### Week 2 - 완료 ✓
+
+- ✅ 드래그 앤 드롭 기능
+  - ✅ 도구 패널에서 캔버스로 드래그
+  - ✅ 노드 이동 및 재배치
+  - ✅ 다중 선택 및 그룹 이동
+- ✅ 연결선 그리기
+  - ✅ 기본 연결 생성
+  - ✅ 연결 검증 (타입 호환성, 순환 참조, 중복 연결)
+  - ✅ 연결 스타일링 (smoothstep)
+- ✅ 추가 노드 타입 구현 (4개 완료)
+  - ✅ 조건 분기 노드 (ConditionNode) - TRUE/FALSE 2개 출력
+  - ✅ 외부 DB 소스 노드 (ExternalDBSourceNode) - DB 타입별 색상
+  - ✅ UPDATE 액션 노드 (UpdateActionNode) - WHERE 조건 포함
+  - ✅ DELETE 액션 노드 (DeleteActionNode) - 경고 메시지
+
+**마일스톤 1 완료**: 7개 노드 타입 구현 완료 (58%)
+
+#### Week 3 - 완료 ✓
+
+- ✅ 속성 편집 기능 (완료)
+  - ✅ 노드 선택 이벤트 핸들러 (onSelectionChange)
+  - ✅ 속성 패널 프레임워크 (PropertiesPanel)
+  - ✅ 노드 타입별 속성 라우팅
+  - ✅ 7개 노드 속성 편집 UI 완성
+    - ✅ TableSource: 테이블명, 스키마, 출력 필드
+    - ✅ InsertAction: 필드 매핑, 배치 크기, 옵션
+    - ✅ FieldMapping: 소스→타겟 매핑, 변환 함수
+    - ✅ Condition: 12가지 연산자, AND/OR 로직
+    - ✅ UpdateAction: WHERE 조건, 업데이트 필드
+    - ✅ DeleteAction: WHERE 조건, 위험 경고 UI
+    - ✅ ExternalDBSource: DB 타입별 색상, 연결 정보
+
+**마일스톤 2 완료**: 속성 편집 기능 100% 완료 (7/7 노드)
+
+#### Week 4 - 완료 ✓
+
+- ✅ 저장/불러오기 기능 (완료)
+  - ✅ 플로우 저장 API (신규/수정)
+  - ✅ 플로우 목록 조회 API
+  - ✅ 플로우 상세 조회 API
+  - ✅ 플로우 삭제 API
+  - ✅ JSON 직렬화/역직렬화
+  - ✅ 불러오기 다이얼로그 UI
+  - ✅ JSON 파일 내보내기
+  - ✅ node_flows 테이블 생성
+  - ✅ API 클라이언트 통합
+  - ✅ JSONB 타입 처리 (문자열/객체 자동 변환)
+  - ✅ **실제 저장/불러오기 동작 검증 완료**
+
+**마일스톤 3 완료**: 저장/불러오기 100% 완료 및 검증
+
+## 🎉 Phase 1 & Phase 2 완료!
+
+모든 핵심 기능이 구현 및 테스트 완료되었습니다:
+
+**Phase 1 (완료)**
+
+- ✅ 7개 노드 타입 구현
+- ✅ 7개 속성 편집 UI
+- ✅ 저장/불러오기 시스템 (DB + JSON)
+- ✅ 검증 시스템
+- ✅ 드래그앤드롭 에디터
+- ✅ **실제 저장/불러오기 테스트 완료**
+
+**Phase 2 (완료)**
+
+- ✅ 12개 노드 타입 구현 (100%)
+- ✅ 12개 속성 편집 UI (100%)
+- ✅ REST API, UPSERT, 데이터 변환, 주석, 로그 노드 추가
+
+### 🎯 다음 작업 (Phase 3)
+
+#### Week 5 - 완료 ✓
+
+- ✅ 남은 노드 타입 구현 (5개)
+
+  - ✅ UpsertAction: INSERT + UPDATE 결합 (ON CONFLICT)
+  - ✅ DataTransform: 데이터 변환 (UPPERCASE, LOWERCASE, TRIM 등)
+  - ✅ RestAPISource: REST API 호출
+  - ✅ Comment: 주석 노드
+  - ✅ Log: 로그 출력 노드
+
+- ✅ 남은 속성 편집 패널 구현 (5개)
+  - ✅ UpsertActionProperties: 충돌 키, 필드 매핑, 옵션
+  - ✅ DataTransformProperties: 변환 규칙, 표현식
+  - ✅ RestAPISourceProperties: URL, 메서드, 헤더, 인증
+  - ✅ CommentProperties: 메모 내용
+  - ✅ LogProperties: 로그 레벨, 메시지, 데이터 포함
+
+**마일스톤 4 완료**: 노드 타입 100% 완료 (12/12)
+**마일스톤 5 완료**: 속성 패널 100% 완료 (12/12)
+
+## 🎉 Phase 2 완료!
+
+모든 노드 타입과 속성 패널이 구현되었습니다!
+
+### 🎯 Phase 3 계획: 검증 및 실행 시스템
+
+#### Week 6 - 완료 ✓
+
+- ✅ 검증 시스템 강화
+  - ✅ 순환 참조 검증 (DFS 알고리즘)
+  - ✅ 노드별 필수 속성 검증 (12개 노드 타입)
+  - ✅ Comment/Log 노드 독립 허용
+  - ✅ 상세한 오류 메시지 및 노드 ID 포함
+
+**마일스톤 6 완료**: 검증 시스템 100% 완료
+
+#### 우선순위 1: 검증 시스템 강화 ✅ 완료
+
+#### 우선순위 2: 플로우 실행 엔진 (추후 구현)
+
+- ⏳ 노드 실행 로직
+- ⏳ 데이터 흐름 처리
+- ⏳ 에러 핸들링
+- ⏳ 트랜잭션 관리
+- ⏳ 플로우 목록 조회
+
+### 📦 구현된 컴포넌트
+
+```
+frontend/
+├── types/
+│   └── node-editor.ts ✅ (완료)
+├── lib/
+│   └── stores/
+│       └── flowEditorStore.ts ✅ (완료)
+├── components/dataflow/node-editor/
+│   ├── FlowEditor.tsx ✅ (완료)
+│   ├── FlowToolbar.tsx ✅ (완료)
+│   ├── nodes/
+│   │   ├── TableSourceNode.tsx ✅ (완료)
+│   │   ├── ExternalDBSourceNode.tsx ✅ (완료)
+│   │   ├── ConditionNode.tsx ✅ (완료)
+│   │   ├── FieldMappingNode.tsx ✅ (완료)
+│   │   ├── InsertActionNode.tsx ✅ (완료)
+│   │   ├── UpdateActionNode.tsx ✅ (완료)
+│   │   ├── DeleteActionNode.tsx ✅ (완료)
+│   │   ├── RestAPISourceNode.tsx ✅ (완료)
+│   │   ├── DataTransformNode.tsx ✅ (완료)
+│   │   ├── UpsertActionNode.tsx ✅ (완료)
+│   │   ├── CommentNode.tsx ✅ (완료)
+│   │   └── LogNode.tsx ✅ (완료)
+│   ├── sidebar/
+│   │   ├── NodePalette.tsx ✅ (완료)
+│   │   └── nodePaletteConfig.ts ✅ (완료)
+│   └── panels/
+│       ├── PropertiesPanel.tsx ✅ (완료)
+│       └── properties/
+│           ├── TableSourceProperties.tsx ✅ (완료)
+│           ├── ExternalDBSourceProperties.tsx ✅ (완료)
+│           ├── ConditionProperties.tsx ✅ (완료)
+│           ├── FieldMappingProperties.tsx ✅ (완료)
+│           ├── InsertActionProperties.tsx ✅ (완료)
+│           ├── UpdateActionProperties.tsx ✅ (완료)
+│           ├── DeleteActionProperties.tsx ✅ (완료)
+│           ├── UpsertActionProperties.tsx ✅ (완료)
+│           ├── DataTransformProperties.tsx ✅ (완료)
+│           ├── RestAPISourceProperties.tsx ✅ (완료)
+│           ├── CommentProperties.tsx ✅ (완료)
+│           └── LogProperties.tsx ✅ (완료)
+└── app/(main)/admin/dataflow/
+    └── node-editor/
+        └── page.tsx ✅ (완료)
+```
+
+### 🎮 현재 사용 가능한 기능
+
+- ✅ 노드 드래그 앤 드롭으로 캔버스에 추가
+- ✅ 노드 간 연결선 그리기
+- ✅ 노드 선택 및 속성 편집 (100%)
+- ✅ 줌/팬 컨트롤 (확대/축소/전체보기)
+- ✅ 미니맵 표시
+- ✅ 플로우 검증 (소스/액션 체크, 고아 노드 감지)
+- ✅ 반응형 레이아웃 (250px 사이드바 + 캔버스 + 350px 속성)
+- ✅ 7개 노드 타입 구현 (58%)
+  - 데이터 소스: 테이블, 외부 DB
+  - 변환/조건: 필드 매핑, 조건 분기 (TRUE/FALSE 출력)
+  - 액션: INSERT, UPDATE, DELETE
+- ✅ 7개 노드 속성 편집 완성 (100%)
+  - TableSource: 테이블/스키마 설정
+  - InsertAction: 필드 매핑, 배치 옵션
+  - FieldMapping: 소스→타겟, 변환 함수
+  - Condition: 12가지 연산자, AND/OR
+  - UpdateAction: WHERE 조건, 업데이트 필드
+  - DeleteAction: WHERE 조건, 위험 경고
+  - ExternalDBSource: DB 타입별 UI
+- ✅ 저장/불러오기 시스템 (100%)
+  - DB 저장 (신규/수정)
+  - 플로우 목록 조회
+  - 플로우 불러오기
+  - 플로우 삭제
+  - JSON 파일 내보내기
+
+### 📍 테스트 URL
+
+```
+http://localhost:3000/admin/dataflow/node-editor
+```
+
+---
+
+## 📊 현재 시스템 분석
+
+### 현재 구조
+
+현재 데이터 제어 시스템은 4단계 마법사 방식을 사용합니다:
+
+```
+Step 1: 연결 설정 (FROM/TO 테이블 선택)
+   ↓
+Step 2: 데이터 선택 (컬럼 매핑)
+   ↓
+Step 3: 조건 설정 (제어 조건)
+   ↓
+Step 4: 액션 설정 (INSERT/UPDATE/DELETE)
+```
+
+### 문제점
+
+#### 1. 사용성 문제
+
+- ❌ **전체 흐름 파악 어려움**: 4단계를 모두 거쳐야 전체 구조 이해 가능
+- ❌ **수정 불편**: 이전 단계로 돌아가서 수정하기 번거로움
+- ❌ **복잡한 로직 표현 제한**: 다중 분기, 조건부 실행 등 표현 어려움
+- ❌ **시각화 제한**: "흐름 미리보기" 탭에서만 전체 구조 확인 가능
+
+#### 2. 기능적 제한
+
+- 단선형 흐름만 지원 (A → B → C)
+- 복잡한 데이터 변환 로직 구현 어려움
+- 디버깅 시 어느 단계에서 문제가 발생했는지 파악 어려움
+- 재사용 가능한 로직 패턴 저장 불가
+
+#### 3. 학습 곡선
+
+- 새로운 사용자가 4단계 프로세스를 이해하는데 시간 소요
+- 각 단계의 설정이 최종 결과에 어떤 영향을 주는지 직관적이지 않음
+
+---
+
+## 🚀 제안: 노드 기반 비주얼 에디터
+
+### 핵심 개념
+
+**블루프린트 스타일 노드 프로그래밍**
+
+- 언리얼 엔진, N8N, Node-RED와 같은 비주얼 프로그래밍 방식 채택
+- 드래그 앤 드롭으로 노드 배치
+- 노드 간 연결선으로 데이터 흐름 표현
+- 실시간 시각적 피드백
+
+### 주요 장점
+
+#### 1. 직관성
+
+- ✅ 전체 데이터 흐름을 한 화면에서 파악
+- ✅ 시각적으로 로직 구조 이해
+- ✅ 노드 간 관계가 명확하게 표현됨
+
+#### 2. 유연성
+
+- ✅ 자유로운 노드 배치 및 재배치
+- ✅ 복잡한 분기 로직 쉽게 구현
+- ✅ 동적으로 노드 추가/제거
+
+#### 3. 생산성
+
+- ✅ 드래그 앤 드롭으로 빠른 구성
+- ✅ 템플릿 시스템으로 재사용
+- ✅ 실시간 검증으로 오류 조기 발견
+
+#### 4. 디버깅
+
+- ✅ 각 노드별 실행 상태 시각화
+- ✅ 데이터 흐름 추적 가능
+- ✅ 병목 지점 쉽게 파악
+
+---
+
+## 🎨 UI/UX 디자인
+
+### 전체 레이아웃
+
+```
+┌───────────────────────────────────────────────────────────────────────────┐
+│  📋 제어 관리: 오라클 테스트2            [저장] [테스트 실행] [닫기]     │
+├────────────────┬──────────────────────────────────────────────────────────┤
+│  🔧 도구 패널  │  🎨 캔버스 (노드 배치 영역)                             │
+│  (250px)       │  (나머지 영역)                                           │
+│                │                                                          │
+│ ┌─ 데이터 소스 │  ┌────────────────────────────────────────────────────┐ │
+│ │ 📊 테이블    │  │                                                    │ │
+│ │ 🔌 외부 DB   │  │   노드를 여기에 드래그 앤 드롭하세요               │ │
+│ │ 📁 REST API  │  │                                                    │ │
+│ │ 🌐 GraphQL   │  │   [빈 캔버스]                                      │ │
+│ └──────────────│  │                                                    │ │
+│                │  └────────────────────────────────────────────────────┘ │
+│ ┌─ 변환/조건   │                                                          │
+│ │ 🔀 필드 매핑 │  ┌─────────────────┐                                    │
+│ │ ⚡ 조건 분기 │  │  미니맵          │                                    │
+│ │ 🔧 데이터 변환│  │  ┌───────────┐  │                                    │
+│ │ 🔄 루프      │  │  │ ▪ ▪ ▪     │  │ 150x100px                         │
+│ └──────────────│  │  │ ▪ ▪       │  │                                    │
+│                │  │  └───────────┘  │                                    │
+│ ┌─ 액션        │  └─────────────────┘                                    │
+│ │ ➕ INSERT    │                                                          │
+│ │ ✏️ UPDATE    │  컨트롤 바: [확대/축소] [전체보기] [그리드 ON/OFF]     │
+│ │ ❌ DELETE    │                                                          │
+│ │ 🔄 UPSERT    │                                                          │
+│ └──────────────│                                                          │
+│                │                                                          │
+│ ┌─ 유틸리티    │                                                          │
+│ │ 💬 주석      │                                                          │
+│ │ 📦 그룹      │                                                          │
+│ │ 🔍 로그      │                                                          │
+│ └──────────────│                                                          │
+└────────────────┴──────────────────────────────────────────────────────────┘
+```
+
+### 도구 패널 상세
+
+#### 데이터 소스 섹션
+
+```
+┌─ 데이터 소스 ─────────────────┐
+│                               │
+│  📊 내부 테이블               │
+│  ┌─────────────────────────┐ │
+│  │ [끌어서 캔버스에 배치]  │ │
+│  └─────────────────────────┘ │
+│                               │
+│  🔌 외부 DB 연결              │
+│  ┌─────────────────────────┐ │
+│  │ [외부 데이터베이스]     │ │
+│  └─────────────────────────┘ │
+│                               │
+│  📁 REST API                  │
+│  ┌─────────────────────────┐ │
+│  │ [HTTP 요청 노드]        │ │
+│  └─────────────────────────┘ │
+│                               │
+│  🌐 GraphQL                   │
+│  ┌─────────────────────────┐ │
+│  │ [GraphQL 쿼리 노드]     │ │
+│  └─────────────────────────┘ │
+│                               │
+└───────────────────────────────┘
+```
+
+---
+
+## 🎯 노드 타입 정의
+
+### 1. 데이터 소스 노드
+
+#### 1.1 테이블 소스 노드
+
+```
+┌─────────────────────────────────────┐
+│ 📊 사용자정보                        │ ← 파란색 헤더 (#3B82F6)
+│    user_info                        │
+├─────────────────────────────────────┤
+│ 📍 연결: 메인 DB                     │
+│ 📋 스키마: public                    │
+│                                     │
+│ 출력 필드: [모두 보기 ▼]            │
+│ ┌─────────────────────────────────┐ │
+│ │ ○ user_id (integer)      →     │ │ ← 필드별 연결 포인트
+│ │ ○ user_name (varchar)    →     │ │
+│ │ ○ email (varchar)        →     │ │
+│ │ ○ created_at (timestamp) →     │ │
+│ │ ○ updated_at (timestamp) →     │ │
+│ └─────────────────────────────────┘ │
+│                                     │
+│ [설정 ⚙️] [프리뷰 👁️]              │
+└─────────────────────────────────────┘
+
+노드 데이터 구조:
+{
+  type: 'tableSource',
+  data: {
+    connectionId: 0,
+    tableName: 'user_info',
+    schema: 'public',
+    fields: [
+      { name: 'user_id', type: 'integer', nullable: false },
+      { name: 'user_name', type: 'varchar', nullable: false },
+      // ...
+    ]
+  }
+}
+```
+
+#### 1.2 외부 DB 소스 노드
+
+```
+┌─────────────────────────────────────┐
+│ 🔌 Oracle DB                        │ ← 주황색 헤더 (#F59E0B)
+│    USERS 테이블                     │
+├─────────────────────────────────────┤
+│ 📍 연결: Oracle 운영 서버            │
+│ 🔐 상태: 연결됨 ✅                  │
+│                                     │
+│ 출력 필드:                          │
+│ ○ SALT (VARCHAR2)    →             │
+│ ○ USERNAME (VARCHAR2) →            │
+│ ○ EMAIL (VARCHAR2)   →             │
+│                                     │
+│ [연결 테스트] [새로고침]            │
+└─────────────────────────────────────┘
+```
+
+#### 1.3 REST API 노드
+
+```
+┌─────────────────────────────────────┐
+│ 📁 HTTP 요청                         │ ← 초록색 헤더 (#10B981)
+├─────────────────────────────────────┤
+│ 메서드: [GET ▼]                     │
+│ URL: https://api.example.com/users  │
+│                                     │
+│ 헤더:                               │
+│ Authorization: Bearer {token}       │
+│                                     │
+│ 응답 필드:                          │
+│ ○ data.users    →                  │
+│ ○ data.total    →                  │
+│                                     │
+│ [요청 테스트] [저장]                │
+└─────────────────────────────────────┘
+```
+
+### 2. 변환/조건 노드
+
+#### 2.1 조건 분기 노드
+
+```
+┌─────────────────────────────────────┐
+│ ⚡ 조건 검사                         │ ← 노란색 헤더 (#EAB308)
+├─────────────────────────────────────┤
+│ ← 입력 데이터                       │
+│                                     │
+│ 조건식:                             │
+│ ┌─────────────────────────────────┐ │
+│ │ [user_id] [IS NOT NULL] [✓]    │ │
+│ │ [AND]                           │ │
+│ │ [email] [LIKE] [%@%] [✓]       │ │
+│ └─────────────────────────────────┘ │
+│                                     │
+│ [+ 조건 추가]                       │
+│                                     │
+│ 분기:                               │
+│ ✅ TRUE  →                         │ ← 조건 충족 시
+│ ❌ FALSE →                         │ ← 조건 불충족 시
+└─────────────────────────────────────┘
+
+노드 데이터 구조:
+{
+  type: 'condition',
+  data: {
+    conditions: [
+      { field: 'user_id', operator: 'IS_NOT_NULL', value: null },
+      { field: 'email', operator: 'LIKE', value: '%@%' }
+    ],
+    logic: 'AND'
+  }
+}
+```
+
+#### 2.2 필드 매핑 노드
+
+```
+┌─────────────────────────────────────┐
+│ 🔀 필드 매핑                         │ ← 보라색 헤더 (#8B5CF6)
+├─────────────────────────────────────┤
+│ 입력:                               │
+│ ← user_id                           │
+│ ← user_name                         │
+│ ← email                             │
+│ ← created_at                        │
+│                                     │
+│ 매핑 규칙:                          │
+│ ┌─────────────────────────────────┐ │
+│ │ user_id    → SALT               │ │
+│ │ user_name  → USERNAME           │ │
+│ │ email      → EMAIL              │ │
+│ │ NOW()      → CREATED_AT         │ │ ← 함수/상수
+│ └─────────────────────────────────┘ │
+│                                     │
+│ [+ 매핑 추가] [자동 매핑]           │
+│                                     │
+│ 출력 →                              │
+└─────────────────────────────────────┘
+
+노드 데이터 구조:
+{
+  type: 'fieldMapping',
+  data: {
+    mappings: [
+      { source: 'user_id', target: 'SALT', transform: null },
+      { source: 'user_name', target: 'USERNAME', transform: null },
+      { source: 'email', target: 'EMAIL', transform: null },
+      { source: null, target: 'CREATED_AT', transform: 'NOW()' }
+    ]
+  }
+}
+```
+
+#### 2.3 데이터 변환 노드
+
+```
+┌─────────────────────────────────────┐
+│ 🔧 데이터 변환                       │ ← 청록색 헤더 (#06B6D4)
+├─────────────────────────────────────┤
+│ ← 입력 데이터                       │
+│                                     │
+│ 변환 규칙:                          │
+│ ┌─────────────────────────────────┐ │
+│ │ UPPER(user_name)                │ │
+│ │ TRIM(email)                     │ │
+│ │ CONCAT(first_name, last_name)   │ │
+│ └─────────────────────────────────┘ │
+│                                     │
+│ [+ 변환 추가] [함수 도움말]         │
+│                                     │
+│ 출력 →                              │
+└─────────────────────────────────────┘
+```
+
+### 3. 액션 노드
+
+#### 3.1 INSERT 노드
+
+```
+┌─────────────────────────────────────┐
+│ ➕ INSERT                            │ ← 초록색 헤더 (#22C55E)
+├─────────────────────────────────────┤
+│ 타겟: USERS                         │
+│ 연결: Oracle 운영 서버               │
+│                                     │
+│ ← 매핑 데이터 입력                  │
+│                                     │
+│ 삽입 필드:                          │
+│ ┌─────────────────────────────────┐ │
+│ │ • SALT      ← user_id           │ │
+│ │ • USERNAME  ← user_name         │ │
+│ │ • EMAIL     ← email             │ │
+│ │ • PASSWORD  ← [미매핑] ⚠️       │ │
+│ └─────────────────────────────────┘ │
+│                                     │
+│ 옵션:                               │
+│ ☑ 중복 시 무시                      │
+│ ☐ 배치 처리 (1000건)                │
+│                                     │
+│ ✅ 완료 →                           │
+└─────────────────────────────────────┘
+```
+
+#### 3.2 UPDATE 노드
+
+```
+┌─────────────────────────────────────┐
+│ ✏️ UPDATE                            │ ← 파란색 헤더 (#3B82F6)
+├─────────────────────────────────────┤
+│ 타겟: user_info                     │
+│ 연결: 메인 DB                        │
+│                                     │
+│ ← 데이터 입력                       │
+│                                     │
+│ 조건 (WHERE):                       │
+│ user_id = {input.user_id}           │
+│                                     │
+│ 업데이트 필드:                      │
+│ ┌─────────────────────────────────┐ │
+│ │ • user_name  ← new_name         │ │
+│ │ • updated_at ← NOW()            │ │
+│ └─────────────────────────────────┘ │
+│                                     │
+│ ✅ 완료 →                           │
+└─────────────────────────────────────┘
+```
+
+#### 3.3 DELETE 노드
+
+```
+┌─────────────────────────────────────┐
+│ ❌ DELETE                            │ ← 빨간색 헤더 (#EF4444)
+├─────────────────────────────────────┤
+│ 타겟: temp_data                     │
+│ 연결: 메인 DB                        │
+│                                     │
+│ ← 데이터 입력                       │
+│                                     │
+│ 조건 (WHERE):                       │
+│ created_at < DATE_SUB(NOW(), 7)     │
+│                                     │
+│ ⚠️ 경고:                            │
+│ 삭제 작업은 되돌릴 수 없습니다      │
+│                                     │
+│ ☑ 삭제 전 확인                      │
+│                                     │
+│ ✅ 완료 →                           │
+└─────────────────────────────────────┘
+```
+
+### 4. 유틸리티 노드
+
+#### 4.1 주석 노드
+
+```
+┌─────────────────────────────────────┐
+│ 💬 주석                              │ ← 회색 헤더 (#6B7280)
+├─────────────────────────────────────┤
+│                                     │
+│ 사용자 데이터를 Oracle DB로 동기화  │
+│                                     │
+│ 작성자: 김주석                      │
+│ 날짜: 2025-10-02                    │
+│                                     │
+└─────────────────────────────────────┘
+```
+
+#### 4.2 로그 노드
+
+```
+┌─────────────────────────────────────┐
+│ 🔍 로그 출력                         │ ← 회색 헤더
+├─────────────────────────────────────┤
+│ ← 입력 데이터                       │
+│                                     │
+│ 로그 레벨: [INFO ▼]                 │
+│ 메시지: "데이터 처리 완료: {count}" │
+│                                     │
+│ 출력 →                              │
+└─────────────────────────────────────┘
+```
+
+---
+
+## 📐 실제 사용 예시
+
+### 예시 1: 간단한 데이터 복사
+
+#### 현재 시스템
+
+```
+Step 1: user_info 선택
+Step 2: USERS (Oracle) 선택
+Step 3: 조건 없음
+Step 4: INSERT + 필드 매핑 4개
+```
+
+#### 노드 기반 시스템
+
+```
+캔버스 뷰:
+
+┌──────────────┐        ┌──────────────┐        ┌──────────────┐
+│ 📊 user_info │        │ 🔀 필드 매핑  │        │ ➕ INSERT    │
+│              │═══════>│              │═══════>│ USERS        │
+│ user_id    ○─┼───────>│ 4개 매핑     │        │ (Oracle)     │
+│ user_name  ○─┼───────>│              │        │              │
+│ email      ○─┼───────>│              │        │              │
+└──────────────┘        └──────────────┘        └──────────────┘
+```
+
+### 예시 2: 조건부 데이터 처리
+
+#### 시나리오
+
+- user_info에서 데이터 읽기
+- user_id가 NULL이 아니고 email이 유효한 경우만 처리
+- 조건 통과 시 Oracle DB에 INSERT
+
+#### 노드 배치
+
+```
+┌──────────────┐        ┌──────────────┐  TRUE  ┌──────────────┐        ┌──────────────┐
+│ 📊 user_info │        │ ⚡ 조건 검사  │═══════>│ 🔀 필드 매핑  │        │ ➕ INSERT    │
+│              │═══════>│              │        │              │═══════>│ USERS        │
+│ user_id    ○─┼───────>│ user_id      │        │ 4개 매핑     │        │              │
+│ user_name  ○─┼─┐      │ IS NOT NULL  │        │              │        │              │
+│ email      ○─┼─┼─────>│ AND          │        │              │        │              │
+└──────────────┘ │      │ email LIKE   │  FALSE │              │        │              │
+                 │      │ '%@%'        │═══════>│ [중단]       │        │              │
+                 │      └──────────────┘        └──────────────┘        └──────────────┘
+                 │                                     ↑
+                 └─────────────────────────────────────┘
+```
+
+### 예시 3: 복잡한 다중 분기
+
+#### 시나리오
+
+- 사용자 타입에 따라 다른 테이블에 저장
+- 관리자 → admin_users
+- 일반 사용자 → regular_users
+- 게스트 → guest_logs
+
+#### 노드 배치
+
+```
+                                     ┌──────────────┐        ┌──────────────┐
+                                     │ 🔀 매핑1     │        │ ➕ INSERT    │
+                           admin ═══>│              │═══════>│ admin_users  │
+                            ╱         └──────────────┘        └──────────────┘
+┌──────────────┐        ┌──╱───────────┐
+│ 📊 user_info │        │ ⚡ 타입 분기  │        ┌──────────────┐        ┌──────────────┐
+│              │═══════>│              │ user ═══>│ 🔀 매핑2     │        │ ➕ INSERT    │
+│ user_type  ○─┼───────>│ user_type    │        │              │═══════>│ regular_users│
+└──────────────┘        │              │        └──────────────┘        └──────────────┘
+                        └──╲───────────┘
+                            ╲         ┌──────────────┐        ┌──────────────┐
+                           guest ════>│ 🔀 매핑3     │        │ ➕ INSERT    │
+                                      │              │═══════>│ guest_logs   │
+                                      └──────────────┘        └──────────────┘
+```
+
+---
+
+## 🎮 주요 기능 명세
+
+### 1. 드래그 앤 드롭
+
+#### 1.1 노드 추가
+
+```typescript
+// 사용자 액션
+1. 좌측 도구 패널에서 노드 아이템 클릭
+2. 캔버스로 드래그
+3. 원하는 위치에 드롭
+
+// 시스템 동작
+- 마우스 커서를 따라 노드 프리뷰 표시
+- 드롭 가능 영역 하이라이트
+- 드롭 시 새 노드 생성 및 배치
+```
+
+#### 1.2 노드 이동
+
+```typescript
+// 사용자 액션
+1. 캔버스의 노드 헤더 클릭
+2. 원하는 위치로 드래그
+3. 드롭하여 재배치
+
+// 시스템 동작
+- 연결된 선들이 함께 움직임
+- 그리드 스냅 옵션 (10px 단위)
+- 다중 선택 시 여러 노드 동시 이동
+```
+
+#### 1.3 다중 선택
+
+```typescript
+// 방법 1: Shift + 클릭
+노드를 하나씩 Shift + 클릭하여 선택
+
+// 방법 2: 드래그 영역 선택
+빈 공간을 드래그하여 사각형 영역 내 노드 선택
+
+// 방법 3: Ctrl + A
+전체 노드 선택
+```
+
+### 2. 연결선 그리기
+
+#### 2.1 연결 생성
+
+```typescript
+// 단계별 프로세스
+1. 출력 포인트(○) 클릭
+2. 마우스를 드래그하여 선 그리기
+3. 입력 포인트에 드롭하여 연결
+
+// 시각적 피드백
+- 드래그 중 임시 선 표시
+- 호환되는 입력 포인트 하이라이트
+- 호환되지 않는 포인트 비활성화
+```
+
+#### 2.2 연결 검증
+
+```typescript
+// 타입 검증
+const validateConnection = (source, target) => {
+  // 데이터 타입 호환성 체크
+  if (!isCompatibleType(source.dataType, target.dataType)) {
+    return { valid: false, error: "데이터 타입 불일치" };
+  }
+
+  // 순환 참조 체크
+  if (hasCircularReference(source, target)) {
+    return { valid: false, error: "순환 참조 감지" };
+  }
+
+  // 중복 연결 체크
+  if (isDuplicateConnection(source, target)) {
+    return { valid: false, error: "이미 연결되어 있음" };
+  }
+
+  return { valid: true };
+};
+```
+
+#### 2.3 연결 스타일
+
+```typescript
+// 연결선 종류
+1. 데이터 흐름: 굵은 곡선 (베지어 커브)
+2. 필드 연결: 가는 직선
+3. 조건 분기: 점선 (TRUE/FALSE)
+
+// 색상 코딩
+- 정상: #3B82F6 (파란색)
+- 경고: #F59E0B (주황색)
+- 오류: #EF4444 (빨간색)
+- 비활성: #9CA3AF (회색)
+```
+
+### 3. 실시간 검증
+
+#### 3.1 구문 검증
+
+```typescript
+// 필드명 검증
+validateFieldName(fieldName) {
+  // 존재하지 않는 필드
+  if (!sourceFields.includes(fieldName)) {
+    return error('필드를 찾을 수 없습니다');
+  }
+}
+
+// SQL 표현식 검증
+validateSQLExpression(expression) {
+  try {
+    // 기본 SQL 파싱
+    parseSQLExpression(expression);
+    return success();
+  } catch (e) {
+    return error('잘못된 SQL 표현식');
+  }
+}
+```
+
+#### 3.2 논리 검증
+
+```typescript
+// 필수 연결 체크
+validateRequiredConnections(node) {
+  if (node.type === 'action' && !node.hasInput) {
+    return error('입력 데이터가 필요합니다');
+  }
+}
+
+// 고아 노드 감지
+findOrphanNodes() {
+  return nodes.filter(node =>
+    !node.hasInput &&
+    !node.hasOutput &&
+    node.type !== 'source'
+  );
+}
+```
+
+#### 3.3 시각적 피드백
+
+```
+노드 상태 표시:
+✅ 정상: 초록색 체크마크
+⚠️ 경고: 노란색 경고 아이콘
+❌ 오류: 빨간색 X 아이콘
+⏳ 미완성: 회색 점선 테두리
+```
+
+### 4. 그룹화 및 주석
+
+#### 4.1 그룹 노드
+
+```
+┌─ 사용자 데이터 처리 그룹 ─────────────────────────────────┐
+│                                                            │
+│  ┌──────────┐        ┌──────────┐        ┌──────────┐    │
+│  │ 소스     │═══════>│ 변환     │═══════>│ 액션     │    │
+│  └──────────┘        └──────────┘        └──────────┘    │
+│                                                            │
+│  💬 주석: Oracle DB 동기화 로직                           │
+└────────────────────────────────────────────────────────────┘
+
+기능:
+- 그룹 단위 이동
+- 그룹 접기/펼치기
+- 그룹 색상 지정
+- 그룹 내보내기/가져오기
+```
+
+#### 4.2 주석 시스템
+
+```
+주석 타입:
+1. 노드 주석: 특정 노드에 첨부
+2. 플로팅 주석: 캔버스에 독립적으로 배치
+3. 연결선 주석: 연결선에 레이블 추가
+
+표시 옵션:
+- 항상 표시
+- 마우스 오버 시 표시
+- 클릭 시 표시
+```
+
+---
+
+## 🔧 기술 스택
+
+### 1. 노드 에디터 라이브러리 비교
+
+| 라이브러리        | 장점                                                                         | 단점                                      | 추천도     |
+| ----------------- | ---------------------------------------------------------------------------- | ----------------------------------------- | ---------- |
+| **React Flow**    | • 가장 인기있음<br>• 풍부한 예제<br>• TypeScript 지원<br>• 커스터마이징 용이 | • 복잡한 로직은 직접 구현                 | ⭐⭐⭐⭐⭐ |
+| **Rete.js**       | • 강력한 플러그인 시스템<br>• 자동 레이아웃                                  | • 학습 곡선 높음<br>• React 통합 까다로움 | ⭐⭐⭐⭐   |
+| **react-diagram** | • 간단한 구조                                                                | • 기능 제한적<br>• 업데이트 느림          | ⭐⭐⭐     |
+
+### 2. React Flow 선택 이유
+
+```typescript
+// 1. 쉬운 설치 및 설정
+npm install reactflow
+
+// 2. 간단한 초기 설정
+import ReactFlow, { MiniMap, Controls, Background } from 'reactflow';
+import 'reactflow/dist/style.css';
+
+function FlowEditor() {
+  return (
+    <ReactFlow nodes={nodes} edges={edges}>
+      <MiniMap />
+      <Controls />
+      <Background />
+    </ReactFlow>
+  );
+}
+
+// 3. 커스텀 노드 쉽게 구현
+const nodeTypes = {
+  tableSource: TableSourceNode,
+  condition: ConditionNode,
+  action: ActionNode,
+};
+
+<ReactFlow nodeTypes={nodeTypes} ... />
+```
+
+### 3. 핵심 컴포넌트 구조
+
+```
+frontend/components/dataflow/node-editor/
+├── FlowEditor.tsx              # 메인 에디터 컴포넌트
+├── nodes/                      # 노드 컴포넌트들
+│   ├── TableSourceNode.tsx
+│   ├── ExternalDBNode.tsx
+│   ├── ConditionNode.tsx
+│   ├── FieldMappingNode.tsx
+│   ├── InsertActionNode.tsx
+│   ├── UpdateActionNode.tsx
+│   ├── DeleteActionNode.tsx
+│   └── index.ts
+├── edges/                      # 커스텀 엣지
+│   ├── DataFlowEdge.tsx
+│   ├── ConditionEdge.tsx
+│   └── index.ts
+├── sidebar/                    # 도구 패널
+│   ├── NodePalette.tsx
+│   ├── NodeLibrary.tsx
+│   └── index.ts
+├── panels/                     # 설정 패널
+│   ├── NodePropertiesPanel.tsx
+│   ├── ValidationPanel.tsx
+│   └── index.ts
+├── hooks/                      # 커스텀 훅
+│   ├── useNodeValidation.ts
+│   ├── useAutoLayout.ts
+│   └── useFlowExecution.ts
+└── utils/                      # 유틸리티
+    ├── nodeFactory.ts
+    ├── flowValidator.ts
+    └── flowSerializer.ts
+```
+
+### 4. 데이터 구조
+
+#### 4.1 노드 데이터 모델
+
+```typescript
+// 기본 노드 인터페이스
+interface BaseNode {
+  id: string;
+  type: string;
+  position: { x: number; y: number };
+  data: any;
+  style?: CSSProperties;
+}
+
+// 테이블 소스 노드
+interface TableSourceNode extends BaseNode {
+  type: "tableSource";
+  data: {
+    connectionId: number;
+    tableName: string;
+    schema: string;
+    fields: Array<{
+      name: string;
+      type: string;
+      nullable: boolean;
+      primaryKey: boolean;
+    }>;
+    filters?: Array<{
+      field: string;
+      operator: string;
+      value: any;
+    }>;
+  };
+}
+
+// 조건 노드
+interface ConditionNode extends BaseNode {
+  type: "condition";
+  data: {
+    conditions: Array<{
+      field: string;
+      operator:
+        | "EQUALS"
+        | "NOT_EQUALS"
+        | "GREATER_THAN"
+        | "LESS_THAN"
+        | "LIKE"
+        | "IN"
+        | "IS_NULL"
+        | "IS_NOT_NULL";
+      value: any;
+    }>;
+    logic: "AND" | "OR";
+  };
+}
+
+// 액션 노드
+interface ActionNode extends BaseNode {
+  type: "insertAction" | "updateAction" | "deleteAction" | "upsertAction";
+  data: {
+    targetConnection: number;
+    targetTable: string;
+    fieldMappings: Array<{
+      sourceField: string;
+      targetField: string;
+      transform?: string;
+    }>;
+    options?: {
+      batchSize?: number;
+      ignoreErrors?: boolean;
+      upsertKey?: string[];
+    };
+  };
+}
+```
+
+#### 4.2 연결선 데이터 모델
+
+```typescript
+interface Edge {
+  id: string;
+  source: string; // 출발 노드 ID
+  target: string; // 도착 노드 ID
+  sourceHandle?: string; // 출발 핸들 ID (필드별 연결 시)
+  targetHandle?: string; // 도착 핸들 ID
+  type?: "default" | "smoothstep" | "step" | "straight";
+  animated?: boolean;
+  label?: string;
+  style?: CSSProperties;
+  data?: {
+    dataType?: string;
+    validation?: {
+      valid: boolean;
+      errors?: string[];
+    };
+  };
+}
+
+// 조건 분기 엣지
+interface ConditionalEdge extends Edge {
+  data: {
+    condition: "TRUE" | "FALSE";
+    label: string;
+  };
+}
+```
+
+#### 4.3 전체 플로우 데이터
+
+```typescript
+interface DataFlow {
+  id: number;
+  name: string;
+  description: string;
+  companyCode: string;
+  nodes: BaseNode[];
+  edges: Edge[];
+  viewport: {
+    x: number;
+    y: number;
+    zoom: number;
+  };
+  metadata: {
+    createdAt: string;
+    updatedAt: string;
+    createdBy: string;
+    version: number;
+    tags?: string[];
+  };
+}
+```
+
+### 5. 상태 관리
+
+```typescript
+// Zustand를 사용한 플로우 상태 관리
+import create from "zustand";
+
+interface FlowState {
+  nodes: Node[];
+  edges: Edge[];
+  selectedNodes: string[];
+  selectedEdges: string[];
+
+  // 노드 관리
+  addNode: (node: Node) => void;
+  updateNode: (id: string, data: Partial<Node>) => void;
+  removeNode: (id: string) => void;
+
+  // 엣지 관리
+  addEdge: (edge: Edge) => void;
+  updateEdge: (id: string, data: Partial<Edge>) => void;
+  removeEdge: (id: string) => void;
+
+  // 선택 관리
+  selectNode: (id: string, multi?: boolean) => void;
+  clearSelection: () => void;
+
+  // 검증
+  validateFlow: () => ValidationResult;
+
+  // 실행
+  executeFlow: () => Promise<ExecutionResult>;
+}
+
+const useFlowStore = create<FlowState>((set, get) => ({
+  // ... 구현
+}));
+```
+
+---
+
+## 📊 비교 분석
+
+### 현재 시스템 vs 노드 기반 시스템
+
+| 측면            | 현재 시스템           | 노드 기반 시스템     | 개선도 |
+| --------------- | --------------------- | -------------------- | ------ |
+| **학습 곡선**   | 중간 (4단계 프로세스) | 쉬움 (시각적 직관성) | +40%   |
+| **전체 파악**   | 어려움 (단계별 분리)  | 쉬움 (한눈에 파악)   | +60%   |
+| **수정 편의성** | 불편 (단계 이동 필요) | 편리 (직접 수정)     | +50%   |
+| **복잡한 로직** | 제한적 (선형 흐름)    | 우수 (다중 분기)     | +80%   |
+| **재사용성**    | 낮음 (수동 복사)      | 높음 (템플릿 시스템) | +70%   |
+| **디버깅**      | 어려움 (로그 확인)    | 쉬움 (시각적 추적)   | +65%   |
+| **협업**        | 보통 (설명 필요)      | 우수 (자체 문서화)   | +55%   |
+| **성능**        | 양호                  | 양호 (동일)          | 0%     |
+
+### 사용자 시나리오별 비교
+
+#### 시나리오 1: 간단한 테이블 복사
+
+```
+현재: 4단계 × 평균 2분 = 8분
+노드: 드래그 3개 + 연결 2개 = 3분
+개선: 62.5% 단축
+```
+
+#### 시나리오 2: 조건부 다중 액션
+
+```
+현재: 4단계 × 5분 + 조건 설정 5분 = 25분
+노드: 드래그 7개 + 연결 8개 + 설정 5분 = 12분
+개선: 52% 단축
+```
+
+#### 시나리오 3: 복잡한 데이터 변환
+
+```
+현재: 여러 제어를 순차적으로 생성 = 45분
+노드: 하나의 플로우에서 모두 처리 = 20분
+개선: 55.5% 단축
+```
+
+---
+
+## 🚀 구현 로드맵
+
+### Phase 1: 기본 노드 에디터 (2주)
+
+#### Week 1
+
+- [ ] React Flow 통합 및 기본 설정
+  - [ ] 라이브러리 설치 및 설정
+  - [ ] 기본 캔버스 구현
+  - [ ] 그리드 배경 및 줌/팬 기능
+- [ ] 기본 노드 타입 구현
+  - [ ] 테이블 소스 노드
+  - [ ] INSERT 액션 노드
+  - [ ] 필드 매핑 노드
+
+#### Week 2
+
+- [ ] 드래그 앤 드롭 기능
+  - [ ] 도구 패널에서 캔버스로 드래그
+  - [ ] 노드 이동 및 재배치
+  - [ ] 다중 선택 및 그룹 이동
+- [ ] 연결선 그리기
+  - [ ] 기본 연결 생성
+  - [ ] 연결 검증
+  - [ ] 연결 스타일링
+- [ ] 데이터 저장/불러오기
+  - [ ] JSON 직렬화
+  - [ ] 백엔드 API 연동
+
+**마일스톤 1**: 기본적인 테이블 → 필드 매핑 → INSERT 플로우 구현
+
+### Phase 2: 고급 기능 (2주)
+
+#### Week 3
+
+- [ ] 추가 노드 타입
+  - [ ] 외부 DB 소스 노드
+  - [ ] 조건 분기 노드
+  - [ ] UPDATE/DELETE 액션 노드
+- [ ] 데이터 변환 노드
+  - [ ] SQL 함수 지원
+  - [ ] 커스텀 표현식
+- [ ] 노드 설정 패널
+  - [ ] 우측 속성 패널
+  - [ ] 인라인 편집
+  - [ ] 필드 자동 완성
+
+#### Week 4
+
+- [ ] 실시간 검증 시스템
+  - [ ] 구문 검증
+  - [ ] 논리 검증
+  - [ ] 타입 검증
+- [ ] 조건부 실행
+  - [ ] TRUE/FALSE 분기
+  - [ ] 다중 조건 처리
+- [ ] 오류 표시 및 해결
+  - [ ] 오류 하이라이트
+  - [ ] 오류 메시지 툴팁
+  - [ ] 자동 수정 제안
+
+**마일스톤 2**: 조건 분기 및 다중 액션을 포함한 복잡한 플로우 구현
+
+### Phase 3: UX 개선 (1주)
+
+#### Week 5
+
+- [ ] 미니맵
+  - [ ] 전체 플로우 미리보기
+  - [ ] 현재 뷰포트 표시
+  - [ ] 미니맵 클릭 네비게이션
+- [ ] 줌/팬 컨트롤
+  - [ ] 줌 인/아웃 버튼
+  - [ ] 전체 보기 버튼
+  - [ ] 선택된 노드로 포커스
+- [ ] 노드 템플릿 시스템
+  - [ ] 자주 사용하는 패턴 저장
+  - [ ] 템플릿 갤러리
+  - [ ] 드래그로 템플릿 적용
+- [ ] 키보드 단축키
+  - [ ] Ctrl+C/V: 복사/붙여넣기
+  - [ ] Delete: 삭제
+  - [ ] Ctrl+Z/Y: 실행 취소/다시 실행
+  - [ ] Ctrl+A: 전체 선택
+  - [ ] Space + Drag: 팬
+- [ ] 튜토리얼 및 도움말
+  - [ ] 첫 방문자 가이드
+  - [ ] 인터랙티브 튜토리얼
+  - [ ] 컨텍스트 도움말
+
+**마일스톤 3**: 사용자 친화적인 인터페이스 완성
+
+### Phase 4: 고급 기능 (1주)
+
+#### Week 6
+
+- [ ] 그룹화 기능
+  - [ ] 노드 그룹 생성
+  - [ ] 그룹 접기/펼치기
+  - [ ] 그룹 색상 및 라벨
+- [ ] 주석 시스템
+  - [ ] 노드 주석
+  - [ ] 플로팅 주석
+  - [ ] 연결선 라벨
+- [ ] 실행 추적 (디버그 모드)
+  - [ ] 노드별 실행 상태 표시
+  - [ ] 데이터 흐름 애니메이션
+  - [ ] 실행 로그 패널
+  - [ ] 중단점 설정
+- [ ] 버전 관리
+  - [ ] 플로우 버전 히스토리
+  - [ ] 버전 비교
+  - [ ] 이전 버전 복원
+- [ ] 내보내기/가져오기
+  - [ ] JSON 파일 내보내기
+  - [ ] JSON 파일 가져오기
+  - [ ] 이미지 내보내기 (PNG/SVG)
+  - [ ] 템플릿 공유
+
+**마일스톤 4**: 프로덕션 레디 기능 완성
+
+### Phase 5: 최적화 및 테스트 (1주)
+
+#### Week 7
+
+- [ ] 성능 최적화
+  - [ ] 대규모 플로우 렌더링 최적화
+  - [ ] 가상 스크롤링
+  - [ ] 레이지 로딩
+- [ ] 단위 테스트
+  - [ ] 노드 컴포넌트 테스트
+  - [ ] 검증 로직 테스트
+  - [ ] 플로우 실행 테스트
+- [ ] 통합 테스트
+  - [ ] E2E 시나리오 테스트
+  - [ ] 크로스 브라우저 테스트
+- [ ] 사용자 테스트
+  - [ ] 베타 테스터 모집
+  - [ ] 피드백 수집 및 반영
+- [ ] 문서화
+  - [ ] 사용자 가이드
+  - [ ] API 문서
+  - [ ] 개발자 문서
+
+**최종 마일스톤**: 프로덕션 배포 준비 완료
+
+---
+
+## 💡 추가 기능 아이디어
+
+### 1. 템플릿 갤러리
+
+#### 1.1 내장 템플릿
+
+```
+📚 템플릿 카테고리:
+
+1️⃣ 데이터 동기화
+- 테이블 → 테이블 복사
+- 테이블 → 외부 DB 동기화
+- 양방향 동기화
+- 증분 동기화 (변경분만)
+
+2️⃣ 데이터 정제
+- 중복 제거
+- NULL 값 처리
+- 데이터 형식 변환
+- 데이터 검증
+
+3️⃣ 데이터 집계
+- 그룹별 집계
+- 시계열 집계
+- 피벗 테이블 생성
+
+4️⃣ 외부 연동
+- REST API → DB
+- DB → REST API
+- 파일 → DB
+- DB → 파일
+
+5️⃣ 배치 처리
+- 일일 배치
+- 대용량 데이터 처리
+- 에러 핸들링
+```
+
+#### 1.2 사용자 정의 템플릿
+
+```typescript
+// 템플릿 저장
+const saveAsTemplate = () => {
+  const template = {
+    name: "사용자 데이터 동기화",
+    description: "user_info를 Oracle USERS로 동기화",
+    category: "custom",
+    nodes: currentNodes,
+    edges: currentEdges,
+    thumbnail: generateThumbnail(),
+    parameters: extractParameters(), // 매개변수화
+  };
+
+  saveTemplate(template);
+};
+
+// 템플릿 적용
+const applyTemplate = (template) => {
+  // 매개변수 입력 받기
+  const params = promptParameters(template.parameters);
+
+  // 노드 생성
+  const nodes = template.nodes.map((node) => replaceParameters(node, params));
+
+  addNodes(nodes);
+  addEdges(template.edges);
+};
+```
+
+### 2. AI 어시스턴트
+
+#### 2.1 자연어 플로우 생성
+
+```
+사용자: "사용자 테이블을 Oracle DB로 복사하고 싶어요"
+
+AI 분석:
+1. 소스: user_info 테이블
+2. 타겟: Oracle USERS 테이블
+3. 액션: INSERT
+
+AI 제안:
+┌──────────────┐        ┌──────────────┐        ┌──────────────┐
+│ 📊 user_info │═══════>│ 🔀 필드 매핑  │═══════>│ ➕ INSERT    │
+│              │        │ 자동 매핑    │        │ USERS        │
+└──────────────┘        └──────────────┘        └──────────────┘
+
+"이 플로우를 생성할까요? [생성] [수정]"
+```
+
+#### 2.2 오류 자동 수정
+
+```
+오류 감지:
+❌ user_name 필드가 매핑되지 않았습니다
+
+AI 제안:
+"user_name을 USERNAME으로 자동 매핑할까요?"
+[자동 수정] [무시] [수동 수정]
+```
+
+#### 2.3 최적화 제안
+
+```
+AI 분석:
+⚠️ 현재 플로우는 10,000건 이상의 데이터를 처리합니다.
+
+AI 제안:
+1. 배치 처리 활성화 (1000건씩)
+2. 인덱스가 없는 필드 조건 제거
+3. 불필요한 필드 변환 최적화
+
+예상 성능 개선: 3배
+[적용하기] [상세 보기]
+```
+
+### 3. 실행 추적 (디버그 모드)
+
+#### 3.1 실시간 실행 상태
+
+```
+실행 중 노드 상태:
+
+┌──────────────┐        ┌──────────────┐        ┌──────────────┐
+│ 📊 user_info │        │ 🔀 필드 매핑  │        │ ➕ INSERT    │
+│ ✅ 완료      │═══════>│ ⚡ 실행 중    │═══════>│ ⏳ 대기 중   │
+│ 100건 읽음   │        │ 47/100       │        │              │
+└──────────────┘        └──────────────┘        └──────────────┘
+
+진행률: ████████░░ 80%
+소요 시간: 00:00:23
+예상 완료: 00:00:29
+```
+
+#### 3.2 데이터 미리보기
+
+```
+노드 클릭 시 데이터 샘플:
+
+┌─ user_info 출력 데이터 ─────────────┐
+│ Row 1:                              │
+│ user_id: 1001                       │
+│ user_name: "홍길동"                 │
+│ email: "hong@example.com"           │
+│                                     │
+│ Row 2:                              │
+│ user_id: 1002                       │
+│ user_name: "김철수"                 │
+│ ...                                 │
+│                                     │
+│ [전체 보기] [CSV 다운로드]         │
+└─────────────────────────────────────┘
+```
+
+#### 3.3 중단점 설정
+
+```
+디버그 기능:
+
+1. 중단점 설정
+   - 노드에서 우클릭 → "중단점 설정"
+   - 해당 노드에서 실행 일시 정지
+
+2. 단계별 실행
+   [▶️ 다음 노드] [⏭️ 완료까지] [⏹️ 중지]
+
+3. 변수 감시
+   - 특정 필드 값 추적
+   - 조건 변화 모니터링
+```
+
+### 4. 협업 기능
+
+#### 4.1 실시간 공동 편집
+
+```
+사용자 표시:
+- 👤 김주석 (나)
+- 👤 이철수 (편집 중) ← 빨간색 커서
+- 👤 박영희 (보기만) ← 초록색 커서
+
+동시 편집:
+- 각 사용자의 커서 위치 표시
+- 노드 잠금 (편집 중인 노드)
+- 충돌 방지 메커니즘
+```
+
+#### 4.2 변경 이력 및 댓글
+
+```
+┌──────────────┐
+│ 필드 매핑    │
+│              │ 💬 3
+│              │
+└──────────────┘
+
+댓글:
+김주석: "user_id를 SALT로 매핑하는게 맞나요?"
+이철수: "네, 맞습니다. 보안을 위한 필드입니다."
+박영희: "문서에 추가했습니다."
+```
+
+#### 4.3 승인 워크플로우
+
+```
+플로우 변경 승인 프로세스:
+
+1. 개발자: 플로우 수정
+   ↓
+2. 검토 요청
+   ↓
+3. 관리자: 변경 사항 검토
+   - 변경 전/후 비교
+   - 영향도 분석
+   ↓
+4. 승인/반려
+   ↓
+5. 배포 또는 재작업
+```
+
+---
+
+## 🎓 학습 리소스 및 온보딩
+
+### 1. 인터랙티브 튜토리얼
+
+#### 단계별 가이드
+
+```
+튜토리얼 1: 첫 번째 플로우 만들기 (5분)
+┌─────────────────────────────────────┐
+│ 1단계: 데이터 소스 추가              │
+│ "좌측에서 '테이블' 노드를 드래그"   │
+│                                     │
+│ [다음] [건너뛰기]                   │
+└─────────────────────────────────────┘
+
+튜토리얼 2: 조건 분기 사용하기 (7분)
+튜토리얼 3: 복잡한 변환 구현하기 (10분)
+튜토리얼 4: 디버깅 및 최적화 (8분)
+```
+
+### 2. 도움말 시스템
+
+#### 컨텍스트 도움말
+
+```
+노드 위에 마우스 오버:
+┌─────────────────────────────────────┐
+│ 💡 필드 매핑 노드                   │
+│                                     │
+│ 소스 필드를 타겟 필드로 매핑합니다.│
+│                                     │
+│ 사용 방법:                          │
+│ 1. 입력 데이터 연결                │
+│ 2. 매핑 규칙 정의                  │
+│ 3. 출력을 다음 노드로 연결         │
+│                                     │
+│ [자세히 보기] [튜토리얼 보기]      │
+└─────────────────────────────────────┘
+```
+
+### 3. 예제 갤러리
+
+```
+📚 예제 플로우 갤러리
+
+초급:
+- 단순 테이블 복사
+- 필드명 변경하여 복사
+- 특정 레코드만 복사
+
+중급:
+- 조건부 데이터 처리
+- 다중 테이블 병합
+- 데이터 형식 변환
+
+고급:
+- 복잡한 데이터 정제
+- 다중 분기 처리
+- 배치 최적화
+
+[예제 열기] [템플릿으로 저장]
+```
+
+---
+
+## 📈 성공 지표 (KPI)
+
+### 사용자 경험 지표
+
+```
+1. 학습 시간
+   - 목표: 기존 대비 40% 단축
+   - 측정: 첫 플로우 완성까지 소요 시간
+   - 현재: 평균 15분
+   - 목표: 평균 9분
+
+2. 작업 효율성
+   - 목표: 플로우 생성 시간 50% 단축
+   - 측정: 동일 기능 구현 소요 시간
+   - 현재: 평균 20분
+   - 목표: 평균 10분
+
+3. 오류 감소
+   - 목표: 설정 오류 60% 감소
+   - 측정: 실행 실패율
+   - 현재: 12%
+   - 목표: 4.8%
+
+4. 사용자 만족도
+   - 목표: NPS 40점 이상
+   - 측정: 설문 조사
+   - 주기: 분기별
+```
+
+### 기술 성능 지표
+
+```
+1. 렌더링 성능
+   - 목표: 100개 노드 렌더링 < 100ms
+   - 측정: React Profiler
+
+2. 메모리 사용
+   - 목표: 대규모 플로우 < 100MB
+   - 측정: Chrome DevTools
+
+3. 저장/로드 속도
+   - 목표: 플로우 저장 < 500ms
+   - 측정: Network 탭
+
+4. 검증 속도
+   - 목표: 실시간 검증 < 50ms
+   - 측정: Performance API
+```
+
+### 비즈니스 지표
+
+```
+1. 도입률
+   - 목표: 신규 사용자 60% 이상이 노드 에디터 선택
+   - 측정: 사용 통계
+
+2. 재사용률
+   - 목표: 템플릿 재사용 40% 이상
+   - 측정: 템플릿 사용 횟수
+
+3. 생산성
+   - 목표: 플로우 생성 수 2배 증가
+   - 측정: 월별 생성된 플로우 수
+
+4. 유지보수
+   - 목표: 플로우 수정 시간 30% 단축
+   - 측정: 평균 수정 소요 시간
+```
+
+---
+
+## 🔒 보안 및 권한
+
+### 1. 접근 제어
+
+```typescript
+// 플로우 권한 레벨
+enum FlowPermission {
+  VIEW = "view", // 보기만
+  EDIT = "edit", // 편집 가능
+  EXECUTE = "execute", // 실행 가능
+  ADMIN = "admin", // 모든 권한
+}
+
+// 권한 체크
+const checkPermission = (
+  userId: string,
+  flowId: number,
+  permission: FlowPermission
+) => {
+  const userPermissions = getUserFlowPermissions(userId, flowId);
+  return userPermissions.includes(permission);
+};
+```
+
+### 2. 민감 정보 보호
+
+```typescript
+// 비밀번호 등 민감 정보 마스킹
+const renderSensitiveField = (value: string, fieldType: string) => {
+  if (fieldType === "password" || fieldType === "secret") {
+    return "••••••••";
+  }
+  return value;
+};
+
+// 실행 로그에서 민감 정보 제외
+const sanitizeLog = (log: string) => {
+  return log
+    .replace(/password=\w+/gi, "password=***")
+    .replace(/token=\w+/gi, "token=***");
+};
+```
+
+### 3. 감사 로그
+
+```typescript
+// 모든 플로우 변경 기록
+interface AuditLog {
+  timestamp: Date;
+  userId: string;
+  flowId: number;
+  action: "create" | "update" | "delete" | "execute";
+  changes: {
+    before: any;
+    after: any;
+  };
+  ipAddress: string;
+}
+
+// 로그 기록
+const logFlowChange = (log: AuditLog) => {
+  saveAuditLog(log);
+
+  if (isCriticalChange(log)) {
+    notifyAdmins(log);
+  }
+};
+```
+
+---
+
+## 🌐 국제화 (i18n)
+
+### 지원 언어
+
+```
+- 한국어 (ko) - 기본
+- 영어 (en)
+- 일본어 (ja)
+- 중국어 간체 (zh-CN)
+```
+
+### 번역 대상
+
+```
+1. UI 라벨 및 버튼
+2. 노드 타입명 및 설명
+3. 오류 메시지
+4. 도움말 및 튜토리얼
+5. 템플릿명 및 설명
+```
+
+---
+
+## 📱 반응형 디자인
+
+### 화면 크기별 대응
+
+```
+1. 데스크톱 (1920px+)
+   - 전체 기능 사용 가능
+   - 3열 레이아웃 (도구-캔버스-속성)
+
+2. 노트북 (1366px ~ 1920px)
+   - 속성 패널 접기 가능
+   - 2열 레이아웃
+
+3. 태블릿 (768px ~ 1366px)
+   - 도구 패널 오버레이
+   - 1열 레이아웃 + 플로팅 패널
+
+4. 모바일 (~ 768px)
+   - 뷰어 모드만 지원 (편집 불가)
+   - 플로우 실행 및 모니터링 가능
+```
+
+---
+
+## 🎉 결론
+
+노드 기반 데이터 제어 시스템은 현재의 단계별 마법사 방식에 비해 다음과 같은 혁신적인 개선을 제공합니다:
+
+### 핵심 가치
+
+1. **직관성**: 비개발자도 쉽게 이해하고 사용
+2. **효율성**: 작업 시간 50% 이상 단축
+3. **유연성**: 복잡한 로직도 쉽게 표현
+4. **협업**: 팀 간 소통 및 협업 향상
+5. **품질**: 실시간 검증으로 오류 감소
+
+### 기대 효과
+
+- 사용자 만족도 향상
+- 개발 생산성 증가
+- 유지보수 비용 감소
+- 시스템 안정성 향상
+
+### 다음 단계
+
+1. 이해관계자 리뷰 및 피드백
+2. 프로토타입 개발 (1주)
+3. 사용자 테스트 (1주)
+4. 본격 개발 시작
+
+---
+
+## 📚 참고 자료
+
+### 유사 시스템
+
+1. **n8n**: 워크플로우 자동화 플랫폼
+   - https://n8n.io/
+2. **Node-RED**: IoT 플로우 기반 프로그래밍
+   - https://nodered.org/
+3. **Unreal Blueprint**: 게임 개발 비주얼 스크립팅
+   - https://docs.unrealengine.com/en-US/ProgrammingAndScripting/Blueprints/
+
+### 기술 문서
+
+1. **React Flow 공식 문서**
+   - https://reactflow.dev/
+2. **React Flow 예제**
+   - https://reactflow.dev/examples
+3. **TypeScript 베스트 프랙티스**
+   - https://www.typescriptlang.org/docs/
+
+### 디자인 가이드
+
+1. **Material Design - Data Visualization**
+   - https://material.io/design/communication/data-visualization.html
+2. **Blueprint UI Framework**
+   - https://blueprintjs.com/
+
+---
+
+**문서 버전**: 1.0  
+**최종 수정**: 2025-10-02  
+**작성자**: 개발팀  
+**검토자**: 제품팀, 디자인팀  
+**승인자**: CTO
diff --git a/docs/노드_시스템_버튼_통합_분석.md b/docs/노드_시스템_버튼_통합_분석.md
new file mode 100644
index 00000000..c1a97517
--- /dev/null
+++ b/docs/노드_시스템_버튼_통합_분석.md
@@ -0,0 +1,939 @@
+# 노드 시스템 - 버튼 통합 호환성 분석
+
+**작성일**: 2025-01-02  
+**버전**: 1.0  
+**상태**: 🔍 분석 완료
+
+---
+
+## 📋 목차
+
+1. [개요](#개요)
+2. [현재 시스템 분석](#현재-시스템-분석)
+3. [호환성 분석](#호환성-분석)
+4. [통합 전략](#통합-전략)
+5. [마이그레이션 계획](#마이그레이션-계획)
+
+---
+
+## 개요
+
+### 목적
+
+화면관리의 버튼 컴포넌트에 할당된 기존 제어 시스템을 새로운 노드 기반 제어 시스템으로 전환하기 위한 호환성 분석
+
+### 비교 대상
+
+- **현재**: `relationshipId` 기반 제어 시스템
+- **신규**: `flowId` 기반 노드 제어 시스템
+
+---
+
+## 현재 시스템 분석
+
+### 1. 데이터 구조
+
+#### ButtonDataflowConfig
+
+```typescript
+interface ButtonDataflowConfig {
+  controlMode: "relationship" | "none";
+
+  relationshipConfig?: {
+    relationshipId: string; // 🔑 핵심: 관계 ID
+    relationshipName: string;
+    executionTiming: "before" | "after" | "replace";
+    contextData?: Record<string, any>;
+  };
+
+  controlDataSource?: "form" | "table-selection" | "both";
+  executionOptions?: ExecutionOptions;
+}
+```
+
+#### 관계 데이터 구조
+
+```typescript
+{
+  relationshipId: "rel-123",
+  conditions: [
+    {
+      field: "status",
+      operator: "equals",
+      value: "active"
+    }
+  ],
+  actionGroups: [
+    {
+      name: "메인 액션",
+      actions: [
+        {
+          type: "database",
+          operation: "INSERT",
+          tableName: "users",
+          fields: [...]
+        }
+      ]
+    }
+  ]
+}
+```
+
+---
+
+### 2. 실행 흐름
+
+```
+┌─────────────────────────────────────┐
+│  1. 버튼 클릭                         │
+│  OptimizedButtonComponent.tsx       │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  2. executeButtonAction()           │
+│  ImprovedButtonActionExecutor.ts    │
+│  - executionPlan 생성               │
+│  - before/after/replace 구분        │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  3. executeControls()               │
+│  - relationshipId로 관계 조회        │
+│  - 조건 검증                         │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  4. evaluateConditions()            │
+│  - formData 검증                    │
+│  - selectedRowsData 검증            │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  5. executeDataAction()             │
+│  - INSERT/UPDATE/DELETE 실행        │
+│  - 순차적 액션 실행                  │
+└─────────────────────────────────────┘
+```
+
+---
+
+### 3. 데이터 전달 방식
+
+#### 입력 데이터
+
+```typescript
+{
+  formData: {
+    name: "김철수",
+    email: "test@example.com",
+    status: "active"
+  },
+  selectedRowsData: [
+    { id: 1, name: "이영희" },
+    { id: 2, name: "박민수" }
+  ],
+  context: {
+    buttonId: "btn-1",
+    screenId: 123,
+    companyCode: "COMPANY_A",
+    userId: "user-1"
+  }
+}
+```
+
+#### 액션 실행 시
+
+```typescript
+// 각 액션에 전체 데이터 전달
+executeDataAction(action, {
+  formData,
+  selectedRowsData,
+  context,
+});
+```
+
+---
+
+## 새로운 노드 시스템 분석
+
+### 1. 데이터 구조
+
+#### FlowData
+
+```typescript
+interface FlowData {
+  flowId: number;
+  flowName: string;
+  flowDescription: string;
+  nodes: FlowNode[]; // 🔑 핵심: 노드 배열
+  edges: FlowEdge[]; // 🔑 핵심: 연결 정보
+}
+```
+
+#### 노드 예시
+
+```typescript
+// 소스 노드
+{
+  id: "source-1",
+  type: "tableSource",
+  data: {
+    tableName: "users",
+    schema: "public",
+    outputFields: [...]
+  }
+}
+
+// 조건 노드
+{
+  id: "condition-1",
+  type: "condition",
+  data: {
+    conditions: [{
+      field: "status",
+      operator: "equals",
+      value: "active"
+    }],
+    logic: "AND"
+  }
+}
+
+// 액션 노드
+{
+  id: "insert-1",
+  type: "insertAction",
+  data: {
+    targetTable: "users",
+    fieldMappings: [...]
+  }
+}
+```
+
+#### 연결 예시
+
+```typescript
+// 엣지 (노드 간 연결)
+{
+  id: "edge-1",
+  source: "source-1",
+  target: "condition-1"
+},
+{
+  id: "edge-2",
+  source: "condition-1",
+  target: "insert-1",
+  sourceHandle: "true" // TRUE 분기
+}
+```
+
+---
+
+### 2. 실행 흐름
+
+```
+┌─────────────────────────────────────┐
+│  1. 버튼 클릭                         │
+│  FlowEditor 또는 Button Component   │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  2. executeFlow()                   │
+│  - flowId로 플로우 조회              │
+│  - nodes + edges 로드               │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  3. topologicalSort()               │
+│  - 노드 의존성 분석                  │
+│  - 실행 순서 결정                    │
+│  Result: [["source"], ["insert", "update"]] │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  4. executeLevel()                  │
+│  - 같은 레벨 노드 병렬 실행          │
+│  - Promise.allSettled 사용          │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  5. executeNode()                   │
+│  - 부모 노드 상태 확인               │
+│  - 실패 시 스킵                      │
+└─────────────┬───────────────────────┘
+              ↓
+┌─────────────────────────────────────┐
+│  6. executeActionWithTransaction()  │
+│  - 독립 트랜잭션 시작                │
+│  - 액션 실행                         │
+│  - 성공 시 커밋, 실패 시 롤백        │
+└─────────────────────────────────────┘
+```
+
+---
+
+### 3. 데이터 전달 방식
+
+#### ExecutionContext
+
+```typescript
+{
+  sourceData: [
+    { id: 1, name: "김철수", status: "active" },
+    { id: 2, name: "이영희", status: "inactive" }
+  ],
+  nodeResults: Map<string, NodeResult> {
+    "source-1" => { status: "success", data: [...] },
+    "condition-1" => { status: "success", data: true },
+    "insert-1" => { status: "success", data: { insertedCount: 1 } }
+  },
+  executionOrder: ["source-1", "condition-1", "insert-1"]
+}
+```
+
+#### 노드 실행 시
+
+```typescript
+// 부모 노드 결과 전달
+const inputData = prepareInputData(node, parents, context);
+
+// 부모가 하나면 부모의 결과 데이터
+// 부모가 여러 개면 모든 부모의 데이터 병합
+```
+
+---
+
+## 호환성 분석
+
+### ✅ 호환 가능한 부분
+
+#### 1. 조건 검증
+
+**현재**:
+
+```typescript
+{
+  field: "status",
+  operator: "equals",
+  value: "active"
+}
+```
+
+**신규**:
+
+```typescript
+{
+  type: "condition",
+  data: {
+    conditions: [
+      {
+        field: "status",
+        operator: "equals",
+        value: "active"
+      }
+    ]
+  }
+}
+```
+
+**결론**: ✅ **조건 구조가 거의 동일** → 마이그레이션 쉬움
+
+---
+
+#### 2. 액션 실행
+
+**현재**:
+
+```typescript
+{
+  type: "database",
+  operation: "INSERT",
+  tableName: "users",
+  fields: [
+    { name: "name", value: "김철수" }
+  ]
+}
+```
+
+**신규**:
+
+```typescript
+{
+  type: "insertAction",
+  data: {
+    targetTable: "users",
+    fieldMappings: [
+      { sourceField: "name", targetField: "name" }
+    ]
+  }
+}
+```
+
+**결론**: ✅ **액션 개념이 동일** → 필드명만 변환하면 됨
+
+---
+
+#### 3. 데이터 소스
+
+**현재**:
+
+```typescript
+controlDataSource: "form" | "table-selection" | "both";
+```
+
+**신규**:
+
+```typescript
+{
+  type: "tableSource", // 테이블 선택 데이터
+  // 또는
+  type: "manualInput", // 폼 데이터
+}
+```
+
+**결론**: ✅ **소스 타입 매핑 가능**
+
+---
+
+### ⚠️ 차이점 및 주의사항
+
+#### 1. 실행 타이밍
+
+**현재**:
+
+```typescript
+executionTiming: "before" | "after" | "replace";
+```
+
+**신규**:
+
+```
+노드 그래프 자체가 실행 순서를 정의
+타이밍은 노드 연결로 표현됨
+```
+
+**문제점**:
+
+- `before/after` 개념이 노드에 없음
+- 버튼의 기본 액션과 제어를 어떻게 조합할지?
+
+**해결 방안**:
+
+```
+Option A: 버튼 액션을 노드로 표현
+   Button → [Before Nodes] → [Button Action Node] → [After Nodes]
+
+Option B: 실행 시점 지정
+   flowConfig: {
+     flowId: 123,
+     timing: "before" | "after" | "replace"
+   }
+```
+
+---
+
+#### 2. ActionGroups vs 병렬 실행
+
+**현재**:
+
+```typescript
+actionGroups: [
+  {
+    name: "그룹1",
+    actions: [action1, action2], // 순차 실행
+  },
+];
+```
+
+**신규**:
+
+```
+소스
+  ↓
+  ├─→ INSERT (병렬)
+  ├─→ UPDATE (병렬)
+  └─→ DELETE (병렬)
+```
+
+**문제점**:
+
+- 현재는 "그룹 내 순차, 그룹 간 조건부"
+- 신규는 "레벨별 병렬, 연쇄 중단"
+
+**해결 방안**:
+
+```
+노드 연결로 순차/병렬 표현:
+
+순차:  INSERT → UPDATE → DELETE
+병렬:  Source → INSERT
+              → UPDATE
+              → DELETE
+```
+
+---
+
+#### 3. 데이터 전달 방식
+
+**현재**:
+
+```typescript
+// 모든 액션에 동일한 데이터 전달
+executeDataAction(action, {
+  formData,
+  selectedRowsData,
+  context,
+});
+```
+
+**신규**:
+
+```typescript
+// 부모 노드 결과를 자식에게 전달
+const inputData = parentResult.data || sourceData;
+```
+
+**문제점**:
+
+- 현재는 "원본 데이터 공유"
+- 신규는 "결과 데이터 체이닝"
+
+**해결 방안**:
+
+```typescript
+// 버튼 실행 시 초기 데이터 설정
+context.sourceData = {
+  formData,
+  selectedRowsData,
+};
+
+// 각 노드는 필요에 따라 선택
+- formData 사용
+- 부모 결과 사용
+- 둘 다 사용
+```
+
+---
+
+#### 4. 컨텍스트 정보
+
+**현재**:
+
+```typescript
+{
+  buttonId: "btn-1",
+  screenId: 123,
+  companyCode: "COMPANY_A",
+  userId: "user-1"
+}
+```
+
+**신규**:
+
+```typescript
+// ExecutionContext에 추가 필요
+{
+  sourceData: [...],
+  nodeResults: Map(),
+  // 🆕 추가 필요
+  buttonContext?: {
+    buttonId: string,
+    screenId: number,
+    companyCode: string,
+    userId: string
+  }
+}
+```
+
+**결론**: ✅ **컨텍스트 확장 가능**
+
+---
+
+## 통합 전략
+
+### 전략 1: 하이브리드 방식 (권장 ⭐⭐⭐)
+
+#### 개념
+
+버튼 설정에서 `relationshipId` 대신 `flowId`를 저장하고, 기존 타이밍 개념 유지
+
+#### 버튼 설정
+
+```typescript
+interface ButtonDataflowConfig {
+  controlMode: "flow"; // 🆕 신규 모드
+
+  flowConfig?: {
+    flowId: number; // 🔑 노드 플로우 ID
+    flowName: string;
+    executionTiming: "before" | "after" | "replace"; // 기존 유지
+    contextData?: Record<string, any>;
+  };
+
+  controlDataSource?: "form" | "table-selection" | "both";
+}
+```
+
+#### 실행 로직
+
+```typescript
+async function executeButtonWithFlow(
+  buttonConfig: ButtonDataflowConfig,
+  formData: Record<string, any>,
+  context: ButtonExecutionContext
+) {
+  const { flowConfig } = buttonConfig;
+
+  // 1. 플로우 조회
+  const flow = await getNodeFlow(flowConfig.flowId);
+
+  // 2. 초기 데이터 준비
+  const executionContext: ExecutionContext = {
+    sourceData: prepareSourceData(formData, context),
+    nodeResults: new Map(),
+    executionOrder: [],
+    buttonContext: {
+      // 🆕 버튼 컨텍스트 추가
+      buttonId: context.buttonId,
+      screenId: context.screenId,
+      companyCode: context.companyCode,
+      userId: context.userId,
+    },
+  };
+
+  // 3. 타이밍에 따라 실행
+  switch (flowConfig.executionTiming) {
+    case "before":
+      await executeFlow(flow, executionContext);
+      await executeOriginalButtonAction(buttonConfig, context);
+      break;
+
+    case "after":
+      await executeOriginalButtonAction(buttonConfig, context);
+      await executeFlow(flow, executionContext);
+      break;
+
+    case "replace":
+      await executeFlow(flow, executionContext);
+      break;
+  }
+}
+```
+
+#### 소스 데이터 준비
+
+```typescript
+function prepareSourceData(
+  formData: Record<string, any>,
+  context: ButtonExecutionContext
+): any[] {
+  const { controlDataSource, selectedRowsData } = context;
+
+  switch (controlDataSource) {
+    case "form":
+      return [formData]; // 폼 데이터를 배열로
+
+    case "table-selection":
+      return selectedRowsData || []; // 테이블 선택 데이터
+
+    case "both":
+      return [
+        { source: "form", data: formData },
+        { source: "table", data: selectedRowsData },
+      ];
+
+    default:
+      return [formData];
+  }
+}
+```
+
+---
+
+### 전략 2: 완전 전환 방식
+
+#### 개념
+
+버튼 액션 자체를 노드로 표현 (버튼 = 플로우 트리거)
+
+#### 플로우 구조
+
+```
+ManualInput (formData)
+    ↓
+Condition (status == "active")
+    ↓
+  ┌─┴─┐
+TRUE  FALSE
+  ↓     ↓
+INSERT CANCEL
+  ↓
+ButtonAction (원래 버튼 액션)
+```
+
+#### 장점
+
+- ✅ 시스템 단순화 (노드만 존재)
+- ✅ 시각적으로 명확
+- ✅ 유연한 워크플로우
+
+#### 단점
+
+- ⚠️ 기존 버튼 개념 변경
+- ⚠️ 마이그레이션 복잡
+- ⚠️ UI 학습 곡선
+
+---
+
+## 마이그레이션 계획
+
+### Phase 1: 하이브리드 지원
+
+#### 목표
+
+기존 `relationshipId` 방식과 새로운 `flowId` 방식 모두 지원
+
+#### 작업
+
+1. **ButtonDataflowConfig 확장**
+
+```typescript
+interface ButtonDataflowConfig {
+  controlMode: "relationship" | "flow" | "none";
+
+  // 기존 (하위 호환)
+  relationshipConfig?: {
+    relationshipId: string;
+    executionTiming: "before" | "after" | "replace";
+  };
+
+  // 🆕 신규
+  flowConfig?: {
+    flowId: number;
+    executionTiming: "before" | "after" | "replace";
+  };
+}
+```
+
+2. **실행 로직 분기**
+
+```typescript
+if (buttonConfig.controlMode === "flow") {
+  await executeButtonWithFlow(buttonConfig, formData, context);
+} else if (buttonConfig.controlMode === "relationship") {
+  await executeButtonWithRelationship(buttonConfig, formData, context);
+}
+```
+
+3. **UI 업데이트**
+
+- 버튼 설정에 "제어 방식 선택" 추가
+- "기존 관계" vs "노드 플로우" 선택 가능
+
+---
+
+### Phase 2: 마이그레이션 도구
+
+#### 관계 → 플로우 변환기
+
+```typescript
+async function migrateRelationshipToFlow(
+  relationshipId: string
+): Promise<number> {
+  // 1. 기존 관계 조회
+  const relationship = await getRelationship(relationshipId);
+
+  // 2. 노드 생성
+  const nodes: FlowNode[] = [];
+  const edges: FlowEdge[] = [];
+
+  // 소스 노드 (formData 또는 table)
+  const sourceNode = {
+    id: "source-1",
+    type: "manualInput",
+    data: { fields: extractFields(relationship) },
+  };
+  nodes.push(sourceNode);
+
+  // 조건 노드
+  if (relationship.conditions.length > 0) {
+    const conditionNode = {
+      id: "condition-1",
+      type: "condition",
+      data: {
+        conditions: relationship.conditions,
+        logic: relationship.logic || "AND",
+      },
+    };
+    nodes.push(conditionNode);
+    edges.push({ id: "e1", source: "source-1", target: "condition-1" });
+  }
+
+  // 액션 노드들
+  let lastNodeId =
+    relationship.conditions.length > 0 ? "condition-1" : "source-1";
+
+  relationship.actionGroups.forEach((group, groupIdx) => {
+    group.actions.forEach((action, actionIdx) => {
+      const actionNodeId = `action-${groupIdx}-${actionIdx}`;
+      const actionNode = convertActionToNode(action, actionNodeId);
+      nodes.push(actionNode);
+
+      edges.push({
+        id: `e-${actionNodeId}`,
+        source: lastNodeId,
+        target: actionNodeId,
+      });
+
+      // 순차 실행인 경우
+      if (group.sequential) {
+        lastNodeId = actionNodeId;
+      }
+    });
+  });
+
+  // 3. 플로우 저장
+  const flowData = {
+    flowName: `Migrated: ${relationship.name}`,
+    flowDescription: `Migrated from relationship ${relationshipId}`,
+    flowData: JSON.stringify({ nodes, edges }),
+  };
+
+  const { flowId } = await createNodeFlow(flowData);
+
+  // 4. 버튼 설정 업데이트
+  await updateButtonConfig(relationshipId, {
+    controlMode: "flow",
+    flowConfig: {
+      flowId,
+      executionTiming: relationship.timing || "before",
+    },
+  });
+
+  return flowId;
+}
+```
+
+#### 액션 변환 로직
+
+```typescript
+function convertActionToNode(action: DataflowAction, nodeId: string): FlowNode {
+  switch (action.operation) {
+    case "INSERT":
+      return {
+        id: nodeId,
+        type: "insertAction",
+        data: {
+          targetTable: action.tableName,
+          fieldMappings: action.fields.map((f) => ({
+            sourceField: f.name,
+            targetField: f.name,
+            staticValue: f.type === "static" ? f.value : undefined,
+          })),
+        },
+      };
+
+    case "UPDATE":
+      return {
+        id: nodeId,
+        type: "updateAction",
+        data: {
+          targetTable: action.tableName,
+          whereConditions: action.conditions,
+          fieldMappings: action.fields.map((f) => ({
+            sourceField: f.name,
+            targetField: f.name,
+          })),
+        },
+      };
+
+    case "DELETE":
+      return {
+        id: nodeId,
+        type: "deleteAction",
+        data: {
+          targetTable: action.tableName,
+          whereConditions: action.conditions,
+        },
+      };
+
+    default:
+      throw new Error(`Unsupported operation: ${action.operation}`);
+  }
+}
+```
+
+---
+
+### Phase 3: 완전 전환
+
+#### 목표
+
+모든 버튼이 노드 플로우 방식 사용
+
+#### 작업
+
+1. **마이그레이션 스크립트 실행**
+
+```sql
+-- 모든 관계를 플로우로 변환
+SELECT migrate_all_relationships_to_flows();
+```
+
+2. **UI에서 관계 모드 제거**
+
+```typescript
+// controlMode에서 "relationship" 제거
+type ControlMode = "flow" | "none";
+```
+
+3. **레거시 코드 정리**
+
+- `executeButtonWithRelationship()` 제거
+- `RelationshipService` 제거 (또는 읽기 전용)
+
+---
+
+## 결론
+
+### ✅ 호환 가능
+
+노드 시스템과 버튼 제어 시스템은 **충분히 호환 가능**합니다!
+
+### 🎯 권장 방안
+
+**하이브리드 방식 (전략 1)**으로 점진적 마이그레이션
+
+#### 이유
+
+1. ✅ **기존 시스템 유지** - 서비스 중단 없음
+2. ✅ **점진적 전환** - 리스크 최소화
+3. ✅ **유연성** - 두 방식 모두 활용 가능
+4. ✅ **학습 곡선** - 사용자가 천천히 적응
+
+### 📋 다음 단계
+
+1. **Phase 1 구현** (예상: 2일)
+
+   - `ButtonDataflowConfig` 확장
+   - `executeButtonWithFlow()` 구현
+   - UI 선택 옵션 추가
+
+2. **Phase 2 도구 개발** (예상: 1일)
+
+   - 마이그레이션 스크립트
+   - 자동 변환 로직
+
+3. **Phase 3 전환** (예상: 1일)
+   - 데이터 마이그레이션
+   - 레거시 제거
+
+### 총 소요 시간
+
+**약 4일**
+
+---
+
+**참고 문서**:
+
+- [노드\_실행\_엔진\_설계.md](./노드_실행_엔진_설계.md)
+- [노드\_기반\_제어\_시스템\_개선\_계획.md](./노드_기반_제어_시스템_개선_계획.md)
diff --git a/docs/노드_실행_엔진_설계.md b/docs/노드_실행_엔진_설계.md
new file mode 100644
index 00000000..d5444a39
--- /dev/null
+++ b/docs/노드_실행_엔진_설계.md
@@ -0,0 +1,617 @@
+# 노드 실행 엔진 설계
+
+**작성일**: 2025-01-02  
+**버전**: 1.0  
+**상태**: ✅ 확정
+
+---
+
+## 📋 목차
+
+1. [개요](#개요)
+2. [실행 방식](#실행-방식)
+3. [데이터 흐름](#데이터-흐름)
+4. [오류 처리](#오류-처리)
+5. [구현 계획](#구현-계획)
+
+---
+
+## 개요
+
+### 목적
+
+노드 기반 데이터 플로우의 실행 엔진을 설계하여:
+
+- 효율적인 병렬 처리
+- 안정적인 오류 처리
+- 명확한 데이터 흐름
+
+### 핵심 원칙
+
+1. **독립적 트랜잭션**: 각 액션 노드는 독립적인 트랜잭션
+2. **부분 실패 허용**: 일부 실패해도 성공한 노드는 커밋
+3. **연쇄 중단**: 부모 노드 실패 시 자식 노드 스킵
+4. **병렬 실행**: 의존성 없는 노드는 병렬 실행
+
+---
+
+## 실행 방식
+
+### 1. 기본 구조
+
+```typescript
+interface ExecutionContext {
+  sourceData: any[]; // 원본 데이터
+  nodeResults: Map<string, NodeResult>; // 각 노드 실행 결과
+  executionOrder: string[]; // 실행 순서
+}
+
+interface NodeResult {
+  nodeId: string;
+  status: "pending" | "success" | "failed" | "skipped";
+  data?: any;
+  error?: Error;
+  startTime: number;
+  endTime?: number;
+}
+```
+
+---
+
+### 2. 실행 단계
+
+#### Step 1: 위상 정렬 (Topological Sort)
+
+노드 간 의존성을 파악하여 실행 순서 결정
+
+```typescript
+function topologicalSort(nodes: FlowNode[], edges: FlowEdge[]): string[][] {
+  // DAG(Directed Acyclic Graph) 순회
+  // 같은 레벨의 노드들은 배열로 그룹화
+
+  return [
+    ["tableSource-1"], // Level 0: 소스
+    ["insert-1", "update-1", "delete-1"], // Level 1: 병렬 실행 가능
+    ["update-2"], // Level 2: insert-1에 의존
+  ];
+}
+```
+
+#### Step 2: 레벨별 실행
+
+```typescript
+async function executeFlow(
+  nodes: FlowNode[],
+  edges: FlowEdge[]
+): Promise<ExecutionResult> {
+  const levels = topologicalSort(nodes, edges);
+  const context: ExecutionContext = {
+    sourceData: [],
+    nodeResults: new Map(),
+    executionOrder: [],
+  };
+
+  for (const level of levels) {
+    // 같은 레벨의 노드들은 병렬 실행
+    await executeLevel(level, nodes, context);
+  }
+
+  return generateExecutionReport(context);
+}
+```
+
+#### Step 3: 레벨 내 병렬 실행
+
+```typescript
+async function executeLevel(
+  nodeIds: string[],
+  nodes: FlowNode[],
+  context: ExecutionContext
+): Promise<void> {
+  // Promise.allSettled로 병렬 실행
+  const results = await Promise.allSettled(
+    nodeIds.map((nodeId) => executeNode(nodeId, nodes, context))
+  );
+
+  // 결과 저장
+  results.forEach((result, index) => {
+    const nodeId = nodeIds[index];
+    if (result.status === "fulfilled") {
+      context.nodeResults.set(nodeId, result.value);
+    } else {
+      context.nodeResults.set(nodeId, {
+        nodeId,
+        status: "failed",
+        error: result.reason,
+        startTime: Date.now(),
+        endTime: Date.now(),
+      });
+    }
+  });
+}
+```
+
+---
+
+## 데이터 흐름
+
+### 1. 소스 노드 실행
+
+```typescript
+async function executeSourceNode(node: TableSourceNode): Promise<any[]> {
+  const { tableName, schema, whereConditions } = node.data;
+
+  // 데이터베이스 쿼리 실행
+  const query = buildSelectQuery(tableName, schema, whereConditions);
+  const data = await executeQuery(query);
+
+  return data;
+}
+```
+
+**결과 예시**:
+
+```json
+[
+  { "id": 1, "name": "김철수", "age": 30 },
+  { "id": 2, "name": "이영희", "age": 25 },
+  { "id": 3, "name": "박민수", "age": 35 }
+]
+```
+
+---
+
+### 2. 액션 노드 실행
+
+#### 데이터 전달 방식
+
+```typescript
+async function executeNode(
+  nodeId: string,
+  nodes: FlowNode[],
+  context: ExecutionContext
+): Promise<NodeResult> {
+  const node = nodes.find((n) => n.id === nodeId);
+  const parents = getParentNodes(nodeId, edges);
+
+  // 1️⃣ 부모 노드 상태 확인
+  const parentFailed = parents.some((p) => {
+    const parentResult = context.nodeResults.get(p.id);
+    return parentResult?.status === "failed";
+  });
+
+  if (parentFailed) {
+    return {
+      nodeId,
+      status: "skipped",
+      error: new Error("Parent node failed"),
+      startTime: Date.now(),
+      endTime: Date.now(),
+    };
+  }
+
+  // 2️⃣ 입력 데이터 준비
+  const inputData = prepareInputData(node, parents, context);
+
+  // 3️⃣ 액션 실행 (독립 트랜잭션)
+  return await executeActionWithTransaction(node, inputData);
+}
+```
+
+#### 입력 데이터 준비
+
+```typescript
+function prepareInputData(
+  node: FlowNode,
+  parents: FlowNode[],
+  context: ExecutionContext
+): any {
+  if (parents.length === 0) {
+    // 소스 노드
+    return null;
+  } else if (parents.length === 1) {
+    // 단일 부모: 부모의 결과 데이터 전달
+    const parentResult = context.nodeResults.get(parents[0].id);
+    return parentResult?.data || context.sourceData;
+  } else {
+    // 다중 부모: 모든 부모의 데이터 병합
+    return parents.map((p) => {
+      const result = context.nodeResults.get(p.id);
+      return result?.data || context.sourceData;
+    });
+  }
+}
+```
+
+---
+
+### 3. 병렬 실행 예시
+
+```
+        TableSource
+        (100개 레코드)
+             ↓
+      ┌──────┼──────┐
+      ↓      ↓      ↓
+   INSERT UPDATE DELETE
+   (독립)  (독립)  (독립)
+```
+
+**실행 과정**:
+
+```typescript
+// 1. TableSource 실행
+const sourceData = await executeTableSource();
+// → [100개 레코드]
+
+// 2. 병렬 실행 (Promise.allSettled)
+const results = await Promise.allSettled([
+  executeInsertAction(insertNode, sourceData),
+  executeUpdateAction(updateNode, sourceData),
+  executeDeleteAction(deleteNode, sourceData),
+]);
+
+// 3. 각 액션은 독립 트랜잭션
+//    - INSERT 실패 → INSERT만 롤백
+//    - UPDATE 성공 → UPDATE 커밋
+//    - DELETE 성공 → DELETE 커밋
+```
+
+---
+
+### 4. 연쇄 실행 예시
+
+```
+        TableSource
+             ↓
+          INSERT
+             ❌ (실패)
+             ↓
+          UPDATE-2
+             ⏭️ (스킵)
+```
+
+**실행 과정**:
+
+```typescript
+// 1. TableSource 실행
+const sourceData = await executeTableSource();
+// → 성공 ✅
+
+// 2. INSERT 실행
+const insertResult = await executeInsertAction(insertNode, sourceData);
+// → 실패 ❌ (롤백됨)
+
+// 3. UPDATE-2 실행 시도
+const parentFailed = insertResult.status === "failed";
+if (parentFailed) {
+  return {
+    status: "skipped",
+    reason: "Parent INSERT failed",
+  };
+  // → 스킬 ⏭️
+}
+```
+
+---
+
+## 오류 처리
+
+### 1. 독립 트랜잭션
+
+각 액션 노드는 자체 트랜잭션을 가짐
+
+```typescript
+async function executeActionWithTransaction(
+  node: FlowNode,
+  inputData: any
+): Promise<NodeResult> {
+  // 트랜잭션 시작
+  const transaction = await db.beginTransaction();
+
+  try {
+    const result = await performAction(node, inputData, transaction);
+
+    // 성공 시 커밋
+    await transaction.commit();
+
+    return {
+      nodeId: node.id,
+      status: "success",
+      data: result,
+      startTime: Date.now(),
+      endTime: Date.now(),
+    };
+  } catch (error) {
+    // 실패 시 롤백
+    await transaction.rollback();
+
+    return {
+      nodeId: node.id,
+      status: "failed",
+      error: error,
+      startTime: Date.now(),
+      endTime: Date.now(),
+    };
+  }
+}
+```
+
+---
+
+### 2. 부분 실패 허용
+
+```typescript
+// Promise.allSettled 사용
+const results = await Promise.allSettled([action1(), action2(), action3()]);
+
+// 결과 수집
+const summary = {
+  total: results.length,
+  success: results.filter((r) => r.status === "fulfilled").length,
+  failed: results.filter((r) => r.status === "rejected").length,
+  details: results,
+};
+```
+
+**예시 결과**:
+
+```json
+{
+  "total": 3,
+  "success": 2,
+  "failed": 1,
+  "details": [
+    { "status": "rejected", "reason": "Duplicate key error" },
+    { "status": "fulfilled", "value": { "updatedCount": 100 } },
+    { "status": "fulfilled", "value": { "deletedCount": 50 } }
+  ]
+}
+```
+
+---
+
+### 3. 연쇄 중단
+
+부모 노드 실패 시 자식 노드 자동 스킵
+
+```typescript
+function shouldSkipNode(node: FlowNode, context: ExecutionContext): boolean {
+  const parents = getParentNodes(node.id);
+
+  return parents.some((parent) => {
+    const parentResult = context.nodeResults.get(parent.id);
+    return parentResult?.status === "failed";
+  });
+}
+```
+
+---
+
+### 4. 오류 메시지
+
+```typescript
+interface ExecutionError {
+  nodeId: string;
+  nodeName: string;
+  errorType: "validation" | "execution" | "connection" | "timeout";
+  message: string;
+  details?: any;
+  timestamp: number;
+}
+```
+
+**오류 메시지 예시**:
+
+```json
+{
+  "nodeId": "insert-1",
+  "nodeName": "INSERT 액션",
+  "errorType": "execution",
+  "message": "Duplicate key error: 'email' already exists",
+  "details": {
+    "table": "users",
+    "constraint": "users_email_unique",
+    "value": "test@example.com"
+  },
+  "timestamp": 1704182400000
+}
+```
+
+---
+
+## 구현 계획
+
+### Phase 1: 기본 실행 엔진 (우선순위: 높음)
+
+**작업 항목**:
+
+1. ✅ 위상 정렬 알고리즘 구현
+2. ✅ 레벨별 실행 로직
+3. ✅ Promise.allSettled 기반 병렬 실행
+4. ✅ 독립 트랜잭션 처리
+5. ✅ 연쇄 중단 로직
+
+**예상 시간**: 1일
+
+---
+
+### Phase 2: 소스 노드 실행 (우선순위: 높음)
+
+**작업 항목**:
+
+1. ✅ TableSource 실행기
+2. ✅ ExternalDBSource 실행기
+3. ✅ RestAPISource 실행기
+4. ✅ 데이터 캐싱
+
+**예상 시간**: 1일
+
+---
+
+### Phase 3: 액션 노드 실행 (우선순위: 높음)
+
+**작업 항목**:
+
+1. ✅ INSERT 액션 실행기
+2. ✅ UPDATE 액션 실행기
+3. ✅ DELETE 액션 실행기
+4. ✅ UPSERT 액션 실행기
+5. ✅ 필드 매핑 적용
+
+**예상 시간**: 2일
+
+---
+
+### Phase 4: 변환 노드 실행 (우선순위: 중간)
+
+**작업 항목**:
+
+1. ✅ FieldMapping 실행기
+2. ✅ DataTransform 실행기
+3. ✅ Condition 분기 처리
+
+**예상 시간**: 1일
+
+---
+
+### Phase 5: 오류 처리 및 모니터링 (우선순위: 중간)
+
+**작업 항목**:
+
+1. ✅ 상세 오류 메시지
+2. ✅ 실행 결과 리포트
+3. ✅ 실행 로그 저장
+4. ✅ 실시간 진행 상태 표시
+
+**예상 시간**: 1일
+
+---
+
+### Phase 6: 최적화 (우선순위: 낮음)
+
+**작업 항목**:
+
+1. ⏳ 데이터 스트리밍 (대용량 데이터)
+2. ⏳ 배치 처리 최적화
+3. ⏳ 병렬 처리 튜닝
+4. ⏳ 캐싱 전략
+
+**예상 시간**: 2일
+
+---
+
+## 실행 결과 예시
+
+### 성공 케이스
+
+```json
+{
+  "flowId": "flow-123",
+  "flowName": "사용자 데이터 동기화",
+  "status": "completed",
+  "startTime": "2025-01-02T10:00:00Z",
+  "endTime": "2025-01-02T10:00:05Z",
+  "duration": 5000,
+  "nodes": [
+    {
+      "nodeId": "source-1",
+      "nodeName": "TableSource",
+      "status": "success",
+      "recordCount": 100,
+      "duration": 500
+    },
+    {
+      "nodeId": "insert-1",
+      "nodeName": "INSERT",
+      "status": "success",
+      "insertedCount": 100,
+      "duration": 2000
+    },
+    {
+      "nodeId": "update-1",
+      "nodeName": "UPDATE",
+      "status": "success",
+      "updatedCount": 80,
+      "duration": 1500
+    }
+  ],
+  "summary": {
+    "total": 3,
+    "success": 3,
+    "failed": 0,
+    "skipped": 0
+  }
+}
+```
+
+---
+
+### 부분 실패 케이스
+
+```json
+{
+  "flowId": "flow-124",
+  "flowName": "데이터 처리",
+  "status": "partial_success",
+  "startTime": "2025-01-02T11:00:00Z",
+  "endTime": "2025-01-02T11:00:08Z",
+  "duration": 8000,
+  "nodes": [
+    {
+      "nodeId": "source-1",
+      "nodeName": "TableSource",
+      "status": "success",
+      "recordCount": 100
+    },
+    {
+      "nodeId": "insert-1",
+      "nodeName": "INSERT",
+      "status": "failed",
+      "error": "Duplicate key error",
+      "details": "email 'test@example.com' already exists"
+    },
+    {
+      "nodeId": "update-2",
+      "nodeName": "UPDATE-2",
+      "status": "skipped",
+      "reason": "Parent INSERT failed"
+    },
+    {
+      "nodeId": "update-1",
+      "nodeName": "UPDATE",
+      "status": "success",
+      "updatedCount": 50
+    },
+    {
+      "nodeId": "delete-1",
+      "nodeName": "DELETE",
+      "status": "success",
+      "deletedCount": 20
+    }
+  ],
+  "summary": {
+    "total": 5,
+    "success": 3,
+    "failed": 1,
+    "skipped": 1
+  }
+}
+```
+
+---
+
+## 다음 단계
+
+1. ✅ 데이터 처리 방식 확정 (완료)
+2. ⏳ 실행 엔진 구현 시작
+3. ⏳ 테스트 케이스 작성
+4. ⏳ UI에서 실행 결과 표시
+
+---
+
+**참고 문서**:
+
+- [노드*기반*제어*시스템*개선\_계획.md](./노드_기반_제어_시스템_개선_계획.md)
+- [노드*연결*규칙\_설계.md](./노드_연결_규칙_설계.md)
+- [노드*구조*개선안.md](./노드_구조_개선안.md)
diff --git a/docs/노드_연결_규칙_설계.md b/docs/노드_연결_규칙_설계.md
new file mode 100644
index 00000000..2fd16bcd
--- /dev/null
+++ b/docs/노드_연결_규칙_설계.md
@@ -0,0 +1,431 @@
+# 노드 연결 규칙 설계
+
+**작성일**: 2025-01-02  
+**버전**: 1.0  
+**상태**: 🔄 설계 중
+
+---
+
+## 📋 목차
+
+1. [개요](#개요)
+2. [노드 분류](#노드-분류)
+3. [연결 규칙 매트릭스](#연결-규칙-매트릭스)
+4. [상세 연결 규칙](#상세-연결-규칙)
+5. [구현 계획](#구현-계획)
+
+---
+
+## 개요
+
+### 목적
+
+노드 간 연결 가능 여부를 명확히 정의하여:
+
+- 사용자의 실수 방지
+- 논리적으로 올바른 플로우만 생성 가능
+- 명확한 오류 메시지 제공
+
+### 기본 원칙
+
+1. **데이터 흐름 방향**: 소스 → 변환 → 액션
+2. **타입 안전성**: 출력과 입력 타입이 호환되어야 함
+3. **논리적 정합성**: 의미 없는 연결 방지
+
+---
+
+## 노드 분류
+
+### 1. 데이터 소스 노드 (Source)
+
+**역할**: 데이터를 생성하는 시작점
+
+- `tableSource` - 내부 테이블
+- `externalDBSource` - 외부 DB
+- `restAPISource` - REST API
+
+**특징**:
+
+- ✅ 출력만 가능 (소스 핸들)
+- ❌ 입력 불가능
+- 플로우의 시작점
+
+---
+
+### 2. 변환/조건 노드 (Transform)
+
+**역할**: 데이터를 가공하거나 흐름을 제어
+
+#### 2.1 데이터 변환
+
+- `fieldMapping` - 필드 매핑
+- `dataTransform` - 데이터 변환
+
+**특징**:
+
+- ✅ 입력 가능 (타겟 핸들)
+- ✅ 출력 가능 (소스 핸들)
+- 중간 파이프라인 역할
+
+#### 2.2 조건 분기
+
+- `condition` - 조건 분기
+
+**특징**:
+
+- ✅ 입력 가능 (타겟 핸들)
+- ✅ 출력 가능 (TRUE/FALSE 2개의 소스 핸들)
+- 흐름을 분기
+
+---
+
+### 3. 액션 노드 (Action)
+
+**역할**: 실제 데이터베이스 작업 수행
+
+- `insertAction` - INSERT
+- `updateAction` - UPDATE
+- `deleteAction` - DELETE
+- `upsertAction` - UPSERT
+
+**특징**:
+
+- ✅ 입력 가능 (타겟 핸들)
+- ⚠️ 출력 제한적 (성공/실패 결과만)
+- 플로우의 종착점 또는 중간 액션
+
+---
+
+### 4. 유틸리티 노드 (Utility)
+
+**역할**: 보조적인 기능 제공
+
+- `log` - 로그 출력
+- `comment` - 주석
+
+**특징**:
+
+- `log`: 입력/출력 모두 가능 (패스스루)
+- `comment`: 연결 불가능 (독립 노드)
+
+---
+
+## 연결 규칙 매트릭스
+
+### 출력(From) → 입력(To) 연결 가능 여부
+
+| From ↓ / To →     | tableSource | externalDB | restAPI | condition | fieldMapping | dataTransform | insert | update | delete | upsert | log | comment |
+| ----------------- | ----------- | ---------- | ------- | --------- | ------------ | ------------- | ------ | ------ | ------ | ------ | --- | ------- |
+| **tableSource**   | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **externalDB**    | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **restAPI**       | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **condition**     | ❌          | ❌         | ❌      | ⚠️        | ✅           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **fieldMapping**  | ❌          | ❌         | ❌      | ✅        | ⚠️           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **dataTransform** | ❌          | ❌         | ❌      | ✅        | ✅           | ⚠️            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **insert**        | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ⚠️     | ⚠️     | ⚠️     | ⚠️     | ✅  | ❌      |
+| **update**        | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ⚠️     | ⚠️     | ⚠️     | ⚠️     | ✅  | ❌      |
+| **delete**        | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ⚠️     | ⚠️     | ⚠️     | ⚠️     | ✅  | ❌      |
+| **upsert**        | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ⚠️     | ⚠️     | ⚠️     | ⚠️     | ✅  | ❌      |
+| **log**           | ❌          | ❌         | ❌      | ✅        | ✅           | ✅            | ✅     | ✅     | ✅     | ✅     | ✅  | ❌      |
+| **comment**       | ❌          | ❌         | ❌      | ❌        | ❌           | ❌            | ❌     | ❌     | ❌     | ❌     | ❌  | ❌      |
+
+**범례**:
+
+- ✅ 허용
+- ❌ 금지
+- ⚠️ 조건부 허용 (경고 메시지와 함께)
+
+---
+
+## 상세 연결 규칙
+
+### 규칙 1: 소스 노드는 입력을 받을 수 없음
+
+**금지되는 연결**:
+
+```
+❌ 어떤 노드 → tableSource
+❌ 어떤 노드 → externalDBSource
+❌ 어떤 노드 → restAPISource
+```
+
+**이유**: 소스 노드는 데이터의 시작점이므로 외부 입력이 의미 없음
+
+**오류 메시지**:
+
+```
+"소스 노드는 입력을 받을 수 없습니다. 소스 노드는 플로우의 시작점입니다."
+```
+
+---
+
+### 규칙 2: 소스 노드끼리 연결 불가
+
+**금지되는 연결**:
+
+```
+❌ tableSource → externalDBSource
+❌ restAPISource → tableSource
+```
+
+**이유**: 소스 노드는 독립적으로 데이터를 생성하므로 서로 연결 불필요
+
+**오류 메시지**:
+
+```
+"소스 노드끼리는 연결할 수 없습니다. 각 소스는 독립적으로 동작합니다."
+```
+
+---
+
+### 규칙 3: Comment 노드는 연결 불가
+
+**금지되는 연결**:
+
+```
+❌ 어떤 노드 → comment
+❌ comment → 어떤 노드
+```
+
+**이유**: Comment는 설명 전용 노드로 데이터 흐름에 영향을 주지 않음
+
+**오류 메시지**:
+
+```
+"주석 노드는 연결할 수 없습니다. 주석은 플로우 설명 용도로만 사용됩니다."
+```
+
+---
+
+### 규칙 4: 동일한 타입의 변환 노드 연속 연결 경고
+
+**경고가 필요한 연결**:
+
+```
+⚠️ fieldMapping → fieldMapping
+⚠️ dataTransform → dataTransform
+⚠️ condition → condition
+```
+
+**이유**: 논리적으로 가능하지만 비효율적일 수 있음
+
+**경고 메시지**:
+
+```
+"동일한 타입의 변환 노드가 연속으로 연결되었습니다. 하나의 노드로 통합하는 것이 효율적입니다."
+```
+
+---
+
+### 규칙 5: 액션 노드 연속 연결 경고
+
+**경고가 필요한 연결**:
+
+```
+⚠️ insertAction → updateAction
+⚠️ updateAction → deleteAction
+⚠️ deleteAction → insertAction
+```
+
+**이유**: 트랜잭션 관리나 성능에 영향을 줄 수 있음
+
+**경고 메시지**:
+
+```
+"액션 노드가 연속으로 연결되었습니다. 트랜잭션과 성능을 고려해주세요."
+```
+
+---
+
+### 규칙 6: 자기 자신에게 연결 금지
+
+**금지되는 연결**:
+
+```
+❌ 모든 노드 → 자기 자신
+```
+
+**이유**: 무한 루프 방지
+
+**오류 메시지**:
+
+```
+"노드는 자기 자신에게 연결할 수 없습니다."
+```
+
+---
+
+### 규칙 7: Log 노드는 패스스루
+
+**허용되는 연결**:
+
+```
+✅ 모든 노드 → log → 모든 노드 (소스 제외)
+```
+
+**특징**:
+
+- Log 노드는 데이터를 그대로 전달
+- 디버깅 및 모니터링 용도
+- 데이터 흐름에 영향 없음
+
+---
+
+## 구현 계획
+
+### Phase 1: 기본 금지 규칙 (우선순위: 높음)
+
+**구현 위치**: `frontend/lib/stores/flowEditorStore.ts` - `validateConnection` 함수
+
+```typescript
+function validateConnection(
+  connection: Connection,
+  nodes: FlowNode[]
+): { valid: boolean; error?: string } {
+  const sourceNode = nodes.find((n) => n.id === connection.source);
+  const targetNode = nodes.find((n) => n.id === connection.target);
+
+  if (!sourceNode || !targetNode) {
+    return { valid: false, error: "노드를 찾을 수 없습니다" };
+  }
+
+  // 규칙 1: 소스 노드는 입력을 받을 수 없음
+  if (isSourceNode(targetNode.type)) {
+    return {
+      valid: false,
+      error:
+        "소스 노드는 입력을 받을 수 없습니다. 소스 노드는 플로우의 시작점입니다.",
+    };
+  }
+
+  // 규칙 2: 소스 노드끼리 연결 불가
+  if (isSourceNode(sourceNode.type) && isSourceNode(targetNode.type)) {
+    return {
+      valid: false,
+      error: "소스 노드끼리는 연결할 수 없습니다.",
+    };
+  }
+
+  // 규칙 3: Comment 노드는 연결 불가
+  if (sourceNode.type === "comment" || targetNode.type === "comment") {
+    return {
+      valid: false,
+      error: "주석 노드는 연결할 수 없습니다.",
+    };
+  }
+
+  // 규칙 6: 자기 자신에게 연결 금지
+  if (connection.source === connection.target) {
+    return {
+      valid: false,
+      error: "노드는 자기 자신에게 연결할 수 없습니다.",
+    };
+  }
+
+  return { valid: true };
+}
+```
+
+**예상 작업 시간**: 30분
+
+---
+
+### Phase 2: 경고 규칙 (우선순위: 중간)
+
+**구현 방법**: 연결은 허용하되 경고 표시
+
+```typescript
+function getConnectionWarning(
+  connection: Connection,
+  nodes: FlowNode[]
+): string | null {
+  const sourceNode = nodes.find((n) => n.id === connection.source);
+  const targetNode = nodes.find((n) => n.id === connection.target);
+
+  if (!sourceNode || !targetNode) return null;
+
+  // 규칙 4: 동일한 타입의 변환 노드 연속 연결
+  if (sourceNode.type === targetNode.type && isTransformNode(sourceNode.type)) {
+    return "동일한 타입의 변환 노드가 연속으로 연결되었습니다. 하나로 통합하는 것이 효율적입니다.";
+  }
+
+  // 규칙 5: 액션 노드 연속 연결
+  if (isActionNode(sourceNode.type) && isActionNode(targetNode.type)) {
+    return "액션 노드가 연속으로 연결되었습니다. 트랜잭션과 성능을 고려해주세요.";
+  }
+
+  return null;
+}
+```
+
+**UI 구현**:
+
+- 경고 아이콘을 연결선 위에 표시
+- 호버 시 경고 메시지 툴팁 표시
+
+**예상 작업 시간**: 1시간
+
+---
+
+### Phase 3: 시각적 피드백 (우선순위: 낮음)
+
+**기능**:
+
+1. 드래그 중 호환 가능한 노드 하이라이트
+2. 불가능한 연결 시도 시 빨간색 표시
+3. 경고가 있는 연결은 노란색 표시
+
+**예상 작업 시간**: 2시간
+
+---
+
+## 테스트 케이스
+
+### 금지 테스트
+
+- [ ] tableSource → tableSource (금지)
+- [ ] fieldMapping → comment (금지)
+- [ ] 자기 자신 → 자기 자신 (금지)
+
+### 경고 테스트
+
+- [ ] fieldMapping → fieldMapping (경고)
+- [ ] insertAction → updateAction (경고)
+
+### 정상 테스트
+
+- [ ] tableSource → fieldMapping → insertAction
+- [ ] externalDBSource → condition → (TRUE) → updateAction
+- [ ] restAPISource → log → dataTransform → upsertAction
+
+---
+
+## 향후 확장
+
+### 추가 고려사항
+
+1. **핸들별 제약**:
+
+   - Condition 노드의 TRUE/FALSE 출력 구분
+   - 특정 핸들만 특정 노드 타입과 연결 가능
+
+2. **데이터 타입 검증**:
+
+   - 숫자 필드만 계산 노드로 연결 가능
+   - 문자열 필드만 텍스트 변환 노드로 연결 가능
+
+3. **순서 제약**:
+   - UPDATE/DELETE 전에 반드시 SELECT 필요
+   - 특정 변환 순서 강제
+
+---
+
+## 변경 이력
+
+| 버전 | 날짜       | 변경 내용 | 작성자 |
+| ---- | ---------- | --------- | ------ |
+| 1.0  | 2025-01-02 | 초안 작성 | AI     |
+
+---
+
+**다음 단계**: Phase 1 구현 시작
diff --git a/frontend/app/(main)/admin/dataflow/node-editor/page.tsx b/frontend/app/(main)/admin/dataflow/node-editor/page.tsx
new file mode 100644
index 00000000..6fdb0da7
--- /dev/null
+++ b/frontend/app/(main)/admin/dataflow/node-editor/page.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+/**
+ * 노드 기반 제어 시스템 페이지
+ */
+
+import { FlowEditor } from "@/components/dataflow/node-editor/FlowEditor";
+
+export default function NodeEditorPage() {
+  return (
+    <div className="h-screen bg-gray-50">
+      {/* 페이지 헤더 */}
+      <div className="border-b bg-white p-4">
+        <div className="mx-auto">
+          <h1 className="text-2xl font-bold text-gray-900">노드 기반 제어 시스템</h1>
+          <p className="mt-1 text-sm text-gray-600">
+            드래그 앤 드롭으로 데이터 제어 플로우를 시각적으로 설계하고 관리합니다
+          </p>
+        </div>
+      </div>
+
+      {/* 에디터 */}
+      <FlowEditor />
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/FlowEditor.tsx b/frontend/components/dataflow/node-editor/FlowEditor.tsx
new file mode 100644
index 00000000..224a1f42
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/FlowEditor.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+/**
+ * 노드 기반 플로우 에디터 메인 컴포넌트
+ */
+
+import { useCallback, useRef } from "react";
+import ReactFlow, { Background, Controls, MiniMap, Panel, ReactFlowProvider, useReactFlow } from "reactflow";
+import "reactflow/dist/style.css";
+
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { NodePalette } from "./sidebar/NodePalette";
+import { PropertiesPanel } from "./panels/PropertiesPanel";
+import { FlowToolbar } from "./FlowToolbar";
+import { TableSourceNode } from "./nodes/TableSourceNode";
+import { ExternalDBSourceNode } from "./nodes/ExternalDBSourceNode";
+import { ConditionNode } from "./nodes/ConditionNode";
+import { FieldMappingNode } from "./nodes/FieldMappingNode";
+import { InsertActionNode } from "./nodes/InsertActionNode";
+import { UpdateActionNode } from "./nodes/UpdateActionNode";
+import { DeleteActionNode } from "./nodes/DeleteActionNode";
+import { UpsertActionNode } from "./nodes/UpsertActionNode";
+import { DataTransformNode } from "./nodes/DataTransformNode";
+import { RestAPISourceNode } from "./nodes/RestAPISourceNode";
+import { CommentNode } from "./nodes/CommentNode";
+import { LogNode } from "./nodes/LogNode";
+
+// 노드 타입들
+const nodeTypes = {
+  // 데이터 소스
+  tableSource: TableSourceNode,
+  externalDBSource: ExternalDBSourceNode,
+  restAPISource: RestAPISourceNode,
+  // 변환/조건
+  condition: ConditionNode,
+  fieldMapping: FieldMappingNode,
+  dataTransform: DataTransformNode,
+  // 액션
+  insertAction: InsertActionNode,
+  updateAction: UpdateActionNode,
+  deleteAction: DeleteActionNode,
+  upsertAction: UpsertActionNode,
+  // 유틸리티
+  comment: CommentNode,
+  log: LogNode,
+};
+
+/**
+ * FlowEditor 내부 컴포넌트
+ */
+function FlowEditorInner() {
+  const reactFlowWrapper = useRef<HTMLDivElement>(null);
+  const { screenToFlowPosition } = useReactFlow();
+
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    addNode,
+    showPropertiesPanel,
+    selectNodes,
+    selectedNodes,
+    removeNodes,
+  } = useFlowEditorStore();
+
+  /**
+   * 노드 선택 변경 핸들러
+   */
+  const onSelectionChange = useCallback(
+    ({ nodes: selectedNodes }: { nodes: any[] }) => {
+      const selectedIds = selectedNodes.map((node) => node.id);
+      selectNodes(selectedIds);
+      console.log("🔍 선택된 노드:", selectedIds);
+    },
+    [selectNodes],
+  );
+
+  /**
+   * 키보드 이벤트 핸들러 (Delete/Backspace 키로 노드 삭제)
+   */
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if ((event.key === "Delete" || event.key === "Backspace") && selectedNodes.length > 0) {
+        event.preventDefault();
+        console.log("🗑️ 선택된 노드 삭제:", selectedNodes);
+        removeNodes(selectedNodes);
+      }
+    },
+    [selectedNodes, removeNodes],
+  );
+
+  /**
+   * 드래그 앤 드롭 핸들러
+   */
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+
+      const type = event.dataTransfer.getData("application/reactflow");
+      if (!type) return;
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+
+      const newNode: any = {
+        id: `node_${Date.now()}`,
+        type,
+        position,
+        data: {
+          displayName: `새 ${type} 노드`,
+        },
+      };
+
+      addNode(newNode);
+    },
+    [screenToFlowPosition, addNode],
+  );
+
+  return (
+    <div className="flex h-full w-full">
+      {/* 좌측 노드 팔레트 */}
+      <div className="w-[250px] border-r bg-white">
+        <NodePalette />
+      </div>
+
+      {/* 중앙 캔버스 */}
+      <div className="relative flex-1" ref={reactFlowWrapper} onKeyDown={onKeyDown} tabIndex={0}>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onSelectionChange={onSelectionChange}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          nodeTypes={nodeTypes}
+          fitView
+          className="bg-gray-50"
+          deleteKeyCode={["Delete", "Backspace"]}
+        >
+          {/* 배경 그리드 */}
+          <Background gap={16} size={1} color="#E5E7EB" />
+
+          {/* 컨트롤 버튼 */}
+          <Controls className="bg-white shadow-md" />
+
+          {/* 미니맵 */}
+          <MiniMap
+            className="bg-white shadow-md"
+            nodeColor={(node) => {
+              // 노드 타입별 색상 (추후 구현)
+              return "#3B82F6";
+            }}
+            maskColor="rgba(0, 0, 0, 0.1)"
+          />
+
+          {/* 상단 툴바 */}
+          <Panel position="top-center" className="pointer-events-auto">
+            <FlowToolbar />
+          </Panel>
+        </ReactFlow>
+      </div>
+
+      {/* 우측 속성 패널 */}
+      {showPropertiesPanel && (
+        <div className="w-[350px] border-l bg-white">
+          <PropertiesPanel />
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * FlowEditor 메인 컴포넌트 (Provider로 감싸기)
+ */
+export function FlowEditor() {
+  return (
+    <div className="h-[calc(100vh-200px)] min-h-[700px] w-full">
+      <ReactFlowProvider>
+        <FlowEditorInner />
+      </ReactFlowProvider>
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/FlowToolbar.tsx b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
new file mode 100644
index 00000000..183b7090
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/FlowToolbar.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+/**
+ * 플로우 에디터 상단 툴바
+ */
+
+import { useState } from "react";
+import { Play, Save, FileCheck, Undo2, Redo2, ZoomIn, ZoomOut, FolderOpen, Download, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { useReactFlow } from "reactflow";
+import { LoadFlowDialog } from "./dialogs/LoadFlowDialog";
+import { getNodeFlow } from "@/lib/api/nodeFlows";
+
+export function FlowToolbar() {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  const {
+    flowName,
+    setFlowName,
+    validateFlow,
+    saveFlow,
+    exportFlow,
+    isExecuting,
+    isSaving,
+    selectedNodes,
+    removeNodes,
+  } = useFlowEditorStore();
+  const [showLoadDialog, setShowLoadDialog] = useState(false);
+
+  const handleValidate = () => {
+    const result = validateFlow();
+    if (result.valid) {
+      alert("✅ 검증 성공! 오류가 없습니다.");
+    } else {
+      alert(`❌ 검증 실패\n\n${result.errors.map((e) => `- ${e.message}`).join("\n")}`);
+    }
+  };
+
+  const handleSave = async () => {
+    const result = await saveFlow();
+    if (result.success) {
+      alert(`✅ ${result.message}\nFlow ID: ${result.flowId}`);
+    } else {
+      alert(`❌ 저장 실패\n\n${result.message}`);
+    }
+  };
+
+  const handleExport = () => {
+    const json = exportFlow();
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${flowName || "flow"}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    alert("✅ JSON 파일로 내보내기 완료!");
+  };
+
+  const handleLoad = async (flowId: number) => {
+    try {
+      const flow = await getNodeFlow(flowId);
+
+      // flowData가 이미 객체인지 문자열인지 확인
+      const parsedData = typeof flow.flowData === "string" ? JSON.parse(flow.flowData) : flow.flowData;
+
+      // Zustand 스토어의 loadFlow 함수 호출
+      useFlowEditorStore
+        .getState()
+        .loadFlow(flow.flowId, flow.flowName, flow.flowDescription, parsedData.nodes, parsedData.edges);
+      alert(`✅ "${flow.flowName}" 플로우를 불러왔습니다!`);
+    } catch (error) {
+      console.error("플로우 불러오기 오류:", error);
+      alert(error instanceof Error ? error.message : "플로우를 불러올 수 없습니다.");
+    }
+  };
+
+  const handleExecute = () => {
+    // TODO: 실행 로직 구현
+    alert("실행 기능 구현 예정");
+  };
+
+  const handleDelete = () => {
+    if (selectedNodes.length === 0) {
+      alert("삭제할 노드를 선택해주세요.");
+      return;
+    }
+
+    if (confirm(`선택된 ${selectedNodes.length}개 노드를 삭제하시겠습니까?`)) {
+      removeNodes(selectedNodes);
+      alert(`✅ ${selectedNodes.length}개 노드가 삭제되었습니다.`);
+    }
+  };
+
+  return (
+    <>
+      <LoadFlowDialog open={showLoadDialog} onOpenChange={setShowLoadDialog} onLoad={handleLoad} />
+      <div className="flex items-center gap-2 rounded-lg border bg-white p-2 shadow-md">
+        {/* 플로우 이름 */}
+        <Input
+          value={flowName}
+          onChange={(e) => setFlowName(e.target.value)}
+          className="h-8 w-[200px] text-sm"
+          placeholder="플로우 이름"
+        />
+
+        <div className="h-6 w-px bg-gray-200" />
+
+        {/* 실행 취소/다시 실행 */}
+        <Button variant="ghost" size="sm" title="실행 취소" disabled>
+          <Undo2 className="h-4 w-4" />
+        </Button>
+        <Button variant="ghost" size="sm" title="다시 실행" disabled>
+          <Redo2 className="h-4 w-4" />
+        </Button>
+
+        <div className="h-6 w-px bg-gray-200" />
+
+        {/* 삭제 버튼 */}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleDelete}
+          disabled={selectedNodes.length === 0}
+          title={selectedNodes.length > 0 ? `${selectedNodes.length}개 노드 삭제` : "삭제할 노드를 선택하세요"}
+          className="gap-1 text-red-600 hover:bg-red-50 hover:text-red-700 disabled:opacity-50"
+        >
+          <Trash2 className="h-4 w-4" />
+          {selectedNodes.length > 0 && <span className="text-xs">({selectedNodes.length})</span>}
+        </Button>
+
+        <div className="h-6 w-px bg-gray-200" />
+
+        {/* 줌 컨트롤 */}
+        <Button variant="ghost" size="sm" onClick={() => zoomIn()} title="확대">
+          <ZoomIn className="h-4 w-4" />
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => zoomOut()} title="축소">
+          <ZoomOut className="h-4 w-4" />
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => fitView()} title="전체 보기">
+          <span className="text-xs">전체</span>
+        </Button>
+
+        <div className="h-6 w-px bg-gray-200" />
+
+        {/* 불러오기 */}
+        <Button variant="outline" size="sm" onClick={() => setShowLoadDialog(true)} className="gap-1">
+          <FolderOpen className="h-4 w-4" />
+          <span className="text-xs">불러오기</span>
+        </Button>
+
+        {/* 저장 */}
+        <Button variant="outline" size="sm" onClick={handleSave} disabled={isSaving} className="gap-1">
+          <Save className="h-4 w-4" />
+          <span className="text-xs">{isSaving ? "저장 중..." : "저장"}</span>
+        </Button>
+
+        {/* 내보내기 */}
+        <Button variant="outline" size="sm" onClick={handleExport} className="gap-1">
+          <Download className="h-4 w-4" />
+          <span className="text-xs">JSON</span>
+        </Button>
+
+        <div className="h-6 w-px bg-gray-200" />
+
+        {/* 검증 */}
+        <Button variant="outline" size="sm" onClick={handleValidate} className="gap-1">
+          <FileCheck className="h-4 w-4" />
+          <span className="text-xs">검증</span>
+        </Button>
+
+        {/* 테스트 실행 */}
+        <Button
+          size="sm"
+          onClick={handleExecute}
+          disabled={isExecuting}
+          className="gap-1 bg-green-600 hover:bg-green-700"
+        >
+          <Play className="h-4 w-4" />
+          <span className="text-xs">{isExecuting ? "실행 중..." : "테스트 실행"}</span>
+        </Button>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
new file mode 100644
index 00000000..d5cc9b18
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/dialogs/LoadFlowDialog.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+/**
+ * 플로우 불러오기 다이얼로그
+ */
+
+import { useEffect, useState } from "react";
+import { Loader2, FileJson, Calendar, Trash2 } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { getNodeFlows, deleteNodeFlow } from "@/lib/api/nodeFlows";
+
+interface Flow {
+  flowId: number;
+  flowName: string;
+  flowDescription: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface LoadFlowDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onLoad: (flowId: number) => void;
+}
+
+export function LoadFlowDialog({ open, onOpenChange, onLoad }: LoadFlowDialogProps) {
+  const [flows, setFlows] = useState<Flow[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedFlowId, setSelectedFlowId] = useState<number | null>(null);
+  const [deleting, setDeleting] = useState<number | null>(null);
+
+  // 플로우 목록 조회
+  const fetchFlows = async () => {
+    setLoading(true);
+    try {
+      const flows = await getNodeFlows();
+      setFlows(flows);
+    } catch (error) {
+      console.error("플로우 목록 조회 오류:", error);
+      alert(error instanceof Error ? error.message : "플로우 목록을 불러올 수 없습니다.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 플로우 삭제
+  const handleDelete = async (flowId: number, flowName: string) => {
+    if (!confirm(`"${flowName}" 플로우를 삭제하시겠습니까?\n\n이 작업은 되돌릴 수 없습니다.`)) {
+      return;
+    }
+
+    setDeleting(flowId);
+    try {
+      await deleteNodeFlow(flowId);
+      alert("✅ 플로우가 삭제되었습니다.");
+      fetchFlows(); // 목록 새로고침
+    } catch (error) {
+      console.error("플로우 삭제 오류:", error);
+      alert(error instanceof Error ? error.message : "플로우를 삭제할 수 없습니다.");
+    } finally {
+      setDeleting(null);
+    }
+  };
+
+  // 플로우 불러오기
+  const handleLoad = () => {
+    if (selectedFlowId === null) {
+      alert("불러올 플로우를 선택해주세요.");
+      return;
+    }
+
+    onLoad(selectedFlowId);
+    onOpenChange(false);
+  };
+
+  // 다이얼로그 열릴 때 목록 조회
+  useEffect(() => {
+    if (open) {
+      fetchFlows();
+      setSelectedFlowId(null);
+    }
+  }, [open]);
+
+  // 날짜 포맷팅
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat("ko-KR", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    }).format(date);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>플로우 불러오기</DialogTitle>
+          <DialogDescription>저장된 플로우를 선택하여 불러옵니다.</DialogDescription>
+        </DialogHeader>
+
+        {loading ? (
+          <div className="flex items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+          </div>
+        ) : flows.length === 0 ? (
+          <div className="py-12 text-center">
+            <FileJson className="mx-auto mb-4 h-12 w-12 text-gray-300" />
+            <p className="text-sm text-gray-500">저장된 플로우가 없습니다.</p>
+          </div>
+        ) : (
+          <ScrollArea className="h-[400px]">
+            <div className="space-y-2 pr-4">
+              {flows.map((flow) => (
+                <div
+                  key={flow.flowId}
+                  className={`cursor-pointer rounded-lg border-2 p-4 transition-all hover:border-blue-300 hover:bg-blue-50 ${
+                    selectedFlowId === flow.flowId ? "border-blue-500 bg-blue-50" : "border-gray-200 bg-white"
+                  }`}
+                  onClick={() => setSelectedFlowId(flow.flowId)}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <h3 className="font-semibold text-gray-900">{flow.flowName}</h3>
+                        <span className="text-xs text-gray-400">#{flow.flowId}</span>
+                      </div>
+                      {flow.flowDescription && <p className="mt-1 text-sm text-gray-600">{flow.flowDescription}</p>}
+                      <div className="mt-2 flex items-center gap-4 text-xs text-gray-500">
+                        <div className="flex items-center gap-1">
+                          <Calendar className="h-3 w-3" />
+                          <span>수정: {formatDate(flow.updatedAt)}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDelete(flow.flowId, flow.flowName);
+                      }}
+                      disabled={deleting === flow.flowId}
+                      className="text-red-600 hover:bg-red-50 hover:text-red-700"
+                    >
+                      {deleting === flow.flowId ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        <Trash2 className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button onClick={handleLoad} disabled={selectedFlowId === null || loading}>
+            불러오기
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
new file mode 100644
index 00000000..986cf399
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/CommentNode.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+/**
+ * 주석 노드 - 플로우 설명용
+ */
+
+import { memo } from "react";
+import { NodeProps } from "reactflow";
+import { MessageSquare } from "lucide-react";
+import type { CommentNodeData } from "@/types/node-editor";
+
+export const CommentNode = memo(({ data, selected }: NodeProps<CommentNodeData>) => {
+  return (
+    <div
+      className={`max-w-[350px] min-w-[200px] rounded-lg border-2 border-dashed bg-yellow-50 shadow-sm transition-all ${
+        selected ? "border-yellow-500 shadow-md" : "border-yellow-300"
+      }`}
+    >
+      <div className="p-3">
+        <div className="mb-2 flex items-center gap-2">
+          <MessageSquare className="h-4 w-4 text-yellow-600" />
+          <span className="text-xs font-semibold text-yellow-800">메모</span>
+        </div>
+        <div className="text-sm whitespace-pre-wrap text-gray-700">{data.content || "메모를 입력하세요..."}</div>
+      </div>
+    </div>
+  );
+});
+
+CommentNode.displayName = "CommentNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
new file mode 100644
index 00000000..e662d474
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/ConditionNode.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * 조건 분기 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Zap, Check, X } from "lucide-react";
+import type { ConditionNodeData } from "@/types/node-editor";
+
+const OPERATOR_LABELS: Record<string, string> = {
+  EQUALS: "=",
+  NOT_EQUALS: "≠",
+  GREATER_THAN: ">",
+  LESS_THAN: "<",
+  GREATER_THAN_OR_EQUAL: "≥",
+  LESS_THAN_OR_EQUAL: "≤",
+  LIKE: "포함",
+  NOT_LIKE: "미포함",
+  IN: "IN",
+  NOT_IN: "NOT IN",
+  IS_NULL: "NULL",
+  IS_NOT_NULL: "NOT NULL",
+};
+
+export const ConditionNode = memo(({ data, selected }: NodeProps<ConditionNodeData>) => {
+  return (
+    <div
+      className={`min-w-[280px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-yellow-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-yellow-500 !bg-white" />
+
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-yellow-500 px-3 py-2 text-white">
+        <Zap className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">조건 검사</div>
+          <div className="text-xs opacity-80">{data.displayName || "조건 분기"}</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        {data.conditions && data.conditions.length > 0 ? (
+          <div className="space-y-2">
+            <div className="text-xs font-medium text-gray-700">조건식: ({data.conditions.length}개)</div>
+            <div className="max-h-[150px] space-y-1.5 overflow-y-auto">
+              {data.conditions.slice(0, 4).map((condition, idx) => (
+                <div key={idx} className="rounded bg-yellow-50 px-2 py-1.5 text-xs">
+                  {idx > 0 && (
+                    <div className="mb-1 text-center text-xs font-semibold text-yellow-600">{data.logic}</div>
+                  )}
+                  <div className="flex items-center gap-1">
+                    <span className="font-mono text-gray-700">{condition.field}</span>
+                    <span className="rounded bg-yellow-200 px-1 py-0.5 text-yellow-800">
+                      {OPERATOR_LABELS[condition.operator] || condition.operator}
+                    </span>
+                    {condition.value !== null && condition.value !== undefined && (
+                      <span className="text-gray-600">
+                        {typeof condition.value === "string" ? `"${condition.value}"` : String(condition.value)}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {data.conditions.length > 4 && (
+                <div className="text-xs text-gray-400">... 외 {data.conditions.length - 4}개</div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="text-center text-xs text-gray-400">조건 없음</div>
+        )}
+      </div>
+
+      {/* 분기 출력 핸들 */}
+      <div className="border-t">
+        <div className="grid grid-cols-2">
+          {/* TRUE 출력 */}
+          <div className="relative border-r p-2">
+            <div className="flex items-center justify-center gap-1 text-xs">
+              <Check className="h-3 w-3 text-green-600" />
+              <span className="font-medium text-green-600">TRUE</span>
+            </div>
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="true"
+              className="!-right-1.5 !h-3 !w-3 !border-2 !border-green-500 !bg-white"
+            />
+          </div>
+
+          {/* FALSE 출력 */}
+          <div className="relative p-2">
+            <div className="flex items-center justify-center gap-1 text-xs">
+              <X className="h-3 w-3 text-red-600" />
+              <span className="font-medium text-red-600">FALSE</span>
+            </div>
+            <Handle
+              type="source"
+              position={Position.Right}
+              id="false"
+              className="!-right-1.5 !h-3 !w-3 !border-2 !border-red-500 !bg-white"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ConditionNode.displayName = "ConditionNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
new file mode 100644
index 00000000..f5ed2e77
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/DataTransformNode.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * 데이터 변환 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Wand2, ArrowRight } from "lucide-react";
+import type { DataTransformNodeData } from "@/types/node-editor";
+
+export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransformNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-indigo-600 px-3 py-2 text-white">
+        <Wand2 className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">{data.displayName || "데이터 변환"}</div>
+          <div className="text-xs opacity-80">{data.transformations?.length || 0}개 변환</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        {data.transformations && data.transformations.length > 0 ? (
+          <div className="space-y-2">
+            {data.transformations.slice(0, 3).map((transform, idx) => {
+              const sourceLabel = transform.sourceFieldLabel || transform.sourceField || "소스";
+              const targetField = transform.targetField || transform.sourceField;
+              const targetLabel = transform.targetFieldLabel || targetField;
+              const isInPlace = !transform.targetField || transform.targetField === transform.sourceField;
+
+              return (
+                <div key={idx} className="rounded bg-indigo-50 p-2">
+                  <div className="mb-1 flex items-center gap-2 text-xs">
+                    <span className="font-medium text-indigo-700">{transform.type}</span>
+                  </div>
+                  <div className="text-xs text-gray-600">
+                    {sourceLabel}
+                    <span className="mx-1 text-gray-400">→</span>
+                    {isInPlace ? (
+                      <span className="font-medium text-indigo-600">(자기자신)</span>
+                    ) : (
+                      <span>{targetLabel}</span>
+                    )}
+                  </div>
+                  {/* 타입별 추가 정보 */}
+                  {transform.type === "EXPLODE" && transform.delimiter && (
+                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.delimiter}</div>
+                  )}
+                  {transform.type === "CONCAT" && transform.separator && (
+                    <div className="mt-1 text-xs text-gray-500">구분자: {transform.separator}</div>
+                  )}
+                  {transform.type === "REPLACE" && (
+                    <div className="mt-1 text-xs text-gray-500">
+                      "{transform.searchValue}" → "{transform.replaceValue}"
+                    </div>
+                  )}
+                  {transform.expression && (
+                    <div className="mt-1 text-xs text-gray-500">
+                      <code className="rounded bg-white px-1 py-0.5">{transform.expression}</code>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+            {data.transformations.length > 3 && (
+              <div className="text-xs text-gray-400">... 외 {data.transformations.length - 3}개</div>
+            )}
+          </div>
+        ) : (
+          <div className="py-4 text-center text-xs text-gray-400">변환 규칙 없음</div>
+        )}
+      </div>
+
+      {/* 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-indigo-500" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-indigo-500" />
+    </div>
+  );
+});
+
+DataTransformNode.displayName = "DataTransformNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
new file mode 100644
index 00000000..0c76ed78
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/DeleteActionNode.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+/**
+ * DELETE 액션 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Trash2, AlertTriangle } from "lucide-react";
+import type { DeleteActionNodeData } from "@/types/node-editor";
+
+export const DeleteActionNode = memo(({ data, selected }: NodeProps<DeleteActionNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-red-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-red-500 px-3 py-2 text-white">
+        <Trash2 className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">DELETE</div>
+          <div className="text-xs opacity-80">{data.displayName || data.targetTable}</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 text-xs font-medium text-gray-500">타겟: {data.targetTable}</div>
+
+        {/* WHERE 조건 */}
+        {data.whereConditions && data.whereConditions.length > 0 ? (
+          <div className="space-y-1">
+            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="max-h-[120px] space-y-1 overflow-y-auto">
+              {data.whereConditions.map((condition, idx) => (
+                <div key={idx} className="rounded bg-red-50 px-2 py-1 text-xs">
+                  <span className="font-mono text-gray-700">{condition.field}</span>
+                  <span className="mx-1 text-red-600">{condition.operator}</span>
+                  <span className="text-gray-600">{condition.sourceField || condition.staticValue || "?"}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : (
+          <div className="rounded bg-yellow-50 p-2 text-xs text-yellow-700">⚠️ 조건 없음 - 모든 데이터 삭제 주의!</div>
+        )}
+
+        {/* 경고 메시지 */}
+        <div className="mt-3 flex items-start gap-2 rounded border border-red-200 bg-red-50 p-2">
+          <AlertTriangle className="h-3 w-3 flex-shrink-0 text-red-600" />
+          <div className="text-xs text-red-700">
+            <div className="font-medium">주의</div>
+            <div className="mt-0.5">삭제된 데이터는 복구할 수 없습니다</div>
+          </div>
+        </div>
+
+        {/* 옵션 */}
+        {data.options?.requireConfirmation && (
+          <div className="mt-2">
+            <span className="rounded bg-red-100 px-1.5 py-0.5 text-xs text-red-700">실행 전 확인 필요</span>
+          </div>
+        )}
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-red-500 !bg-white" />
+    </div>
+  );
+});
+
+DeleteActionNode.displayName = "DeleteActionNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
new file mode 100644
index 00000000..2088bced
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/ExternalDBSourceNode.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+/**
+ * 외부 DB 소스 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Plug } from "lucide-react";
+import type { ExternalDBSourceNodeData } from "@/types/node-editor";
+
+const DB_TYPE_COLORS: Record<string, string> = {
+  PostgreSQL: "#336791",
+  MySQL: "#4479A1",
+  Oracle: "#F80000",
+  MSSQL: "#CC2927",
+  MariaDB: "#003545",
+};
+
+const DB_TYPE_ICONS: Record<string, string> = {
+  PostgreSQL: "🐘",
+  MySQL: "🐬",
+  Oracle: "🔴",
+  MSSQL: "🟦",
+  MariaDB: "🦭",
+};
+
+export const ExternalDBSourceNode = memo(({ data, selected }: NodeProps<ExternalDBSourceNodeData>) => {
+  const dbColor = (data.dbType && DB_TYPE_COLORS[data.dbType]) || "#F59E0B";
+  const dbIcon = (data.dbType && DB_TYPE_ICONS[data.dbType]) || "🔌";
+
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg px-3 py-2 text-white" style={{ backgroundColor: dbColor }}>
+        <Plug className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">{data.displayName || data.connectionName}</div>
+          <div className="text-xs opacity-80">{data.tableName}</div>
+        </div>
+        <span className="text-lg">{dbIcon}</span>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 flex items-center gap-1 text-xs">
+          <div className="rounded bg-orange-100 px-2 py-0.5 font-medium text-orange-700">{data.dbType || "DB"}</div>
+          <div className="flex-1 text-gray-500">외부 DB</div>
+        </div>
+
+        {/* 필드 목록 */}
+        <div className="space-y-1">
+          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="max-h-[150px] overflow-y-auto">
+            {data.fields && data.fields.length > 0 ? (
+              data.fields.slice(0, 5).map((field) => (
+                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: dbColor }} />
+                  <span className="font-mono">{field.name}</span>
+                  <span className="text-gray-400">({field.type})</span>
+                </div>
+              ))
+            ) : (
+              <div className="text-xs text-gray-400">필드 없음</div>
+            )}
+            {data.fields && data.fields.length > 5 && (
+              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!h-3 !w-3 !border-2 !bg-white"
+        style={{ borderColor: dbColor }}
+      />
+    </div>
+  );
+});
+
+ExternalDBSourceNode.displayName = "ExternalDBSourceNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/FieldMappingNode.tsx b/frontend/components/dataflow/node-editor/nodes/FieldMappingNode.tsx
new file mode 100644
index 00000000..2101aa76
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/FieldMappingNode.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+/**
+ * 필드 매핑 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { ArrowLeftRight } from "lucide-react";
+import type { FieldMappingNodeData } from "@/types/node-editor";
+
+export const FieldMappingNode = memo(({ data, selected }: NodeProps<FieldMappingNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-purple-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-purple-500 !bg-white" />
+
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-purple-500 px-3 py-2 text-white">
+        <ArrowLeftRight className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">필드 매핑</div>
+          <div className="text-xs opacity-80">{data.displayName || "데이터 매핑"}</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        {data.mappings && data.mappings.length > 0 ? (
+          <div className="space-y-1">
+            <div className="text-xs font-medium text-gray-700">매핑 규칙: ({data.mappings.length}개)</div>
+            <div className="max-h-[150px] space-y-1 overflow-y-auto">
+              {data.mappings.slice(0, 5).map((mapping) => (
+                <div key={mapping.id} className="rounded bg-gray-50 px-2 py-1 text-xs">
+                  <div className="flex items-center justify-between">
+                    <span className="font-mono text-gray-600">{mapping.sourceField || "정적값"}</span>
+                    <span className="text-purple-500">→</span>
+                    <span className="font-mono text-gray-700">{mapping.targetField}</span>
+                  </div>
+                  {mapping.transform && <div className="mt-0.5 text-xs text-gray-400">변환: {mapping.transform}</div>}
+                  {mapping.staticValue !== undefined && (
+                    <div className="mt-0.5 text-xs text-gray-400">값: {String(mapping.staticValue)}</div>
+                  )}
+                </div>
+              ))}
+              {data.mappings.length > 5 && (
+                <div className="text-xs text-gray-400">... 외 {data.mappings.length - 5}개</div>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="text-center text-xs text-gray-400">매핑 규칙 없음</div>
+        )}
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-purple-500 !bg-white" />
+    </div>
+  );
+});
+
+FieldMappingNode.displayName = "FieldMappingNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
new file mode 100644
index 00000000..18f4d157
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/InsertActionNode.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * INSERT 액션 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Plus } from "lucide-react";
+import type { InsertActionNodeData } from "@/types/node-editor";
+
+export const InsertActionNode = memo(({ data, selected }: NodeProps<InsertActionNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-green-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-green-500 px-3 py-2 text-white">
+        <Plus className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">INSERT</div>
+          <div className="text-xs opacity-80">{data.displayName || data.targetTable}</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 text-xs font-medium text-gray-500">
+          타겟: {data.displayName || data.targetTable}
+          {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
+            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+          )}
+        </div>
+
+        {/* 필드 매핑 */}
+        {data.fieldMappings && data.fieldMappings.length > 0 && (
+          <div className="space-y-1">
+            <div className="text-xs font-medium text-gray-700">삽입 필드:</div>
+            <div className="max-h-[120px] space-y-1 overflow-y-auto">
+              {data.fieldMappings.slice(0, 4).map((mapping, idx) => (
+                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
+                  <span className="text-gray-600">
+                    {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
+                  </span>
+                  <span className="mx-1 text-gray-400">→</span>
+                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                </div>
+              ))}
+              {data.fieldMappings.length > 4 && (
+                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 4}개</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 옵션 */}
+        {data.options && (
+          <div className="mt-2 flex flex-wrap gap-1">
+            {data.options.ignoreDuplicates && (
+              <span className="rounded bg-green-100 px-1.5 py-0.5 text-xs text-green-700">중복 무시</span>
+            )}
+            {data.options.batchSize && (
+              <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+                배치 {data.options.batchSize}건
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-green-500 !bg-white" />
+    </div>
+  );
+});
+
+InsertActionNode.displayName = "InsertActionNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/LogNode.tsx b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
new file mode 100644
index 00000000..8f2fa295
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/LogNode.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+/**
+ * 로그 노드 - 디버깅 및 모니터링용
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { FileText, AlertCircle, Info, AlertTriangle } from "lucide-react";
+import type { LogNodeData } from "@/types/node-editor";
+
+const LOG_LEVEL_CONFIG = {
+  debug: { icon: Info, color: "text-blue-600", bg: "bg-blue-50", border: "border-blue-200" },
+  info: { icon: Info, color: "text-green-600", bg: "bg-green-50", border: "border-green-200" },
+  warn: { icon: AlertTriangle, color: "text-yellow-600", bg: "bg-yellow-50", border: "border-yellow-200" },
+  error: { icon: AlertCircle, color: "text-red-600", bg: "bg-red-50", border: "border-red-200" },
+};
+
+export const LogNode = memo(({ data, selected }: NodeProps<LogNodeData>) => {
+  const config = LOG_LEVEL_CONFIG[data.level] || LOG_LEVEL_CONFIG.info;
+  const Icon = config.icon;
+
+  return (
+    <div
+      className={`min-w-[200px] rounded-lg border-2 bg-white shadow-sm transition-all ${
+        selected ? `${config.border} shadow-md` : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className={`flex items-center gap-2 rounded-t-lg ${config.bg} px-3 py-2`}>
+        <FileText className={`h-4 w-4 ${config.color}`} />
+        <div className="flex-1">
+          <div className={`text-sm font-semibold ${config.color}`}>로그</div>
+          <div className="text-xs text-gray-600">{data.level.toUpperCase()}</div>
+        </div>
+        <Icon className={`h-4 w-4 ${config.color}`} />
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        {data.message ? (
+          <div className="text-sm text-gray-700">{data.message}</div>
+        ) : (
+          <div className="text-sm text-gray-400">로그 메시지 없음</div>
+        )}
+
+        {data.includeData && (
+          <div className="mt-2 rounded bg-gray-50 px-2 py-1 text-xs text-gray-600">✓ 데이터 포함</div>
+        )}
+      </div>
+
+      {/* 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-gray-400" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-gray-400" />
+    </div>
+  );
+});
+
+LogNode.displayName = "LogNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
new file mode 100644
index 00000000..d6713f85
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/RestAPISourceNode.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+/**
+ * REST API 소스 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Globe, Lock } from "lucide-react";
+import type { RestAPISourceNodeData } from "@/types/node-editor";
+
+const METHOD_COLORS: Record<string, string> = {
+  GET: "bg-green-100 text-green-700",
+  POST: "bg-blue-100 text-blue-700",
+  PUT: "bg-yellow-100 text-yellow-700",
+  DELETE: "bg-red-100 text-red-700",
+  PATCH: "bg-purple-100 text-purple-700",
+};
+
+export const RestAPISourceNode = memo(({ data, selected }: NodeProps<RestAPISourceNodeData>) => {
+  const methodColor = METHOD_COLORS[data.method] || "bg-gray-100 text-gray-700";
+
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-teal-600 px-3 py-2 text-white">
+        <Globe className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">{data.displayName || "REST API"}</div>
+          <div className="text-xs opacity-80">{data.url || "URL 미설정"}</div>
+        </div>
+        {data.authentication && <Lock className="h-4 w-4 opacity-70" />}
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        {/* HTTP 메서드 */}
+        <div className="mb-2 flex items-center gap-2">
+          <span className={`rounded px-2 py-1 text-xs font-semibold ${methodColor}`}>{data.method}</span>
+          {data.timeout && <span className="text-xs text-gray-500">{data.timeout}ms</span>}
+        </div>
+
+        {/* 헤더 */}
+        {data.headers && Object.keys(data.headers).length > 0 && (
+          <div className="mb-2">
+            <div className="text-xs font-medium text-gray-700">헤더:</div>
+            <div className="mt-1 space-y-1">
+              {Object.entries(data.headers)
+                .slice(0, 2)
+                .map(([key, value]) => (
+                  <div key={key} className="flex items-center gap-2 text-xs text-gray-600">
+                    <span className="font-mono">{key}:</span>
+                    <span className="truncate text-gray-500">{value}</span>
+                  </div>
+                ))}
+              {Object.keys(data.headers).length > 2 && (
+                <div className="text-xs text-gray-400">... 외 {Object.keys(data.headers).length - 2}개</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 응답 매핑 */}
+        {data.responseMapping && (
+          <div className="rounded bg-teal-50 px-2 py-1 text-xs text-teal-700">
+            응답 경로: <code className="font-mono">{data.responseMapping}</code>
+          </div>
+        )}
+      </div>
+
+      {/* 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-teal-500" />
+    </div>
+  );
+});
+
+RestAPISourceNode.displayName = "RestAPISourceNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
new file mode 100644
index 00000000..f9a253c7
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/TableSourceNode.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+/**
+ * 테이블 소스 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Database } from "lucide-react";
+import type { TableSourceNodeData } from "@/types/node-editor";
+
+export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNodeData>) => {
+  // 디버깅: 필드 데이터 확인
+  if (data.fields && data.fields.length > 0) {
+    console.log("🔍 TableSource 필드 데이터:", data.fields);
+  }
+
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+        <Database className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">{data.displayName || data.tableName || "테이블 소스"}</div>
+          {data.tableName && data.displayName !== data.tableName && (
+            <div className="text-xs opacity-80">{data.tableName}</div>
+          )}
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 text-xs font-medium text-gray-500">📍 내부 데이터베이스</div>
+
+        {/* 필드 목록 */}
+        <div className="space-y-1">
+          <div className="text-xs font-medium text-gray-700">출력 필드:</div>
+          <div className="max-h-[150px] overflow-y-auto">
+            {data.fields && data.fields.length > 0 ? (
+              data.fields.slice(0, 5).map((field) => (
+                <div key={field.name} className="flex items-center gap-2 text-xs text-gray-600">
+                  <div className="h-1.5 w-1.5 rounded-full bg-blue-400" />
+                  <span className="font-medium">{field.label || field.displayName || field.name}</span>
+                  {(field.label || field.displayName) && field.label !== field.name && (
+                    <span className="font-mono text-gray-400">({field.name})</span>
+                  )}
+                  <span className="text-gray-400">{field.type}</span>
+                </div>
+              ))
+            ) : (
+              <div className="text-xs text-gray-400">필드 없음</div>
+            )}
+            {data.fields && data.fields.length > 5 && (
+              <div className="text-xs text-gray-400">... 외 {data.fields.length - 5}개</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+    </div>
+  );
+});
+
+TableSourceNode.displayName = "TableSourceNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
new file mode 100644
index 00000000..b7b0dfee
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/UpdateActionNode.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+/**
+ * UPDATE 액션 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Edit } from "lucide-react";
+import type { UpdateActionNodeData } from "@/types/node-editor";
+
+export const UpdateActionNode = memo(({ data, selected }: NodeProps<UpdateActionNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-blue-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-blue-500 px-3 py-2 text-white">
+        <Edit className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">UPDATE</div>
+          <div className="text-xs opacity-80">{data.displayName || data.targetTable}</div>
+        </div>
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 text-xs font-medium text-gray-500">
+          타겟: {data.displayName || data.targetTable}
+          {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
+            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+          )}
+        </div>
+
+        {/* WHERE 조건 */}
+        {data.whereConditions && data.whereConditions.length > 0 && (
+          <div className="mb-3 space-y-1">
+            <div className="text-xs font-medium text-gray-700">WHERE 조건:</div>
+            <div className="max-h-[80px] space-y-1 overflow-y-auto">
+              {data.whereConditions.slice(0, 2).map((condition, idx) => (
+                <div key={idx} className="rounded bg-blue-50 px-2 py-1 text-xs">
+                  <span className="font-mono text-gray-700">{condition.fieldLabel || condition.field}</span>
+                  <span className="mx-1 text-blue-600">{condition.operator}</span>
+                  <span className="text-gray-600">
+                    {condition.sourceFieldLabel || condition.sourceField || condition.staticValue || "?"}
+                  </span>
+                </div>
+              ))}
+              {data.whereConditions.length > 2 && (
+                <div className="text-xs text-gray-400">... 외 {data.whereConditions.length - 2}개</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 필드 매핑 */}
+        {data.fieldMappings && data.fieldMappings.length > 0 && (
+          <div className="space-y-1">
+            <div className="text-xs font-medium text-gray-700">업데이트 필드:</div>
+            <div className="max-h-[100px] space-y-1 overflow-y-auto">
+              {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
+                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
+                  <span className="text-gray-600">
+                    {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
+                  </span>
+                  <span className="mx-1 text-gray-400">→</span>
+                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                </div>
+              ))}
+              {data.fieldMappings.length > 3 && (
+                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 옵션 */}
+        {data.options && data.options.batchSize && (
+          <div className="mt-2">
+            <span className="rounded bg-blue-100 px-1.5 py-0.5 text-xs text-blue-700">
+              배치 {data.options.batchSize}건
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !border-2 !border-blue-500 !bg-white" />
+    </div>
+  );
+});
+
+UpdateActionNode.displayName = "UpdateActionNode";
diff --git a/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
new file mode 100644
index 00000000..4e5bdeba
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/nodes/UpsertActionNode.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+/**
+ * UPSERT 액션 노드
+ * INSERT와 UPDATE를 결합한 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { Database, RefreshCw } from "lucide-react";
+import type { UpsertActionNodeData } from "@/types/node-editor";
+
+export const UpsertActionNode = memo(({ data, selected }: NodeProps<UpsertActionNodeData>) => {
+  return (
+    <div
+      className={`min-w-[250px] rounded-lg border-2 bg-white shadow-md transition-all ${
+        selected ? "border-orange-500 shadow-lg" : "border-gray-200"
+      }`}
+    >
+      {/* 헤더 */}
+      <div className="flex items-center gap-2 rounded-t-lg bg-purple-600 px-3 py-2 text-white">
+        <RefreshCw className="h-4 w-4" />
+        <div className="flex-1">
+          <div className="text-sm font-semibold">{data.displayName || "UPSERT 액션"}</div>
+          <div className="text-xs opacity-80">{data.targetTable}</div>
+        </div>
+        <Database className="h-4 w-4 opacity-70" />
+      </div>
+
+      {/* 본문 */}
+      <div className="p-3">
+        <div className="mb-2 text-xs font-medium text-gray-500">
+          타겟: {data.displayName || data.targetTable}
+          {data.targetTable && data.displayName && data.displayName !== data.targetTable && (
+            <span className="ml-1 font-mono text-gray-400">({data.targetTable})</span>
+          )}
+        </div>
+
+        {/* 충돌 키 */}
+        {data.conflictKeys && data.conflictKeys.length > 0 && (
+          <div className="mb-2">
+            <div className="text-xs font-medium text-gray-700">충돌 키:</div>
+            <div className="mt-1 flex flex-wrap gap-1">
+              {data.conflictKeys.map((key, idx) => (
+                <span key={idx} className="rounded bg-purple-100 px-2 py-0.5 text-xs text-purple-700">
+                  {data.conflictKeyLabels?.[idx] || key}
+                </span>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 필드 매핑 */}
+        {data.fieldMappings && data.fieldMappings.length > 0 && (
+          <div className="mb-2">
+            <div className="text-xs font-medium text-gray-700">필드 매핑:</div>
+            <div className="mt-1 space-y-1">
+              {data.fieldMappings.slice(0, 3).map((mapping, idx) => (
+                <div key={idx} className="rounded bg-gray-50 px-2 py-1 text-xs">
+                  <span className="text-gray-600">
+                    {mapping.sourceFieldLabel || mapping.sourceField || mapping.staticValue || "?"}
+                  </span>
+                  <span className="mx-1 text-gray-400">→</span>
+                  <span className="font-mono text-gray-700">{mapping.targetFieldLabel || mapping.targetField}</span>
+                </div>
+              ))}
+              {data.fieldMappings.length > 3 && (
+                <div className="text-xs text-gray-400">... 외 {data.fieldMappings.length - 3}개</div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 옵션 */}
+        <div className="flex flex-wrap gap-1">
+          {data.options?.updateOnConflict && (
+            <span className="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700">충돌 시 업데이트</span>
+          )}
+          {data.options?.batchSize && (
+            <span className="rounded bg-gray-100 px-2 py-0.5 text-xs text-gray-600">
+              배치: {data.options.batchSize}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* 핸들 */}
+      <Handle type="target" position={Position.Left} className="!h-3 !w-3 !bg-purple-500" />
+      <Handle type="source" position={Position.Right} className="!h-3 !w-3 !bg-purple-500" />
+    </div>
+  );
+});
+
+UpsertActionNode.displayName = "UpsertActionNode";
diff --git a/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
new file mode 100644
index 00000000..0cdf68a6
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/PropertiesPanel.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * 노드 속성 편집 패널
+ */
+
+import { X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { TableSourceProperties } from "./properties/TableSourceProperties";
+import { InsertActionProperties } from "./properties/InsertActionProperties";
+import { FieldMappingProperties } from "./properties/FieldMappingProperties";
+import { ConditionProperties } from "./properties/ConditionProperties";
+import { UpdateActionProperties } from "./properties/UpdateActionProperties";
+import { DeleteActionProperties } from "./properties/DeleteActionProperties";
+import { ExternalDBSourceProperties } from "./properties/ExternalDBSourceProperties";
+import { UpsertActionProperties } from "./properties/UpsertActionProperties";
+import { DataTransformProperties } from "./properties/DataTransformProperties";
+import { RestAPISourceProperties } from "./properties/RestAPISourceProperties";
+import { CommentProperties } from "./properties/CommentProperties";
+import { LogProperties } from "./properties/LogProperties";
+import type { NodeType } from "@/types/node-editor";
+
+export function PropertiesPanel() {
+  const { nodes, selectedNodes, setShowPropertiesPanel } = useFlowEditorStore();
+
+  // 선택된 노드가 하나일 경우 해당 노드 데이터 가져오기
+  const selectedNode = selectedNodes.length === 1 ? nodes.find((n) => n.id === selectedNodes[0]) : null;
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between border-b p-4">
+        <div>
+          <h3 className="text-sm font-semibold text-gray-900">속성</h3>
+          {selectedNode && (
+            <p className="mt-0.5 text-xs text-gray-500">{getNodeTypeLabel(selectedNode.type as NodeType)}</p>
+          )}
+        </div>
+        <Button variant="ghost" size="sm" onClick={() => setShowPropertiesPanel(false)} className="h-6 w-6 p-0">
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* 내용 */}
+      <div className="flex-1 overflow-hidden">
+        {selectedNodes.length === 0 ? (
+          <div className="flex h-full items-center justify-center p-4">
+            <div className="text-center text-sm text-gray-500">
+              <div className="mb-2 text-2xl">📝</div>
+              <p>노드를 선택하여</p>
+              <p>속성을 편집하세요</p>
+            </div>
+          </div>
+        ) : selectedNodes.length === 1 && selectedNode ? (
+          <NodePropertiesRenderer node={selectedNode} />
+        ) : (
+          <div className="flex h-full items-center justify-center p-4">
+            <div className="text-center text-sm text-gray-500">
+              <div className="mb-2 text-2xl">📋</div>
+              <p>{selectedNodes.length}개의 노드가</p>
+              <p>선택되었습니다</p>
+              <p className="mt-2 text-xs">한 번에 하나의 노드만 편집할 수 있습니다</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 노드 타입별 속성 렌더러
+ */
+function NodePropertiesRenderer({ node }: { node: any }) {
+  switch (node.type) {
+    case "tableSource":
+      return <TableSourceProperties nodeId={node.id} data={node.data} />;
+
+    case "insertAction":
+      return <InsertActionProperties nodeId={node.id} data={node.data} />;
+
+    case "fieldMapping":
+      return <FieldMappingProperties nodeId={node.id} data={node.data} />;
+
+    case "condition":
+      return <ConditionProperties nodeId={node.id} data={node.data} />;
+
+    case "updateAction":
+      return <UpdateActionProperties nodeId={node.id} data={node.data} />;
+
+    case "deleteAction":
+      return <DeleteActionProperties nodeId={node.id} data={node.data} />;
+
+    case "externalDBSource":
+      return <ExternalDBSourceProperties nodeId={node.id} data={node.data} />;
+
+    case "upsertAction":
+      return <UpsertActionProperties nodeId={node.id} data={node.data} />;
+
+    case "dataTransform":
+      return <DataTransformProperties nodeId={node.id} data={node.data} />;
+
+    case "restAPISource":
+      return <RestAPISourceProperties nodeId={node.id} data={node.data} />;
+
+    case "comment":
+      return <CommentProperties nodeId={node.id} data={node.data} />;
+
+    case "log":
+      return <LogProperties nodeId={node.id} data={node.data} />;
+
+    default:
+      return (
+        <div className="p-4">
+          <div className="rounded border border-yellow-200 bg-yellow-50 p-4 text-sm">
+            <p className="font-medium text-yellow-800">🚧 속성 편집 준비 중</p>
+            <p className="mt-2 text-xs text-yellow-700">
+              {getNodeTypeLabel(node.type as NodeType)} 노드의 속성 편집 UI는 곧 구현될 예정입니다.
+            </p>
+            <div className="mt-3 rounded bg-white p-2 text-xs">
+              <p className="font-medium text-gray-700">노드 ID:</p>
+              <p className="font-mono text-gray-600">{node.id}</p>
+            </div>
+          </div>
+        </div>
+      );
+  }
+}
+
+/**
+ * 노드 타입 라벨 가져오기
+ */
+function getNodeTypeLabel(type: NodeType): string {
+  const labels: Record<NodeType, string> = {
+    tableSource: "테이블 소스",
+    externalDBSource: "외부 DB 소스",
+    restAPISource: "REST API 소스",
+    condition: "조건 분기",
+    fieldMapping: "필드 매핑",
+    dataTransform: "데이터 변환",
+    insertAction: "INSERT 액션",
+    updateAction: "UPDATE 액션",
+    deleteAction: "DELETE 액션",
+    upsertAction: "UPSERT 액션",
+    comment: "주석",
+    log: "로그",
+  };
+  return labels[type] || type;
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
new file mode 100644
index 00000000..a751fb20
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/CommentProperties.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { CommentNodeData } from "@/types/node-editor";
+import { MessageSquare } from "lucide-react";
+
+interface CommentPropertiesProps {
+  nodeId: string;
+  data: CommentNodeData;
+}
+
+export function CommentProperties({ nodeId, data }: CommentPropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [content, setContent] = useState(data.content || "");
+
+  useEffect(() => {
+    setContent(data.content || "");
+  }, [data]);
+
+  const handleApply = () => {
+    updateNode(nodeId, {
+      content,
+    });
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2 rounded-md bg-yellow-50 p-2">
+        <MessageSquare className="h-4 w-4 text-yellow-600" />
+        <span className="font-semibold text-yellow-600">주석</span>
+      </div>
+
+      <div>
+        <Label htmlFor="content" className="text-xs">
+          메모 내용
+        </Label>
+        <Textarea
+          id="content"
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          placeholder="플로우 설명이나 메모를 입력하세요..."
+          className="mt-1 text-sm"
+          rows={8}
+        />
+        <p className="mt-1 text-xs text-gray-500">이 노드는 플로우 실행에 영향을 주지 않습니다.</p>
+      </div>
+
+      <Button onClick={handleApply} className="w-full">
+        적용
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
new file mode 100644
index 00000000..933f9baf
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/ConditionProperties.tsx
@@ -0,0 +1,225 @@
+"use client";
+
+/**
+ * 조건 분기 노드 속성 편집
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import type { ConditionNodeData } from "@/types/node-editor";
+
+interface ConditionPropertiesProps {
+  nodeId: string;
+  data: ConditionNodeData;
+}
+
+const OPERATORS = [
+  { value: "EQUALS", label: "같음 (=)" },
+  { value: "NOT_EQUALS", label: "같지 않음 (≠)" },
+  { value: "GREATER_THAN", label: "보다 큼 (>)" },
+  { value: "LESS_THAN", label: "보다 작음 (<)" },
+  { value: "GREATER_THAN_OR_EQUAL", label: "크거나 같음 (≥)" },
+  { value: "LESS_THAN_OR_EQUAL", label: "작거나 같음 (≤)" },
+  { value: "LIKE", label: "포함 (LIKE)" },
+  { value: "NOT_LIKE", label: "미포함 (NOT LIKE)" },
+  { value: "IN", label: "IN" },
+  { value: "NOT_IN", label: "NOT IN" },
+  { value: "IS_NULL", label: "NULL" },
+  { value: "IS_NOT_NULL", label: "NOT NULL" },
+] as const;
+
+export function ConditionProperties({ nodeId, data }: ConditionPropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || "조건 분기");
+  const [conditions, setConditions] = useState(data.conditions || []);
+  const [logic, setLogic] = useState<"AND" | "OR">(data.logic || "AND");
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || "조건 분기");
+    setConditions(data.conditions || []);
+    setLogic(data.logic || "AND");
+  }, [data]);
+
+  const handleAddCondition = () => {
+    setConditions([
+      ...conditions,
+      {
+        field: "",
+        operator: "EQUALS",
+        value: "",
+      },
+    ]);
+  };
+
+  const handleRemoveCondition = (index: number) => {
+    setConditions(conditions.filter((_, i) => i !== index));
+  };
+
+  const handleConditionChange = (index: number, field: string, value: any) => {
+    const newConditions = [...conditions];
+    newConditions[index] = { ...newConditions[index], [field]: value };
+    setConditions(newConditions);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      conditions,
+      logic,
+    });
+  };
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="logic" className="text-xs">
+                조건 로직
+              </Label>
+              <Select value={logic} onValueChange={(value: "AND" | "OR") => setLogic(value)}>
+                <SelectTrigger className="mt-1">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="AND">AND (모두 충족)</SelectItem>
+                  <SelectItem value="OR">OR (하나라도 충족)</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </div>
+
+        {/* 조건식 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">조건식</h3>
+            <Button size="sm" variant="outline" onClick={handleAddCondition} className="h-7">
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+
+          {conditions.length > 0 ? (
+            <div className="space-y-2">
+              {conditions.map((condition, index) => (
+                <div key={index} className="rounded border bg-yellow-50 p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-yellow-700">조건 #{index + 1}</span>
+                      {index > 0 && (
+                        <span className="rounded bg-yellow-200 px-1.5 py-0.5 text-xs font-semibold text-yellow-800">
+                          {logic}
+                        </span>
+                      )}
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveCondition(index)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div>
+                      <Label className="text-xs text-gray-600">필드명</Label>
+                      <Input
+                        value={condition.field}
+                        onChange={(e) => handleConditionChange(index, "field", e.target.value)}
+                        placeholder="조건을 검사할 필드"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+
+                    <div>
+                      <Label className="text-xs text-gray-600">연산자</Label>
+                      <Select
+                        value={condition.operator}
+                        onValueChange={(value) => handleConditionChange(index, "operator", value)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {OPERATORS.map((op) => (
+                            <SelectItem key={op.value} value={op.value}>
+                              {op.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
+                      <div>
+                        <Label className="text-xs text-gray-600">비교 값</Label>
+                        <Input
+                          value={condition.value as string}
+                          onChange={(e) => handleConditionChange(index, "value", e.target.value)}
+                          placeholder="비교할 값"
+                          className="mt-1 h-8 text-xs"
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+              조건식이 없습니다. "추가" 버튼을 클릭하세요.
+            </div>
+          )}
+        </div>
+
+        {/* 저장 버튼 */}
+        <div className="flex gap-2">
+          <Button onClick={handleSave} className="flex-1" size="sm">
+            적용
+          </Button>
+        </div>
+
+        {/* 안내 */}
+        <div className="space-y-2">
+          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+            💡 <strong>AND</strong>: 모든 조건이 참이어야 TRUE 출력
+          </div>
+          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+            💡 <strong>OR</strong>: 하나라도 참이면 TRUE 출력
+          </div>
+          <div className="rounded bg-yellow-50 p-3 text-xs text-yellow-700">
+            ⚡ TRUE 출력은 오른쪽 위, FALSE 출력은 오른쪽 아래입니다.
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
new file mode 100644
index 00000000..5973df21
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/DataTransformProperties.tsx
@@ -0,0 +1,466 @@
+"use client";
+
+/**
+ * 데이터 변환 노드 속성 편집 (개선 버전)
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, Wand2, ArrowRight } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import type { DataTransformNodeData } from "@/types/node-editor";
+
+interface DataTransformPropertiesProps {
+  nodeId: string;
+  data: DataTransformNodeData;
+}
+
+const TRANSFORM_TYPES = [
+  { value: "UPPERCASE", label: "대문자 변환", category: "기본" },
+  { value: "LOWERCASE", label: "소문자 변환", category: "기본" },
+  { value: "TRIM", label: "공백 제거", category: "기본" },
+  { value: "CONCAT", label: "문자열 결합", category: "기본" },
+  { value: "SPLIT", label: "문자열 분리", category: "기본" },
+  { value: "REPLACE", label: "문자열 치환", category: "기본" },
+  { value: "EXPLODE", label: "행 확장 (1→N)", category: "고급" },
+  { value: "CAST", label: "타입 변환", category: "고급" },
+  { value: "FORMAT", label: "형식화", category: "고급" },
+  { value: "CALCULATE", label: "계산식", category: "고급" },
+  { value: "JSON_EXTRACT", label: "JSON 추출", category: "고급" },
+  { value: "CUSTOM", label: "사용자 정의", category: "고급" },
+] as const;
+
+export function DataTransformProperties({ nodeId, data }: DataTransformPropertiesProps) {
+  const { updateNode, nodes, edges } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || "데이터 변환");
+  const [transformations, setTransformations] = useState(data.transformations || []);
+
+  // 소스 필드 목록 (연결된 입력 노드에서 가져오기)
+  const [sourceFields, setSourceFields] = useState<Array<{ name: string; label?: string }>>([]);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || "데이터 변환");
+    setTransformations(data.transformations || []);
+  }, [data]);
+
+  // 연결된 소스 노드에서 필드 가져오기
+  useEffect(() => {
+    const inputEdges = edges.filter((edge) => edge.target === nodeId);
+    const sourceNodeIds = inputEdges.map((edge) => edge.source);
+    const sourceNodes = nodes.filter((node) => sourceNodeIds.includes(node.id));
+
+    const fields: Array<{ name: string; label?: string }> = [];
+    sourceNodes.forEach((node) => {
+      if (node.type === "tableSource" && node.data.fields) {
+        node.data.fields.forEach((field: any) => {
+          fields.push({
+            name: field.name,
+            label: field.label || field.displayName,
+          });
+        });
+      } else if (node.type === "externalDBSource" && node.data.fields) {
+        node.data.fields.forEach((field: any) => {
+          fields.push({
+            name: field.name,
+            label: field.label || field.displayName,
+          });
+        });
+      }
+    });
+
+    setSourceFields(fields);
+  }, [nodeId, nodes, edges]);
+
+  const handleAddTransformation = () => {
+    setTransformations([
+      ...transformations,
+      {
+        type: "UPPERCASE" as const,
+        sourceField: "",
+        targetField: "",
+      },
+    ]);
+  };
+
+  const handleRemoveTransformation = (index: number) => {
+    const newTransformations = transformations.filter((_, i) => i !== index);
+    setTransformations(newTransformations);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      transformations: newTransformations,
+    });
+  };
+
+  const handleTransformationChange = (index: number, field: string, value: any) => {
+    const newTransformations = [...transformations];
+
+    // 필드 변경 시 라벨도 함께 저장
+    if (field === "sourceField") {
+      const sourceField = sourceFields.find((f) => f.name === value);
+      newTransformations[index] = {
+        ...newTransformations[index],
+        sourceField: value,
+        sourceFieldLabel: sourceField?.label,
+      };
+    } else if (field === "targetField") {
+      // 타겟 필드는 새로 생성하는 필드이므로 라벨은 사용자가 직접 입력
+      newTransformations[index] = {
+        ...newTransformations[index],
+        targetField: value,
+      };
+    } else {
+      newTransformations[index] = { ...newTransformations[index], [field]: value };
+    }
+
+    setTransformations(newTransformations);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      transformations,
+    });
+  };
+
+  const renderTransformationFields = (transform: any, index: number) => {
+    const commonFields = (
+      <>
+        {/* 소스 필드 */}
+        {transform.type !== "CONCAT" && (
+          <div>
+            <Label className="text-xs text-gray-600">소스 필드</Label>
+            <Select
+              value={transform.sourceField || ""}
+              onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
+            >
+              <SelectTrigger className="mt-1 h-8 text-xs">
+                <SelectValue placeholder="소스 필드 선택" />
+              </SelectTrigger>
+              <SelectContent>
+                {sourceFields.length === 0 ? (
+                  <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                ) : (
+                  sourceFields.map((field) => (
+                    <SelectItem key={field.name} value={field.name} className="text-xs">
+                      <div className="flex items-center justify-between gap-2">
+                        <span className="font-medium">{field.label || field.name}</span>
+                        {field.label && field.label !== field.name && (
+                          <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                        )}
+                      </div>
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {/* 타겟 필드 */}
+        <div>
+          <Label className="text-xs text-gray-600">타겟 필드명 (선택)</Label>
+          <Input
+            value={transform.targetField || ""}
+            onChange={(e) => handleTransformationChange(index, "targetField", e.target.value)}
+            placeholder="비어있으면 소스 필드에 적용"
+            className="mt-1 h-8 text-xs"
+          />
+          <p className="mt-1 text-xs text-gray-400">
+            {transform.targetField ? (
+              transform.targetField === transform.sourceField ? (
+                <span className="text-indigo-600">✓ 소스 필드를 덮어씁니다</span>
+              ) : (
+                <span className="text-green-600">✓ 새 필드를 생성합니다</span>
+              )
+            ) : (
+              <span className="text-indigo-600">비어있음: 소스 필드를 덮어씁니다</span>
+            )}
+          </p>
+        </div>
+      </>
+    );
+
+    // 타입별 추가 필드
+    switch (transform.type) {
+      case "EXPLODE":
+        return (
+          <>
+            {commonFields}
+            <div>
+              <Label className="text-xs text-gray-600">구분자</Label>
+              <Input
+                value={transform.delimiter || ","}
+                onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
+                placeholder="예: , 또는 ; 또는 |"
+                className="mt-1 h-8 text-xs"
+              />
+              <p className="mt-1 text-xs text-gray-400">이 문자로 분리하여 여러 행으로 확장합니다</p>
+            </div>
+          </>
+        );
+
+      case "CONCAT":
+        return (
+          <>
+            {/* CONCAT은 다중 소스 필드를 지원 - 간소화 버전 */}
+            <div>
+              <Label className="text-xs text-gray-600">첫 번째 필드</Label>
+              <Select
+                value={transform.sourceField || ""}
+                onValueChange={(value) => handleTransformationChange(index, "sourceField", value)}
+              >
+                <SelectTrigger className="mt-1 h-8 text-xs">
+                  <SelectValue placeholder="첫 번째 필드 선택" />
+                </SelectTrigger>
+                <SelectContent>
+                  {sourceFields.map((field) => (
+                    <SelectItem key={field.name} value={field.name} className="text-xs">
+                      {field.label || field.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label className="text-xs text-gray-600">구분자</Label>
+              <Input
+                value={transform.separator || " "}
+                onChange={(e) => handleTransformationChange(index, "separator", e.target.value)}
+                placeholder="예: 공백 또는 , 또는 -"
+                className="mt-1 h-8 text-xs"
+              />
+            </div>
+            {commonFields}
+          </>
+        );
+
+      case "SPLIT":
+        return (
+          <>
+            {commonFields}
+            <div>
+              <Label className="text-xs text-gray-600">구분자</Label>
+              <Input
+                value={transform.delimiter || ","}
+                onChange={(e) => handleTransformationChange(index, "delimiter", e.target.value)}
+                placeholder="예: , 또는 ; 또는 |"
+                className="mt-1 h-8 text-xs"
+              />
+            </div>
+            <div>
+              <Label className="text-xs text-gray-600">인덱스 (0부터 시작)</Label>
+              <Input
+                type="number"
+                value={transform.splitIndex !== undefined ? transform.splitIndex : 0}
+                onChange={(e) => handleTransformationChange(index, "splitIndex", parseInt(e.target.value))}
+                placeholder="0"
+                className="mt-1 h-8 text-xs"
+              />
+              <p className="mt-1 text-xs text-gray-400">분리된 값 중 몇 번째를 가져올지 지정 (0=첫번째)</p>
+            </div>
+          </>
+        );
+
+      case "REPLACE":
+        return (
+          <>
+            {commonFields}
+            <div>
+              <Label className="text-xs text-gray-600">찾을 문자열</Label>
+              <Input
+                value={transform.searchValue || ""}
+                onChange={(e) => handleTransformationChange(index, "searchValue", e.target.value)}
+                placeholder="예: old"
+                className="mt-1 h-8 text-xs"
+              />
+            </div>
+            <div>
+              <Label className="text-xs text-gray-600">바꿀 문자열</Label>
+              <Input
+                value={transform.replaceValue || ""}
+                onChange={(e) => handleTransformationChange(index, "replaceValue", e.target.value)}
+                placeholder="예: new"
+                className="mt-1 h-8 text-xs"
+              />
+            </div>
+          </>
+        );
+
+      case "CAST":
+        return (
+          <>
+            {commonFields}
+            <div>
+              <Label className="text-xs text-gray-600">변환할 타입</Label>
+              <Select
+                value={transform.castType || "string"}
+                onValueChange={(value) => handleTransformationChange(index, "castType", value)}
+              >
+                <SelectTrigger className="mt-1 h-8 text-xs">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="string" className="text-xs">
+                    문자열 (String)
+                  </SelectItem>
+                  <SelectItem value="number" className="text-xs">
+                    숫자 (Number)
+                  </SelectItem>
+                  <SelectItem value="boolean" className="text-xs">
+                    불린 (Boolean)
+                  </SelectItem>
+                  <SelectItem value="date" className="text-xs">
+                    날짜 (Date)
+                  </SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </>
+        );
+
+      case "CALCULATE":
+      case "FORMAT":
+      case "JSON_EXTRACT":
+      case "CUSTOM":
+        return (
+          <>
+            {commonFields}
+            <div>
+              <Label className="text-xs text-gray-600">표현식</Label>
+              <Input
+                value={transform.expression || ""}
+                onChange={(e) => handleTransformationChange(index, "expression", e.target.value)}
+                placeholder="예: field1 + field2"
+                className="mt-1 h-8 text-xs"
+              />
+              <p className="mt-1 text-xs text-gray-400">
+                {transform.type === "CALCULATE" && "계산 수식을 입력하세요 (예: field1 + field2)"}
+                {transform.type === "FORMAT" && "형식 문자열을 입력하세요 (예: {0}-{1})"}
+                {transform.type === "JSON_EXTRACT" && "JSON 경로를 입력하세요 (예: $.data.name)"}
+                {transform.type === "CUSTOM" && "JavaScript 표현식을 입력하세요"}
+              </p>
+            </div>
+          </>
+        );
+
+      default:
+        // UPPERCASE, LOWERCASE, TRIM 등
+        return commonFields;
+    }
+  };
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 헤더 */}
+        <div className="flex items-center gap-2 rounded-md bg-indigo-50 p-2">
+          <Wand2 className="h-4 w-4 text-indigo-600" />
+          <span className="font-semibold text-indigo-600">데이터 변환</span>
+        </div>
+
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+          <div>
+            <Label htmlFor="displayName" className="text-xs">
+              표시 이름
+            </Label>
+            <Input
+              id="displayName"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              className="mt-1"
+              placeholder="노드 표시 이름"
+            />
+          </div>
+        </div>
+
+        {/* 변환 규칙 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-semibold">변환 규칙</h3>
+              <p className="text-xs text-gray-500">데이터를 변환할 규칙을 추가하세요</p>
+            </div>
+            <Button size="sm" variant="outline" onClick={handleAddTransformation} className="h-7 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              규칙 추가
+            </Button>
+          </div>
+
+          {transformations.length === 0 ? (
+            <div className="rounded border border-dashed bg-gray-50 p-4 text-center text-xs text-gray-500">
+              변환 규칙을 추가하세요
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {transformations.map((transform, index) => (
+                <div key={index} className="rounded border bg-indigo-50 p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <span className="text-xs font-medium text-indigo-700">변환 #{index + 1}</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveTransformation(index)}
+                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 변환 타입 선택 */}
+                    <div>
+                      <Label className="text-xs text-gray-600">변환 타입</Label>
+                      <Select
+                        value={transform.type}
+                        onValueChange={(value) => handleTransformationChange(index, "type", value)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">기본 변환</div>
+                          {TRANSFORM_TYPES.filter((t) => t.category === "기본").map((type) => (
+                            <SelectItem key={type.value} value={type.value} className="text-xs">
+                              {type.label}
+                            </SelectItem>
+                          ))}
+                          <div className="px-2 py-1 text-xs font-semibold text-gray-500">고급 변환</div>
+                          {TRANSFORM_TYPES.filter((t) => t.category === "고급").map((type) => (
+                            <SelectItem key={type.value} value={type.value} className="text-xs">
+                              {type.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 타입별 필드 렌더링 */}
+                    {renderTransformationFields(transform, index)}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 적용 버튼 */}
+        <div className="sticky bottom-0 border-t bg-white pt-3">
+          <Button onClick={handleSave} className="w-full" size="sm">
+            적용
+          </Button>
+          <p className="mt-2 text-center text-xs text-gray-500">✅ 변경 사항이 즉시 노드에 반영됩니다.</p>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
new file mode 100644
index 00000000..a9f8066f
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/DeleteActionProperties.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+/**
+ * DELETE 액션 노드 속성 편집
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, AlertTriangle } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import type { DeleteActionNodeData } from "@/types/node-editor";
+
+interface DeleteActionPropertiesProps {
+  nodeId: string;
+  data: DeleteActionNodeData;
+}
+
+const OPERATORS = [
+  { value: "EQUALS", label: "=" },
+  { value: "NOT_EQUALS", label: "≠" },
+  { value: "GREATER_THAN", label: ">" },
+  { value: "LESS_THAN", label: "<" },
+  { value: "IN", label: "IN" },
+  { value: "NOT_IN", label: "NOT IN" },
+] as const;
+
+export function DeleteActionProperties({ nodeId, data }: DeleteActionPropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || `${data.targetTable} 삭제`);
+  const [targetTable, setTargetTable] = useState(data.targetTable);
+  const [whereConditions, setWhereConditions] = useState(data.whereConditions || []);
+
+  useEffect(() => {
+    setDisplayName(data.displayName || `${data.targetTable} 삭제`);
+    setTargetTable(data.targetTable);
+    setWhereConditions(data.whereConditions || []);
+  }, [data]);
+
+  const handleAddCondition = () => {
+    setWhereConditions([
+      ...whereConditions,
+      {
+        field: "",
+        operator: "EQUALS",
+        value: "",
+      },
+    ]);
+  };
+
+  const handleRemoveCondition = (index: number) => {
+    setWhereConditions(whereConditions.filter((_, i) => i !== index));
+  };
+
+  const handleConditionChange = (index: number, field: string, value: any) => {
+    const newConditions = [...whereConditions];
+    newConditions[index] = { ...newConditions[index], [field]: value };
+    setWhereConditions(newConditions);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      whereConditions,
+    });
+  };
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 경고 */}
+        <div className="rounded-lg border-2 border-red-200 bg-red-50 p-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="h-5 w-5 flex-shrink-0 text-red-600" />
+            <div className="text-sm">
+              <p className="font-semibold text-red-800">위험한 작업입니다!</p>
+              <p className="mt-1 text-xs text-red-700">
+                DELETE 작업은 되돌릴 수 없습니다. WHERE 조건을 반드시 설정하세요.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="targetTable" className="text-xs">
+                타겟 테이블
+              </Label>
+              <Input
+                id="targetTable"
+                value={targetTable}
+                onChange={(e) => setTargetTable(e.target.value)}
+                className="mt-1"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* WHERE 조건 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">WHERE 조건 (필수)</h3>
+            <Button size="sm" variant="outline" onClick={handleAddCondition} className="h-7">
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+
+          {whereConditions.length > 0 ? (
+            <div className="space-y-2">
+              {whereConditions.map((condition, index) => (
+                <div key={index} className="rounded border-2 border-red-200 bg-red-50 p-2">
+                  <div className="mb-2 flex items-center justify-between">
+                    <span className="text-xs font-medium text-red-700">조건 #{index + 1}</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveCondition(index)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div>
+                      <Label className="text-xs text-gray-600">필드</Label>
+                      <Input
+                        value={condition.field}
+                        onChange={(e) => handleConditionChange(index, "field", e.target.value)}
+                        placeholder="조건 필드명"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+
+                    <div>
+                      <Label className="text-xs text-gray-600">연산자</Label>
+                      <Select
+                        value={condition.operator}
+                        onValueChange={(value) => handleConditionChange(index, "operator", value)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {OPERATORS.map((op) => (
+                            <SelectItem key={op.value} value={op.value}>
+                              {op.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label className="text-xs text-gray-600">값</Label>
+                      <Input
+                        value={condition.value as string}
+                        onChange={(e) => handleConditionChange(index, "value", e.target.value)}
+                        placeholder="비교 값"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded border-2 border-dashed border-red-300 bg-red-50 p-4 text-center text-xs text-red-600">
+              ⚠️ WHERE 조건이 없습니다! 모든 데이터가 삭제됩니다!
+            </div>
+          )}
+        </div>
+
+        <Button onClick={handleSave} variant="destructive" className="w-full" size="sm">
+          적용
+        </Button>
+
+        <div className="space-y-2">
+          <div className="rounded bg-red-50 p-3 text-xs text-red-700">
+            🚨 WHERE 조건 없이 삭제하면 테이블의 모든 데이터가 영구 삭제됩니다!
+          </div>
+          <div className="rounded bg-red-50 p-3 text-xs text-red-700">💡 실행 전 WHERE 조건을 꼭 확인하세요.</div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
new file mode 100644
index 00000000..ee8cb408
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/ExternalDBSourceProperties.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+/**
+ * 외부 DB 소스 노드 속성 편집
+ */
+
+import { useEffect, useState } from "react";
+import { Database } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import type { ExternalDBSourceNodeData } from "@/types/node-editor";
+
+interface ExternalDBSourcePropertiesProps {
+  nodeId: string;
+  data: ExternalDBSourceNodeData;
+}
+
+const DB_TYPE_INFO: Record<string, { label: string; color: string; icon: string }> = {
+  postgresql: { label: "PostgreSQL", color: "#336791", icon: "🐘" },
+  mysql: { label: "MySQL", color: "#4479A1", icon: "🐬" },
+  oracle: { label: "Oracle", color: "#F80000", icon: "🔴" },
+  mssql: { label: "MS SQL Server", color: "#CC2927", icon: "🏢" },
+  mariadb: { label: "MariaDB", color: "#003545", icon: "🌊" },
+};
+
+export function ExternalDBSourceProperties({ nodeId, data }: ExternalDBSourcePropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || data.connectionName);
+  const [connectionName, setConnectionName] = useState(data.connectionName);
+  const [tableName, setTableName] = useState(data.tableName);
+  const [schema, setSchema] = useState(data.schema || "");
+
+  const dbInfo =
+    data.dbType && DB_TYPE_INFO[data.dbType]
+      ? DB_TYPE_INFO[data.dbType]
+      : {
+          label: data.dbType ? data.dbType.toUpperCase() : "알 수 없음",
+          color: "#666",
+          icon: "💾",
+        };
+
+  useEffect(() => {
+    setDisplayName(data.displayName || data.connectionName);
+    setConnectionName(data.connectionName);
+    setTableName(data.tableName);
+    setSchema(data.schema || "");
+  }, [data]);
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      connectionName,
+      tableName,
+      schema,
+    });
+  };
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* DB 타입 정보 */}
+        <div
+          className="rounded-lg border-2 p-4"
+          style={{
+            borderColor: dbInfo.color,
+            backgroundColor: `${dbInfo.color}10`,
+          }}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className="flex h-12 w-12 items-center justify-center rounded-lg"
+              style={{ backgroundColor: dbInfo.color }}
+            >
+              <span className="text-2xl">{dbInfo.icon}</span>
+            </div>
+            <div>
+              <p className="text-sm font-semibold" style={{ color: dbInfo.color }}>
+                {dbInfo.label}
+              </p>
+              <p className="text-xs text-gray-600">외부 데이터베이스</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">연결 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="connectionName" className="text-xs">
+                연결명
+              </Label>
+              <Input
+                id="connectionName"
+                value={connectionName}
+                onChange={(e) => setConnectionName(e.target.value)}
+                className="mt-1"
+                placeholder="외부 DB 연결명"
+              />
+              <p className="mt-1 text-xs text-gray-500">외부 DB 연결 관리에서 설정한 연결명입니다.</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 테이블 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">테이블 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="tableName" className="text-xs">
+                테이블명
+              </Label>
+              <Input
+                id="tableName"
+                value={tableName}
+                onChange={(e) => setTableName(e.target.value)}
+                className="mt-1"
+                placeholder="데이터를 가져올 테이블"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="schema" className="text-xs">
+                스키마 (선택)
+              </Label>
+              <Input
+                id="schema"
+                value={schema}
+                onChange={(e) => setSchema(e.target.value)}
+                className="mt-1"
+                placeholder="스키마명"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 출력 필드 */}
+        {data.outputFields && data.outputFields.length > 0 && (
+          <div>
+            <h3 className="mb-3 text-sm font-semibold">출력 필드</h3>
+            <div className="space-y-1">
+              {data.outputFields.map((field, index) => (
+                <div
+                  key={index}
+                  className="flex items-center justify-between rounded border bg-gray-50 px-3 py-2 text-xs"
+                >
+                  <span className="font-medium">{field.label || field.name}</span>
+                  <span className="font-mono text-gray-500">{field.type}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <Button onClick={handleSave} className="w-full" size="sm">
+          적용
+        </Button>
+
+        <div className="rounded p-3 text-xs" style={{ backgroundColor: `${dbInfo.color}15`, color: dbInfo.color }}>
+          💡 외부 DB 연결은 "외부 DB 연결 관리" 메뉴에서 미리 설정해야 합니다.
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/FieldMappingProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/FieldMappingProperties.tsx
new file mode 100644
index 00000000..79bdffb8
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/FieldMappingProperties.tsx
@@ -0,0 +1,191 @@
+"use client";
+
+/**
+ * 필드 매핑 노드 속성 편집
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, ArrowRight } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import type { FieldMappingNodeData } from "@/types/node-editor";
+
+interface FieldMappingPropertiesProps {
+  nodeId: string;
+  data: FieldMappingNodeData;
+}
+
+export function FieldMappingProperties({ nodeId, data }: FieldMappingPropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || "데이터 매핑");
+  const [mappings, setMappings] = useState(data.mappings || []);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || "데이터 매핑");
+    setMappings(data.mappings || []);
+  }, [data]);
+
+  const handleAddMapping = () => {
+    setMappings([
+      ...mappings,
+      {
+        id: `mapping_${Date.now()}`,
+        sourceField: "",
+        targetField: "",
+        transform: undefined,
+        staticValue: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveMapping = (id: string) => {
+    setMappings(mappings.filter((m) => m.id !== id));
+  };
+
+  const handleMappingChange = (id: string, field: string, value: any) => {
+    const newMappings = mappings.map((m) => (m.id === id ? { ...m, [field]: value } : m));
+    setMappings(newMappings);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      mappings,
+    });
+  };
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div>
+            <Label htmlFor="displayName" className="text-xs">
+              표시 이름
+            </Label>
+            <Input
+              id="displayName"
+              value={displayName}
+              onChange={(e) => setDisplayName(e.target.value)}
+              className="mt-1"
+              placeholder="노드 표시 이름"
+            />
+          </div>
+        </div>
+
+        {/* 매핑 규칙 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">매핑 규칙</h3>
+            <Button size="sm" variant="outline" onClick={handleAddMapping} className="h-7">
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+
+          {mappings.length > 0 ? (
+            <div className="space-y-2">
+              {mappings.map((mapping, index) => (
+                <div key={mapping.id} className="rounded border bg-purple-50 p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <span className="text-xs font-medium text-purple-700">규칙 #{index + 1}</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveMapping(mapping.id)}
+                      className="h-6 w-6 p-0"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 소스 → 타겟 */}
+                    <div className="flex items-center gap-2">
+                      <div className="flex-1">
+                        <Label className="text-xs text-gray-600">소스 필드</Label>
+                        <Input
+                          value={mapping.sourceField || ""}
+                          onChange={(e) => handleMappingChange(mapping.id, "sourceField", e.target.value)}
+                          placeholder="입력 필드"
+                          className="mt-1 h-8 text-xs"
+                        />
+                      </div>
+
+                      <div className="pt-5">
+                        <ArrowRight className="h-4 w-4 text-purple-500" />
+                      </div>
+
+                      <div className="flex-1">
+                        <Label className="text-xs text-gray-600">타겟 필드</Label>
+                        <Input
+                          value={mapping.targetField}
+                          onChange={(e) => handleMappingChange(mapping.id, "targetField", e.target.value)}
+                          placeholder="출력 필드"
+                          className="mt-1 h-8 text-xs"
+                        />
+                      </div>
+                    </div>
+
+                    {/* 변환 함수 */}
+                    <div>
+                      <Label className="text-xs text-gray-600">변환 함수 (선택)</Label>
+                      <Input
+                        value={mapping.transform || ""}
+                        onChange={(e) => handleMappingChange(mapping.id, "transform", e.target.value)}
+                        placeholder="예: UPPER(), TRIM(), CONCAT()"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+
+                    {/* 정적 값 */}
+                    <div>
+                      <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                      <Input
+                        value={mapping.staticValue || ""}
+                        onChange={(e) => handleMappingChange(mapping.id, "staticValue", e.target.value)}
+                        placeholder="고정 값 (소스 필드 대신 사용)"
+                        className="mt-1 h-8 text-xs"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+              매핑 규칙이 없습니다. "추가" 버튼을 클릭하세요.
+            </div>
+          )}
+        </div>
+
+        {/* 저장 버튼 */}
+        <div className="flex gap-2">
+          <Button onClick={handleSave} className="flex-1" size="sm">
+            적용
+          </Button>
+        </div>
+
+        {/* 안내 */}
+        <div className="space-y-2">
+          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
+            💡 <strong>소스 필드</strong>: 입력 데이터의 필드명
+          </div>
+          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
+            💡 <strong>타겟 필드</strong>: 출력 데이터의 필드명
+          </div>
+          <div className="rounded bg-purple-50 p-3 text-xs text-purple-700">
+            💡 <strong>변환 함수</strong>: 데이터 변환 로직 (SQL 함수 형식)
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
new file mode 100644
index 00000000..b28aa3f8
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/InsertActionProperties.tsx
@@ -0,0 +1,613 @@
+"use client";
+
+/**
+ * INSERT 액션 노드 속성 편집 (개선 버전)
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { InsertActionNodeData } from "@/types/node-editor";
+
+interface InsertActionPropertiesProps {
+  nodeId: string;
+  data: InsertActionNodeData;
+}
+
+interface TableOption {
+  tableName: string;
+  displayName: string;
+  description: string;
+  label: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  columnLabel?: string;
+  dataType: string;
+  isNullable: boolean;
+}
+
+export function InsertActionProperties({ nodeId, data }: InsertActionPropertiesProps) {
+  const { updateNode, nodes, edges } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || data.targetTable);
+  const [targetTable, setTargetTable] = useState(data.targetTable);
+  const [fieldMappings, setFieldMappings] = useState(data.fieldMappings || []);
+  const [batchSize, setBatchSize] = useState(data.options?.batchSize?.toString() || "");
+  const [ignoreErrors, setIgnoreErrors] = useState(data.options?.ignoreErrors || false);
+  const [ignoreDuplicates, setIgnoreDuplicates] = useState(data.options?.ignoreDuplicates || false);
+
+  // 테이블 관련 상태
+  const [tables, setTables] = useState<TableOption[]>([]);
+  const [tablesLoading, setTablesLoading] = useState(false);
+  const [tablesOpen, setTablesOpen] = useState(false);
+
+  // 컬럼 관련 상태
+  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 소스 필드 목록 (연결된 입력 노드에서 가져오기)
+  const [sourceFields, setSourceFields] = useState<Array<{ name: string; label?: string }>>([]);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || data.targetTable);
+    setTargetTable(data.targetTable);
+    setFieldMappings(data.fieldMappings || []);
+    setBatchSize(data.options?.batchSize?.toString() || "");
+    setIgnoreErrors(data.options?.ignoreErrors || false);
+    setIgnoreDuplicates(data.options?.ignoreDuplicates || false);
+  }, [data]);
+
+  // 테이블 목록 로딩
+  useEffect(() => {
+    loadTables();
+  }, []);
+
+  // 타겟 테이블 변경 시 컬럼 로딩
+  useEffect(() => {
+    if (targetTable) {
+      loadColumns(targetTable);
+    }
+  }, [targetTable]);
+
+  // 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
+  useEffect(() => {
+    const getAllSourceFields = (
+      targetNodeId: string,
+      visitedNodes = new Set<string>(),
+    ): Array<{ name: string; label?: string }> => {
+      if (visitedNodes.has(targetNodeId)) {
+        return [];
+      }
+      visitedNodes.add(targetNodeId);
+
+      const inputEdges = edges.filter((edge) => edge.target === targetNodeId);
+      const sourceNodeIds = inputEdges.map((edge) => edge.source);
+      const sourceNodes = nodes.filter((node) => sourceNodeIds.includes(node.id));
+
+      const fields: Array<{ name: string; label?: string }> = [];
+
+      sourceNodes.forEach((node) => {
+        console.log(`🔍 노드 ${node.id} 타입: ${node.type}`);
+        console.log(`🔍 노드 ${node.id} 데이터:`, node.data);
+
+        // 데이터 변환 노드인 경우: 변환된 필드 + 상위 노드의 원본 필드
+        if (node.type === "dataTransform") {
+          console.log(`✅ 데이터 변환 노드 발견`);
+
+          // 상위 노드의 원본 필드 먼저 수집
+          const upperFields = getAllSourceFields(node.id, visitedNodes);
+          console.log(`   📤 상위 노드에서 ${upperFields.length}개 필드 가져옴`);
+
+          // 변환된 필드 추가 (in-place 변환 고려)
+          if (node.data.transformations && Array.isArray(node.data.transformations)) {
+            console.log(`   📊 ${node.data.transformations.length}개 변환 발견`);
+            const inPlaceFields = new Set<string>(); // in-place 변환된 필드 추적
+
+            node.data.transformations.forEach((transform: any) => {
+              const targetField = transform.targetField || transform.sourceField;
+              const isInPlace = !transform.targetField || transform.targetField === transform.sourceField;
+
+              console.log(`   🔹 변환: ${transform.sourceField} → ${targetField} ${isInPlace ? "(in-place)" : ""}`);
+
+              if (isInPlace) {
+                // in-place: 원본 필드를 덮어쓰므로, 원본 필드는 이미 upperFields에 있음
+                inPlaceFields.add(transform.sourceField);
+              } else if (targetField) {
+                // 새 필드 생성
+                fields.push({
+                  name: targetField,
+                  label: transform.targetFieldLabel || targetField,
+                });
+              }
+            });
+
+            // 상위 필드 중 in-place 변환되지 않은 것만 추가
+            upperFields.forEach((field) => {
+              if (!inPlaceFields.has(field.name)) {
+                fields.push(field);
+              } else {
+                // in-place 변환된 필드도 추가 (변환 후 값)
+                fields.push(field);
+              }
+            });
+          } else {
+            // 변환이 없으면 상위 필드만 추가
+            fields.push(...upperFields);
+          }
+        }
+        // 일반 소스 노드인 경우
+        else {
+          const nodeFields = node.data.fields || node.data.outputFields;
+
+          if (nodeFields && Array.isArray(nodeFields)) {
+            console.log(`✅ 노드 ${node.id}에서 ${nodeFields.length}개 필드 발견`);
+            nodeFields.forEach((field: any) => {
+              const fieldName = field.name || field.fieldName || field.column_name;
+              const fieldLabel = field.label || field.displayName || field.label_ko;
+              if (fieldName) {
+                fields.push({
+                  name: fieldName,
+                  label: fieldLabel,
+                });
+              }
+            });
+          } else {
+            console.log(`❌ 노드 ${node.id}에 fields 없음`);
+          }
+        }
+      });
+
+      return fields;
+    };
+
+    console.log("🔍 INSERT 노드 ID:", nodeId);
+    const allFields = getAllSourceFields(nodeId);
+
+    // 중복 제거
+    const uniqueFields = Array.from(new Map(allFields.map((field) => [field.name, field])).values());
+
+    setSourceFields(uniqueFields);
+    console.log("✅ 최종 소스 필드 목록:", uniqueFields);
+  }, [nodeId, nodes, edges]);
+
+  /**
+   * 테이블 목록 로드
+   */
+  const loadTables = async () => {
+    try {
+      setTablesLoading(true);
+      const tableList = await tableTypeApi.getTables();
+
+      const options: TableOption[] = tableList.map((table) => {
+        const label = (table as any).tableLabel || table.displayName || table.tableName || "알 수 없는 테이블";
+
+        return {
+          tableName: table.tableName,
+          displayName: table.displayName || table.tableName,
+          description: table.description || "",
+          label,
+        };
+      });
+
+      setTables(options);
+      console.log(`✅ 테이블 ${options.length}개 로딩 완료`);
+    } catch (error) {
+      console.error("❌ 테이블 목록 로딩 실패:", error);
+      setTables([]);
+    } finally {
+      setTablesLoading(false);
+    }
+  };
+
+  /**
+   * 타겟 테이블의 컬럼 목록 로드
+   */
+  const loadColumns = async (tableName: string) => {
+    try {
+      setColumnsLoading(true);
+      console.log(`🔍 컬럼 조회 중: ${tableName}`);
+
+      const columns = await tableTypeApi.getColumns(tableName);
+
+      const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
+        columnName: col.column_name || col.columnName,
+        columnLabel: col.label_ko || col.columnLabel,
+        dataType: col.data_type || col.dataType || "unknown",
+        isNullable: col.is_nullable === "YES" || col.isNullable === true,
+      }));
+
+      setTargetColumns(columnInfo);
+      console.log(`✅ 컬럼 ${columnInfo.length}개 로딩 완료`);
+    } catch (error) {
+      console.error("❌ 컬럼 목록 로딩 실패:", error);
+      setTargetColumns([]);
+    } finally {
+      setColumnsLoading(false);
+    }
+  };
+
+  /**
+   * 테이블 선택 핸들러
+   */
+  const handleTableSelect = (selectedTableName: string) => {
+    const selectedTable = tables.find((t) => t.tableName === selectedTableName);
+    if (selectedTable) {
+      setTargetTable(selectedTable.tableName);
+      if (!displayName || displayName === targetTable) {
+        setDisplayName(selectedTable.label);
+      }
+
+      // 즉시 노드 업데이트
+      updateNode(nodeId, {
+        displayName: selectedTable.label,
+        targetTable: selectedTable.tableName,
+        fieldMappings,
+        options: {
+          batchSize: batchSize ? parseInt(batchSize) : undefined,
+          ignoreErrors,
+          ignoreDuplicates,
+        },
+      });
+
+      setTablesOpen(false);
+    }
+  };
+
+  const handleAddMapping = () => {
+    setFieldMappings([
+      ...fieldMappings,
+      {
+        sourceField: null,
+        targetField: "",
+        staticValue: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveMapping = (index: number) => {
+    const newMappings = fieldMappings.filter((_, i) => i !== index);
+    setFieldMappings(newMappings);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      fieldMappings: newMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+        ignoreDuplicates,
+      },
+    });
+  };
+
+  const handleMappingChange = (index: number, field: string, value: any) => {
+    const newMappings = [...fieldMappings];
+
+    // 필드 변경 시 라벨도 함께 저장
+    if (field === "sourceField") {
+      const sourceField = sourceFields.find((f) => f.name === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        sourceField: value,
+        sourceFieldLabel: sourceField?.label,
+      };
+    } else if (field === "targetField") {
+      const targetColumn = targetColumns.find((c) => c.columnName === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        targetField: value,
+        targetFieldLabel: targetColumn?.columnLabel,
+      };
+    } else {
+      newMappings[index] = { ...newMappings[index], [field]: value };
+    }
+
+    setFieldMappings(newMappings);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      fieldMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+        ignoreDuplicates,
+      },
+    });
+  };
+
+  const selectedTableLabel = tables.find((t) => t.tableName === targetTable)?.label || targetTable;
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            {/* 타겟 테이블 Combobox */}
+            <div>
+              <Label className="text-xs">타겟 테이블</Label>
+              <Popover open={tablesOpen} onOpenChange={setTablesOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={tablesOpen}
+                    className="mt-1 w-full justify-between"
+                    disabled={tablesLoading}
+                  >
+                    {tablesLoading ? (
+                      <span className="text-muted-foreground">로딩 중...</span>
+                    ) : targetTable ? (
+                      <span className="truncate">{selectedTableLabel}</span>
+                    ) : (
+                      <span className="text-muted-foreground">테이블을 선택하세요</span>
+                    )}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[320px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." className="h-9" />
+                    <CommandList>
+                      <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        <ScrollArea className="h-[300px]">
+                          {tables.map((table) => (
+                            <CommandItem
+                              key={table.tableName}
+                              value={`${table.label} ${table.tableName} ${table.description}`}
+                              onSelect={() => handleTableSelect(table.tableName)}
+                              className="cursor-pointer"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  targetTable === table.tableName ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span className="font-medium">{table.label}</span>
+                                {table.label !== table.tableName && (
+                                  <span className="text-muted-foreground text-xs">{table.tableName}</span>
+                                )}
+                                {table.description && (
+                                  <span className="text-muted-foreground text-xs">{table.description}</span>
+                                )}
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </ScrollArea>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              {targetTable && selectedTableLabel !== targetTable && (
+                <p className="text-muted-foreground mt-1 text-xs">
+                  실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{targetTable}</code>
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 필드 매핑 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">필드 매핑</h3>
+            <Button size="sm" variant="outline" onClick={handleAddMapping} className="h-7">
+              <Plus className="mr-1 h-3 w-3" />
+              추가
+            </Button>
+          </div>
+
+          {columnsLoading && (
+            <div className="rounded border p-3 text-center text-xs text-gray-500">컬럼 목록을 불러오는 중...</div>
+          )}
+
+          {!targetTable && !columnsLoading && (
+            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              ⚠️ 먼저 타겟 테이블을 선택하세요
+            </div>
+          )}
+
+          {targetTable && !columnsLoading && targetColumns.length === 0 && (
+            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+              ❌ 컬럼 정보를 불러올 수 없습니다
+            </div>
+          )}
+
+          {targetTable && targetColumns.length > 0 && (
+            <>
+              {fieldMappings.length > 0 ? (
+                <div className="space-y-3">
+                  {fieldMappings.map((mapping, index) => (
+                    <div key={index} className="rounded border bg-gray-50 p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleRemoveMapping(index)}
+                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      <div className="space-y-2">
+                        {/* 소스 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">소스 필드</Label>
+                          <Select
+                            value={mapping.sourceField || ""}
+                            onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="소스 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {sourceFields.length === 0 ? (
+                                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                              ) : (
+                                sourceFields.map((field) => (
+                                  <SelectItem key={field.name} value={field.name} className="text-xs">
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-medium">{field.label || field.name}</span>
+                                      {field.label && field.label !== field.name && (
+                                        <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                                      )}
+                                    </div>
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <div className="flex items-center justify-center py-1">
+                          <ArrowRight className="h-4 w-4 text-green-600" />
+                        </div>
+
+                        {/* 타겟 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Select
+                            value={mapping.targetField}
+                            onValueChange={(value) => handleMappingChange(index, "targetField", value)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="타겟 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {targetColumns.map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="font-mono">{col.columnLabel || col.columnName}</span>
+                                    <span className="text-muted-foreground">
+                                      {col.dataType}
+                                      {!col.isNullable && <span className="text-red-500">*</span>}
+                                    </span>
+                                  </div>
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 정적 값 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Input
+                            value={mapping.staticValue || ""}
+                            onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
+                            placeholder="소스 필드 대신 고정 값 사용"
+                            className="mt-1 h-8 text-xs"
+                          />
+                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded border border-dashed p-4 text-center text-xs text-gray-400">
+                  필드 매핑이 없습니다. "추가" 버튼을 클릭하세요.
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* 옵션 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">옵션</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="batchSize" className="text-xs">
+                배치 크기
+              </Label>
+              <Input
+                id="batchSize"
+                type="number"
+                value={batchSize}
+                onChange={(e) => setBatchSize(e.target.value)}
+                className="mt-1"
+                placeholder="한 번에 처리할 레코드 수"
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="ignoreDuplicates"
+                checked={ignoreDuplicates}
+                onCheckedChange={(checked) => setIgnoreDuplicates(checked as boolean)}
+              />
+              <Label htmlFor="ignoreDuplicates" className="text-xs font-normal">
+                중복 데이터 무시
+              </Label>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="ignoreErrors"
+                checked={ignoreErrors}
+                onCheckedChange={(checked) => setIgnoreErrors(checked as boolean)}
+              />
+              <Label htmlFor="ignoreErrors" className="text-xs font-normal">
+                오류 발생 시 계속 진행
+              </Label>
+            </div>
+          </div>
+        </div>
+
+        {/* 저장 버튼 */}
+        <div className="flex gap-2">
+          <Button onClick={handleSave} className="flex-1" size="sm">
+            적용
+          </Button>
+        </div>
+
+        {/* 안내 */}
+        <div className="rounded bg-green-50 p-3 text-xs text-green-700">
+          ✅ 테이블과 필드는 실제 데이터베이스에서 조회됩니다.
+          <br />
+          💡 소스 필드가 없으면 정적 값이 사용됩니다.
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
new file mode 100644
index 00000000..08c0d9bd
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/LogProperties.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { LogNodeData } from "@/types/node-editor";
+import { FileText, Info, AlertTriangle, AlertCircle } from "lucide-react";
+
+interface LogPropertiesProps {
+  nodeId: string;
+  data: LogNodeData;
+}
+
+const LOG_LEVELS = [
+  { value: "debug", label: "Debug", icon: Info, color: "text-blue-600" },
+  { value: "info", label: "Info", icon: Info, color: "text-green-600" },
+  { value: "warn", label: "Warning", icon: AlertTriangle, color: "text-yellow-600" },
+  { value: "error", label: "Error", icon: AlertCircle, color: "text-red-600" },
+];
+
+export function LogProperties({ nodeId, data }: LogPropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [level, setLevel] = useState(data.level || "info");
+  const [message, setMessage] = useState(data.message || "");
+  const [includeData, setIncludeData] = useState(data.includeData ?? false);
+
+  useEffect(() => {
+    setLevel(data.level || "info");
+    setMessage(data.message || "");
+    setIncludeData(data.includeData ?? false);
+  }, [data]);
+
+  const handleApply = () => {
+    updateNode(nodeId, {
+      level: level as any,
+      message,
+      includeData,
+    });
+  };
+
+  const selectedLevel = LOG_LEVELS.find((l) => l.value === level);
+  const LevelIcon = selectedLevel?.icon || Info;
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2 rounded-md bg-gray-50 p-2">
+        <FileText className="h-4 w-4 text-gray-600" />
+        <span className="font-semibold text-gray-600">로그</span>
+      </div>
+
+      <div>
+        <Label className="text-xs">로그 레벨</Label>
+        <Select value={level} onValueChange={setLevel}>
+          <SelectTrigger className="mt-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {LOG_LEVELS.map((lvl) => {
+              const Icon = lvl.icon;
+              return (
+                <SelectItem key={lvl.value} value={lvl.value}>
+                  <div className="flex items-center gap-2">
+                    <Icon className={`h-4 w-4 ${lvl.color}`} />
+                    <span>{lvl.label}</span>
+                  </div>
+                </SelectItem>
+              );
+            })}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <Label htmlFor="message" className="text-xs">
+          로그 메시지
+        </Label>
+        <Input
+          id="message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="로그 메시지를 입력하세요"
+          className="mt-1 text-sm"
+        />
+      </div>
+
+      <div className="flex items-center justify-between">
+        <div>
+          <Label className="text-xs">데이터 포함</Label>
+          <p className="text-xs text-gray-500">플로우 데이터를 로그에 포함합니다</p>
+        </div>
+        <Switch checked={includeData} onCheckedChange={setIncludeData} />
+      </div>
+
+      <div className={`rounded-md border p-3 ${selectedLevel?.color || "text-gray-600"}`}>
+        <div className="mb-1 flex items-center gap-2">
+          <LevelIcon className="h-4 w-4" />
+          <span className="text-xs font-semibold uppercase">{level}</span>
+        </div>
+        <div className="text-sm">{message || "메시지가 없습니다"}</div>
+        {includeData && <div className="mt-1 text-xs opacity-70">+ 플로우 데이터</div>}
+      </div>
+
+      <Button onClick={handleApply} className="w-full">
+        적용
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
new file mode 100644
index 00000000..b74dbcdf
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/RestAPISourceProperties.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { RestAPISourceNodeData } from "@/types/node-editor";
+import { Globe, Plus, Trash2 } from "lucide-react";
+
+interface RestAPISourcePropertiesProps {
+  nodeId: string;
+  data: RestAPISourceNodeData;
+}
+
+const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+const AUTH_TYPES = [
+  { value: "none", label: "인증 없음" },
+  { value: "bearer", label: "Bearer Token" },
+  { value: "basic", label: "Basic Auth" },
+  { value: "apikey", label: "API Key" },
+];
+
+export function RestAPISourceProperties({ nodeId, data }: RestAPISourcePropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || "");
+  const [url, setUrl] = useState(data.url || "");
+  const [method, setMethod] = useState(data.method || "GET");
+  const [headers, setHeaders] = useState(data.headers || {});
+  const [newHeaderKey, setNewHeaderKey] = useState("");
+  const [newHeaderValue, setNewHeaderValue] = useState("");
+  const [body, setBody] = useState(JSON.stringify(data.body || {}, null, 2));
+  const [authType, setAuthType] = useState(data.authentication?.type || "none");
+  const [authToken, setAuthToken] = useState(data.authentication?.token || "");
+  const [timeout, setTimeout] = useState(data.timeout?.toString() || "30000");
+  const [responseMapping, setResponseMapping] = useState(data.responseMapping || "");
+
+  useEffect(() => {
+    setDisplayName(data.displayName || "");
+    setUrl(data.url || "");
+    setMethod(data.method || "GET");
+    setHeaders(data.headers || {});
+    setBody(JSON.stringify(data.body || {}, null, 2));
+    setAuthType(data.authentication?.type || "none");
+    setAuthToken(data.authentication?.token || "");
+    setTimeout(data.timeout?.toString() || "30000");
+    setResponseMapping(data.responseMapping || "");
+  }, [data]);
+
+  const handleApply = () => {
+    let parsedBody = {};
+    try {
+      parsedBody = body.trim() ? JSON.parse(body) : {};
+    } catch (e) {
+      alert("Body JSON 형식이 올바르지 않습니다.");
+      return;
+    }
+
+    updateNode(nodeId, {
+      displayName,
+      url,
+      method: method as any,
+      headers,
+      body: parsedBody,
+      authentication: {
+        type: authType as any,
+        token: authToken || undefined,
+      },
+      timeout: parseInt(timeout) || 30000,
+      responseMapping,
+    });
+  };
+
+  const addHeader = () => {
+    if (newHeaderKey.trim() && newHeaderValue.trim()) {
+      setHeaders({ ...headers, [newHeaderKey.trim()]: newHeaderValue.trim() });
+      setNewHeaderKey("");
+      setNewHeaderValue("");
+    }
+  };
+
+  const removeHeader = (key: string) => {
+    const newHeaders = { ...headers };
+    delete newHeaders[key];
+    setHeaders(newHeaders);
+  };
+
+  return (
+    <div className="space-y-4 p-4">
+      <div className="flex items-center gap-2 rounded-md bg-teal-50 p-2">
+        <Globe className="h-4 w-4 text-teal-600" />
+        <span className="font-semibold text-teal-600">REST API 소스</span>
+      </div>
+
+      <div>
+        <Label htmlFor="displayName" className="text-xs">
+          표시 이름
+        </Label>
+        <Input
+          id="displayName"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="노드에 표시될 이름"
+          className="mt-1 text-sm"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="url" className="text-xs">
+          API URL
+        </Label>
+        <Input
+          id="url"
+          value={url}
+          onChange={(e) => setUrl(e.target.value)}
+          placeholder="https://api.example.com/data"
+          className="mt-1 text-sm"
+        />
+      </div>
+
+      <div>
+        <Label className="text-xs">HTTP 메서드</Label>
+        <Select value={method} onValueChange={setMethod}>
+          <SelectTrigger className="mt-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {HTTP_METHODS.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div>
+        <Label className="text-xs">헤더</Label>
+        <div className="mt-1 space-y-2">
+          <div className="flex gap-2">
+            <Input
+              value={newHeaderKey}
+              onChange={(e) => setNewHeaderKey(e.target.value)}
+              placeholder="Key"
+              className="text-sm"
+            />
+            <Input
+              value={newHeaderValue}
+              onChange={(e) => setNewHeaderValue(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addHeader()}
+              placeholder="Value"
+              className="text-sm"
+            />
+            <Button size="sm" onClick={addHeader}>
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+          <div className="max-h-[100px] space-y-1 overflow-y-auto">
+            {Object.entries(headers).map(([key, value]) => (
+              <div key={key} className="flex items-center justify-between rounded bg-teal-50 px-2 py-1">
+                <span className="text-xs">
+                  <span className="font-medium">{key}:</span> {value}
+                </span>
+                <Button variant="ghost" size="sm" onClick={() => removeHeader(key)}>
+                  <Trash2 className="h-3 w-3 text-red-500" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {(method === "POST" || method === "PUT" || method === "PATCH") && (
+        <div>
+          <Label htmlFor="body" className="text-xs">
+            Body (JSON)
+          </Label>
+          <Textarea
+            id="body"
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            placeholder='{"key": "value"}'
+            className="mt-1 font-mono text-sm"
+            rows={5}
+          />
+        </div>
+      )}
+
+      <div>
+        <Label className="text-xs">인증</Label>
+        <Select value={authType} onValueChange={setAuthType}>
+          <SelectTrigger className="mt-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {AUTH_TYPES.map((type) => (
+              <SelectItem key={type.value} value={type.value}>
+                {type.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {authType !== "none" && (
+          <Input
+            value={authToken}
+            onChange={(e) => setAuthToken(e.target.value)}
+            placeholder="토큰/키 입력"
+            className="mt-2 text-sm"
+            type="password"
+          />
+        )}
+      </div>
+
+      <div>
+        <Label htmlFor="timeout" className="text-xs">
+          타임아웃 (ms)
+        </Label>
+        <Input
+          id="timeout"
+          type="number"
+          value={timeout}
+          onChange={(e) => setTimeout(e.target.value)}
+          className="mt-1 text-sm"
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="responseMapping" className="text-xs">
+          응답 매핑 (JSON 경로)
+        </Label>
+        <Input
+          id="responseMapping"
+          value={responseMapping}
+          onChange={(e) => setResponseMapping(e.target.value)}
+          placeholder="예: data.items"
+          className="mt-1 text-sm"
+        />
+      </div>
+
+      <Button onClick={handleApply} className="w-full">
+        적용
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
new file mode 100644
index 00000000..b44e5128
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/TableSourceProperties.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+/**
+ * 테이블 소스 노드 속성 편집
+ */
+
+import { useEffect, useState } from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { TableSourceNodeData } from "@/types/node-editor";
+
+interface TableSourcePropertiesProps {
+  nodeId: string;
+  data: TableSourceNodeData;
+}
+
+interface TableOption {
+  tableName: string;
+  displayName: string;
+  description: string;
+  label: string; // 표시용 (라벨 또는 테이블명)
+}
+
+export function TableSourceProperties({ nodeId, data }: TableSourcePropertiesProps) {
+  const { updateNode } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || data.tableName);
+  const [tableName, setTableName] = useState(data.tableName);
+
+  // 테이블 선택 관련 상태
+  const [tables, setTables] = useState<TableOption[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || data.tableName);
+    setTableName(data.tableName);
+  }, [data.displayName, data.tableName]);
+
+  // 테이블 목록 로딩
+  useEffect(() => {
+    loadTables();
+  }, []);
+
+  /**
+   * 테이블 목록 로드
+   */
+  const loadTables = async () => {
+    try {
+      setLoading(true);
+      console.log("🔍 테이블 목록 로딩 중...");
+
+      const tableList = await tableTypeApi.getTables();
+
+      // 테이블 목록 변환 (라벨 또는 displayName 우선 표시)
+      const options: TableOption[] = tableList.map((table) => {
+        // tableLabel이 있으면 우선 사용, 없으면 displayName, 그것도 없으면 tableName
+        const label = (table as any).tableLabel || table.displayName || table.tableName || "알 수 없는 테이블";
+
+        return {
+          tableName: table.tableName,
+          displayName: table.displayName || table.tableName,
+          description: table.description || "",
+          label,
+        };
+      });
+
+      setTables(options);
+      console.log(`✅ 테이블 ${options.length}개 로딩 완료`);
+    } catch (error) {
+      console.error("❌ 테이블 목록 로딩 실패:", error);
+      setTables([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * 테이블 선택 핸들러 (즉시 노드 업데이트 + 컬럼 로드)
+   */
+  const handleTableSelect = async (selectedTableName: string) => {
+    const selectedTable = tables.find((t) => t.tableName === selectedTableName);
+    if (selectedTable) {
+      const newTableName = selectedTable.tableName;
+      const newDisplayName = selectedTable.label;
+
+      setTableName(newTableName);
+      setDisplayName(newDisplayName);
+      setOpen(false);
+
+      // 컬럼 정보 로드
+      console.log(`🔍 테이블 "${newTableName}" 컬럼 로드 중...`);
+      try {
+        const columns = await tableTypeApi.getColumns(newTableName);
+        console.log("🔍 API에서 받은 컬럼 데이터:", columns);
+
+        const fields = columns.map((col: any) => ({
+          name: col.column_name || col.columnName,
+          type: col.data_type || col.dataType || "unknown",
+          nullable: col.is_nullable === "YES" || col.isNullable === true,
+          // displayName이 라벨입니다!
+          label: col.displayName || col.label_ko || col.columnLabel || col.column_label,
+        }));
+
+        console.log(`✅ ${fields.length}개 컬럼 로드 완료:`, fields);
+
+        // 필드 정보와 함께 노드 업데이트
+        updateNode(nodeId, {
+          displayName: newDisplayName,
+          tableName: newTableName,
+          fields,
+        });
+      } catch (error) {
+        console.error("❌ 컬럼 로드 실패:", error);
+
+        // 실패해도 테이블 정보는 업데이트
+        updateNode(nodeId, {
+          displayName: newDisplayName,
+          tableName: newTableName,
+          fields: [],
+        });
+      }
+
+      console.log(`✅ 테이블 선택: ${newTableName} (${newDisplayName})`);
+    }
+  };
+
+  /**
+   * 표시 이름 변경 핸들러
+   */
+  const handleDisplayNameChange = (newDisplayName: string) => {
+    setDisplayName(newDisplayName);
+    updateNode(nodeId, {
+      displayName: newDisplayName,
+      tableName,
+    });
+  };
+
+  // 현재 선택된 테이블의 라벨 찾기
+  const selectedTableLabel = tables.find((t) => t.tableName === tableName)?.label || tableName;
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => handleDisplayNameChange(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            {/* 테이블 선택 Combobox */}
+            <div>
+              <Label className="text-xs">테이블 선택</Label>
+              <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    className="mt-1 w-full justify-between"
+                    disabled={loading}
+                  >
+                    {loading ? (
+                      <span className="text-muted-foreground">로딩 중...</span>
+                    ) : tableName ? (
+                      <span className="truncate">{selectedTableLabel}</span>
+                    ) : (
+                      <span className="text-muted-foreground">테이블을 선택하세요</span>
+                    )}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[320px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." className="h-9" />
+                    <CommandList>
+                      <CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        <ScrollArea className="h-[300px]">
+                          {tables.map((table) => (
+                            <CommandItem
+                              key={table.tableName}
+                              value={`${table.label} ${table.tableName} ${table.description}`}
+                              onSelect={() => handleTableSelect(table.tableName)}
+                              className="cursor-pointer"
+                            >
+                              <Check
+                                className={cn(
+                                  "mr-2 h-4 w-4",
+                                  tableName === table.tableName ? "opacity-100" : "opacity-0",
+                                )}
+                              />
+                              <div className="flex flex-col">
+                                <span className="font-medium">{table.label}</span>
+                                {table.label !== table.tableName && (
+                                  <span className="text-muted-foreground text-xs">{table.tableName}</span>
+                                )}
+                                {table.description && (
+                                  <span className="text-muted-foreground text-xs">{table.description}</span>
+                                )}
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </ScrollArea>
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              {tableName && selectedTableLabel !== tableName && (
+                <p className="text-muted-foreground mt-1 text-xs">
+                  실제 테이블명: <code className="rounded bg-gray-100 px-1 py-0.5">{tableName}</code>
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* 필드 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">출력 필드</h3>
+          {data.fields && data.fields.length > 0 ? (
+            <div className="space-y-1 rounded border p-2">
+              {data.fields.map((field) => (
+                <div key={field.name} className="flex items-center justify-between text-xs">
+                  <span className="font-mono text-gray-700">{field.name}</span>
+                  <span className="text-gray-400">{field.type}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded border p-4 text-center text-xs text-gray-400">필드 정보가 없습니다</div>
+          )}
+        </div>
+
+        {/* 안내 */}
+        <div className="rounded bg-green-50 p-3 text-xs text-green-700">✅ 변경 사항이 즉시 노드에 반영됩니다.</div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
new file mode 100644
index 00000000..0c6adfa3
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpdateActionProperties.tsx
@@ -0,0 +1,757 @@
+"use client";
+
+/**
+ * UPDATE 액션 노드 속성 편집 (개선 버전)
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { UpdateActionNodeData } from "@/types/node-editor";
+
+interface UpdateActionPropertiesProps {
+  nodeId: string;
+  data: UpdateActionNodeData;
+}
+
+interface TableOption {
+  tableName: string;
+  displayName: string;
+  description: string;
+  label: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  columnLabel?: string;
+  dataType: string;
+  isNullable: boolean;
+}
+
+const OPERATORS = [
+  { value: "EQUALS", label: "=" },
+  { value: "NOT_EQUALS", label: "≠" },
+  { value: "GREATER_THAN", label: ">" },
+  { value: "LESS_THAN", label: "<" },
+  { value: "GREATER_THAN_OR_EQUAL", label: "≥" },
+  { value: "LESS_THAN_OR_EQUAL", label: "≤" },
+  { value: "LIKE", label: "LIKE" },
+  { value: "NOT_LIKE", label: "NOT LIKE" },
+  { value: "IN", label: "IN" },
+  { value: "NOT_IN", label: "NOT IN" },
+  { value: "IS_NULL", label: "IS NULL" },
+  { value: "IS_NOT_NULL", label: "IS NOT NULL" },
+] as const;
+
+export function UpdateActionProperties({ nodeId, data }: UpdateActionPropertiesProps) {
+  const { updateNode, nodes, edges } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || data.targetTable);
+  const [targetTable, setTargetTable] = useState(data.targetTable);
+  const [fieldMappings, setFieldMappings] = useState(data.fieldMappings || []);
+  const [whereConditions, setWhereConditions] = useState(data.whereConditions || []);
+  const [batchSize, setBatchSize] = useState(data.options?.batchSize?.toString() || "");
+  const [ignoreErrors, setIgnoreErrors] = useState(data.options?.ignoreErrors || false);
+
+  // 테이블 관련 상태
+  const [tables, setTables] = useState<TableOption[]>([]);
+  const [tablesLoading, setTablesLoading] = useState(false);
+  const [tablesOpen, setTablesOpen] = useState(false);
+
+  // 컬럼 관련 상태
+  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 소스 필드 목록 (연결된 입력 노드에서 가져오기)
+  const [sourceFields, setSourceFields] = useState<Array<{ name: string; label?: string }>>([]);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || data.targetTable);
+    setTargetTable(data.targetTable);
+    setFieldMappings(data.fieldMappings || []);
+    setWhereConditions(data.whereConditions || []);
+    setBatchSize(data.options?.batchSize?.toString() || "");
+    setIgnoreErrors(data.options?.ignoreErrors || false);
+  }, [data]);
+
+  // 테이블 목록 로딩
+  useEffect(() => {
+    loadTables();
+  }, []);
+
+  // 타겟 테이블 변경 시 컬럼 로딩
+  useEffect(() => {
+    if (targetTable) {
+      loadColumns(targetTable);
+    }
+  }, [targetTable]);
+
+  // 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
+  useEffect(() => {
+    const getAllSourceFields = (
+      targetNodeId: string,
+      visitedNodes = new Set<string>(),
+    ): Array<{ name: string; label?: string }> => {
+      if (visitedNodes.has(targetNodeId)) {
+        return [];
+      }
+      visitedNodes.add(targetNodeId);
+
+      const inputEdges = edges.filter((edge) => edge.target === targetNodeId);
+      const sourceNodeIds = inputEdges.map((edge) => edge.source);
+      const sourceNodes = nodes.filter((node) => sourceNodeIds.includes(node.id));
+
+      const fields: Array<{ name: string; label?: string }> = [];
+
+      sourceNodes.forEach((node) => {
+        // 데이터 변환 노드인 경우: 변환된 필드 + 상위 노드의 원본 필드
+        if (node.type === "dataTransform") {
+          // 상위 노드의 원본 필드 먼저 수집
+          const upperFields = getAllSourceFields(node.id, visitedNodes);
+
+          // 변환된 필드 추가 (in-place 변환 고려)
+          if (node.data.transformations && Array.isArray(node.data.transformations)) {
+            const inPlaceFields = new Set<string>();
+
+            node.data.transformations.forEach((transform: any) => {
+              const targetField = transform.targetField || transform.sourceField;
+              const isInPlace = !transform.targetField || transform.targetField === transform.sourceField;
+
+              if (isInPlace) {
+                inPlaceFields.add(transform.sourceField);
+              } else if (targetField) {
+                fields.push({
+                  name: targetField,
+                  label: transform.targetFieldLabel || targetField,
+                });
+              }
+            });
+
+            // 상위 필드 추가 (모두 포함, in-place는 변환 후 값)
+            upperFields.forEach((field) => {
+              fields.push(field);
+            });
+          } else {
+            fields.push(...upperFields);
+          }
+        }
+        // 일반 소스 노드인 경우
+        else if (node.type === "tableSource" && node.data.fields) {
+          node.data.fields.forEach((field: any) => {
+            fields.push({
+              name: field.name,
+              label: field.label || field.displayName,
+            });
+          });
+        } else if (node.type === "externalDBSource" && node.data.fields) {
+          node.data.fields.forEach((field: any) => {
+            fields.push({
+              name: field.name,
+              label: field.label || field.displayName,
+            });
+          });
+        }
+      });
+
+      return fields;
+    };
+
+    const allFields = getAllSourceFields(nodeId);
+
+    // 중복 제거
+    const uniqueFields = Array.from(new Map(allFields.map((field) => [field.name, field])).values());
+
+    setSourceFields(uniqueFields);
+  }, [nodeId, nodes, edges]);
+
+  const loadTables = async () => {
+    try {
+      setTablesLoading(true);
+      const tableList = await tableTypeApi.getTables();
+      console.log("🔍 UPDATE 노드 - 테이블 목록:", tableList);
+
+      const options: TableOption[] = tableList.map((table) => {
+        const label = (table as any).tableLabel || table.displayName || table.tableName || "알 수 없는 테이블";
+
+        return {
+          tableName: table.tableName,
+          displayName: table.displayName || table.tableName,
+          description: table.description || "",
+          label,
+        };
+      });
+
+      console.log("✅ UPDATE 노드 - 테이블 옵션:", options);
+      setTables(options);
+    } catch (error) {
+      console.error("❌ UPDATE 노드 - 테이블 목록 로딩 실패:", error);
+    } finally {
+      setTablesLoading(false);
+    }
+  };
+
+  const loadColumns = async (tableName: string) => {
+    try {
+      setColumnsLoading(true);
+      console.log(`🔍 UPDATE 노드 - 컬럼 조회 중: ${tableName}`);
+
+      const columns = await tableTypeApi.getColumns(tableName);
+
+      const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
+        columnName: col.column_name || col.columnName,
+        columnLabel: col.label_ko || col.columnLabel,
+        dataType: col.data_type || col.dataType || "unknown",
+        isNullable: col.is_nullable === "YES" || col.isNullable === true,
+      }));
+
+      setTargetColumns(columnInfo);
+      console.log(`✅ UPDATE 노드 - 컬럼 ${columnInfo.length}개 로딩 완료`);
+    } catch (error) {
+      console.error("❌ UPDATE 노드 - 컬럼 목록 로딩 실패:", error);
+      setTargetColumns([]);
+    } finally {
+      setColumnsLoading(false);
+    }
+  };
+
+  const handleTableSelect = async (newTableName: string) => {
+    const selectedTable = tables.find((t) => t.tableName === newTableName);
+    const newDisplayName = selectedTable?.label || selectedTable?.displayName || newTableName;
+
+    setTargetTable(newTableName);
+    setDisplayName(newDisplayName);
+
+    await loadColumns(newTableName);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName: newDisplayName,
+      targetTable: newTableName,
+      fieldMappings,
+      whereConditions,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+      },
+    });
+
+    setTablesOpen(false);
+  };
+
+  const handleAddMapping = () => {
+    setFieldMappings([
+      ...fieldMappings,
+      {
+        sourceField: null,
+        targetField: "",
+        staticValue: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveMapping = (index: number) => {
+    const newMappings = fieldMappings.filter((_, i) => i !== index);
+    setFieldMappings(newMappings);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      fieldMappings: newMappings,
+      whereConditions,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+      },
+    });
+  };
+
+  const handleMappingChange = (index: number, field: string, value: any) => {
+    const newMappings = [...fieldMappings];
+
+    // 필드 변경 시 라벨도 함께 저장
+    if (field === "sourceField") {
+      const sourceField = sourceFields.find((f) => f.name === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        sourceField: value,
+        sourceFieldLabel: sourceField?.label,
+      };
+    } else if (field === "targetField") {
+      const targetColumn = targetColumns.find((c) => c.columnName === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        targetField: value,
+        targetFieldLabel: targetColumn?.columnLabel,
+      };
+    } else {
+      newMappings[index] = { ...newMappings[index], [field]: value };
+    }
+
+    setFieldMappings(newMappings);
+  };
+
+  const handleAddCondition = () => {
+    setWhereConditions([
+      ...whereConditions,
+      {
+        field: "",
+        operator: "EQUALS",
+        staticValue: "",
+      },
+    ]);
+  };
+
+  const handleRemoveCondition = (index: number) => {
+    const newConditions = whereConditions.filter((_, i) => i !== index);
+    setWhereConditions(newConditions);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      fieldMappings,
+      whereConditions: newConditions,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+      },
+    });
+  };
+
+  const handleConditionChange = (index: number, field: string, value: any) => {
+    const newConditions = [...whereConditions];
+
+    // 필드 변경 시 라벨도 함께 저장
+    if (field === "field") {
+      const targetColumn = targetColumns.find((c) => c.columnName === value);
+      newConditions[index] = {
+        ...newConditions[index],
+        field: value,
+        fieldLabel: targetColumn?.columnLabel,
+      };
+    } else if (field === "sourceField") {
+      const sourceField = sourceFields.find((f) => f.name === value);
+      newConditions[index] = {
+        ...newConditions[index],
+        sourceField: value,
+        sourceFieldLabel: sourceField?.label,
+      };
+    } else {
+      newConditions[index] = { ...newConditions[index], [field]: value };
+    }
+
+    setWhereConditions(newConditions);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      fieldMappings,
+      whereConditions,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        ignoreErrors,
+      },
+    });
+  };
+
+  const selectedTableLabel = tables.find((t) => t.tableName === targetTable)?.label || targetTable;
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            {/* 타겟 테이블 Combobox */}
+            <div>
+              <Label className="text-xs">타겟 테이블</Label>
+              <Popover open={tablesOpen} onOpenChange={setTablesOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={tablesOpen}
+                    className="mt-1 w-full justify-between"
+                    disabled={tablesLoading}
+                  >
+                    {tablesLoading ? (
+                      <span className="text-muted-foreground">로딩 중...</span>
+                    ) : targetTable ? (
+                      <span className="truncate">{selectedTableLabel}</span>
+                    ) : (
+                      <span className="text-muted-foreground">테이블을 선택하세요</span>
+                    )}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[320px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." />
+                    <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandList>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.label} ${table.displayName} ${table.tableName}`}
+                            onSelect={() => handleTableSelect(table.tableName)}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                targetTable === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{table.label || table.displayName}</span>
+                              <span className="text-muted-foreground text-xs">{table.tableName}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </div>
+
+        {/* WHERE 조건 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">WHERE 조건</h3>
+            <Button size="sm" variant="outline" onClick={handleAddCondition} className="h-7 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              조건 추가
+            </Button>
+          </div>
+
+          {!targetTable && !columnsLoading && (
+            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              ⚠️ 먼저 타겟 테이블을 선택하세요
+            </div>
+          )}
+
+          {targetTable && whereConditions.length === 0 && (
+            <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+              WHERE 조건을 추가하세요
+            </div>
+          )}
+
+          {targetTable && whereConditions.length > 0 && targetColumns.length > 0 && (
+            <div className="space-y-3">
+              {whereConditions.map((condition, index) => (
+                <div key={index} className="rounded border bg-blue-50 p-3">
+                  <div className="mb-2 flex items-center justify-between">
+                    <span className="text-xs font-medium text-gray-700">조건 #{index + 1}</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => handleRemoveCondition(index)}
+                      className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </Button>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 타겟 필드 */}
+                    <div>
+                      <Label className="text-xs text-gray-600">타겟 필드</Label>
+                      <Select
+                        value={condition.field}
+                        onValueChange={(value) => handleConditionChange(index, "field", value)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue placeholder="필드 선택" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {targetColumns.map((col) => (
+                            <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                              <div className="flex items-center justify-between gap-2">
+                                <span className="font-mono">{col.columnLabel || col.columnName}</span>
+                                <span className="text-muted-foreground">{col.dataType}</span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* 연산자 */}
+                    <div>
+                      <Label className="text-xs text-gray-600">연산자</Label>
+                      <Select
+                        value={condition.operator}
+                        onValueChange={(value) => handleConditionChange(index, "operator", value)}
+                      >
+                        <SelectTrigger className="mt-1 h-8 text-xs">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {OPERATORS.map((op) => (
+                            <SelectItem key={op.value} value={op.value} className="text-xs">
+                              {op.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* IS_NULL, IS_NOT_NULL이 아닐 때만 소스 필드와 정적 값 표시 */}
+                    {condition.operator !== "IS_NULL" && condition.operator !== "IS_NOT_NULL" && (
+                      <>
+                        {/* 소스 필드 또는 값 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">소스 필드 (선택)</Label>
+                          <Select
+                            value={condition.sourceField || "_NONE_"}
+                            onValueChange={(value) =>
+                              handleConditionChange(index, "sourceField", value === "_NONE_" ? undefined : value)
+                            }
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="소스 필드 선택 (선택)" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="_NONE_" className="text-xs text-gray-400">
+                                없음 (정적 값 사용)
+                              </SelectItem>
+                              {sourceFields.map((field) => (
+                                <SelectItem key={field.name} value={field.name} className="text-xs">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="font-medium">{field.label || field.name}</span>
+                                    {field.label && field.label !== field.name && (
+                                      <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                                    )}
+                                  </div>
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 정적 값 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">정적 값</Label>
+                          <Input
+                            value={condition.staticValue || ""}
+                            onChange={(e) => handleConditionChange(index, "staticValue", e.target.value || undefined)}
+                            placeholder="비교할 고정 값"
+                            className="mt-1 h-8 text-xs"
+                          />
+                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        </div>
+                      </>
+                    )}
+
+                    {/* IS_NULL, IS_NOT_NULL일 때 안내 메시지 */}
+                    {(condition.operator === "IS_NULL" || condition.operator === "IS_NOT_NULL") && (
+                      <div className="rounded bg-blue-50 p-3 text-xs text-blue-700">
+                        ℹ️ {condition.operator === "IS_NULL" ? "IS NULL" : "IS NOT NULL"} 조건은 값 비교가 필요하지
+                        않습니다.
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* 필드 매핑 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">업데이트 필드</h3>
+            <Button size="sm" variant="outline" onClick={handleAddMapping} className="h-7 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              매핑 추가
+            </Button>
+          </div>
+
+          {!targetTable && !columnsLoading && (
+            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              ⚠️ 먼저 타겟 테이블을 선택하세요
+            </div>
+          )}
+
+          {targetTable && !columnsLoading && targetColumns.length === 0 && (
+            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+              ❌ 컬럼 정보를 불러올 수 없습니다
+            </div>
+          )}
+
+          {targetTable && targetColumns.length > 0 && (
+            <>
+              {fieldMappings.length > 0 ? (
+                <div className="space-y-3">
+                  {fieldMappings.map((mapping, index) => (
+                    <div key={index} className="rounded border bg-gray-50 p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleRemoveMapping(index)}
+                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      <div className="space-y-2">
+                        {/* 소스 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">소스 필드</Label>
+                          <Select
+                            value={mapping.sourceField || ""}
+                            onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="소스 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {sourceFields.length === 0 ? (
+                                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                              ) : (
+                                sourceFields.map((field) => (
+                                  <SelectItem key={field.name} value={field.name} className="text-xs">
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-medium">{field.label || field.name}</span>
+                                      {field.label && field.label !== field.name && (
+                                        <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                                      )}
+                                    </div>
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <div className="flex items-center justify-center py-1">
+                          <ArrowRight className="h-4 w-4 text-blue-600" />
+                        </div>
+
+                        {/* 타겟 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Select
+                            value={mapping.targetField}
+                            onValueChange={(value) => handleMappingChange(index, "targetField", value)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="타겟 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {targetColumns.map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="font-mono">{col.columnLabel || col.columnName}</span>
+                                    <span className="text-muted-foreground">
+                                      {col.dataType}
+                                      {!col.isNullable && <span className="text-red-500">*</span>}
+                                    </span>
+                                  </div>
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 정적 값 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Input
+                            value={mapping.staticValue || ""}
+                            onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
+                            placeholder="소스 필드 대신 고정 값 사용"
+                            className="mt-1 h-8 text-xs"
+                          />
+                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                  업데이트할 필드를 추가하세요
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* 옵션 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">옵션</h3>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="batchSize" className="text-xs">
+                배치 크기
+              </Label>
+              <Input
+                id="batchSize"
+                type="number"
+                value={batchSize}
+                onChange={(e) => setBatchSize(e.target.value)}
+                className="mt-1"
+                placeholder="예: 100"
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="ignoreErrors"
+                checked={ignoreErrors}
+                onCheckedChange={(checked) => setIgnoreErrors(checked as boolean)}
+              />
+              <Label htmlFor="ignoreErrors" className="cursor-pointer text-xs font-normal">
+                오류 무시
+              </Label>
+            </div>
+          </div>
+        </div>
+
+        {/* 적용 버튼 */}
+        <div className="sticky bottom-0 border-t bg-white pt-3">
+          <Button onClick={handleSave} className="w-full" size="sm">
+            적용
+          </Button>
+          <p className="mt-2 text-center text-xs text-gray-500">✅ 변경 사항이 즉시 노드에 반영됩니다.</p>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
new file mode 100644
index 00000000..b582c98a
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/panels/properties/UpsertActionProperties.tsx
@@ -0,0 +1,638 @@
+"use client";
+
+/**
+ * UPSERT 액션 노드 속성 편집 (개선 버전)
+ */
+
+import { useEffect, useState } from "react";
+import { Plus, Trash2, Check, ChevronsUpDown, ArrowRight } from "lucide-react";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
+import { tableTypeApi } from "@/lib/api/screen";
+import type { UpsertActionNodeData } from "@/types/node-editor";
+
+interface UpsertActionPropertiesProps {
+  nodeId: string;
+  data: UpsertActionNodeData;
+}
+
+interface TableOption {
+  tableName: string;
+  displayName: string;
+  description: string;
+  label: string;
+}
+
+interface ColumnInfo {
+  columnName: string;
+  columnLabel?: string;
+  dataType: string;
+  isNullable: boolean;
+}
+
+export function UpsertActionProperties({ nodeId, data }: UpsertActionPropertiesProps) {
+  const { updateNode, nodes, edges } = useFlowEditorStore();
+
+  const [displayName, setDisplayName] = useState(data.displayName || data.targetTable);
+  const [targetTable, setTargetTable] = useState(data.targetTable);
+  const [conflictKeys, setConflictKeys] = useState<string[]>(data.conflictKeys || []);
+  const [conflictKeyLabels, setConflictKeyLabels] = useState<string[]>(data.conflictKeyLabels || []);
+  const [fieldMappings, setFieldMappings] = useState(data.fieldMappings || []);
+  const [batchSize, setBatchSize] = useState(data.options?.batchSize?.toString() || "");
+  const [updateOnConflict, setUpdateOnConflict] = useState(data.options?.updateOnConflict ?? true);
+
+  // 테이블 관련 상태
+  const [tables, setTables] = useState<TableOption[]>([]);
+  const [tablesLoading, setTablesLoading] = useState(false);
+  const [tablesOpen, setTablesOpen] = useState(false);
+
+  // 컬럼 관련 상태
+  const [targetColumns, setTargetColumns] = useState<ColumnInfo[]>([]);
+  const [columnsLoading, setColumnsLoading] = useState(false);
+
+  // 소스 필드 목록 (연결된 입력 노드에서 가져오기)
+  const [sourceFields, setSourceFields] = useState<Array<{ name: string; label?: string }>>([]);
+
+  // 데이터 변경 시 로컬 상태 업데이트
+  useEffect(() => {
+    setDisplayName(data.displayName || data.targetTable);
+    setTargetTable(data.targetTable);
+    setConflictKeys(data.conflictKeys || []);
+    setConflictKeyLabels(data.conflictKeyLabels || []);
+    setFieldMappings(data.fieldMappings || []);
+    setBatchSize(data.options?.batchSize?.toString() || "");
+    setUpdateOnConflict(data.options?.updateOnConflict ?? true);
+  }, [data]);
+
+  // 테이블 목록 로딩
+  useEffect(() => {
+    loadTables();
+  }, []);
+
+  // 타겟 테이블 변경 시 컬럼 로딩
+  useEffect(() => {
+    if (targetTable) {
+      loadColumns(targetTable);
+    }
+  }, [targetTable]);
+
+  // 연결된 소스 노드에서 필드 가져오기 (재귀적으로 모든 상위 노드 탐색)
+  useEffect(() => {
+    const getAllSourceFields = (
+      targetNodeId: string,
+      visitedNodes = new Set<string>(),
+    ): Array<{ name: string; label?: string }> => {
+      if (visitedNodes.has(targetNodeId)) {
+        return [];
+      }
+      visitedNodes.add(targetNodeId);
+
+      const inputEdges = edges.filter((edge) => edge.target === targetNodeId);
+      const sourceNodeIds = inputEdges.map((edge) => edge.source);
+      const sourceNodes = nodes.filter((node) => sourceNodeIds.includes(node.id));
+
+      const fields: Array<{ name: string; label?: string }> = [];
+
+      sourceNodes.forEach((node) => {
+        // 데이터 변환 노드인 경우: 변환된 필드 + 상위 노드의 원본 필드
+        if (node.type === "dataTransform") {
+          // 상위 노드의 원본 필드 먼저 수집
+          const upperFields = getAllSourceFields(node.id, visitedNodes);
+
+          // 변환된 필드 추가 (in-place 변환 고려)
+          if (node.data.transformations && Array.isArray(node.data.transformations)) {
+            const inPlaceFields = new Set<string>();
+
+            node.data.transformations.forEach((transform: any) => {
+              const targetField = transform.targetField || transform.sourceField;
+              const isInPlace = !transform.targetField || transform.targetField === transform.sourceField;
+
+              if (isInPlace) {
+                inPlaceFields.add(transform.sourceField);
+              } else if (targetField) {
+                fields.push({
+                  name: targetField,
+                  label: transform.targetFieldLabel || targetField,
+                });
+              }
+            });
+
+            // 상위 필드 추가 (모두 포함, in-place는 변환 후 값)
+            upperFields.forEach((field) => {
+              fields.push(field);
+            });
+          } else {
+            fields.push(...upperFields);
+          }
+        }
+        // 일반 소스 노드인 경우
+        else if (node.type === "tableSource" && node.data.fields) {
+          node.data.fields.forEach((field: any) => {
+            fields.push({
+              name: field.name,
+              label: field.label || field.displayName,
+            });
+          });
+        } else if (node.type === "externalDBSource" && node.data.fields) {
+          node.data.fields.forEach((field: any) => {
+            fields.push({
+              name: field.name,
+              label: field.label || field.displayName,
+            });
+          });
+        }
+      });
+
+      return fields;
+    };
+
+    const allFields = getAllSourceFields(nodeId);
+
+    // 중복 제거
+    const uniqueFields = Array.from(new Map(allFields.map((field) => [field.name, field])).values());
+
+    setSourceFields(uniqueFields);
+  }, [nodeId, nodes, edges]);
+
+  const loadTables = async () => {
+    try {
+      setTablesLoading(true);
+      const tableList = await tableTypeApi.getTables();
+
+      const options: TableOption[] = tableList.map((table) => {
+        const label = (table as any).tableLabel || table.displayName || table.tableName || "알 수 없는 테이블";
+
+        return {
+          tableName: table.tableName,
+          displayName: table.displayName || table.tableName,
+          description: table.description || "",
+          label,
+        };
+      });
+
+      setTables(options);
+    } catch (error) {
+      console.error("❌ UPSERT 노드 - 테이블 목록 로딩 실패:", error);
+    } finally {
+      setTablesLoading(false);
+    }
+  };
+
+  const loadColumns = async (tableName: string) => {
+    try {
+      setColumnsLoading(true);
+      const columns = await tableTypeApi.getColumns(tableName);
+
+      const columnInfo: ColumnInfo[] = columns.map((col: any) => ({
+        columnName: col.column_name || col.columnName,
+        columnLabel: col.label_ko || col.columnLabel,
+        dataType: col.data_type || col.dataType || "unknown",
+        isNullable: col.is_nullable === "YES" || col.isNullable === true,
+      }));
+
+      setTargetColumns(columnInfo);
+    } catch (error) {
+      console.error("❌ UPSERT 노드 - 컬럼 목록 로딩 실패:", error);
+      setTargetColumns([]);
+    } finally {
+      setColumnsLoading(false);
+    }
+  };
+
+  const handleTableSelect = async (newTableName: string) => {
+    const selectedTable = tables.find((t) => t.tableName === newTableName);
+    const newDisplayName = selectedTable?.label || selectedTable?.displayName || newTableName;
+
+    setTargetTable(newTableName);
+    setDisplayName(newDisplayName);
+
+    await loadColumns(newTableName);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName: newDisplayName,
+      targetTable: newTableName,
+      conflictKeys,
+      conflictKeyLabels,
+      fieldMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        updateOnConflict,
+      },
+    });
+
+    setTablesOpen(false);
+  };
+
+  const handleAddConflictKey = (columnName: string) => {
+    if (!conflictKeys.includes(columnName)) {
+      const column = targetColumns.find((c) => c.columnName === columnName);
+      const newConflictKeys = [...conflictKeys, columnName];
+      const newConflictKeyLabels = [...conflictKeyLabels, column?.columnLabel || columnName];
+
+      setConflictKeys(newConflictKeys);
+      setConflictKeyLabels(newConflictKeyLabels);
+    }
+  };
+
+  const handleRemoveConflictKey = (index: number) => {
+    const newKeys = conflictKeys.filter((_, i) => i !== index);
+    const newLabels = conflictKeyLabels.filter((_, i) => i !== index);
+
+    setConflictKeys(newKeys);
+    setConflictKeyLabels(newLabels);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      conflictKeys: newKeys,
+      conflictKeyLabels: newLabels,
+      fieldMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        updateOnConflict,
+      },
+    });
+  };
+
+  const handleAddMapping = () => {
+    setFieldMappings([
+      ...fieldMappings,
+      {
+        sourceField: null,
+        targetField: "",
+        staticValue: undefined,
+      },
+    ]);
+  };
+
+  const handleRemoveMapping = (index: number) => {
+    const newMappings = fieldMappings.filter((_, i) => i !== index);
+    setFieldMappings(newMappings);
+
+    // 즉시 반영
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      conflictKeys,
+      conflictKeyLabels,
+      fieldMappings: newMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        updateOnConflict,
+      },
+    });
+  };
+
+  const handleMappingChange = (index: number, field: string, value: any) => {
+    const newMappings = [...fieldMappings];
+
+    // 필드 변경 시 라벨도 함께 저장
+    if (field === "sourceField") {
+      const sourceField = sourceFields.find((f) => f.name === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        sourceField: value,
+        sourceFieldLabel: sourceField?.label,
+      };
+    } else if (field === "targetField") {
+      const targetColumn = targetColumns.find((c) => c.columnName === value);
+      newMappings[index] = {
+        ...newMappings[index],
+        targetField: value,
+        targetFieldLabel: targetColumn?.columnLabel,
+      };
+    } else {
+      newMappings[index] = { ...newMappings[index], [field]: value };
+    }
+
+    setFieldMappings(newMappings);
+  };
+
+  const handleSave = () => {
+    updateNode(nodeId, {
+      displayName,
+      targetTable,
+      conflictKeys,
+      conflictKeyLabels,
+      fieldMappings,
+      options: {
+        batchSize: batchSize ? parseInt(batchSize) : undefined,
+        updateOnConflict,
+      },
+    });
+  };
+
+  const selectedTableLabel = tables.find((t) => t.tableName === targetTable)?.label || targetTable;
+
+  return (
+    <ScrollArea className="h-full">
+      <div className="space-y-4 p-4">
+        {/* 기본 정보 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="displayName" className="text-xs">
+                표시 이름
+              </Label>
+              <Input
+                id="displayName"
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                className="mt-1"
+                placeholder="노드 표시 이름"
+              />
+            </div>
+
+            {/* 타겟 테이블 Combobox */}
+            <div>
+              <Label className="text-xs">타겟 테이블</Label>
+              <Popover open={tablesOpen} onOpenChange={setTablesOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={tablesOpen}
+                    className="mt-1 w-full justify-between"
+                    disabled={tablesLoading}
+                  >
+                    {tablesLoading ? (
+                      <span className="text-muted-foreground">로딩 중...</span>
+                    ) : targetTable ? (
+                      <span className="truncate">{selectedTableLabel}</span>
+                    ) : (
+                      <span className="text-muted-foreground">테이블을 선택하세요</span>
+                    )}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[320px] p-0" align="start">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." className="h-9" />
+                    <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                    <CommandList>
+                      <CommandGroup>
+                        {tables.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={`${table.label} ${table.displayName} ${table.tableName}`}
+                            onSelect={() => handleTableSelect(table.tableName)}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                targetTable === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{table.label || table.displayName}</span>
+                              <span className="text-muted-foreground text-xs">{table.tableName}</span>
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+        </div>
+
+        {/* 충돌 키 (ON CONFLICT) */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <div>
+              <h3 className="text-sm font-semibold">충돌 키 (ON CONFLICT)</h3>
+              <p className="text-xs text-gray-500">중복 체크에 사용할 키를 선택하세요</p>
+            </div>
+          </div>
+
+          {!targetTable && (
+            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              ⚠️ 먼저 타겟 테이블을 선택하세요
+            </div>
+          )}
+
+          {targetTable && targetColumns.length > 0 && (
+            <>
+              {/* 선택된 충돌 키 */}
+              {conflictKeys.length > 0 ? (
+                <div className="mb-3 flex flex-wrap gap-2">
+                  {conflictKeys.map((key, idx) => (
+                    <div key={idx} className="flex items-center gap-1 rounded bg-purple-100 px-2 py-1 text-xs">
+                      <span className="font-medium text-purple-700">{conflictKeyLabels[idx] || key}</span>
+                      <button
+                        onClick={() => handleRemoveConflictKey(idx)}
+                        className="ml-1 text-purple-600 hover:text-purple-800"
+                      >
+                        <Trash2 className="h-3 w-3" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="mb-3 rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                  충돌 키를 추가하세요
+                </div>
+              )}
+
+              {/* 충돌 키 추가 드롭다운 */}
+              <Select onValueChange={handleAddConflictKey}>
+                <SelectTrigger className="h-8 text-xs">
+                  <SelectValue placeholder="충돌 키 추가..." />
+                </SelectTrigger>
+                <SelectContent>
+                  {targetColumns
+                    .filter((col) => !conflictKeys.includes(col.columnName))
+                    .map((col) => (
+                      <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="font-mono">{col.columnLabel || col.columnName}</span>
+                          <span className="text-muted-foreground">{col.dataType}</span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                </SelectContent>
+              </Select>
+            </>
+          )}
+        </div>
+
+        {/* 필드 매핑 */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-sm font-semibold">필드 매핑</h3>
+            <Button size="sm" variant="outline" onClick={handleAddMapping} className="h-7 px-2 text-xs">
+              <Plus className="mr-1 h-3 w-3" />
+              매핑 추가
+            </Button>
+          </div>
+
+          {!targetTable && !columnsLoading && (
+            <div className="rounded border border-dashed bg-yellow-50 p-3 text-center text-xs text-yellow-700">
+              ⚠️ 먼저 타겟 테이블을 선택하세요
+            </div>
+          )}
+
+          {targetTable && !columnsLoading && targetColumns.length === 0 && (
+            <div className="rounded border border-dashed bg-red-50 p-3 text-center text-xs text-red-700">
+              ❌ 컬럼 정보를 불러올 수 없습니다
+            </div>
+          )}
+
+          {targetTable && targetColumns.length > 0 && (
+            <>
+              {fieldMappings.length > 0 ? (
+                <div className="space-y-3">
+                  {fieldMappings.map((mapping, index) => (
+                    <div key={index} className="rounded border bg-gray-50 p-3">
+                      <div className="mb-2 flex items-center justify-between">
+                        <span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => handleRemoveMapping(index)}
+                          className="h-6 w-6 p-0 text-red-600 hover:text-red-700"
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      </div>
+
+                      <div className="space-y-2">
+                        {/* 소스 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">소스 필드</Label>
+                          <Select
+                            value={mapping.sourceField || ""}
+                            onValueChange={(value) => handleMappingChange(index, "sourceField", value || null)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="소스 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {sourceFields.length === 0 ? (
+                                <div className="p-2 text-center text-xs text-gray-400">연결된 소스 노드가 없습니다</div>
+                              ) : (
+                                sourceFields.map((field) => (
+                                  <SelectItem key={field.name} value={field.name} className="text-xs">
+                                    <div className="flex items-center justify-between gap-2">
+                                      <span className="font-medium">{field.label || field.name}</span>
+                                      {field.label && field.label !== field.name && (
+                                        <span className="text-muted-foreground font-mono text-xs">{field.name}</span>
+                                      )}
+                                    </div>
+                                  </SelectItem>
+                                ))
+                              )}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <div className="flex items-center justify-center py-1">
+                          <ArrowRight className="h-4 w-4 text-purple-600" />
+                        </div>
+
+                        {/* 타겟 필드 드롭다운 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">타겟 필드</Label>
+                          <Select
+                            value={mapping.targetField}
+                            onValueChange={(value) => handleMappingChange(index, "targetField", value)}
+                          >
+                            <SelectTrigger className="mt-1 h-8 text-xs">
+                              <SelectValue placeholder="타겟 필드 선택" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {targetColumns.map((col) => (
+                                <SelectItem key={col.columnName} value={col.columnName} className="text-xs">
+                                  <div className="flex items-center justify-between gap-2">
+                                    <span className="font-mono">{col.columnLabel || col.columnName}</span>
+                                    <span className="text-muted-foreground">
+                                      {col.dataType}
+                                      {!col.isNullable && <span className="text-red-500">*</span>}
+                                    </span>
+                                  </div>
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        {/* 정적 값 */}
+                        <div>
+                          <Label className="text-xs text-gray-600">정적 값 (선택)</Label>
+                          <Input
+                            value={mapping.staticValue || ""}
+                            onChange={(e) => handleMappingChange(index, "staticValue", e.target.value || undefined)}
+                            placeholder="소스 필드 대신 고정 값 사용"
+                            className="mt-1 h-8 text-xs"
+                          />
+                          <p className="mt-1 text-xs text-gray-400">소스 필드가 비어있을 때만 사용됩니다</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className="rounded border border-dashed bg-gray-50 p-3 text-center text-xs text-gray-500">
+                  UPSERT할 필드를 추가하세요
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* 옵션 */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">옵션</h3>
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="batchSize" className="text-xs">
+                배치 크기
+              </Label>
+              <Input
+                id="batchSize"
+                type="number"
+                value={batchSize}
+                onChange={(e) => setBatchSize(e.target.value)}
+                className="mt-1"
+                placeholder="예: 100"
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                id="updateOnConflict"
+                checked={updateOnConflict}
+                onCheckedChange={(checked) => setUpdateOnConflict(checked as boolean)}
+              />
+              <Label htmlFor="updateOnConflict" className="cursor-pointer text-xs font-normal">
+                충돌 시 업데이트 (ON CONFLICT DO UPDATE)
+              </Label>
+            </div>
+          </div>
+        </div>
+
+        {/* 적용 버튼 */}
+        <div className="sticky bottom-0 border-t bg-white pt-3">
+          <Button onClick={handleSave} className="w-full" size="sm">
+            적용
+          </Button>
+          <p className="mt-2 text-center text-xs text-gray-500">✅ 변경 사항이 즉시 노드에 반영됩니다.</p>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
new file mode 100644
index 00000000..c28dfc55
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/sidebar/NodePalette.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+/**
+ * 노드 팔레트 사이드바
+ */
+
+import { useState } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { NODE_CATEGORIES, getNodesByCategory } from "./nodePaletteConfig";
+import type { NodePaletteItem } from "@/types/node-editor";
+
+export function NodePalette() {
+  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(["source", "transform", "action"]));
+
+  const toggleCategory = (categoryId: string) => {
+    setExpandedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(categoryId)) {
+        next.delete(categoryId);
+      } else {
+        next.add(categoryId);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* 헤더 */}
+      <div className="border-b bg-gray-50 p-4">
+        <h3 className="text-sm font-semibold text-gray-900">노드 라이브러리</h3>
+        <p className="mt-1 text-xs text-gray-500">캔버스로 드래그하여 추가</p>
+      </div>
+
+      {/* 노드 목록 */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {NODE_CATEGORIES.map((category) => {
+          const isExpanded = expandedCategories.has(category.id);
+          const nodes = getNodesByCategory(category.id);
+
+          return (
+            <div key={category.id} className="mb-2">
+              {/* 카테고리 헤더 */}
+              <button
+                onClick={() => toggleCategory(category.id)}
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm font-medium text-gray-700 hover:bg-gray-100"
+              >
+                {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                <span>{category.icon}</span>
+                <span>{category.label}</span>
+                <span className="ml-auto text-xs text-gray-400">{nodes.length}</span>
+              </button>
+
+              {/* 노드 아이템들 */}
+              {isExpanded && (
+                <div className="mt-1 ml-2 space-y-1">
+                  {nodes.map((node) => (
+                    <NodePaletteItemComponent key={node.type} node={node} />
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* 푸터 도움말 */}
+      <div className="border-t bg-gray-50 p-3">
+        <p className="text-xs text-gray-500">💡 노드를 드래그하여 캔버스에 배치하고 연결선으로 연결하세요</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * 노드 팔레트 아이템 컴포넌트
+ */
+function NodePaletteItemComponent({ node }: { node: NodePaletteItem }) {
+  const onDragStart = (event: React.DragEvent) => {
+    event.dataTransfer.setData("application/reactflow", node.type);
+    event.dataTransfer.effectAllowed = "move";
+  };
+
+  return (
+    <div
+      className="group cursor-move rounded-lg border border-gray-200 bg-white p-3 shadow-sm transition-all hover:border-gray-300 hover:shadow-md"
+      draggable
+      onDragStart={onDragStart}
+      title={node.description}
+    >
+      <div className="flex items-start gap-2">
+        {/* 아이콘 */}
+        <div
+          className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded text-lg"
+          style={{ backgroundColor: `${node.color}20` }}
+        >
+          {node.icon}
+        </div>
+
+        {/* 라벨 및 설명 */}
+        <div className="min-w-0 flex-1">
+          <div className="text-sm font-medium text-gray-900">{node.label}</div>
+          <div className="mt-0.5 truncate text-xs text-gray-500">{node.description}</div>
+        </div>
+      </div>
+
+      {/* 색상 인디케이터 */}
+      <div
+        className="mt-2 h-1 w-full rounded-full opacity-0 transition-opacity group-hover:opacity-100"
+        style={{ backgroundColor: node.color }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/components/dataflow/node-editor/sidebar/nodePaletteConfig.ts b/frontend/components/dataflow/node-editor/sidebar/nodePaletteConfig.ts
new file mode 100644
index 00000000..0ab6cb73
--- /dev/null
+++ b/frontend/components/dataflow/node-editor/sidebar/nodePaletteConfig.ts
@@ -0,0 +1,156 @@
+/**
+ * 노드 팔레트 설정
+ */
+
+import type { NodePaletteItem } from "@/types/node-editor";
+
+export const NODE_PALETTE: NodePaletteItem[] = [
+  // ========================================================================
+  // 데이터 소스
+  // ========================================================================
+  {
+    type: "tableSource",
+    label: "테이블",
+    icon: "📊",
+    description: "내부 데이터베이스 테이블에서 데이터를 읽어옵니다",
+    category: "source",
+    color: "#3B82F6", // 파란색
+  },
+  {
+    type: "externalDBSource",
+    label: "외부 DB",
+    icon: "🔌",
+    description: "외부 데이터베이스에서 데이터를 읽어옵니다",
+    category: "source",
+    color: "#F59E0B", // 주황색
+  },
+  {
+    type: "restAPISource",
+    label: "REST API",
+    icon: "📁",
+    description: "REST API를 호출하여 데이터를 가져옵니다",
+    category: "source",
+    color: "#10B981", // 초록색
+  },
+
+  // ========================================================================
+  // 변환/조건
+  // ========================================================================
+  {
+    type: "condition",
+    label: "조건 분기",
+    icon: "⚡",
+    description: "조건에 따라 데이터 흐름을 분기합니다",
+    category: "transform",
+    color: "#EAB308", // 노란색
+  },
+  {
+    type: "fieldMapping",
+    label: "필드 매핑",
+    icon: "🔀",
+    description: "소스 필드를 타겟 필드로 매핑합니다",
+    category: "transform",
+    color: "#8B5CF6", // 보라색
+  },
+  {
+    type: "dataTransform",
+    label: "데이터 변환",
+    icon: "🔧",
+    description: "데이터를 변환하거나 가공합니다",
+    category: "transform",
+    color: "#06B6D4", // 청록색
+  },
+
+  // ========================================================================
+  // 액션
+  // ========================================================================
+  {
+    type: "insertAction",
+    label: "INSERT",
+    icon: "➕",
+    description: "데이터를 삽입합니다",
+    category: "action",
+    color: "#22C55E", // 초록색
+  },
+  {
+    type: "updateAction",
+    label: "UPDATE",
+    icon: "✏️",
+    description: "데이터를 수정합니다",
+    category: "action",
+    color: "#3B82F6", // 파란색
+  },
+  {
+    type: "deleteAction",
+    label: "DELETE",
+    icon: "❌",
+    description: "데이터를 삭제합니다",
+    category: "action",
+    color: "#EF4444", // 빨간색
+  },
+  {
+    type: "upsertAction",
+    label: "UPSERT",
+    icon: "🔄",
+    description: "데이터를 삽입하거나 수정합니다",
+    category: "action",
+    color: "#8B5CF6", // 보라색
+  },
+
+  // ========================================================================
+  // 유틸리티
+  // ========================================================================
+  {
+    type: "comment",
+    label: "주석",
+    icon: "💬",
+    description: "주석을 추가합니다",
+    category: "utility",
+    color: "#6B7280", // 회색
+  },
+  {
+    type: "log",
+    label: "로그",
+    icon: "🔍",
+    description: "로그를 출력합니다",
+    category: "utility",
+    color: "#6B7280", // 회색
+  },
+];
+
+export const NODE_CATEGORIES = [
+  {
+    id: "source",
+    label: "데이터 소스",
+    icon: "📂",
+  },
+  {
+    id: "transform",
+    label: "변환/조건",
+    icon: "🔀",
+  },
+  {
+    id: "action",
+    label: "액션",
+    icon: "⚡",
+  },
+  {
+    id: "utility",
+    label: "유틸리티",
+    icon: "🛠️",
+  },
+] as const;
+
+/**
+ * 노드 타입별 팔레트 아이템 조회
+ */
+export function getNodePaletteItem(type: string): NodePaletteItem | undefined {
+  return NODE_PALETTE.find((item) => item.type === type);
+}
+
+/**
+ * 카테고리별 노드 목록 조회
+ */
+export function getNodesByCategory(category: string): NodePaletteItem[] {
+  return NODE_PALETTE.filter((item) => item.category === category);
+}
diff --git a/frontend/components/screen/OptimizedButtonComponent.tsx b/frontend/components/screen/OptimizedButtonComponent.tsx
index 6d1ca380..ffb71024 100644
--- a/frontend/components/screen/OptimizedButtonComponent.tsx
+++ b/frontend/components/screen/OptimizedButtonComponent.tsx
@@ -13,6 +13,7 @@ import {
 import { dataflowJobQueue } from "@/lib/services/dataflowJobQueue";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
+import { executeButtonWithFlow, handleFlowExecutionResult } from "@/lib/utils/nodeFlowButtonExecutor";
 
 interface OptimizedButtonProps {
   component: ComponentData;
@@ -98,7 +99,44 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       });
 
       if (config?.enableDataflowControl && config?.dataflowConfig) {
-        // 🔥 확장된 제어 검증 먼저 실행
+        // 🆕 노드 플로우 방식 실행
+        if (config.dataflowConfig.controlMode === "flow" && config.dataflowConfig.flowConfig) {
+          console.log("🔄 노드 플로우 방식 실행:", config.dataflowConfig.flowConfig);
+
+          const flowResult = await executeButtonWithFlow(
+            config.dataflowConfig.flowConfig,
+            {
+              buttonId: component.id,
+              screenId: component.screenId,
+              companyCode,
+              userId: contextData.userId,
+              formData,
+              selectedRows: selectedRows || [],
+              selectedRowsData: selectedRowsData || [],
+              controlDataSource: config.dataflowConfig.controlDataSource,
+            },
+            // 원래 액션 (timing이 before나 after일 때 실행)
+            async () => {
+              if (!isControlOnlyAction) {
+                await executeOriginalAction(config?.actionType || "save", contextData);
+              }
+            },
+          );
+
+          handleFlowExecutionResult(flowResult, {
+            buttonId: component.id,
+            formData,
+            onRefresh: onDataflowComplete,
+          });
+
+          if (onActionComplete) {
+            onActionComplete(flowResult);
+          }
+
+          return;
+        }
+
+        // 🔥 기존 관계 방식 실행
         const validationResult = await OptimizedButtonDataflowService.executeExtendedValidation(
           config.dataflowConfig,
           extendedContext as ExtendedControlContext,
diff --git a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
index c5b741ac..2d94b318 100644
--- a/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
+++ b/frontend/components/screen/config-panels/ImprovedButtonControlConfigPanel.tsx
@@ -8,36 +8,20 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Switch } from "@/components/ui/switch";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { 
-  Settings, 
-  GitBranch, 
-  Clock,
-  Zap,
-  Info
-} from "lucide-react";
-import { ComponentData, ButtonDataflowConfig } from "@/types/screen";
-import { apiClient } from "@/lib/api/client";
+import { Settings, Clock, Zap, Info, Workflow } from "lucide-react";
+import { ComponentData } from "@/types/screen";
+import { getNodeFlows, NodeFlow } from "@/lib/api/nodeFlows";
 
 interface ImprovedButtonControlConfigPanelProps {
   component: ComponentData;
   onUpdateProperty: (path: string, value: any) => void;
 }
 
-interface RelationshipOption {
-  id: string;
-  name: string;
-  sourceTable: string;
-  targetTable: string;
-  category: string;
-}
-
-
 /**
  * 🔥 단순화된 버튼 제어 설정 패널
- * 
- * 관계 실행만 지원:
- * - 관계 선택 및 실행 타이밍 설정
- * - 관계 내부에 데이터 저장/외부호출 로직 포함
+ *
+ * 노드 플로우 실행만 지원:
+ * - 플로우 선택 및 실행 타이밍 설정
  */
 export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlConfigPanelProps> = ({
   component,
@@ -47,57 +31,45 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
   const dataflowConfig = config.dataflowConfig || {};
 
   // 🔥 State 관리
-  const [relationships, setRelationships] = useState<RelationshipOption[]>([]);
+  const [flows, setFlows] = useState<NodeFlow[]>([]);
   const [loading, setLoading] = useState(false);
 
-  // 🔥 관계 목록 로딩
+  // 🔥 플로우 목록 로딩
   useEffect(() => {
     if (config.enableDataflowControl) {
-      loadRelationships();
+      loadFlows();
     }
   }, [config.enableDataflowControl]);
 
   /**
-   * 🔥 전체 관계 목록 로드 (관계도별 구분 없이)
+   * 🔥 플로우 목록 로드
    */
-  const loadRelationships = async () => {
+  const loadFlows = async () => {
     try {
       setLoading(true);
-      console.log("🔍 전체 관계 목록 로딩...");
+      console.log("🔍 플로우 목록 로딩...");
 
-      const response = await apiClient.get("/test-button-dataflow/relationships/all");
-
-      if (response.data.success && Array.isArray(response.data.data)) {
-        const relationshipList = response.data.data.map((rel: any) => ({
-          id: rel.id,
-          name: rel.name || `${rel.sourceTable} → ${rel.targetTable}`,
-          sourceTable: rel.sourceTable,
-          targetTable: rel.targetTable,
-          category: rel.category || "데이터 흐름",
-        }));
-
-        setRelationships(relationshipList);
-        console.log(`✅ 관계 ${relationshipList.length}개 로딩 완료`);
-      }
+      const flowList = await getNodeFlows();
+      setFlows(flowList);
+      console.log(`✅ 플로우 ${flowList.length}개 로딩 완료`);
     } catch (error) {
-      console.error("❌ 관계 목록 로딩 실패:", error);
-      setRelationships([]);
+      console.error("❌ 플로우 목록 로딩 실패:", error);
+      setFlows([]);
     } finally {
       setLoading(false);
     }
   };
 
-
   /**
-   * 🔥 관계 선택 핸들러
+   * 🔥 플로우 선택 핸들러
    */
-  const handleRelationshipSelect = (relationshipId: string) => {
-    const selectedRelationship = relationships.find(r => r.id === relationshipId);
-    if (selectedRelationship) {
-      onUpdateProperty("webTypeConfig.dataflowConfig.relationshipConfig", {
-        relationshipId: selectedRelationship.id,
-        relationshipName: selectedRelationship.name,
-        executionTiming: "after", // 기본값
+  const handleFlowSelect = (flowId: string) => {
+    const selectedFlow = flows.find((f) => f.flowId.toString() === flowId);
+    if (selectedFlow) {
+      onUpdateProperty("webTypeConfig.dataflowConfig.flowConfig", {
+        flowId: selectedFlow.flowId,
+        flowName: selectedFlow.flowName,
+        executionTiming: "before", // 기본값
         contextData: {},
       });
     }
@@ -110,7 +82,7 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
     // 기존 설정 초기화
     onUpdateProperty("webTypeConfig.dataflowConfig", {
       controlMode: controlType,
-      relationshipConfig: controlType === "relationship" ? undefined : null,
+      flowConfig: controlType === "flow" ? undefined : null,
     });
   };
 
@@ -138,46 +110,45 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
             <CardTitle>버튼 제어 설정</CardTitle>
           </CardHeader>
           <CardContent>
-            <Tabs 
-              value={dataflowConfig.controlMode || "none"} 
-              onValueChange={handleControlTypeChange}
-            >
+            <Tabs value={dataflowConfig.controlMode || "none"} onValueChange={handleControlTypeChange}>
               <TabsList className="grid w-full grid-cols-2">
                 <TabsTrigger value="none">제어 없음</TabsTrigger>
-                <TabsTrigger value="relationship">관계 실행</TabsTrigger>
+                <TabsTrigger value="flow">노드 플로우</TabsTrigger>
               </TabsList>
 
               <TabsContent value="none" className="mt-4">
-                <div className="text-center py-8 text-gray-500">
-                  <Zap className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                <div className="py-8 text-center text-gray-500">
+                  <Zap className="mx-auto mb-2 h-8 w-8 opacity-50" />
                   <p>추가 제어 없이 기본 버튼 액션만 실행됩니다.</p>
                 </div>
               </TabsContent>
 
-              <TabsContent value="relationship" className="mt-4">
-                <RelationshipSelector
-                  relationships={relationships}
-                  selectedRelationshipId={dataflowConfig.relationshipConfig?.relationshipId}
-                  onSelect={handleRelationshipSelect}
+              <TabsContent value="flow" className="mt-4">
+                <FlowSelector
+                  flows={flows}
+                  selectedFlowId={dataflowConfig.flowConfig?.flowId}
+                  onSelect={handleFlowSelect}
                   loading={loading}
                 />
-                
-                {dataflowConfig.relationshipConfig && (
+
+                {dataflowConfig.flowConfig && (
                   <div className="mt-4 space-y-4">
                     <Separator />
                     <ExecutionTimingSelector
-                      value={dataflowConfig.relationshipConfig.executionTiming}
-                      onChange={(timing) => 
-                        onUpdateProperty("webTypeConfig.dataflowConfig.relationshipConfig.executionTiming", timing)
+                      value={dataflowConfig.flowConfig.executionTiming}
+                      onChange={(timing) =>
+                        onUpdateProperty("webTypeConfig.dataflowConfig.flowConfig.executionTiming", timing)
                       }
                     />
-                    
-                    <div className="rounded bg-blue-50 p-3">
+
+                    <div className="rounded bg-green-50 p-3">
                       <div className="flex items-start space-x-2">
-                        <Info className="h-4 w-4 text-blue-600 mt-0.5" />
-                        <div className="text-xs text-blue-800">
-                          <p className="font-medium">관계 실행 정보:</p>
-                          <p className="mt-1">선택한 관계에 설정된 데이터 저장, 외부호출 등의 모든 액션이 자동으로 실행됩니다.</p>
+                        <Info className="mt-0.5 h-4 w-4 text-green-600" />
+                        <div className="text-xs text-green-800">
+                          <p className="font-medium">노드 플로우 실행 정보:</p>
+                          <p className="mt-1">선택한 플로우의 모든 노드가 순차적/병렬로 실행됩니다.</p>
+                          <p className="mt-1">• 독립 트랜잭션: 각 액션은 독립적으로 커밋/롤백</p>
+                          <p>• 연쇄 중단: 부모 노드 실패 시 자식 노드 스킵</p>
                         </div>
                       </div>
                     </div>
@@ -193,38 +164,41 @@ export const ImprovedButtonControlConfigPanel: React.FC<ImprovedButtonControlCon
 };
 
 /**
- * 🔥 관계 선택 컴포넌트
+ * 🔥 플로우 선택 컴포넌트
  */
-const RelationshipSelector: React.FC<{
-  relationships: RelationshipOption[];
-  selectedRelationshipId?: string;
-  onSelect: (relationshipId: string) => void;
+const FlowSelector: React.FC<{
+  flows: NodeFlow[];
+  selectedFlowId?: number;
+  onSelect: (flowId: string) => void;
   loading: boolean;
-}> = ({ relationships, selectedRelationshipId, onSelect, loading }) => {
+}> = ({ flows, selectedFlowId, onSelect, loading }) => {
   return (
     <div className="space-y-4">
       <div className="flex items-center space-x-2">
-        <GitBranch className="h-4 w-4 text-blue-600" />
-        <Label>실행할 관계 선택</Label>
+        <Workflow className="h-4 w-4 text-green-600" />
+        <Label>실행할 노드 플로우 선택</Label>
       </div>
-      
-      <Select value={selectedRelationshipId || ""} onValueChange={onSelect}>
+
+      <Select value={selectedFlowId?.toString() || ""} onValueChange={onSelect}>
         <SelectTrigger>
-          <SelectValue placeholder="관계를 선택하세요" />
+          <SelectValue placeholder="플로우를 선택하세요" />
         </SelectTrigger>
         <SelectContent>
           {loading ? (
-            <div className="p-4 text-center text-sm text-gray-500">관계 목록을 불러오는 중...</div>
-          ) : relationships.length === 0 ? (
-            <div className="p-4 text-center text-sm text-gray-500">사용 가능한 관계가 없습니다</div>
+            <div className="p-4 text-center text-sm text-gray-500">플로우 목록을 불러오는 중...</div>
+          ) : flows.length === 0 ? (
+            <div className="p-4 text-center text-sm text-gray-500">
+              <p>사용 가능한 플로우가 없습니다</p>
+              <p className="mt-2 text-xs">노드 편집기에서 플로우를 먼저 생성하세요</p>
+            </div>
           ) : (
-            relationships.map((rel) => (
-              <SelectItem key={rel.id} value={rel.id}>
+            flows.map((flow) => (
+              <SelectItem key={flow.flowId} value={flow.flowId.toString()}>
                 <div className="flex flex-col">
-                  <span className="font-medium">{rel.name}</span>
-                  <span className="text-xs text-muted-foreground">
-                    {rel.sourceTable} → {rel.targetTable}
-                  </span>
+                  <span className="font-medium">{flow.flowName}</span>
+                  {flow.flowDescription && (
+                    <span className="text-muted-foreground text-xs">{flow.flowDescription}</span>
+                  )}
                 </div>
               </SelectItem>
             ))
@@ -235,7 +209,6 @@ const RelationshipSelector: React.FC<{
   );
 };
 
-
 /**
  * 🔥 실행 타이밍 선택 컴포넌트
  */
@@ -249,7 +222,7 @@ const ExecutionTimingSelector: React.FC<{
         <Clock className="h-4 w-4 text-orange-600" />
         <Label>실행 타이밍</Label>
       </div>
-      
+
       <Select value={value} onValueChange={onChange}>
         <SelectTrigger>
           <SelectValue placeholder="실행 타이밍을 선택하세요" />
@@ -258,19 +231,19 @@ const ExecutionTimingSelector: React.FC<{
           <SelectItem value="before">
             <div className="flex flex-col">
               <span className="font-medium">Before (사전 실행)</span>
-              <span className="text-xs text-muted-foreground">버튼 액션 실행 전에 제어를 실행합니다</span>
+              <span className="text-muted-foreground text-xs">버튼 액션 실행 전에 플로우를 실행합니다</span>
             </div>
           </SelectItem>
           <SelectItem value="after">
             <div className="flex flex-col">
               <span className="font-medium">After (사후 실행)</span>
-              <span className="text-xs text-muted-foreground">버튼 액션 실행 후에 제어를 실행합니다</span>
+              <span className="text-muted-foreground text-xs">버튼 액션 실행 후에 플로우를 실행합니다</span>
             </div>
           </SelectItem>
           <SelectItem value="replace">
             <div className="flex flex-col">
               <span className="font-medium">Replace (대체 실행)</span>
-              <span className="text-xs text-muted-foreground">버튼 액션 대신 제어만 실행합니다</span>
+              <span className="text-muted-foreground text-xs">버튼 액션 대신 플로우만 실행합니다</span>
             </div>
           </SelectItem>
         </SelectContent>
@@ -278,4 +251,3 @@ const ExecutionTimingSelector: React.FC<{
     </div>
   );
 };
-
diff --git a/frontend/lib/api/nodeFlows.ts b/frontend/lib/api/nodeFlows.ts
new file mode 100644
index 00000000..b42340d7
--- /dev/null
+++ b/frontend/lib/api/nodeFlows.ts
@@ -0,0 +1,122 @@
+/**
+ * 노드 플로우 API
+ */
+
+import { apiClient } from "./client";
+
+export interface NodeFlow {
+  flowId: number;
+  flowName: string;
+  flowDescription: string;
+  flowData: string | any; // JSONB는 문자열 또는 객체로 반환될 수 있음
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+}
+
+/**
+ * 플로우 목록 조회
+ */
+export async function getNodeFlows(): Promise<NodeFlow[]> {
+  const response = await apiClient.get<ApiResponse<NodeFlow[]>>("/dataflow/node-flows");
+  if (response.data.success && response.data.data) {
+    return response.data.data;
+  }
+  throw new Error(response.data.message || "플로우 목록을 불러올 수 없습니다.");
+}
+
+/**
+ * 플로우 상세 조회
+ */
+export async function getNodeFlow(flowId: number): Promise<NodeFlow> {
+  const response = await apiClient.get<ApiResponse<NodeFlow>>(`/dataflow/node-flows/${flowId}`);
+  if (response.data.success && response.data.data) {
+    return response.data.data;
+  }
+  throw new Error(response.data.message || "플로우를 불러올 수 없습니다.");
+}
+
+/**
+ * 플로우 저장 (신규)
+ */
+export async function createNodeFlow(data: {
+  flowName: string;
+  flowDescription: string;
+  flowData: string;
+}): Promise<{ flowId: number }> {
+  const response = await apiClient.post<ApiResponse<{ flowId: number }>>("/dataflow/node-flows", data);
+  if (response.data.success && response.data.data) {
+    return response.data.data;
+  }
+  throw new Error(response.data.message || "플로우를 저장할 수 없습니다.");
+}
+
+/**
+ * 플로우 수정
+ */
+export async function updateNodeFlow(data: {
+  flowId: number;
+  flowName: string;
+  flowDescription: string;
+  flowData: string;
+}): Promise<{ flowId: number }> {
+  const response = await apiClient.put<ApiResponse<{ flowId: number }>>("/dataflow/node-flows", data);
+  if (response.data.success && response.data.data) {
+    return response.data.data;
+  }
+  throw new Error(response.data.message || "플로우를 수정할 수 없습니다.");
+}
+
+/**
+ * 플로우 삭제
+ */
+export async function deleteNodeFlow(flowId: number): Promise<void> {
+  const response = await apiClient.delete<ApiResponse<void>>(`/dataflow/node-flows/${flowId}`);
+  if (!response.data.success) {
+    throw new Error(response.data.message || "플로우를 삭제할 수 없습니다.");
+  }
+}
+
+/**
+ * 플로우 실행
+ */
+export async function executeNodeFlow(flowId: number, contextData: Record<string, any>): Promise<ExecutionResult> {
+  const response = await apiClient.post<ApiResponse<ExecutionResult>>(
+    `/dataflow/node-flows/${flowId}/execute`,
+    contextData,
+  );
+  if (response.data.success && response.data.data) {
+    return response.data.data;
+  }
+  throw new Error(response.data.message || "플로우를 실행할 수 없습니다.");
+}
+
+/**
+ * 플로우 실행 결과 인터페이스
+ */
+export interface ExecutionResult {
+  success: boolean;
+  message: string;
+  executionTime: number;
+  nodes: NodeExecutionSummary[];
+  summary: {
+    total: number;
+    success: number;
+    failed: number;
+    skipped: number;
+  };
+}
+
+export interface NodeExecutionSummary {
+  nodeId: string;
+  nodeName: string;
+  nodeType: string;
+  status: "success" | "failed" | "skipped" | "pending";
+  duration?: number;
+  error?: string;
+}
diff --git a/frontend/lib/stores/flowEditorStore.ts b/frontend/lib/stores/flowEditorStore.ts
new file mode 100644
index 00000000..4b61581b
--- /dev/null
+++ b/frontend/lib/stores/flowEditorStore.ts
@@ -0,0 +1,741 @@
+/**
+ * 노드 에디터 상태 관리 스토어
+ */
+
+import { create } from "zustand";
+import { Connection, Edge, EdgeChange, Node, NodeChange, addEdge, applyNodeChanges, applyEdgeChanges } from "reactflow";
+import type { FlowNode, FlowEdge, NodeType, ValidationResult } from "@/types/node-editor";
+import { createNodeFlow, updateNodeFlow } from "../api/nodeFlows";
+
+interface FlowEditorState {
+  // 노드 및 엣지
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+
+  // 선택 상태
+  selectedNodes: string[];
+  selectedEdges: string[];
+
+  // 플로우 메타데이터
+  flowId: number | null;
+  flowName: string;
+  flowDescription: string;
+
+  // UI 상태
+  isExecuting: boolean;
+  isSaving: boolean;
+  showValidationPanel: boolean;
+  showPropertiesPanel: boolean;
+
+  // 검증 결과
+  validationResult: ValidationResult | null;
+
+  // ========================================================================
+  // 노드 관리
+  // ========================================================================
+
+  setNodes: (nodes: FlowNode[]) => void;
+  onNodesChange: (changes: NodeChange[]) => void;
+  addNode: (node: FlowNode) => void;
+  updateNode: (id: string, data: Partial<FlowNode["data"]>) => void;
+  removeNode: (id: string) => void;
+  removeNodes: (ids: string[]) => void;
+
+  // ========================================================================
+  // 엣지 관리
+  // ========================================================================
+
+  setEdges: (edges: FlowEdge[]) => void;
+  onEdgesChange: (changes: EdgeChange[]) => void;
+  onConnect: (connection: Connection) => void;
+  removeEdge: (id: string) => void;
+  removeEdges: (ids: string[]) => void;
+
+  // ========================================================================
+  // 선택 관리
+  // ========================================================================
+
+  selectNode: (id: string, multi?: boolean) => void;
+  selectNodes: (ids: string[]) => void;
+  selectEdge: (id: string, multi?: boolean) => void;
+  clearSelection: () => void;
+
+  // ========================================================================
+  // 플로우 관리
+  // ========================================================================
+
+  loadFlow: (id: number, name: string, description: string, nodes: FlowNode[], edges: FlowEdge[]) => void;
+  clearFlow: () => void;
+  setFlowName: (name: string) => void;
+  setFlowDescription: (description: string) => void;
+  saveFlow: () => Promise<{ success: boolean; flowId?: number; message?: string }>;
+  exportFlow: () => string;
+
+  // ========================================================================
+  // 검증
+  // ========================================================================
+
+  validateFlow: () => ValidationResult;
+  setValidationResult: (result: ValidationResult | null) => void;
+
+  // ========================================================================
+  // UI 상태
+  // ========================================================================
+
+  setIsExecuting: (value: boolean) => void;
+  setIsSaving: (value: boolean) => void;
+  setShowValidationPanel: (value: boolean) => void;
+  setShowPropertiesPanel: (value: boolean) => void;
+
+  // ========================================================================
+  // 유틸리티
+  // ========================================================================
+
+  getNodeById: (id: string) => FlowNode | undefined;
+  getEdgeById: (id: string) => FlowEdge | undefined;
+  getConnectedNodes: (nodeId: string) => { incoming: FlowNode[]; outgoing: FlowNode[] };
+}
+
+export const useFlowEditorStore = create<FlowEditorState>((set, get) => ({
+  // 초기 상태
+  nodes: [],
+  edges: [],
+  selectedNodes: [],
+  selectedEdges: [],
+  flowId: null,
+  flowName: "새 제어 플로우",
+  flowDescription: "",
+  isExecuting: false,
+  isSaving: false,
+  showValidationPanel: false,
+  showPropertiesPanel: true,
+  validationResult: null,
+
+  // ========================================================================
+  // 노드 관리
+  // ========================================================================
+
+  setNodes: (nodes) => set({ nodes }),
+
+  onNodesChange: (changes) => {
+    set({
+      nodes: applyNodeChanges(changes, get().nodes) as FlowNode[],
+    });
+  },
+
+  addNode: (node) => {
+    set((state) => ({
+      nodes: [...state.nodes, node],
+    }));
+  },
+
+  updateNode: (id, data) => {
+    set((state) => ({
+      nodes: state.nodes.map((node) =>
+        node.id === id
+          ? {
+              ...node,
+              data: { ...node.data, ...data },
+            }
+          : node,
+      ),
+    }));
+  },
+
+  removeNode: (id) => {
+    set((state) => ({
+      nodes: state.nodes.filter((node) => node.id !== id),
+      edges: state.edges.filter((edge) => edge.source !== id && edge.target !== id),
+    }));
+  },
+
+  removeNodes: (ids) => {
+    set((state) => ({
+      nodes: state.nodes.filter((node) => !ids.includes(node.id)),
+      edges: state.edges.filter((edge) => !ids.includes(edge.source) && !ids.includes(edge.target)),
+    }));
+  },
+
+  // ========================================================================
+  // 엣지 관리
+  // ========================================================================
+
+  setEdges: (edges) => set({ edges }),
+
+  onEdgesChange: (changes) => {
+    set({
+      edges: applyEdgeChanges(changes, get().edges) as FlowEdge[],
+    });
+  },
+
+  onConnect: (connection) => {
+    // 연결 검증
+    const validation = validateConnection(connection, get().nodes);
+    if (!validation.valid) {
+      console.warn("연결 검증 실패:", validation.error);
+      return;
+    }
+
+    set((state) => ({
+      edges: addEdge(
+        {
+          ...connection,
+          type: "smoothstep",
+          animated: false,
+          data: {
+            validation: { valid: true },
+          },
+        },
+        state.edges,
+      ) as FlowEdge[],
+    }));
+  },
+
+  removeEdge: (id) => {
+    set((state) => ({
+      edges: state.edges.filter((edge) => edge.id !== id),
+    }));
+  },
+
+  removeEdges: (ids) => {
+    set((state) => ({
+      edges: state.edges.filter((edge) => !ids.includes(edge.id)),
+    }));
+  },
+
+  // ========================================================================
+  // 선택 관리
+  // ========================================================================
+
+  selectNode: (id, multi = false) => {
+    set((state) => ({
+      selectedNodes: multi ? [...state.selectedNodes, id] : [id],
+    }));
+  },
+
+  selectNodes: (ids) => {
+    set({
+      selectedNodes: ids,
+      showPropertiesPanel: ids.length > 0, // 노드가 선택되면 속성창 자동으로 열기
+    });
+  },
+
+  selectEdge: (id, multi = false) => {
+    set((state) => ({
+      selectedEdges: multi ? [...state.selectedEdges, id] : [id],
+    }));
+  },
+
+  clearSelection: () => {
+    set({ selectedNodes: [], selectedEdges: [] });
+  },
+
+  // ========================================================================
+  // 플로우 관리
+  // ========================================================================
+
+  loadFlow: (id, name, description, nodes, edges) => {
+    set({
+      flowId: id,
+      flowName: name,
+      flowDescription: description,
+      nodes,
+      edges,
+      selectedNodes: [],
+      selectedEdges: [],
+    });
+  },
+
+  clearFlow: () => {
+    set({
+      flowId: null,
+      flowName: "새 제어 플로우",
+      flowDescription: "",
+      nodes: [],
+      edges: [],
+      selectedNodes: [],
+      selectedEdges: [],
+      validationResult: null,
+    });
+  },
+
+  setFlowName: (name) => set({ flowName: name }),
+  setFlowDescription: (description) => set({ flowDescription: description }),
+
+  saveFlow: async () => {
+    const { flowId, flowName, flowDescription, nodes, edges } = get();
+
+    if (!flowName || flowName.trim() === "") {
+      return { success: false, message: "플로우 이름을 입력해주세요." };
+    }
+
+    // 검증
+    const validation = get().validateFlow();
+    if (!validation.valid) {
+      return { success: false, message: `검증 실패: ${validation.errors[0]?.message || "오류가 있습니다."}` };
+    }
+
+    set({ isSaving: true });
+
+    try {
+      // 플로우 데이터 직렬화
+      const flowData = {
+        nodes: nodes.map((node) => ({
+          id: node.id,
+          type: node.type,
+          position: node.position,
+          data: node.data,
+        })),
+        edges: edges.map((edge) => ({
+          id: edge.id,
+          source: edge.source,
+          target: edge.target,
+          sourceHandle: edge.sourceHandle,
+          targetHandle: edge.targetHandle,
+        })),
+      };
+
+      const result = flowId
+        ? await updateNodeFlow({
+            flowId,
+            flowName,
+            flowDescription,
+            flowData: JSON.stringify(flowData),
+          })
+        : await createNodeFlow({
+            flowName,
+            flowDescription,
+            flowData: JSON.stringify(flowData),
+          });
+
+      set({ flowId: result.flowId });
+      return { success: true, flowId: result.flowId, message: "저장 완료!" };
+    } catch (error) {
+      console.error("플로우 저장 오류:", error);
+      return { success: false, message: error instanceof Error ? error.message : "저장 중 오류 발생" };
+    } finally {
+      set({ isSaving: false });
+    }
+  },
+
+  exportFlow: () => {
+    const { flowName, flowDescription, nodes, edges } = get();
+    const flowData = {
+      flowName,
+      flowDescription,
+      nodes,
+      edges,
+      version: "1.0",
+      exportedAt: new Date().toISOString(),
+    };
+    return JSON.stringify(flowData, null, 2);
+  },
+
+  // ========================================================================
+  // 검증
+  // ========================================================================
+
+  validateFlow: () => {
+    const { nodes, edges } = get();
+    const result = performFlowValidation(nodes, edges);
+    set({ validationResult: result });
+    return result;
+  },
+
+  setValidationResult: (result) => set({ validationResult: result }),
+
+  // ========================================================================
+  // UI 상태
+  // ========================================================================
+
+  setIsExecuting: (value) => set({ isExecuting: value }),
+  setIsSaving: (value) => set({ isSaving: value }),
+  setShowValidationPanel: (value) => set({ showValidationPanel: value }),
+  setShowPropertiesPanel: (value) => set({ showPropertiesPanel: value }),
+
+  // ========================================================================
+  // 유틸리티
+  // ========================================================================
+
+  getNodeById: (id) => {
+    return get().nodes.find((node) => node.id === id);
+  },
+
+  getEdgeById: (id) => {
+    return get().edges.find((edge) => edge.id === id);
+  },
+
+  getConnectedNodes: (nodeId) => {
+    const { nodes, edges } = get();
+
+    const incoming = edges
+      .filter((edge) => edge.target === nodeId)
+      .map((edge) => nodes.find((node) => node.id === edge.source))
+      .filter((node): node is FlowNode => node !== undefined);
+
+    const outgoing = edges
+      .filter((edge) => edge.source === nodeId)
+      .map((edge) => nodes.find((node) => node.id === edge.target))
+      .filter((node): node is FlowNode => node !== undefined);
+
+    return { incoming, outgoing };
+  },
+}));
+
+// ============================================================================
+// 헬퍼 함수들
+// ============================================================================
+
+/**
+ * 연결 검증
+ */
+function validateConnection(connection: Connection, nodes: FlowNode[]): { valid: boolean; error?: string } {
+  const sourceNode = nodes.find((n) => n.id === connection.source);
+  const targetNode = nodes.find((n) => n.id === connection.target);
+
+  if (!sourceNode || !targetNode) {
+    return { valid: false, error: "노드를 찾을 수 없습니다" };
+  }
+
+  // 소스 노드가 출력을 가져야 함
+  if (isSourceOnlyNode(sourceNode.type)) {
+    // OK
+  } else if (isActionNode(targetNode.type)) {
+    // 액션 노드는 입력만 받을 수 있음
+  } else {
+    // 기타 경우는 허용
+  }
+
+  // 자기 자신에게 연결 방지
+  if (connection.source === connection.target) {
+    return { valid: false, error: "자기 자신에게 연결할 수 없습니다" };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * 플로우 검증
+ */
+function performFlowValidation(nodes: FlowNode[], edges: FlowEdge[]): ValidationResult {
+  const errors: ValidationResult["errors"] = [];
+
+  // 1. 노드가 하나도 없으면 경고
+  if (nodes.length === 0) {
+    errors.push({
+      message: "노드가 없습니다. 최소 하나의 노드를 추가하세요.",
+      severity: "warning",
+    });
+  }
+
+  // 2. 소스 노드 확인
+  const sourceNodes = nodes.filter((n) => isSourceNode(n.type));
+  if (sourceNodes.length === 0 && nodes.length > 0) {
+    errors.push({
+      message: "데이터 소스 노드가 필요합니다.",
+      severity: "error",
+    });
+  }
+
+  // 3. 액션 노드 확인
+  const actionNodes = nodes.filter((n) => isActionNode(n.type));
+  if (actionNodes.length === 0 && nodes.length > 0) {
+    errors.push({
+      message: "최소 하나의 액션 노드가 필요합니다.",
+      severity: "error",
+    });
+  }
+
+  // 4. 고아 노드 확인 (연결되지 않은 노드) - Comment와 Log는 제외
+  nodes.forEach((node) => {
+    // Comment와 Log는 독립적으로 존재 가능
+    if (node.type === "comment" || node.type === "log") {
+      return;
+    }
+
+    const hasIncoming = edges.some((e) => e.target === node.id);
+    const hasOutgoing = edges.some((e) => e.source === node.id);
+
+    if (!hasIncoming && !hasOutgoing && !isSourceNode(node.type)) {
+      errors.push({
+        nodeId: node.id,
+        message: `노드 "${node.data.displayName || node.id}"가 연결되어 있지 않습니다.`,
+        severity: "warning",
+      });
+    }
+  });
+
+  // 5. 액션 노드가 입력을 받는지 확인
+  actionNodes.forEach((node) => {
+    const hasInput = edges.some((e) => e.target === node.id);
+    if (!hasInput) {
+      errors.push({
+        nodeId: node.id,
+        message: `액션 노드 "${node.data.displayName || node.id}"에 입력 데이터가 없습니다.`,
+        severity: "error",
+      });
+    }
+  });
+
+  // 6. 순환 참조 검증
+  const cycles = detectCycles(nodes, edges);
+  cycles.forEach((cycle) => {
+    errors.push({
+      message: `순환 참조가 감지되었습니다: ${cycle.join(" → ")}`,
+      severity: "error",
+    });
+  });
+
+  // 7. 노드별 필수 속성 검증
+  nodes.forEach((node) => {
+    const nodeErrors = validateNodeProperties(node);
+    errors.push(...nodeErrors);
+  });
+
+  return {
+    valid: errors.filter((e) => e.severity === "error").length === 0,
+    errors,
+  };
+}
+
+/**
+ * 소스 노드 여부 확인
+ */
+function isSourceNode(type: NodeType): boolean {
+  return type === "tableSource" || type === "externalDBSource" || type === "restAPISource";
+}
+
+/**
+ * 소스 전용 노드 여부 확인
+ */
+function isSourceOnlyNode(type: NodeType): boolean {
+  return isSourceNode(type);
+}
+
+/**
+ * 액션 노드 여부 확인
+ */
+function isActionNode(type: NodeType): boolean {
+  return type === "insertAction" || type === "updateAction" || type === "deleteAction" || type === "upsertAction";
+}
+
+/**
+ * 순환 참조 검증 (DFS 사용)
+ */
+function detectCycles(nodes: FlowNode[], edges: FlowEdge[]): string[][] {
+  const cycles: string[][] = [];
+  const visited = new Set<string>();
+  const recursionStack = new Set<string>();
+
+  // 인접 리스트 생성
+  const adjacencyList = new Map<string, string[]>();
+  nodes.forEach((node) => adjacencyList.set(node.id, []));
+  edges.forEach((edge) => {
+    const targets = adjacencyList.get(edge.source) || [];
+    targets.push(edge.target);
+    adjacencyList.set(edge.source, targets);
+  });
+
+  function dfs(nodeId: string, path: string[]): boolean {
+    visited.add(nodeId);
+    recursionStack.add(nodeId);
+    path.push(nodeId);
+
+    const neighbors = adjacencyList.get(nodeId) || [];
+    for (const neighbor of neighbors) {
+      if (!visited.has(neighbor)) {
+        if (dfs(neighbor, [...path])) {
+          return true;
+        }
+      } else if (recursionStack.has(neighbor)) {
+        // 순환 발견
+        const cycleStart = path.indexOf(neighbor);
+        const cycle = path.slice(cycleStart).concat(neighbor);
+        const nodeNames = cycle.map((id) => {
+          const node = nodes.find((n) => n.id === id);
+          return node?.data.displayName || id;
+        });
+        cycles.push(nodeNames);
+        return true;
+      }
+    }
+
+    recursionStack.delete(nodeId);
+    return false;
+  }
+
+  // 모든 노드에서 DFS 시작
+  nodes.forEach((node) => {
+    if (!visited.has(node.id)) {
+      dfs(node.id, []);
+    }
+  });
+
+  return cycles;
+}
+
+/**
+ * 노드별 필수 속성 검증
+ */
+function validateNodeProperties(node: FlowNode): ValidationResult["errors"] {
+  const errors: ValidationResult["errors"] = [];
+
+  switch (node.type) {
+    case "tableSource":
+      if (!node.data.tableName || node.data.tableName.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `테이블 소스 노드 "${node.data.displayName || node.id}": 테이블명이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      break;
+
+    case "externalDBSource":
+      if (!node.data.connectionName || node.data.connectionName.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `외부 DB 소스 노드 "${node.data.displayName || node.id}": 연결 이름이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      if (!node.data.tableName || node.data.tableName.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `외부 DB 소스 노드 "${node.data.displayName || node.id}": 테이블명이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      break;
+
+    case "restAPISource":
+      if (!node.data.url || node.data.url.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `REST API 소스 노드 "${node.data.displayName || node.id}": URL이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      if (!node.data.method) {
+        errors.push({
+          nodeId: node.id,
+          message: `REST API 소스 노드 "${node.data.displayName || node.id}": HTTP 메서드가 필요합니다.`,
+          severity: "error",
+        });
+      }
+      break;
+
+    case "insertAction":
+    case "updateAction":
+    case "deleteAction":
+      if (!node.data.targetTable || node.data.targetTable.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `${getActionTypeName(node.type)} 노드 "${node.data.displayName || node.id}": 타겟 테이블이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      if (node.type === "insertAction" || node.type === "updateAction") {
+        if (!node.data.fieldMappings || node.data.fieldMappings.length === 0) {
+          errors.push({
+            nodeId: node.id,
+            message: `${getActionTypeName(node.type)} 노드 "${node.data.displayName || node.id}": 최소 하나의 필드 매핑이 필요합니다.`,
+            severity: "error",
+          });
+        }
+      }
+      if (node.type === "updateAction" || node.type === "deleteAction") {
+        if (!node.data.whereConditions || node.data.whereConditions.length === 0) {
+          errors.push({
+            nodeId: node.id,
+            message: `${getActionTypeName(node.type)} 노드 "${node.data.displayName || node.id}": WHERE 조건이 필요합니다.`,
+            severity: "error",
+          });
+        }
+      }
+      break;
+
+    case "upsertAction":
+      if (!node.data.targetTable || node.data.targetTable.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `UPSERT 액션 노드 "${node.data.displayName || node.id}": 타겟 테이블이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      if (!node.data.conflictKeys || node.data.conflictKeys.length === 0) {
+        errors.push({
+          nodeId: node.id,
+          message: `UPSERT 액션 노드 "${node.data.displayName || node.id}": 충돌 키(ON CONFLICT)가 필요합니다.`,
+          severity: "error",
+        });
+      }
+      if (!node.data.fieldMappings || node.data.fieldMappings.length === 0) {
+        errors.push({
+          nodeId: node.id,
+          message: `UPSERT 액션 노드 "${node.data.displayName || node.id}": 최소 하나의 필드 매핑이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      break;
+
+    case "condition":
+      if (!node.data.conditions || node.data.conditions.length === 0) {
+        errors.push({
+          nodeId: node.id,
+          message: `조건 노드 "${node.data.displayName || node.id}": 최소 하나의 조건이 필요합니다.`,
+          severity: "error",
+        });
+      }
+      break;
+
+    case "fieldMapping":
+      if (!node.data.mappings || node.data.mappings.length === 0) {
+        errors.push({
+          nodeId: node.id,
+          message: `필드 매핑 노드 "${node.data.displayName || node.id}": 최소 하나의 매핑이 필요합니다.`,
+          severity: "warning",
+        });
+      }
+      break;
+
+    case "dataTransform":
+      if (!node.data.transformations || node.data.transformations.length === 0) {
+        errors.push({
+          nodeId: node.id,
+          message: `데이터 변환 노드 "${node.data.displayName || node.id}": 최소 하나의 변환 규칙이 필요합니다.`,
+          severity: "warning",
+        });
+      }
+      break;
+
+    case "log":
+      if (!node.data.message || node.data.message.trim() === "") {
+        errors.push({
+          nodeId: node.id,
+          message: `로그 노드 "${node.data.displayName || node.id}": 로그 메시지가 필요합니다.`,
+          severity: "warning",
+        });
+      }
+      break;
+
+    case "comment":
+      // Comment 노드는 내용이 없어도 괜찮음
+      break;
+  }
+
+  return errors;
+}
+
+/**
+ * 액션 타입 이름 반환
+ */
+function getActionTypeName(type: string): string {
+  const names: Record<string, string> = {
+    insertAction: "INSERT",
+    updateAction: "UPDATE",
+    deleteAction: "DELETE",
+    upsertAction: "UPSERT",
+  };
+  return names[type] || type;
+}
diff --git a/frontend/lib/utils/buttonActions.ts b/frontend/lib/utils/buttonActions.ts
index 154df0fb..e978ce3b 100644
--- a/frontend/lib/utils/buttonActions.ts
+++ b/frontend/lib/utils/buttonActions.ts
@@ -795,13 +795,74 @@ export class ButtonActionExecutor {
       });
 
       // 🔥 새로운 버튼 액션 실행 시스템 사용
-      if (config.dataflowConfig?.controlMode === "relationship" && config.dataflowConfig?.relationshipConfig) {
+      if (config.dataflowConfig?.controlMode === "flow" && config.dataflowConfig?.flowConfig) {
+        console.log("🎯 노드 플로우 실행:", config.dataflowConfig.flowConfig);
+
+        const { flowId, executionTiming } = config.dataflowConfig.flowConfig;
+
+        if (!flowId) {
+          console.error("❌ 플로우 ID가 없습니다");
+          toast.error("플로우가 설정되지 않았습니다.");
+          return false;
+        }
+
+        try {
+          // 노드 플로우 실행 API 호출 (API 클라이언트 사용)
+          const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
+
+          // 데이터 소스 준비: 선택된 행 또는 폼 데이터
+          let sourceData: any = null;
+          let dataSourceType: string = "none";
+
+          if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+            // 테이블에서 선택된 행 데이터 사용
+            sourceData = context.selectedRowsData;
+            dataSourceType = "table-selection";
+            console.log("📊 테이블 선택 데이터 사용:", sourceData);
+          } else if (context.formData && Object.keys(context.formData).length > 0) {
+            // 폼 데이터 사용 (배열로 감싸서 일관성 유지)
+            sourceData = [context.formData];
+            dataSourceType = "form";
+            console.log("📝 폼 데이터 사용:", sourceData);
+          }
+
+          const result = await executeNodeFlow(flowId, {
+            dataSourceType,
+            sourceData,
+            context,
+          });
+
+          if (result.success) {
+            console.log("✅ 노드 플로우 실행 완료:", result);
+            toast.success(config.successMessage || "플로우 실행이 완료되었습니다.");
+
+            // 새로고침이 필요한 경우
+            if (context.onRefresh) {
+              context.onRefresh();
+            }
+
+            return true;
+          } else {
+            console.error("❌ 노드 플로우 실행 실패:", result);
+            toast.error(config.errorMessage || result.message || "플로우 실행 중 오류가 발생했습니다.");
+            return false;
+          }
+        } catch (error) {
+          console.error("❌ 노드 플로우 실행 오류:", error);
+          toast.error("플로우 실행 중 오류가 발생했습니다.");
+          return false;
+        }
+      } else if (config.dataflowConfig?.controlMode === "relationship" && config.dataflowConfig?.relationshipConfig) {
         console.log("🔗 관계 기반 제어 실행:", config.dataflowConfig.relationshipConfig);
 
         // 🔥 table-selection 모드일 때 선택된 행 데이터를 formData에 병합
         let mergedFormData = { ...context.formData } || {};
-        
-        if (controlDataSource === "table-selection" && context.selectedRowsData && context.selectedRowsData.length > 0) {
+
+        if (
+          controlDataSource === "table-selection" &&
+          context.selectedRowsData &&
+          context.selectedRowsData.length > 0
+        ) {
           // 선택된 첫 번째 행의 데이터를 formData에 병합
           const selectedRowData = context.selectedRowsData[0];
           mergedFormData = { ...mergedFormData, ...selectedRowData };
@@ -819,28 +880,24 @@ export class ButtonActionExecutor {
           enableDataflowControl: true, // 관계 기반 제어가 설정된 경우 활성화
         };
 
-        const executionResult = await ImprovedButtonActionExecutor.executeButtonAction(
-          buttonConfig,
-          mergedFormData,
-          {
-            buttonId: context.buttonId || "unknown",
-            screenId: context.screenId || "unknown",
-            userId: context.userId || "unknown",
-            companyCode: context.companyCode || "*",
-            startTime: Date.now(),
-            contextData: context,
-          }
-        );
+        const executionResult = await ImprovedButtonActionExecutor.executeButtonAction(buttonConfig, mergedFormData, {
+          buttonId: context.buttonId || "unknown",
+          screenId: context.screenId || "unknown",
+          userId: context.userId || "unknown",
+          companyCode: context.companyCode || "*",
+          startTime: Date.now(),
+          contextData: context,
+        });
 
         if (executionResult.success) {
           console.log("✅ 관계 실행 완료:", executionResult);
           toast.success(config.successMessage || "관계 실행이 완료되었습니다.");
-          
+
           // 새로고침이 필요한 경우
           if (context.onRefresh) {
             context.onRefresh();
           }
-          
+
           return true;
         } else {
           console.error("❌ 관계 실행 실패:", executionResult);
@@ -848,15 +905,14 @@ export class ButtonActionExecutor {
           return false;
         }
       } else {
-        // 제어 없음 - 메인 액션만 실행
-        console.log("⚡ 제어 없음 - 메인 액션 실행");
-        await this.executeMainAction(config, context);
-        
+        // 제어 없음 - 성공 처리
+        console.log("⚡ 제어 없음 - 버튼 액션만 실행");
+
         // 새로고침이 필요한 경우
         if (context.onRefresh) {
           context.onRefresh();
         }
-        
+
         return true;
       }
     } catch (error) {
@@ -869,7 +925,10 @@ export class ButtonActionExecutor {
   /**
    * 저장 후 제어 실행 (After Timing)
    */
-  private static async executeAfterSaveControl(config: ButtonActionConfig, context: ButtonActionContext): Promise<void> {
+  private static async executeAfterSaveControl(
+    config: ButtonActionConfig,
+    context: ButtonActionContext,
+  ): Promise<void> {
     console.log("🎯 저장 후 제어 실행:", {
       enableDataflowControl: config.enableDataflowControl,
       dataflowConfig: config.dataflowConfig,
@@ -915,7 +974,7 @@ export class ButtonActionExecutor {
           companyCode: context.companyCode || "*",
           startTime: Date.now(),
           contextData: context,
-        }
+        },
       );
 
       if (executionResult.success) {
diff --git a/frontend/lib/utils/nodeFlowButtonExecutor.ts b/frontend/lib/utils/nodeFlowButtonExecutor.ts
new file mode 100644
index 00000000..40b56875
--- /dev/null
+++ b/frontend/lib/utils/nodeFlowButtonExecutor.ts
@@ -0,0 +1,189 @@
+/**
+ * 노드 플로우 기반 버튼 실행기
+ */
+
+import { executeNodeFlow, ExecutionResult } from "../api/nodeFlows";
+import { logger } from "../utils/logger";
+import { toast } from "sonner";
+import type { ButtonDataflowConfig, ExtendedControlContext } from "@/types/control-management";
+
+export interface ButtonExecutionContext {
+  buttonId: string;
+  screenId?: number;
+  companyCode?: string;
+  userId?: string;
+  formData: Record<string, any>;
+  selectedRows?: any[];
+  selectedRowsData?: Record<string, any>[];
+  controlDataSource?: "form" | "table-selection" | "both";
+  onRefresh?: () => void;
+  onClose?: () => void;
+}
+
+export interface FlowExecutionResult {
+  success: boolean;
+  message: string;
+  executionTime?: number;
+  data?: ExecutionResult;
+}
+
+/**
+ * 노드 플로우 실행 함수
+ */
+export async function executeButtonWithFlow(
+  flowConfig: ButtonDataflowConfig["flowConfig"],
+  context: ButtonExecutionContext,
+  originalAction?: () => Promise<void>,
+): Promise<FlowExecutionResult> {
+  if (!flowConfig) {
+    throw new Error("플로우 설정이 없습니다.");
+  }
+
+  const { flowId, flowName, executionTiming = "before" } = flowConfig;
+
+  logger.info(`🚀 노드 플로우 실행 시작:`, {
+    flowId,
+    flowName,
+    timing: executionTiming,
+    contextKeys: Object.keys(context),
+  });
+
+  try {
+    // 컨텍스트 데이터 준비
+    const contextData = prepareContextData(context);
+
+    // 타이밍에 따라 실행
+    switch (executionTiming) {
+      case "before":
+        // 1. 플로우 먼저 실행
+        const beforeResult = await executeNodeFlow(flowId, contextData);
+
+        if (!beforeResult.success) {
+          toast.error(`플로우 실행 실패: ${beforeResult.message}`);
+          return {
+            success: false,
+            message: beforeResult.message,
+            data: beforeResult,
+          };
+        }
+
+        toast.success(`플로우 실행 완료: ${flowName}`);
+
+        // 2. 원래 버튼 액션 실행
+        if (originalAction) {
+          await originalAction();
+        }
+
+        return {
+          success: true,
+          message: "플로우 및 버튼 액션이 성공적으로 실행되었습니다.",
+          executionTime: beforeResult.executionTime,
+          data: beforeResult,
+        };
+
+      case "after":
+        // 1. 원래 버튼 액션 먼저 실행
+        if (originalAction) {
+          await originalAction();
+        }
+
+        // 2. 플로우 실행
+        const afterResult = await executeNodeFlow(flowId, contextData);
+
+        if (!afterResult.success) {
+          toast.warning(`버튼 액션은 성공했으나 플로우 실행 실패: ${afterResult.message}`);
+        } else {
+          toast.success(`플로우 실행 완료: ${flowName}`);
+        }
+
+        return {
+          success: afterResult.success,
+          message: afterResult.message,
+          executionTime: afterResult.executionTime,
+          data: afterResult,
+        };
+
+      case "replace":
+        // 플로우만 실행 (원래 액션 대체)
+        const replaceResult = await executeNodeFlow(flowId, contextData);
+
+        if (!replaceResult.success) {
+          toast.error(`플로우 실행 실패: ${replaceResult.message}`);
+        } else {
+          toast.success(`플로우 실행 완료: ${flowName}`, {
+            description: `${replaceResult.summary.success}/${replaceResult.summary.total} 노드 성공`,
+          });
+        }
+
+        return {
+          success: replaceResult.success,
+          message: replaceResult.message,
+          executionTime: replaceResult.executionTime,
+          data: replaceResult,
+        };
+
+      default:
+        throw new Error(`지원하지 않는 실행 타이밍: ${executionTiming}`);
+    }
+  } catch (error) {
+    logger.error("플로우 실행 오류:", error);
+    const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류가 발생했습니다.";
+    toast.error(`플로우 실행 오류: ${errorMessage}`);
+
+    return {
+      success: false,
+      message: errorMessage,
+    };
+  }
+}
+
+/**
+ * 컨텍스트 데이터 준비
+ */
+function prepareContextData(context: ButtonExecutionContext): Record<string, any> {
+  return {
+    buttonId: context.buttonId,
+    screenId: context.screenId,
+    companyCode: context.companyCode,
+    userId: context.userId,
+    formData: context.formData || {},
+    selectedRowsData: context.selectedRowsData || [],
+    controlDataSource: context.controlDataSource || "form",
+  };
+}
+
+/**
+ * 플로우 실행 결과 처리
+ */
+export function handleFlowExecutionResult(result: FlowExecutionResult, context: ButtonExecutionContext): void {
+  if (result.success) {
+    logger.info("✅ 플로우 실행 성공:", result);
+
+    // 성공 시 데이터 새로고침
+    if (context.onRefresh) {
+      context.onRefresh();
+    }
+
+    // 실행 결과 요약 표시
+    if (result.data) {
+      const { summary } = result.data;
+      console.log("📊 플로우 실행 요약:", {
+        전체: summary.total,
+        성공: summary.success,
+        실패: summary.failed,
+        스킵: summary.skipped,
+        실행시간: `${result.executionTime}ms`,
+      });
+    }
+  } else {
+    logger.error("❌ 플로우 실행 실패:", result);
+
+    // 실패한 노드 정보 표시
+    if (result.data) {
+      const failedNodes = result.data.nodes.filter((n) => n.status === "failed");
+      if (failedNodes.length > 0) {
+        console.error("❌ 실패한 노드들:", failedNodes);
+      }
+    }
+  }
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d1c88cde..b14113bb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -49,6 +49,7 @@
         "react-hook-form": "^7.62.0",
         "react-hot-toast": "^2.6.0",
         "react-window": "^2.1.0",
+        "reactflow": "^11.10.4",
         "recharts": "^3.2.1",
         "sheetjs-style": "^0.15.8",
         "sonner": "^2.0.7",
@@ -2280,6 +2281,108 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@reactflow/background": {
+      "version": "11.3.9",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
+      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.10.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/controls": {
+      "version": "11.2.9",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
+      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.10.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/core": {
+      "version": "11.10.4",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
+      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3": "^7.4.0",
+        "@types/d3-drag": "^3.0.1",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/minimap": {
+      "version": "11.7.9",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
+      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.10.4",
+        "@types/d3-selection": "^3.0.3",
+        "@types/d3-zoom": "^3.0.1",
+        "classcat": "^5.0.3",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-resizer": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
+      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.10.4",
+        "classcat": "^5.0.4",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@reactflow/node-toolbar": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
+      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/core": "11.10.4",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.1"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.0.tgz",
@@ -2716,18 +2819,102 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
     "node_modules/@types/d3-array": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
       "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-color": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
       "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-drag": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
@@ -2737,12 +2924,54 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-ease": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
       "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-interpolate": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
@@ -2758,6 +2987,24 @@
       "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-scale": {
       "version": "4.0.9",
       "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
@@ -2767,6 +3014,12 @@
         "@types/d3-time": "*"
       }
     },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.11",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
@@ -2788,6 +3041,12 @@
       "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "license": "MIT"
+    },
     "node_modules/@types/d3-timer": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
@@ -2820,6 +3079,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -7943,6 +8208,24 @@
         "react-dom": "^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/reactflow": {
+      "version": "11.10.4",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
+      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+      "license": "MIT",
+      "dependencies": {
+        "@reactflow/background": "11.3.9",
+        "@reactflow/controls": "11.2.9",
+        "@reactflow/core": "11.10.4",
+        "@reactflow/minimap": "11.7.9",
+        "@reactflow/node-resizer": "2.2.9",
+        "@reactflow/node-toolbar": "1.3.9"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e5cd9c8e..87a181ef 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -57,6 +57,7 @@
     "react-hook-form": "^7.62.0",
     "react-hot-toast": "^2.6.0",
     "react-window": "^2.1.0",
+    "reactflow": "^11.10.4",
     "recharts": "^3.2.1",
     "sheetjs-style": "^0.15.8",
     "sonner": "^2.0.7",
diff --git a/frontend/types/control-management.ts b/frontend/types/control-management.ts
index bc8d715a..36760778 100644
--- a/frontend/types/control-management.ts
+++ b/frontend/types/control-management.ts
@@ -59,8 +59,8 @@ export interface ExtendedButtonTypeConfig {
  * 🔥 단순화된 버튼 데이터플로우 설정
  */
 export interface ButtonDataflowConfig {
-  // 제어 방식 선택 (관계 실행만)
-  controlMode: "relationship" | "none";
+  // 제어 방식 선택 (관계 실행 + 🆕 노드 플로우)
+  controlMode: "relationship" | "flow" | "none";
 
   // 관계 기반 제어
   relationshipConfig?: {
@@ -70,6 +70,14 @@ export interface ButtonDataflowConfig {
     contextData?: Record<string, any>; // 실행 시 전달할 컨텍스트
   };
 
+  // 🆕 노드 플로우 기반 제어
+  flowConfig?: {
+    flowId: number; // 노드 플로우 ID
+    flowName: string; // 플로우명 표시
+    executionTiming: "before" | "after" | "replace";
+    contextData?: Record<string, any>; // 실행 시 전달할 컨텍스트
+  };
+
   // 제어 데이터 소스 (기존 호환성 유지)
   controlDataSource?: ControlDataSource;
 
@@ -80,7 +88,7 @@ export interface ButtonDataflowConfig {
   selectedDiagramId?: number;
   selectedRelationshipId?: number;
   directControl?: DirectControlConfig;
-  
+
   // 🔧 제거된 필드들 (하위 호환성을 위해 optional로 유지)
   externalCallConfig?: any; // deprecated
   customConfig?: any; // deprecated
diff --git a/frontend/types/node-editor.ts b/frontend/types/node-editor.ts
new file mode 100644
index 00000000..bde4e222
--- /dev/null
+++ b/frontend/types/node-editor.ts
@@ -0,0 +1,414 @@
+/**
+ * 노드 기반 데이터 제어 시스템 타입 정의
+ */
+
+import { Node as ReactFlowNode, Edge as ReactFlowEdge } from "reactflow";
+
+// ============================================================================
+// 기본 노드 타입
+// ============================================================================
+
+export type NodeType =
+  | "tableSource" // 테이블 소스
+  | "externalDBSource" // 외부 DB 소스
+  | "restAPISource" // REST API 소스
+  | "condition" // 조건 분기
+  | "fieldMapping" // 필드 매핑
+  | "dataTransform" // 데이터 변환
+  | "insertAction" // INSERT 액션
+  | "updateAction" // UPDATE 액션
+  | "deleteAction" // DELETE 액션
+  | "upsertAction" // UPSERT 액션
+  | "comment" // 주석
+  | "log"; // 로그
+
+// ============================================================================
+// 필드 정의
+// ============================================================================
+
+export interface FieldDefinition {
+  name: string;
+  type: string;
+  nullable: boolean;
+  primaryKey?: boolean;
+  label?: string;
+  displayName?: string;
+}
+
+// ============================================================================
+// 노드 데이터 타입별 정의
+// ============================================================================
+
+// 테이블 소스 노드
+export interface TableSourceNodeData {
+  connectionId: number;
+  tableName: string;
+  schema?: string;
+  fields: FieldDefinition[];
+  filters?: Array<{
+    field: string;
+    operator: string;
+    value: any;
+  }>;
+  displayName?: string;
+}
+
+// 외부 DB 소스 노드
+export interface ExternalDBSourceNodeData {
+  connectionId: number;
+  connectionName: string;
+  dbType: string;
+  tableName: string;
+  fields: FieldDefinition[];
+  displayName?: string;
+}
+
+// REST API 소스 노드
+export interface RestAPISourceNodeData {
+  method: "GET" | "POST" | "PUT" | "DELETE";
+  url: string;
+  headers?: Record<string, string>;
+  body?: string;
+  responseFields: FieldDefinition[];
+  displayName?: string;
+}
+
+// 조건 분기 노드
+export interface ConditionNodeData {
+  conditions: Array<{
+    field: string;
+    operator:
+      | "EQUALS"
+      | "NOT_EQUALS"
+      | "GREATER_THAN"
+      | "LESS_THAN"
+      | "GREATER_THAN_OR_EQUAL"
+      | "LESS_THAN_OR_EQUAL"
+      | "LIKE"
+      | "NOT_LIKE"
+      | "IN"
+      | "NOT_IN"
+      | "IS_NULL"
+      | "IS_NOT_NULL";
+    value: any;
+  }>;
+  logic: "AND" | "OR";
+  displayName?: string;
+}
+
+// 필드 매핑 노드
+export interface FieldMappingNodeData {
+  mappings: Array<{
+    id: string;
+    sourceField: string | null;
+    targetField: string;
+    transform?: string;
+    staticValue?: any;
+  }>;
+  displayName?: string;
+}
+
+// 데이터 변환 노드
+export interface DataTransformNodeData {
+  transformations: Array<{
+    type:
+      | "UPPERCASE"
+      | "LOWERCASE"
+      | "TRIM"
+      | "CONCAT"
+      | "SPLIT"
+      | "REPLACE"
+      | "CALCULATE"
+      | "EXPLODE"
+      | "CAST"
+      | "FORMAT"
+      | "JSON_EXTRACT"
+      | "CUSTOM";
+    sourceField?: string; // 소스 필드
+    sourceFieldLabel?: string; // 소스 필드 라벨
+    targetField?: string; // 타겟 필드 (선택, 비어있으면 소스 필드에 적용)
+    targetFieldLabel?: string; // 타겟 필드 라벨
+    expression?: string; // 표현식
+    parameters?: Record<string, any>; // 추가 파라미터
+    // EXPLODE 전용
+    delimiter?: string; // 구분자 (예: ",")
+    // CONCAT 전용
+    sourceFields?: string[]; // 다중 소스 필드
+    sourceFieldLabels?: string[]; // 다중 소스 필드 라벨
+    separator?: string; // 구분자 (예: " ")
+    // SPLIT 전용
+    splitIndex?: number; // 분리 후 가져올 인덱스
+    // REPLACE 전용
+    searchValue?: string; // 찾을 문자열
+    replaceValue?: string; // 바꿀 문자열
+    // CAST 전용
+    castType?: "string" | "number" | "boolean" | "date"; // 변환할 타입
+  }>;
+  displayName?: string;
+}
+
+// INSERT 액션 노드
+export interface InsertActionNodeData {
+  targetConnection: number;
+  targetTable: string;
+  fieldMappings: Array<{
+    sourceField: string | null;
+    sourceFieldLabel?: string; // 소스 필드 라벨
+    targetField: string;
+    targetFieldLabel?: string; // 타겟 필드 라벨
+    staticValue?: any;
+  }>;
+  options: {
+    batchSize?: number;
+    ignoreErrors?: boolean;
+    ignoreDuplicates?: boolean;
+  };
+  displayName?: string;
+}
+
+// UPDATE 액션 노드
+export interface UpdateActionNodeData {
+  targetConnection: number;
+  targetTable: string;
+  fieldMappings: Array<{
+    sourceField: string | null;
+    sourceFieldLabel?: string; // 소스 필드 라벨
+    targetField: string;
+    targetFieldLabel?: string; // 타겟 필드 라벨
+    staticValue?: any;
+  }>;
+  whereConditions: Array<{
+    field: string;
+    fieldLabel?: string; // 필드 라벨
+    operator: string;
+    sourceField?: string;
+    sourceFieldLabel?: string; // 소스 필드 라벨
+    staticValue?: any;
+  }>;
+  options: {
+    batchSize?: number;
+    ignoreErrors?: boolean;
+  };
+  displayName?: string;
+}
+
+// DELETE 액션 노드
+export interface DeleteActionNodeData {
+  targetConnection: number;
+  targetTable: string;
+  whereConditions: Array<{
+    field: string;
+    operator: string;
+    sourceField?: string;
+    staticValue?: any;
+  }>;
+  options: {
+    requireConfirmation?: boolean;
+  };
+  displayName?: string;
+}
+
+// UPSERT 액션 노드
+export interface UpsertActionNodeData {
+  targetConnection: number;
+  targetTable: string;
+  conflictKeys: string[]; // ON CONFLICT 키
+  conflictKeyLabels?: string[]; // 충돌 키 라벨
+  fieldMappings: Array<{
+    sourceField: string | null;
+    sourceFieldLabel?: string; // 소스 필드 라벨
+    targetField: string;
+    targetFieldLabel?: string; // 타겟 필드 라벨
+    staticValue?: any;
+  }>;
+  options?: {
+    batchSize?: number;
+    updateOnConflict?: boolean;
+  };
+  displayName?: string;
+}
+
+// REST API 소스 노드
+export interface RestAPISourceNodeData {
+  url: string;
+  method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH";
+  headers?: Record<string, string>;
+  body?: any;
+  authentication?: {
+    type: "none" | "bearer" | "basic" | "apikey";
+    token?: string;
+  };
+  timeout?: number;
+  responseMapping?: string; // JSON 경로 (예: "data.items")
+  displayName?: string;
+}
+
+// 주석 노드
+export interface CommentNodeData {
+  content: string;
+}
+
+// 로그 노드
+export interface LogNodeData {
+  level: "debug" | "info" | "warn" | "error";
+  message: string;
+  includeData?: boolean;
+}
+
+// ============================================================================
+// 통합 노드 데이터 타입
+// ============================================================================
+
+export type NodeData =
+  | TableSourceNodeData
+  | ExternalDBSourceNodeData
+  | RestAPISourceNodeData
+  | ConditionNodeData
+  | FieldMappingNodeData
+  | DataTransformNodeData
+  | InsertActionNodeData
+  | UpdateActionNodeData
+  | DeleteActionNodeData
+  | UpsertActionNodeData
+  | CommentNodeData
+  | LogNodeData;
+
+// ============================================================================
+// React Flow 노드 확장
+// ============================================================================
+
+export interface FlowNode extends ReactFlowNode {
+  type: NodeType;
+  data: NodeData & {
+    // 공통 메타데이터
+    validation?: {
+      valid: boolean;
+      errors?: string[];
+      warnings?: string[];
+    };
+    // 실행 상태 (디버그 모드용)
+    executionState?: {
+      status: "pending" | "running" | "success" | "error" | "idle";
+      progress?: number;
+      processedCount?: number;
+      errorMessage?: string;
+    };
+  };
+}
+
+// ============================================================================
+// 엣지 타입
+// ============================================================================
+
+export type EdgeType =
+  | "dataFlow" // 일반 데이터 흐름
+  | "fieldConnection" // 필드 연결
+  | "conditionalTrue" // 조건 TRUE
+  | "conditionalFalse"; // 조건 FALSE
+
+export interface FlowEdge extends ReactFlowEdge {
+  type?: EdgeType;
+  data?: {
+    dataType?: string;
+    validation?: {
+      valid: boolean;
+      errors?: string[];
+    };
+    // 조건 분기용
+    condition?: "TRUE" | "FALSE";
+    // 필드 연결용
+    sourceFieldName?: string;
+    targetFieldName?: string;
+  };
+}
+
+// ============================================================================
+// 전체 플로우 데이터
+// ============================================================================
+
+export interface DataFlow {
+  id?: number;
+  name: string;
+  description: string;
+  companyCode: string;
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+  viewport?: {
+    x: number;
+    y: number;
+    zoom: number;
+  };
+  metadata?: {
+    createdAt?: string;
+    updatedAt?: string;
+    createdBy?: string;
+    version?: number;
+    tags?: string[];
+  };
+}
+
+// ============================================================================
+// 검증 결과
+// ============================================================================
+
+export interface ValidationResult {
+  valid: boolean;
+  errors: Array<{
+    nodeId?: string;
+    edgeId?: string;
+    message: string;
+    severity: "error" | "warning" | "info";
+  }>;
+}
+
+// ============================================================================
+// 실행 결과
+// ============================================================================
+
+export interface ExecutionResult {
+  success: boolean;
+  processedCount: number;
+  errorCount: number;
+  duration: number;
+  nodeResults: Array<{
+    nodeId: string;
+    status: "success" | "error" | "skipped";
+    processedCount?: number;
+    errorMessage?: string;
+  }>;
+}
+
+// ============================================================================
+// 노드 팔레트 아이템
+// ============================================================================
+
+export interface NodePaletteItem {
+  type: NodeType;
+  label: string;
+  icon: string;
+  description: string;
+  category: "source" | "transform" | "action" | "utility";
+  color: string;
+}
+
+// ============================================================================
+// 템플릿
+// ============================================================================
+
+export interface FlowTemplate {
+  id: string;
+  name: string;
+  description: string;
+  category: "builtin" | "custom";
+  thumbnail?: string;
+  nodes: FlowNode[];
+  edges: FlowEdge[];
+  parameters?: Array<{
+    name: string;
+    label: string;
+    type: "string" | "number" | "select";
+    defaultValue?: any;
+    options?: Array<{ label: string; value: any }>;
+  }>;
+  tags?: string[];
+}
diff --git a/package-lock.json b/package-lock.json
index b18c68fe..82f0844a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "dependencies": {
         "@prisma/client": "^6.16.2",
         "@types/mssql": "^9.1.8",
+        "@xyflow/react": "^12.8.6",
         "axios": "^1.12.2",
         "mssql": "^11.0.1",
         "prisma": "^6.16.2"
@@ -371,6 +372,55 @@
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
     "node_modules/@types/mssql": {
       "version": "9.1.8",
       "resolved": "https://registry.npmjs.org/@types/mssql/-/mssql-9.1.8.tgz",
@@ -436,6 +486,38 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.8.6",
+      "resolved": "https://registry.npmjs.org/@xyflow/react/-/react-12.8.6.tgz",
+      "integrity": "sha512-SksAm2m4ySupjChphMmzvm55djtgMDPr+eovPDdTnyGvShf73cvydfoBfWDFllooIQ4IaiUL5yfxHRwU0c37EA==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.70",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.70",
+      "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.70.tgz",
+      "integrity": "sha512-PpC//u9zxdjj0tfTSmZrg3+sRbTz6kop/Amky44U2Dl51sxzDTIUfXMwETOYpmr2dqICWXBIJwXL2a9QWtX2XA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -616,6 +698,12 @@
         "consola": "^3.2.3"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -652,6 +740,111 @@
         "node": "^14.18.0 || >=16.10.0"
       }
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -1523,6 +1716,29 @@
         "destr": "^2.0.3"
       }
     },
+    "node_modules/react": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
+      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
+      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
@@ -1596,6 +1812,13 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "license": "MIT"
     },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/semver": {
       "version": "7.7.2",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -1671,6 +1894,15 @@
       "integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==",
       "license": "MIT"
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
@@ -1704,6 +1936,34 @@
       "engines": {
         "node": ">=0.4"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 19396f82..a378bcc9 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "dependencies": {
     "@prisma/client": "^6.16.2",
     "@types/mssql": "^9.1.8",
+    "@xyflow/react": "^12.8.6",
     "axios": "^1.12.2",
     "mssql": "^11.0.1",
     "prisma": "^6.16.2"