이미지 다운로드 부분 수정

2025-11-11 11:23:52 +09:00
parent a14baf617f
commit 3b23fa2514
4 changed files with 110 additions and 88 deletions
--- a/src/entities/common/ui/tax-invoice-sample.tsx
+++ b/src/entities/common/ui/tax-invoice-sample.tsx
@@ -9,27 +9,30 @@ import { useEffect } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { AmountInfo, CustomerInfo, IssueInfo, MerchantInfo, ProductInfo, TransactionInfo } from '@/entities/transaction/model/types';
 import moment from 'moment';
+import { RecipientInfo, SupplierInfo, TransactionDetails } from '@/entities/vat-return/model/types';

 export interface TaxInvoiceSampleProps {
  taxInvoiceSampleOn: boolean;
  setTaxInvoiceSampleOn: (taxInvoiceSampleOn: boolean) => void;
-  merchantInfo?: MerchantInfo;
-  issueInfo?: IssueInfo;
-  amountInfo?: AmountInfo;
-  transactionInfo?: TransactionInfo;
-  customerInfo?: CustomerInfo;
-  productInfo?: ProductInfo;
+  supplierInfo?: SupplierInfo;
+  recipientInfo?: RecipientInfo;
+  issueDate?: string;
+  supplyAmount?: number;
+  taxAmount?: number
+  totalAmount?: number;
+  transactionDetails?: TransactionDetails;
 };

 export const TaxInvoiceSample = ({
  taxInvoiceSampleOn,
  setTaxInvoiceSampleOn,
-  merchantInfo,
-  issueInfo,
-  amountInfo,
-  transactionInfo,
-  customerInfo,
-  productInfo
+  supplierInfo,
+  recipientInfo,
+  issueDate,
+  supplyAmount,
+  taxAmount,
+  totalAmount,
+  transactionDetails
 }: TaxInvoiceSampleProps) => {
  const { t } = useTranslation();

@@ -49,23 +52,7 @@ export const TaxInvoiceSample = ({
    setTaxInvoiceSampleOn(false);
  };

-  const getDateTime = () => {
-    let date = '';
-    let time = '';
-    if(!!issueInfo?.issueDate){
-      date = moment(issueInfo?.issueDate).format('YYYY.MM.DD');
-    }
-    if(!!issueInfo?.issueDate && !!issueInfo?.issueTime){
-      time = moment(issueInfo?.issueDate+' '+issueInfo?.issueTime).format('HH:mm:ss');
-    }
 
-    if(!!date && !!time){
-      return date + ' | ' + time;
-    }
-    else{
-      return '';
-    }
-  };

  useEffect(() => {
    if(!!taxInvoiceSampleOn){
@@ -105,23 +92,23 @@ export const TaxInvoiceSample = ({
              </div>
              <div className="row">
                <div className="k">상호</div>
-                <div className="v">{ merchantInfo?.merchantName }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">대표자</div>
-                <div className="v">{ merchantInfo?.representativeName }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">사업자등록번호</div>
-                <div className="v">{ merchantInfo?.businessNumber }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">전화번호</div>
-                <div className="v">{ merchantInfo?.phoneNumber }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">주소</div>
-                <div className="v">{ merchantInfo?.address }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">URL</div>
@@ -153,7 +140,7 @@ export const TaxInvoiceSample = ({
                <div className="k">총 결제금액</div>
                <div className="v">
                  <NumericFormat
-                    value={ amountInfo?.amount }
+                    value={ 0 }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
@@ -163,7 +150,7 @@ export const TaxInvoiceSample = ({
                <div className="k">과세금액</div>
                <div className="v">
                  <NumericFormat
-                    value={ amountInfo?.supplyAmount }
+                    value={ 0 }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
@@ -173,7 +160,7 @@ export const TaxInvoiceSample = ({
                <div className="k">부가세</div>
                <div className="v">
                  <NumericFormat
-                    value={ amountInfo?.vatAmount }
+                    value={ 0 }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
@@ -183,7 +170,7 @@ export const TaxInvoiceSample = ({
                <div className="k">면세금액</div>
                <div className="v">
                  <NumericFormat
-                    value={ amountInfo?.taxFreeAmount }
+                    value={ 0 }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
@@ -193,7 +180,7 @@ export const TaxInvoiceSample = ({
                <div className="k">봉사료</div>
                <div className="v">
                  <NumericFormat
-                    value={ amountInfo?.serviceAmount }
+                    value={ 0 }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
@@ -202,31 +189,31 @@ export const TaxInvoiceSample = ({
              <div className="row split"></div>
              <div className="row">
                <div className="k">결제수단</div>
-                <div className="v">{ transactionInfo?.paymentMethod }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">현금영수증번호</div>
-                <div className="v">{ issueInfo?.issueNumber }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">주문자</div>
-                <div className="v">{ customerInfo?.customerName }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">상품명</div>
-                <div className="v">{ productInfo?.productName }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">승인번호</div>
-                <div className="v">{ issueInfo?.approvalNumber }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">거래일시</div>
-                <div className="v">{ getDateTime() }</div>
+                <div className="v">{  }</div>
              </div>
              <div className="row">
                <div className="k">용도</div>
-                <div className="v">{ issueInfo?.purpose }</div>
+                <div className="v">{  }</div>
              </div>
            </div>
            <div className="notice">
--- a/src/entities/transaction/ui/section/amount-info-section.tsx
+++ b/src/entities/transaction/ui/section/amount-info-section.tsx
@@ -204,34 +204,36 @@ export const AmountInfoSection = ({
 		userEmail?: string
 	) => {
    if(!!tid){
-      let params: CashReceiptReceiptDownloadParams = {
-        tid: tid
-      };
-      cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => {
-        /*
-        if(rs?.merchantInfo){
-          rs.merchantInfo.merchantName = '나이스페이먼츠';
-        }
-        */
-        setReceiptIssueInfo(rs?.issueInfo);
-        setReceiptMerchantInfo(rs?.merchantInfo);
-        setReceiptTransactionInfo(rs?.transactionInfo);
-        setReceiptAmountInfo(rs?.amountInfo);
-        setReceiptCustomerInfo(rs?.customerInfo);
-        setReceiptProductInfo(rs?.productInfo);
-        if(selectedMode === DownloadSelectedMode.IMAGE){
+      if(selectedMode === DownloadSelectedMode.EMAIL
+        && !!userEmail
+      ){
+        // 추가 api 필요
+      }
+      else if(selectedMode === DownloadSelectedMode.IMAGE){
+        let params: CashReceiptReceiptDownloadParams = {
+          tid: tid
+        };
+        cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => {
+          /*
+          if(rs?.merchantInfo){
+            rs.merchantInfo.merchantName = '나이스페이먼츠';
+          }
+          */
+          setReceiptIssueInfo(rs?.issueInfo);
+          setReceiptMerchantInfo(rs?.merchantInfo);
+          setReceiptTransactionInfo(rs?.transactionInfo);
+          setReceiptAmountInfo(rs?.amountInfo);
+          setReceiptCustomerInfo(rs?.customerInfo);
+          setReceiptProductInfo(rs?.productInfo);
          setCashReceiptSampleOn(true);
-        }
-        else if(selectedMode === DownloadSelectedMode.EMAIL){
-          snackBar('거래확인서 다운 성공');
-        }
          
-      }).catch((e: any) => {
-        if(e.response?.data?.error?.message){
-          snackBar(e.response?.data?.error?.message);
-          return;
-        }
-      });
+        }).catch((e: any) => {
+          if(e.response?.data?.error?.message){
+            snackBar(e.response?.data?.error?.message);
+            return;
+          }
+        });
+      }
    }
  };
  
--- a/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx
+++ b/src/entities/vat-return/ui/detail/tax-invoice-detail.tsx
@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { motion } from 'framer-motion';
-import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-return-detail-mutation';
-import { HeaderType } from '@/entities/common/model/types';
 import {
  Breakdown,
  VatReturnBreakdownParams,
@@ -13,17 +11,10 @@ import {
  VatReturnDetailParams,
  VatReturnDetailResponse
 } from '@/entities/vat-return/model/types';
-import {
-  useSetOnBack,
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
 import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-section';
 import { ReceiverSection } from '@/entities/vat-return/ui/section/receiver-section';
 import { IssueSection } from '@/entities/vat-return/ui/section/issue-section';
 import { AmountSection } from '@/entities/vat-return/ui/section/amount-section';
-import { useVatReturnTaxInvoiceMutation } from '@/entities/vat-return/api/use-vat-return-tax-invoice-mutation';
 import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-detail-bottom-sheet';
 import { useVatReturnBreakdownMutation } from '@/entities/vat-return/api/use-vat-return-breakdown-mutation';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
@@ -46,14 +37,11 @@ export const TaxInvoiceDetail = ({
  const { navigate } = useNavigate();
  const location = useLocation();
  
-  // taxInvoiceNumber = 'TAX202506300001';
-  
  const [openAmount, setOpenAmount] = useState<boolean>(false);
  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
  const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
  
-  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
  const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
  const { mutateAsync: vatReturnBreakdown } = useVatReturnBreakdownMutation(); 

@@ -125,6 +113,7 @@ export const TaxInvoiceDetail = ({
          <div className="option-list pb-86">
            <div className="txn-detail">
              <AmountSection
+                taxInvoiceNumber={ taxInvoiceNumber }
                detail={ detail }
              ></AmountSection>
              <div className="txn-divider minus"></div>
--- a/src/entities/vat-return/ui/section/amount-section.tsx
+++ b/src/entities/vat-return/ui/section/amount-section.tsx
@@ -1,24 +1,39 @@
 import moment from 'moment';
 import { useTranslation } from 'react-i18next';
-import { VatReturnDetailResponse } from '../../model/types';
+import { RecipientInfo, SupplierInfo, TransactionDetails, VatReturnDetailResponse, VatReturnTaxInvoiceParams, VatReturnTaxInvoiceResponse } from '../../model/types';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
-import { NumericFormat } from 'react-number-format';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { useState } from 'react';
 import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
+import { useVatReturnTaxInvoiceMutation } from '../../api/use-vat-return-tax-invoice-mutation';
+import { TaxInvoiceSample } from '@/entities/common/ui/tax-invoice-sample';

 export interface AmountSectionProps {
+  taxInvoiceNumber: string;
  detail: VatReturnDetailResponse;
 };

 export const AmountSection = ({
+  taxInvoiceNumber,
  detail
 }: AmountSectionProps) => {
  const { t, i18n } = useTranslation();
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

+  const [taxInvoiceSampleOn, setTaxInvoiceSampleOn] = useState<boolean>(false);
+
+  const [supplierInfo, setSupplierInfo] = useState<SupplierInfo>();
+  const [recipientInfo, setRecipientInfo] = useState<RecipientInfo>();
+  const [issueDate, setIssueDate] = useState<string>();
+  const [supplyAmount, setSupplyAmount] = useState<number>();
+  const [taxAmount, setTaxAmount] = useState<number>();
+  const [totalAmount, setTotalAmount] = useState<number>();
+  const [transactionDetails, setTransactionDetails] = useState<TransactionDetails>();
+  
+  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
+    
  const openSection = () => {
    const status = !isOpen;
    setIsOpen(status);
@@ -28,7 +43,29 @@ export const AmountSection = ({
 		selectedMode: DownloadSelectedMode,
 		userEmail?: string
 	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && !!userEmail
+    ){
+      // 추가 API 필요
+    }
+    else if(selectedMode === DownloadSelectedMode.IMAGE){
      
+      let params: VatReturnTaxInvoiceParams = {
+        taxInvoiceNumber: taxInvoiceNumber
+      };
+      vatReturnTaxInvoice(params).then((rs: VatReturnTaxInvoiceResponse) => {
+
+        setSupplierInfo(rs?.supplierInfo);
+        setRecipientInfo(rs?.recipientInfo);
+        setIssueDate(rs?.issueDate);
+        setSupplyAmount(rs?.supplyAmount);
+        setTaxAmount(rs?.taxAmount);
+        setTotalAmount(rs?.totalAmount);
+        setTransactionDetails(rs?.transactionDetails);
+
+        setTaxInvoiceSampleOn(true);
+      });
+    }
  };

  const onClickToOpenDownloadBottomSheet = () => {
@@ -97,6 +134,13 @@ export const AmountSection = ({
          sendRequest={ onRequestDownload }
        ></DownloadBottomSheet>
      }
+      { !!taxInvoiceSampleOn &&
+        <TaxInvoiceSample
+          taxInvoiceSampleOn={ taxInvoiceSampleOn }
+          setTaxInvoiceSampleOn={ setTaxInvoiceSampleOn }
+          
+        ></TaxInvoiceSample>
+      }
    </>
  );
 };