diff --git a/src/entities/common/ui/download-bottom-sheet.tsx b/src/entities/common/ui/download-bottom-sheet.tsx index c82f45a..9e686f9 100644 --- a/src/entities/common/ui/download-bottom-sheet.tsx +++ b/src/entities/common/ui/download-bottom-sheet.tsx @@ -3,7 +3,6 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { useStore } from '@/shared/model/store'; import { motion } from 'framer-motion'; import { ChangeEvent, useEffect, useState } from 'react'; -import { toPng } from 'html-to-image'; import { snackBar } from '@/shared/lib'; import { useTranslation } from 'react-i18next'; @@ -38,7 +37,7 @@ export const DownloadBottomSheet = ({ const [sheetEmailMode, setSheetEmailMode] = useState(emailMode); const [selectedMode, setSelectedMode] = useState(); - + const onClickToClose = () => { setBottomSheetOn(false); }; @@ -61,23 +60,6 @@ export const DownloadBottomSheet = ({ } }; - const downloadImage = () => { - const app = document.getElementById('root') as HTMLElement; - toPng(app).then((image) => { - const link = document.createElement('a'); - link.download = 'downloadImage.png'; - link.href = image; - link.click(); - snackBar(t('common.imageRequested')); - }); - }; - const onDownloadImage = () => { - // downloadImage(); - setTimeout(() => { - onClickToClose(); - }, 10); - }; - const onClickToSelectMode = (mode: DownloadSelectedMode) => { setSelectedMode(mode); }; diff --git a/src/entities/common/ui/tax-invoice-sample.tsx b/src/entities/common/ui/tax-invoice-sample.tsx new file mode 100644 index 0000000..b97a37a --- /dev/null +++ b/src/entities/common/ui/tax-invoice-sample.tsx @@ -0,0 +1,260 @@ +import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; +import { FilterMotionDuration, FilterMotionVariants } from '../model/constant'; +import { snackBar } from '@/shared/lib'; +import { toPng } from 'html-to-image'; +import { useTranslation } from 'react-i18next'; +import '@/shared/ui/assets/css/style-tax-invoice.css'; +import { useEffect } from 'react'; + +export interface TaxInoviceSampleProps { + taxInvoiceOn: boolean; + setTaxInvoiceOn: (taxInvoiceOn: boolean) => void; +}; + +export const TaxInvoiceSample = ({ + taxInvoiceOn, + setTaxInvoiceOn +}: TaxInoviceSampleProps) => { + const { t } = useTranslation(); + + const downloadImage = () => { + const section = document.getElementById('image-section') as HTMLElement; + toPng(section).then((image) => { + const link = document.createElement('a'); + link.download = 'downloadImage.png'; + link.href = image; + link.click(); + snackBar(t('common.imageRequested'), function(){ + onClickToClose(); + }); + }); + }; + const onClickToClose = () => { + setTaxInvoiceOn(false); + }; + + useEffect(() => { + if(!!taxInvoiceOn){ + downloadImage(); + } + }, [taxInvoiceOn]); + + + return ( + <> + +
+
+
+ NICEPAY + 닫기 +
+
+
이메일 발송
+ + 발송 + 인쇄 +
+
+
+
신용카드 매출전표
+ +
+
+ +
+
+
+
+ + + + + +
+
상점정보
+
+
+
상호
+
아이스 페이먼츠 주식회사
+
+
+
대표자
+
김광철
+
+
+
사업자등록번호
+
815-81-00527
+
+
+
전화번호
+
1661-7335
+
+
+
주소
+
서울 마포구 아현동 크레디트센터빌딩 217 11
+
+
+
URL
+
home.nicepay.co.kr
+
+
+
+
+
+
+ + + + + + + +
+
결제정보
+ +
+
+
총 결제금액
+
4,552,000원
+
+
+
금액
+
343,940원
+
+
+
부가세
+
343,940원
+
+
+
+
카드종류
+
신한
+
+
+
카드번호
+
489023******0070
+
+
+
구매자
+
홍*동
+
+
+
상품명
+
곰인형
+
+
+
거래유형
+
전취소
+
+
+
일반/할부
+
일시불
+
+
+
승인번호
+
14219606
+
+
+
거래일시
+
2025.09.22 | 11:32:29
+
+
+
취소일시
+
2025.09.22 | 23:10:16
+
+
+ +
+ +
+
+
+ + + + + + + + + + +
+
결제대행사 정보
+
+
+
상호
+
나이스페이먼츠 주식회사
+
+
+
대표자명
+
김광철
+
+
+
사업자등록번호
+
815-81-00527
+
+
+
전화번호
+
1661-0808
+
+
+
주소
+
서울특별시 영등포구 문래로28길 25 (문래동3가)
+
+
+
+
신용카드 청구서에는 NICE로 표기됩니다.
* 부가세법 제 46조에 따라 신용카드 매출전표를 이용하여 매입세액 공제가 가능합니다.
(동법 제 33조 2항에 근거하여 신용카드 매출전표를 발행한 경우에는 세금계산서를 발급하지 아니합니다.)
+
+ + + ); +}; \ No newline at end of file diff --git a/src/entities/transaction/ui/detail/cash-receit-detail.tsx b/src/entities/transaction/ui/detail/cash-receit-detail.tsx index 7eeed01..a4fdf9c 100644 --- a/src/entities/transaction/ui/detail/cash-receit-detail.tsx +++ b/src/entities/transaction/ui/detail/cash-receit-detail.tsx @@ -153,8 +153,8 @@ export const CashReceiptDetail = ({ transactionCategory={ TransactionCategory.CashReceipt } amountInfo={ amountInfo } isOpen={ showAmountInfo } + tid={ tid } onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) } - purposeType={ purposeType } canDownloadReceipt={ canDownloadReceipt } >
diff --git a/src/entities/transaction/ui/section/amount-info-section.tsx b/src/entities/transaction/ui/section/amount-info-section.tsx index 724663d..8fb0789 100644 --- a/src/entities/transaction/ui/section/amount-info-section.tsx +++ b/src/entities/transaction/ui/section/amount-info-section.tsx @@ -8,6 +8,7 @@ import { snackBar } from '@/shared/lib'; import { useCashReceiptReceiptDownloadMutation } from '../../api/use-cash-receipt-receipt-download-mutation'; import { useState } from 'react'; import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet'; +import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample'; export const AmountInfoSection = ({ transactionCategory, @@ -22,6 +23,7 @@ export const AmountInfoSection = ({ const { mutateAsync: cashReceiptReceiptDownload } = useCashReceiptReceiptDownloadMutation(); const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState(false); + const [taxInvoiceOn, setTaxInvoiceOn] = useState(false); let newAmountInfo: Record | undefined = amountInfo; const subItems: Record> = { @@ -194,13 +196,20 @@ export const AmountInfoSection = ({ selectedMode: DownloadSelectedMode, userEmail?: string ) => { + console.log(selectedMode, userEmail, tid) if(!!tid){ let params: CashReceiptReceiptDownloadParams = { tid: tid }; cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => { console.log(rs); - snackBar('거래확인서 다운 성공'); + if(selectedMode === DownloadSelectedMode.IMAGE){ + setTaxInvoiceOn(true); + } + else if(selectedMode === DownloadSelectedMode.EMAIL){ + snackBar('거래확인서 다운 성공'); + } + }).catch((e: any) => { if(e.response?.data?.error?.message){ snackBar(e.response?.data?.error?.message); @@ -403,7 +412,7 @@ export const AmountInfoSection = ({ }
{ (transactionCategory === TransactionCategory.CashReceipt) && - !!canDownloadReceipt && + // !!canDownloadReceipt &&