mid 셋팅및 코드 정리

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

@@ -0,0 +1,160 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
+import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const AmountInfoSection = ({
+  transactionCategory, 
+  amountInfo,
+  isOpen,
+  tid,
+  serviceCode,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+  const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
+
+  const subItems: Record<string, Record<string, string>> = {
+    mid: {name: 'MID', type: 'string'}, 
+    amount: {name: '거래금액', type: 'number'},
+    cardAmount: {name: '신용카드금액', type: 'number'},
+    pointAmount: {name: '포인트금액', type: 'number'},
+    couponAmount: {name: '쿠폰금액', type: 'number'},
+    kakaoMoney: {name: '카카오머니', type: 'number'},
+    kakaoPoint: {name: '카카오포인트', type: 'number'},
+    kakaoInstantDiscount: {name: '카카오 즉시할인', type: 'number'},
+    naverPoint: {name: '네이버 포인트', type: 'number'},
+    tossMoney: {name: '토스머니', type: 'number'}, 
+    tossDiscount: {name: '토스할인', type: 'number'},
+    paycoPoint: {name: '페이코 포인트', type: 'number'},
+    paycoCoupon: {name: '페이코 쿠폰', type: 'number'},
+    escrowFee: {name: '에스크로수수료', type: 'number'}
+  };
+  
+  const showTop = ['01', '02', '03', '26'];
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['mid', 'cardAmount', 'pointAmount', 
+      'couponAmount', 'escrowFee', 'kakaoMoney',
+      'kakaoPoint', 'kakaoInstantDiscount', 'naverPoint',
+      'tossMoney', 'tossDiscount', 'paycoPoint', 'paycoCoupon'
+    ],
+    // 계좌이체
+    '02': ['amount', 'mid', 'escrowFee'],
+    // 가상계좌
+    '03': ['amount', 'mid'],
+    // 휴대폰
+    '04': ['amount', 'mid'],
+    // 계좌간편결제
+    '26': ['amount', 'mid', 'escrowFee'],
+    // SSG머니
+    '21': ['amount', 'mid'],
+    // SSG은행계좌
+    '24': ['amount', 'mid'],
+    // 문화상품권
+    '14': ['amount', 'mid'],
+    // 티머니페이
+    '31': ['amount', 'mid'],
+  };
+  
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newAmountInfo: Record<string, any> | undefined = amountInfo;
+  const subLi = () => {
+    let rs = [];
+    if(!!newAmountInfo && !!serviceCode && !!openSubItems[serviceCode]){
+      for(let i=0;i<openSubItems[serviceCode].length;i++){
+        let k = openSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-amount-item-${i}`}
+              className="amount-item"
+            >
+              <span className="label">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="value">
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'string') &&
+                newAmountInfo[k] 
+              }
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newAmountInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              }
+              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newAmountInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  }
+    
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Amount);
+    }
+  };
+
+  const onClickToDownloadConfirmation = () => {
+    if(!!tid){
+      downloadConfirmation({
+        tid: tid
+      }).then((rs) => {
+        alert('거래확인서 다운 성공');
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-num-group">
+        <div className="txn-amount">
+          <div className="value">
+            <NumericFormat
+              value={ amountInfo?.amount } 
+              thousandSeparator
+              displayType="text"
+            ></NumericFormat>
+            <span className="unit">원</span>
+          </div>
+          <button 
+            className="chip-btn" 
+            type="button"
+            onClick={ () => onClickToSetShowInfo() }
+          >
+            금액상세 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          </button>
+        </div>
+
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!isOpen &&
+          <div className="amount-expand">
+            <ul className="amount-list">
+              { subLi() }
+            </ul>
+          </div>
+        }
+        </SlideDown>
+        <div className="txn-mid">
+          <span className="value">{ amountInfo?.mid }</span>
+        </div>
+        <div className="txn-doc">
+          <button 
+            className="doc-btn" 
+            type="button"
+            onClick={ () => onClickToDownloadConfirmation() }
+          >거래 확인서</button>
+        </div>
+      </div>
+    </>
+  );
+};

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>
+    </>
+  )
+};

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

@@ -0,0 +1,74 @@
+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 DetailInfoSection = ({
+  transactionCategory,
+  detailInfo,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+  
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Issue);
+    }
+  };
+  
+  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">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">취소승인번호</span>
+              <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">현금영수증</span>
+              <span className="v">{ detailInfo?.receiptInfo }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">TID</span>
+              <span className="v">{ detailInfo?.tid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거래ID</span>
+              <span className="v">{ detailInfo?.merchantTid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰명</span>
+              <span className="v">{ detailInfo?.subMallName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰 사업자 번호</span>
+              <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">발행경로</span>
+              <span className="v">{ detailInfo?.issueChannel }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">실패사유</span>
+              <span className="v">{ detailInfo?.failureReason }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  )
+};

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>
+    </>
+  )
+};

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

@@ -0,0 +1,140 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { InfoSectionProps, TransactionCategory } from '../../model/types';
+
+export const ImportantInfoSection = ({
+  transactionCategory,
+  importantInfo,
+  serviceCode
+  }: InfoSectionProps) => {
+  
+  const subItems: Record<string, Record<string, string>> = {
+    ordNo: {name: '주문번호', type: 'string'},
+    tid: {name: 'TID', type: 'string'},
+    tradeStatus: {name: '거래상태', type: 'string'},
+    tradeMethod: {name: '거래수단', type: 'string'},
+    approvalDate: {name: '승인일', type: 'date'},
+    tradeDate: {name: '거래일', type: 'date'},
+    requestDate: {name: '요청일', type: 'date'},
+    cancelDate: {name: '취소일', type: 'date'},
+    productName: {name: '상품명', type: 'string'}
+  };
+  
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'approvalDate', 'cancelDate', 'productName'],
+    // 계좌이체
+    '02': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
+      'tradeDate', 'cancelDate', 'productName'],
+    // 가상계좌
+    '03': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'requestDate', 'cancelDate', 'productName'],
+    // 휴대폰
+    '04': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 계좌간편결제
+    '26': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // SSG머니
+    '21': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // SSG은행계좌
+    '24': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 문화상품권
+    '14': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+    // 티머니페이
+    '31': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+      'tradeDate', 'cancelDate', 'productName'],
+  };
+  
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newImportantInfo: Record<string, any> | undefined = importantInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newImportantInfo && !!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(newImportantInfo[k]) && subItems[k]?.type === 'string') &&
+                newImportantInfo[k] 
+              }
+              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newImportantInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newImportantInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newImportantInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">중요 정보</div>
+        <ul className="kv-list">
+          { (transactionCategory === TransactionCategory.AllTransaction) && 
+            subLi()
+          }
+          { (transactionCategory === TransactionCategory.Escrow) && 
+            <>
+              <li className="kv-row">
+                <span className="k">주문번호</span>
+                <span className="v">{ importantInfo?.orderNumber }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">TID</span>
+                <span className="v">{ importantInfo?.tid }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">거래상태</span>
+                <span className="v">{ importantInfo?.transactionStatus }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">결제수단</span>
+                <span className="v">{ importantInfo?.paymentMethod }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">승인일</span>
+                <span className="v">{ moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">취소일</span>
+                <span className="v">{ importantInfo?.cancelDate }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">상품명</span>
+                <span className="v">{ importantInfo?.productName }</span>
+              </li>
+            </>
+          }
+          
+        </ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,52 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { InfoSectionProps } from '../../model/types';
+import moment from 'moment';
+
+export const IssueInfoSection = ({
+  transactionCategory,
+  issueInfo,
+  purposeType,
+}: InfoSectionProps) => {
+ 
+  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">{ issueInfo?.approvalNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행번호</span>
+            <span className="v">{ issueInfo?.issueNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행일시</span>
+            <span className="v">{ moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">용도</span>
+            <span className="v">{ purposeType }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제수단</span>
+            <span className="v">{ issueInfo?.paymentMethod }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ issueInfo?.productName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">진행상태</span>
+            <span className="v">{ issueInfo?.transmissionStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거래구분</span>
+            <span className="v">{ issueInfo?.transactionType }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+};

src/entities/transaction/ui/section/part-cancel-info-section.tsx

@@ -0,0 +1,121 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+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 PartCancelInfoSection = ({
+  transactionCategory,
+  partCancelInfo,
+  serviceCode,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+  
+  const subItems: Record<string, Record<string, string>> = {
+    originalTid: {name: '원거래 TID', type: 'string'},
+    originalAmount: {name: '원거래 금액', type: 'number'},
+    partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'},
+    partCancelAmount: {name: '부분취소 금액', type: 'number'},
+    remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
+  };
+  
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌이체
+    '02': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 가상계좌
+    '03': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 휴대폰
+    '04': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌간편결제
+    '26': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG머니
+    '21': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG은행계좌
+    '24': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 문화상품권
+    '14': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 티머니페이
+    '31': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newPartCancelInfo: Record<string, any> | undefined = partCancelInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newPartCancelInfo && !!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(newPartCancelInfo[k]) && subItems[k]?.type === 'string') &&
+                newPartCancelInfo[k] 
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newPartCancelInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newPartCancelInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.PartCancel);
+    }
+  };
+  
+  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">
+          { subLi() }
+          </ul>
+        }
+        </SlideDown>
+       
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,164 @@
+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 PaymentInfoSection = ({
+  transactionCategory,
+  paymentInfo,
+  serviceCode,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+
+  const subItems: Record<string, Record<string, string>> = {
+    approvalAcquire: {name: '승인매입', type: 'string'},
+    approvalReturn: {name: '승인반송(횟수)', type: 'number'},
+    approvalReAcquire: {name: '승인재매입(횟수)', type: 'number'},
+    approvalVAN: {name: '승인VAN', type: 'string'},
+    cancelAcquire: {name: '취소매입', type: 'string'},
+    cancelReturn: {name: '취소반송', type: 'string'},
+    cancelReAcquire: {name: '취소재매입', type: 'string'},
+    acquireVAN: {name: '매입VAN', type: 'string'},
+    acquireCompany: {name: '매입사(발급사)', type: 'string'},
+    cardNumber: {name: '카드번호', type: 'string'},
+    approvalNumber: {name: '승인번호', type: 'string'},
+    installmentPeriod: {name: '할부기간', type: 'number'},
+    authentication: {name: '인증', type: 'string'},
+    accountType: {name: '유형', type: 'string'},
+    bankName: {name: '은행명', type: 'string'},
+    accountNumber: {name: '계좌번호', type: 'string'},
+    depositBankName: {name: '입금금융기관명', type: 'string'},
+    depositorName: {name: '입금자명', type: 'string'},
+    depositDeadline: {name: '입금기한', type: 'date'},
+    depositDate: {name: '입금일', type: 'date'},
+    refundScheduleDate: {name: '환불예정일', type: 'date'},
+    refundBankName: {name: '환불은행명', type: 'string'},
+    refundAccountNumber: {name: '환불계좌번호', type: 'string'},
+    accountHolder: {name: '예금주', type: 'string'},
+    refundCompleteDate: {name: '환불완료일', type: 'date'},
+    partner: {name: '제휴사', type: 'string'},
+    cpid: {name: 'CPID', type: 'string'},
+    productCategory: {name: '상품구분', type: 'string'},
+    phoneNumber: {name: '휴대폰번호', type: 'string'},
+    customerId: {name: '고객ID', type: 'string'},
+    giftCardNumber: {name: '상품권번호', type: 'string'},
+    culturelandId: {name: '컬처랜드ID', type: 'string'},
+  };
+
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['approvalAcquire', 'approvalReturn', 'approvalReAcquire', 
+      'approvalVAN', 'cancelAcquire', 'cancelReturn', 'cancelReAcquire',
+      'acquireVAN', 'acquireCompany', 'cardNumber', 'approvalNumber',
+      'installmentPeriod', 'authentication'],
+    // 계좌이체
+    '02': ['accountType', 'bankName', 'accountNumber'],
+    // 가상계좌
+    '03': ['bankName', 'accountNumber', 'depositBankName', 'depositorName',
+      'depositDeadline', 'depositDate', 'refundScheduleDate',
+      'refundBankName', 'refundAccountNumber', 'accountHolder'],
+    // 휴대폰
+    '04': ['refundCompleteDate', 'partner', 'cpid', 'productCategory', 'phoneNumber'],
+    // 계좌간편결제
+    '26': ['bankName', 'refundCompleteDate', 'accountHolder', 'accountType', 'customerId'],
+    // SSG머니
+    '21': ['giftCardNumber'],
+    // SSG은행계좌
+    '24': [],
+    // 문화상품권
+    '14': ['culturelandId'],
+    // 티머니페이
+    '31': ['cardNumber', 'approvalNumber', 'cpid'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newPaymentInfo: Record<string, any> | undefined = paymentInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newPaymentInfo && !!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(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
+                newPaymentInfo[k] 
+              }
+              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newPaymentInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newPaymentInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Payment);
+    }
+  };
+  
+  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">
+                    <NumericFormat
+                      value={ paymentInfo?.paymentAmount } 
+                      thousandSeparator
+                      displayType="text"
+                      suffix='원'
+                    ></NumericFormat>
+                  </span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">승인 번호</span>
+                  <span className="v">{ paymentInfo?.approvalNumber }</span>
+                </li>
+              </>
+            }
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,119 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+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 SettlementInfoSection = ({
+  transactionCategory,
+  settlementInfo,
+  serviceCode,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+  
+  const subItems: Record<string, Record<string, string>> = {
+    approvalSettleDate: {name: '승인정산일', type: 'date'},
+    approvalSettleAmount: {name: '승인정산금액', type: 'number'},
+    cancelSettleDate: {name: '취소정산일', type: 'date'},
+    cancelSettleAmount: {name: '취소정산금액', type: 'number'},
+  };
+
+  const openSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 계좌이체
+    '02': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 가상계좌
+    '03': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 휴대폰
+    '04': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 계좌간편결제
+    '26': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // SSG머니
+    '21': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // SSG은행계좌
+    '24': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 문화상품권
+    '14': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+    // 티머니페이
+    '31': ['approvalSettleDate', 'approvalSettleAmount', 
+      'cancelSettleDate', 'cancelSettleAmount'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newSettlementInfo: Record<string, any> | undefined = settlementInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newSettlementInfo && !!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(newSettlementInfo[k]) && subItems[k]?.type === 'string') &&
+                newSettlementInfo[k] 
+              }
+              { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newSettlementInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newSettlementInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newSettlementInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Settlement);
+    }
+  };
+  
+  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">
+          { subLi() }
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  )
+};

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>
+    </>
+  )
+};