- 입금확인서 샘플 추가

2025-11-10 18:19:01 +09:00
parent f547ec2c39
commit 0182a0752a
4 changed files with 140 additions and 16 deletions
--- a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
+++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
@@ -15,7 +15,7 @@ import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
-import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample';
+import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample';

 export interface FundAccountResultDetailProps {
  detailOn: boolean;
@@ -34,7 +34,7 @@ export const FundAccountResultDetail = ({
  const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();

  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
-  const [taxInvoiceOn, setTaxInvoiceOn] = useState<boolean>(false);
+  const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState<boolean>(false);

  const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
  const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
@@ -91,7 +91,7 @@ export const FundAccountResultDetail = ({
      };
      extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
        if (selectedMode === DownloadSelectedMode.IMAGE) {
-          setTaxInvoiceOn(true)
+          setDepositReceiptSampleOn(true)
        } else if (selectedMode === DownloadSelectedMode.EMAIL) {
          snackBar('입금확인서 다운 성공')
        }
@@ -213,10 +213,10 @@ export const FundAccountResultDetail = ({
        }
      </motion.div>
      {
-        <TaxInvoiceSample
-          taxInvoiceOn={taxInvoiceOn}
-          setTaxInvoiceOn={setTaxInvoiceOn}
-        ></TaxInvoiceSample>
+        <DepositReceiptSample
+          depositReceiptSampleOn={depositReceiptSampleOn}
+          setDepositReceiptSampleOn={setDepositReceiptSampleOn}
+        ></DepositReceiptSample>
      }
    </>
  );
--- a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
+++ b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
@@ -11,7 +11,7 @@ import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { snackBar } from '@/shared/lib';
-import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample';
+import { DepositReceiptSample } from '@/entities/common/ui/deposit-receipt-sample';

 export interface PayoutDetailProps {
    detailOn: boolean;
@@ -31,7 +31,7 @@ export const PayoutDetail = ({
    const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();

    const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
-    const [taxInvoiceOn, setTaxInvoiceOn] = useState<boolean>(false);
+    const [depositReceiptSampleOn, setDepositReceiptSampleOn] = useState<boolean>(false);

    const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
    const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
@@ -72,9 +72,9 @@ export const PayoutDetail = ({
            };
            extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
                console.log('Certificate Download Status:', rs);
-                if(selectedMode === DownloadSelectedMode.IMAGE) {
-                    setTaxInvoiceOn(true)
-                } else if(selectedMode === DownloadSelectedMode.EMAIL) {
+                if (selectedMode === DownloadSelectedMode.IMAGE) {
+                    setDepositReceiptSampleOn(true)
+                } else if (selectedMode === DownloadSelectedMode.EMAIL) {
                    snackBar('입금확인서 다운 성공')
                }
            }).catch((error) => {
@@ -205,10 +205,10 @@ export const PayoutDetail = ({
                }
            </motion.div>
            {
-                <TaxInvoiceSample
-                    taxInvoiceOn={taxInvoiceOn}
-                    setTaxInvoiceOn={setTaxInvoiceOn}
-                ></TaxInvoiceSample>
+                <DepositReceiptSample
+                    depositReceiptSampleOn={depositReceiptSampleOn}
+                    setDepositReceiptSampleOn={setDepositReceiptSampleOn}
+                ></DepositReceiptSample>
            }
        </>
    );
--- a/src/entities/common/ui/deposit-receipt-sample.tsx
+++ b/src/entities/common/ui/deposit-receipt-sample.tsx
@@ -0,0 +1,115 @@
+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';
+import { NumericFormat } from 'react-number-format';
+import { DepositInfo } from '@/entities/transaction/model/types';
+
+export interface DepositReceiptSampleProps {
+    depositReceiptSampleOn: boolean;
+    setDepositReceiptSampleOn: (DepositReceiptSampleOn: boolean) => void;
+    depositInfo?: DepositInfo
+};
+
+export const DepositReceiptSample = ({
+    depositReceiptSampleOn,
+    setDepositReceiptSampleOn,
+    depositInfo
+}: DepositReceiptSampleProps) => {
+    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);
+    };
+
+    useEffect(() => {
+        if (!!depositReceiptSampleOn) {
+            downloadImage();
+        }
+    }, [depositReceiptSampleOn]);
+
+
+    return (
+        <>
+            <motion.div
+                className="bottomsheet mail-page"
+                initial="hidden"
+                animate={(depositReceiptSampleOn) ? 'hidden' : 'hidden'}
+                variants={FilterMotionVariants}
+                transition={FilterMotionDuration}
+            >
+                <div className="wrap">
+                    <div id="image-section">
+                        <div className="section">
+                            <div className="head">
+                                <div className="icon">
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        width="16"
+                                        height="20"
+                                        viewBox="0 0 16 20"
+                                        fill="none"
+                                    >
+                                        <path d="M13.7656 0.799805C14.839 0.800034 15.7001 1.70434 15.7002 2.7998V17.2002C15.7001 18.2957 14.839 19.2 13.7656 19.2002H2.23438C1.16097 19.2 0.299907 18.2957 0.299805 17.2002V2.7998C0.299907 1.70434 1.16097 0.800034 2.23438 0.799805H13.7656ZM2.23438 2.40039C2.03318 2.40062 1.85655 2.57273 1.85645 2.7998V17.2002C1.85655 17.4273 2.03318 17.5994 2.23438 17.5996H13.7656C13.9674 17.5994 14.1435 17.4274 14.1436 17.2002V2.7998C14.1435 2.57257 13.9674 2.40062 13.7656 2.40039H2.23438Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
+                                        <path d="M11.9355 3.7998C12.3344 3.79989 12.7002 4.09119 12.7002 4.5C12.7002 4.90881 12.3344 5.20011 11.9355 5.2002H4.06445C3.66564 5.20011 3.2998 4.90881 3.2998 4.5C3.2998 4.09119 3.66564 3.79989 4.06445 3.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
+                                        <path d="M11.9355 6.7998C12.3344 6.79989 12.7002 7.09119 12.7002 7.5C12.7002 7.90881 12.3344 8.20011 11.9355 8.2002H4.06445C3.66564 8.20011 3.2998 7.90881 3.2998 7.5C3.2998 7.09119 3.66564 6.79989 4.06445 6.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
+                                        <path d="M6.91504 9.7998C7.31807 9.7998 7.7002 10.085 7.7002 10.5C7.7002 10.9157 7.31789 11.2002 6.91504 11.2002H4.08496C3.68193 11.2002 3.2998 10.915 3.2998 10.5C3.2998 10.085 3.68193 9.7998 4.08496 9.7998H6.91504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
+                                        <path d="M10.9414 14.7998C11.3391 14.7998 11.7002 15.093 11.7002 15.5C11.7002 15.907 11.3391 16.2002 10.9414 16.2002H6.05859C5.66094 16.2002 5.2998 15.907 5.2998 15.5C5.2998 15.093 5.66094 14.7998 6.05859 14.7998H10.9414Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4" />
+                                    </svg>
+                                </div>
+                                <div className="h-title">입금정보</div>
+                            </div>
+                            <div className="row">
+                                <div className="k">입금일시</div>
+                                <div className="v">{depositInfo?.depositDate}</div>
+                            </div>
+                            <div className="row">
+                                <div className="k">입금은행</div>
+                                <div className="v">{depositInfo?.depositBank}</div>
+                            </div>
+                            <div className="row">
+                                <div className="k">입금계좌</div>
+                                <div className="v">{depositInfo?.depositAccount}</div>
+                            </div>
+                            <div className="row">
+                                <div className="k">금액</div>
+                                <div className="v">
+                                    <NumericFormat
+                                        value={depositInfo?.amount}
+                                        thousandSeparator
+                                        displayType='text'
+                                    >
+                                    </NumericFormat>
+                                </div>
+                            </div>
+                            <div className="row">
+                                <div className="k">입금적요</div>
+                                <div className="v">{depositInfo?.depositReason}</div>
+                            </div>
+                            <div className="row">
+                                <div className="k">입금ID</div>
+                                <div className="v">{depositInfo?.depositId}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    )
+}
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -561,6 +561,15 @@ export interface MerchantInfo {
  subMallBusinessNumber?: string;
 };

+export interface DepositInfo {
+  depositDate?: string;
+  depositBank?: string;
+  depositAccount?: string;
+  amount?: number;
+  depositReason?: string;
+  depositId?: string;
+}
+
 export interface DetailResponse {
  amount?: number;
  customerName?: string;