거래내역 관련

2025-09-10 09:38:20 +09:00
parent 6c778d9d40
commit 73d3f7008f
45 changed files with 1101 additions and 1110 deletions
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/src/pages/transaction/all-transaction/detail-page.tsx
@@ -1,28 +1,28 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useAllTransactionDetailMutation } from '@/entities/transaction/api/use-all-transaction-detail-mutation';
-import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
-import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
-import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
-import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
-import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
-import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
+import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
+import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
+import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
+import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
+import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
+import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
-  PageType,
+  TransactionCategory,
  AllTransactionDetailParams,
  DetailResponse,
-  DetailAmountInfoProps,
-  DetailImportantInfoProps,
-  DetailPaymentInfoProps,
-  DetailTransactionInfoProps,
-  DetailSettlementInfoProps,
-  DetailPartCancelInfoProps,
-  DetailInfoKeys
+  AmountInfo,
+  ImportantInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  PartCancelInfo,
+  InfoWrapKeys
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -33,19 +33,20 @@ import {

 export const AllTransactionDetailPage = () => {
  const { navigate } = useNavigate();
-  const { tid } = useParams();
+  const location = useLocation();
+  const tid = location.state.tid;
  
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
-  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
-  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
+  const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
+  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
+  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
+  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);

  useSetHeaderTitle('거래내역 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -106,21 +107,21 @@ export const AllTransactionDetailPage = () => {
    });
  };

-  const onClickToShowInfo = (info: DetailInfoKeys) => {
-    if(info === DetailInfoKeys.Amount){
-      setShowAmount(!showAmount);
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Amount){
+      setShowAmountInfo(!showAmountInfo);
    }
-    else if(info === DetailInfoKeys.Payment){
-      setShowPayment(!showPayment);
+    else if(infoWrapKey === InfoWrapKeys.Payment){
+      setShowPaymentInfo(!showPaymentInfo);
    }
-    else if(info === DetailInfoKeys.Transaction){
-      setShowTransaction(!showTransaction);
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
+      setShowTransactionInfo(!showTransactionInfo);
    }
-    else if(info === DetailInfoKeys.Settlement){
-      setShowSettlement(!showSettlement);
+    else if(infoWrapKey === InfoWrapKeys.Settlement){
+      setShowSettlementInfo(!showSettlementInfo);
    }
-    else if(info === DetailInfoKeys.PartCancel){
-      setShowPartCancel(!showPartCancel);
+    else if(infoWrapKey === InfoWrapKeys.PartCancel){
+      setShowPartCancelInfo(!showPartCancelInfo);
    }
  };

@@ -131,46 +132,46 @@ export const AllTransactionDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <DetailAmountInfo
-                  pageType={ PageType.AllTransaction }
+                <AmountInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  amountInfo={ amountInfo }
-                  show={ showAmount }
+                  show={ showAmountInfo }
                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></AmountInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailImportantInfo
-                  pageType={ PageType.AllTransaction }
+                <ImportantInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  importantInfo={ importantInfo }
-                ></DetailImportantInfo>
+                ></ImportantInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailPaymentInfo
-                  pageType={ PageType.AllTransaction }
+                <PaymentInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  paymentInfo={ paymentInfo }
-                  show={ showPayment }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPaymentInfo>
+                  show={ showPaymentInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></PaymentInfoWrap>
                <div className="txn-divider"></div>
-                <DetailTransactionInfo
-                  pageType={ PageType.AllTransaction }
+                <TransactionInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  transactionInfo={ transactionInfo }
-                  show={ showTransaction }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailTransactionInfo>
+                  show={ showTransactionInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></TransactionInfoWrap>
                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  pageType={ PageType.AllTransaction }
+                <SettlementInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
+                  show={ showSettlementInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></SettlementInfoWrap>
                <div className="txn-divider"></div>
-                <DetailPartCancelInfo
-                  pageType={ PageType.AllTransaction }
+                <PartCancelInfoWrap
+                  transactionCategory={ TransactionCategory.AllTransaction }
                  partCancelInfo={ partCancelInfo }
-                  show={ showPartCancel }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPartCancelInfo>
+                  show={ showPartCancelInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></PartCancelInfoWrap>
              </div>
            </div>
            <div className="apply-row">
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { ListItem, PageType, SortByKeys } from '@/entities/transaction/model/types';
+import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -218,7 +218,7 @@ export const AllTransactionListPage = () => {
 						</div>
            <AllTransactionList 
              listItems={ listItems }
-              pageType={ PageType.AllTransaction }
+              transactionCategory={ TransactionCategory.AllTransaction }
            ></AllTransactionList> 
 					</div>
 				</div>
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -1,28 +1,28 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
-import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
-import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
-import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
-import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
-import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
-import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
+import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
+import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
+import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
+import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
+import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
+import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
-  PageType,
+  TransactionCategory,
  BillingDetailParams,
  DetailResponse,
-  DetailAmountInfoProps,
-  DetailImportantInfoProps,
-  DetailPaymentInfoProps,
-  DetailTransactionInfoProps,
-  DetailSettlementInfoProps,
-  DetailPartCancelInfoProps,
-  DetailInfoKeys
+  AmountInfo,
+  ImportantInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  PartCancelInfo,
+  InfoWrapKeys
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -33,14 +33,14 @@ import {

 export const BillingDetailPage = () => {
  const { navigate } = useNavigate();
-  const { tid } = useParams();
+  const location = useLocation();
  
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
-  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
-  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
  const [showAmount, setShowAmount] = useState<boolean>(false);
  const [showPayment, setShowPayment] = useState<boolean>(false);
  const [showTransaction, setShowTransaction] = useState<boolean>(false);
@@ -58,8 +58,7 @@ export const BillingDetailPage = () => {
    
  const callDetail = () => {
    let billingDetailParams: BillingDetailParams = {
-      svcCd: 'st',
-      tid: tid
+      billKey: location?.state.billKey
    };
    billingDetail(billingDetailParams).then((rs: DetailResponse) => {
      setAmountInfo(rs.amountInfo);
@@ -74,53 +73,20 @@ export const BillingDetailPage = () => {
    callDetail();
  }, []);

-  const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.transaction.allTransaction.cancel, {
-        state: {
-          tid: tid
-        }
-      });
-    }, 10)
-  };
-
-
-  const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
-    
-    overlay.open(({ 
-      isOpen,
-      close,
-      unmount
-    }) => {
-      return (
-        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-          message={ msg }
-          buttonLabel={['취소', '확인']}
-        />
-      );
-    });
-  };
-
-  const onClickToShowInfo = (info: DetailInfoKeys) => {
-    if(info === DetailInfoKeys.Amount){
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Amount){
      setShowAmount(!showAmount);
    }
-    else if(info === DetailInfoKeys.Payment){
+    else if(infoWrapKey === InfoWrapKeys.Payment){
      setShowPayment(!showPayment);
    }
-    else if(info === DetailInfoKeys.Transaction){
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
      setShowTransaction(!showTransaction);
    }
-    else if(info === DetailInfoKeys.Settlement){
+    else if(infoWrapKey === InfoWrapKeys.Settlement){
      setShowSettlement(!showSettlement);
    }
-    else if(info === DetailInfoKeys.PartCancel){
+    else if(infoWrapKey === InfoWrapKeys.PartCancel){
      setShowPartCancel(!showPartCancel);
    }
  };
@@ -132,54 +98,48 @@ export const BillingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <DetailAmountInfo
-                  pageType={ PageType.Billing }
+                <AmountInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  amountInfo={ amountInfo }
                  show={ showAmount }
-                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
+                ></AmountInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailImportantInfo
-                  pageType={ PageType.Billing }
+                <ImportantInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  importantInfo={ importantInfo }
-                ></DetailImportantInfo>
+                ></ImportantInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailPaymentInfo
-                  pageType={ PageType.Billing }
+                <PaymentInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  paymentInfo={ paymentInfo }
                  show={ showPayment }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPaymentInfo>
+                ></PaymentInfoWrap>
                <div className="txn-divider"></div>
-                <DetailTransactionInfo
-                  pageType={ PageType.Billing }
+                <TransactionInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  transactionInfo={ transactionInfo }
                  show={ showTransaction }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailTransactionInfo>
+                ></TransactionInfoWrap>
                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  pageType={ PageType.Billing }
+                <SettlementInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  settlementInfo={ settlementInfo }
                  show={ showSettlement }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
+                ></SettlementInfoWrap>
                <div className="txn-divider"></div>
-                <DetailPartCancelInfo
-                  pageType={ PageType.Billing }
+                <PartCancelInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  partCancelInfo={ partCancelInfo }
                  show={ showPartCancel }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPartCancelInfo>
+                ></PartCancelInfoWrap>
              </div>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >거래 취소</button>
-            </div>
+            
          </div>
        </div>
      </main>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -4,7 +4,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingList } from '@/entities/transaction/ui/billing-list';
-import { ListItem, PageType, SortByKeys } from '@/entities/transaction/model/types';
+import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -33,8 +33,8 @@ export const BillingListPage = () => {
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -50,30 +50,21 @@ export const BillingListPage = () => {
    sortBy?: string, 
    val?: string
  }) => {
-    let listSummaryParams = {
-      moid: 'string',
-      tid: 'string',
-      fromDate: fromDate,
-      toDate: toDate,
-      stateCode: '0',
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
-      minAmount: 0,
-      maxAmount: 0,
-      dateCl: 'TRANS',
-      goodsName: 'string',
-      cardCode: 'st',
-      bankCode: 'str',
-      searchCl: 'CARD_NO',
-      searchValue: 'string',
-    };
-    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
+    let listParams = {
+      mid: 'nictest001m',
+      searchType: 'ALL',
+			searchKeyword: 'P14633723',
+      startDate: startDate,
+      endDate: endDate,
+      requestStatus: 'ALL',
+      processResult: 'ALL',
+      paymentMethod: 'ALL',
+			pagination: pageParam
+    };    
    
-    let listParam = {
-      ...listSummaryParams,
-      ...{page: pageParam}
-    };
-    billingList(listParam).then((rs) => {
+    billingList(listParams).then((rs) => {
      setListItems(assembleData(rs.content));
    });
 	}
@@ -131,7 +122,7 @@ export const BillingListPage = () => {
 									<input 
 										type="text" 
 										className="credit-period" 
-										value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
+										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
 										readOnly={ true } 
 									/>
 									<button className="filter-btn">
@@ -173,7 +164,7 @@ export const BillingListPage = () => {
 						</div>
 						<BillingList 
 							listItems={ listItems }
-							pageType={ PageType.Billing }
+							transactionCategory={ TransactionCategory.Billing }
 						></BillingList> 
 					</div>
 				</div>
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { overlay } from 'overlay-kit';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
+import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
+import { DetailInfoWrap } from '@/entities/transaction/ui/info-wrap/detail-info-wrap';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  TransactionCategory,
+  CashReceiptDetailParams,
+  DetailResponse,
+  IssueInfo,
+  DetailInfo,
+  InfoWrapKeys
+} from '@/entities/transaction/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const CashReceiptDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  
+  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
+  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+  const [showIssueInfo, setShowIssueInfo] = useState<boolean>(false);
+  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
+  
+  useSetHeaderTitle('현금영수증 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.transaction.cashReceipt.list);
+  });
+  useSetFooterMode(false);
+
+  const { mutateAsync: escroDetail } = useCashReceiptDetailMutation();
+    
+  const callDetail = () => {
+    let cashReceitDetailParams: CashReceiptDetailParams = {
+      issueNumber: location?.state.issueNumber
+    };
+    escroDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
+      setIssueInfo(rs.issueInfo);
+      setDetailInfo(rs.detailInfo);
+    });
+  };
+  useEffect(() => {
+    callDetail();
+  }, []);
+
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Issue){
+      setShowIssueInfo(!showIssueInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Detail){
+      setShowDetailInfo(!showDetailInfo);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                <IssueInfoWrap
+                  transactionCategory={ TransactionCategory.CashReceipt }
+                  issueInfo={ issueInfo }
+                  show={ showIssueInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></IssueInfoWrap>
+                <div className="txn-divider minus"></div>
+                <DetailInfoWrap
+                  transactionCategory={ TransactionCategory.CashReceipt }
+                  detailInfo={ detailInfo }
+                  show={ showDetailInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></DetailInfoWrap>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
--- a/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
+++ b/src/pages/transaction/cash-receipt/hand-written-issuance-page.tsx
@@ -1,8 +1,8 @@
 import {useState} from 'react';
 import {PATHS} from '@/shared/constants/paths';
 import {useNavigate} from '@/shared/lib/hooks/use-navigate';
-import {CashReceitHandWrittenIssuanceStep1} from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step1';
-import {CashReceitHandWrittenIssuanceStep2} from '@/entities/transaction/ui/cash-receit-hand-written-issuance-step2';
+import {CashReceiptHandWrittenIssuanceStep1} from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step1';
+import {CashReceiptHandWrittenIssuanceStep2} from '@/entities/transaction/ui/cash-receipt-hand-written-issuance-step2';
 import {ProcessStep} from '@/entities/transaction/model/types';
 import {HeaderType} from '@/entities/common/model/types';
 import {useSetFooterMode, useSetHeaderTitle, useSetHeaderType} from '@/widgets/sub-layout/use-sub-layout';
@@ -24,7 +24,7 @@ export const CashReceitHandWrittenIssuancePage = () => {
    else if(processStep === ProcessStep.Two){
      // 완료시?
      alert('완료');
-      navigate(PATHS.transaction.cashReceit.list);
+      navigate(PATHS.transaction.cashReceipt.list);
    }
  };

@@ -50,12 +50,12 @@ export const CashReceitHandWrittenIssuancePage = () => {
                    }
                </div>
                { (processStep === ProcessStep.One) &&
-                  <CashReceitHandWrittenIssuanceStep1></CashReceitHandWrittenIssuanceStep1>
+                  <CashReceiptHandWrittenIssuanceStep1></CashReceiptHandWrittenIssuanceStep1>
                }
                { (processStep === ProcessStep.Two) &&
-                  <CashReceitHandWrittenIssuanceStep2
+                  <CashReceiptHandWrittenIssuanceStep2
                    setProcessStep={ setProcessStep }
-                  ></CashReceitHandWrittenIssuanceStep2>
+                  ></CashReceiptHandWrittenIssuanceStep2>
                }
              </div>
            </div>
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -4,10 +4,9 @@ import { NumericFormat } from 'react-number-format';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { CashReceitList } from '@/entities/transaction/ui/cash-receit-list';
-import { ListItem, PageType, SortByKeys } from '@/entities/transaction/model/types';
-import { useCashReceitListMutation } from '@/entities/transaction/api/use-cash-receit-list-mutation';
-import { useCashReceitListSummaryMutation } from '@/entities/transaction/api/use-cash-receit-list-summary-mutation';
+import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
+import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { Filter } from '@/entities/transaction/ui/filter';
@@ -26,18 +25,16 @@ const serviceCodes = [
 	{name: '취소', key: 'cancel'}
 ];

-export const CashReceitListPage = () => {
+export const CashReceiptListPage = () => {
 	const { navigate } = useNavigate();

  const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
-	const [totalTransactionCount, setTotalTransactionCount] = useState<number>(0);
-	const [totalTransactionAmount, setTotalTransactionAmount] = useState<number>(0);
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 		
 	useSetHeaderTitle('현금영수증');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -46,44 +43,29 @@ export const CashReceitListPage = () => {
 	});
 	useSetFooterMode(true);

-	const { mutateAsync: cashReceitList } = useCashReceitListMutation();
-	const { mutateAsync: cashReceitListSummary } = useCashReceitListSummaryMutation();
+	const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
 	
 	const callList = (option?: {
    sortBy?: string, 
    val?: string
  }) => {
-    let listSummaryParams = {
-      moid: 'string',
-      tid: 'string',
-      fromDate: fromDate,
-      toDate: toDate,
-      stateCode: '0',
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
-      minAmount: 0,
-      maxAmount: 0,
-      dateCl: 'TRANS',
-      goodsName: 'string',
-      cardCode: 'st',
-      bankCode: 'str',
-      searchCl: 'CARD_NO',
-      searchValue: 'string',
-    };
-    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
-    
-    let listParams = {
-      ...listSummaryParams,
-      ...{page: pageParam}
+		let listParams = {
+      mid: 'string',
+      startDate: '2025-06-08',
+  		endDate: '2025-06-08',
+  		purposeType: 'ALL',
+  		issueStatus: 'ALL',
+  		processResult: 'ALL',
+			pagination: pageParam
    };
-    cashReceitList(listParams).then((rs) => {
+    
+    cashReceiptList(listParams).then((rs) => {
      setListItems(assembleData(rs.content));
    });
-    cashReceitListSummary(listSummaryParams).then((rs) => {
-      setTotalTransactionAmount(rs.totalTransactionAmount);
-      setTotalTransactionCount(rs.totalTransactionCount);
-    });
+    
  };

 	const assembleData = (content: Array<ListItem>) => {
@@ -139,7 +121,7 @@ export const CashReceitListPage = () => {
 									<input 
 										type="text" 
 										className="credit-period" 
-										value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
+										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
 										readOnly={ true } 
 									/>
 									<button className="filter-btn">
@@ -221,10 +203,10 @@ export const CashReceitListPage = () => {
 								</div>
 							</div>
 						</div>
-						<CashReceitList 
+						<CashReceiptList 
 							listItems={ listItems }
-							pageType={ PageType.CashReceit }
-						></CashReceitList> 
+							transactionCategory={ TransactionCategory.CashReceipt }
+						></CashReceiptList> 
 					</div>
 				</div>
 			</main>
--- a/src/pages/transaction/cash-receit/detail-page.tsx
+++ b/src/pages/transaction/cash-receit/detail-page.tsx
@@ -1,188 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { useCashReceitDetailMutation } from '@/entities/transaction/api/use-cash-receit-detail-mutation';
-import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
-import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
-import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
-import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
-import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
-import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-  PageType,
-  CashReceitDetailParams,
-  DetailResponse,
-  DetailAmountInfoProps,
-  DetailImportantInfoProps,
-  DetailPaymentInfoProps,
-  DetailTransactionInfoProps,
-  DetailSettlementInfoProps,
-  DetailPartCancelInfoProps,
-  DetailInfoKeys
-} from '@/entities/transaction/model/types';
-import {
-  useSetOnBack, 
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const CashReceitDetailPage = () => {
-  const { navigate } = useNavigate();
-  const { tid } = useParams();
-  
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
-  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
-  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
-
-  useSetHeaderTitle('현금영수증 상세');
-  useSetHeaderType(HeaderType.RightClose);
-  useSetOnBack(() => {
-    navigate(PATHS.transaction.cashReceit.list);
-  });
-  useSetFooterMode(false);
-
-  const { mutateAsync: escroDetail } = useCashReceitDetailMutation();
-    
-  const callDetail = () => {
-    let cashReceitDetailParams: CashReceitDetailParams = {
-      svcCd: 'st',
-      tid: tid
-    };
-    escroDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setImportantInfo(rs.importantInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setPartCancelInfo(rs.partCancelInfo);
-    });
-  };
-  useEffect(() => {
-    callDetail();
-  }, []);
-
-  const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.transaction.allTransaction.cancel, {
-        state: {
-          tid: tid
-        }
-      });
-    }, 10)
-  };
-
-
-  const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
-    
-    overlay.open(({ 
-      isOpen,
-      close,
-      unmount
-    }) => {
-      return (
-        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-          message={ msg }
-          buttonLabel={['취소', '확인']}
-        />
-      );
-    });
-  };
-
-  const onClickToShowInfo = (info: DetailInfoKeys) => {
-    if(info === DetailInfoKeys.Amount){
-      setShowAmount(!showAmount);
-    }
-    else if(info === DetailInfoKeys.Payment){
-      setShowPayment(!showPayment);
-    }
-    else if(info === DetailInfoKeys.Transaction){
-      setShowTransaction(!showTransaction);
-    }
-    else if(info === DetailInfoKeys.Settlement){
-      setShowSettlement(!showSettlement);
-    }
-    else if(info === DetailInfoKeys.PartCancel){
-      setShowPartCancel(!showPartCancel);
-    }
-  };
-
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <DetailAmountInfo
-                  pageType={ PageType.CashReceit }
-                  amountInfo={ amountInfo }
-                  show={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
-                <div className="txn-divider minus"></div>
-                <DetailImportantInfo
-                  pageType={ PageType.CashReceit }
-                  importantInfo={ importantInfo }
-                ></DetailImportantInfo>
-                <div className="txn-divider minus"></div>
-                <DetailPaymentInfo
-                  pageType={ PageType.CashReceit }
-                  paymentInfo={ paymentInfo }
-                  show={ showPayment }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPaymentInfo>
-                <div className="txn-divider"></div>
-                <DetailTransactionInfo
-                  pageType={ PageType.CashReceit }
-                  transactionInfo={ transactionInfo }
-                  show={ showTransaction }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailTransactionInfo>
-                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  pageType={ PageType.CashReceit }
-                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
-                <div className="txn-divider"></div>
-                <DetailPartCancelInfo
-                  pageType={ PageType.CashReceit }
-                  partCancelInfo={ partCancelInfo }
-                  show={ showPartCancel }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPartCancelInfo>
-              </div>
-            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >거래 취소</button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-};
--- a/src/pages/transaction/escro/detail-page.tsx
+++ b/src/pages/transaction/escro/detail-page.tsx
@@ -1,188 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { useEscroDetailMutation } from '@/entities/transaction/api/use-escro-detail-mutation';
-import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
-import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
-import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
-import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
-import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
-import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-  PageType,
-  EscroDetailParams,
-  DetailResponse,
-  DetailAmountInfoProps,
-  DetailImportantInfoProps,
-  DetailPaymentInfoProps,
-  DetailTransactionInfoProps,
-  DetailSettlementInfoProps,
-  DetailPartCancelInfoProps,
-  DetailInfoKeys
-} from '@/entities/transaction/model/types';
-import {
-  useSetOnBack, 
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const EscroDetailPage = () => {
-  const { navigate } = useNavigate();
-  const { tid } = useParams();
-  
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
-  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
-  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
-
-  useSetHeaderTitle('에스크로 상세');
-  useSetHeaderType(HeaderType.RightClose);
-  useSetOnBack(() => {
-    navigate(PATHS.transaction.escro.list);
-  });
-  useSetFooterMode(false);
-
-  const { mutateAsync: escroDetail } = useEscroDetailMutation();
-    
-  const callDetail = () => {
-    let escroDetailParams: EscroDetailParams = {
-      svcCd: 'st',
-      tid: tid
-    };
-    escroDetail(escroDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setImportantInfo(rs.importantInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setPartCancelInfo(rs.partCancelInfo);
-    });
-  };
-  useEffect(() => {
-    callDetail();
-  }, []);
-
-  const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.transaction.allTransaction.cancel, {
-        state: {
-          tid: tid
-        }
-      });
-    }, 10)
-  };
-
-
-  const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
-    
-    overlay.open(({ 
-      isOpen,
-      close,
-      unmount
-    }) => {
-      return (
-        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-          message={ msg }
-          buttonLabel={['취소', '확인']}
-        />
-      );
-    });
-  };
-
-  const onClickToShowInfo = (info: DetailInfoKeys) => {
-    if(info === DetailInfoKeys.Amount){
-      setShowAmount(!showAmount);
-    }
-    else if(info === DetailInfoKeys.Payment){
-      setShowPayment(!showPayment);
-    }
-    else if(info === DetailInfoKeys.Transaction){
-      setShowTransaction(!showTransaction);
-    }
-    else if(info === DetailInfoKeys.Settlement){
-      setShowSettlement(!showSettlement);
-    }
-    else if(info === DetailInfoKeys.PartCancel){
-      setShowPartCancel(!showPartCancel);
-    }
-  };
-
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <DetailAmountInfo
-                  pageType={ PageType.Escro }
-                  amountInfo={ amountInfo }
-                  show={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
-                <div className="txn-divider minus"></div>
-                <DetailImportantInfo
-                  pageType={ PageType.Escro }
-                  importantInfo={ importantInfo }
-                ></DetailImportantInfo>
-                <div className="txn-divider minus"></div>
-                <DetailPaymentInfo
-                  pageType={ PageType.Escro }
-                  paymentInfo={ paymentInfo }
-                  show={ showPayment }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPaymentInfo>
-                <div className="txn-divider"></div>
-                <DetailTransactionInfo
-                  pageType={ PageType.Escro }
-                  transactionInfo={ transactionInfo }
-                  show={ showTransaction }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailTransactionInfo>
-                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  pageType={ PageType.Escro }
-                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
-                <div className="txn-divider"></div>
-                <DetailPartCancelInfo
-                  pageType={ PageType.Escro }
-                  partCancelInfo={ partCancelInfo }
-                  show={ showPartCancel }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPartCancelInfo>
-              </div>
-            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >거래 취소</button>
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
-  );
-};
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router';
+import { PATHS } from '@/shared/constants/paths';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { overlay } from 'overlay-kit';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
+import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
+import { EscrowInfoWrap } from '@/entities/transaction/ui/info-wrap/escrow-info-wrap';
+import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
+import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
+import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  TransactionCategory,
+  EscrowDetailParams,
+  DetailResponse,
+  ImportantInfo,
+  EscrowInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  InfoWrapKeys
+} from '@/entities/transaction/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const EscrowDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  
+  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
+  const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
+  const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
+  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
+  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
+  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  
+
+  useSetHeaderTitle('에스크로 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.transaction.escrow.list);
+  });
+  useSetFooterMode(false);
+
+  const { mutateAsync: escroDetail } = useEscrowDetailMutation();
+    
+  const callDetail = () => {
+    let escroDetailParams: EscrowDetailParams = {
+      issueNumber: location?.state.issueNumber,
+    };
+    escroDetail(escroDetailParams).then((rs: DetailResponse) => {
+      setImportantInfo(rs.importantInfo);
+      setEscrowInfo(rs.escrowInfo);
+      setPaymentInfo(rs.paymentInfo);
+      setTransactionInfo(rs.transactionInfo);
+      setSettlementInfo(rs.settlementInfo);
+    });
+  };
+  useEffect(() => {
+    callDetail();
+  }, []);
+  
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Important){
+      setShowImportantInfo(!showImportantInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Escrow){
+      setShowEscroInfo(!showEscroInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Payment){
+      setShowPaymentInfo(!showPaymentInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
+      setShowTransactionInfo(!showTransactionInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Settlement){
+      setShowSettlementInfo(!showSettlementInfo);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                <ImportantInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  importantInfo={ importantInfo }
+                  show={ showImportantInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></ImportantInfoWrap>
+                <div className="txn-divider minus"></div>
+                <EscrowInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  importantInfo={ importantInfo }
+                  show={ showEscroInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></EscrowInfoWrap>
+                <div className="txn-divider minus"></div>
+                <PaymentInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  paymentInfo={ paymentInfo }
+                  show={ showPaymentInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></PaymentInfoWrap>
+                <div className="txn-divider"></div>
+                <TransactionInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  transactionInfo={ transactionInfo }
+                  show={ showTransactionInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></TransactionInfoWrap>
+                <div className="txn-divider"></div>
+                <SettlementInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  settlementInfo={ settlementInfo }
+                  show={ showSettlementInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></SettlementInfoWrap>
+                <div className="txn-divider"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { EscroList } from '@/entities/transaction/ui/escro-list';
-import { ListItem, PageType, SortByKeys } from '@/entities/transaction/model/types';
-import { useEscroListMutation } from '@/entities/transaction/api/use-escro-list-mutation';
+import { EscrowList } from '@/entities/transaction/ui/escrow-list';
+import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { Filter } from '@/entities/transaction/ui/filter';
@@ -24,7 +24,7 @@ const serviceCodes = [
 	{name: '배송등록', key: 'register'},
 ];

-export const EscroListPage = () => {
+export const EscrowListPage = () => {
 	const { navigate } = useNavigate();

 	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
@@ -32,8 +32,8 @@ export const EscroListPage = () => {
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -42,37 +42,29 @@ export const EscroListPage = () => {
 	});
  useSetFooterMode(true);

-	const { mutateAsync: escroList } = useEscroListMutation();
+	const { mutateAsync: escrowList } = useEscrowListMutation();
 	const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
 	
 	const callList = (option?: {
    sortBy?: string, 
    val?: string
  }) => {
-    let listSummaryParams = {
-      moid: 'string',
-      tid: 'string',
-      fromDate: fromDate,
-      toDate: toDate,
-      stateCode: '0',
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
-      minAmount: 0,
-      maxAmount: 0,
-      dateCl: 'TRANS',
-      goodsName: 'string',
-      cardCode: 'st',
-      bankCode: 'str',
-      searchCl: 'CARD_NO',
-      searchValue: 'string',
-    };
-    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
-    
-    let listParam = {
-      ...listSummaryParams,
-      ...{page: pageParam}
+    let listParams = {
+      mid: "nictest001m",
+  		searchType: "ORDER_NUMBER",
+  		searchKeyword: "01384234",
+  		startDate: startDate,
+  		endDate: endDate,
+  		deliveryStatus: "ALL",
+  		settlementStatus: "ALL",
+  		minAmount: 0,
+  		maxAmount: 999999999,
+			pagination: pageParam
    };
-    escroList(listParam).then((rs) => {
+    
+    escrowList(listParams).then((rs) => {
      setListItems(assembleData(rs.content));
    });
  };
@@ -130,7 +122,7 @@ export const EscroListPage = () => {
 									<input 
 										type="text" 
 										className="credit-period" 
-										value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
+										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
 										readOnly={ true } 
 									/>
 									<button className="filter-btn">
@@ -170,10 +162,10 @@ export const EscroListPage = () => {
 								</div>
 							</div>
 						</div>
-						<EscroList 
+						<EscrowList 
 							listItems={ listItems }
-							pageType={ PageType.Escro }
-						></EscroList> 
+							transactionCategory={ TransactionCategory.Escrow }
+						></EscrowList> 
 					</div>
 				</div>
 			</main>
--- a/src/pages/transaction/transaction-pages.tsx
+++ b/src/pages/transaction/transaction-pages.tsx
@@ -4,11 +4,11 @@ import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { AllTransactionListPage } from './all-transaction/list-page';
 import { AllTransactionDetailPage } from './all-transaction/detail-page';
 import { AllTransactionCancelPage } from './all-transaction/cancel-page';
-import { CashReceitListPage } from './cash-receit/list-page';
-import { CashReceitDetailPage } from './cash-receit/detail-page';
-import { CashReceitHandWrittenIssuancePage } from './cash-receit/hand-written-issuance-page';
-import { EscroListPage } from './escro/list-page';
-import { EscroDetailPage } from './escro/detail-page';
+import { CashReceiptListPage } from './cash-receipt/list-page';
+import { CashReceiptDetailPage } from './cash-receipt/detail-page';
+import { CashReceitHandWrittenIssuancePage } from './cash-receipt/hand-written-issuance-page';
+import { EscrowListPage } from './escrow/list-page';
+import { EscrowDetailPage } from './escrow/detail-page';
 import { BillingListPage } from './billing/list-page';
 import { BillingDetailPage } from './billing/detail-page';
 import { BillingPaymentRequestPage } from './billing/payment-request-page';
@@ -23,14 +23,14 @@ export const TransactionPages = () => {
          <Route path={ROUTE_NAMES.transaction.allTransaction.detail} element={<AllTransactionDetailPage />} />
          <Route path={ROUTE_NAMES.transaction.allTransaction.cancel} element={<AllTransactionCancelPage />} />
        </Route>
-        <Route path={ROUTE_NAMES.transaction.cashReceit.base}>
-          <Route path={ROUTE_NAMES.transaction.cashReceit.list} element={<CashReceitListPage />} />
-          <Route path={ROUTE_NAMES.transaction.cashReceit.detail} element={<CashReceitDetailPage />} />
-          <Route path={ROUTE_NAMES.transaction.cashReceit.handWrittenIssuance} element={<CashReceitHandWrittenIssuancePage />} />
+        <Route path={ROUTE_NAMES.transaction.cashReceipt.base}>
+          <Route path={ROUTE_NAMES.transaction.cashReceipt.list} element={<CashReceiptListPage />} />
+          <Route path={ROUTE_NAMES.transaction.cashReceipt.detail} element={<CashReceiptDetailPage />} />
+          <Route path={ROUTE_NAMES.transaction.cashReceipt.handWrittenIssuance} element={<CashReceitHandWrittenIssuancePage />} />
        </Route>
-        <Route path={ROUTE_NAMES.transaction.escro.base}>
-          <Route path={ROUTE_NAMES.transaction.escro.list} element={<EscroListPage />} />
-          <Route path={ROUTE_NAMES.transaction.escro.detail} element={<EscroDetailPage />} />
+        <Route path={ROUTE_NAMES.transaction.escrow.base}>
+          <Route path={ROUTE_NAMES.transaction.escrow.list} element={<EscrowListPage />} />
+          <Route path={ROUTE_NAMES.transaction.escrow.detail} element={<EscrowDetailPage />} />
        </Route>
        <Route path={ROUTE_NAMES.transaction.billing.base}>
          <Route path={ROUTE_NAMES.transaction.billing.list} element={<BillingListPage />} />