mid 셋팅및 코드 정리

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

@@ -0,0 +1,78 @@
+import moment from 'moment';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const EscrowInfoSection = ({
+  transactionCategory,
+  escrowInfo,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+  
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Escrow);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetOpenInfo() }
+        >
+          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!isOpen &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">배송상태</span>
+              <span className="v">{ escrowInfo?.deliveryStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송등록</span>
+              <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송완료</span>
+              <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매확인</span>
+              <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매거절</span>
+              <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거절사유</span>
+              <span className="v">{ escrowInfo?.rejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">에스크로인증번호</span>
+              <span className="v">{ escrowInfo?.escrowCertNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">택배사</span>
+              <span className="v">{ escrowInfo?.deliveryCompany }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">운송장번호</span>
+              <span className="v">{ escrowInfo?.trackingNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송주소</span>
+              <span className="v">{ escrowInfo?.deliveryAddress }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  )
+};