[agent-pipeline] pipe-20260303124213-d7zo round-4

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

@@ -18,6 +18,7 @@ import { ButtonDataflowConfigPanel } from "./ButtonDataflowConfigPanel";
 import { ImprovedButtonControlConfigPanel } from "./ImprovedButtonControlConfigPanel";
 import { FlowVisibilityConfigPanel } from "./FlowVisibilityConfigPanel";
 import { QuickInsertConfigSection } from "./QuickInsertConfigSection";
+import { getApprovalDefinitions, type ApprovalDefinition } from "@/lib/api/approval";
 
 // 🆕 제목 블록 타입
 interface TitleBlock {
@@ -107,6 +108,10 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
   const [modalSourcePopoverOpen, setModalSourcePopoverOpen] = useState<Record<number, boolean>>({});
   const [modalTargetPopoverOpen, setModalTargetPopoverOpen] = useState<Record<number, boolean>>({});
 
+  // 결재 유형 목록 상태
+  const [approvalDefinitions, setApprovalDefinitions] = useState<ApprovalDefinition[]>([]);
+  const [approvalDefinitionsLoading, setApprovalDefinitionsLoading] = useState(false);
+
   // 🆕 그룹화 컬럼 선택용 상태
   const [currentTableColumns, setCurrentTableColumns] = useState<Array<{ name: string; label: string }>>([]);
   const [groupByColumnOpen, setGroupByColumnOpen] = useState(false);
@@ -689,6 +694,25 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
     fetchScreens();
   }, [currentScreenCompanyCode]);
 
+  // 결재 유형 목록 가져오기 (approval 액션일 때)
+  useEffect(() => {
+    if (localInputs.actionType !== "approval") return;
+    const fetchApprovalDefinitions = async () => {
+      setApprovalDefinitionsLoading(true);
+      try {
+        const res = await getApprovalDefinitions({ is_active: "Y" });
+        if (res.success && res.data) {
+          setApprovalDefinitions(res.data);
+        }
+      } catch {
+        // 조용히 실패
+      } finally {
+        setApprovalDefinitionsLoading(false);
+      }
+    };
+    fetchApprovalDefinitions();
+  }, [localInputs.actionType]);
+
   // 테이블 컬럼 목록 가져오기 (테이블 이력 보기 액션일 때)
   useEffect(() => {
     const fetchTableColumns = async () => {
@@ -831,6 +855,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
             {/* 고급 기능 */}
             <SelectItem value="quickInsert">즉시 저장</SelectItem>
             <SelectItem value="control">제어 흐름</SelectItem>
+            <SelectItem value="approval">결재 요청</SelectItem>
 
             {/* 특수 기능 (필요 시 사용) */}
             <SelectItem value="barcode_scan">바코드 스캔</SelectItem>
@@ -3730,6 +3755,76 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({
         />
       )}
 
+      {/* 결재 요청(approval) 액션 설정 */}
+      {localInputs.actionType === "approval" && (
+        <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">
+          <h4 className="text-foreground text-sm font-medium">결재 요청 설정</h4>
+          <p className="text-muted-foreground text-xs">
+            버튼 클릭 시 결재 요청 모달이 열립니다. 결재 유형을 선택하면 기본 결재선이 자동으로 세팅됩니다.
+          </p>
+
+          <div>
+            <Label htmlFor="approval-definition" className="text-xs sm:text-sm">
+              결재 유형
+            </Label>
+            <Select
+              value={String(component.componentConfig?.action?.approvalDefinitionId || "")}
+              onValueChange={(value) => {
+                onUpdateProperty("componentConfig.action.approvalDefinitionId", value ? Number(value) : null);
+              }}
+            >
+              <SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
+                <SelectValue placeholder={approvalDefinitionsLoading ? "로딩 중..." : "결재 유형 선택 (선택사항)"} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">유형 없음 (직접 설정)</SelectItem>
+                {approvalDefinitions.map((def) => (
+                  <SelectItem key={def.definition_id} value={String(def.definition_id)}>
+                    {def.definition_name}
+                    {def.description ? ` - ${def.description}` : ""}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              결재 유형을 선택하면 기본 결재선 템플릿이 자동 적용됩니다
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-target-table" className="text-xs sm:text-sm">
+              대상 테이블
+            </Label>
+            <Input
+              id="approval-target-table"
+              placeholder="예: purchase_orders"
+              value={component.componentConfig?.action?.approvalTargetTable || ""}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalTargetTable", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              결재 대상 레코드가 저장된 테이블명
+            </p>
+          </div>
+
+          <div>
+            <Label htmlFor="approval-record-id-field" className="text-xs sm:text-sm">
+              레코드 ID 필드명
+            </Label>
+            <Input
+              id="approval-record-id-field"
+              placeholder="예: id, purchase_id"
+              value={component.componentConfig?.action?.approvalRecordIdField || "id"}
+              onChange={(e) => onUpdateProperty("componentConfig.action.approvalRecordIdField", e.target.value)}
+              className="h-8 text-xs sm:h-10 sm:text-sm"
+            />
+            <p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
+              현재 선택된 레코드의 PK 컬럼명
+            </p>
+          </div>
+        </div>
+      )}
+
       {/* 🆕 이벤트 발송 액션 설정 */}
       {localInputs.actionType === "event" && (
         <div className="bg-muted/50 mt-4 space-y-4 rounded-lg border p-4">