플로우 구현

backend-node/src/app.ts

@@ -57,6 +57,7 @@ import bookingRoutes from "./routes/bookingRoutes"; // 예약 요청 관리
 import mapDataRoutes from "./routes/mapDataRoutes"; // 지도 데이터 관리
 import yardLayoutRoutes from "./routes/yardLayoutRoutes"; // 야드 관리 3D
 import materialRoutes from "./routes/materialRoutes"; // 자재 관리
+import flowRoutes from "./routes/flowRoutes"; // 플로우 관리
 import { BatchSchedulerService } from "./services/batchSchedulerService";
 // import collectionRoutes from "./routes/collectionRoutes"; // 임시 주석
 // import batchRoutes from "./routes/batchRoutes"; // 임시 주석
@@ -208,6 +209,7 @@ app.use("/api/bookings", bookingRoutes); // 예약 요청 관리
 app.use("/api/map-data", mapDataRoutes); // 지도 데이터 조회
 app.use("/api/yard-layouts", yardLayoutRoutes); // 야드 관리 3D
 app.use("/api/materials", materialRoutes); // 자재 관리
+app.use("/api/flow", flowRoutes); // 플로우 관리
 // app.use("/api/collections", collectionRoutes); // 임시 주석
 // app.use("/api/batch", batchRoutes); // 임시 주석
 // app.use('/api/users', userRoutes);

backend-node/src/controllers/flowController.ts

@@ -0,0 +1,658 @@
+/**
+ * 플로우 관리 컨트롤러
+ */
+
+import { Request, Response } from "express";
+import { FlowDefinitionService } from "../services/flowDefinitionService";
+import { FlowStepService } from "../services/flowStepService";
+import { FlowConnectionService } from "../services/flowConnectionService";
+import { FlowExecutionService } from "../services/flowExecutionService";
+import { FlowDataMoveService } from "../services/flowDataMoveService";
+
+export class FlowController {
+  private flowDefinitionService: FlowDefinitionService;
+  private flowStepService: FlowStepService;
+  private flowConnectionService: FlowConnectionService;
+  private flowExecutionService: FlowExecutionService;
+  private flowDataMoveService: FlowDataMoveService;
+
+  constructor() {
+    this.flowDefinitionService = new FlowDefinitionService();
+    this.flowStepService = new FlowStepService();
+    this.flowConnectionService = new FlowConnectionService();
+    this.flowExecutionService = new FlowExecutionService();
+    this.flowDataMoveService = new FlowDataMoveService();
+  }
+
+  // ==================== 플로우 정의 ====================
+
+  /**
+   * 플로우 정의 생성
+   */
+  createFlowDefinition = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { name, description, tableName } = req.body;
+      const userId = (req as any).user?.userId || "system";
+
+      if (!name || !tableName) {
+        res.status(400).json({
+          success: false,
+          message: "Name and tableName are required",
+        });
+        return;
+      }
+
+      // 테이블 존재 확인
+      const tableExists =
+        await this.flowDefinitionService.checkTableExists(tableName);
+      if (!tableExists) {
+        res.status(400).json({
+          success: false,
+          message: `Table '${tableName}' does not exist`,
+        });
+        return;
+      }
+
+      const flowDef = await this.flowDefinitionService.create(
+        { name, description, tableName },
+        userId
+      );
+
+      res.json({
+        success: true,
+        data: flowDef,
+      });
+    } catch (error: any) {
+      console.error("Error creating flow definition:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to create flow definition",
+      });
+    }
+  };
+
+  /**
+   * 플로우 정의 목록 조회
+   */
+  getFlowDefinitions = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { tableName, isActive } = req.query;
+
+      const flows = await this.flowDefinitionService.findAll(
+        tableName as string | undefined,
+        isActive !== undefined ? isActive === "true" : undefined
+      );
+
+      res.json({
+        success: true,
+        data: flows,
+      });
+    } catch (error: any) {
+      console.error("Error fetching flow definitions:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to fetch flow definitions",
+      });
+    }
+  };
+
+  /**
+   * 플로우 정의 상세 조회 (단계 및 연결 포함)
+   */
+  getFlowDefinitionDetail = async (
+    req: Request,
+    res: Response
+  ): Promise<void> => {
+    try {
+      const { id } = req.params;
+      const flowId = parseInt(id);
+
+      const definition = await this.flowDefinitionService.findById(flowId);
+      if (!definition) {
+        res.status(404).json({
+          success: false,
+          message: "Flow definition not found",
+        });
+        return;
+      }
+
+      const steps = await this.flowStepService.findByFlowId(flowId);
+      const connections = await this.flowConnectionService.findByFlowId(flowId);
+
+      res.json({
+        success: true,
+        data: {
+          definition,
+          steps,
+          connections,
+        },
+      });
+    } catch (error: any) {
+      console.error("Error fetching flow definition detail:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to fetch flow definition detail",
+      });
+    }
+  };
+
+  /**
+   * 플로우 정의 수정
+   */
+  updateFlowDefinition = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { id } = req.params;
+      const flowId = parseInt(id);
+      const { name, description, isActive } = req.body;
+
+      const flowDef = await this.flowDefinitionService.update(flowId, {
+        name,
+        description,
+        isActive,
+      });
+
+      if (!flowDef) {
+        res.status(404).json({
+          success: false,
+          message: "Flow definition not found",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: flowDef,
+      });
+    } catch (error: any) {
+      console.error("Error updating flow definition:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to update flow definition",
+      });
+    }
+  };
+
+  /**
+   * 플로우 정의 삭제
+   */
+  deleteFlowDefinition = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { id } = req.params;
+      const flowId = parseInt(id);
+
+      const success = await this.flowDefinitionService.delete(flowId);
+
+      if (!success) {
+        res.status(404).json({
+          success: false,
+          message: "Flow definition not found",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        message: "Flow definition deleted successfully",
+      });
+    } catch (error: any) {
+      console.error("Error deleting flow definition:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to delete flow definition",
+      });
+    }
+  };
+
+  // ==================== 플로우 단계 ====================
+
+  /**
+   * 플로우 단계 목록 조회
+   */
+  getFlowSteps = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId } = req.params;
+      const flowDefinitionId = parseInt(flowId);
+
+      const steps = await this.flowStepService.findByFlowId(flowDefinitionId);
+
+      res.json({
+        success: true,
+        data: steps,
+      });
+      return;
+    } catch (error: any) {
+      console.error("Error fetching flow steps:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to fetch flow steps",
+      });
+      return;
+    }
+  };
+
+  /**
+   * 플로우 단계 생성
+   */
+  createFlowStep = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId } = req.params;
+      const flowDefinitionId = parseInt(flowId);
+      const {
+        stepName,
+        stepOrder,
+        tableName,
+        conditionJson,
+        color,
+        positionX,
+        positionY,
+      } = req.body;
+
+      if (!stepName || stepOrder === undefined) {
+        res.status(400).json({
+          success: false,
+          message: "stepName and stepOrder are required",
+        });
+        return;
+      }
+
+      const step = await this.flowStepService.create({
+        flowDefinitionId,
+        stepName,
+        stepOrder,
+        tableName,
+        conditionJson,
+        color,
+        positionX,
+        positionY,
+      });
+
+      res.json({
+        success: true,
+        data: step,
+      });
+    } catch (error: any) {
+      console.error("Error creating flow step:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to create flow step",
+      });
+    }
+  };
+
+  /**
+   * 플로우 단계 수정
+   */
+  updateFlowStep = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { stepId } = req.params;
+      const id = parseInt(stepId);
+      const {
+        stepName,
+        stepOrder,
+        tableName,
+        conditionJson,
+        color,
+        positionX,
+        positionY,
+      } = req.body;
+
+      const step = await this.flowStepService.update(id, {
+        stepName,
+        stepOrder,
+        tableName,
+        conditionJson,
+        color,
+        positionX,
+        positionY,
+      });
+
+      if (!step) {
+        res.status(404).json({
+          success: false,
+          message: "Flow step not found",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        data: step,
+      });
+    } catch (error: any) {
+      console.error("Error updating flow step:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to update flow step",
+      });
+    }
+  };
+
+  /**
+   * 플로우 단계 삭제
+   */
+  deleteFlowStep = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { stepId } = req.params;
+      const id = parseInt(stepId);
+
+      const success = await this.flowStepService.delete(id);
+
+      if (!success) {
+        res.status(404).json({
+          success: false,
+          message: "Flow step not found",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        message: "Flow step deleted successfully",
+      });
+    } catch (error: any) {
+      console.error("Error deleting flow step:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to delete flow step",
+      });
+    }
+  };
+
+  // ==================== 플로우 연결 ====================
+
+  /**
+   * 플로우 연결 목록 조회
+   */
+  getFlowConnections = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId } = req.params;
+      const flowDefinitionId = parseInt(flowId);
+
+      const connections =
+        await this.flowConnectionService.findByFlowId(flowDefinitionId);
+
+      res.json({
+        success: true,
+        data: connections,
+      });
+      return;
+    } catch (error: any) {
+      console.error("Error fetching flow connections:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to fetch flow connections",
+      });
+      return;
+    }
+  };
+
+  /**
+   * 플로우 연결 생성
+   */
+  createConnection = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowDefinitionId, fromStepId, toStepId, label } = req.body;
+
+      if (!flowDefinitionId || !fromStepId || !toStepId) {
+        res.status(400).json({
+          success: false,
+          message: "flowDefinitionId, fromStepId, and toStepId are required",
+        });
+        return;
+      }
+
+      const connection = await this.flowConnectionService.create({
+        flowDefinitionId,
+        fromStepId,
+        toStepId,
+        label,
+      });
+
+      res.json({
+        success: true,
+        data: connection,
+      });
+    } catch (error: any) {
+      console.error("Error creating connection:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to create connection",
+      });
+    }
+  };
+
+  /**
+   * 플로우 연결 삭제
+   */
+  deleteConnection = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { connectionId } = req.params;
+      const id = parseInt(connectionId);
+
+      const success = await this.flowConnectionService.delete(id);
+
+      if (!success) {
+        res.status(404).json({
+          success: false,
+          message: "Connection not found",
+        });
+        return;
+      }
+
+      res.json({
+        success: true,
+        message: "Connection deleted successfully",
+      });
+    } catch (error: any) {
+      console.error("Error deleting connection:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to delete connection",
+      });
+    }
+  };
+
+  // ==================== 플로우 실행 ====================
+
+  /**
+   * 단계별 데이터 카운트 조회
+   */
+  getStepDataCount = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId, stepId } = req.params;
+
+      const count = await this.flowExecutionService.getStepDataCount(
+        parseInt(flowId),
+        parseInt(stepId)
+      );
+
+      res.json({
+        success: true,
+        data: { count },
+      });
+    } catch (error: any) {
+      console.error("Error getting step data count:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to get step data count",
+      });
+    }
+  };
+
+  /**
+   * 단계별 데이터 리스트 조회
+   */
+  getStepDataList = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId, stepId } = req.params;
+      const { page = 1, pageSize = 20 } = req.query;
+
+      const data = await this.flowExecutionService.getStepDataList(
+        parseInt(flowId),
+        parseInt(stepId),
+        parseInt(page as string),
+        parseInt(pageSize as string)
+      );
+
+      res.json({
+        success: true,
+        data,
+      });
+    } catch (error: any) {
+      console.error("Error getting step data list:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to get step data list",
+      });
+    }
+  };
+
+  /**
+   * 플로우의 모든 단계별 카운트 조회
+   */
+  getAllStepCounts = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId } = req.params;
+
+      const counts = await this.flowExecutionService.getAllStepCounts(
+        parseInt(flowId)
+      );
+
+      res.json({
+        success: true,
+        data: counts,
+      });
+    } catch (error: any) {
+      console.error("Error getting all step counts:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to get all step counts",
+      });
+    }
+  };
+
+  /**
+   * 데이터를 다음 단계로 이동
+   */
+  moveData = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId, recordId, toStepId, note } = req.body;
+      const userId = (req as any).user?.userId || "system";
+
+      if (!flowId || !recordId || !toStepId) {
+        res.status(400).json({
+          success: false,
+          message: "flowId, recordId, and toStepId are required",
+        });
+        return;
+      }
+
+      await this.flowDataMoveService.moveDataToStep(
+        flowId,
+        recordId,
+        toStepId,
+        userId,
+        note
+      );
+
+      res.json({
+        success: true,
+        message: "Data moved successfully",
+      });
+    } catch (error: any) {
+      console.error("Error moving data:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to move data",
+      });
+    }
+  };
+
+  /**
+   * 여러 데이터를 동시에 이동
+   */
+  moveBatchData = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId, recordIds, toStepId, note } = req.body;
+      const userId = (req as any).user?.userId || "system";
+
+      if (!flowId || !recordIds || !Array.isArray(recordIds) || !toStepId) {
+        res.status(400).json({
+          success: false,
+          message: "flowId, recordIds (array), and toStepId are required",
+        });
+        return;
+      }
+
+      await this.flowDataMoveService.moveBatchData(
+        flowId,
+        recordIds,
+        toStepId,
+        userId,
+        note
+      );
+
+      res.json({
+        success: true,
+        message: `${recordIds.length} records moved successfully`,
+      });
+    } catch (error: any) {
+      console.error("Error moving batch data:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to move batch data",
+      });
+    }
+  };
+
+  /**
+   * 데이터의 플로우 이력 조회
+   */
+  getAuditLogs = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId, recordId } = req.params;
+
+      const logs = await this.flowDataMoveService.getAuditLogs(
+        parseInt(flowId),
+        recordId
+      );
+
+      res.json({
+        success: true,
+        data: logs,
+      });
+    } catch (error: any) {
+      console.error("Error getting audit logs:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to get audit logs",
+      });
+    }
+  };
+
+  /**
+   * 플로우의 모든 이력 조회
+   */
+  getFlowAuditLogs = async (req: Request, res: Response): Promise<void> => {
+    try {
+      const { flowId } = req.params;
+      const { limit = 100 } = req.query;
+
+      const logs = await this.flowDataMoveService.getFlowAuditLogs(
+        parseInt(flowId),
+        parseInt(limit as string)
+      );
+
+      res.json({
+        success: true,
+        data: logs,
+      });
+    } catch (error: any) {
+      console.error("Error getting flow audit logs:", error);
+      res.status(500).json({
+        success: false,
+        message: error.message || "Failed to get flow audit logs",
+      });
+    }
+  };
+}

backend-node/src/routes/flowRoutes.ts

@@ -0,0 +1,42 @@
+/**
+ * 플로우 관리 라우터
+ */
+
+import { Router } from "express";
+import { FlowController } from "../controllers/flowController";
+
+const router = Router();
+const flowController = new FlowController();
+
+// ==================== 플로우 정의 ====================
+router.post("/definitions", flowController.createFlowDefinition);
+router.get("/definitions", flowController.getFlowDefinitions);
+router.get("/definitions/:id", flowController.getFlowDefinitionDetail);
+router.put("/definitions/:id", flowController.updateFlowDefinition);
+router.delete("/definitions/:id", flowController.deleteFlowDefinition);
+
+// ==================== 플로우 단계 ====================
+router.get("/definitions/:flowId/steps", flowController.getFlowSteps); // 단계 목록 조회
+router.post("/definitions/:flowId/steps", flowController.createFlowStep);
+router.put("/steps/:stepId", flowController.updateFlowStep);
+router.delete("/steps/:stepId", flowController.deleteFlowStep);
+
+// ==================== 플로우 연결 ====================
+router.get("/connections/:flowId", flowController.getFlowConnections); // 연결 목록 조회
+router.post("/connections", flowController.createConnection);
+router.delete("/connections/:connectionId", flowController.deleteConnection);
+
+// ==================== 플로우 실행 ====================
+router.get("/:flowId/step/:stepId/count", flowController.getStepDataCount);
+router.get("/:flowId/step/:stepId/list", flowController.getStepDataList);
+router.get("/:flowId/steps/counts", flowController.getAllStepCounts);
+
+// ==================== 데이터 이동 ====================
+router.post("/move", flowController.moveData);
+router.post("/move-batch", flowController.moveBatchData);
+
+// ==================== 오딧 로그 ====================
+router.get("/audit/:flowId/:recordId", flowController.getAuditLogs);
+router.get("/audit/:flowId", flowController.getFlowAuditLogs);
+
+export default router;

backend-node/src/services/flowConditionParser.ts

@@ -0,0 +1,203 @@
+/**
+ * 플로우 조건 파서
+ * JSON 조건을 SQL WHERE 절로 변환
+ */
+
+import {
+  FlowCondition,
+  FlowConditionGroup,
+  SqlWhereResult,
+} from "../types/flow";
+
+export class FlowConditionParser {
+  /**
+   * 조건 JSON을 SQL WHERE 절로 변환
+   */
+  static toSqlWhere(
+    conditionGroup: FlowConditionGroup | null | undefined
+  ): SqlWhereResult {
+    if (
+      !conditionGroup ||
+      !conditionGroup.conditions ||
+      conditionGroup.conditions.length === 0
+    ) {
+      return { where: "1=1", params: [] };
+    }
+
+    const conditions: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    for (const condition of conditionGroup.conditions) {
+      const column = this.sanitizeColumnName(condition.column);
+
+      switch (condition.operator) {
+        case "equals":
+          conditions.push(`${column} = $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "not_equals":
+          conditions.push(`${column} != $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "in":
+          if (Array.isArray(condition.value) && condition.value.length > 0) {
+            const placeholders = condition.value
+              .map(() => `$${paramIndex++}`)
+              .join(", ");
+            conditions.push(`${column} IN (${placeholders})`);
+            params.push(...condition.value);
+          }
+          break;
+
+        case "not_in":
+          if (Array.isArray(condition.value) && condition.value.length > 0) {
+            const placeholders = condition.value
+              .map(() => `$${paramIndex++}`)
+              .join(", ");
+            conditions.push(`${column} NOT IN (${placeholders})`);
+            params.push(...condition.value);
+          }
+          break;
+
+        case "greater_than":
+          conditions.push(`${column} > $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "less_than":
+          conditions.push(`${column} < $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "greater_than_or_equal":
+          conditions.push(`${column} >= $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "less_than_or_equal":
+          conditions.push(`${column} <= $${paramIndex}`);
+          params.push(condition.value);
+          paramIndex++;
+          break;
+
+        case "is_null":
+          conditions.push(`${column} IS NULL`);
+          break;
+
+        case "is_not_null":
+          conditions.push(`${column} IS NOT NULL`);
+          break;
+
+        case "like":
+          conditions.push(`${column} LIKE $${paramIndex}`);
+          params.push(`%${condition.value}%`);
+          paramIndex++;
+          break;
+
+        case "not_like":
+          conditions.push(`${column} NOT LIKE $${paramIndex}`);
+          params.push(`%${condition.value}%`);
+          paramIndex++;
+          break;
+
+        default:
+          throw new Error(`Unsupported operator: ${condition.operator}`);
+      }
+    }
+
+    if (conditions.length === 0) {
+      return { where: "1=1", params: [] };
+    }
+
+    const joinOperator = conditionGroup.type === "OR" ? " OR " : " AND ";
+    const where = conditions.join(joinOperator);
+
+    return { where, params };
+  }
+
+  /**
+   * SQL 인젝션 방지를 위한 컬럼명 검증
+   */
+  private static sanitizeColumnName(columnName: string): string {
+    // 알파벳, 숫자, 언더스코어, 점(.)만 허용 (테이블명.컬럼명 형태 지원)
+    if (!/^[a-zA-Z0-9_.]+$/.test(columnName)) {
+      throw new Error(`Invalid column name: ${columnName}`);
+    }
+    return columnName;
+  }
+
+  /**
+   * 조건 검증
+   */
+  static validateConditionGroup(conditionGroup: FlowConditionGroup): void {
+    if (!conditionGroup) {
+      throw new Error("Condition group is required");
+    }
+
+    if (!["AND", "OR"].includes(conditionGroup.type)) {
+      throw new Error("Condition group type must be AND or OR");
+    }
+
+    if (!Array.isArray(conditionGroup.conditions)) {
+      throw new Error("Conditions must be an array");
+    }
+
+    for (const condition of conditionGroup.conditions) {
+      this.validateCondition(condition);
+    }
+  }
+
+  /**
+   * 개별 조건 검증
+   */
+  private static validateCondition(condition: FlowCondition): void {
+    if (!condition.column) {
+      throw new Error("Column name is required");
+    }
+
+    const validOperators = [
+      "equals",
+      "not_equals",
+      "in",
+      "not_in",
+      "greater_than",
+      "less_than",
+      "greater_than_or_equal",
+      "less_than_or_equal",
+      "is_null",
+      "is_not_null",
+      "like",
+      "not_like",
+    ];
+
+    if (!validOperators.includes(condition.operator)) {
+      throw new Error(`Invalid operator: ${condition.operator}`);
+    }
+
+    // is_null, is_not_null은 value가 필요 없음
+    if (!["is_null", "is_not_null"].includes(condition.operator)) {
+      if (condition.value === undefined || condition.value === null) {
+        throw new Error(
+          `Value is required for operator: ${condition.operator}`
+        );
+      }
+    }
+
+    // in, not_in은 배열이어야 함
+    if (["in", "not_in"].includes(condition.operator)) {
+      if (!Array.isArray(condition.value) || condition.value.length === 0) {
+        throw new Error(
+          `Operator ${condition.operator} requires a non-empty array value`
+        );
+      }
+    }
+  }
+}

backend-node/src/services/flowConnectionService.ts

@@ -0,0 +1,166 @@
+/**
+ * 플로우 연결 서비스
+ */
+
+import db from "../database/db";
+import { FlowStepConnection, CreateFlowConnectionRequest } from "../types/flow";
+
+export class FlowConnectionService {
+  /**
+   * 플로우 단계 연결 생성
+   */
+  async create(
+    request: CreateFlowConnectionRequest
+  ): Promise<FlowStepConnection> {
+    // 순환 참조 체크
+    if (
+      await this.wouldCreateCycle(
+        request.flowDefinitionId,
+        request.fromStepId,
+        request.toStepId
+      )
+    ) {
+      throw new Error(
+        "Creating this connection would create a cycle in the flow"
+      );
+    }
+
+    const query = `
+      INSERT INTO flow_step_connection (
+        flow_definition_id, from_step_id, to_step_id, label
+      )
+      VALUES ($1, $2, $3, $4)
+      RETURNING *
+    `;
+
+    const result = await db.query(query, [
+      request.flowDefinitionId,
+      request.fromStepId,
+      request.toStepId,
+      request.label || null,
+    ]);
+
+    return this.mapToFlowConnection(result[0]);
+  }
+
+  /**
+   * 특정 플로우의 모든 연결 조회
+   */
+  async findByFlowId(flowDefinitionId: number): Promise<FlowStepConnection[]> {
+    const query = `
+      SELECT * FROM flow_step_connection 
+      WHERE flow_definition_id = $1 
+      ORDER BY id ASC
+    `;
+
+    const result = await db.query(query, [flowDefinitionId]);
+    return result.map(this.mapToFlowConnection);
+  }
+
+  /**
+   * 플로우 연결 단일 조회
+   */
+  async findById(id: number): Promise<FlowStepConnection | null> {
+    const query = "SELECT * FROM flow_step_connection WHERE id = $1";
+    const result = await db.query(query, [id]);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return this.mapToFlowConnection(result[0]);
+  }
+
+  /**
+   * 플로우 연결 삭제
+   */
+  async delete(id: number): Promise<boolean> {
+    const query = "DELETE FROM flow_step_connection WHERE id = $1 RETURNING id";
+    const result = await db.query(query, [id]);
+    return result.length > 0;
+  }
+
+  /**
+   * 특정 단계에서 나가는 연결 조회
+   */
+  async findOutgoingConnections(stepId: number): Promise<FlowStepConnection[]> {
+    const query = `
+      SELECT * FROM flow_step_connection 
+      WHERE from_step_id = $1 
+      ORDER BY id ASC
+    `;
+
+    const result = await db.query(query, [stepId]);
+    return result.map(this.mapToFlowConnection);
+  }
+
+  /**
+   * 특정 단계로 들어오는 연결 조회
+   */
+  async findIncomingConnections(stepId: number): Promise<FlowStepConnection[]> {
+    const query = `
+      SELECT * FROM flow_step_connection 
+      WHERE to_step_id = $1 
+      ORDER BY id ASC
+    `;
+
+    const result = await db.query(query, [stepId]);
+    return result.map(this.mapToFlowConnection);
+  }
+
+  /**
+   * 순환 참조 체크 (DFS)
+   */
+  private async wouldCreateCycle(
+    flowDefinitionId: number,
+    fromStepId: number,
+    toStepId: number
+  ): Promise<boolean> {
+    // toStepId에서 출발해서 fromStepId에 도달할 수 있는지 확인
+    const visited = new Set<number>();
+    const stack = [toStepId];
+
+    while (stack.length > 0) {
+      const current = stack.pop()!;
+
+      if (current === fromStepId) {
+        return true; // 순환 발견
+      }
+
+      if (visited.has(current)) {
+        continue;
+      }
+
+      visited.add(current);
+
+      // 현재 노드에서 나가는 모든 연결 조회
+      const query = `
+        SELECT to_step_id 
+        FROM flow_step_connection 
+        WHERE flow_definition_id = $1 AND from_step_id = $2
+      `;
+
+      const result = await db.query(query, [flowDefinitionId, current]);
+
+      for (const row of result) {
+        stack.push(row.to_step_id);
+      }
+    }
+
+    return false; // 순환 없음
+  }
+
+  /**
+   * DB 행을 FlowStepConnection 객체로 변환
+   */
+  private mapToFlowConnection(row: any): FlowStepConnection {
+    return {
+      id: row.id,
+      flowDefinitionId: row.flow_definition_id,
+      fromStepId: row.from_step_id,
+      toStepId: row.to_step_id,
+      label: row.label,
+      createdAt: row.created_at,
+    };
+  }
+}

backend-node/src/services/flowDataMoveService.ts

@@ -0,0 +1,181 @@
+/**
+ * 플로우 데이터 이동 서비스
+ * 데이터의 플로우 단계 이동 및 오딧 로그 관리
+ */
+
+import db from "../database/db";
+import { FlowAuditLog } from "../types/flow";
+import { FlowDefinitionService } from "./flowDefinitionService";
+
+export class FlowDataMoveService {
+  private flowDefinitionService: FlowDefinitionService;
+
+  constructor() {
+    this.flowDefinitionService = new FlowDefinitionService();
+  }
+
+  /**
+   * 데이터를 다음 플로우 단계로 이동
+   */
+  async moveDataToStep(
+    flowId: number,
+    recordId: string,
+    toStepId: number,
+    userId: string,
+    note?: string
+  ): Promise<void> {
+    await db.transaction(async (client) => {
+      // 1. 플로우 정의 조회
+      const flowDef = await this.flowDefinitionService.findById(flowId);
+      if (!flowDef) {
+        throw new Error(`Flow definition not found: ${flowId}`);
+      }
+
+      // 2. 현재 상태 조회
+      const currentStatusQuery = `
+        SELECT current_step_id, table_name 
+        FROM flow_data_status 
+        WHERE flow_definition_id = $1 AND record_id = $2
+      `;
+      const currentStatusResult = await client.query(currentStatusQuery, [
+        flowId,
+        recordId,
+      ]);
+      const currentStatus =
+        currentStatusResult.rows.length > 0
+          ? {
+              currentStepId: currentStatusResult.rows[0].current_step_id,
+              tableName: currentStatusResult.rows[0].table_name,
+            }
+          : null;
+      const fromStepId = currentStatus?.currentStepId || null;
+
+      // 3. flow_data_status 업데이트 또는 삽입
+      if (currentStatus) {
+        await client.query(
+          `
+          UPDATE flow_data_status 
+          SET current_step_id = $1, updated_by = $2, updated_at = NOW()
+          WHERE flow_definition_id = $3 AND record_id = $4
+        `,
+          [toStepId, userId, flowId, recordId]
+        );
+      } else {
+        await client.query(
+          `
+          INSERT INTO flow_data_status 
+          (flow_definition_id, table_name, record_id, current_step_id, updated_by)
+          VALUES ($1, $2, $3, $4, $5)
+        `,
+          [flowId, flowDef.tableName, recordId, toStepId, userId]
+        );
+      }
+
+      // 4. 오딧 로그 기록
+      await client.query(
+        `
+        INSERT INTO flow_audit_log 
+        (flow_definition_id, table_name, record_id, from_step_id, to_step_id, changed_by, note)
+        VALUES ($1, $2, $3, $4, $5, $6, $7)
+      `,
+        [
+          flowId,
+          flowDef.tableName,
+          recordId,
+          fromStepId,
+          toStepId,
+          userId,
+          note || null,
+        ]
+      );
+    });
+  }
+
+  /**
+   * 여러 데이터를 동시에 다음 단계로 이동
+   */
+  async moveBatchData(
+    flowId: number,
+    recordIds: string[],
+    toStepId: number,
+    userId: string,
+    note?: string
+  ): Promise<void> {
+    for (const recordId of recordIds) {
+      await this.moveDataToStep(flowId, recordId, toStepId, userId, note);
+    }
+  }
+
+  /**
+   * 데이터의 플로우 이력 조회
+   */
+  async getAuditLogs(
+    flowId: number,
+    recordId: string
+  ): Promise<FlowAuditLog[]> {
+    const query = `
+      SELECT 
+        fal.*,
+        fs_from.step_name as from_step_name,
+        fs_to.step_name as to_step_name
+      FROM flow_audit_log fal
+      LEFT JOIN flow_step fs_from ON fal.from_step_id = fs_from.id
+      LEFT JOIN flow_step fs_to ON fal.to_step_id = fs_to.id
+      WHERE fal.flow_definition_id = $1 AND fal.record_id = $2
+      ORDER BY fal.changed_at DESC
+    `;
+
+    const result = await db.query(query, [flowId, recordId]);
+
+    return result.map((row) => ({
+      id: row.id,
+      flowDefinitionId: row.flow_definition_id,
+      tableName: row.table_name,
+      recordId: row.record_id,
+      fromStepId: row.from_step_id,
+      toStepId: row.to_step_id,
+      changedBy: row.changed_by,
+      changedAt: row.changed_at,
+      note: row.note,
+      fromStepName: row.from_step_name,
+      toStepName: row.to_step_name,
+    }));
+  }
+
+  /**
+   * 특정 플로우의 모든 이력 조회
+   */
+  async getFlowAuditLogs(
+    flowId: number,
+    limit: number = 100
+  ): Promise<FlowAuditLog[]> {
+    const query = `
+      SELECT 
+        fal.*,
+        fs_from.step_name as from_step_name,
+        fs_to.step_name as to_step_name
+      FROM flow_audit_log fal
+      LEFT JOIN flow_step fs_from ON fal.from_step_id = fs_from.id
+      LEFT JOIN flow_step fs_to ON fal.to_step_id = fs_to.id
+      WHERE fal.flow_definition_id = $1
+      ORDER BY fal.changed_at DESC
+      LIMIT $2
+    `;
+
+    const result = await db.query(query, [flowId, limit]);
+
+    return result.map((row) => ({
+      id: row.id,
+      flowDefinitionId: row.flow_definition_id,
+      tableName: row.table_name,
+      recordId: row.record_id,
+      fromStepId: row.from_step_id,
+      toStepId: row.to_step_id,
+      changedBy: row.changed_by,
+      changedAt: row.changed_at,
+      note: row.note,
+      fromStepName: row.from_step_name,
+      toStepName: row.to_step_name,
+    }));
+  }
+}

backend-node/src/services/flowDefinitionService.ts

@@ -0,0 +1,171 @@
+/**
+ * 플로우 정의 서비스
+ */
+
+import db from "../database/db";
+import {
+  FlowDefinition,
+  CreateFlowDefinitionRequest,
+  UpdateFlowDefinitionRequest,
+} from "../types/flow";
+
+export class FlowDefinitionService {
+  /**
+   * 플로우 정의 생성
+   */
+  async create(
+    request: CreateFlowDefinitionRequest,
+    userId: string
+  ): Promise<FlowDefinition> {
+    const query = `
+      INSERT INTO flow_definition (name, description, table_name, created_by)
+      VALUES ($1, $2, $3, $4)
+      RETURNING *
+    `;
+
+    const result = await db.query(query, [
+      request.name,
+      request.description || null,
+      request.tableName,
+      userId,
+    ]);
+
+    return this.mapToFlowDefinition(result[0]);
+  }
+
+  /**
+   * 플로우 정의 목록 조회
+   */
+  async findAll(
+    tableName?: string,
+    isActive?: boolean
+  ): Promise<FlowDefinition[]> {
+    let query = "SELECT * FROM flow_definition WHERE 1=1";
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    if (tableName) {
+      query += ` AND table_name = $${paramIndex}`;
+      params.push(tableName);
+      paramIndex++;
+    }
+
+    if (isActive !== undefined) {
+      query += ` AND is_active = $${paramIndex}`;
+      params.push(isActive);
+      paramIndex++;
+    }
+
+    query += " ORDER BY created_at DESC";
+
+    const result = await db.query(query, params);
+    return result.map(this.mapToFlowDefinition);
+  }
+
+  /**
+   * 플로우 정의 단일 조회
+   */
+  async findById(id: number): Promise<FlowDefinition | null> {
+    const query = "SELECT * FROM flow_definition WHERE id = $1";
+    const result = await db.query(query, [id]);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return this.mapToFlowDefinition(result[0]);
+  }
+
+  /**
+   * 플로우 정의 수정
+   */
+  async update(
+    id: number,
+    request: UpdateFlowDefinitionRequest
+  ): Promise<FlowDefinition | null> {
+    const fields: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    if (request.name !== undefined) {
+      fields.push(`name = $${paramIndex}`);
+      params.push(request.name);
+      paramIndex++;
+    }
+
+    if (request.description !== undefined) {
+      fields.push(`description = $${paramIndex}`);
+      params.push(request.description);
+      paramIndex++;
+    }
+
+    if (request.isActive !== undefined) {
+      fields.push(`is_active = $${paramIndex}`);
+      params.push(request.isActive);
+      paramIndex++;
+    }
+
+    if (fields.length === 0) {
+      return this.findById(id);
+    }
+
+    fields.push(`updated_at = NOW()`);
+
+    const query = `
+      UPDATE flow_definition
+      SET ${fields.join(", ")}
+      WHERE id = $${paramIndex}
+      RETURNING *
+    `;
+    params.push(id);
+
+    const result = await db.query(query, params);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return this.mapToFlowDefinition(result[0]);
+  }
+
+  /**
+   * 플로우 정의 삭제
+   */
+  async delete(id: number): Promise<boolean> {
+    const query = "DELETE FROM flow_definition WHERE id = $1 RETURNING id";
+    const result = await db.query(query, [id]);
+    return result.length > 0;
+  }
+
+  /**
+   * 테이블 존재 여부 확인
+   */
+  async checkTableExists(tableName: string): Promise<boolean> {
+    const query = `
+      SELECT EXISTS (
+        SELECT FROM information_schema.tables 
+        WHERE table_schema = 'public' 
+        AND table_name = $1
+      ) as exists
+    `;
+
+    const result = await db.query(query, [tableName]);
+    return result[0].exists;
+  }
+
+  /**
+   * DB 행을 FlowDefinition 객체로 변환
+   */
+  private mapToFlowDefinition(row: any): FlowDefinition {
+    return {
+      id: row.id,
+      name: row.name,
+      description: row.description,
+      tableName: row.table_name,
+      isActive: row.is_active,
+      createdBy: row.created_by,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+    };
+  }
+}

backend-node/src/services/flowExecutionService.ts

@@ -0,0 +1,176 @@
+/**
+ * 플로우 실행 서비스
+ * 단계별 데이터 카운트 및 리스트 조회
+ */
+
+import db from "../database/db";
+import { FlowStepDataCount, FlowStepDataList } from "../types/flow";
+import { FlowDefinitionService } from "./flowDefinitionService";
+import { FlowStepService } from "./flowStepService";
+import { FlowConditionParser } from "./flowConditionParser";
+
+export class FlowExecutionService {
+  private flowDefinitionService: FlowDefinitionService;
+  private flowStepService: FlowStepService;
+
+  constructor() {
+    this.flowDefinitionService = new FlowDefinitionService();
+    this.flowStepService = new FlowStepService();
+  }
+
+  /**
+   * 특정 플로우 단계에 해당하는 데이터 카운트
+   */
+  async getStepDataCount(flowId: number, stepId: number): Promise<number> {
+    // 1. 플로우 정의 조회
+    const flowDef = await this.flowDefinitionService.findById(flowId);
+    if (!flowDef) {
+      throw new Error(`Flow definition not found: ${flowId}`);
+    }
+
+    // 2. 플로우 단계 조회
+    const step = await this.flowStepService.findById(stepId);
+    if (!step) {
+      throw new Error(`Flow step not found: ${stepId}`);
+    }
+
+    if (step.flowDefinitionId !== flowId) {
+      throw new Error(`Step ${stepId} does not belong to flow ${flowId}`);
+    }
+
+    // 3. 테이블명 결정: 단계에 지정된 테이블이 있으면 사용, 없으면 플로우의 기본 테이블 사용
+    const tableName = step.tableName || flowDef.tableName;
+
+    // 4. 조건 JSON을 SQL WHERE절로 변환
+    const { where, params } = FlowConditionParser.toSqlWhere(
+      step.conditionJson
+    );
+
+    // 5. 카운트 쿼리 실행
+    const query = `SELECT COUNT(*) as count FROM ${tableName} WHERE ${where}`;
+    const result = await db.query(query, params);
+
+    return parseInt(result[0].count);
+  }
+
+  /**
+   * 특정 플로우 단계에 해당하는 데이터 리스트
+   */
+  async getStepDataList(
+    flowId: number,
+    stepId: number,
+    page: number = 1,
+    pageSize: number = 20
+  ): Promise<FlowStepDataList> {
+    // 1. 플로우 정의 조회
+    const flowDef = await this.flowDefinitionService.findById(flowId);
+    if (!flowDef) {
+      throw new Error(`Flow definition not found: ${flowId}`);
+    }
+
+    // 2. 플로우 단계 조회
+    const step = await this.flowStepService.findById(stepId);
+    if (!step) {
+      throw new Error(`Flow step not found: ${stepId}`);
+    }
+
+    if (step.flowDefinitionId !== flowId) {
+      throw new Error(`Step ${stepId} does not belong to flow ${flowId}`);
+    }
+
+    // 3. 테이블명 결정: 단계에 지정된 테이블이 있으면 사용, 없으면 플로우의 기본 테이블 사용
+    const tableName = step.tableName || flowDef.tableName;
+
+    // 4. 조건 JSON을 SQL WHERE절로 변환
+    const { where, params } = FlowConditionParser.toSqlWhere(
+      step.conditionJson
+    );
+
+    const offset = (page - 1) * pageSize;
+
+    // 5. 전체 카운트
+    const countQuery = `SELECT COUNT(*) as count FROM ${tableName} WHERE ${where}`;
+    const countResult = await db.query(countQuery, params);
+    const total = parseInt(countResult[0].count);
+
+    // 6. 테이블의 Primary Key 컬럼 찾기
+    let orderByColumn = "";
+    try {
+      const pkQuery = `
+        SELECT a.attname
+        FROM pg_index i
+        JOIN pg_attribute a ON a.attrelid = i.indrelid AND a.attnum = ANY(i.indkey)
+        WHERE i.indrelid = $1::regclass
+        AND i.indisprimary
+        LIMIT 1
+      `;
+      const pkResult = await db.query(pkQuery, [tableName]);
+      if (pkResult.length > 0) {
+        orderByColumn = pkResult[0].attname;
+      }
+    } catch (err) {
+      // Primary Key를 찾지 못하면 ORDER BY 없이 진행
+      console.warn(`Could not find primary key for table ${tableName}:`, err);
+    }
+
+    // 7. 데이터 조회
+    const orderByClause = orderByColumn ? `ORDER BY ${orderByColumn} DESC` : "";
+    const dataQuery = `
+      SELECT * FROM ${tableName} 
+      WHERE ${where} 
+      ${orderByClause}
+      LIMIT $${params.length + 1} OFFSET $${params.length + 2}
+    `;
+    const dataResult = await db.query(dataQuery, [...params, pageSize, offset]);
+
+    return {
+      records: dataResult,
+      total,
+      page,
+      pageSize,
+    };
+  }
+
+  /**
+   * 플로우의 모든 단계별 데이터 카운트
+   */
+  async getAllStepCounts(flowId: number): Promise<FlowStepDataCount[]> {
+    const steps = await this.flowStepService.findByFlowId(flowId);
+    const counts: FlowStepDataCount[] = [];
+
+    for (const step of steps) {
+      const count = await this.getStepDataCount(flowId, step.id);
+      counts.push({
+        stepId: step.id,
+        count,
+      });
+    }
+
+    return counts;
+  }
+
+  /**
+   * 특정 레코드의 현재 플로우 상태 조회
+   */
+  async getCurrentStatus(
+    flowId: number,
+    recordId: string
+  ): Promise<{ currentStepId: number | null; tableName: string } | null> {
+    const query = `
+      SELECT current_step_id, table_name 
+      FROM flow_data_status 
+      WHERE flow_definition_id = $1 AND record_id = $2
+    `;
+
+    const result = await db.query(query, [flowId, recordId]);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return {
+      currentStepId: result[0].current_step_id,
+      tableName: result[0].table_name,
+    };
+  }
+}

backend-node/src/services/flowStepService.ts

@@ -0,0 +1,202 @@
+/**
+ * 플로우 단계 서비스
+ */
+
+import db from "../database/db";
+import {
+  FlowStep,
+  CreateFlowStepRequest,
+  UpdateFlowStepRequest,
+  FlowConditionGroup,
+} from "../types/flow";
+import { FlowConditionParser } from "./flowConditionParser";
+
+export class FlowStepService {
+  /**
+   * 플로우 단계 생성
+   */
+  async create(request: CreateFlowStepRequest): Promise<FlowStep> {
+    // 조건 검증
+    if (request.conditionJson) {
+      FlowConditionParser.validateConditionGroup(request.conditionJson);
+    }
+
+    const query = `
+      INSERT INTO flow_step (
+        flow_definition_id, step_name, step_order, table_name, condition_json, 
+        color, position_x, position_y
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+      RETURNING *
+    `;
+
+    const result = await db.query(query, [
+      request.flowDefinitionId,
+      request.stepName,
+      request.stepOrder,
+      request.tableName || null,
+      request.conditionJson ? JSON.stringify(request.conditionJson) : null,
+      request.color || "#3B82F6",
+      request.positionX || 0,
+      request.positionY || 0,
+    ]);
+
+    return this.mapToFlowStep(result[0]);
+  }
+
+  /**
+   * 특정 플로우의 모든 단계 조회
+   */
+  async findByFlowId(flowDefinitionId: number): Promise<FlowStep[]> {
+    const query = `
+      SELECT * FROM flow_step 
+      WHERE flow_definition_id = $1 
+      ORDER BY step_order ASC
+    `;
+
+    const result = await db.query(query, [flowDefinitionId]);
+    return result.map(this.mapToFlowStep);
+  }
+
+  /**
+   * 플로우 단계 단일 조회
+   */
+  async findById(id: number): Promise<FlowStep | null> {
+    const query = "SELECT * FROM flow_step WHERE id = $1";
+    const result = await db.query(query, [id]);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return this.mapToFlowStep(result[0]);
+  }
+
+  /**
+   * 플로우 단계 수정
+   */
+  async update(
+    id: number,
+    request: UpdateFlowStepRequest
+  ): Promise<FlowStep | null> {
+    // 조건 검증
+    if (request.conditionJson) {
+      FlowConditionParser.validateConditionGroup(request.conditionJson);
+    }
+
+    const fields: string[] = [];
+    const params: any[] = [];
+    let paramIndex = 1;
+
+    if (request.stepName !== undefined) {
+      fields.push(`step_name = $${paramIndex}`);
+      params.push(request.stepName);
+      paramIndex++;
+    }
+
+    if (request.stepOrder !== undefined) {
+      fields.push(`step_order = $${paramIndex}`);
+      params.push(request.stepOrder);
+      paramIndex++;
+    }
+
+    if (request.tableName !== undefined) {
+      fields.push(`table_name = $${paramIndex}`);
+      params.push(request.tableName);
+      paramIndex++;
+    }
+
+    if (request.conditionJson !== undefined) {
+      fields.push(`condition_json = $${paramIndex}`);
+      params.push(
+        request.conditionJson ? JSON.stringify(request.conditionJson) : null
+      );
+      paramIndex++;
+    }
+
+    if (request.color !== undefined) {
+      fields.push(`color = $${paramIndex}`);
+      params.push(request.color);
+      paramIndex++;
+    }
+
+    if (request.positionX !== undefined) {
+      fields.push(`position_x = $${paramIndex}`);
+      params.push(request.positionX);
+      paramIndex++;
+    }
+
+    if (request.positionY !== undefined) {
+      fields.push(`position_y = $${paramIndex}`);
+      params.push(request.positionY);
+      paramIndex++;
+    }
+
+    if (fields.length === 0) {
+      return this.findById(id);
+    }
+
+    fields.push(`updated_at = NOW()`);
+
+    const query = `
+      UPDATE flow_step
+      SET ${fields.join(", ")}
+      WHERE id = $${paramIndex}
+      RETURNING *
+    `;
+    params.push(id);
+
+    const result = await db.query(query, params);
+
+    if (result.length === 0) {
+      return null;
+    }
+
+    return this.mapToFlowStep(result[0]);
+  }
+
+  /**
+   * 플로우 단계 삭제
+   */
+  async delete(id: number): Promise<boolean> {
+    const query = "DELETE FROM flow_step WHERE id = $1 RETURNING id";
+    const result = await db.query(query, [id]);
+    return result.length > 0;
+  }
+
+  /**
+   * 단계 순서 재정렬
+   */
+  async reorder(
+    flowDefinitionId: number,
+    stepOrders: { id: number; order: number }[]
+  ): Promise<void> {
+    await db.transaction(async (client) => {
+      for (const { id, order } of stepOrders) {
+        await client.query(
+          "UPDATE flow_step SET step_order = $1, updated_at = NOW() WHERE id = $2 AND flow_definition_id = $3",
+          [order, id, flowDefinitionId]
+        );
+      }
+    });
+  }
+
+  /**
+   * DB 행을 FlowStep 객체로 변환
+   */
+  private mapToFlowStep(row: any): FlowStep {
+    return {
+      id: row.id,
+      flowDefinitionId: row.flow_definition_id,
+      stepName: row.step_name,
+      stepOrder: row.step_order,
+      tableName: row.table_name || undefined,
+      conditionJson: row.condition_json as FlowConditionGroup | undefined,
+      color: row.color,
+      positionX: row.position_x,
+      positionY: row.position_y,
+      createdAt: row.created_at,
+      updatedAt: row.updated_at,
+    };
+  }
+}

backend-node/src/types/flow.ts

@@ -0,0 +1,175 @@
+/**
+ * 플로우 관리 시스템 타입 정의
+ */
+
+// 플로우 정의
+export interface FlowDefinition {
+  id: number;
+  name: string;
+  description?: string;
+  tableName: string;
+  isActive: boolean;
+  createdBy?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// 플로우 정의 생성 요청
+export interface CreateFlowDefinitionRequest {
+  name: string;
+  description?: string;
+  tableName: string;
+}
+
+// 플로우 정의 수정 요청
+export interface UpdateFlowDefinitionRequest {
+  name?: string;
+  description?: string;
+  isActive?: boolean;
+}
+
+// 조건 연산자
+export type ConditionOperator =
+  | "equals"
+  | "not_equals"
+  | "in"
+  | "not_in"
+  | "greater_than"
+  | "less_than"
+  | "greater_than_or_equal"
+  | "less_than_or_equal"
+  | "is_null"
+  | "is_not_null"
+  | "like"
+  | "not_like";
+
+// 플로우 조건
+export interface FlowCondition {
+  column: string;
+  operator: ConditionOperator;
+  value: any;
+}
+
+// 플로우 조건 그룹
+export interface FlowConditionGroup {
+  type: "AND" | "OR";
+  conditions: FlowCondition[];
+}
+
+// 플로우 단계
+export interface FlowStep {
+  id: number;
+  flowDefinitionId: number;
+  stepName: string;
+  stepOrder: number;
+  tableName?: string; // 이 단계에서 조회할 테이블명 (NULL이면 flow_definition의 tableName 사용)
+  conditionJson?: FlowConditionGroup;
+  color: string;
+  positionX: number;
+  positionY: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// 플로우 단계 생성 요청
+export interface CreateFlowStepRequest {
+  flowDefinitionId: number;
+  stepName: string;
+  stepOrder: number;
+  tableName?: string; // 이 단계에서 조회할 테이블명
+  conditionJson?: FlowConditionGroup;
+  color?: string;
+  positionX?: number;
+  positionY?: number;
+}
+
+// 플로우 단계 수정 요청
+export interface UpdateFlowStepRequest {
+  stepName?: string;
+  stepOrder?: number;
+  tableName?: string; // 이 단계에서 조회할 테이블명
+  conditionJson?: FlowConditionGroup;
+  color?: string;
+  positionX?: number;
+  positionY?: number;
+}
+
+// 플로우 단계 연결
+export interface FlowStepConnection {
+  id: number;
+  flowDefinitionId: number;
+  fromStepId: number;
+  toStepId: number;
+  label?: string;
+  createdAt: Date;
+}
+
+// 플로우 단계 연결 생성 요청
+export interface CreateFlowConnectionRequest {
+  flowDefinitionId: number;
+  fromStepId: number;
+  toStepId: number;
+  label?: string;
+}
+
+// 플로우 데이터 상태
+export interface FlowDataStatus {
+  id: number;
+  flowDefinitionId: number;
+  tableName: string;
+  recordId: string;
+  currentStepId?: number;
+  updatedBy?: string;
+  updatedAt: Date;
+}
+
+// 플로우 오딧 로그
+export interface FlowAuditLog {
+  id: number;
+  flowDefinitionId: number;
+  tableName: string;
+  recordId: string;
+  fromStepId?: number;
+  toStepId?: number;
+  changedBy?: string;
+  changedAt: Date;
+  note?: string;
+  // 조인 필드
+  fromStepName?: string;
+  toStepName?: string;
+}
+
+// 플로우 상세 정보
+export interface FlowDetailResponse {
+  definition: FlowDefinition;
+  steps: FlowStep[];
+  connections: FlowStepConnection[];
+}
+
+// 단계별 데이터 카운트
+export interface FlowStepDataCount {
+  stepId: number;
+  count: number;
+}
+
+// 단계별 데이터 리스트
+export interface FlowStepDataList {
+  records: any[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+// 데이터 이동 요청
+export interface MoveDataRequest {
+  flowId: number;
+  recordId: string;
+  toStepId: number;
+  note?: string;
+}
+
+// SQL WHERE 절 결과
+export interface SqlWhereResult {
+  where: string;
+  params: any[];
+}

docs/FLOW_MANAGEMENT_UI_DESIGN.md

@@ -0,0 +1,646 @@
+# 플로우 관리 시스템 UI 설계
+
+## 1. 플로우 관리 화면 (/flow-management)
+
+### 1.1 전체 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  플로우 관리                                    [+ 새 플로우]  [저장] │
+├──────────────┬──────────────────────────────────────┬───────────────┤
+│              │                                      │               │
+│  플로우 목록  │         플로우 편집 캔버스            │  속성 패널    │
+│   (좌측)     │            (중앙)                    │   (우측)      │
+│              │                                      │               │
+│  ┌────────┐  │  ┌──────┐                          │ ┌───────────┐ │
+│  │플로우 1│  │  │      │      ┌──────┐            │ │ 단계명:   │ │
+│  ├────────┤  │  │ 구매 │─────▶│ 설치 │            │ │ [구매]    │ │
+│  │플로우 2│  │  │      │      └──────┘            │ │           │ │
+│  ├────────┤  │  └──────┘          │               │ │ 색상:     │ │
+│  │플로우 3│  │                     │               │ │ [파랑]    │ │
+│  └────────┘  │                     ▼               │ │           │ │
+│              │                  ┌──────┐           │ │ 조건 설정: │ │
+│  [테이블 선택]│                  │ 폐기 │           │ │           │ │
+│  [product_  │                  └──────┘           │ │ 컬럼:     │ │
+│   dtg     ]  │                                     │ │ [status]  │ │
+│              │                                     │ │           │ │
+│              │                                     │ │ 연산자:   │ │
+│              │                                     │ │ [equals]  │ │
+│              │                                     │ │           │ │
+│              │                                     │ │ 값:       │ │
+│              │                                     │ │ [구매완료]│ │
+│              │                                     │ │           │ │
+│              │                                     │ │[+조건추가]│ │
+│              │                                     │ └───────────┘ │
+├──────────────┴──────────────────────────────────────┴───────────────┤
+│  도구 모음: [노드 추가] [연결] [삭제] [정렬] [줌 인/아웃] [미니맵]   │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 1.2 플로우 노드 상세
+
+```
+┌─────────────────────────────┐
+│  구매                    [x] │  ← 닫기 버튼
+├─────────────────────────────┤
+│  상태: status = '구매완료'  │  ← 조건 요약
+│  AND install_date IS NULL  │
+├─────────────────────────────┤
+│        데이터: 15건         │  ← 현재 조건에 맞는 데이터 수
+└─────────────────────────────┘
+           ↓
+      [연결선 라벨]
+           ↓
+┌─────────────────────────────┐
+│  설치                    [x] │
+├─────────────────────────────┤
+│  상태: status = '설치완료'  │
+│  AND disposal_date IS NULL │
+├─────────────────────────────┤
+│        데이터: 8건          │
+└─────────────────────────────┘
+```
+
+### 1.3 조건 빌더 UI
+
+```
+┌─────────────────────────────────────────────┐
+│  조건 설정                           [AND▼]  │
+├─────────────────────────────────────────────┤
+│  조건 1:                              [- 삭제]│
+│  ┌───────────┬──────────┬──────────────┐    │
+│  │ 컬럼      │ 연산자   │ 값           │    │
+│  │ [status▼] │[equals▼] │[구매완료    ]│    │
+│  └───────────┴──────────┴──────────────┘    │
+│                                              │
+│  조건 2:                              [- 삭제]│
+│  ┌───────────┬──────────┬──────────────┐    │
+│  │ 컬럼      │ 연산자   │ 값           │    │
+│  │[install_  │[is_null▼]│              │    │
+│  │  date   ▼]│          │              │    │
+│  └───────────┴──────────┴──────────────┘    │
+│                                              │
+│  [+ 조건 추가]                               │
+└─────────────────────────────────────────────┘
+
+연산자 옵션:
+- equals (같음)
+- not_equals (같지 않음)
+- in (포함)
+- not_in (포함하지 않음)
+- greater_than (크다)
+- less_than (작다)
+- is_null (NULL)
+- is_not_null (NULL 아님)
+```
+
+---
+
+## 2. 화면관리에서 플로우 위젯 배치
+
+### 2.1 화면 편집기 (ScreenDesigner)
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  화면 편집기 - DTG 제품 관리                                [저장]   │
+├─────────────┬───────────────────────────────────────┬───────────────┤
+│             │                                       │               │
+│ 컴포넌트    │          캔버스                        │  속성 패널    │
+│             │                                       │               │
+│ ┌─────────┐ │  ┌─────────────────────────────────┐ │ 타입:         │
+│ │ 입력필드 │ │  │  DTG 제품 라이프사이클          │ │ [flow-widget] │
+│ ├─────────┤ │  ├─────┬─────┬─────┬─────┬─────────┤ │               │
+│ │ 버튼    │ │  │구매 │     │설치 │     │ 폐기    │ │ 플로우 선택:  │
+│ ├─────────┤ │  │     │  →  │     │  →  │         │ │ [DTG 라이프   │
+│ │ 테이블  │ │  │ 15건│     │ 8건 │     │  3건    │ │  사이클  ▼]  │
+│ ├─────────┤ │  └─────┴─────┴─────┴─────┴─────────┘ │               │
+│ │플로우  │ │  ◀ 드래그앤드롭으로 배치               │ 레이아웃:     │
+│ └─────────┘ │                                       │ [가로▼]       │
+│             │  ┌─────────────────────────────────┐ │               │
+│             │  │  제품 상세 정보                  │ │ 카드 너비:    │
+│             │  │  ┌────────────┬───────────────┐ │ │ [200px]       │
+│             │  │  │ 제품명:    │ [          ]  │ │ │               │
+│             │  │  │ 구매일자:  │ [          ]  │ │ │ 데이터 카운트 │
+│             │  │  │ 설치일자:  │ [          ]  │ │ │ [✓] 표시      │
+│             │  │  │ 폐기일자:  │ [          ]  │ │ │               │
+│             │  │  └────────────┴───────────────┘ │ │ 연결선        │
+│             │  └─────────────────────────────────┘ │ [✓] 표시      │
+│             │                                       │               │
+└─────────────┴───────────────────────────────────────┴───────────────┘
+```
+
+### 2.2 플로우 위젯 설정 패널
+
+```
+┌─────────────────────────────────────┐
+│  플로우 위젯 설정                    │
+├─────────────────────────────────────┤
+│  플로우 선택:                        │
+│  ┌───────────────────────────────┐  │
+│  │ DTG 제품 라이프사이클      ▼ │  │
+│  └───────────────────────────────┘  │
+│                                     │
+│  레이아웃:                           │
+│  ( ) 가로   (•) 세로                │
+│                                     │
+│  카드 너비:                          │
+│  [200px               ]             │
+│                                     │
+│  카드 높이:                          │
+│  [120px               ]             │
+│                                     │
+│  [✓] 데이터 카운트 표시              │
+│  [✓] 연결선 표시                     │
+│  [ ] 컴팩트 모드                     │
+│                                     │
+│  카드 스타일:                        │
+│  ┌─────────────────────────────┐   │
+│  │ 테두리 색상: [단계별 색상 ▼] │   │
+│  │ 배경 색상:   [흰색      ▼]  │   │
+│  │ 그림자:      [중간      ▼]  │   │
+│  └─────────────────────────────┘   │
+└─────────────────────────────────────┘
+```
+
+---
+
+## 3. 실제 화면에서 플로우 표시 (InteractiveScreenViewer)
+
+### 3.1 가로 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  DTG 제품 관리                                                       │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  DTG 제품 라이프사이클                                               │
+│  ┌─────────────┐      ┌─────────────┐      ┌─────────────┐        │
+│  │   구매      │      │   설치      │      │   폐기      │        │
+│  │             │  →   │             │  →   │             │        │
+│  │   15건      │      │   8건       │      │   3건       │        │
+│  └─────────────┘      └─────────────┘      └─────────────┘        │
+│   ↑ 클릭하면 데이터 리스트 모달 열림                                │
+│                                                                      │
+│  ─────────────────────────────────────────────────────────────────  │
+│                                                                      │
+│  제품 상세 정보                                                      │
+│  ┌──────────────────────────────────────────────────────────────┐  │
+│  │  제품명:    [DTG-001                ]                        │  │
+│  │  구매일자:  [2024-01-15             ]                        │  │
+│  │  설치일자:  [2024-02-20             ]                        │  │
+│  │  폐기일자:  [                       ]                        │  │
+│  └──────────────────────────────────────────────────────────────┘  │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 3.2 세로 레이아웃
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  DTG 제품 관리                                                       │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  DTG 제품 라이프사이클                                               │
+│  ┌─────────────┐                                                    │
+│  │   구매      │                                                    │
+│  │             │                                                    │
+│  │   15건      │                                                    │
+│  └─────────────┘                                                    │
+│         ↓                                                           │
+│  ┌─────────────┐                                                    │
+│  │   설치      │                                                    │
+│  │             │                                                    │
+│  │   8건       │                                                    │
+│  └─────────────┘                                                    │
+│         ↓                                                           │
+│  ┌─────────────┐                                                    │
+│  │   폐기      │                                                    │
+│  │             │                                                    │
+│  │   3건       │                                                    │
+│  └─────────────┘                                                    │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 4. 플로우 단계 클릭 시 데이터 리스트 모달
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  구매 단계 - 데이터 목록                                   [X 닫기]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  ┌──┬──────────┬────────────┬────────────┬──────────┬──────────┐  │
+│  │□ │ 제품명   │ 구매일자   │ 구매금액   │ 구매처   │ 상태     │  │
+│  ├──┼──────────┼────────────┼────────────┼──────────┼──────────┤  │
+│  │☑ │ DTG-001  │ 2024-01-15 │ 15,000,000 │ A업체    │ 구매완료 │  │
+│  │☑ │ DTG-002  │ 2024-01-20 │ 15,500,000 │ B업체    │ 구매완료 │  │
+│  │□ │ DTG-003  │ 2024-02-01 │ 14,800,000 │ A업체    │ 구매완료 │  │
+│  │□ │ DTG-004  │ 2024-02-05 │ 16,200,000 │ C업체    │ 구매완료 │  │
+│  │☑ │ DTG-005  │ 2024-02-10 │ 15,000,000 │ B업체    │ 구매완료 │  │
+│  │□ │ DTG-006  │ 2024-02-15 │ 15,300,000 │ A업체    │ 구매완료 │  │
+│  │□ │ DTG-007  │ 2024-02-20 │ 15,700,000 │ B업체    │ 구매완료 │  │
+│  │□ │ DTG-008  │ 2024-02-25 │ 16,000,000 │ C업체    │ 구매완료 │  │
+│  └──┴──────────┴────────────┴────────────┴──────────┴──────────┘  │
+│                                                                      │
+│  선택된 항목: 3개                          [1] [2] [3] [4] [5]      │
+│                                                                      │
+├─────────────────────────────────────────────────────────────────────┤
+│                     [취소]  [설치 단계로 이동] ←                    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 4.1 단계 이동 확인 대화상자
+
+```
+┌─────────────────────────────────────────┐
+│  단계 이동 확인                          │
+├─────────────────────────────────────────┤
+│                                         │
+│  선택한 3개의 제품을                     │
+│  '구매' 단계에서 '설치' 단계로          │
+│  이동하시겠습니까?                       │
+│                                         │
+│  이동 사유 (선택):                       │
+│  ┌─────────────────────────────────┐   │
+│  │ 설치 일정 확정                   │   │
+│  │                                 │   │
+│  └─────────────────────────────────┘   │
+│                                         │
+│  [취소]              [확인]             │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## 5. 오딧 로그 (이력) 화면
+
+### 5.1 제품 상세 화면 내 이력 탭
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  제품 상세: DTG-001                                                  │
+├──────┬──────────────────────────────────────────────────────────────┤
+│ 기본 │  플로우 이력  │  문서  │  AS 이력  │                         │
+├──────┴──────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  DTG 제품 라이프사이클 이력                                          │
+│                                                                      │
+│  ┌──────────────────────────────────────────────────────────────┐  │
+│  │ 2024-02-20 14:30:25                                          │  │
+│  │ [구매] → [설치]                                              │  │
+│  │ 변경자: 홍길동 (설치팀)                                      │  │
+│  │ 사유: 고객사 설치 완료                                       │  │
+│  └──────────────────────────────────────────────────────────────┘  │
+│                                                                      │
+│  ┌──────────────────────────────────────────────────────────────┐  │
+│  │ 2024-01-15 09:15:00                                          │  │
+│  │ [시작] → [구매]                                              │  │
+│  │ 변경자: 김철수 (구매팀)                                      │  │
+│  │ 사유: 신규 제품 구매 등록                                    │  │
+│  └──────────────────────────────────────────────────────────────┘  │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 타임라인 뷰
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  플로우 이력 (타임라인)                                              │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│    2024-01-15                                                        │
+│         │                                                            │
+│         ● 구매 (김철수)                                              │
+│         │ "신규 제품 구매 등록"                                      │
+│         │                                                            │
+│         │ (36일 경과)                                                │
+│         │                                                            │
+│    2024-02-20                                                        │
+│         │                                                            │
+│         ● 설치 (홍길동)                                              │
+│         │ "고객사 설치 완료"                                         │
+│         │                                                            │
+│         │ (진행 중...)                                               │
+│         │                                                            │
+│         ○ 폐기 (예정)                                                │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 6. 플로우 위젯 스타일 변형
+
+### 6.1 컴팩트 모드
+
+```
+┌─────────────────────────────────────────┐
+│  DTG 라이프사이클                        │
+│  [구매 15] → [설치 8] → [폐기 3]        │
+└─────────────────────────────────────────┘
+```
+
+### 6.2 카드 상세 모드
+
+```
+┌──────────────────┐    ┌──────────────────┐    ┌──────────────────┐
+│   구매           │    │   설치           │    │   폐기           │
+├──────────────────┤    ├──────────────────┤    ├──────────────────┤
+│                  │    │                  │    │                  │
+│     15건         │→   │     8건          │→   │     3건          │
+│                  │    │                  │    │                  │
+├──────────────────┤    ├──────────────────┤    ├──────────────────┤
+│ 조건:            │    │ 조건:            │    │ 조건:            │
+│ status=구매완료  │    │ status=설치완료  │    │ status=폐기완료  │
+│                  │    │                  │    │                  │
+│ 최근 업데이트:   │    │ 최근 업데이트:   │    │ 최근 업데이트:   │
+│ 2024-02-25       │    │ 2024-02-20       │    │ 2024-01-15       │
+└──────────────────┘    └──────────────────┘    └──────────────────┘
+```
+
+### 6.3 프로그레스 바 스타일
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  DTG 제품 라이프사이클                                               │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  구매 ━━━━━━━━━ 설치 ━━━━━━━━━ 폐기                                │
+│  15건    57%    8건    31%    3건    12%                            │
+│  ████████████▓▓▓▓▓▓▓▓▓░░░░░░░░                                     │
+│                                                                      │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 7. 모바일 반응형 디자인
+
+### 7.1 모바일 뷰 (세로)
+
+```
+┌─────────────────────┐
+│ ☰  DTG 제품 관리     │
+├─────────────────────┤
+│                     │
+│  라이프사이클:       │
+│                     │
+│  ┌───────────────┐  │
+│  │   구매        │  │
+│  │   15건        │  │
+│  └───────────────┘  │
+│         ↓           │
+│  ┌───────────────┐  │
+│  │   설치        │  │
+│  │   8건         │  │
+│  └───────────────┘  │
+│         ↓           │
+│  ┌───────────────┐  │
+│  │   폐기        │  │
+│  │   3건         │  │
+│  └───────────────┘  │
+│                     │
+│  ───────────────    │
+│                     │
+│  제품 정보          │
+│  제품명: DTG-001    │
+│  구매일: 2024-01-15 │
+│  설치일: 2024-02-20 │
+│                     │
+└─────────────────────┘
+```
+
+---
+
+## 8. 플로우 편집기 상세 기능
+
+### 8.1 노드 추가 메뉴
+
+```
+┌─────────────────────────────────────────┐
+│  캔버스 우클릭 메뉴                      │
+├─────────────────────────────────────────┤
+│  ➕ 단계 추가                           │
+│  🔗 연결선 추가                          │
+│  📋 붙여넣기                             │
+│  ───────────────────────────────────    │
+│  🎨 배경 색상 변경                       │
+│  📏 격자 설정                            │
+│  🔍 확대/축소                            │
+└─────────────────────────────────────────┘
+```
+
+### 8.2 노드 우클릭 메뉴
+
+```
+┌─────────────────────────────────────────┐
+│  단계 메뉴                               │
+├─────────────────────────────────────────┤
+│  ✏️ 편집                                 │
+│  📋 복사                                 │
+│  🗑️ 삭제                                 │
+│  ───────────────────────────────────    │
+│  🔗 다음 단계로 연결                     │
+│  🎨 색상 변경                            │
+│  📊 데이터 미리보기 (15건)               │
+│  ───────────────────────────────────    │
+│  ⬆️ 앞으로 가져오기                      │
+│  ⬇️ 뒤로 보내기                          │
+└─────────────────────────────────────────┘
+```
+
+### 8.3 미니맵
+
+```
+┌──────────────────────┐
+│  미니맵       [X]     │
+├──────────────────────┤
+│  ┌────────────────┐  │
+│  │ ●              │  │
+│  │   ●            │  │
+│  │                │  │
+│  │        ●       │  │
+│  │                │  │
+│  │   [====]  ←현재 │  │
+│  │           뷰포트│  │
+│  └────────────────┘  │
+│                      │
+│  줌: 100%            │
+│  [－] ■■■■■ [＋]    │
+└──────────────────────┘
+```
+
+---
+
+## 9. 플로우 템플릿 선택 화면
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  새 플로우 만들기                                          [X 닫기]  │
+├─────────────────────────────────────────────────────────────────────┤
+│                                                                      │
+│  템플릿 선택:                                                        │
+│                                                                      │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐            │
+│  │   빈 플로우  │  │  3단계 플로우 │  │  승인 플로우  │            │
+│  │              │  │              │  │              │            │
+│  │              │  │  ● → ● → ●  │  │ ● → ● → ●   │            │
+│  │      +       │  │              │  │  ↓       ↓  │            │
+│  │              │  │              │  │  ●       ●  │            │
+│  └──────────────┘  └──────────────┘  └──────────────┘            │
+│                                                                      │
+│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐            │
+│  │  구매→설치   │  │   품질검사    │  │   커스텀     │            │
+│  │              │  │              │  │              │            │
+│  │  ● → ● → ●  │  │ ● → ● → ●   │  │              │            │
+│  │              │  │  ↓   ↓   ↓  │  │   불러오기    │            │
+│  │              │  │  ●   ●   ●  │  │              │            │
+│  └──────────────┘  └──────────────┘  └──────────────┘            │
+│                                                                      │
+│  또는                                                                │
+│                                                                      │
+│  플로우 이름: [                                      ]               │
+│  연결 테이블: [product_dtg                       ▼]                 │
+│                                                                      │
+│                                  [취소]  [빈 플로우로 시작]         │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 10. 데이터 흐름 다이어그램
+
+### 10.1 전체 시스템 흐름
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                      플로우 관리 시스템                              │
+└─────────────────────────────────────────────────────────────────────┘
+                                 │
+        ┌────────────────────────┼────────────────────────┐
+        │                        │                        │
+        ▼                        ▼                        ▼
+┌───────────────┐        ┌───────────────┐       ┌───────────────┐
+│ 플로우 정의   │        │ 조건 설정     │       │ 시각화 편집   │
+│ (정의/수정)   │        │ (SQL 변환)    │       │ (React Flow)  │
+└───────┬───────┘        └───────┬───────┘       └───────┬───────┘
+        │                        │                        │
+        └────────────────────────┼────────────────────────┘
+                                 │
+                                 ▼
+                    ┌─────────────────────────┐
+                    │   데이터베이스 저장     │
+                    │  - flow_definition      │
+                    │  - flow_step            │
+                    │  - flow_step_connection │
+                    └────────────┬────────────┘
+                                 │
+                                 ▼
+        ┌────────────────────────┼────────────────────────┐
+        │                        │                        │
+        ▼                        ▼                        ▼
+┌───────────────┐        ┌───────────────┐       ┌───────────────┐
+│ 화면관리      │        │ 실시간 카운트 │       │ 데이터 이동   │
+│ (위젯 배치)   │        │ (조건 조회)   │       │ (상태 변경)   │
+└───────┬───────┘        └───────┬───────┘       └───────┬───────┘
+        │                        │                        │
+        └────────────────────────┼────────────────────────┘
+                                 │
+                                 ▼
+                    ┌─────────────────────────┐
+                    │   사용자 화면에 표시    │
+                    │  + 오딧 로그 기록       │
+                    └─────────────────────────┘
+```
+
+---
+
+## 11. 사용자 시나리오 플로우
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  시나리오: DTG 제품 라이프사이클 관리                                │
+└─────────────────────────────────────────────────────────────────────┘
+
+단계 1: 플로우 정의
+─────────────────────
+관리자가 플로우 관리 화면에서:
+1. "새 플로우" 클릭
+2. 이름: "DTG 제품 라이프사이클" 입력
+3. 테이블: "product_dtg" 선택
+4. "구매", "설치", "폐기" 3개 단계 추가
+5. 각 단계의 조건 설정
+6. 저장
+
+단계 2: 화면에 배치
+─────────────────────
+관리자가 화면관리에서:
+1. "DTG 제품 관리" 화면 열기
+2. 컴포넌트 팔레트에서 "플로우 위젯" 드래그
+3. "DTG 제품 라이프사이클" 플로우 선택
+4. 레이아웃 및 스타일 설정
+5. 저장
+
+단계 3: 일반 사용자 사용
+─────────────────────
+일반 사용자가:
+1. "DTG 제품 관리" 화면 접속
+2. 플로우 위젯에서 각 단계별 건수 확인
+   - 구매: 15건
+   - 설치: 8건
+   - 폐기: 3건
+3. "구매" 단계 클릭 → 데이터 리스트 모달 열림
+4. 설치 완료된 제품 2개 선택
+5. "설치 단계로 이동" 버튼 클릭
+6. 이동 사유 입력: "설치 완료"
+7. 확인 → 데이터 이동 및 오딧 로그 기록
+
+단계 4: 이력 조회
+─────────────────────
+사용자가:
+1. 특정 제품(DTG-001) 상세 화면 열기
+2. "플로우 이력" 탭 클릭
+3. 모든 상태 변경 이력 확인
+   - 언제, 누가, 어떤 단계로 이동했는지
+   - 이동 사유
+```
+
+---
+
+## 12. 색상 및 테마
+
+### 12.1 기본 색상 팔레트
+
+```
+플로우 단계 색상:
+┌──────┬──────┬──────┬──────┬──────┬──────┐
+│ 파랑 │ 초록 │ 주황 │ 빨강 │ 보라 │ 회색 │
+│#3B82F6│#10B981│#F59E0B│#EF4444│#8B5CF6│#6B7280│
+└──────┴──────┴──────┴──────┴──────┴──────┘
+
+상태별 색상:
+- 시작: 파랑
+- 진행 중: 초록
+- 대기: 주황
+- 완료: 회색
+- 거부/폐기: 빨강
+```
+
+### 12.2 다크모드
+
+```
+┌─────────────────────────────────────────┐
+│  플로우 관리 (다크모드)                  │
+├─────────────────────────────────────────┤
+│  배경: #1F2937 (어두운 회색)            │
+│  카드: #374151 (중간 회색)              │
+│  텍스트: #F9FAFB (밝은 회색)            │
+│  강조: #3B82F6 (파랑)                   │
+└─────────────────────────────────────────┘
+```
+
+이상으로 플로우 관리 시스템의 UI 설계를 도식화했습니다!

docs/PHASE1_FLOW_IMPLEMENTATION_SUMMARY.md

@@ -0,0 +1,216 @@
+# Phase 1 플로우 관리 시스템 구현 완료 보고서
+
+## 구현 일시
+
+2024년 (구현 완료)
+
+## 구현 내역
+
+### 1. 데이터베이스 구조 ✅
+
+#### 생성된 테이블 (5개)
+
+1. **flow_definition** - 플로우 정의
+
+   - 플로우 이름, 설명, 연결 테이블명
+   - 활성화 상태 관리
+   - 생성자 및 타임스탬프
+
+2. **flow_step** - 플로우 단계
+
+   - 단계 이름, 순서, 조건(JSONB)
+   - 색상, 캔버스 위치(X, Y)
+   - 타임스탬프
+
+3. **flow_step_connection** - 플로우 단계 연결
+
+   - 시작 단계 → 종료 단계
+   - 연결선 라벨
+
+4. **flow_data_status** - 데이터의 현재 플로우 상태
+
+   - 레코드별 현재 단계 추적
+   - 수정자 및 타임스탬프
+   - UNIQUE 제약조건 (flowId + tableName + recordId)
+
+5. **flow_audit_log** - 플로우 상태 변경 이력
+   - 이전 단계 → 이동 단계
+   - 변경자, 변경 사유, 타임스탬프
+
+#### 생성된 인덱스 (13개)
+
+- 테이블명, 활성 상태, 단계 순서, 레코드 조회 등 성능 최적화
+
+### 2. 백엔드 서비스 구현 ✅
+
+#### 서비스 파일 (6개)
+
+1. **flowConditionParser.ts**
+
+   - JSON 조건을 SQL WHERE 절로 변환
+   - 12개 연산자 지원 (equals, not_equals, in, not_in, greater_than, less_than, >=, <=, is_null, is_not_null, like, not_like)
+   - SQL 인젝션 방지 (컬럼명 검증)
+   - 조건 유효성 검증
+
+2. **flowDefinitionService.ts**
+
+   - 플로우 정의 CRUD
+   - 테이블 존재 여부 확인
+   - 테이블명, 활성 상태로 필터링
+
+3. **flowStepService.ts**
+
+   - 플로우 단계 CRUD
+   - 단계 순서 재정렬 기능
+   - 조건 JSON 검증
+
+4. **flowConnectionService.ts**
+
+   - 플로우 단계 연결 관리
+   - 순환 참조 체크 (DFS 알고리즘)
+   - 나가는/들어오는 연결 조회
+
+5. **flowExecutionService.ts**
+
+   - 단계별 데이터 카운트 조회
+   - 단계별 데이터 리스트 조회 (페이징 지원)
+   - 모든 단계별 카운트 일괄 조회
+   - 현재 플로우 상태 조회
+
+6. **flowDataMoveService.ts**
+   - 데이터 단계 이동 (트랜잭션 처리)
+   - 여러 데이터 일괄 이동
+   - 오딧 로그 기록
+   - 플로우 이력 조회 (단일 레코드 / 전체 플로우)
+
+### 3. API 컨트롤러 및 라우터 ✅
+
+#### FlowController (20개 엔드포인트)
+
+**플로우 정의 (5개)**
+
+- POST /api/flow/definitions - 생성
+- GET /api/flow/definitions - 목록
+- GET /api/flow/definitions/:id - 상세
+- PUT /api/flow/definitions/:id - 수정
+- DELETE /api/flow/definitions/:id - 삭제
+
+**플로우 단계 (3개)**
+
+- POST /api/flow/definitions/:flowId/steps - 생성
+- PUT /api/flow/steps/:stepId - 수정
+- DELETE /api/flow/steps/:stepId - 삭제
+
+**플로우 연결 (2개)**
+
+- POST /api/flow/connections - 생성
+- DELETE /api/flow/connections/:connectionId - 삭제
+
+**플로우 실행 (3개)**
+
+- GET /api/flow/:flowId/step/:stepId/count - 단계별 카운트
+- GET /api/flow/:flowId/step/:stepId/data - 단계별 데이터 리스트
+- GET /api/flow/:flowId/counts - 모든 단계별 카운트
+
+**데이터 이동 (2개)**
+
+- POST /api/flow/move - 단일 데이터 이동
+- POST /api/flow/move-batch - 여러 데이터 일괄 이동
+
+**오딧 로그 (2개)**
+
+- GET /api/flow/audit/:flowId/:recordId - 레코드별 이력
+- GET /api/flow/audit/:flowId - 플로우 전체 이력
+
+### 4. 타입 정의 ✅
+
+**types/flow.ts** - 완전한 TypeScript 타입 정의
+
+- 22개 인터페이스 및 타입
+- 요청/응답 타입 분리
+- ConditionOperator 타입 정의
+
+### 5. 통합 완료 ✅
+
+- app.ts에 flowRoutes 등록
+- 데이터베이스 마이그레이션 실행 완료
+- 모든 테이블 및 인덱스 생성 완료
+
+## 구현된 주요 기능
+
+### 1. 조건 시스템
+
+- 복잡한 AND/OR 조건 지원
+- 12개 연산자로 유연한 필터링
+- SQL 인젝션 방지
+
+### 2. 순환 참조 방지
+
+- DFS 알고리즘으로 순환 참조 체크
+- 무한 루프 방지
+
+### 3. 트랜잭션 처리
+
+- 데이터 이동 시 원자성 보장
+- flow_data_status + flow_audit_log 동시 업데이트
+- 실패 시 자동 롤백
+
+### 4. 성능 최적화
+
+- 적절한 인덱스 생성
+- 페이징 지원
+- 필터링 쿼리 최적화
+
+### 5. 오딧 로그
+
+- 모든 상태 변경 추적
+- 변경자, 변경 사유 기록
+- 단계명 조인 (from_step_name, to_step_name)
+
+## 테스트 준비
+
+**test-flow-api.rest** 파일 생성 (20개 테스트 케이스)
+
+- 플로우 정의 CRUD
+- 플로우 단계 관리
+- 플로우 연결 관리
+- 데이터 조회 (카운트, 리스트)
+- 데이터 이동 (단일, 일괄)
+- 오딧 로그 조회
+
+## 다음 단계 (Phase 2)
+
+### 프론트엔드 구현
+
+1. React Flow 라이브러리 설치
+2. FlowEditor 컴포넌트
+3. FlowConditionBuilder UI
+4. FlowList 컴포넌트
+5. FlowStepPanel 속성 편집
+
+### 예상 소요 시간: 1주
+
+## 기술 스택
+
+- **Backend**: Node.js + Express + TypeScript
+- **Database**: PostgreSQL
+- **ORM**: Raw SQL (트랜잭션 세밀 제어)
+- **Validation**: 커스텀 검증 로직
+
+## 코드 품질
+
+- ✅ TypeScript 타입 안전성
+- ✅ 에러 처리
+- ✅ SQL 인젝션 방지
+- ✅ 트랜잭션 관리
+- ✅ 코드 주석 및 문서화
+
+## 결론
+
+Phase 1의 모든 목표가 성공적으로 완료되었습니다. 백엔드 API가 완전히 구현되었으며, 데이터베이스 스키마도 안정적으로 생성되었습니다. 이제 프론트엔드 구현(Phase 2)을 진행할 준비가 완료되었습니다.
+
+---
+
+**구현 완료일**: 2024년  
+**구현자**: AI Assistant  
+**검토 상태**: 대기 중

frontend/app/(main)/admin/flow-management/[id]/page.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+/**
+ * 플로우 편집기 페이지
+ * - React Flow 기반 비주얼 플로우 편집
+ * - 단계 추가/수정/삭제
+ * - 단계 연결 생성/삭제
+ * - 조건 설정
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useRouter } from "next/navigation";
+import ReactFlow, {
+  Node,
+  Edge,
+  addEdge,
+  Connection,
+  useNodesState,
+  useEdgesState,
+  Background,
+  Controls,
+  MiniMap,
+  Panel,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { ArrowLeft, Plus, Save, Play, Settings, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
+import {
+  getFlowDefinition,
+  getFlowSteps,
+  getFlowConnections,
+  createFlowStep,
+  updateFlowStep,
+  deleteFlowStep,
+  createFlowConnection,
+  deleteFlowConnection,
+  getAllStepCounts,
+} from "@/lib/api/flow";
+import { FlowDefinition, FlowStep, FlowStepConnection, FlowNodeData } from "@/types/flow";
+import { FlowNodeComponent } from "@/components/flow/FlowNodeComponent";
+import { FlowStepPanel } from "@/components/flow/FlowStepPanel";
+import { FlowConditionBuilder } from "@/components/flow/FlowConditionBuilder";
+
+// 커스텀 노드 타입 등록
+const nodeTypes = {
+  flowStep: FlowNodeComponent,
+};
+
+export default function FlowEditorPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { toast } = useToast();
+  const flowId = Number(params.id);
+
+  // 상태
+  const [flowDefinition, setFlowDefinition] = useState<FlowDefinition | null>(null);
+  const [steps, setSteps] = useState<FlowStep[]>([]);
+  const [connections, setConnections] = useState<FlowStepConnection[]>([]);
+  const [selectedStep, setSelectedStep] = useState<FlowStep | null>(null);
+  const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
+  const [loading, setLoading] = useState(true);
+
+  // React Flow 상태
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  // 플로우 데이터 로드
+  const loadFlowData = async () => {
+    setLoading(true);
+    try {
+      // 플로우 정의 로드
+      const flowRes = await getFlowDefinition(flowId);
+      if (flowRes.success && flowRes.data) {
+        setFlowDefinition(flowRes.data);
+      }
+
+      // 단계 로드
+      const stepsRes = await getFlowSteps(flowId);
+      if (stepsRes.success && stepsRes.data) {
+        setSteps(stepsRes.data);
+      }
+
+      // 연결 로드
+      const connectionsRes = await getFlowConnections(flowId);
+      if (connectionsRes.success && connectionsRes.data) {
+        setConnections(connectionsRes.data);
+      }
+
+      // 데이터 카운트 로드
+      const countsRes = await getAllStepCounts(flowId);
+      if (countsRes.success && countsRes.data) {
+        const counts: Record<number, number> = {};
+        countsRes.data.forEach((item) => {
+          counts[item.stepId] = item.count;
+        });
+        setStepCounts(counts);
+      }
+    } catch (error: any) {
+      toast({
+        title: "로딩 실패",
+        description: error.message,
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadFlowData();
+  }, [flowId]);
+
+  // React Flow 노드/엣지 변환
+  useEffect(() => {
+    if (steps.length === 0) return;
+
+    // 노드 생성
+    const newNodes: Node<FlowNodeData>[] = steps.map((step) => ({
+      id: String(step.id),
+      type: "flowStep",
+      position: { x: step.positionX, y: step.positionY },
+      data: {
+        id: step.id,
+        label: step.stepName,
+        stepOrder: step.stepOrder,
+        tableName: step.tableName,
+        count: stepCounts[step.id] || 0,
+        condition: step.conditionJson,
+      },
+    }));
+
+    // 엣지 생성
+    const newEdges: Edge[] = connections.map((conn) => ({
+      id: String(conn.id),
+      source: String(conn.fromStepId),
+      target: String(conn.toStepId),
+      label: conn.label,
+      type: "smoothstep",
+      animated: true,
+    }));
+
+    setNodes(newNodes);
+    setEdges(newEdges);
+  }, [steps, connections, stepCounts]);
+
+  // 노드 추가
+  const handleAddStep = async () => {
+    const newStepOrder = steps.length + 1;
+    const newStep = {
+      stepName: `단계 ${newStepOrder}`,
+      stepOrder: newStepOrder,
+      color: "#3B82F6",
+      positionX: 100 + newStepOrder * 250,
+      positionY: 100,
+    };
+
+    try {
+      const response = await createFlowStep(flowId, newStep);
+      if (response.success && response.data) {
+        toast({
+          title: "단계 추가",
+          description: "새로운 단계가 추가되었습니다.",
+        });
+        loadFlowData();
+      }
+    } catch (error: any) {
+      toast({
+        title: "추가 실패",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 노드 위치 업데이트
+  const handleNodeDragStop = useCallback(
+    async (event: any, node: Node) => {
+      const step = steps.find((s) => s.id === Number(node.id));
+      if (!step) return;
+
+      try {
+        await updateFlowStep(step.id, {
+          positionX: Math.round(node.position.x),
+          positionY: Math.round(node.position.y),
+        });
+      } catch (error: any) {
+        console.error("위치 업데이트 실패:", error);
+      }
+    },
+    [steps],
+  );
+
+  // 연결 생성
+  const handleConnect = useCallback(
+    async (connection: Connection) => {
+      if (!connection.source || !connection.target) return;
+
+      try {
+        const response = await createFlowConnection({
+          flowDefinitionId: flowId,
+          fromStepId: Number(connection.source),
+          toStepId: Number(connection.target),
+        });
+
+        if (response.success) {
+          toast({
+            title: "연결 생성",
+            description: "단계가 연결되었습니다.",
+          });
+          loadFlowData();
+        }
+      } catch (error: any) {
+        toast({
+          title: "연결 실패",
+          description: error.message,
+          variant: "destructive",
+        });
+      }
+    },
+    [flowId],
+  );
+
+  // 노드 클릭
+  const handleNodeClick = useCallback(
+    (event: React.MouseEvent, node: Node) => {
+      const step = steps.find((s) => s.id === Number(node.id));
+      if (step) {
+        setSelectedStep(step);
+      }
+    },
+    [steps],
+  );
+
+  if (loading) {
+    return (
+      <div className="container mx-auto p-6">
+        <p>로딩 중...</p>
+      </div>
+    );
+  }
+
+  if (!flowDefinition) {
+    return (
+      <div className="container mx-auto p-6">
+        <p>플로우를 찾을 수 없습니다.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen flex-col">
+      {/* 헤더 */}
+      <div className="border-b bg-white p-4">
+        <div className="container mx-auto flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Button variant="ghost" size="sm" onClick={() => router.push("/admin/flow-management")}>
+              <ArrowLeft className="mr-2 h-4 w-4" />
+              목록으로
+            </Button>
+            <div>
+              <h1 className="text-xl font-bold">{flowDefinition.name}</h1>
+              <p className="text-muted-foreground text-sm">테이블: {flowDefinition.tableName}</p>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={handleAddStep}>
+              <Plus className="mr-2 h-4 w-4" />
+              단계 추가
+            </Button>
+            <Button size="sm" onClick={() => loadFlowData()}>
+              <Save className="mr-2 h-4 w-4" />
+              새로고침
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 편집기 */}
+      <div className="relative flex-1">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={handleConnect}
+          onNodeClick={handleNodeClick}
+          onNodeDragStop={handleNodeDragStop}
+          nodeTypes={nodeTypes}
+          fitView
+          className="bg-gray-50"
+        >
+          <Background />
+          <Controls />
+          <MiniMap />
+
+          <Panel position="top-right" className="rounded bg-white p-4 shadow">
+            <div className="space-y-2 text-sm">
+              <div>
+                <strong>총 단계:</strong> {steps.length}개
+              </div>
+              <div>
+                <strong>연결:</strong> {connections.length}개
+              </div>
+            </div>
+          </Panel>
+        </ReactFlow>
+      </div>
+
+      {/* 사이드 패널 */}
+      {selectedStep && (
+        <FlowStepPanel
+          step={selectedStep}
+          flowId={flowId}
+          onClose={() => setSelectedStep(null)}
+          onUpdate={loadFlowData}
+        />
+      )}
+    </div>
+  );
+}

frontend/app/(main)/admin/flow-management/page.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+/**
+ * 플로우 관리 메인 페이지
+ * - 플로우 정의 목록
+ * - 플로우 생성/수정/삭제
+ * - 플로우 편집기로 이동
+ */
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Plus, Edit2, Trash2, Play, Workflow, Table, Calendar, User } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { useToast } from "@/hooks/use-toast";
+import { getFlowDefinitions, createFlowDefinition, deleteFlowDefinition } from "@/lib/api/flow";
+import { FlowDefinition } from "@/types/flow";
+
+export default function FlowManagementPage() {
+  const router = useRouter();
+  const { toast } = useToast();
+
+  // 상태
+  const [flows, setFlows] = useState<FlowDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [selectedFlow, setSelectedFlow] = useState<FlowDefinition | null>(null);
+
+  // 생성 폼 상태
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    tableName: "",
+  });
+
+  // 플로우 목록 조회
+  const loadFlows = async () => {
+    setLoading(true);
+    try {
+      const response = await getFlowDefinitions({ isActive: true });
+      if (response.success && response.data) {
+        setFlows(response.data);
+      } else {
+        toast({
+          title: "조회 실패",
+          description: response.error || "플로우 목록을 불러올 수 없습니다.",
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류 발생",
+        description: error.message,
+        variant: "destructive",
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadFlows();
+  }, []);
+
+  // 플로우 생성
+  const handleCreate = async () => {
+    if (!formData.name || !formData.tableName) {
+      toast({
+        title: "입력 오류",
+        description: "플로우 이름과 테이블 이름은 필수입니다.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const response = await createFlowDefinition(formData);
+      if (response.success && response.data) {
+        toast({
+          title: "생성 완료",
+          description: "플로우가 성공적으로 생성되었습니다.",
+        });
+        setIsCreateDialogOpen(false);
+        setFormData({ name: "", description: "", tableName: "" });
+        loadFlows();
+      } else {
+        toast({
+          title: "생성 실패",
+          description: response.error || response.message,
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류 발생",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 플로우 삭제
+  const handleDelete = async () => {
+    if (!selectedFlow) return;
+
+    try {
+      const response = await deleteFlowDefinition(selectedFlow.id);
+      if (response.success) {
+        toast({
+          title: "삭제 완료",
+          description: "플로우가 삭제되었습니다.",
+        });
+        setIsDeleteDialogOpen(false);
+        setSelectedFlow(null);
+        loadFlows();
+      } else {
+        toast({
+          title: "삭제 실패",
+          description: response.error,
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류 발생",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 플로우 편집기로 이동
+  const handleEdit = (flowId: number) => {
+    router.push(`/admin/flow-management/${flowId}`);
+  };
+
+  return (
+    <div className="container mx-auto space-y-6 p-6">
+      {/* 헤더 */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="flex items-center gap-2 text-3xl font-bold">
+            <Workflow className="h-8 w-8" />
+            플로우 관리
+          </h1>
+          <p className="text-muted-foreground mt-1">업무 프로세스 플로우를 생성하고 관리합니다</p>
+        </div>
+        <Button onClick={() => setIsCreateDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />새 플로우 생성
+        </Button>
+      </div>
+
+      {/* 플로우 카드 목록 */}
+      {loading ? (
+        <div className="py-12 text-center">
+          <p className="text-muted-foreground">로딩 중...</p>
+        </div>
+      ) : flows.length === 0 ? (
+        <Card>
+          <CardContent className="py-12 text-center">
+            <Workflow className="text-muted-foreground mx-auto mb-4 h-12 w-12" />
+            <p className="text-muted-foreground mb-4">생성된 플로우가 없습니다</p>
+            <Button onClick={() => setIsCreateDialogOpen(true)}>
+              <Plus className="mr-2 h-4 w-4" />첫 플로우 만들기
+            </Button>
+          </CardContent>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {flows.map((flow) => (
+            <Card
+              key={flow.id}
+              className="cursor-pointer transition-shadow hover:shadow-lg"
+              onClick={() => handleEdit(flow.id)}
+            >
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle className="flex items-center gap-2">
+                      {flow.name}
+                      {flow.isActive && <Badge variant="success">활성</Badge>}
+                    </CardTitle>
+                    <CardDescription className="mt-2">{flow.description || "설명 없음"}</CardDescription>
+                  </div>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 text-sm">
+                  <div className="text-muted-foreground flex items-center gap-2">
+                    <Table className="h-4 w-4" />
+                    <span>{flow.tableName}</span>
+                  </div>
+                  <div className="text-muted-foreground flex items-center gap-2">
+                    <User className="h-4 w-4" />
+                    <span>생성자: {flow.createdBy}</span>
+                  </div>
+                  <div className="text-muted-foreground flex items-center gap-2">
+                    <Calendar className="h-4 w-4" />
+                    <span>{new Date(flow.updatedAt).toLocaleDateString("ko-KR")}</span>
+                  </div>
+                </div>
+
+                <div className="mt-4 flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleEdit(flow.id);
+                    }}
+                  >
+                    <Edit2 className="mr-2 h-4 w-4" />
+                    편집
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setSelectedFlow(flow);
+                      setIsDeleteDialogOpen(true);
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+
+      {/* 생성 다이얼로그 */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>새 플로우 생성</DialogTitle>
+            <DialogDescription>새로운 업무 프로세스 플로우를 생성합니다</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="name">플로우 이름 *</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="예: 제품 수명주기 관리"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="tableName">연결 테이블 *</Label>
+              <Input
+                id="tableName"
+                value={formData.tableName}
+                onChange={(e) => setFormData({ ...formData, tableName: e.target.value })}
+                placeholder="예: products"
+              />
+              <p className="text-muted-foreground mt-1 text-xs">플로우가 관리할 데이터 테이블 이름을 입력하세요</p>
+            </div>
+
+            <div>
+              <Label htmlFor="description">설명</Label>
+              <Textarea
+                id="description"
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder="플로우에 대한 설명을 입력하세요"
+                rows={3}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
+              취소
+            </Button>
+            <Button onClick={handleCreate}>생성</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 삭제 확인 다이얼로그 */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>플로우 삭제</DialogTitle>
+            <DialogDescription>
+              정말로 "{selectedFlow?.name}" 플로우를 삭제하시겠습니까?
+              <br />이 작업은 되돌릴 수 없습니다.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setIsDeleteDialogOpen(false);
+                setSelectedFlow(null);
+              }}
+            >
+              취소
+            </Button>
+            <Button variant="destructive" onClick={handleDelete}>
+              삭제
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

frontend/components/flow/FlowConditionBuilder.tsx

@@ -0,0 +1,255 @@
+/**
+ * 플로우 조건 빌더
+ * 동적 조건 생성 UI
+ */
+
+import { useState, useEffect } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { FlowConditionGroup, FlowCondition, ConditionOperator } from "@/types/flow";
+import { getTableColumns } from "@/lib/api/tableManagement";
+
+interface FlowConditionBuilderProps {
+  flowId: number;
+  tableName?: string; // 조회할 테이블명
+  condition?: FlowConditionGroup;
+  onChange: (condition: FlowConditionGroup | undefined) => void;
+}
+
+const OPERATORS: { value: ConditionOperator; label: string }[] = [
+  { 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: "in", label: "포함 (IN)" },
+  { value: "not_in", label: "제외 (NOT IN)" },
+  { value: "like", label: "유사 (LIKE)" },
+  { value: "not_like", label: "유사하지 않음 (NOT LIKE)" },
+  { value: "is_null", label: "NULL" },
+  { value: "is_not_null", label: "NOT NULL" },
+];
+
+export function FlowConditionBuilder({ flowId, tableName, condition, onChange }: FlowConditionBuilderProps) {
+  const [columns, setColumns] = useState<any[]>([]);
+  const [loadingColumns, setLoadingColumns] = useState(false);
+  const [conditionType, setConditionType] = useState<"AND" | "OR">(condition?.type || "AND");
+  const [conditions, setConditions] = useState<FlowCondition[]>(condition?.conditions || []);
+
+  // 테이블 컬럼 로드
+  useEffect(() => {
+    if (!tableName) {
+      setColumns([]);
+      return;
+    }
+
+    const loadColumns = async () => {
+      try {
+        setLoadingColumns(true);
+        console.log("🔍 Loading columns for table:", tableName);
+        const response = await getTableColumns(tableName);
+        console.log("📦 Column API response:", response);
+
+        if (response.success && response.data?.columns) {
+          const columnArray = Array.isArray(response.data.columns) ? response.data.columns : [];
+          console.log("✅ Setting columns:", columnArray.length, "items");
+          setColumns(columnArray);
+        } else {
+          console.error("❌ Failed to load columns:", response.message);
+          setColumns([]);
+        }
+      } catch (error) {
+        console.error("❌ Exception loading columns:", error);
+        setColumns([]);
+      } finally {
+        setLoadingColumns(false);
+      }
+    };
+
+    loadColumns();
+  }, [tableName]);
+
+  // 조건 변경 시 부모에 전달
+  useEffect(() => {
+    if (conditions.length === 0) {
+      onChange(undefined);
+    } else {
+      onChange({
+        type: conditionType,
+        conditions,
+      });
+    }
+  }, [conditionType, conditions]);
+
+  // 조건 추가
+  const addCondition = () => {
+    setConditions([
+      ...conditions,
+      {
+        column: "",
+        operator: "equals",
+        value: "",
+      },
+    ]);
+  };
+
+  // 조건 수정
+  const updateCondition = (index: number, field: keyof FlowCondition, value: any) => {
+    const newConditions = [...conditions];
+    newConditions[index] = {
+      ...newConditions[index],
+      [field]: value,
+    };
+    setConditions(newConditions);
+  };
+
+  // 조건 삭제
+  const removeCondition = (index: number) => {
+    setConditions(conditions.filter((_, i) => i !== index));
+  };
+
+  // value가 필요 없는 연산자 체크
+  const needsValue = (operator: ConditionOperator) => {
+    return operator !== "is_null" && operator !== "is_not_null";
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* 조건 타입 선택 */}
+      <div>
+        <Label>조건 결합 방식</Label>
+        <Select value={conditionType} onValueChange={(value) => setConditionType(value as "AND" | "OR")}>
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="AND">AND (모든 조건 만족)</SelectItem>
+            <SelectItem value="OR">OR (하나 이상 만족)</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* 조건 목록 */}
+      <div className="space-y-3">
+        {conditions.length === 0 ? (
+          <div className="text-muted-foreground rounded border-2 border-dashed py-4 text-center text-sm">
+            조건이 없습니다
+            <br />
+            조건을 추가하여 데이터를 필터링하세요
+          </div>
+        ) : (
+          conditions.map((cond, index) => (
+            <div key={index} className="space-y-2 rounded border bg-gray-50 p-3">
+              {/* 조건 번호 및 삭제 버튼 */}
+              <div className="flex items-center justify-between">
+                <Badge variant="outline">조건 {index + 1}</Badge>
+                <Button variant="ghost" size="sm" onClick={() => removeCondition(index)}>
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              </div>
+
+              {/* 컬럼 선택 */}
+              <div>
+                <Label className="text-xs">컬럼</Label>
+                {loadingColumns ? (
+                  <Input value="컬럼 로딩 중..." disabled className="h-8" />
+                ) : !Array.isArray(columns) || columns.length === 0 ? (
+                  <Input
+                    value={cond.column}
+                    onChange={(e) => updateCondition(index, "column", e.target.value)}
+                    placeholder="테이블을 먼저 선택하세요"
+                    className="h-8"
+                  />
+                ) : (
+                  <Select value={cond.column} onValueChange={(value) => updateCondition(index, "column", value)}>
+                    <SelectTrigger className="h-8">
+                      <SelectValue placeholder="컬럼 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {columns.map((col) => (
+                        <SelectItem key={col.columnName} value={col.columnName}>
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">{col.displayName || col.columnName}</span>
+                            <span className="text-xs text-gray-500">({col.dataType})</span>
+                          </div>
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+
+              {/* 연산자 선택 */}
+              <div>
+                <Label className="text-xs">연산자</Label>
+                <Select
+                  value={cond.operator}
+                  onValueChange={(value) => updateCondition(index, "operator", value as ConditionOperator)}
+                >
+                  <SelectTrigger className="h-8">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {OPERATORS.map((op) => (
+                      <SelectItem key={op.value} value={op.value}>
+                        {op.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* 값 입력 */}
+              {needsValue(cond.operator) && (
+                <div>
+                  <Label className="text-xs">값</Label>
+                  <Input
+                    value={cond.value || ""}
+                    onChange={(e) => updateCondition(index, "value", e.target.value)}
+                    placeholder="값 입력"
+                    className="h-8"
+                  />
+                  {(cond.operator === "in" || cond.operator === "not_in") && (
+                    <p className="text-muted-foreground mt-1 text-xs">쉼표(,)로 구분하여 여러 값 입력</p>
+                  )}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* 조건 추가 버튼 */}
+      <Button variant="outline" size="sm" onClick={addCondition} className="w-full">
+        <Plus className="mr-2 h-4 w-4" />
+        조건 추가
+      </Button>
+
+      {/* 조건 요약 */}
+      {conditions.length > 0 && (
+        <div className="rounded bg-blue-50 p-3 text-sm">
+          <strong>조건 요약:</strong>
+          <div className="mt-2 space-y-1">
+            {conditions.map((cond, index) => (
+              <div key={index} className="flex items-center gap-2">
+                <Badge variant="secondary" className="text-xs">
+                  {cond.column}
+                </Badge>
+                <span className="text-muted-foreground">
+                  {OPERATORS.find((op) => op.value === cond.operator)?.label}
+                </span>
+                {needsValue(cond.operator) && <code className="rounded bg-white px-2 py-1 text-xs">{cond.value}</code>}
+                {index < conditions.length - 1 && <Badge>{conditionType}</Badge>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/components/flow/FlowDataListModal.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Loader2, AlertCircle, ArrowRight } from "lucide-react";
+import { getStepDataList, moveDataToNextStep } from "@/lib/api/flow";
+import { toast } from "sonner";
+
+interface FlowDataListModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  flowId: number;
+  stepId: number;
+  stepName: string;
+  allowDataMove?: boolean;
+  onDataMoved?: () => void; // 데이터 이동 후 리프레시
+}
+
+export function FlowDataListModal({
+  open,
+  onOpenChange,
+  flowId,
+  stepId,
+  stepName,
+  allowDataMove = false,
+  onDataMoved,
+}: FlowDataListModalProps) {
+  const [data, setData] = useState<any[]>([]);
+  const [columns, setColumns] = useState<string[]>([]);
+  const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [movingData, setMovingData] = useState(false);
+
+  // 데이터 조회
+  useEffect(() => {
+    if (!open) return;
+
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        setSelectedRows(new Set());
+
+        const response = await getStepDataList(flowId, stepId, 1, 100);
+
+        if (!response.success) {
+          throw new Error(response.message || "데이터를 불러올 수 없습니다");
+        }
+
+        const rows = response.data?.records || [];
+        setData(rows);
+
+        // 컬럼 추출 (첫 번째 행에서)
+        if (rows.length > 0) {
+          setColumns(Object.keys(rows[0]));
+        } else {
+          setColumns([]);
+        }
+      } catch (err: any) {
+        console.error("Failed to load flow data:", err);
+        setError(err.message || "데이터를 불러오는데 실패했습니다");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
+  }, [open, flowId, stepId]);
+
+  // 전체 선택/해제
+  const toggleAllSelection = () => {
+    if (selectedRows.size === data.length) {
+      setSelectedRows(new Set());
+    } else {
+      setSelectedRows(new Set(data.map((_, index) => index)));
+    }
+  };
+
+  // 개별 행 선택/해제
+  const toggleRowSelection = (index: number) => {
+    const newSelected = new Set(selectedRows);
+    if (newSelected.has(index)) {
+      newSelected.delete(index);
+    } else {
+      newSelected.add(index);
+    }
+    setSelectedRows(newSelected);
+  };
+
+  // 선택된 데이터 이동
+  const handleMoveData = async () => {
+    if (selectedRows.size === 0) {
+      toast.error("이동할 데이터를 선택해주세요");
+      return;
+    }
+
+    try {
+      setMovingData(true);
+
+      // 선택된 행의 ID 추출 (가정: 각 행에 'id' 필드가 있음)
+      const selectedDataIds = Array.from(selectedRows).map((index) => data[index].id);
+
+      // 데이터 이동 API 호출
+      for (const dataId of selectedDataIds) {
+        const response = await moveDataToNextStep(flowId, stepId, dataId);
+        if (!response.success) {
+          throw new Error(`데이터 이동 실패: ${response.message}`);
+        }
+      }
+
+      toast.success(`${selectedRows.size}건의 데이터를 다음 단계로 이동했습니다`);
+
+      // 모달 닫고 리프레시
+      onOpenChange(false);
+      onDataMoved?.();
+    } catch (err: any) {
+      console.error("Failed to move data:", err);
+      toast.error(err.message || "데이터 이동에 실패했습니다");
+    } finally {
+      setMovingData(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[80vh] max-w-4xl flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            {stepName}
+            <Badge variant="secondary">{data.length}건</Badge>
+          </DialogTitle>
+          <DialogDescription>이 단계에 해당하는 데이터 목록입니다</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+              <span className="text-muted-foreground ml-2 text-sm">데이터 로딩 중...</span>
+            </div>
+          ) : error ? (
+            <div className="border-destructive/50 bg-destructive/10 flex items-center gap-2 rounded-lg border p-4">
+              <AlertCircle className="text-destructive h-5 w-5" />
+              <span className="text-destructive text-sm">{error}</span>
+            </div>
+          ) : data.length === 0 ? (
+            <div className="text-muted-foreground flex items-center justify-center py-12 text-sm">
+              데이터가 없습니다
+            </div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    {allowDataMove && (
+                      <TableHead className="w-12">
+                        <Checkbox
+                          checked={selectedRows.size === data.length && data.length > 0}
+                          onCheckedChange={toggleAllSelection}
+                        />
+                      </TableHead>
+                    )}
+                    {columns.map((col) => (
+                      <TableHead key={col}>{col}</TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {data.map((row, index) => (
+                    <TableRow key={index}>
+                      {allowDataMove && (
+                        <TableCell>
+                          <Checkbox
+                            checked={selectedRows.has(index)}
+                            onCheckedChange={() => toggleRowSelection(index)}
+                          />
+                        </TableCell>
+                      )}
+                      {columns.map((col) => (
+                        <TableCell key={col}>
+                          {row[col] !== null && row[col] !== undefined ? String(row[col]) : "-"}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-between border-t pt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            닫기
+          </Button>
+
+          {allowDataMove && data.length > 0 && (
+            <Button onClick={handleMoveData} disabled={selectedRows.size === 0 || movingData}>
+              {movingData ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  이동 중...
+                </>
+              ) : (
+                <>
+                  <ArrowRight className="mr-2 h-4 w-4" />
+                  다음 단계로 이동 ({selectedRows.size})
+                </>
+              )}
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

frontend/components/flow/FlowNodeComponent.tsx

@@ -0,0 +1,104 @@
+/**
+ * 플로우 노드 컴포넌트
+ * React Flow 커스텀 노드
+ */
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "reactflow";
+import { FlowNodeData, FlowCondition, ConditionOperator } from "@/types/flow";
+import { Badge } from "@/components/ui/badge";
+
+// 조건을 자연어로 변환하는 헬퍼 함수
+const formatCondition = (cond: FlowCondition): string => {
+  const operatorLabels: Record<ConditionOperator, string> = {
+    equals: "=",
+    not_equals: "≠",
+    greater_than: ">",
+    less_than: "<",
+    greater_than_or_equal: "≥",
+    less_than_or_equal: "≤",
+    in: "IN",
+    not_in: "NOT IN",
+    like: "LIKE",
+    not_like: "NOT LIKE",
+    is_null: "IS NULL",
+    is_not_null: "IS NOT NULL",
+  };
+
+  const operatorLabel = operatorLabels[cond.operator] || cond.operator;
+
+  if (cond.operator === "is_null" || cond.operator === "is_not_null") {
+    return `${cond.column} ${operatorLabel}`;
+  }
+
+  return `${cond.column} ${operatorLabel} "${cond.value || ""}"`;
+};
+
+const formatAllConditions = (data: FlowNodeData): string => {
+  if (!data.condition || data.condition.conditions.length === 0) {
+    return "조건 없음";
+  }
+
+  const conditions = data.condition.conditions;
+  const type = data.condition.type;
+
+  // 조건이 많으면 간략하게 표시
+  if (conditions.length > 2) {
+    return `${conditions.length}개 조건 (${type})`;
+  }
+
+  const connector = type === "AND" ? " AND " : " OR ";
+  return conditions.map(formatCondition).join(connector);
+};
+
+export const FlowNodeComponent = memo(({ data }: NodeProps<FlowNodeData>) => {
+  return (
+    <div className="bg-card min-w-[200px] rounded-lg border px-4 py-3 shadow-sm transition-shadow hover:shadow-md">
+      {/* 입력 핸들 */}
+      <Handle type="target" position={Position.Left} className="border-primary bg-background h-3 w-3 border-2" />
+
+      {/* 노드 내용 */}
+      <div>
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <Badge variant="outline" className="text-xs">
+            단계 {data.stepOrder}
+          </Badge>
+        </div>
+
+        <div className="text-foreground mb-2 text-sm font-semibold">{data.label}</div>
+
+        {/* 테이블 정보 */}
+        {data.tableName && (
+          <div className="bg-muted text-muted-foreground mb-2 flex items-center gap-1 rounded-md px-2 py-1 text-xs">
+            <span>📊</span>
+            <span className="truncate">{data.tableName}</span>
+          </div>
+        )}
+
+        {/* 데이터 건수 */}
+        {data.count !== undefined && (
+          <Badge variant="secondary" className="mb-2 text-xs">
+            {data.count}건
+          </Badge>
+        )}
+
+        {/* 조건 미리보기 */}
+        {data.condition && data.condition.conditions.length > 0 ? (
+          <div className="mt-2">
+            <div className="text-muted-foreground mb-1 text-xs font-medium">조건:</div>
+            <div className="text-muted-foreground text-xs break-words" style={{ lineHeight: "1.4" }}>
+              {formatAllConditions(data)}
+            </div>
+          </div>
+        ) : (
+          <div className="text-muted-foreground mt-2 text-xs">조건 없음</div>
+        )}
+      </div>
+
+      {/* 출력 핸들 */}
+      <Handle type="source" position={Position.Right} className="border-primary bg-background h-3 w-3 border-2" />
+    </div>
+  );
+});
+
+FlowNodeComponent.displayName = "FlowNodeComponent";

frontend/components/flow/FlowStepPanel.tsx

@@ -0,0 +1,246 @@
+/**
+ * 플로우 단계 설정 패널
+ * 선택된 단계의 속성 편집
+ */
+
+import { useState, useEffect } from "react";
+import { X, Trash2, Save, Check, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { useToast } from "@/hooks/use-toast";
+import { updateFlowStep, deleteFlowStep } from "@/lib/api/flow";
+import { FlowStep } from "@/types/flow";
+import { FlowConditionBuilder } from "./FlowConditionBuilder";
+import { tableManagementApi } from "@/lib/api/tableManagement";
+import { cn } from "@/lib/utils";
+
+interface FlowStepPanelProps {
+  step: FlowStep;
+  flowId: number;
+  onClose: () => void;
+  onUpdate: () => void;
+}
+
+export function FlowStepPanel({ step, flowId, onClose, onUpdate }: FlowStepPanelProps) {
+  const { toast } = useToast();
+
+  const [formData, setFormData] = useState({
+    stepName: step.stepName,
+    tableName: step.tableName || "",
+    conditionJson: step.conditionJson,
+  });
+
+  const [tableList, setTableList] = useState<any[]>([]);
+  const [loadingTables, setLoadingTables] = useState(true);
+  const [openTableCombobox, setOpenTableCombobox] = useState(false);
+
+  // 테이블 목록 조회
+  useEffect(() => {
+    const loadTables = async () => {
+      try {
+        setLoadingTables(true);
+        const response = await tableManagementApi.getTableList();
+        if (response.success && response.data) {
+          setTableList(response.data);
+        }
+      } catch (error) {
+        console.error("Failed to load tables:", error);
+      } finally {
+        setLoadingTables(false);
+      }
+    };
+    loadTables();
+  }, []);
+
+  useEffect(() => {
+    setFormData({
+      stepName: step.stepName,
+      tableName: step.tableName || "",
+      conditionJson: step.conditionJson,
+    });
+  }, [step]);
+
+  // 저장
+  const handleSave = async () => {
+    try {
+      const response = await updateFlowStep(step.id, formData);
+      if (response.success) {
+        toast({
+          title: "저장 완료",
+          description: "단계가 수정되었습니다.",
+        });
+        onUpdate();
+        onClose();
+      } else {
+        toast({
+          title: "저장 실패",
+          description: response.error,
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류 발생",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // 삭제
+  const handleDelete = async () => {
+    if (!confirm(`"${step.stepName}" 단계를 삭제하시겠습니까?\n이 작업은 되돌릴 수 없습니다.`)) {
+      return;
+    }
+
+    try {
+      const response = await deleteFlowStep(step.id);
+      if (response.success) {
+        toast({
+          title: "삭제 완료",
+          description: "단계가 삭제되었습니다.",
+        });
+        onUpdate();
+        onClose();
+      } else {
+        toast({
+          title: "삭제 실패",
+          description: response.error,
+          variant: "destructive",
+        });
+      }
+    } catch (error: any) {
+      toast({
+        title: "오류 발생",
+        description: error.message,
+        variant: "destructive",
+      });
+    }
+  };
+
+  return (
+    <div className="fixed top-0 right-0 z-50 h-full w-96 overflow-y-auto border-l bg-white shadow-xl">
+      <div className="space-y-6 p-6">
+        {/* 헤더 */}
+        <div className="flex items-center justify-between">
+          <h2 className="text-xl font-bold">단계 설정</h2>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* 기본 정보 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>기본 정보</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <Label>단계 이름</Label>
+              <Input
+                value={formData.stepName}
+                onChange={(e) => setFormData({ ...formData, stepName: e.target.value })}
+                placeholder="단계 이름 입력"
+              />
+            </div>
+
+            <div>
+              <Label>단계 순서</Label>
+              <Input value={step.stepOrder} disabled />
+            </div>
+
+            <div>
+              <Label>조회할 테이블</Label>
+              <Popover open={openTableCombobox} onOpenChange={setOpenTableCombobox}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={openTableCombobox}
+                    className="w-full justify-between"
+                    disabled={loadingTables}
+                  >
+                    {formData.tableName
+                      ? tableList.find((table) => table.tableName === formData.tableName)?.displayName ||
+                        formData.tableName
+                      : loadingTables
+                        ? "로딩 중..."
+                        : "테이블 선택"}
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-[400px] p-0">
+                  <Command>
+                    <CommandInput placeholder="테이블 검색..." />
+                    <CommandList>
+                      <CommandEmpty>테이블을 찾을 수 없습니다.</CommandEmpty>
+                      <CommandGroup>
+                        {tableList.map((table) => (
+                          <CommandItem
+                            key={table.tableName}
+                            value={table.tableName}
+                            onSelect={(currentValue) => {
+                              setFormData({ ...formData, tableName: currentValue });
+                              setOpenTableCombobox(false);
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                formData.tableName === table.tableName ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                            <div className="flex flex-col">
+                              <span className="font-medium">{table.displayName || table.tableName}</span>
+                              {table.description && <span className="text-xs text-gray-500">{table.description}</span>}
+                            </div>
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <p className="mt-1 text-xs text-gray-500">이 단계에서 조건을 적용할 테이블을 선택합니다</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 조건 설정 */}
+        <Card>
+          <CardHeader>
+            <CardTitle>조건 설정</CardTitle>
+            <CardDescription>이 단계에 포함될 데이터의 조건을 설정합니다</CardDescription>
+          </CardHeader>
+          <CardContent>
+            {!formData.tableName ? (
+              <div className="py-8 text-center text-gray-500">먼저 테이블을 선택해주세요</div>
+            ) : (
+              <FlowConditionBuilder
+                flowId={flowId}
+                tableName={formData.tableName}
+                condition={formData.conditionJson}
+                onChange={(condition) => setFormData({ ...formData, conditionJson: condition })}
+              />
+            )}
+          </CardContent>
+        </Card>
+
+        {/* 액션 버튼 */}
+        <div className="flex gap-2">
+          <Button className="flex-1" onClick={handleSave}>
+            <Save className="mr-2 h-4 w-4" />
+            저장
+          </Button>
+          <Button variant="destructive" onClick={handleDelete}>
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/screen/InteractiveScreenViewer.tsx

@@ -307,6 +307,39 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
       );
     }
 
+    // 플로우 위젯 컴포넌트 처리
+    if (comp.type === "flow" || (comp.type === "component" && (comp as any).componentConfig?.type === "flow-widget")) {
+      const FlowWidget = require("@/components/screen/widgets/FlowWidget").FlowWidget;
+      // componentConfig에서 flowId 추출
+      const flowConfig = (comp as any).componentConfig || {};
+      
+      console.log("🔍 InteractiveScreenViewer 플로우 위젯 변환:", {
+        compType: comp.type,
+        hasComponentConfig: !!(comp as any).componentConfig,
+        flowConfig,
+        flowConfigFlowId: flowConfig.flowId,
+        finalFlowId: flowConfig.flowId,
+      });
+      
+      const flowComponent = {
+        ...comp,
+        type: "flow" as const,
+        flowId: flowConfig.flowId,
+        flowName: flowConfig.flowName,
+        showStepCount: flowConfig.showStepCount !== false,
+        allowDataMove: flowConfig.allowDataMove || false,
+        displayMode: flowConfig.displayMode || "horizontal",
+      };
+      
+      console.log("🔍 InteractiveScreenViewer 최종 flowComponent:", flowComponent);
+      
+      return (
+        <div className="h-full w-full">
+          <FlowWidget component={flowComponent as any} />
+        </div>
+      );
+    }
+
     const { widgetType, label, placeholder, required, readonly, columnName } = comp;
     const fieldName = columnName || comp.id;
     const currentValue = formData[fieldName] || "";

frontend/components/screen/RealtimePreview.tsx

@@ -66,7 +66,7 @@ interface RealtimePreviewProps {
 const getAreaIcon = (layoutDirection?: "horizontal" | "vertical") => {
   switch (layoutDirection) {
     case "horizontal":
-      return <Layout className="h-4 w-4 text-primary" />;
+      return <Layout className="text-primary h-4 w-4" />;
     case "vertical":
       return <Columns className="h-4 w-4 text-purple-600" />;
     default:
@@ -86,7 +86,7 @@ const renderArea = (component: ComponentData, children?: React.ReactNode) => {
     <div className="flex h-full w-full items-center justify-center rounded border-2 border-dashed border-gray-300 bg-gray-50">
       <div className="text-center">
         {getAreaIcon(layoutDirection)}
-        <p className="mt-2 text-sm text-muted-foreground">{label || `${layoutDirection || "기본"} 영역`}</p>
+        <p className="text-muted-foreground mt-2 text-sm">{label || `${layoutDirection || "기본"} 영역`}</p>
         <p className="text-xs text-gray-400">컴포넌트를 드래그해서 추가하세요</p>
       </div>
     </div>
@@ -130,12 +130,12 @@ const WidgetRenderer: React.FC<{ component: ComponentData }> = ({ component }) =
   // 파일 컴포넌트는 별도 로직에서 처리하므로 여기서는 제외
   if (isFileComponent(widget)) {
     // console.log("🎯 RealtimePreview - 파일 컴포넌트 감지 (별도 처리):", {
-      // componentId: widget.id,
+    // componentId: widget.id,
-      // widgetType: widgetType,
+    // widgetType: widgetType,
-      // isFileComponent: true
+    // isFileComponent: true
     // });
 
-    return <div className="text-xs text-gray-500 p-2">파일 컴포넌트 (별도 렌더링)</div>;
+    return <div className="p-2 text-xs text-gray-500">파일 컴포넌트 (별도 렌더링)</div>;
   }
 
   // 동적 웹타입 렌더링 사용
@@ -182,7 +182,7 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
     case "text":
     case "email":
     case "tel":
-      return <Type className="h-4 w-4 text-primary" />;
+      return <Type className="text-primary h-4 w-4" />;
     case "number":
     case "decimal":
       return <Hash className="h-4 w-4 text-green-600" />;
@@ -196,11 +196,11 @@ const getWidgetIcon = (widgetType: WebType | undefined) => {
       return <AlignLeft className="h-4 w-4 text-indigo-600" />;
     case "boolean":
     case "checkbox":
-      return <CheckSquare className="h-4 w-4 text-primary" />;
+      return <CheckSquare className="text-primary h-4 w-4" />;
     case "radio":
-      return <Radio className="h-4 w-4 text-primary" />;
+      return <Radio className="text-primary h-4 w-4" />;
     case "code":
-      return <Code className="h-4 w-4 text-muted-foreground" />;
+      return <Code className="text-muted-foreground h-4 w-4" />;
     case "entity":
       return <Building className="h-4 w-4 text-cyan-600" />;
     case "file":
@@ -227,39 +227,39 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   useEffect(() => {
     const handleGlobalFileStateChange = (event: CustomEvent) => {
       // console.log("🎯🎯🎯 RealtimePreview 이벤트 수신:", {
-        // eventComponentId: event.detail.componentId,
+      // eventComponentId: event.detail.componentId,
-        // currentComponentId: component.id,
+      // currentComponentId: component.id,
-        // isMatch: event.detail.componentId === component.id,
+      // isMatch: event.detail.componentId === component.id,
-        // filesCount: event.detail.files?.length || 0,
+      // filesCount: event.detail.files?.length || 0,
-        // action: event.detail.action,
+      // action: event.detail.action,
-        // delayed: event.detail.delayed || false,
+      // delayed: event.detail.delayed || false,
-        // attempt: event.detail.attempt || 1,
+      // attempt: event.detail.attempt || 1,
-        // eventDetail: event.detail
+      // eventDetail: event.detail
       // });
 
       if (event.detail.componentId === component.id) {
         // console.log("✅✅✅ RealtimePreview 파일 상태 변경 감지 - 리렌더링 시작:", {
-          // componentId: component.id,
+        // componentId: component.id,
-          // filesCount: event.detail.files?.length || 0,
+        // filesCount: event.detail.files?.length || 0,
-          // action: event.detail.action,
+        // action: event.detail.action,
-          // oldTrigger: fileUpdateTrigger,
+        // oldTrigger: fileUpdateTrigger,
-          // delayed: event.detail.delayed || false,
+        // delayed: event.detail.delayed || false,
-          // attempt: event.detail.attempt || 1
+        // attempt: event.detail.attempt || 1
         // });
-        setFileUpdateTrigger(prev => {
+        setFileUpdateTrigger((prev) => {
           const newTrigger = prev + 1;
           // console.log("🔄🔄🔄 fileUpdateTrigger 업데이트:", {
-            // old: prev, 
+          // old: prev,
-            // new: newTrigger,
+          // new: newTrigger,
-            // componentId: component.id,
+          // componentId: component.id,
-            // attempt: event.detail.attempt || 1
+          // attempt: event.detail.attempt || 1
           // });
           return newTrigger;
         });
       } else {
         // console.log("❌ 컴포넌트 ID 불일치:", {
-          // eventComponentId: event.detail.componentId,
+        // eventComponentId: event.detail.componentId,
-          // currentComponentId: component.id
+        // currentComponentId: component.id
         // });
       }
     };
@@ -267,33 +267,33 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
     // 강제 업데이트 함수 등록
     const forceUpdate = (componentId: string, files: any[]) => {
       // console.log("🔥🔥🔥 RealtimePreview 강제 업데이트 호출:", {
-        // targetComponentId: componentId,
+      // targetComponentId: componentId,
-        // currentComponentId: component.id,
+      // currentComponentId: component.id,
-        // isMatch: componentId === component.id,
+      // isMatch: componentId === component.id,
-        // filesCount: files.length
+      // filesCount: files.length
       // });
 
       if (componentId === component.id) {
         // console.log("✅✅✅ RealtimePreview 강제 업데이트 적용:", {
-          // componentId: component.id,
+        // componentId: component.id,
-          // filesCount: files.length,
+        // filesCount: files.length,
-          // oldTrigger: fileUpdateTrigger
+        // oldTrigger: fileUpdateTrigger
         // });
-        setFileUpdateTrigger(prev => {
+        setFileUpdateTrigger((prev) => {
           const newTrigger = prev + 1;
           // console.log("🔄🔄🔄 강제 fileUpdateTrigger 업데이트:", {
-            // old: prev, 
+          // old: prev,
-            // new: newTrigger,
+          // new: newTrigger,
-            // componentId: component.id 
+          // componentId: component.id
           // });
           return newTrigger;
         });
       }
     };
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       try {
-        window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+        window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
 
         // 전역 강제 업데이트 함수 등록
         if (!(window as any).forceRealtimePreviewUpdate) {
@@ -305,7 +305,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
 
       return () => {
         try {
-          window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+          window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
         } catch (error) {
           // console.warn("RealtimePreview 이벤트 리스너 제거 실패:", error);
         }
@@ -327,7 +327,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 선택된 컴포넌트 스타일
   const selectionStyle = isSelected
     ? {
-        outline: "2px solid #3b82f6",
+        outline: "2px solid rgb(59, 130, 246)",
         outlineOffset: "2px",
       }
     : {};
@@ -395,6 +395,39 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
             );
           })()}
 
+        {/* 플로우 위젯 타입 */}
+        {(type === "flow" || (type === "component" && (component as any).componentConfig?.type === "flow-widget")) &&
+          (() => {
+            const FlowWidget = require("@/components/screen/widgets/FlowWidget").FlowWidget;
+            // componentConfig에서 flowId 추출
+            const flowConfig = (component as any).componentConfig || {};
+
+            console.log("🔍 RealtimePreview 플로우 위젯 변환:", {
+              compType: component.type,
+              hasComponentConfig: !!(component as any).componentConfig,
+              flowConfig,
+              flowConfigFlowId: flowConfig.flowId,
+            });
+
+            const flowComponent = {
+              ...component,
+              type: "flow" as const,
+              flowId: flowConfig.flowId,
+              flowName: flowConfig.flowName,
+              showStepCount: flowConfig.showStepCount !== false,
+              allowDataMove: flowConfig.allowDataMove || false,
+              displayMode: flowConfig.displayMode || "horizontal",
+            };
+
+            console.log("🔍 RealtimePreview 최종 flowComponent:", flowComponent);
+
+            return (
+              <div className="h-full w-full">
+                <FlowWidget component={flowComponent as any} />
+              </div>
+            );
+          })()}
+
         {/* 그룹 타입 */}
         {type === "group" && (
           <div className="relative h-full w-full">
@@ -412,18 +445,19 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
         )}
 
         {/* 파일 타입 - 레거시 및 신규 타입 지원 */}
-        {isFileComponent(component) && (() => {
+        {isFileComponent(component) &&
-          const fileComponent = component as any;
+          (() => {
-          const uploadedFiles = fileComponent.uploadedFiles || [];
+            const fileComponent = component as any;
+            const uploadedFiles = fileComponent.uploadedFiles || [];
 
-          // 전역 상태에서 최신 파일 정보 가져오기
+            // 전역 상태에서 최신 파일 정보 가져오기
-          const globalFileState = typeof window !== 'undefined' ? (window as any).globalFileState || {} : {};
+            const globalFileState = typeof window !== "undefined" ? (window as any).globalFileState || {} : {};
-          const globalFiles = globalFileState[component.id] || [];
+            const globalFiles = globalFileState[component.id] || [];
 
-          // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
+            // 최신 파일 정보 사용 (전역 상태 > 컴포넌트 속성)
-          const currentFiles = globalFiles.length > 0 ? globalFiles : uploadedFiles;
+            const currentFiles = globalFiles.length > 0 ? globalFiles : uploadedFiles;
 
-          // console.log("🔍 RealtimePreview 파일 컴포넌트 렌더링:", {
+            // console.log("🔍 RealtimePreview 파일 컴포넌트 렌더링:", {
             // componentId: component.id,
             // uploadedFilesCount: uploadedFiles.length,
             // globalFilesCount: globalFiles.length,
@@ -432,73 +466,76 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
             // componentType: component.type,
             // fileUpdateTrigger: fileUpdateTrigger,
             // timestamp: new Date().toISOString()
-          // });
+            // });
 
-          return (
+            return (
-            <div key={`file-component-${component.id}-${fileUpdateTrigger}`} className="flex h-full flex-col">
+              <div key={`file-component-${component.id}-${fileUpdateTrigger}`} className="flex h-full flex-col">
-              <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
+                <div className="pointer-events-none flex-1 rounded border-2 border-dashed border-gray-300 bg-gray-50 p-2">
-                {currentFiles.length > 0 ? (
+                  {currentFiles.length > 0 ? (
-                  <div className="h-full overflow-y-auto">
+                    <div className="h-full overflow-y-auto">
-                    <div className="mb-1 text-xs font-medium text-gray-700">
+                      <div className="mb-1 text-xs font-medium text-gray-700">
-                      업로드된 파일 ({currentFiles.length})
+                        업로드된 파일 ({currentFiles.length})
-                    </div>
+                      </div>
-                    <div className="space-y-1">
+                      <div className="space-y-1">
-                      {currentFiles.map((file: any, index: number) => {
+                        {currentFiles.map((file: any, index: number) => {
-                        // 파일 확장자에 따른 아이콘 선택
+                          // 파일 확장자에 따른 아이콘 선택
-                        const getFileIcon = (fileName: string) => {
+                          const getFileIcon = (fileName: string) => {
-                          const ext = fileName.split('.').pop()?.toLowerCase() || '';
+                            const ext = fileName.split(".").pop()?.toLowerCase() || "";
-                          if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
+                            if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-                            return <ImageIcon className="h-4 w-4 text-green-500 flex-shrink-0" />;
+                              return <ImageIcon className="h-4 w-4 flex-shrink-0 text-green-500" />;
-                          }
+                            }
-                          if (['pdf', 'doc', 'docx', 'txt', 'rtf', 'hwp', 'hwpx', 'hwpml', 'pages'].includes(ext)) {
+                            if (["pdf", "doc", "docx", "txt", "rtf", "hwp", "hwpx", "hwpml", "pages"].includes(ext)) {
-                            return <FileText className="h-4 w-4 text-red-500 flex-shrink-0" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-red-500" />;
-                          }
+                            }
-                          if (['ppt', 'pptx', 'hpt', 'keynote'].includes(ext)) {
+                            if (["ppt", "pptx", "hpt", "keynote"].includes(ext)) {
-                            return <Presentation className="h-4 w-4 text-orange-600 flex-shrink-0" />;
+                              return <Presentation className="h-4 w-4 flex-shrink-0 text-orange-600" />;
-                          }
+                            }
-                          if (['xls', 'xlsx', 'hcdt', 'numbers'].includes(ext)) {
+                            if (["xls", "xlsx", "hcdt", "numbers"].includes(ext)) {
-                            return <FileText className="h-4 w-4 text-green-600 flex-shrink-0" />;
+                              return <FileText className="h-4 w-4 flex-shrink-0 text-green-600" />;
-                          }
+                            }
-                          if (['mp4', 'avi', 'mov', 'wmv', 'webm', 'ogg'].includes(ext)) {
+                            if (["mp4", "avi", "mov", "wmv", "webm", "ogg"].includes(ext)) {
-                            return <Video className="h-4 w-4 text-purple-500 flex-shrink-0" />;
+                              return <Video className="h-4 w-4 flex-shrink-0 text-purple-500" />;
-                          }
+                            }
-                          if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
+                            if (["mp3", "wav", "flac", "aac"].includes(ext)) {
-                            return <Music className="h-4 w-4 text-orange-500 flex-shrink-0" />;
+                              return <Music className="h-4 w-4 flex-shrink-0 text-orange-500" />;
-                          }
+                            }
-                          if (['zip', 'rar', '7z', 'tar'].includes(ext)) {
+                            if (["zip", "rar", "7z", "tar"].includes(ext)) {
-                            return <Archive className="h-4 w-4 text-yellow-500 flex-shrink-0" />;
+                              return <Archive className="h-4 w-4 flex-shrink-0 text-yellow-500" />;
-                          }
+                            }
-                          return <File className="h-4 w-4 text-blue-500 flex-shrink-0" />;
+                            return <File className="h-4 w-4 flex-shrink-0 text-blue-500" />;
-                        };
+                          };
 
-                        return (
+                          return (
-                          <div key={file.objid || index} className="flex items-center space-x-2 bg-white rounded p-2 text-xs">
+                            <div
-                            {getFileIcon(file.realFileName || file.name || '')}
+                              key={file.objid || index}
-                            <div className="flex-1 min-w-0">
+                              className="flex items-center space-x-2 rounded bg-white p-2 text-xs"
-                              <p className="truncate font-medium text-gray-900">
+                            >
-                                {file.realFileName || file.name || `파일 ${index + 1}`}
+                              {getFileIcon(file.realFileName || file.name || "")}
-                              </p>
+                              <div className="min-w-0 flex-1">
-                              <p className="text-gray-500">
+                                <p className="truncate font-medium text-gray-900">
-                                {file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ''}
+                                  {file.realFileName || file.name || `파일 ${index + 1}`}
-                              </p>
+                                </p>
+                                <p className="text-gray-500">
+                                  {file.fileSize ? `${Math.round(file.fileSize / 1024)} KB` : ""}
+                                </p>
+                              </div>
                             </div>
-                          </div>
+                          );
-                        );
+                        })}
-                      })}
+                      </div>
                     </div>
-                  </div>
+                  ) : (
-                ) : (
+                    <div className="flex h-full flex-col items-center justify-center text-center">
-                  <div className="flex h-full flex-col items-center justify-center text-center">
+                      <File className="mb-2 h-8 w-8 text-gray-400" />
-                    <File className="mb-2 h-8 w-8 text-gray-400" />
+                      <p className="mb-1 text-xs font-medium text-gray-700">업로드된 파일 (0)</p>
-                    <p className="text-xs font-medium text-gray-700 mb-1">업로드된 파일 (0)</p>
+                      <p className="text-muted-foreground text-sm">파일 업로드 영역</p>
-                    <p className="text-sm text-muted-foreground">파일 업로드 영역</p>
+                      <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
-                    <p className="mt-1 text-xs text-gray-400">상세설정에서 파일을 업로드하세요</p>
+                    </div>
-                  </div>
+                  )}
-                )}
+                </div>
               </div>
-            </div>
+            );
-          );
+          })()}
-        })()}
       </div>
 
       {/* 선택된 컴포넌트 정보 표시 */}

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -83,7 +83,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 선택 상태에 따른 스타일 (z-index 낮춤 - 패널과 모달보다 아래)
   const selectionStyle = isSelected
     ? {
-        outline: "2px solid hsl(var(--primary))",
+        outline: "2px solid rgb(59, 130, 246)",
         outlineOffset: "2px",
         zIndex: 20,
       }

frontend/components/screen/ScreenDesigner.tsx

@@ -1997,6 +1997,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           "table-list": 12, // 테이블 리스트 (100%)
           "image-display": 4, // 이미지 표시 (33%)
           "split-panel-layout": 6, // 분할 패널 레이아웃 (50%)
+          "flow-widget": 12, // 플로우 위젯 (100%)
 
           // 액션 컴포넌트 (ACTION 카테고리)
           "button-basic": 1, // 버튼 (8.33%)
@@ -2016,8 +2017,13 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           "chart-basic": 6, // 차트 (50%)
         };
 
-        // componentId 또는 webType으로 매핑, 없으면 기본값 3
+        // defaultSize에 gridColumnSpan이 "full"이면 12컬럼 사용
-        gridColumns = gridColumnsMap[componentId] || gridColumnsMap[webType] || 3;
+        if (component.defaultSize?.gridColumnSpan === "full") {
+          gridColumns = 12;
+        } else {
+          // componentId 또는 webType으로 매핑, 없으면 기본값 3
+          gridColumns = gridColumnsMap[componentId] || gridColumnsMap[webType] || 3;
+        }
 
         console.log("🎯 컴포넌트 타입별 gridColumns 설정:", {
           componentId,

frontend/components/screen/config-panels/FlowWidgetConfigPanel.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { getFlowDefinitions } from "@/lib/api/flow";
+import type { FlowDefinition } from "@/types/flow";
+import { Loader2, Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface FlowWidgetConfigPanelProps {
+  config: Record<string, any>;
+  onChange: (config: Record<string, any>) => void;
+}
+
+export function FlowWidgetConfigPanel({ config = {}, onChange }: FlowWidgetConfigPanelProps) {
+  const [flowList, setFlowList] = useState<FlowDefinition[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [openCombobox, setOpenCombobox] = useState(false);
+
+  useEffect(() => {
+    const loadFlows = async () => {
+      try {
+        setLoading(true);
+        const response = await getFlowDefinitions({ isActive: true });
+        if (response.success && response.data) {
+          setFlowList(response.data);
+        }
+      } catch (error) {
+        console.error("Failed to load flows:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadFlows();
+  }, []);
+
+  const selectedFlow = flowList.find((flow) => flow.id === config.flowId);
+
+  return (
+    <div className="space-y-4 p-4">
+      <div>
+        <div className="mb-2">
+          <h3 className="text-sm font-medium">플로우 선택</h3>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <Label>플로우</Label>
+            {loading ? (
+              <div className="flex items-center gap-2 rounded-md border px-3 py-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                <span className="text-muted-foreground text-sm">로딩 중...</span>
+              </div>
+            ) : (
+              <>
+                <Popover open={openCombobox} onOpenChange={setOpenCombobox}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={openCombobox}
+                      className="w-full justify-between"
+                    >
+                      {selectedFlow ? selectedFlow.name : "플로우 선택"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-[400px] p-0">
+                    <Command>
+                      <CommandInput placeholder="플로우 검색..." />
+                      <CommandList>
+                        <CommandEmpty>플로우를 찾을 수 없습니다.</CommandEmpty>
+                        <CommandGroup>
+                          {flowList.map((flow) => (
+                            <CommandItem
+                              key={flow.id}
+                              value={flow.name}
+                              onSelect={() => {
+                                onChange({
+                                  ...config,
+                                  flowId: flow.id,
+                                  flowName: flow.name,
+                                });
+                                setOpenCombobox(false);
+                              }}
+                            >
+                              <Check
+                                className={cn("mr-2 h-4 w-4", config.flowId === flow.id ? "opacity-100" : "opacity-0")}
+                              />
+                              <span className="font-medium">{flow.name}</span>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+                {selectedFlow && (
+                  <p className="text-muted-foreground mt-1 text-xs">테이블: {selectedFlow.tableName || "없음"}</p>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div className="mb-2">
+          <h3 className="text-sm font-medium">표시 옵션</h3>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <Label>표시 방향</Label>
+            <Select
+              value={config.displayMode || "horizontal"}
+              onValueChange={(value: "horizontal" | "vertical") => onChange({ ...config, displayMode: value })}
+            >
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="horizontal">가로 (→)</SelectItem>
+                <SelectItem value="vertical">세로 (↓)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>데이터 건수 표시</Label>
+              <p className="text-muted-foreground text-xs">각 스텝의 데이터 건수를 표시합니다</p>
+            </div>
+            <Switch
+              checked={config.showStepCount !== false}
+              onCheckedChange={(checked) => onChange({ ...config, showStepCount: checked })}
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <Label>데이터 이동 허용</Label>
+              <p className="text-muted-foreground text-xs">사용자가 데이터를 다음 스텝으로 이동할 수 있습니다</p>
+            </div>
+            <Switch
+              checked={config.allowDataMove || false}
+              onCheckedChange={(checked) => onChange({ ...config, allowDataMove: checked })}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/components/screen/panels/DetailSettingsPanel.tsx

@@ -1056,33 +1056,6 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
           </div>
         </div>
 
-        {/* 세부 타입 선택 영역 */}
-        {webType && availableDetailTypes.length > 1 && (
-          <div className="border-b border-gray-200 bg-gray-50 p-6 pt-0">
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-gray-700">세부 타입 선택</label>
-              <Select value={localComponentDetailType || webType} onValueChange={handleDetailTypeChange}>
-                <SelectTrigger className="w-full bg-white">
-                  <SelectValue placeholder="세부 타입을 선택하세요" />
-                </SelectTrigger>
-                <SelectContent>
-                  {availableDetailTypes.map((option) => (
-                    <SelectItem key={option.value} value={option.value}>
-                      <div className="flex flex-col">
-                        <span className="font-medium">{option.label}</span>
-                        <span className="text-xs text-gray-500">{option.description}</span>
-                      </div>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <p className="text-xs text-gray-500">
-                입력 타입 "{currentBaseInputType}"에 사용할 구체적인 형태를 선택하세요
-              </p>
-            </div>
-          </div>
-        )}
-
         {/* 컴포넌트 설정 패널 */}
         <div className="flex-1 overflow-y-auto px-6 pb-6">
           <div className="space-y-6">
@@ -1115,23 +1088,6 @@ export const DetailSettingsPanel: React.FC<DetailSettingsPanelProps> = ({
                 });
               }}
             />
-
-            {/* 웹타입별 특화 설정 */}
-            {webType && (
-              <div className="border-t pt-6">
-                <h4 className="mb-4 text-sm font-semibold text-gray-900">웹타입 설정</h4>
-                <WebTypeConfigPanel
-                  webType={webType as any}
-                  config={selectedComponent.componentConfig || {}}
-                  onUpdateConfig={(newConfig) => {
-                    // 기존 설정과 병합하여 업데이트
-                    Object.entries(newConfig).forEach(([key, value]) => {
-                      onUpdateProperty(selectedComponent.id, `componentConfig.${key}`, value);
-                    });
-                  }}
-                />
-              </div>
-            )}
           </div>
         </div>
       </div>

frontend/components/screen/panels/UnifiedPropertiesPanel.tsx

@@ -548,22 +548,6 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               handleUpdate("componentConfig", newConfig);
             }}
           />
-
-          {/* 웹타입별 특화 설정 */}
-          {webType && (
-            <div className="border-t pt-4">
-              <h4 className="mb-2 text-sm font-semibold">웹타입 설정</h4>
-              <WebTypeConfigPanel
-                webType={webType as any}
-                config={selectedComponent.componentConfig || {}}
-                onUpdateConfig={(newConfig) => {
-                  Object.entries(newConfig).forEach(([key, value]) => {
-                    handleUpdate(`componentConfig.${key}`, value);
-                  });
-                }}
-              />
-            </div>
-          )}
         </div>
       );
     }
@@ -592,17 +576,6 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
                 </SelectContent>
               </Select>
             </div>
-
-            {/* WebType 설정 패널 */}
-            <WebTypeConfigPanel
-              webType={widget.webType as any}
-              config={widget.webTypeConfig || {}}
-              onUpdateConfig={(newConfig) => {
-                Object.entries(newConfig).forEach(([key, value]) => {
-                  handleUpdate(`webTypeConfig.${key}`, value);
-                });
-              }}
-            />
           </div>
         );
       }

frontend/components/screen/widgets/FlowWidget.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { FlowComponent } from "@/types/screen-management";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { AlertCircle, Loader2 } from "lucide-react";
+import { getFlowById, getAllStepCounts } from "@/lib/api/flow";
+import type { FlowDefinition, FlowStep } from "@/types/flow";
+import { FlowDataListModal } from "@/components/flow/FlowDataListModal";
+
+interface FlowWidgetProps {
+  component: FlowComponent;
+  onStepClick?: (stepId: number, stepName: string) => void;
+}
+
+export function FlowWidget({ component, onStepClick }: FlowWidgetProps) {
+  const [flowData, setFlowData] = useState<FlowDefinition | null>(null);
+  const [steps, setSteps] = useState<FlowStep[]>([]);
+  const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // 모달 상태
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedStep, setSelectedStep] = useState<{ id: number; name: string } | null>(null);
+
+  // componentConfig에서 플로우 설정 추출 (DynamicComponentRenderer에서 전달됨)
+  const config = (component as any).componentConfig || (component as any).config || {};
+  const flowId = config.flowId || component.flowId;
+  const flowName = config.flowName || component.flowName;
+  const displayMode = config.displayMode || component.displayMode || "horizontal";
+  const showStepCount = config.showStepCount !== false && component.showStepCount !== false; // 기본값 true
+  const allowDataMove = config.allowDataMove || component.allowDataMove || false;
+
+  console.log("🔍 FlowWidget 렌더링:", {
+    component,
+    componentConfig: config,
+    flowId,
+    flowName,
+    displayMode,
+    showStepCount,
+    allowDataMove,
+  });
+
+  useEffect(() => {
+    console.log("🔍 FlowWidget useEffect 실행:", {
+      flowId,
+      hasFlowId: !!flowId,
+      config,
+    });
+
+    if (!flowId) {
+      setLoading(false);
+      return;
+    }
+
+    const loadFlowData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        // 플로우 정보 조회
+        const flowResponse = await getFlowById(flowId!);
+        if (!flowResponse.success || !flowResponse.data) {
+          throw new Error("플로우를 찾을 수 없습니다");
+        }
+
+        setFlowData(flowResponse.data);
+
+        // 스텝 목록 조회
+        const stepsResponse = await fetch(`/api/flow/definitions/${flowId}/steps`);
+        if (!stepsResponse.ok) {
+          throw new Error("스텝 목록을 불러올 수 없습니다");
+        }
+        const stepsData = await stepsResponse.json();
+        if (stepsData.success && stepsData.data) {
+          const sortedSteps = stepsData.data.sort((a: FlowStep, b: FlowStep) => a.stepOrder - b.stepOrder);
+          setSteps(sortedSteps);
+
+          // 스텝별 데이터 건수 조회
+          if (showStepCount) {
+            const countsResponse = await getAllStepCounts(flowId!);
+            if (countsResponse.success && countsResponse.data) {
+              // 배열을 Record<number, number>로 변환
+              const countsMap: Record<number, number> = {};
+              countsResponse.data.forEach((item: any) => {
+                countsMap[item.stepId] = item.count;
+              });
+              setStepCounts(countsMap);
+            }
+          }
+        }
+      } catch (err: any) {
+        console.error("Failed to load flow data:", err);
+        setError(err.message || "플로우 데이터를 불러오는데 실패했습니다");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadFlowData();
+  }, [flowId, showStepCount]);
+
+  // 스텝 클릭 핸들러
+  const handleStepClick = (stepId: number, stepName: string) => {
+    if (onStepClick) {
+      onStepClick(stepId, stepName);
+    } else {
+      // 기본 동작: 모달 열기
+      setSelectedStep({ id: stepId, name: stepName });
+      setModalOpen(true);
+    }
+  };
+
+  // 데이터 이동 후 리프레시
+  const handleDataMoved = async () => {
+    if (!flowId) return;
+
+    try {
+      // 스텝별 데이터 건수 다시 조회
+      const countsResponse = await getAllStepCounts(flowId);
+      if (countsResponse.success && countsResponse.data) {
+        // 배열을 Record<number, number>로 변환
+        const countsMap: Record<number, number> = {};
+        countsResponse.data.forEach((item: any) => {
+          countsMap[item.stepId] = item.count;
+        });
+        setStepCounts(countsMap);
+      }
+    } catch (err) {
+      console.error("Failed to refresh step counts:", err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+        <span className="text-muted-foreground ml-2 text-sm">플로우 로딩 중...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="border-destructive/50 bg-destructive/10 flex items-center gap-2 rounded-lg border p-4">
+        <AlertCircle className="text-destructive h-5 w-5" />
+        <span className="text-destructive text-sm">{error}</span>
+      </div>
+    );
+  }
+
+  if (!flowId || !flowData) {
+    return (
+      <div className="border-muted-foreground/25 flex items-center justify-center rounded-lg border-2 border-dashed p-8">
+        <span className="text-muted-foreground text-sm">플로우를 선택해주세요</span>
+      </div>
+    );
+  }
+
+  if (steps.length === 0) {
+    return (
+      <div className="border-muted flex items-center justify-center rounded-lg border p-8">
+        <span className="text-muted-foreground text-sm">플로우에 스텝이 없습니다</span>
+      </div>
+    );
+  }
+
+  const containerClass =
+    displayMode === "horizontal"
+      ? "flex flex-wrap items-center justify-center gap-3"
+      : "flex flex-col items-center gap-4";
+
+  return (
+    <div className="min-h-full w-full p-4">
+      {/* 플로우 제목 */}
+      <div className="mb-4 text-center">
+        <h3 className="text-foreground text-lg font-semibold">{flowData.name}</h3>
+        {flowData.description && <p className="text-muted-foreground mt-1 text-sm">{flowData.description}</p>}
+      </div>
+
+      {/* 플로우 스텝 목록 */}
+      <div className={containerClass}>
+        {steps.map((step, index) => (
+          <React.Fragment key={step.id}>
+            {/* 스텝 카드 */}
+            <Button
+              variant="outline"
+              className="hover:border-primary hover:bg-accent flex shrink-0 flex-col items-start gap-3 p-5"
+              onClick={() => handleStepClick(step.id, step.stepName)}
+            >
+              <div className="flex w-full items-center justify-between gap-2">
+                <Badge variant="outline" className="text-sm">
+                  단계 {step.stepOrder}
+                </Badge>
+                {showStepCount && (
+                  <Badge variant="secondary" className="text-sm font-semibold">
+                    {stepCounts[step.id] || 0}건
+                  </Badge>
+                )}
+              </div>
+              <div className="w-full text-left">
+                <div className="text-foreground text-base font-semibold">{step.stepName}</div>
+                {step.tableName && (
+                  <div className="text-muted-foreground mt-2 flex items-center gap-1 text-sm">
+                    <span>📊</span>
+                    <span>{step.tableName}</span>
+                  </div>
+                )}
+              </div>
+            </Button>
+
+            {/* 화살표 (마지막 스텝 제외) */}
+            {index < steps.length - 1 && (
+              <div className="text-muted-foreground flex shrink-0 items-center justify-center text-2xl font-bold">
+                {displayMode === "horizontal" ? "→" : "↓"}
+              </div>
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+
+      {/* 데이터 목록 모달 */}
+      {selectedStep && flowId && (
+        <FlowDataListModal
+          open={modalOpen}
+          onOpenChange={setModalOpen}
+          flowId={flowId}
+          stepId={selectedStep.id}
+          stepName={selectedStep.name}
+          allowDataMove={allowDataMove}
+          onDataMoved={handleDataMoved}
+        />
+      )}
+    </div>
+  );
+}

frontend/lib/api/flow.ts

@@ -0,0 +1,463 @@
+/**
+ * 플로우 관리 API 클라이언트
+ */
+
+import {
+  FlowDefinition,
+  CreateFlowDefinitionRequest,
+  UpdateFlowDefinitionRequest,
+  FlowStep,
+  CreateFlowStepRequest,
+  UpdateFlowStepRequest,
+  FlowStepConnection,
+  CreateFlowConnectionRequest,
+  FlowStepDataCount,
+  FlowStepDataList,
+  MoveDataRequest,
+  MoveBatchDataRequest,
+  FlowAuditLog,
+  ApiResponse,
+} from "@/types/flow";
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "/api";
+
+// ============================================
+// 플로우 정의 API
+// ============================================
+
+/**
+ * 플로우 정의 목록 조회
+ */
+export async function getFlowDefinitions(params?: {
+  tableName?: string;
+  isActive?: boolean;
+}): Promise<ApiResponse<FlowDefinition[]>> {
+  try {
+    const queryParams = new URLSearchParams();
+    if (params?.tableName) queryParams.append("tableName", params.tableName);
+    if (params?.isActive !== undefined) queryParams.append("isActive", String(params.isActive));
+
+    const url = `${API_BASE}/flow/definitions${queryParams.toString() ? `?${queryParams.toString()}` : ""}`;
+
+    const response = await fetch(url, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 정의 상세 조회
+ */
+export async function getFlowDefinition(id: number): Promise<ApiResponse<FlowDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 정의 상세 조회 (별칭)
+ */
+export const getFlowById = getFlowDefinition;
+
+/**
+ * 플로우 정의 생성
+ */
+export async function createFlowDefinition(data: CreateFlowDefinitionRequest): Promise<ApiResponse<FlowDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 정의 수정
+ */
+export async function updateFlowDefinition(
+  id: number,
+  data: UpdateFlowDefinitionRequest,
+): Promise<ApiResponse<FlowDefinition>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 정의 삭제
+ */
+export async function deleteFlowDefinition(id: number): Promise<ApiResponse<{ success: boolean }>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions/${id}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+// ============================================
+// 플로우 단계 API
+// ============================================
+
+/**
+ * 플로우 단계 목록 조회
+ */
+export async function getFlowSteps(flowId: number): Promise<ApiResponse<FlowStep[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions/${flowId}/steps`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 단계 생성
+ */
+export async function createFlowStep(flowId: number, data: CreateFlowStepRequest): Promise<ApiResponse<FlowStep>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/definitions/${flowId}/steps`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 단계 수정
+ */
+export async function updateFlowStep(stepId: number, data: UpdateFlowStepRequest): Promise<ApiResponse<FlowStep>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/steps/${stepId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 단계 삭제
+ */
+export async function deleteFlowStep(stepId: number): Promise<ApiResponse<{ success: boolean }>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/steps/${stepId}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+// ============================================
+// 플로우 연결 API
+// ============================================
+
+/**
+ * 플로우 연결 목록 조회
+ */
+export async function getFlowConnections(flowId: number): Promise<ApiResponse<FlowStepConnection[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/connections/${flowId}`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 연결 생성
+ */
+export async function createFlowConnection(
+  data: CreateFlowConnectionRequest,
+): Promise<ApiResponse<FlowStepConnection>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/connections`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 연결 삭제
+ */
+export async function deleteFlowConnection(connectionId: number): Promise<ApiResponse<{ success: boolean }>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/connections/${connectionId}`, {
+      method: "DELETE",
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+// ============================================
+// 플로우 실행 API
+// ============================================
+
+/**
+ * 특정 단계의 데이터 카운트 조회
+ */
+export async function getStepDataCount(flowId: number, stepId: number): Promise<ApiResponse<FlowStepDataCount>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/${flowId}/step/${stepId}/count`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 특정 단계의 데이터 리스트 조회 (페이징)
+ */
+export async function getStepDataList(
+  flowId: number,
+  stepId: number,
+  page: number = 1,
+  pageSize: number = 20,
+): Promise<ApiResponse<FlowStepDataList>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/${flowId}/step/${stepId}/list?page=${page}&pageSize=${pageSize}`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 모든 단계의 데이터 카운트 조회
+ */
+export async function getAllStepCounts(flowId: number): Promise<ApiResponse<FlowStepDataCount[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/${flowId}/steps/counts`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 데이터 이동
+ */
+export async function moveData(data: MoveDataRequest): Promise<ApiResponse<{ success: boolean }>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/move`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 데이터를 다음 스텝으로 이동 (편의 함수)
+ */
+export async function moveDataToNextStep(
+  flowId: number,
+  currentStepId: number,
+  dataId: number,
+): Promise<ApiResponse<{ success: boolean }>> {
+  return moveData({
+    flowId,
+    currentStepId,
+    dataId,
+  });
+}
+
+/**
+ * 배치 데이터 이동
+ */
+export async function moveBatchData(
+  data: MoveBatchDataRequest,
+): Promise<ApiResponse<{ success: boolean; results: any[] }>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/move/batch`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      credentials: "include",
+      body: JSON.stringify(data),
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+// ============================================
+// 오딧 로그 API
+// ============================================
+
+/**
+ * 특정 레코드의 오딧 로그 조회
+ */
+export async function getAuditLogs(flowId: number, recordId: string): Promise<ApiResponse<FlowAuditLog[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/audit/${flowId}/${recordId}`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}
+
+/**
+ * 플로우 전체 오딧 로그 조회
+ */
+export async function getFlowAuditLogs(flowId: number, limit: number = 100): Promise<ApiResponse<FlowAuditLog[]>> {
+  try {
+    const response = await fetch(`${API_BASE}/flow/audit/${flowId}?limit=${limit}`, {
+      credentials: "include",
+    });
+
+    return await response.json();
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.message,
+    };
+  }
+}

frontend/lib/registry/components/flow-widget/FlowWidgetRenderer.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { FlowWidgetDefinition } from "./index";
+import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
+
+/**
+ * FlowWidget 렌더러
+ * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
+ */
+export class FlowWidgetRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = FlowWidgetDefinition;
+
+  render(): React.ReactElement {
+    return <FlowWidget component={this.props.component as any} />;
+  }
+}
+
+// 자동 등록 실행
+FlowWidgetRenderer.registerSelf();
+
+// Hot Reload 지원 (개발 모드)
+if (process.env.NODE_ENV === "development") {
+  FlowWidgetRenderer.enableHotReload();
+}
+
+console.log("✅ FlowWidget 컴포넌트 등록 완료");

frontend/lib/registry/components/flow-widget/index.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { createComponentDefinition } from "../../utils/createComponentDefinition";
+import { ComponentCategory } from "@/types/component";
+import { FlowWidget } from "@/components/screen/widgets/FlowWidget";
+import { FlowWidgetConfigPanel } from "@/components/screen/config-panels/FlowWidgetConfigPanel";
+
+/**
+ * FlowWidget 컴포넌트 정의
+ * 플로우 관리 시스템의 플로우를 화면에 표시
+ */
+export const FlowWidgetDefinition = createComponentDefinition({
+  id: "flow-widget",
+  name: "플로우 위젯",
+  nameEng: "Flow Widget",
+  description: "플로우 관리 시스템의 플로우를 화면에 표시합니다",
+  category: ComponentCategory.DISPLAY,
+  webType: "text", // 기본 웹타입 (필수)
+  component: FlowWidget,
+  defaultConfig: {
+    flowId: undefined,
+    flowName: undefined,
+    showStepCount: true,
+    allowDataMove: false,
+    displayMode: "horizontal",
+  },
+  defaultSize: {
+    width: 1200,
+    height: 120,
+    gridColumnSpan: "full", // 전체 너비 사용
+  },
+  configPanel: FlowWidgetConfigPanel,
+  icon: "Workflow",
+  tags: ["플로우", "워크플로우", "프로세스", "상태"],
+  version: "1.0.0",
+  author: "개발팀",
+  documentation: "",
+});
+
+// 컴포넌트는 FlowWidgetRenderer에서 자동 등록됩니다

frontend/lib/registry/components/index.ts

@@ -40,6 +40,7 @@ import "./card-display/CardDisplayRenderer";
 import "./split-panel-layout/SplitPanelLayoutRenderer";
 import "./map/MapRenderer";
 import "./repeater-field-group/RepeaterFieldGroupRenderer";
+import "./flow-widget/FlowWidgetRenderer";
 
 /**
  * 컴포넌트 초기화 함수

frontend/lib/utils/getComponentConfigPanel.tsx

@@ -25,6 +25,7 @@ const CONFIG_PANEL_MAP: Record<string, () => Promise<any>> = {
   "card-display": () => import("@/lib/registry/components/card-display/CardDisplayConfigPanel"),
   "split-panel-layout": () => import("@/lib/registry/components/split-panel-layout/SplitPanelLayoutConfigPanel"),
   "repeater-field-group": () => import("@/components/webtypes/config/RepeaterConfigPanel"),
+  "flow-widget": () => import("@/components/screen/config-panels/FlowWidgetConfigPanel"),
 };
 
 // ConfigPanel 컴포넌트 캐시
@@ -54,6 +55,7 @@ export async function getComponentConfigPanel(componentId: string): Promise<Reac
     const ConfigPanelComponent =
       module[`${toPascalCase(componentId)}ConfigPanel`] ||
       module.RepeaterConfigPanel || // repeater-field-group의 export명
+      module.FlowWidgetConfigPanel || // flow-widget의 export명
       module.default;
 
     if (!ConfigPanelComponent) {

frontend/package-lock.json

@@ -62,7 +62,7 @@
         "react-leaflet": "^5.0.0",
         "react-resizable-panels": "^3.0.6",
         "react-window": "^2.1.0",
-        "reactflow": "^11.10.4",
+        "reactflow": "^11.11.4",
         "recharts": "^3.2.1",
         "sheetjs-style": "^0.15.8",
         "sonner": "^2.0.7",
@@ -2678,12 +2678,12 @@
       }
     },
     "node_modules/@reactflow/background": {
-      "version": "11.3.9",
+      "version": "11.3.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.9.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
-      "integrity": "sha512-byj/G9pEC8tN0wT/ptcl/LkEP/BBfa33/SvBkqE4XwyofckqF87lKp573qGlisfnsijwAbpDlf81PuFL41So4Q==",
+      "integrity": "sha512-Gewd7blEVT5Lh6jqrvOgd4G6Qk17eGKQfsDXgyRSqM+CTwDqRldG2LsWN4sNeno6sbqVIC2fZ+rAUBFA9ZEUDA==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2693,12 +2693,12 @@
       }
     },
     "node_modules/@reactflow/controls": {
-      "version": "11.2.9",
+      "version": "11.2.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/controls/-/controls-11.2.14.tgz",
-      "integrity": "sha512-e8nWplbYfOn83KN1BrxTXS17+enLyFnjZPbyDgHSRLtI5ZGPKF/8iRXV+VXb2LFVzlu4Wh3la/pkxtfP/0aguA==",
+      "integrity": "sha512-MiJp5VldFD7FrqaBNIrQ85dxChrG6ivuZ+dcFhPQUwOK3HfYgX2RHdBua+gx+40p5Vw5It3dVNp/my4Z3jF0dw==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -2708,9 +2708,9 @@
       }
     },
     "node_modules/@reactflow/core": {
-      "version": "11.10.4",
+      "version": "11.11.4",
-      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/core/-/core-11.11.4.tgz",
-      "integrity": "sha512-j3i9b2fsTX/sBbOm+RmNzYEFWbNx4jGWGuGooh2r1jQaE2eV+TLJgiG/VNOp0q5mBl9f6g1IXs3Gm86S9JfcGw==",
+      "integrity": "sha512-H4vODklsjAq3AMq6Np4LE12i1I4Ta9PrDHuBR9GmL8uzTt2l2jh4CiQbEMpvMDcp7xi4be0hgXj+Ysodde/i7Q==",
       "license": "MIT",
       "dependencies": {
         "@types/d3": "^7.4.0",
@@ -2729,12 +2729,12 @@
       }
     },
     "node_modules/@reactflow/minimap": {
-      "version": "11.7.9",
+      "version": "11.7.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.9.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/minimap/-/minimap-11.7.14.tgz",
-      "integrity": "sha512-le95jyTtt3TEtJ1qa7tZ5hyM4S7gaEQkW43cixcMOZLu33VAdc2aCpJg/fXcRrrf7moN2Mbl9WIMNXUKsp5ILA==",
+      "integrity": "sha512-mpwLKKrEAofgFJdkhwR5UQ1JYWlcAAL/ZU/bctBkuNTT1yqV+y0buoNVImsRehVYhJwffSWeSHaBR5/GJjlCSQ==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
         "@types/d3-selection": "^3.0.3",
         "@types/d3-zoom": "^3.0.1",
         "classcat": "^5.0.3",
@@ -2748,12 +2748,12 @@
       }
     },
     "node_modules/@reactflow/node-resizer": {
-      "version": "2.2.9",
+      "version": "2.2.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.9.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-resizer/-/node-resizer-2.2.14.tgz",
-      "integrity": "sha512-HfickMm0hPDIHt9qH997nLdgLt0kayQyslKE0RS/GZvZ4UMQJlx/NRRyj5y47Qyg0NnC66KYOQWDM9LLzRTnUg==",
+      "integrity": "sha512-fwqnks83jUlYr6OHcdFEedumWKChTHRGw/kbCxj0oqBd+ekfs+SIp4ddyNU0pdx96JIm5iNFS0oNrmEiJbbSaA==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
         "classcat": "^5.0.4",
         "d3-drag": "^3.0.0",
         "d3-selection": "^3.0.0",
@@ -2765,12 +2765,12 @@
       }
     },
     "node_modules/@reactflow/node-toolbar": {
-      "version": "1.3.9",
+      "version": "1.3.14",
-      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.9.tgz",
+      "resolved": "https://registry.npmjs.org/@reactflow/node-toolbar/-/node-toolbar-1.3.14.tgz",
-      "integrity": "sha512-VmgxKmToax4sX1biZ9LXA7cj/TBJ+E5cklLGwquCCVVxh+lxpZGTBF3a5FJGVHiUNBBtFsC8ldcSZIK4cAlQww==",
+      "integrity": "sha512-rbynXQnH/xFNu4P9H+hVqlEUafDCkEoCy0Dg9mG22Sg+rY/0ck6KkrAQrYrTgXusd+cEJOMK0uOOFCK2/5rSGQ==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
         "classcat": "^5.0.3",
         "zustand": "^4.4.1"
       },
@@ -9526,17 +9526,17 @@
       }
     },
     "node_modules/reactflow": {
-      "version": "11.10.4",
+      "version": "11.11.4",
-      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.10.4.tgz",
+      "resolved": "https://registry.npmjs.org/reactflow/-/reactflow-11.11.4.tgz",
-      "integrity": "sha512-0CApYhtYicXEDg/x2kvUHiUk26Qur8lAtTtiSlptNKuyEuGti6P1y5cS32YGaUoDMoCqkm/m+jcKkfMOvSCVRA==",
+      "integrity": "sha512-70FOtJkUWH3BAOsN+LU9lCrKoKbtOPnz2uq0CV2PLdNSwxTXOhCbsZr50GmZ+Rtw3jx8Uv7/vBFtCGixLfd4Og==",
       "license": "MIT",
       "dependencies": {
-        "@reactflow/background": "11.3.9",
+        "@reactflow/background": "11.3.14",
-        "@reactflow/controls": "11.2.9",
+        "@reactflow/controls": "11.2.14",
-        "@reactflow/core": "11.10.4",
+        "@reactflow/core": "11.11.4",
-        "@reactflow/minimap": "11.7.9",
+        "@reactflow/minimap": "11.7.14",
-        "@reactflow/node-resizer": "2.2.9",
+        "@reactflow/node-resizer": "2.2.14",
-        "@reactflow/node-toolbar": "1.3.9"
+        "@reactflow/node-toolbar": "1.3.14"
       },
       "peerDependencies": {
         "react": ">=17",

frontend/package.json

@@ -70,7 +70,7 @@
     "react-leaflet": "^5.0.0",
     "react-resizable-panels": "^3.0.6",
     "react-window": "^2.1.0",
-    "reactflow": "^11.10.4",
+    "reactflow": "^11.11.4",
     "recharts": "^3.2.1",
     "sheetjs-style": "^0.15.8",
     "sonner": "^2.0.7",

frontend/types/flow.ts

@@ -0,0 +1,224 @@
+/**
+ * 플로우 관리 시스템 - 프론트엔드 타입 정의
+ */
+
+// ============================================
+// 조건 연산자
+// ============================================
+export type ConditionOperator =
+  | "equals"
+  | "not_equals"
+  | "in"
+  | "not_in"
+  | "greater_than"
+  | "less_than"
+  | "greater_than_or_equal"
+  | "less_than_or_equal"
+  | "is_null"
+  | "is_not_null"
+  | "like"
+  | "not_like";
+
+// ============================================
+// 플로우 조건
+// ============================================
+export interface FlowCondition {
+  column: string;
+  operator: ConditionOperator;
+  value?: any;
+}
+
+export interface FlowConditionGroup {
+  type: "AND" | "OR";
+  conditions: FlowCondition[];
+}
+
+// ============================================
+// 플로우 정의
+// ============================================
+export interface FlowDefinition {
+  id: number;
+  name: string;
+  description?: string;
+  tableName: string;
+  isActive: boolean;
+  createdAt: string;
+  updatedAt: string;
+  createdBy: string;
+  updatedBy: string;
+}
+
+export interface CreateFlowDefinitionRequest {
+  name: string;
+  description?: string;
+  tableName: string;
+}
+
+export interface UpdateFlowDefinitionRequest {
+  name?: string;
+  description?: string;
+  tableName?: string;
+  isActive?: boolean;
+}
+
+// ============================================
+// 플로우 단계
+// ============================================
+export interface FlowStep {
+  id: number;
+  flowDefinitionId: number;
+  stepName: string;
+  stepOrder: number;
+  tableName?: string; // 이 단계에서 조회할 테이블명
+  conditionJson?: FlowConditionGroup;
+  color: string;
+  positionX: number;
+  positionY: number;
+  createdAt: string;
+  updatedAt: string;
+  createdBy: string;
+  updatedBy: string;
+}
+
+export interface CreateFlowStepRequest {
+  stepName: string;
+  stepOrder: number;
+  tableName?: string; // 이 단계에서 조회할 테이블명
+  conditionJson?: FlowConditionGroup;
+  color?: string;
+  positionX?: number;
+  positionY?: number;
+}
+
+export interface UpdateFlowStepRequest {
+  stepName?: string;
+  tableName?: string; // 이 단계에서 조회할 테이블명
+  stepOrder?: number;
+  conditionJson?: FlowConditionGroup;
+  color?: string;
+  positionX?: number;
+  positionY?: number;
+}
+
+// ============================================
+// 플로우 단계 연결
+// ============================================
+export interface FlowStepConnection {
+  id: number;
+  flowDefinitionId: number;
+  fromStepId: number;
+  toStepId: number;
+  label?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateFlowConnectionRequest {
+  flowDefinitionId: number;
+  fromStepId: number;
+  toStepId: number;
+  label?: string;
+}
+
+// ============================================
+// 플로우 데이터 상태
+// ============================================
+export interface FlowDataStatus {
+  id: number;
+  flowDefinitionId: number;
+  tableName: string;
+  recordId: string;
+  currentStepId: number | null;
+  updatedAt: string;
+  updatedBy: string;
+}
+
+// ============================================
+// 플로우 오딧 로그
+// ============================================
+export interface FlowAuditLog {
+  id: number;
+  flowDefinitionId: number;
+  tableName: string;
+  recordId: string;
+  fromStepId: number | null;
+  toStepId: number | null;
+  changedAt: string;
+  changedBy: string;
+  note?: string;
+  fromStepName?: string;
+  toStepName?: string;
+}
+
+// ============================================
+// 플로우 실행 관련
+// ============================================
+export interface FlowStepDataCount {
+  stepId: number;
+  stepName: string;
+  count: number;
+}
+
+export interface FlowStepDataList {
+  records: any[];
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+export interface MoveDataRequest {
+  flowId: number;
+  recordId: string;
+  toStepId: number;
+  note?: string;
+}
+
+export interface MoveBatchDataRequest {
+  flowId: number;
+  recordIds: string[];
+  toStepId: number;
+  note?: string;
+}
+
+// ============================================
+// API 응답 타입
+// ============================================
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  message?: string;
+  error?: string;
+}
+
+// ============================================
+// React Flow 관련 타입 (비주얼 편집기용)
+// ============================================
+export interface FlowNodeData {
+  id: number;
+  label: string;
+  stepOrder: number;
+  tableName?: string;
+  count?: number;
+  condition?: FlowConditionGroup;
+}
+
+export interface FlowEdgeData {
+  id: number;
+  label?: string;
+}
+
+// ============================================
+// UI 컴포넌트용 타입
+// ============================================
+export interface FlowListItem extends FlowDefinition {
+  stepsCount?: number;
+  lastUpdated?: string;
+}
+
+export interface FlowEditorState {
+  flowDefinition: FlowDefinition | null;
+  steps: FlowStep[];
+  connections: FlowStepConnection[];
+  selectedStepId: number | null;
+  isEditMode: boolean;
+}

frontend/types/screen-management.ts

@@ -135,6 +135,18 @@ export interface FileComponent extends BaseComponent {
   lastFileUpdate?: number;
 }
 
+/**
+ * 플로우 컴포넌트
+ */
+export interface FlowComponent extends BaseComponent {
+  type: "flow";
+  flowId?: number; // 선택된 플로우 ID
+  flowName?: string; // 플로우 이름 (표시용)
+  showStepCount?: boolean; // 각 스텝의 데이터 건수 표시 여부
+  allowDataMove?: boolean; // 데이터 이동 허용 여부
+  displayMode?: "horizontal" | "vertical"; // 플로우 표시 방향
+}
+
 /**
  * 새로운 컴포넌트 시스템 컴포넌트
  */
@@ -154,6 +166,7 @@ export type ComponentData =
   | GroupComponent
   | DataTableComponent
   | FileComponent
+  | FlowComponent
   | ComponentComponent;
 
 // ===== 웹타입별 설정 인터페이스 =====
@@ -606,6 +619,13 @@ export const isFileComponent = (component: ComponentData): component is FileComp
   return component.type === "file";
 };
 
+/**
+ * FlowComponent 타입 가드
+ */
+export const isFlowComponent = (component: ComponentData): component is FlowComponent => {
+  return component.type === "flow";
+};
+
 // ===== 안전한 타입 캐스팅 유틸리티 =====
 
 /**
@@ -657,3 +677,13 @@ export const asFileComponent = (component: ComponentData): FileComponent => {
   }
   return component;
 };
+
+/**
+ * ComponentData를 FlowComponent로 안전하게 캐스팅
+ */
+export const asFlowComponent = (component: ComponentData): FlowComponent => {
+  if (!isFlowComponent(component)) {
+    throw new Error(`Expected FlowComponent, got ${component.type}`);
+  }
+  return component;
+};

frontend/types/unified-core.ts

@@ -81,7 +81,9 @@ export type ComponentType =
   | "datatable"
   | "file"
   | "area"
-  | "layout";
+  | "layout"
+  | "flow"
+  | "component";
 
 /**
  * 기본 위치 정보