'use client' import React, { useState, useEffect } from 'react' import { useSession } from 'next-auth/react' import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog' import { Button } from '@/components/ui/button' import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Badge } from '@/components/ui/badge' import { Checkbox } from '@/components/ui/checkbox' import { Label } from '@/components/ui/label' import { Input } from '@/components/ui/input' import { toast } from 'sonner' import { FileText, Upload, Eye, Send, CheckCircle, Download, } from 'lucide-react' import { getBasicInfo, getContractItems, getSubcontractChecklist, uploadContractReviewFile, sendContractReviewRequest, getContractById } from '../service' interface ContractReviewRequestDialogProps { contract: Record open: boolean onOpenChange: (open: boolean) => void } interface ContractSummary { basicInfo: Record items: Record[] subcontractChecklist: Record | null } export function ContractReviewRequestDialog({ contract, open, onOpenChange }: ContractReviewRequestDialogProps) { const { data: session } = useSession() const [currentStep, setCurrentStep] = useState(1) const [contractSummary, setContractSummary] = useState(null) const [uploadedFile, setUploadedFile] = useState(null) const [generatedPdfUrl, setGeneratedPdfUrl] = useState(null) const [generatedPdfBuffer, setGeneratedPdfBuffer] = useState(null) const [isLoading, setIsLoading] = useState(false) const [pdfViewerInstance, setPdfViewerInstance] = useState(null) const [isPdfPreviewVisible, setIsPdfPreviewVisible] = useState(false) const contractId = contract.id as number const userId = session?.user?.id || '' // LOI 템플릿용 변수 매핑 함수 const mapContractSummaryToLOITemplate = (contractSummary: ContractSummary) => { const { basicInfo, items } = contractSummary const firstItem = items && items.length > 0 ? items[0] : {} // 날짜 포맷팅 헬퍼 함수 const formatDate = (date: unknown) => { if (!date) return '' try { const d = new Date(date) return d.toLocaleDateString('ko-KR') } catch { return '' } } return { // 날짜 관련 (템플릿에서 {{todayDate}} 형식으로 사용) todayDate: new Date().toLocaleDateString('ko-KR'), // 벤더 정보 vendorName: basicInfo?.vendorName || '', representativeName: '', // 벤더 대표자 이름 - 현재 데이터에 없음, 향후 확장 가능 // 계약 기본 정보 contractNumber: basicInfo?.contractNumber || '', // 프로젝트 정보 projectNumber: '', // 프로젝트 코드 - 현재 데이터에 없음, 향후 확장 가능 projectName: basicInfo?.projectName || '', project: basicInfo?.projectName || '', // 아이템 정보 item: firstItem?.itemInfo || '', // 무역 조건 incoterms: basicInfo?.deliveryTerm || '', // Incoterms 대신 deliveryTerm 사용 shippingLocation: basicInfo?.shippingLocation || '', // 금액 및 통화 contractCurrency: basicInfo?.currency || '', contractAmount: basicInfo?.contractAmount || '', totalAmount: basicInfo?.contractAmount || '', // totalAmount가 없으면 contractAmount 사용 // 수량 quantity: firstItem?.quantity || '', // 납기일 contractDeliveryDate: formatDate(basicInfo?.contractDeliveryDate), // 지급 조건 paymentTerm: basicInfo?.paymentTerm || '', // 유효기간 validityEndDate: formatDate(basicInfo?.endDate), // validityEndDate 대신 endDate 사용 } } // 1단계: 계약 현황 수집 const collectContractSummary = React.useCallback(async () => { setIsLoading(true) try { // 각 컴포넌트에서 활성화된 데이터만 수집 const summary: ContractSummary = { basicInfo: {}, items: [], subcontractChecklist: null } // Basic Info 확인 (항상 활성화) try { const basicInfoData = await getBasicInfo(contractId) if (basicInfoData && basicInfoData.success) { summary.basicInfo = basicInfoData.data || {} } // externalYardEntry 정보도 추가로 가져오기 const contractData = await getContractById(contractId) if (contractData) { summary.basicInfo = { ...summary.basicInfo, externalYardEntry: contractData.externalYardEntry || 'N' } } } catch { console.log('Basic Info 데이터 없음') } // 품목 정보 확인 try { const itemsData = await getContractItems(contractId) if (itemsData && itemsData.length > 0) { summary.items = itemsData } } catch { console.log('품목 정보 데이터 없음') } try { // Subcontract Checklist 확인 const subcontractData = await getSubcontractChecklist(contractId) if (subcontractData && subcontractData.success && subcontractData.enabled) { summary.subcontractChecklist = subcontractData.data } } catch { console.log('Subcontract Checklist 데이터 없음') } console.log('contractSummary 구조:', summary) console.log('basicInfo 내용:', summary.basicInfo) setContractSummary(summary) } catch (error) { console.error('Error collecting contract summary:', error) toast.error('계약 정보를 수집하는 중 오류가 발생했습니다.') } finally { setIsLoading(false) } }, [contractId]) // 3단계: 파일 업로드 처리 const handleFileUpload = async (file: File) => { // 파일 확장자 검증 const allowedExtensions = ['.doc', '.docx'] const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.')) if (!allowedExtensions.includes(fileExtension)) { toast.error('Word 문서(.doc, .docx) 파일만 업로드 가능합니다.') return } if (!userId) { toast.error('로그인이 필요합니다.') return } setIsLoading(true) try { // 서버액션을 사용하여 파일 저장 (조건검토용) const result = await uploadContractReviewFile( contractId, file, userId ) if (result.success) { setUploadedFile(file) toast.success('파일이 업로드되었습니다.') } else { throw new Error(result.error || '파일 업로드 실패') } } catch (error) { console.error('Error uploading file:', error) toast.error('파일 업로드 중 오류가 발생했습니다.') } finally { setIsLoading(false) } } // 4단계: PDF 생성 및 미리보기 (PDFTron 사용) const generatePdf = async () => { if (!uploadedFile || !contractSummary) { toast.error('업로드된 파일과 계약 정보가 필요합니다.') return } setIsLoading(true) try { // PDFTron을 사용해서 변수 치환 및 PDF 변환 // @ts-expect-error - PDFTron WebViewer dynamic import const WebViewer = await import("@pdftron/webviewer").then(({ default: WebViewer }) => WebViewer) // 임시 WebViewer 인스턴스 생성 (DOM에 추가하지 않음) const tempDiv = document.createElement('div') tempDiv.style.display = 'none' document.body.appendChild(tempDiv) const instance = await WebViewer( { path: "/pdftronWeb", licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY, fullAPI: true, }, tempDiv ) try { const { Core } = instance const { createDocument } = Core // 템플릿 문서 생성 및 변수 치환 const templateDoc = await createDocument(uploadedFile, { filename: uploadedFile.name, extension: 'docx', }) // LOI 템플릿용 변수 매핑 const mappedTemplateData = mapContractSummaryToLOITemplate(contractSummary) console.log("🔄 변수 치환 시작:", mappedTemplateData) await templateDoc.applyTemplateValues(mappedTemplateData as Record) console.log("✅ 변수 치환 완료") // PDF 변환 const fileData = await templateDoc.getFileData() const pdfBuffer = await (Core as { officeToPDFBuffer: (data: unknown, options: { extension: string }) => Promise }).officeToPDFBuffer(fileData, { extension: 'docx' }) console.log(`✅ PDF 변환 완료: ${uploadedFile.name}`, `크기: ${pdfBuffer.byteLength} bytes`) // PDF 버퍼를 Blob URL로 변환하여 미리보기 const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' }) const pdfUrl = URL.createObjectURL(pdfBlob) setGeneratedPdfUrl(pdfUrl) // PDF 버퍼를 상태에 저장 (최종 전송 시 사용) setGeneratedPdfBuffer(new Uint8Array(pdfBuffer)) toast.success('PDF가 생성되었습니다.') } finally { // 임시 WebViewer 정리 instance.UI.dispose() document.body.removeChild(tempDiv) } } catch (error) { console.error('❌ PDF 생성 실패:', error) toast.error('PDF 생성 중 오류가 발생했습니다.') } finally { setIsLoading(false) } } // PDF 미리보기 기능 const openPdfPreview = async () => { if (!generatedPdfBuffer) { toast.error('생성된 PDF가 없습니다.') return } setIsLoading(true) try { // @ts-expect-error - PDFTron WebViewer dynamic import const WebViewer = await import("@pdftron/webviewer").then(({ default: WebViewer }) => WebViewer) // 기존 인스턴스가 있다면 정리 if (pdfViewerInstance) { console.log("🔄 기존 WebViewer 인스턴스 정리") try { pdfViewerInstance.UI.dispose() } catch (error) { console.warn('기존 WebViewer 정리 중 오류:', error) } setPdfViewerInstance(null) } // 미리보기용 컨테이너 확인 let previewDiv = document.getElementById('pdf-preview-container-review') if (!previewDiv) { console.log("🔄 컨테이너 생성") previewDiv = document.createElement('div') previewDiv.id = 'pdf-preview-container-review' previewDiv.className = 'w-full h-full' previewDiv.style.width = '100%' previewDiv.style.height = '100%' // 실제 컨테이너에 추가 const actualContainer = document.querySelector('[data-pdf-container-review]') if (actualContainer) { actualContainer.appendChild(previewDiv) } } console.log("🔄 WebViewer 인스턴스 생성 시작") // WebViewer 인스턴스 생성 (문서 없이) const instance = await Promise.race([ WebViewer( { path: "/pdftronWeb", licenseKey: process.env.NEXT_PUBLIC_PDFTRON_WEBVIEW_KEY, fullAPI: true, }, previewDiv ), new Promise((_, reject) => setTimeout(() => reject(new Error('WebViewer 초기화 타임아웃')), 30000) ) ]) console.log("🔄 WebViewer 인스턴스 생성 완료") setPdfViewerInstance(instance) // PDF 버퍼를 Blob으로 변환 const pdfBlob = new Blob([generatedPdfBuffer], { type: 'application/pdf' }) const pdfUrl = URL.createObjectURL(pdfBlob) console.log("🔄 PDF Blob URL 생성:", pdfUrl) // 문서 로드 console.log("🔄 문서 로드 시작") const { documentViewer } = instance.Core // 문서 로드 이벤트 대기 await new Promise((resolve, reject) => { const timeout = setTimeout(() => { reject(new Error('문서 로드 타임아웃')) }, 20000) const onDocumentLoaded = () => { clearTimeout(timeout) documentViewer.removeEventListener('documentLoaded', onDocumentLoaded) documentViewer.removeEventListener('documentError', onDocumentError) console.log("🔄 문서 로드 완료") resolve(true) } const onDocumentError = (error: Error) => { clearTimeout(timeout) documentViewer.removeEventListener('documentLoaded', onDocumentLoaded) documentViewer.removeEventListener('documentError', onDocumentError) console.error('문서 로드 오류:', error) reject(error) } documentViewer.addEventListener('documentLoaded', onDocumentLoaded) documentViewer.addEventListener('documentError', onDocumentError) // 문서 로드 시작 documentViewer.loadDocument(pdfUrl) }) setIsPdfPreviewVisible(true) toast.success('PDF 미리보기가 준비되었습니다.') } catch (error) { console.error('PDF 미리보기 실패:', error) const errorMessage = error instanceof Error ? error.message : '알 수 없는 오류' toast.error(`PDF 미리보기 중 오류가 발생했습니다: ${errorMessage}`) } finally { setIsLoading(false) } } // PDF 다운로드 기능 const downloadPdf = () => { if (!generatedPdfBuffer) { toast.error('다운로드할 PDF가 없습니다.') return } const pdfBlob = new Blob([generatedPdfBuffer], { type: 'application/pdf' }) const pdfUrl = URL.createObjectURL(pdfBlob) const link = document.createElement('a') link.href = pdfUrl link.download = `contract_review_${contractId}_${Date.now()}.pdf` document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(pdfUrl) toast.success('PDF가 다운로드되었습니다.') } // PDF 미리보기 닫기 const closePdfPreview = () => { console.log("🔄 PDF 미리보기 닫기 시작") if (pdfViewerInstance) { try { console.log("🔄 WebViewer 인스턴스 정리") pdfViewerInstance.UI.dispose() } catch (error) { console.warn('WebViewer 정리 중 오류:', error) } setPdfViewerInstance(null) } // 컨테이너 정리 const previewDiv = document.getElementById('pdf-preview-container-review') if (previewDiv) { try { previewDiv.innerHTML = '' } catch (error) { console.warn('컨테이너 정리 중 오류:', error) } } setIsPdfPreviewVisible(false) console.log("🔄 PDF 미리보기 닫기 완료") } // 최종 전송 const handleFinalSubmit = async () => { if (!generatedPdfUrl || !contractSummary || !generatedPdfBuffer) { toast.error('생성된 PDF가 필요합니다.') return } if (!userId) { toast.error('로그인이 필요합니다.') return } setIsLoading(true) try { // 서버액션을 사용하여 조건검토요청 전송 const result = await sendContractReviewRequest( contractSummary, generatedPdfBuffer, contractId, userId ) if (result.success) { toast.success('조건검토요청이 전송되었습니다.') onOpenChange(false) // 페이지 새로고침을 위해 window.location.reload() 호출 window.location.reload() } else { // 서버에서 이미 처리된 에러 메시지 표시 toast.error(result.error || '조건검토요청 전송 실패') return } } catch (error) { console.error('Error submitting review request:', error) toast.error('조건검토요청 전송 중 오류가 발생했습니다.') } finally { setIsLoading(false) } } // 다이얼로그가 열릴 때 1단계 데이터 수집 useEffect(() => { if (open && currentStep === 1) { collectContractSummary() } }, [open, currentStep, collectContractSummary]) // 다이얼로그가 닫힐 때 PDF 뷰어 정리 useEffect(() => { if (!open) { closePdfPreview() // 상태 초기화 setCurrentStep(1) setUploadedFile(null) setGeneratedPdfUrl(null) setGeneratedPdfBuffer(null) setIsPdfPreviewVisible(false) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [open]) return ( 조건검토요청 1. 미리보기 2. 템플릿 업로드 3. PDF 미리보기 {/* 1단계: 계약 현황 정리 */} 작성된 계약 현황 {isLoading ? (

계약 정보를 수집하는 중...

) : (
{/* 기본 정보 (필수) */}
필수
계약번호: {String(contractSummary?.basicInfo?.contractNumber || '')}
계약명: {String(contractSummary?.basicInfo?.contractName || '')}
벤더: {String(contractSummary?.basicInfo?.vendorName || '')}
프로젝트: {String(contractSummary?.basicInfo?.projectName || '')}
계약유형: {String(contractSummary?.basicInfo?.contractType || '')}
계약상태: {String(contractSummary?.basicInfo?.contractStatus || '')}
계약금액: {String(contractSummary?.basicInfo?.contractAmount || '')} {String(contractSummary?.basicInfo?.currency || '')}
계약기간: {String(contractSummary?.basicInfo?.startDate || '')} ~ {String(contractSummary?.basicInfo?.endDate || '')}
사양서 유형: {String(contractSummary?.basicInfo?.specificationType || '')}
단가 유형: {String(contractSummary?.basicInfo?.unitPriceType || '')}
연결 PO번호: {String(contractSummary?.basicInfo?.linkedPoNumber || '')}
연결 입찰번호: {String(contractSummary?.basicInfo?.linkedBidNumber || '')}
{/* 지급/인도 조건 */}
필수
지급조건: {String(contractSummary?.basicInfo?.paymentTerm || '')}
세금 유형: {String(contractSummary?.basicInfo?.taxType || '')}
인도조건: {String(contractSummary?.basicInfo?.deliveryTerm || '')}
인도유형: {String(contractSummary?.basicInfo?.deliveryType || '')}
선적지: {String(contractSummary?.basicInfo?.shippingLocation || '')}
하역지: {String(contractSummary?.basicInfo?.dischargeLocation || '')}
계약납기: {String(contractSummary?.basicInfo?.contractDeliveryDate || '')}
위약금: {contractSummary?.basicInfo?.liquidatedDamages ? '적용' : '미적용'}
{/* 추가 조건 */}
필수
연동제 정보: {String(contractSummary?.basicInfo?.interlockingSystem || '')}
계약성립조건: {contractSummary?.basicInfo?.contractEstablishmentConditions && Object.entries(contractSummary.basicInfo.contractEstablishmentConditions) .filter(([, value]) => value === true) .map(([key]) => key) .join(', ') || '없음'}
계약해지조건: {contractSummary?.basicInfo?.contractTerminationConditions && Object.entries(contractSummary.basicInfo.contractTerminationConditions) .filter(([, value]) => value === true) .map(([key]) => key) .join(', ') || '없음'}
{/* 품목 정보 */}
0} disabled /> 선택
{contractSummary?.items && contractSummary.items.length > 0 ? (

총 {contractSummary.items.length}개 품목이 입력되어 있습니다.

{contractSummary.items.slice(0, 3).map((item: Record, index: number) => (
{item.itemInfo || item.description || `품목 ${index + 1}`}
수량: {item.quantity || 0} | 단가: {item.contractUnitPrice || item.unitPrice || 0}
))} {contractSummary.items.length > 3 && (
... 외 {contractSummary.items.length - 3}개 품목
)}
) : (

품목 정보가 입력되지 않았습니다.

)}
{/* 하도급 체크리스트 */}
선택

{contractSummary?.subcontractChecklist ? '정보가 입력되어 있습니다.' : '정보가 입력되지 않았습니다.'}

)}
{/* 2단계: 문서 업로드 */} 계약서 템플릿 업로드

일반계약 표준문서 관리 페이지에 접속하여, 원하는 양식의 계약서를 다운받아 수정 후 업로드하세요.

{ const file = e.target.files?.[0] if (file) handleFileUpload(file) }} />

Word 문서(.doc, .docx) 파일만 업로드 가능합니다.

{uploadedFile && (
업로드 완료

{uploadedFile.name}

)}
{/* 3단계: PDF 미리보기 */} PDF 미리보기 {!generatedPdfUrl ? (
) : (
PDF 생성 완료

생성된 PDF

{/* PDF 미리보기 영역 */}
{isPdfPreviewVisible ? ( <>
) : (

미리보기 버튼을 클릭하여 PDF를 확인하세요

)}
)}
) }