diff --git a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx index f16820c..67a578a 100644 --- a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx +++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx @@ -210,7 +210,7 @@ export const FundAccountResultDetail = ({ > } - { + { depositReceiptSampleOn && { downloadImage(); - }, 500); + }, 300); } }, [cashReceiptSampleOn]); return ( <> -
-
-
-
- NICEPAY -
-
-
-
현금영수증
-
-
-
-
-
- - - - - +
+
+
+
+
+ NICEPAY
-
상점정보
-
-
-
상호
-
{ merchantInfo?.merchantName }
-
-
-
대표자
-
{ merchantInfo?.representativeName }
-
-
-
사업자등록번호
-
{ merchantInfo?.businessNumber }
-
-
-
전화번호
-
{ merchantInfo?.phoneNumber }
-
-
-
주소
-
{ merchantInfo?.address }
-
-
-
URL
-
{ merchantInfo?.merchantUrl }
-
-
-
-
-
-
- - - - - - - -
-
결제정보
-
-
-
총 결제금액
-
- +
+
+
현금영수증
-
-
과세금액
-
- +
+
+
+ + + + + +
+
상점정보
+
+
+
상호
+
{ merchantInfo?.merchantName }
+
+
+
대표자
+
{ merchantInfo?.representativeName }
+
+
+
사업자등록번호
+
{ merchantInfo?.businessNumber }
+
+
+
전화번호
+
{ merchantInfo?.phoneNumber }
+
+
+
주소
+
{ merchantInfo?.address }
+
+
+
URL
+
{ merchantInfo?.merchantUrl }
-
-
부가세
-
- +
+
+
+
+ + + + + + + +
+
결제정보
+
+
+
총 결제금액
+
+ +
+
+
+
과세금액
+
+ +
+
+
+
부가세
+
+ +
+
+
+
면세금액
+
+ +
+
+
+
봉사료
+
+ +
+
+
+
+
결제수단
+
{ transactionInfo?.paymentMethod }
+
+
+
현금영수증번호
+
{ issueInfo?.issueNumber }
+
+
+
주문자
+
{ customerInfo?.customerName }
+
+
+
상품명
+
{ productInfo?.productName }
+
+
+
승인번호
+
{ issueInfo?.approvalNumber }
+
+
+
거래일시
+
{ getDateTime() }
+
+
+
용도
+
{ issueInfo?.purpose }
-
-
면세금액
-
- -
+
+ * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.
+ * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.
+ * 현금영수증 문의 126-1-1
-
-
봉사료
-
- -
-
-
-
-
결제수단
-
{ transactionInfo?.paymentMethod }
-
-
-
현금영수증번호
-
{ issueInfo?.issueNumber }
-
-
-
주문자
-
{ customerInfo?.customerName }
-
-
-
상품명
-
{ productInfo?.productName }
-
-
-
승인번호
-
{ issueInfo?.approvalNumber }
-
-
-
거래일시
-
{ getDateTime() }
-
-
-
용도
-
{ issueInfo?.purpose }
-
-
-
- * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.
- * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.
- * 현금영수증 문의 126-1-1
diff --git a/src/entities/common/ui/deposit-receipt-sample.tsx b/src/entities/common/ui/deposit-receipt-sample.tsx index dd661d6..821ee9f 100644 --- a/src/entities/common/ui/deposit-receipt-sample.tsx +++ b/src/entities/common/ui/deposit-receipt-sample.tsx @@ -1,6 +1,4 @@ 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'; @@ -10,108 +8,114 @@ import { NumericFormat } from 'react-number-format'; import { DepositInfo } from '@/entities/transaction/model/types'; export interface DepositReceiptSampleProps { - depositReceiptSampleOn: boolean; - setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void; - depositInfo?: DepositInfo + depositReceiptSampleOn: boolean; + setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void; + depositInfo?: DepositInfo }; export const DepositReceiptSample = ({ - depositReceiptSampleOn, - setDepositReceiptSampleOn, - depositInfo + depositReceiptSampleOn, + setDepositReceiptSampleOn, + depositInfo }: DepositReceiptSampleProps) => { - const { t } = useTranslation(); + 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 = () => { - setDepositReceiptSampleOn(false); - }; + 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'), () => { + onClickToClose(); + }); + }); + } + const onClickToClose = () => { + setDepositReceiptSampleOn(false); + }; - useEffect(() => { - if (!!depositReceiptSampleOn) { - downloadImage(); - } - }, [depositReceiptSampleOn]); - - - return ( - <> - -
-
-
입금확인증
-
-
-
- - - - - - - -
-
입금정보
-
-
-
입금일시
-
{depositInfo?.depositDate}
-
-
-
입금은행
-
{depositInfo?.depositBank}
-
-
-
입금계좌
-
{depositInfo?.depositAccount}
-
-
-
금액
-
- - -
-
-
-
입금적요
-
{depositInfo?.depositReason}
-
-
-
입금ID
-
{depositInfo?.depositId}
-
-
-
-
- - - ) -} \ No newline at end of file + useEffect(() => { + if(!!depositReceiptSampleOn){ + setTimeout(() => { + downloadImage(); + }, 300); + } + }, [depositReceiptSampleOn]); + + return ( + <> +
+
+
+
+
+ NICEPAY +
+
+
+
입금확인증
+
+
+
+
+
+ + + + + + + +
+
입금정보
+
+
+
입금일시
+
{ depositInfo?.depositDate}
+
+
+
입금은행
+
{ depositInfo?.depositBank }
+
+
+
입금계좌
+
{ depositInfo?.depositAccount }
+
+
+
금액
+
+ +
+
+
+
입금적요
+
{ depositInfo?.depositReason }
+
+
+
입금ID
+
{ depositInfo?.depositId }
+
+
+
+
+
+ + ); +}; \ No newline at end of file diff --git a/src/shared/ui/assets/css/style-tax-invoice.css b/src/shared/ui/assets/css/style-tax-invoice.css index 3428e85..ee8e8c9 100644 --- a/src/shared/ui/assets/css/style-tax-invoice.css +++ b/src/shared/ui/assets/css/style-tax-invoice.css @@ -40,9 +40,25 @@ .mail-page { margin: 0; background: #FAFAFA; - padding: 0; width: 100%; - transform: translateY(100%); + min-height: unset; + width: 100%; position: fixed; - bottom: 0; + left: 0; + top: 0; + z-index: 1010; + display: unset; + padding-bottom: 0; + transform: translateX(100%); +} + +.mail-page .wrap { + min-width: unset; + padding-bottom: 30px; +} +.mail-page .wrap .header .header-top { + box-sizing: unset; +} +.mail-page .wrap .header .divider { + margin-top: 0px; }