mid 셋팅및 코드 정리

src/entities/transaction/ui/section/billing-info-section.tsx

@@ -0,0 +1,80 @@
+import moment from 'moment';
+import { InfoSectionProps } from '../../model/types';
+
+export const BillingInfoSection = ({
+  billingInfo,
+}: InfoSectionProps) => {
+
+  const getInstallmentMonth = () => {
+    let rs = [];
+    if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
+      rs.push(
+        <li 
+          key={ `key-installmentMonth`}
+          className="kv-row"
+        >
+          <span className="k">할부개월</span>
+          <span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
+        </li> 
+      );
+    }
+    else{
+      rs.push(
+        <li 
+          key={ `key-installmentMonth`}
+          className="kv-row"
+        >
+          <span className="k">할부개월</span>
+          <span className="v">일시불</span>
+        </li> 
+      );
+    }
+    return rs;
+  };
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">중요 정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">빌키</span>
+            <span className="v">{ billingInfo?.billKey }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ billingInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">주분번호</span>
+            <span className="v">{ billingInfo?.orderNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인번호</span>
+            <span className="v">{ billingInfo?.approvalNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인일자</span>
+            <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">요청상태</span>
+            <span className="v">{ billingInfo?.requestStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">처리결과</span>
+            <span className="v">{ billingInfo?.processResult }</span>
+          </li>
+          { getInstallmentMonth() }
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ billingInfo?.productName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">구매자</span>
+            <span className="v">{ billingInfo?.buyerName }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+};