에스크로 및 세금계산서 상세 수정

src/entities/vat-return/model/types.ts

@@ -43,7 +43,7 @@ export interface Breakdown {
   totalAmount: number;
   supplyAmount: number;
   vatAmount: number;
-  transactionCount: number;
+  transactionAmount: number;
 };
 
 export interface VatReturnListResponse extends DefaulResponsePagination {
@@ -77,6 +77,7 @@ export interface VatReturnDetailParams {
 
 export interface VatReturnDetailResponse {
   id?: number;
+  transactionAmount?: number;
   totalAmount?: number;
   supplyAmount?: number;
   vatAmount?: number;

src/entities/vat-return/ui/list-detail-bottom-sheet.tsx

@@ -1,21 +1,47 @@
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { Breakdown } from "../model/types";
+import moment from "moment";
+import { NumericFormat } from "react-number-format";
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { useEffect, useState } from "react";
 
 export interface VatReturnListDetailBottomSheetProps {
   bottomSheetOn: boolean;
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
-  breakdown: Array<Breakdown>
+  breakdown: Array<Breakdown>;
+  transactionAmount?: number;
+  supplyAmount?: number;
+  vatAmount?: number;
+  totalAmount?: number;
 };
 
 export const VatReturnListDetailBottomSheet = ({
   bottomSheetOn,
   setBottomSheetOn,
-  breakdown
+  breakdown,
+  transactionAmount,
+  supplyAmount,
+  vatAmount,
+  totalAmount
 }: VatReturnListDetailBottomSheetProps) => {
 
+  const [isOpenDetail, setIsOpenDetail] = useState<Array<boolean>>([]);
+
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
+  const openDetail = (index: number) => {
+    let arr = breakdown.map((value, index) => false);
+    arr[index] = true;
+    setIsOpenDetail(arr);
+  };
+
+  useEffect(() => {
+    let arr = breakdown.map((value, index) => false);
+    setIsOpenDetail(arr);
+  }, [])
+
   return (
     <>
       <div className="bg-dim"></div>
@@ -41,38 +67,79 @@ export const VatReturnListDetailBottomSheet = ({
             <div className="summary">
               <div className="row">
                 <div className="label desc dot">거래금액 :</div>
-                <div className="value">1,000,000,000</div>
+                <div className="value">
+                  <NumericFormat
+                    value={ transactionAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row">
                 <div className="label desc dot">공급가액 :</div>
-                <div className="value">43,758,520</div>
+                <div className="value">
+                  <NumericFormat
+                    value={ supplyAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row">
                 <div className="label desc dot">VAT :</div>
-                <div className="value">4,366,850</div>
+                <div className="value">
+                  <NumericFormat
+                    value={ vatAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </div>
               </div>
               <div className="row">
                 <div className="label desc dot">합계금액 :</div>
-                <div className="value">48,125,100</div>
+                <div className="value">
+                  <NumericFormat
+                    value={ totalAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
                 </div>
               </div>
+            </div>
+            { breakdown && breakdown.length > 0 &&
               <div className="list">
                 <div className="list-header">
                   <div className="head-date">거래일</div>
                   <div className="head-amount">합계금액</div>
                 </div>
+                { 
+                  breakdown.map((value, index) => (
+                    <>
                       <div className="item">
                         <span className="dot"></span>
-                <span className="date">2025/08/01</span>
+                        <span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
                         <div className="amount">
-                  <span className="text">8,125,100</span>
+                          <span className="text">
+                            <NumericFormat
+                              value={ value.totalAmount } 
+                              thousandSeparator
+                              displayType="text"
+                              suffix='원'
+                            ></NumericFormat>
+                          </span>
                           <img 
-                    className="arrow up" 
+                            className="arrow down" 
                             src={ IMAGE_ROOT + '/ico_arrow.svg' }
-                    alt=""
+                            onClick={ () => openDetail(index) }
                           />
                         </div>
                       </div>
+                      <SlideDown className={'my-dropdown-slidedown'}>
+                        { isOpenDetail[index] &&
                           <div className="item item-detail">
                             <div className="labels">
                               <span>거래금액</span>
@@ -80,60 +147,39 @@ export const VatReturnListDetailBottomSheet = ({
                               <span>VAT</span>
                             </div>
                             <div className="values">
-                  <span>1,000,000</span>
+                              <span>
-                  <span>720,000</span>
+                                <NumericFormat
-                  <span>80,000</span>
+                                  value={ value.transactionAmount } 
-                </div>
+                                  thousandSeparator
-              </div>
+                                  displayType="text"
-              <div className="item">
+                                  suffix='원'
-                <span className="dot"></span>
+                                ></NumericFormat>
-                <span className="date">2025/08/01</span>
+                              </span>
-                <div className="amount">
+                              <span>
-                  <span className="text">8,125,100</span>
+                                <NumericFormat
-                  <img 
+                                  value={ value.supplyAmount } 
-                    className="arrow down" 
+                                  thousandSeparator
-                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
+                                  displayType="text"
-                    alt=""
+                                  suffix='원'
-                  />
+                                ></NumericFormat>
-                </div>
+                              </span>
-              </div>
+                              <span>
-              <div className="item">
+                                <NumericFormat
-                <span className="dot"></span>
+                                  value={ value.vatAmount } 
-                <span className="date">2025/08/01</span>
+                                  thousandSeparator
-                <div className="amount">
+                                  displayType="text"
-                  <span className="text">8,125,100</span>
+                                  suffix='원'
-                  <img 
+                                ></NumericFormat>
-                    className="arrow down" 
+                              </span>
-                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
-                    alt=""
-                  />
-                </div>
-              </div>
-              <div className="item">
-                <span className="dot"></span>
-                <span className="date">2025/08/01</span>
-                <div className="amount">
-                  <span className="text">8,125,100</span>
-                  <img 
-                    className="arrow down" 
-                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
-                    alt=""
-                  />
-                </div>
-              </div>
-              <div className="item">
-                <span className="dot"></span>
-                <span className="date">2025/08/01</span>
-                <div className="amount">
-                  <span className="text">8,125,100</span>
-                  <img 
-                    className="arrow down" 
-                    src={ IMAGE_ROOT + '/ico_arrow.svg' }
-                    alt=""
-                  />
                             </div>
                           </div>
+                        }
+                      </SlideDown>
+                    </>
+                  ))
+                }
               </div>
+            }
           </div>
         </div>
       </div>

src/pages/transaction/billing/list-page.tsx

@@ -164,7 +164,7 @@ export const BillingListPage = () => {
 	return (
 		<>
 			<main>
-				<div className="tab-content">
+				<div className="tab-content pb-86">
 					<div className="tab-pane sub active">
 						<div className="summary-section">
 							<div className="credit-controls">

src/pages/vat-return/detail-page.tsx

@@ -9,9 +9,7 @@ import {
   VatReturnBreakdownParams,
   VatReturnBreakdownResponse,
   VatReturnDetailParams,
-  VatReturnDetailResponse,
+  VatReturnDetailResponse
-  VatReturnTaxInvoiceParams,
-  VatReturnTaxInvoiceResponse
 } from '@/entities/vat-return/model/types';
 import {
   useSetOnBack, 
@@ -32,11 +30,11 @@ export const DetailPage = () => {
   const location = useLocation();
 
   let taxInvoiceNumber = location?.state.taxInvoiceNumber;
-  taxInvoiceNumber = 'TAX202506300001';
+  // taxInvoiceNumber = 'TAX202506300001';
   
   const [openAmount, setOpenAmount] = useState<boolean>(false);
   const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
-  const [detail, setDetail] = useState<VatReturnTaxInvoiceResponse>({});
+  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
   const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
    
   useSetHeaderTitle('세금계산서 상세');
@@ -56,24 +54,16 @@ export const DetailPage = () => {
     };
     vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
       setDetail(rs);
+      
     });
   };
   const callVatReturnBreakdown = async() => {
     let params: VatReturnBreakdownParams = {
       taxInvoiceNumber: taxInvoiceNumber,
     };
-    try{
-      let rs = await vatReturnBreakdown(params);
-    }
-    catch{
-      console.log('error');
-      return;
-    }
-    /*
     vatReturnBreakdown(params).then((rs: VatReturnBreakdownResponse) => {
       setBreakdown(rs.breakdown);
     });
-    */
   };
 
   const onClickToOpenBottomSheet = () => {
@@ -82,7 +72,7 @@ export const DetailPage = () => {
 
   useEffect(() => {
     callTaxInvoice();
-    // callVatReturnBreakdown();
+    callVatReturnBreakdown();
   }, []);
   
   return (
@@ -123,6 +113,10 @@ export const DetailPage = () => {
           bottomSheetOn={ bottomSheetOn }
           setBottomSheetOn={ setBottomSheetOn }
           breakdown={ breakdown }
+          transactionAmount={ detail?.transactionAmount }
+          supplyAmount={ detail?.supplyAmount }
+          vatAmount={ detail?.vatAmount }
+          totalAmount={ detail?.totalAmount }
         ></VatReturnListDetailBottomSheet>
       }
     </>