정산조회 - 정산내역 리스트 및 상세

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

@@ -0,0 +1,76 @@
+import { NumericFormat } from 'react-number-format';
+import { 
+  InfoWrapKeys, 
+  AmountInfoWrapProps, 
+  SettlementPeriodType
+} from '@/entities/settlement/model/types';
+
+export const AmountInfoWrap = ({
+  periodType,
+  amountInfo,
+}: AmountInfoWrapProps) => {
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">금액 정보</div>
+        { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">거래금액 합계</span>
+              <span className="v">6,017,600 (269건)</span>
+              <ul className="txn-amount-detail">
+                <li>
+                  <span>·&nbsp;&nbsp;신용카드</span>
+                  <span>6,017,000 (260건)</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;계좌이체</span>
+                  <span>600 (9건)</span>
+                </li>
+              </ul>
+            </li>
+            <li className="kv-row">
+              <span className="k">PG 수수료 합계</span>
+              <span className="v">205,255</span>
+              <ul className="txn-amount-detail">
+                <li>
+                  <span>·&nbsp;&nbsp;결제수수료</span>
+                  <span>165,384</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;에스크로 수수료</span>
+                  <span>0</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;인증 수수료</span>
+                  <span>21,300</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;VAT</span>
+                  <span>18,571</span>
+                </li>
+              </ul>
+            </li>
+            <li className="kv-row">
+              <span className="k">보류</span>
+              <span className="v">0</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">해제</span>
+              <span className="v">0</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">상계</span>
+              <span className="v">- 80,603</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">정산금액</span>
+              <span className="v">5,731,742</span>
+            </li>
+          </ul>
+        }
+      </div>
+    </>
+  );
+};