삭제버튼 동작

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -45,6 +45,8 @@ interface RealtimePreviewProps {
   onFlowSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
   refreshKey?: number;
   onRefresh?: () => void;
+  flowRefreshKey?: number;
+  onFlowRefresh?: () => void;
   
   // 폼 데이터 관련 props
   formData?: Record<string, any>;
@@ -101,6 +103,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   onFlowSelectedDataChange,
   refreshKey,
   onRefresh,
+  flowRefreshKey,
+  onFlowRefresh,
   formData,
   onFormDataChange,
 }) => {
@@ -299,6 +303,8 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
           onFlowSelectedDataChange={onFlowSelectedDataChange}
           refreshKey={refreshKey}
           onRefresh={onRefresh}
+          flowRefreshKey={flowRefreshKey}
+          onFlowRefresh={onFlowRefresh}
           formData={formData}
           onFormDataChange={onFormDataChange}
         />

frontend/components/screen/widgets/FlowWidget.tsx

@@ -32,9 +32,11 @@ interface FlowWidgetProps {
   component: FlowComponent;
   onStepClick?: (stepId: number, stepName: string) => void;
   onSelectedDataChange?: (selectedData: any[], stepId: number | null) => void;
+  flowRefreshKey?: number; // 새로고침 키
+  onFlowRefresh?: () => void; // 새로고침 완료 콜백
 }
 
-export function FlowWidget({ component, onStepClick, onSelectedDataChange }: FlowWidgetProps) {
+export function FlowWidget({ component, onStepClick, onSelectedDataChange, flowRefreshKey, onFlowRefresh }: FlowWidgetProps) {
   const [flowData, setFlowData] = useState<FlowDefinition | null>(null);
   const [steps, setSteps] = useState<FlowStep[]>([]);
   const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
@@ -66,23 +68,66 @@ export function FlowWidget({ component, onStepClick, onSelectedDataChange }: Flo
   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,
-  });
+
+  // 선택된 스텝의 데이터를 다시 로드하는 함수
+  const refreshStepData = async () => {
+    if (!flowId) return;
+
+    try {
+      // 스텝 카운트는 항상 업데이트 (선택된 스텝 유무와 관계없이)
+      const countsResponse = await getAllStepCounts(flowId);
+      console.log("📊 스텝 카운트 API 응답:", countsResponse);
+      
+      if (countsResponse.success && countsResponse.data) {
+        // Record 형태로 변환
+        const countsMap: Record<number, number> = {};
+        if (Array.isArray(countsResponse.data)) {
+          countsResponse.data.forEach((item: any) => {
+            countsMap[item.stepId] = item.count;
+          });
+        } else if (typeof countsResponse.data === 'object') {
+          Object.assign(countsMap, countsResponse.data);
+        }
+        
+        console.log("✅ 스텝 카운트 업데이트:", countsMap);
+        setStepCounts(countsMap);
+      }
+
+      // 선택된 스텝이 있으면 해당 스텝의 데이터도 새로고침
+      if (selectedStepId) {
+        setStepDataLoading(true);
+        
+        const response = await getStepDataList(flowId, selectedStepId, 1, 100);
+
+        if (!response.success) {
+          throw new Error(response.message || "데이터를 불러올 수 없습니다");
+        }
+
+        const rows = response.data?.records || [];
+        setStepData(rows);
+
+        // 컬럼 추출
+        if (rows.length > 0) {
+          setStepDataColumns(Object.keys(rows[0]));
+        } else {
+          setStepDataColumns([]);
+        }
+
+        // 선택 초기화
+        setSelectedRows(new Set());
+        onSelectedDataChange?.([], selectedStepId);
+      }
+    } catch (err: any) {
+      console.error("❌ 플로우 새로고침 실패:", err);
+      toast.error(err.message || "데이터를 새로고치는데 실패했습니다");
+    } finally {
+      if (selectedStepId) {
+        setStepDataLoading(false);
+      }
+    }
+  };
 
   useEffect(() => {
-    console.log("🔍 FlowWidget useEffect 실행:", {
-      flowId,
-      hasFlowId: !!flowId,
-      config,
-    });
-
     if (!flowId) {
       setLoading(false);
       return;
@@ -144,6 +189,14 @@ export function FlowWidget({ component, onStepClick, onSelectedDataChange }: Flo
     loadFlowData();
   }, [flowId, showStepCount]);
 
+  // flowRefreshKey가 변경될 때마다 스텝 데이터 새로고침
+  useEffect(() => {
+    if (flowRefreshKey !== undefined && flowRefreshKey > 0 && flowId) {
+      console.log("🔄 플로우 새로고침 실행, flowRefreshKey:", flowRefreshKey);
+      refreshStepData();
+    }
+  }, [flowRefreshKey]);
+
   // 스텝 클릭 핸들러
   const handleStepClick = async (stepId: number, stepName: string) => {
     if (onStepClick) {