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

frontend/lib/registry/components/button-primary/ButtonPrimaryComponent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useMemo } from "react";
 import { ComponentRendererProps } from "@/types/component";
 import { ButtonPrimaryConfig } from "./types";
 import {
@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { toast } from "sonner";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
+import { useCurrentFlowStep } from "@/stores/flowStepStore";
 
 export interface ButtonPrimaryComponentProps extends ComponentRendererProps {
   config?: ButtonPrimaryConfig;
@@ -85,6 +86,54 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
     screenId,
   });
 
+  // 🆕 플로우 단계별 표시 제어
+  const flowConfig = (component as any).webTypeConfig?.flowVisibilityConfig;
+  const currentStep = useCurrentFlowStep(flowConfig?.targetFlowComponentId);
+
+  // 🆕 버튼 표시 여부 계산
+  const shouldShowButton = useMemo(() => {
+    // 플로우 제어 비활성화 시 항상 표시
+    if (!flowConfig?.enabled) {
+      return true;
+    }
+
+    // 플로우 단계가 선택되지 않은 경우 처리
+    if (currentStep === null) {
+      // 🔧 화이트리스트 모드일 때는 단계 미선택 시 숨김
+      if (flowConfig.mode === "whitelist") {
+        console.log("🔍 [ButtonPrimary] 화이트리스트 모드 + 단계 미선택 → 숨김");
+        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("🔍 [ButtonPrimary] 표시 체크:", {
+      buttonId: component.id,
+      buttonLabel: component.label,
+      flowComponentId: flowConfig.targetFlowComponentId,
+      currentStep,
+      mode,
+      visibleSteps,
+      hiddenSteps,
+      result: result ? "표시 ✅" : "숨김 ❌",
+    });
+
+    return result;
+  }, [flowConfig, currentStep, component.id, component.label]);
+
   // 확인 다이얼로그 상태
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [pendingAction, setPendingAction] = useState<{
@@ -571,6 +620,18 @@ export const ButtonPrimaryComponent: React.FC<ButtonPrimaryComponentProps> = ({
   // DOM 안전한 props만 필터링
   const safeDomProps = filterDOMProps(domProps);
 
+  // 🆕 플로우 단계별 표시 제어
+  if (!shouldShowButton) {
+    // 레이아웃 동작에 따라 다르게 처리
+    if (flowConfig?.layoutBehavior === "preserve-position") {
+      // 위치 유지 (빈 공간, display: none)
+      return <div style={{ display: "none" }} />;
+    } else {
+      // 완전히 렌더링하지 않음 (auto-compact, 빈 공간 제거)
+      return null;
+    }
+  }
+
   return (
     <>
       <div style={componentStyle} className={className} {...safeDomProps}>