정산내역 상세

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

@@ -72,8 +72,94 @@ export const AmountInfoWrap = ({
         }
         { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
           <ul className="kv-list">
-
-
+            <li className="kv-row">
+              <span className="k">거래금액</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.transactionAmount } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">결제 수료</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.paymentFee } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">에스크로 수수료</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.escrowFee } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">인증 수수료</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.authFee } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">VAT</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.vatFee } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">정산예정금액</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.settlementAmount } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row">
+              <span className="k">정산전 취소상계</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.preSettlementCancelOffset } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">정산금액</span>
+              <span className="v">
+                <NumericFormat
+                  value={ amountInfo?.finalSettlementAmount } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              </span>
+            </li>
           </ul>
         }
       </div>