1 files changed, 68 insertions, 2 deletions

diff --git a/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
index 42fb2b5f..575582cf 100644
--- a/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
+++ b/lib/basic-contract/status-detail/basic-contract-detail-table-toolbar-actions.tsx
@@ -21,8 +21,10 @@ import { Badge } from "@/components/ui/badge"
 import { prepareFinalApprovalAction, quickFinalApprovalAction, resendContractsAction, updateLegalReviewStatusFromSSLVW } from "../service"
 import { BasicContractSignDialog } from "../vendor-table/basic-contract-sign-dialog"
 import { SSLVWPurInqReqDialog } from "@/components/common/legal/sslvw-pur-inq-req-dialog"
-import { requestRedFlagResolution } from "@/lib/compliance/red-flag-resolution"
+import { prepareRedFlagResolutionApproval, requestRedFlagResolution } from "@/lib/compliance/red-flag-resolution"
 import { useRouter } from "next/navigation"
+import { useSession } from "next-auth/react"
+import { ApprovalPreviewDialog } from "@/lib/approval/client"
 
 interface RedFlagResolutionState {
     resolved: boolean
@@ -56,7 +58,16 @@ export function BasicContractDetailTableToolbarActions({
     const [loading, setLoading] = React.useState(false)
     const [buyerSignDialog, setBuyerSignDialog] = React.useState(false)
     const [contractsToSign, setContractsToSign] = React.useState<any[]>([])
+    const [redFlagApprovalPreview, setRedFlagApprovalPreview] = React.useState<{
+        contractIds: number[]
+        templateName: string
+        variables: Record<string, string>
+        title: string
+        defaultApprovers?: string[]
+    } | null>(null)
+    const [showRedFlagApprovalDialog, setShowRedFlagApprovalDialog] = React.useState(false)
     const router = useRouter()
+    const { data: session } = useSession()
 
     // 각 버튼별 활성화 조건 계산
     const canBulkDownload = hasSelectedRows && selectedRows.some(row =>
@@ -448,12 +459,45 @@ export function BasicContractDetailTableToolbarActions({
         setLoading(true)
         try {
             const contractIds = redFlagEligibleContracts.map(c => c.id)
-            const result = await requestRedFlagResolution(contractIds)
+            const preview = await prepareRedFlagResolutionApproval(contractIds)
+            setRedFlagApprovalPreview(preview)
+            setShowRedFlagApprovalDialog(true)
+        } catch (error) {
+            console.error("RED FLAG 해소요청 준비 오류:", error)
+            toast.error(
+                error instanceof Error
+                    ? error.message
+                    : "RED FLAG 해소요청 정보를 준비하는 중 오류가 발생했습니다."
+            )
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const handleRedFlagApprovalConfirm = async (approvalData: {
+        approvers: string[]
+        title: string
+        attachments?: File[]
+    }) => {
+        if (!redFlagApprovalPreview) {
+            toast.error("결재 정보를 찾을 수 없습니다. 다시 시도해주세요.")
+            return
+        }
+
+        setLoading(true)
+        try {
+            const result = await requestRedFlagResolution({
+                contractIds: redFlagApprovalPreview.contractIds,
+                approvers: approvalData.approvers,
+                title: approvalData.title,
+            })
 
             toast.success("RED FLAG 해소요청 결재가 상신되었습니다.", {
                 description: `결재 ID: ${result.approvalId}`,
             })
             table.toggleAllPageRowsSelected(false)
+            setShowRedFlagApprovalDialog(false)
+            setRedFlagApprovalPreview(null)
         } catch (error) {
             console.error("RED FLAG 해소요청 오류:", error)
             toast.error(
@@ -833,6 +877,28 @@ export function BasicContractDetailTableToolbarActions({
                     </DialogFooter>
                 </DialogContent>
             </Dialog>
+            {redFlagApprovalPreview && session?.user?.epId && (
+                <ApprovalPreviewDialog
+                    open={showRedFlagApprovalDialog}
+                    onOpenChange={(open) => {
+                        setShowRedFlagApprovalDialog(open)
+                        if (!open) {
+                            setRedFlagApprovalPreview(null)
+                        }
+                    }}
+                    templateName={redFlagApprovalPreview.templateName}
+                    variables={redFlagApprovalPreview.variables}
+                    title={redFlagApprovalPreview.title}
+                    defaultApprovers={redFlagApprovalPreview.defaultApprovers}
+                    currentUser={{
+                        id: Number(session.user.id),
+                        epId: session.user.epId,
+                        name: session.user.name || undefined,
+                        email: session.user.email || undefined,
+                    }}
+                    onConfirm={handleRedFlagApprovalConfirm}
+                />
+            )}
         </>
     )
 }
\ No newline at end of file