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

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

@@ -13,10 +13,12 @@ import { ComponentData } from "@/types/screen";
 import { apiClient } from "@/lib/api/client";
 import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
 import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
+import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
 
 interface ButtonConfigPanelProps {
   component: ComponentData;
   onUpdateProperty: (path: string, value: any) => void;
+  allComponents?: ComponentData[]; // 🆕 플로우 위젯 감지용
 }
 
 interface ScreenOption {
@@ -25,7 +27,11 @@ interface ScreenOption {
   description?: string;
 }
 
-export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component, onUpdateProperty }) => {
+export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ 
+  component, 
+  onUpdateProperty,
+  allComponents = [], // 🆕 기본값 빈 배열
+}) => {
   console.log("🎨 ButtonConfigPanel 렌더링:", {
     componentId: component.id,
     "component.componentConfig?.action?.type": component.componentConfig?.action?.type,
@@ -571,6 +577,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
 
         <ImprovedButtonControlConfigPanel component={component} onUpdateProperty={onUpdateProperty} />
       </div>
+
+      {/* 🆕 플로우 단계별 표시 제어 섹션 */}
+      <div className="mt-8 border-t border-gray-200 pt-6">
+        <FlowVisibilityConfigPanel 
+          component={component} 
+          allComponents={allComponents} 
+          onUpdateProperty={onUpdateProperty} 
+        />
+      </div>
     </div>
   );
 };