nice-app-web/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx

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">
                <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>
                    <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>
                    <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">
                <NumericFormat
                  value={ amountInfo?.totalPgFee } 
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
              <ul className="txn-amount-detail">
                <li>
                  <span>·&nbsp;&nbsp;결제수수료</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.paymentFee } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;에스크로 수수료</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.escrowFee } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;인증 수수료</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.authFee } 
                      thousandSeparator
                      displayType="text"
                    ></NumericFormat>
                  </span>
                </li>
                <li>
                  <span>·&nbsp;&nbsp;VAT</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">
                <NumericFormat
                  value={ amountInfo?.holdAmount } 
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
              <span className="k">해제</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">
                <NumericFormat
                  value={ amountInfo?.offsetAmount } 
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">정산금액</span>
              <span className="v">5,731,742</span>
            </li>
          </ul>
        }
        { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
          <ul className="kv-list">
            <li className="kv-row">
              <span className="k">거래금액</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.totalTransactionAmount } 
                  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?.offsetAmount } 
                  thousandSeparator
                  displayType="text"
                  suffix='원'
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
              <span className="k">정산전 취소상계</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.offsetAmount } 
                  thousandSeparator
                  displayType="text"
                  suffix='원'
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
              <span className="k">정산금액</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.offsetAmount } 
                  thousandSeparator
                  displayType="text"
                  suffix='원'
                ></NumericFormat>
              </span>
            </li>
          </ul>
        }
      </div>
    </>
  );
};