diff --git a/src/entities/common/ui/deposit-receipt-sample.tsx b/src/entities/common/ui/deposit-receipt-sample.tsx index b1d6c9b..7d2a37d 100644 --- a/src/entities/common/ui/deposit-receipt-sample.tsx +++ b/src/entities/common/ui/deposit-receipt-sample.tsx @@ -3,119 +3,149 @@ 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'; +import { ClipLoader, FadeLoader } from 'react-spinners'; +import { CSSProperties, useEffect, useState } from 'react'; 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 }; +const override: CSSProperties = { + position: 'fixed', + display: 'block', + margin: '0 auto', + top: '50%', + left: '50%', +}; + + export const DepositReceiptSample = ({ - depositReceiptSampleOn, - setDepositReceiptSampleOn, - depositInfo + depositReceiptSampleOn, + setDepositReceiptSampleOn, + depositInfo }: DepositReceiptSampleProps) => { - const { t } = useTranslation(); + const { t } = useTranslation(); + let [loading, setLoading] = useState(false); + let [color, setColor] = useState('#0b0606'); - 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); - }; + 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(); + }); + }).finally(() => { + setLoading(false); + }); + } + const onClickToClose = () => { + setDepositReceiptSampleOn(false); + }; - useEffect(() => { - if(!!depositReceiptSampleOn){ - setTimeout(() => { - downloadImage(); - }, 300); - } - }, [depositReceiptSampleOn]); - - return ( - <> -
-
-
-
-
- NICEPAY -
-
-
-
입금확인증
-
-
-
-
-
- - - - - - - -
-
입금정보
-
-
-
입금일시
-
{ depositInfo?.depositDate}
-
-
-
입금은행
-
{ depositInfo?.depositBank }
-
-
-
입금계좌
-
{ depositInfo?.depositAccount }
-
-
-
금액
-
- -
-
-
-
입금적요
-
{ depositInfo?.depositReason }
-
-
-
입금ID
-
{ depositInfo?.depositId }
-
-
-
-
-
- - ); + useEffect(() => { + if (!!depositReceiptSampleOn) { + setLoading(true); + setTimeout(() => { + downloadImage(); + }, 300); + } + }, [depositReceiptSampleOn, depositInfo]); + + return ( + <> +
+
+
+
+
+ NICEPAY +
+
+
+
입금확인증
+
+
+
+
+
+ + + + + + + +
+
입금정보
+
+
+
입금일시
+
{depositInfo?.depositDate}
+
+
+
입금은행
+
{depositInfo?.depositBank}
+
+
+
입금계좌
+
{depositInfo?.depositAccount}
+
+
+
금액
+
+ +
+
+
+
입금적요
+
{depositInfo?.depositReason}
+
+
+
입금ID
+
{depositInfo?.depositId}
+
+
+
+
+
+ {!!loading && + <> +
+ + + } + + ); };