플로우 단계별 버튼 표시 설정

frontend/components/screen/widgets/FlowWidget.tsx

@@ -27,6 +27,7 @@ import {
   PaginationNext,
   PaginationPrevious,
 } from "@/components/ui/pagination";
+import { useFlowStepStore } from "@/stores/flowStepStore";
 
 interface FlowWidgetProps {
   component: FlowComponent;
@@ -37,6 +38,10 @@ interface FlowWidgetProps {
 }
 
 export function FlowWidget({ component, onStepClick, onSelectedDataChange, flowRefreshKey, onFlowRefresh }: FlowWidgetProps) {
+  // 🆕 전역 상태 관리
+  const setSelectedStep = useFlowStepStore((state) => state.setSelectedStep);
+  const resetFlow = useFlowStepStore((state) => state.resetFlow);
+
   const [flowData, setFlowData] = useState<FlowDefinition | null>(null);
   const [steps, setSteps] = useState<FlowStep[]>([]);
   const [stepCounts, setStepCounts] = useState<Record<number, number>>({});
@@ -68,6 +73,9 @@ export function FlowWidget({ component, onStepClick, onSelectedDataChange, flowR
   const showStepCount = config.showStepCount !== false && component.showStepCount !== false; // 기본값 true
   const allowDataMove = config.allowDataMove || component.allowDataMove || false;
 
+  // 🆕 플로우 컴포넌트 ID (버튼이 이 플로우를 참조할 때 사용)
+  const flowComponentId = component.id;
+
 
   // 선택된 스텝의 데이터를 다시 로드하는 함수
   const refreshStepData = async () => {
@@ -197,31 +205,43 @@ export function FlowWidget({ component, onStepClick, onSelectedDataChange, flowR
     }
   }, [flowRefreshKey]);
 
-  // 스텝 클릭 핸들러
+  // 🆕 언마운트 시 전역 상태 초기화
+  useEffect(() => {
+    return () => {
+      console.log("🧹 [FlowWidget] 언마운트 - 전역 상태 초기화:", flowComponentId);
+      resetFlow(flowComponentId);
+    };
+  }, [flowComponentId, resetFlow]);
+
+  // 🆕 스텝 클릭 핸들러 (전역 상태 업데이트 추가)
   const handleStepClick = async (stepId: number, stepName: string) => {
+    // 외부 콜백 실행
     if (onStepClick) {
       onStepClick(stepId, stepName);
-      return;
     }
 
     // 같은 스텝을 다시 클릭하면 접기
     if (selectedStepId === stepId) {
       setSelectedStepId(null);
+      setSelectedStep(flowComponentId, null); // 🆕 전역 상태 업데이트
       setStepData([]);
       setStepDataColumns([]);
       setSelectedRows(new Set());
-      // 선택 초기화 전달
       onSelectedDataChange?.([], null);
+
+      console.log("🔄 [FlowWidget] 단계 선택 해제:", { flowComponentId, stepId });
       return;
     }
 
     // 새로운 스텝 선택 - 데이터 로드
     setSelectedStepId(stepId);
+    setSelectedStep(flowComponentId, stepId); // 🆕 전역 상태 업데이트
     setStepDataLoading(true);
     setSelectedRows(new Set());
-    // 선택 초기화 전달
     onSelectedDataChange?.([], stepId);
 
+    console.log("✅ [FlowWidget] 단계 선택:", { flowComponentId, stepId, stepName });
+
     try {
       const response = await getStepDataList(flowId!, stepId, 1, 100);