플로우 위젯 컴포넌트와 버튼의 연동

frontend/lib/utils/buttonActions.ts

@@ -63,6 +63,10 @@ export interface ButtonActionContext {
   // 테이블 선택된 행 정보 (다중 선택 액션용)
   selectedRows?: any[];
   selectedRowsData?: any[];
+  
+  // 플로우 선택된 데이터 정보 (플로우 위젯 선택 액션용)
+  flowSelectedData?: any[];
+  flowSelectedStepId?: number | null;
 
   // 제어 실행을 위한 추가 정보
   buttonId?: string;
@@ -302,12 +306,23 @@ export class ButtonActionExecutor {
    * 삭제 액션 처리
    */
   private static async handleDelete(config: ButtonActionConfig, context: ButtonActionContext): Promise<boolean> {
-    const { formData, tableName, screenId, selectedRowsData } = context;
+    const { formData, tableName, screenId, selectedRowsData, flowSelectedData } = context;
 
     try {
-      // 다중 선택된 행이 있는 경우 (테이블에서 체크박스로 선택)
-      if (selectedRowsData && selectedRowsData.length > 0) {
-        console.log(`다중 삭제 액션 실행: ${selectedRowsData.length}개 항목`, selectedRowsData);
+      // 플로우 선택 데이터 우선 사용
+      let dataToDelete = flowSelectedData && flowSelectedData.length > 0 ? flowSelectedData : selectedRowsData;
+
+      console.log("🔍 handleDelete - 데이터 소스 확인:", {
+        hasFlowSelectedData: !!(flowSelectedData && flowSelectedData.length > 0),
+        flowSelectedDataLength: flowSelectedData?.length || 0,
+        hasSelectedRowsData: !!(selectedRowsData && selectedRowsData.length > 0),
+        selectedRowsDataLength: selectedRowsData?.length || 0,
+        dataToDeleteLength: dataToDelete?.length || 0,
+      });
+
+      // 다중 선택된 데이터가 있는 경우
+      if (dataToDelete && dataToDelete.length > 0) {
+        console.log(`다중 삭제 액션 실행: ${dataToDelete.length}개 항목`, dataToDelete);
 
         // 테이블의 기본키 조회
         let primaryKeys: string[] = [];
@@ -324,7 +339,7 @@ export class ButtonActionExecutor {
         }
 
         // 각 선택된 항목을 삭제
-        for (const rowData of selectedRowsData) {
+        for (const rowData of dataToDelete) {
           let deleteId: any = null;
 
           // 1순위: 데이터베이스에서 조회한 기본키 사용
@@ -386,7 +401,7 @@ export class ButtonActionExecutor {
           }
         }
 
-        console.log(`✅ 다중 삭제 성공: ${selectedRowsData.length}개 항목`);
+        console.log(`✅ 다중 삭제 성공: ${dataToDelete.length}개 항목`);
         context.onRefresh?.(); // 테이블 새로고침
         return true;
       }
@@ -581,10 +596,21 @@ export class ButtonActionExecutor {
    * 편집 액션 처리
    */
   private static handleEdit(config: ButtonActionConfig, context: ButtonActionContext): boolean {
-    const { selectedRowsData } = context;
+    const { selectedRowsData, flowSelectedData } = context;
 
-    // 선택된 행이 없는 경우
-    if (!selectedRowsData || selectedRowsData.length === 0) {
+    // 플로우 선택 데이터 우선 사용
+    let dataToEdit = flowSelectedData && flowSelectedData.length > 0 ? flowSelectedData : selectedRowsData;
+
+    console.log("🔍 handleEdit - 데이터 소스 확인:", {
+      hasFlowSelectedData: !!(flowSelectedData && flowSelectedData.length > 0),
+      flowSelectedDataLength: flowSelectedData?.length || 0,
+      hasSelectedRowsData: !!(selectedRowsData && selectedRowsData.length > 0),
+      selectedRowsDataLength: selectedRowsData?.length || 0,
+      dataToEditLength: dataToEdit?.length || 0,
+    });
+
+    // 선택된 데이터가 없는 경우
+    if (!dataToEdit || dataToEdit.length === 0) {
       toast.error("수정할 항목을 선택해주세요.");
       return false;
     }
@@ -595,15 +621,15 @@ export class ButtonActionExecutor {
       return false;
     }
 
-    console.log(`📝 편집 액션 실행: ${selectedRowsData.length}개 항목`, {
-      selectedRowsData,
+    console.log(`📝 편집 액션 실행: ${dataToEdit.length}개 항목`, {
+      dataToEdit,
       targetScreenId: config.targetScreenId,
       editMode: config.editMode,
     });
 
-    if (selectedRowsData.length === 1) {
+    if (dataToEdit.length === 1) {
       // 단일 항목 편집
-      const rowData = selectedRowsData[0];
+      const rowData = dataToEdit[0];
       console.log("📝 단일 항목 편집:", rowData);
 
       this.openEditForm(config, rowData, context);
@@ -710,6 +736,8 @@ export class ButtonActionExecutor {
       formData: context.formData,
       selectedRows: context.selectedRows,
       selectedRowsData: context.selectedRowsData,
+      flowSelectedData: context.flowSelectedData,
+      flowSelectedStepId: context.flowSelectedStepId,
       config,
     });
 
@@ -739,7 +767,10 @@ export class ButtonActionExecutor {
 
       if (!controlDataSource) {
         // 설정이 없으면 자동 판단
-        if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+        if (context.flowSelectedData && context.flowSelectedData.length > 0) {
+          controlDataSource = "flow-selection";
+          console.log("🔄 자동 판단: flow-selection 모드 사용");
+        } else if (context.selectedRowsData && context.selectedRowsData.length > 0) {
           controlDataSource = "table-selection";
           console.log("🔄 자동 판단: table-selection 모드 사용");
         } else if (context.formData && Object.keys(context.formData).length > 0) {
@@ -755,6 +786,8 @@ export class ButtonActionExecutor {
         formData: context.formData || {},
         selectedRows: context.selectedRows || [],
         selectedRowsData: context.selectedRowsData || [],
+        flowSelectedData: context.flowSelectedData || [],
+        flowSelectedStepId: context.flowSelectedStepId,
         controlDataSource,
       };
 
@@ -779,11 +812,20 @@ export class ButtonActionExecutor {
           // 노드 플로우 실행 API 호출 (API 클라이언트 사용)
           const { executeNodeFlow } = await import("@/lib/api/nodeFlows");
 
-          // 데이터 소스 준비: 선택된 행 또는 폼 데이터
+          // 데이터 소스 준비: 플로우 선택, 테이블 선택, 또는 폼 데이터
           let sourceData: any = null;
           let dataSourceType: string = "none";
 
-          if (context.selectedRowsData && context.selectedRowsData.length > 0) {
+          if (context.flowSelectedData && context.flowSelectedData.length > 0) {
+            // 플로우에서 선택된 데이터 사용
+            sourceData = context.flowSelectedData;
+            dataSourceType = "flow-selection";
+            console.log("🌊 플로우 선택 데이터 사용:", {
+              stepId: context.flowSelectedStepId,
+              dataCount: sourceData.length,
+              sourceData,
+            });
+          } else if (context.selectedRowsData && context.selectedRowsData.length > 0) {
             // 테이블에서 선택된 행 데이터 사용
             sourceData = context.selectedRowsData;
             dataSourceType = "table-selection";