에스크로 거래취소

2025-10-28 17:32:35 +09:00
parent 52516f2427
commit 7fa26cce00
15 changed files with 684 additions and 341 deletions
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -342,6 +342,25 @@ export interface AmountInfo {
  vat?: number;
  serviceAmount?: number;
  taxFreeAmount?: number;
+
+  approvalNo?: string;
+  candNo?: string;
+  installmentMonth?: string;
+  authentication?: string;
+  purchaseCompany?: string;
+  approvalVAN?: string;
+  approvalPurchase?: string | null;
+  approvalRejectCount?: string;
+  approvalRepurchaseCount?: string;
+  cancelPurchase?: string | null;
+  cancelRejectCount?: string;
+  cancelRepurchaseCount?: string;
+  purchaseVan?: string;
+  approvalRequestAmount?: number;
+  cardAmount?: number;
+  discountType?: string | null;
+  discountAmount?: number;
+  simplePaymentServiceCode?: string;
 };
 export interface ImportantInfo {
  moid?: string;
@@ -351,12 +370,15 @@ export interface ImportantInfo {
  serviceCode?: string;
  serviceName?: string;
  approvalDate?: string;
+  approvalTime?: string;
  transactionDate?: string;
  requestDate?: string;
  cancelDate?: string;
  goodsName?: string;
  
  orderNumber?: string;
+  paymentMethod?: string;
+  productName?: string;
 };
 export interface PaymentInfo {
  approvalAcquire?: string;
@@ -393,10 +415,37 @@ export interface PaymentInfo {
  culturelandId?: string;
  paymentAmount?: number;

+  approvalNo?: string;
+  cardNo?: string;
+  installmentMonth?: string;
+  purchaseCompany?: string;
+  approvalPurchase?: string | null;
+  approvalRejectCount?: string;
+  approvalRepurchaseCount?: string;
+  cancelPurchase?: string | null;
+  cancelRejectCount?: string;
+  cancelRepurchaseCount?: string;
+  purchaseVan?: string;
+  approvalRequestAmount?: number;
+  cardAmount?: number;
+  discountType?: string | null;
+  discountAmount?: number;
+  simplePaymentServiceCode?: string;
+
+  joinType?: string;
+  accountNo?: string;
+  escrowFee?: number;
+
+  virtualAccountNo?: string;
+  refundAccountNo?: string;
+  transactionRequestAmount?: number;
+  transactionAmount?: number;
 };
 export interface TransactionInfo {
  buyerName?: string;
  email?: string;
+  buyerEmail?: string;
+  buyerTel?: string;
  phoneNumber?: string;
  cancelReason?: string;
  cancelRequestor?: string;
--- a/src/entities/transaction/ui/all-transaction-all-cancel.tsx
+++ b/src/entities/transaction/ui/all-transaction-all-cancel.tsx
@@ -2,6 +2,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AllTransactionCancelInfoResponse } from '../model/types';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
+import { NumericFormat } from 'react-number-format';

 export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
  serviceCode: string;
@@ -13,6 +14,8 @@ export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoRe
  setAccountNo?: (accountNo: string) => void;
  accountHolder?: string;
  setAccountHolder?: (accountHolder: string) => void;
+  requestSuccess: boolean;
+  totalCancelAmount: number;
 };

 export const AllTransactionAllCancel = ({
@@ -38,14 +41,41 @@ export const AllTransactionAllCancel = ({
  accountNo,
  setAccountNo,
  accountHolder,
-  setAccountHolder
+  setAccountHolder,
+  requestSuccess,
+  totalCancelAmount
 }: AllTransactionAllCancelProps) => {
  return (
    <>
+      <div className="amount-info">
+        <ul className="amount-list">
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 잔액</span>
+            <span className="value">
+              <NumericFormat
+                value={ remainAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            </span>
+          </li>
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 취소금액</span>
+            <span className="value">
+              <NumericFormat
+                value={ totalCancelAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            </span>
+          </li>
+        </ul>
+      </div>
      <div className="form-section">
        <AllTransactionCancelSectionPasswordGroup
          cancelPassword={ cancelPassword }
          setCancelPassword={ setCancelPassword }
+          requestSuccess={ requestSuccess }
        ></AllTransactionCancelSectionPasswordGroup>
        { serviceCode === '03' &&
          <AllTransactionCancelSectionBankGroup
--- a/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
+++ b/src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
@@ -1,20 +1,51 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { DebtPreventionCancelDisplayInfo } from '../model/types';
+import { useState } from 'react';
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
+import { useNavigate } from '@/shared/lib/hooks';
+import { PATHS } from '@/shared/constants/paths';
 export interface AllTransactionCancelPreventBondProps {
  cancelPreventBondOn: boolean;
  setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
+  debtPreventionCancelDisplayInfo?: DebtPreventionCancelDisplayInfo | null;
+  serviceCode: string;
+  tid: string;
 };

 export const AllTransactionCancelPreventBond = ({
  cancelPreventBondOn,
-  setCancelPreventBondOn
+  setCancelPreventBondOn,
+  debtPreventionCancelDisplayInfo,
+  serviceCode,
+  tid
 }: AllTransactionCancelPreventBondProps) => {
+  const { navigate } = useNavigate();
+  const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
  const onClickToClose = () => {
-    setCancelPreventBondOn(false);
+    navigate(PATHS.transaction.allTransaction.detail, {
+      state: {
+        serviceCode: serviceCode,
+        tid: tid
+      }
+    });
  };
+  const callTransactionCancel = () => {
+
+  };
+  
  return (
    <>
-      <motion.div>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (cancelPreventBondOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title center">거래취소(입금 후 취소)</div>
@@ -26,7 +57,7 @@ export const AllTransactionCancelPreventBond = ({
                <img 
                  src={ IMAGE_ROOT + '/ico_close.svg' }
                  alt="닫기"
-                  onClick={ () => onClickToClose() }
+                  onClick={ onClickToClose }
                />
              </button>
            </div>
@@ -39,23 +70,41 @@ export const AllTransactionCancelPreventBond = ({
                <ul className="kv-list">
                  <li className="kv-row">
                    <div className="k">· 승인일</div>
-                    <div className="v">2025/10/10</div>
+                    <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· 승인번호</div>
-                    <div className="v">00259163</div>
+                    <div className="v">{ item?.approvalNo }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· 승인금액</div>
-                    <div className="v">1,004</div>
+                    <div className="v">
+                      <NumericFormat
+                        value={ item?.amount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· 총 취소금액</div>
-                    <div className="v">204</div>
+                    <div className="v">
+                      <NumericFormat
+                        value={ item?.totalCancelAmount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                  </li>
                  <li className="kv-row">
                    <div className="k red">· 입금요청금액 :</div>
-                    <div className="v red">200</div>
+                    <div className="v red">
+                      <NumericFormat
+                        value={ item?.depositRequestAmount } 
+                        thousandSeparator
+                        displayType="text"
+                      ></NumericFormat>
+                    </div>
                  </li>
                </ul>
              </div>
@@ -65,15 +114,15 @@ export const AllTransactionCancelPreventBond = ({
                <ul className="kv-list">
                  <li className="kv-row">
                    <div className="k">· 은행</div>
-                    <div className="v">신한은행</div>
+                    <div className="v">{ item?.bankName }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· 계좌번호</div>
-                    <div className="v">140-012-733704</div>
+                    <div className="v">{ item?.accountNo }</div>
                  </li>
                  <li className="kv-row">
                    <div className="k">· 예금주</div>
-                    <div className="v">나이스정보통신(주)</div>
+                    <div className="v">{ item?.accountName }</div>
                  </li>
                </ul>
              </div>
@@ -86,8 +135,14 @@ export const AllTransactionCancelPreventBond = ({
                <div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div>
                <div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div>
              </div>
+            </div>
          </div>
        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => callTransactionCancel() }
+          >신청</button>
        </div>
      </motion.div>
    </>
--- a/src/entities/transaction/ui/all-transaction-part-cancel.tsx
+++ b/src/entities/transaction/ui/all-transaction-part-cancel.tsx
@@ -1,10 +1,8 @@
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { AllTransactionCancelInfoResponse } from '../model/types';
 import { NumericFormat } from 'react-number-format';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
-import { BankCode } from '@/shared/@types/banking-code';
-import { ChangeEvent, useEffect, useState } from 'react';

 export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
  serviceCode: string;
@@ -24,6 +22,9 @@ export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoR
  setCancelTaxFreeAmount: (cancelTaxFreeAmount: number) => void;
  cancelServiceAmount: number;
  setCancelServiceAmount: (cancelServiceAmount: number) => void;
+  requestSuccess: boolean;
+  totalCancelAmount: number;
+  setTotalCancelAmount: (totalCancelAmount: number) => void;
 };

 export const AllTransactionPartCancel = ({
@@ -57,12 +58,153 @@ export const AllTransactionPartCancel = ({
  cancelTaxFreeAmount,
  setCancelTaxFreeAmount,
  cancelServiceAmount,
-  setCancelServiceAmount
+  setCancelServiceAmount,
+  requestSuccess,
+  totalCancelAmount,
+  setTotalCancelAmount
 }: AllTransactionPartCancelProps) => {
-  
+  const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true);
+  const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false);
+  const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false);
+  const [cancelTaxFreeAmountDisabled, setCancelTaxFreeAmountDisabled] = useState<boolean>(false);
+  const [cancelServiceAmountDisabled, setCancelServiceAmountDisabled] = useState<boolean>(false);
+
+  const init = () => {
+    if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
+      setCancelTotalCancelAmountReadonly(false);
+    }
+    if(remainAmount === 0){
+      setCancelSupplyAmountDisabled(true);
+    }
+    else{
+      if(isConditionalVatAutoCalcMerchant){
+        setCancelSupplyAmountDisabled(true);
+      }
+      else{
+        setCancelSupplyAmountDisabled(false);
+      }
+    }
+
+    if(goodsVat === 0){
+      setCancelGoodsVatDisabled(true);
+    }
+    else{
+      if(isConditionalVatAutoCalcMerchant){
+        setCancelGoodsVatDisabled(true);
+      }
+      else{
+        setCancelGoodsVatDisabled(false);
+      }
+    }
+
+    if(taxFreeAmount === 0){
+      setCancelTaxFreeAmountDisabled(true);
+    }
+    else{
+      if(isConditionalVatAutoCalcMerchant){
+        setCancelTaxFreeAmountDisabled(true);
+      }
+      else{
+        setCancelTaxFreeAmountDisabled(false);
+      }
+    }
+
+    if(serviceAmount === 0){
+      setCancelServiceAmountDisabled(true);
+    }
+    else{
+      if(isConditionalVatAutoCalcMerchant){
+        setCancelServiceAmountDisabled(true);
+      }
+      else{
+        setCancelServiceAmountDisabled(false);
+      }
+    }
+  };
+
+  const onChangeToTotalCancelAmount = (val: number) => {
+    setTotalCancelAmount(val);
+    if(isVatAutoCalcMerchant){
+      if(isVatDisplayed){
+        let cancelSupplyAmountVal = val;
+        let cancelGoodsVatVal = 0;
+        setCancelSupplyAmount(cancelSupplyAmountVal);
+        setCancelGoodsVat(cancelGoodsVatVal);
+      }
+      else{
+        let cancelSupplyAmountVal = Math.round(val / 1.1);
+        let cancelGoodsVatVal = val - cancelSupplyAmountVal;
+        setCancelSupplyAmount(cancelSupplyAmountVal);
+        setCancelGoodsVat(cancelGoodsVatVal);
+      }
+    }
+    else{
+      let cancelSupplyAmountVal = Math.round(val / 1.1);
+      let cancelGoodsVatVal = val - cancelSupplyAmountVal;
+      setCancelSupplyAmount(cancelSupplyAmountVal);
+      setCancelGoodsVat(cancelGoodsVatVal);
+    }
+    
+  };
+  const onChangeCancelSupplyAmount = (val: number) => {
+    setCancelSupplyAmount(val);
+    if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
+      setTotalCancelAmount(val + cancelGoodsVat + cancelTaxFreeAmount + cancelServiceAmount);
+    }
+  };
+  const onChangeCancelGoodsVat = (val: number) => {
+    setCancelGoodsVat(val);
+    if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
+      setTotalCancelAmount(cancelSupplyAmount + val + cancelTaxFreeAmount + cancelServiceAmount);
+    }
+  };
+  const onChangeCancelTaxFreeAmount = (val: number) => {
+    setCancelTaxFreeAmount(val);
+    if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
+      setTotalCancelAmount(cancelSupplyAmount + cancelGoodsVat + val + cancelServiceAmount);
+    }
+  };
+  const onChangeCancelServiceAmount = (val: number) => {
+    setCancelServiceAmount(val);
+    if((isConditionalVatAutoCalcMerchant || isVatAutoCalcMerchant) && vatAutoCalcSummary === 0){
+      setTotalCancelAmount(cancelSupplyAmount + cancelGoodsVat + cancelTaxFreeAmount + val);
+    }
+  };
+
+  useEffect(() => {
+    init();
+  });
  
  return (
    <>
+      <div className="amount-info">
+        <ul className="amount-list">
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 잔액</span>
+            <span className="value">
+              <NumericFormat
+                value={ remainAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            </span>
+          </li>
+          <li className="amount-item">
+            <span className="label">·&nbsp;&nbsp;총 취소금액</span>
+            <span className="value">
+              <NumericFormat
+                value={ totalCancelAmount } 
+                thousandSeparator
+                displayType="input"
+                allowNegative={ false }
+                max={ remainAmount }
+                readOnly={ cancelTotalCancelAmountReadonly }
+                onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeToTotalCancelAmount(parseInt(e.target.value)) }
+              ></NumericFormat>
+            </span>
+          </li>
+        </ul>
+      </div>
      { !!isCompoundTax  && 
        <div className="tb_both">
          <table className="partial-cancel-table">
@@ -94,7 +236,8 @@ export const AllTransactionPartCancel = ({
                    value={ cancelSupplyAmount }
                    allowNegative={ false }
                    displayType="input"
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
+                    disabled={ cancelSupplyAmountDisabled }
+                    onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelSupplyAmount(parseInt(e.target.value)) }
                  ></NumericFormat>
                </td>
              </tr>
@@ -113,7 +256,8 @@ export const AllTransactionPartCancel = ({
                      value={ cancelGoodsVat }
                      allowNegative={ false }
                      displayType="input"
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelGoodsVat(parseInt(e.target.value)) }
+                      disabled={ cancelGoodsVatDisabled }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelGoodsVat(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
@@ -132,7 +276,8 @@ export const AllTransactionPartCancel = ({
                      value={ cancelTaxFreeAmount }
                      allowNegative={ false }
                      displayType="input"
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelTaxFreeAmount(parseInt(e.target.value)) }
+                      disabled={ cancelTaxFreeAmountDisabled }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelTaxFreeAmount(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
@@ -151,7 +296,8 @@ export const AllTransactionPartCancel = ({
                      value={ cancelServiceAmount }
                      allowNegative={ false }
                      displayType="input"
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setCancelServiceAmount(parseInt(e.target.value)) }
+                      disabled={ cancelServiceAmountDisabled }
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeCancelServiceAmount(parseInt(e.target.value)) }
                    ></NumericFormat>
                  </td>
                </tr>
@@ -159,11 +305,11 @@ export const AllTransactionPartCancel = ({
          </table>
        </div>
      }
-
      <div className="form-section">
        <AllTransactionCancelSectionPasswordGroup
          cancelPassword={ cancelPassword }
          setCancelPassword={ setCancelPassword }
+          requestSuccess={ requestSuccess }
        ></AllTransactionCancelSectionPasswordGroup>
        { serviceCode === '03' &&
          <AllTransactionCancelSectionBankGroup
--- a/src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx
+++ b/src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx
@@ -3,17 +3,20 @@ import { ChangeEvent, useState } from "react";
 export interface AllTransactionCancelSectionPasswordGroupProps {
  cancelPassword: string;
  setCancelPassword: (cancelPassword: string) => void;
+  requestSuccess: boolean;
 };

 export const AllTransactionCancelSectionPasswordGroup = ({
  cancelPassword,
-  setCancelPassword
+  setCancelPassword,
+  requestSuccess
 }: AllTransactionCancelSectionPasswordGroupProps) => {

  const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
-
+  
  const onChangeNewCancelPassword = (value: string) => {
    setCancelPassword(value);
+    setNewCancelPassword(value);
  };
  return (
    <>
@@ -28,9 +31,9 @@ export const AllTransactionCancelSectionPasswordGroup = ({
          />
        </div>
      </div>
-      {/* 
-      <div className="error-msg">비밀번호 불일치</div>
-      */}
+      { !requestSuccess &&
+        <div className="error-msg">비밀번호 불일치</div>
+      }
    </>
  );
 }
--- a/src/entities/transaction/ui/section/amount-info-section.tsx
+++ b/src/entities/transaction/ui/section/amount-info-section.tsx
@@ -17,7 +17,6 @@ export const AmountInfoSection = ({
 }: InfoSectionProps) => {
  const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
  let newAmountInfo: Record<string, any> | undefined = amountInfo;
-
  const subItems: Record<string, Record<string, string>> = {
    mid: {name: 'MID', type: 'string'}, 
    transactionRequestAmount: {name: '거래요청금액', type: 'number'},
@@ -279,7 +278,7 @@ export const AmountInfoSection = ({
                      <span className="label">·&nbsp;&nbsp;거래금액</span>
                      <span className="value">
                        <NumericFormat
-                          value={ amountInfo?.supplyAmount } 
+                          value={ amountInfo?.transactionAmount } 
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
@@ -292,7 +291,7 @@ export const AmountInfoSection = ({
                        <span className="label">·&nbsp;&nbsp;신용카드금액</span>
                        <span className="value">
                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
+                            value={ amountInfo?.cardAmount } 
                            thousandSeparator
                            displayType="text"
                          ></NumericFormat>
@@ -302,7 +301,7 @@ export const AmountInfoSection = ({
                        <span className="label">·&nbsp;&nbsp;포인트금액</span>
                        <span className="value">
                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
+                            value={ amountInfo?.pointAmount } 
                            thousandSeparator
                            displayType="text"
                          ></NumericFormat>
@@ -312,7 +311,7 @@ export const AmountInfoSection = ({
                        <span className="label">·&nbsp;&nbsp;쿠폰금액</span>
                        <span className="value">
                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
+                            value={ amountInfo?.couponAmount } 
                            thousandSeparator
                            displayType="text"
                          ></NumericFormat>
@@ -320,12 +319,12 @@ export const AmountInfoSection = ({
                      </li>
                    </>
                  }
-                  { (serviceCode === '02' || serviceCode === '03') &&
+                  { (serviceCode === '01' || serviceCode === '02') &&
                    <li className="amount-item">
                      <span className="label">·&nbsp;&nbsp;에스크로수수료</span>
                      <span className="value">
                        <NumericFormat
-                          value={ amountInfo?.supplyAmount } 
+                          value={ amountInfo?.escrowFee } 
                          thousandSeparator
                          displayType="text"
                        ></NumericFormat>
@@ -334,86 +333,100 @@ export const AmountInfoSection = ({
                  }
                  { (serviceCode === '01') &&
                    <>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;카카오머니</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;카카오포인트</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;네이버포인트</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;토스머니</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;토스할인</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;페이코포인트</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
-                      <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
-                        <span className="value">
-                          <NumericFormat
-                            value={ amountInfo?.supplyAmount } 
-                            thousandSeparator
-                            displayType="text"
-                          ></NumericFormat>
-                        </span>
-                      </li>
+                      { (amountInfo?.simplePaymentServiceCode === 'E016') &&
+                        <>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;카카오머니</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.multiPointAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;카카오포인트</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.multiCouponAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.supplyAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                        </>
+                      }
+                      { (amountInfo?.simplePaymentServiceCode === 'E020') &&
+                        <li className="amount-item">
+                          <span className="label">·&nbsp;&nbsp;네이버포인트</span>
+                          <span className="value">
+                            <NumericFormat
+                              value={ amountInfo?.multiPointAmount } 
+                              thousandSeparator
+                              displayType="text"
+                            ></NumericFormat>
+                          </span>
+                        </li>
+                      }
+                      { (amountInfo?.simplePaymentServiceCode === 'E025') &&
+                        <>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;토스머니</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.multiPointAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;토스할인</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.supplyAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                        </>
+                      }
+                      { (amountInfo?.simplePaymentServiceCode === 'E015') &&
+                        <>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;페이코포인트</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.multiPointAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                          <li className="amount-item">
+                            <span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
+                            <span className="value">
+                              <NumericFormat
+                                value={ amountInfo?.multiCouponAmount } 
+                                thousandSeparator
+                                displayType="text"
+                              ></NumericFormat>
+                            </span>
+                          </li>
+                        </>
+                      }
                    </>
                  }
                </>
--- a/src/entities/transaction/ui/section/escrow-info-section.tsx
+++ b/src/entities/transaction/ui/section/escrow-info-section.tsx
@@ -23,7 +23,7 @@ export const EscrowInfoSection = ({
          className="section-title with-toggle"
          onClick={ () => onClickToSetOpenInfo() }
        >
-          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          에스크로 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { !!isOpen &&
@@ -34,15 +34,15 @@ export const EscrowInfoSection = ({
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;배송등록</span>
-              <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
+              <span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;배송완료</span>
-              <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
+              <span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;구매확인</span>
-              <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
+              <span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
            </li>
            <li className="kv-row">
              <span className="k">·&nbsp;&nbsp;구매거절</span>
--- a/src/entities/transaction/ui/section/important-info-section.tsx
+++ b/src/entities/transaction/ui/section/important-info-section.tsx
@@ -156,45 +156,45 @@ export const ImportantInfoSection = ({
            <>
              <li className="kv-row">
                <span className="k">주문번호</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.orderNumber }</span>
              </li>
              <li className="kv-row">
                <span className="k">TID</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.tid }</span>
              </li>
              <li className="kv-row">
                <span className="k">거래상태</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.transactionStatus }</span>
              </li>
              <li className="kv-row">
                <span className="k">거래수단</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.paymentMethod }</span>
              </li>
              { serviceCode === '01' &&
                <li className="kv-row">
                  <span className="k">승인일</span>
-                  <span className="v">{  }</span>
+                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              { serviceCode === '02' &&
                <li className="kv-row">
                  <span className="k">거래일</span>
-                  <span className="v">{  }</span>
+                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              { serviceCode === '03' && 
                <li className="kv-row">
                  <span className="k">요청일</span>
-                  <span className="v">{  }</span>
+                  <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                </li>
              }
              <li className="kv-row">
                <span className="k">취소일</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
              </li>
              <li className="kv-row">
                <span className="k">상품명</span>
-                <span className="v">{  }</span>
+                <span className="v">{ importantInfo?.productName }</span>
              </li>
            </>
          }
--- a/src/entities/transaction/ui/section/payment-info-section.tsx
+++ b/src/entities/transaction/ui/section/payment-info-section.tsx
@@ -155,56 +155,80 @@ export const PaymentInfoSection = ({
                { (serviceCode === '01') && 
                  <>
                    <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인매입</span>
-                      <span className="v">{  }</span>
+                      <span className="k">·&nbsp;&nbsp;승인매입일</span>
+                      <span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
-                      <span className="v">{  }</span>
+                      <span className="v">
+                        <NumericFormat
+                          value={ paymentInfo?.approvalRejectCount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
-                      <span className="v">{  }</span>
+                      <span className="v">
+                        <NumericFormat
+                          value={ paymentInfo?.approvalRepurchaseCount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;승인VAN</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.approvalVAN }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;취소매입</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;취소반송</span>
-                      <span className="v">{  }</span>
+                      <span className="k">·&nbsp;&nbsp;취소반송(횟수)</span>
+                      <span className="v">
+                        <NumericFormat
+                          value={ paymentInfo?.cancelRejectCount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                    </li>
                    <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;취소재매입</span>
-                      <span className="v">{  }</span>
+                      <span className="k">·&nbsp;&nbsp;취소재매입(횟수)</span>
+                      <span className="v">
+                        <NumericFormat
+                          value={ paymentInfo?.cancelRepurchaseCount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;매입VAN</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.purchaseVan }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.purchaseCompany }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;카드번호</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.cardNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;승인번호</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.approvalNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;할부기간</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ (paymentInfo?.installmentMonth === '00')? '일시불': paymentInfo?.installmentMonth }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;인증</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.authentication }</span>
                    </li>
                  </>
                }
@@ -212,7 +236,7 @@ export const PaymentInfoSection = ({
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;유형</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.joinType  }</span>
                    </li>
                  </>
                }
@@ -220,47 +244,43 @@ export const PaymentInfoSection = ({
                  <>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;은행명</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;계좌번호</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
                    </li>
                  </>
                }
                { (serviceCode === '03') && 
                  <>
-                    <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;입금금융기관명</span>
-                      <span className="v">{  }</span>
-                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;입금자명</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.depositorName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;입금기한</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;입금일</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;환불예정일</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;환불은행명</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.refundBankName }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;환불계좌번호</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.refundAccountNo }</span>
                    </li>
                    <li className="kv-row">
                      <span className="k">·&nbsp;&nbsp;예금주</span>
-                      <span className="v">{  }</span>
+                      <span className="v">{ paymentInfo?.accountHolder }</span>
                    </li>
                  </>
                }
--- a/src/entities/transaction/ui/section/transaction-info-section.tsx
+++ b/src/entities/transaction/ui/section/transaction-info-section.tsx
@@ -122,32 +122,32 @@ export const TransactionInfoSection = ({
            <>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;구매자명</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.buyerName }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;이메일</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.buyerEmail }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;전화번호</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.buyerTel }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;취소사유</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.cancelReason }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;취소요청자</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.cancelRequestor }</span>
              </li>
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;부분취소</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.partialCancel }</span>
              </li>
              { (serviceCode === '02' || serviceCode === '03') &&
              <li className="kv-row">
                <span className="k">·&nbsp;&nbsp;현금영수증발행</span>
-                <span className="v">{ }</span>
+                <span className="v">{ transactionInfo?.cashReceiptIssue }</span>
              </li>
              }
            </>