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

frontend/components/screen/OptimizedButtonComponent.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { toast } from "react-hot-toast";
-import { Loader2, CheckCircle2, AlertCircle, Clock } from "lucide-react";
+import { Loader2, CheckCircle2, AlertCircle, Clock, Workflow } from "lucide-react";
 import { ComponentData, ButtonActionType } from "@/types/screen";
 import {
   optimizedButtonDataflowService,
@@ -14,6 +14,7 @@ import { dataflowJobQueue } from "@/lib/services/dataflowJobQueue";
 import { cn } from "@/lib/utils";
 import { Badge } from "@/components/ui/badge";
 import { executeButtonWithFlow, handleFlowExecutionResult } from "@/lib/utils/nodeFlowButtonExecutor";
+import { useCurrentFlowStep } from "@/stores/flowStepStore";
 
 interface OptimizedButtonProps {
   component: ComponentData;
@@ -59,6 +60,54 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
 
   const config = component.webTypeConfig;
   const buttonLabel = component.label || "버튼";
+  const flowConfig = config?.flowVisibilityConfig;
+
+  // 🆕 현재 플로우 단계 구독
+  const currentStep = useCurrentFlowStep(flowConfig?.targetFlowComponentId);
+
+  // 🆕 버튼 표시 여부 계산
+  const shouldShowButton = useMemo(() => {
+    // 플로우 제어 비활성화 시 항상 표시
+    if (!flowConfig?.enabled) {
+      return true;
+    }
+
+    // 플로우 단계가 선택되지 않은 경우 처리
+    if (currentStep === null) {
+      // 🔧 화이트리스트 모드일 때는 단계 미선택 시 숨김
+      if (flowConfig.mode === "whitelist") {
+        console.log("🔍 [OptimizedButton] 화이트리스트 모드 + 단계 미선택 → 숨김");
+        return false;
+      }
+      // 블랙리스트나 all 모드는 표시
+      return true;
+    }
+
+    const { mode, visibleSteps = [], hiddenSteps = [] } = flowConfig;
+
+    let result = true;
+    if (mode === "whitelist") {
+      result = visibleSteps.includes(currentStep);
+    } else if (mode === "blacklist") {
+      result = !hiddenSteps.includes(currentStep);
+    } else if (mode === "all") {
+      result = true;
+    }
+
+    // 항상 로그 출력 (개발 모드뿐만 아니라)
+    console.log("🔍 [OptimizedButton] 표시 체크:", {
+      buttonId: component.id,
+      buttonLabel,
+      flowComponentId: flowConfig.targetFlowComponentId,
+      currentStep,
+      mode,
+      visibleSteps,
+      hiddenSteps,
+      result: result ? "표시 ✅" : "숨김 ❌",
+    });
+
+    return result;
+  }, [flowConfig, currentStep, component.id, buttonLabel]);
 
   // 🔥 디바운싱된 클릭 핸들러 (300ms)
   const handleClick = useCallback(async () => {
@@ -514,6 +563,18 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
     );
   };
 
+  // 🆕 플로우 단계별 표시 제어
+  if (!shouldShowButton) {
+    // 레이아웃 동작에 따라 다르게 처리
+    if (flowConfig?.layoutBehavior === "preserve-position") {
+      // 위치 유지 (빈 공간, display: none)
+      return <div style={{ display: "none" }} />;
+    } else {
+      // 완전히 렌더링하지 않음 (auto-compact, 빈 공간 제거)
+      return null;
+    }
+  }
+
   return (
     <div className="relative">
       <Button
@@ -549,10 +610,19 @@ export const OptimizedButtonComponent: React.FC<OptimizedButtonProps> = ({
       {/* 백그라운드 작업 상태 표시 */}
       {renderBackgroundStatus()}
 
+      {/* 🆕 플로우 제어 활성화 표시 */}
+      {flowConfig?.enabled && (
+        <div className="absolute -right-1 -top-1">
+          <Badge variant="outline" className="h-4 bg-white px-1 text-xs" title="플로우 단계별 표시 제어 활성화">
+            <Workflow className="h-3 w-3" />
+          </Badge>
+        </div>
+      )}
+
       {/* 제어관리 활성화 표시 */}
       {config?.enableDataflowControl && (
         <div className="absolute -right-1 -bottom-1">
-          <Badge variant="outline" className="h-4 bg-white px-1 text-xs">
+          <Badge variant="outline" className="h-4 bg-white px-1 text-xs" title="제어관리 활성화">
             🔧
           </Badge>
         </div>