diff --git a/src/components/dues/DuesReceiptCard.tsx b/src/components/dues/DuesReceiptCard.tsx index 18b6a224..94b4154f 100644 --- a/src/components/dues/DuesReceiptCard.tsx +++ b/src/components/dues/DuesReceiptCard.tsx @@ -48,6 +48,20 @@ function DuesReceiptCard({ transaction, receiptFiles, onOpenReceiptViewer }: Due ); if (hasReceipt) { + if (isPdf) { + return ( + + {content} + + ); + } + return ( 1; const handlePrevious = () => { @@ -64,16 +61,12 @@ function DuesReceiptViewerModal({ open, onOpenChange, receiptFiles }: DuesReceip /> )} - {isPdf ? ( - - ) : ( - // eslint-disable-next-line @next/next/no-img-element - - )} + {/* eslint-disable-next-line @next/next/no-img-element */} + {hasMultipleReceipts && ( @@ -86,71 +79,4 @@ function DuesReceiptViewerModal({ open, onOpenChange, receiptFiles }: DuesReceip ); } -function PdfReceiptPreview({ receipt }: { receipt: DuesReceiptFile }) { - const [isDownloading, setIsDownloading] = useState(false); - - const handleDownload = async () => { - if (isDownloading) return; - - setIsDownloading(true); - - try { - const response = await fetch(receipt.fileUrl); - if (!response.ok) throw new Error('PDF 다운로드에 실패했습니다.'); - - const blob = await response.blob(); - const objectUrl = URL.createObjectURL(blob); - const anchor = document.createElement('a'); - - anchor.href = objectUrl; - anchor.download = receipt.fileName; - document.body.appendChild(anchor); - anchor.click(); - anchor.remove(); - setTimeout(() => { - URL.revokeObjectURL(objectUrl); - }, 1000); - } catch { - toastError('파일 다운로드에 실패했습니다.'); - } finally { - setIsDownloading(false); - } - }; - - return ( - - - - - - - {receipt.fileName} - - PDF 영수증은 원본 파일로 열거나 다운로드할 수 있어요 - - - - - - 새 탭에서 열기 - - - - {isDownloading ? '다운로드 중' : '다운로드'} - - - - ); -} - export { DuesReceiptViewerModal, type DuesReceiptViewerModalProps }; diff --git a/src/components/dues/DuesTransactionDetailModal.tsx b/src/components/dues/DuesTransactionDetailModal.tsx index c33f9205..92441dd4 100644 --- a/src/components/dues/DuesTransactionDetailModal.tsx +++ b/src/components/dues/DuesTransactionDetailModal.tsx @@ -6,7 +6,7 @@ import { DeleteIcon } from '@/assets/icons'; import { Icon } from '@/components/ui'; import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'; import type { DuesTransaction } from '@/types/dues'; -import { getReceiptFiles } from '@/utils/dues/duesTransaction'; +import { getReceiptFiles, isPdfReceipt } from '@/utils/dues/duesTransaction'; import { DuesReceiptCard } from './DuesReceiptCard'; import { DuesReceiptViewerModal } from './DuesReceiptViewerModal'; import { DuesTransactionDetailCard } from './DuesTransactionDetailCard'; @@ -27,6 +27,7 @@ function DuesTransactionDetailModal({ if (!transaction) return null; const receiptFiles = getReceiptFiles(transaction); + const imageReceiptFiles = receiptFiles.filter((receipt) => !isPdfReceipt(receipt)); return ( @@ -61,7 +62,7 @@ function DuesTransactionDetailModal({ key={receiptViewerOpen ? 'receipt-viewer-open' : 'receipt-viewer-closed'} open={receiptViewerOpen} onOpenChange={setReceiptViewerOpen} - receiptFiles={receiptFiles} + receiptFiles={imageReceiptFiles} />
{receipt.fileName}
- PDF 영수증은 원본 파일로 열거나 다운로드할 수 있어요 -