mid 셋팅및 코드 정리

2025-10-10 15:26:04 +09:00
parent 306629be53
commit ced334f90f
41 changed files with 692 additions and 582 deletions
--- a/src/entities/transaction/ui/section/transaction-info-section.tsx
+++ b/src/entities/transaction/ui/section/transaction-info-section.tsx
@@ -0,0 +1,136 @@
+import moment from 'moment';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
+import { NumericFormat } from 'react-number-format';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const TransactionInfoSection = ({
+  transactionCategory,
+  transactionInfo,
+  serviceCode,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+
+  const subItems: Record<string, Record<string, string>> = {
+    buyerName: {name: '구매자명', type: 'string'},
+    email: {name: '이메일', type: 'string'},
+    phoneNumber: {name: '전화번호', type: 'string'},
+    cancelReason: {name: '취소사유', type: 'string'},
+    cancelRequestor: {name: '취소요청자', type: 'string'},
+    partialCancel: {name: '부분취소', type: 'string'},
+    cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
+  };
+
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel'],
+    // 계좌이체
+    '02': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // 가상계좌
+    '03': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // 휴대폰
+    '04': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 계좌간편결제
+    '26': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor', 'partialCancel', 'cashReceiptIssue'],
+    // SSG머니
+    '21': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // SSG은행계좌
+    '24': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 문화상품권
+    '14': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+    // 티머니페이
+    '31': ['buyerName', 'email', 'phoneNumber', 'cancelReason', 
+      'cancelRequestor'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newTransactionInfo: Record<string, any> | undefined = transactionInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newTransactionInfo && !!serviceCode && !!openSubItems[serviceCode]){
+      for(let i=0;i<openSubItems[serviceCode].length;i++){
+        let k = openSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'string') &&
+                newTransactionInfo[k] 
+              }
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newTransactionInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newTransactionInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newTransactionInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Transaction);
+    }
+  };
+
+  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">
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
+          }
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
+              <li className="kv-row">
+                <span className="k">가맹점명</span>
+                <span className="v">NICE PAY</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">사업자번호</span>
+                <span className="v">123-45-67890</span>
+              </li>
+            </>
+          }
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  )
+};