에스크로 거래취소

src/entities/transaction/ui/all-transaction-all-cancel.tsx

@@ -2,6 +2,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AllTransactionCancelInfoResponse } from '../model/types';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
+import { NumericFormat } from 'react-number-format';
 
 export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
   serviceCode: string;
@@ -13,6 +14,8 @@ export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoRe
   setAccountNo?: (accountNo: string) => void;
   accountHolder?: string;
   setAccountHolder?: (accountHolder: string) => void;
+  requestSuccess: boolean;
+  totalCancelAmount: number;
 };
 
 export const AllTransactionAllCancel = ({
@@ -38,14 +41,41 @@ export const AllTransactionAllCancel = ({
   accountNo,
   setAccountNo,
   accountHolder,
-  setAccountHolder
+  setAccountHolder,
+  requestSuccess,
+  totalCancelAmount
 }: AllTransactionAllCancelProps) => {
   return (
     <>
+      <div className="amount-info">
+        <ul className="amount-list">
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 잔액</span>
+            <span className="value">
+              <NumericFormat
+                value={ remainAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            </span>
+          </li>
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 취소금액</span>
+            <span className="value">
+              <NumericFormat
+                value={ totalCancelAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            </span>
+          </li>
+        </ul>
+      </div>
       <div className="form-section">
         <AllTransactionCancelSectionPasswordGroup
           cancelPassword={ cancelPassword }
           setCancelPassword={ setCancelPassword }
+          requestSuccess={ requestSuccess }
         ></AllTransactionCancelSectionPasswordGroup>
         { serviceCode === '03' &&
           <AllTransactionCancelSectionBankGroup