가맹점 정리

src/entities/merchant/ui/section/online-section.tsx

@@ -0,0 +1,53 @@
+import moment from 'moment';
+import { OnlineInfomation } from '../../model/types';
+
+export interface OnlineSectionProps {
+  data?: OnlineInfomation
+};
+
+export const OnlineSection = ({
+  data
+}: OnlineSectionProps) => {
+
+  return (
+    <>
+      <div className="section">
+        <div className="section-title">온라인 등록현황</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">상태</span>
+            <span className="v">{ data?.usageStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">상호</span>
+            <span className="v">{ data?.companyName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자 번호</span>
+            <span className="v">{ data?.businessRegistrationNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발급일자</span>
+            <span className="v">{ data?.registrationDate }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">계약완료 여부</span>
+            <span className="v">{ data?.contractStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">홈페이지 심사 여부</span>
+            <span className="v">{ data?.cardAuditStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">보증보험</span>
+            <span className="v">{ data?.insuranceAmount }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">{ (data?.insuranceExpiryDate)? `(${moment(data?.insuranceExpiryDate).format('YYYY.MM.DD')})`: '' }</span>
+            <span className="v"></span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};