이미지 다운로드 부분 수정

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;
+  supplierInfo?: SupplierInfo;
-  issueInfo?: IssueInfo;
+  recipientInfo?: RecipientInfo;
-  amountInfo?: AmountInfo;
+  issueDate?: string;
-  transactionInfo?: TransactionInfo;
+  supplyAmount?: number;
-  customerInfo?: CustomerInfo;
+  taxAmount?: number
-  productInfo?: ProductInfo;
+  totalAmount?: number;
+  transactionDetails?: TransactionDetails;
 };
 
 export const TaxInvoiceSample = ({
   taxInvoiceSampleOn,
   setTaxInvoiceSampleOn,
-  merchantInfo,
+  supplierInfo,
-  issueInfo,
+  recipientInfo,
-  amountInfo,
+  issueDate,
-  transactionInfo,
+  supplyAmount,
-  customerInfo,
+  taxAmount,
-  productInfo
+  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">

src/entities/transaction/ui/section/amount-info-section.tsx

@@ -204,34 +204,36 @@ export const AmountInfoSection = ({
 		userEmail?: string
 	) => {
     if(!!tid){
-      let params: CashReceiptReceiptDownloadParams = {
+      if(selectedMode === DownloadSelectedMode.EMAIL
-        tid: tid
+        && !!userEmail
-      };
+      ){
-      cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => {
+        // 추가 api 필요
-        /*
+      }
-        if(rs?.merchantInfo){
+      else if(selectedMode === DownloadSelectedMode.IMAGE){
-          rs.merchantInfo.merchantName = '나이스페이먼츠';
+        let params: CashReceiptReceiptDownloadParams = {
-        }
+          tid: tid
-        */
+        };
-        setReceiptIssueInfo(rs?.issueInfo);
+        cashReceiptReceiptDownload(params).then((rs: CashReceiptReceiptDownloadResponse) => {
-        setReceiptMerchantInfo(rs?.merchantInfo);
+          /*
-        setReceiptTransactionInfo(rs?.transactionInfo);
+          if(rs?.merchantInfo){
-        setReceiptAmountInfo(rs?.amountInfo);
+            rs.merchantInfo.merchantName = '나이스페이먼츠';
-        setReceiptCustomerInfo(rs?.customerInfo);
+          }
-        setReceiptProductInfo(rs?.productInfo);
+          */
-        if(selectedMode === DownloadSelectedMode.IMAGE){
+          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){
+        }).catch((e: any) => {
-          snackBar('거래확인서 다운 성공');
+          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;
-        }
-      });
     }
   };
   

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>

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>
+      }
     </>
   );
 };