이미지 다운로드 부분 수정

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