정산 상세 수정

src/entities/settlement/model/types.ts

@@ -79,14 +79,20 @@ export interface SettlementsTransactionDetailResponse {
   transactionInfo: TransactionInfo;
 };
 export interface AmountInfo {
-  transactionAmount: number;
-  paymentFee: number;
-  escrowFee: number;
-  authFee: number;
-  vatFee: number;
-  settlementAmount: number;
-  preSettlementCancelOffset: number;
-  finalSettlementAmount: number;
+  totalTransactionAmount?: number;
+  totalTransactionCount?: number;
+  creditCardAmount?: number;
+  creditCardCount?: number;
+  accountTransferAmount?: number;
+  accountTransferCount?: number;
+  totalPgFee?: number;
+  paymentFee?: number;
+  escrowFee?: number;
+  authFee?: number;
+  vatFee?: number;
+  holdAmount?: number;
+  releaseAmount?: number;
+  offsetAmount?: number;
 };
 export interface TransactionInfo {
   orderNumber: string;

src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx

@@ -18,51 +18,153 @@ export const AmountInfoWrap = ({
           <ul className="kv-list">
             <li className="kv-row">
               <span className="k">거래금액 합계</span>
-              <span className="v">6,017,600 (269건)</span>
+              <span className="v">
+                <span>
+                  <NumericFormat
+                    value={ amountInfo?.totalTransactionAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+                <span>
+                  <NumericFormat
+                    value={ amountInfo?.totalTransactionCount } 
+                    thousandSeparator
+                    displayType="text"
+                    prefix=' ('
+                    suffix='건)'
+                  ></NumericFormat>
+                </span>
+              </span>
               <ul className="txn-amount-detail">
                 <li>
                   <span>·&nbsp;&nbsp;신용카드</span>
-                  <span>6,017,000 (260건)</span>
+                  <span>
+                    <span>
+                      <NumericFormat
+                        value={ amountInfo?.creditCardAmount } 
+                        thousandSeparator
+                        displayType="text"
+                        suffix='원'
+                      ></NumericFormat>
+                    </span>
+                    <span>
+                      <NumericFormat
+                        value={ amountInfo?.creditCardCount } 
+                        thousandSeparator
+                        displayType="text"
+                        prefix=' ('
+                        suffix='건)'
+                      ></NumericFormat>
+                    </span>
+                  </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;계좌이체</span>
-                  <span>600 (9건)</span>
+                  <span>
+                    <span>
+                      <NumericFormat
+                        value={ amountInfo?.accountTransferAmount } 
+                        thousandSeparator
+                        displayType="text"
+                        suffix='원'
+                      ></NumericFormat>
+                    </span>
+                    <span>
+                      <NumericFormat
+                        value={ amountInfo?.accountTransferCount } 
+                        thousandSeparator
+                        displayType="text"
+                        prefix=' ('
+                        suffix='건)'
+                      ></NumericFormat>
+                    </span>
+                  </span>
                 </li>
               </ul>
             </li>
             <li className="kv-row">
               <span className="k">PG 수수료 합계</span>
-              <span className="v">205,255</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.totalPgFee } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
               <ul className="txn-amount-detail">
                 <li>
                   <span>·&nbsp;&nbsp;결제수수료</span>
-                  <span>165,384</span>
+                  <span>
+                    <NumericFormat
+                      value={ amountInfo?.paymentFee } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;에스크로 수수료</span>
-                  <span>0</span>
+                  <span>
+                    <NumericFormat
+                      value={ amountInfo?.escrowFee } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;인증 수수료</span>
-                  <span>21,300</span>
+                  <span>
+                    <NumericFormat
+                      value={ amountInfo?.authFee } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </span>
                 </li>
                 <li>
                   <span>·&nbsp;&nbsp;VAT</span>
-                  <span>18,571</span>
+                  <span>
+                    <NumericFormat
+                      value={ amountInfo?.vatFee } 
+                      thousandSeparator
+                      displayType="text"
+                    ></NumericFormat>
+                  </span>
                 </li>
               </ul>
             </li>
             <li className="kv-row">
               <span className="k">보류</span>
-              <span className="v">0</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.holdAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
             </li>
             <li className="kv-row">
               <span className="k">해제</span>
-              <span className="v">0</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.releaseAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
             </li>
             <li className="kv-row">
               <span className="k">상계</span>
-              <span className="v">- 80,603</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.offsetAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
             </li>
             <li className="kv-row bolder">
               <span className="k">정산금액</span>
@@ -76,7 +178,7 @@ export const AmountInfoWrap = ({
               <span className="k">거래금액</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.transactionAmount } 
+                  value={ amountInfo?.totalTransactionAmount } 
                   thousandSeparator
                   displayType="text"
                   suffix='원'
@@ -84,7 +186,7 @@ export const AmountInfoWrap = ({
               </span>
             </li>
             <li className="kv-row">
-              <span className="k">결제 수료</span>
+              <span className="k">결제 수수료</span>
               <span className="v">
                 <NumericFormat
                   value={ amountInfo?.paymentFee } 
@@ -131,7 +233,7 @@ export const AmountInfoWrap = ({
               <span className="k">정산예정금액</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.settlementAmount } 
+                  value={ amountInfo?.offsetAmount } 
                   thousandSeparator
                   displayType="text"
                   suffix='원'
@@ -142,7 +244,7 @@ export const AmountInfoWrap = ({
               <span className="k">정산전 취소상계</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.preSettlementCancelOffset } 
+                  value={ amountInfo?.offsetAmount } 
                   thousandSeparator
                   displayType="text"
                   suffix='원'
@@ -153,7 +255,7 @@ export const AmountInfoWrap = ({
               <span className="k">정산금액</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.finalSettlementAmount } 
+                  value={ amountInfo?.offsetAmount } 
                   thousandSeparator
                   displayType="text"
                   suffix='원'

src/pages/transaction/cash-receipt/detail-page.tsx

@@ -13,7 +13,8 @@ import {
   IssueInfo,
   DetailInfo,
   InfoSectionKeys,
-  CashReceiptPurposeType
+  CashReceiptPurposeType,
+  AmountInfo
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -23,11 +24,13 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
 import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update-mutation';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
 
 export const CashReceiptDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
   
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
   const [issueInfo, setIssueInfo] = useState<IssueInfo>();
   const [detailInfo, setDetailInfo] = useState<DetailInfo>();
   const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
@@ -65,8 +68,9 @@ export const CashReceiptDetailPage = () => {
       approvalNumber: approvalNumber
     };
     cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
-      setIssueInfo(rs.issueInfo);
-      setDetailInfo(rs.detailInfo);
+      setAmountInfo(rs.amountInfo || {});
+      setIssueInfo(rs.issueInfo || {});
+      setDetailInfo(rs.detailInfo || {});
       if(rs.issueInfo){
         setPurposeType(rs.issueInfo.purpose);
       }
@@ -93,6 +97,12 @@ export const CashReceiptDetailPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className={ `txn-detail ${(detailInfo?.canDownloadReceipt)? 'pb-86': ''}` }>
+                <AmountInfoSection
+                  transactionCategory={ TransactionCategory.CashReceipt }
+                  amountInfo={ amountInfo }
+                  purposeType={ purposeType }
+                ></AmountInfoSection>
+                <div className="txn-divider"></div>
                 <IssueInfoSection
                   transactionCategory={ TransactionCategory.CashReceipt }
                   issueInfo={ issueInfo }