정산 상세 수정

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='원'