거래내역 관련

2025-09-10 09:38:20 +09:00
parent 6c778d9d40
commit 73d3f7008f
45 changed files with 1101 additions and 1110 deletions
--- a/src/entities/common/model/constants.ts
+++ b/src/entities/common/model/constants.ts
@@ -1,8 +1,8 @@
 export const DEFAULT_PAGE_PARAM = {
-  page: 0,
+  cursor: 'string',
  size: 0,
  sortBy: 'string',
  sortOrder: 'ASC',
  orderBy: 'string',
-  offset: 0
+  limit: 0
 };
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -1,10 +1,10 @@
 export interface DefaultRequestPagination {
-  page: number;
+  cursor: string;
  size: number;
  sortBy: string;
  sortOrder: string;
  orderBy: string;
-  offset: number;
+  limit: number;
 };
 export interface DefaulResponsePagination {
  nextCursor: string | null;
--- a/src/entities/transaction/api/use-cash-receipt-detail-mutation.ts
+++ b/src/entities/transaction/api/use-cash-receipt-detail-mutation.ts
@@ -3,7 +3,7 @@ import { API_URL } from '@/shared/api/urls';
 import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
-  CashReceitDetailParams,
+  CashReceiptDetailParams,
  DetailResponse
 } from '../model/types';
 import { 
@@ -11,16 +11,16 @@ import {
  UseMutationOptions
 } from '@tanstack/react-query';

-export const cashReceitDetail = (params: CashReceitDetailParams) => {
+export const cashReceiptDetail = (params: CashReceiptDetailParams) => {
  return resultify(
-    axios.post<DetailResponse>(API_URL.cashReceitDetail(), params),
+    axios.post<DetailResponse>(API_URL.cashReceiptDetail(), params),
  );
 };

-export const useCashReceitDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, CashReceitDetailParams>) => {
-  const mutation = useMutation<DetailResponse, CBDCAxiosError, CashReceitDetailParams>({
+export const useCashReceiptDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, CashReceiptDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, CashReceiptDetailParams>({
    ...options,
-    mutationFn: (params: CashReceitDetailParams) => cashReceitDetail(params),
+    mutationFn: (params: CashReceiptDetailParams) => cashReceiptDetail(params),
  });

  return {
--- a/src/entities/transaction/api/use-cash-receipt-list-mutation.ts
+++ b/src/entities/transaction/api/use-cash-receipt-list-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  CashReceiptListParams,
+  CashReceiptListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const cashReceiptList = (params: CashReceiptListParams) => {
+  return resultify(
+    axios.post<CashReceiptListResponse>(API_URL.cashReceiptList(), params),
+  );
+};
+
+export const useCashReceiptListMutation = (options?: UseMutationOptions<CashReceiptListResponse, CBDCAxiosError, CashReceiptListParams>) => {
+  const mutation = useMutation<CashReceiptListResponse, CBDCAxiosError, CashReceiptListParams>({
+    ...options,
+    mutationFn: (params: CashReceiptListParams) => cashReceiptList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/transaction/api/use-cash-receit-list-mutation.ts
+++ b/src/entities/transaction/api/use-cash-receit-list-mutation.ts
@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL } from '@/shared/api/urls';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  CashReceitListParams,
-  CashReceitListResponse
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const cashReceitList = (params: CashReceitListParams) => {
-  return resultify(
-    axios.post<CashReceitListResponse>(API_URL.cashReceitList(), params),
-  );
-};
-
-export const useCashReceitListMutation = (options?: UseMutationOptions<CashReceitListResponse, CBDCAxiosError, CashReceitListParams>) => {
-  const mutation = useMutation<CashReceitListResponse, CBDCAxiosError, CashReceitListParams>({
-    ...options,
-    mutationFn: (params: CashReceitListParams) => cashReceitList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};
--- a/src/entities/transaction/api/use-cash-receit-list-summary-mutation.ts
+++ b/src/entities/transaction/api/use-cash-receit-list-summary-mutation.ts
@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL } from '@/shared/api/urls';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  CashReceitListSummaryParams,
-  CashReceitListSummaryResponse
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const cashReceitListSummary = (params: CashReceitListSummaryParams) => {
-  return resultify(
-    axios.post<CashReceitListSummaryResponse>(API_URL.allTransactionListSummary(), params),
-  );
-};
-
-export const useCashReceitListSummaryMutation = (options?: UseMutationOptions<CashReceitListSummaryResponse, CBDCAxiosError, CashReceitListSummaryParams>) => {
-  const mutation = useMutation<CashReceitListSummaryResponse, CBDCAxiosError, CashReceitListSummaryParams>({
-    ...options,
-    mutationFn: (params: CashReceitListSummaryParams) => cashReceitListSummary(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};
--- a/src/entities/transaction/api/use-escro-list-mutation.ts
+++ b/src/entities/transaction/api/use-escro-list-mutation.ts
@@ -1,29 +0,0 @@
-import axios from 'axios';
-import { API_URL } from '@/shared/api/urls';
-import { resultify } from '@/shared/lib/resultify';
-import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
-  EscroListParams,
-  EscroListResponse
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const escroList = (params: EscroListParams) => {
-  return resultify(
-    axios.post<EscroListResponse>(API_URL.escroList(), params),
-  );
-};
-
-export const useEscroListMutation = (options?: UseMutationOptions<EscroListResponse, CBDCAxiosError, EscroListParams>) => {
-  const mutation = useMutation<EscroListResponse, CBDCAxiosError, EscroListParams>({
-    ...options,
-    mutationFn: (params: EscroListParams) => escroList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};
--- a/src/entities/transaction/api/use-escrow-detail-mutation.ts
+++ b/src/entities/transaction/api/use-escrow-detail-mutation.ts
@@ -3,7 +3,7 @@ import { API_URL } from '@/shared/api/urls';
 import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
-  EscroDetailParams,
+  EscrowDetailParams,
  DetailResponse
 } from '../model/types';
 import { 
@@ -11,16 +11,16 @@ import {
  UseMutationOptions
 } from '@tanstack/react-query';

-export const escroDetail = (params: EscroDetailParams) => {
+export const escrowDetail = (params: EscrowDetailParams) => {
  return resultify(
-    axios.post<DetailResponse>(API_URL.escroDetail(), params),
+    axios.post<DetailResponse>(API_URL.escrowDetail(), params),
  );
 };

-export const useEscroDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, EscroDetailParams>) => {
-  const mutation = useMutation<DetailResponse, CBDCAxiosError, EscroDetailParams>({
+export const useEscrowDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, EscrowDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, EscrowDetailParams>({
    ...options,
-    mutationFn: (params: EscroDetailParams) => escroDetail(params),
+    mutationFn: (params: EscrowDetailParams) => escrowDetail(params),
  });

  return {
--- a/src/entities/transaction/api/use-escrow-list-mutation.ts
+++ b/src/entities/transaction/api/use-escrow-list-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL } from '@/shared/api/urls';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  EscrowListParams,
+  EscrowListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const escrowList = (params: EscrowListParams) => {
+  return resultify(
+    axios.post<EscrowListResponse>(API_URL.escrowList(), params),
+  );
+};
+
+export const useEscrowListMutation = (options?: UseMutationOptions<EscrowListResponse, CBDCAxiosError, EscrowListParams>) => {
+  const mutation = useMutation<EscrowListResponse, CBDCAxiosError, EscrowListParams>({
+    ...options,
+    mutationFn: (params: EscrowListParams) => escrowList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -1,4 +1,4 @@
-import { DefaulResponsePagination } from '@/entities/common/model/types';
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';

 export enum CancelTabKeys {
  All = 'All',
@@ -12,18 +12,22 @@ export enum SortByKeys {
  New = 'New',
  Amount = 'Amount',
 };
-export enum PageType {
+export enum TransactionCategory {
  AllTransaction = 'AllTransaction',
-  CashReceit = 'CashReceit',
-  Escro = 'Escro',
+  CashReceipt = 'CashReceipt',
+  Escrow = 'Escrow',
  Billing = 'Billing',
 };
-export enum DetailInfoKeys {
+export enum InfoWrapKeys {
  Amount = 'Amount',
+  Important = 'Important',
  Payment = 'Payment',
  Transaction = 'Transaction',
  Settlement = 'Settlement',
  PartCancel = 'PartCancel',
+  Issue = 'Issue',
+  Detail = 'Detail',
+  Escrow = 'Escrow',
 };
 export enum ProcessStep {
  One = 'One',
@@ -34,31 +38,33 @@ export interface SortOptionsBoxProps {
  onCliCkToSort: (sortBy: SortByKeys) => void;
 };
 export interface ListItemProps extends ListItem{
-  pageType?: PageType;
+  transactionCategory?: TransactionCategory;
 };
 export interface ListDateGroupProps {
-  pageType?: PageType;
+  transactionCategory?: TransactionCategory;
  date?: string;
  items?: Array<ListItemProps>;
 };
 export interface AllTransactionListProps {
-  pageType: PageType;
+  transactionCategory: TransactionCategory;
  listItems: Record<string, Array<ListItemProps>>
 };
-export interface CashReceitListProps {
-  pageType: PageType;
+export interface CashReceiptListProps {
+  transactionCategory: TransactionCategory;
  listItems: Record<string, Array<ListItemProps>>
 };
-export interface EscroListProps {
-  pageType: PageType;
+export interface EscrowListProps {
+  transactionCategory: TransactionCategory;
  listItems: Record<string, Array<ListItemProps>>
 };
 export interface BillingListProps {
-  pageType: PageType;
+  transactionCategory: TransactionCategory;
  listItems: Record<string, Array<ListItemProps>>
 };
 export interface ListItem {
  tid?: string;
+  issueNumber?: number;
+  billKey?: string;
  mid?: string;
  stateDate?: string;
  stateCode?: string;
@@ -69,242 +75,290 @@ export interface ListItem {
  serviceDetailName?: string;
  goodsAmount?: number;
 };
+
+export interface BillingItem {
+  billKey: string;
+  tid: string;
+  orderNumber: string;
+  approvalNumber?: string;
+  approvalDate?: string;
+  transactionDateTime?: string;
+  transactionAmount?: number;
+  requestStatus?: string;
+  processResult?: string;
+  paymentMethod?: string;
+  installmentMonth?: string;
+  productName?: string;
+  buyerName?: string;
+};
 export interface AllTransactionListResponse extends DefaulResponsePagination {
  content: Array<ListItemProps>;
 };
-export interface CashReceitListResponse extends DefaulResponsePagination {
+export interface CashReceiptListResponse extends DefaulResponsePagination {
  content: Array<ListItemProps>;
 };
-export interface EscroListResponse extends DefaulResponsePagination {
+export interface EscrowListResponse extends DefaulResponsePagination {
  content: Array<ListItemProps>;
 };
 export interface BillingListResponse extends DefaulResponsePagination {
  content: Array<ListItemProps>;
+
 };

 export interface AllTransactionListSummaryParams extends AllTransactionListParams {
  
 }
-export interface CashReceitListSummaryParams extends CashReceitListParams {

-}
 export interface AllTransactionListSummaryResponse {
  totalTransactionCount: number;
  totalTransactionAmount: number;
 };
-export interface CashReceitListSummaryResponse {
-  totalTransactionCount: number;
-  totalTransactionAmount: number;
-};
-
-export interface TransactionRequestParams {
-  tid?: string;
-}
-
-export interface AllTransactionListParams extends TransactionRequestParams {
+export interface AllTransactionListParams {
  moid: string;
-  fromDate: string;
-  toDate: string;
-  stateCode: string;
-  serviceCode: string;
-  minAmount: number;
-  maxAmount: number;
-  dateCl: string;
-  goodsName: string;
-  cardCode: string;
-  bankCode: string;
-  searchCl: string;
-  searchValue: string;
-};
-
-export interface CashReceitListParams extends TransactionRequestParams {
-  moid: string;
-  fromDate: string;
-  toDate: string;
-  stateCode: string;
-  serviceCode: string;
-  minAmount: number;
-  maxAmount: number;
-  dateCl: string;
-  goodsName: string;
-  cardCode: string;
-  bankCode: string;
-  searchCl: string;
-  searchValue: string;
-};
-
-export interface EscroListParams extends TransactionRequestParams {
-  moid: string;
-  fromDate: string;
-  toDate: string;
-  stateCode: string;
-  serviceCode: string;
-  minAmount: number;
-  maxAmount: number;
-  dateCl: string;
-  goodsName: string;
-  cardCode: string;
-  bankCode: string;
-  searchCl: string;
-  searchValue: string;
-};
-
-export interface BillingListParams extends TransactionRequestParams {
-  moid: string;
-  fromDate: string;
-  toDate: string;
-  stateCode: string;
-  serviceCode: string;
-  minAmount: number;
-  maxAmount: number;
-  dateCl: string;
-  goodsName: string;
-  cardCode: string;
-  bankCode: string;
-  searchCl: string;
-  searchValue: string;
-};
-
-
-
-export interface ListPaging {
-  cursor: string | null;
-  size: number;
-  sortBy: string;
-  sortOrder: string;
-  orderBy: string;
-  limit: number;
-};
-export interface AllTransactionDetailParams extends TransactionRequestParams {
-  svcCd: string;
-};
-export interface CashReceitDetailParams extends TransactionRequestParams {
-  svcCd: string;
-};
-export interface EscroDetailParams extends TransactionRequestParams {
-  svcCd: string;
-};
-export interface BillingDetailParams extends TransactionRequestParams {
-  svcCd: string;
-};
-
-export interface DetailAmountInfoProps {
-  mid: string;
-  amount: number;
-  cardAmount: number;
-  pointAmount: number;
-  couponAmount: number;
-  kakaoMoney: number;
-  kakaoPoint: number;
-  kakaoInstantDiscount: number;
-  naverPoint: number;
-  tossMoney: number;
-  tossDiscount: number;
-  paycoPoint: number;
-  paycoCoupon: number;
-  escrowFee: number;
-};
-export interface DetailImportantInfoProps {
-  ordNo: string;
  tid: string;
-  tradeStatus: string;
-  tradeMethod: string;
-  productName: string;
-  approvalDate: string;
-  tradeDate: string;
-  requestDate: string;
-  cancelDate: string;
+  fromDate: string;
+  toDate: string;
+  stateCode: string;
+  serviceCode: string;
+  minAmount: number;
+  maxAmount: number;
+  dateCl: string;
+  goodsName: string;
+  cardCode: string;
+  bankCode: string;
+  searchCl: string;
+  searchValue: string;
+  page?: DefaultRequestPagination;
 };
-export interface DetailPaymentInfoProps {
-  approvalAcquire: string;
-  approvalReturn: number;
-  approvalReAcquire: number;
-  approvalVAN: string;
-  cancelAcquire: string;
-  cancelReturn: string;
-  cancelReAcquire: string;
-  acquireVAN: string;
-  acquireCompany: string;
-  cardNumber: string;
-  approvalNumber: string;
-  installmentPeriod: number;
-  authentication: string;
-  accountType: string;
-  bankName: string;
-  accountNumber: string;
-  depositBankName: string;
-  depositorName: string;
-  depositDeadline: string;
-  depositDate: string;
-  refundScheduleDate: string;
-  refundBankName: string;
-  refundAccountNumber: string;
-  accountHolder: string;
-  refundCompleteDate: string;
-  partner: string;
-  cpid: string;
-  productCategory: string;
-  phoneNumber: string;
-  customerId: string;
-  giftCardNumber: string;
-  culturelandId: string;
+
+export interface CashReceiptListParams {
+  mid: string;
+  startDate: string;
+  endDate: string;
+  purposeType: string;
+  issueStatus: string;
+  processResult: string;
+  pagination: DefaultRequestPagination
 };
-export interface DetailTransactionInfoProps {
-  buyerName: string;
-  email: string;
-  phoneNumber: string;
-  cancelReason: string;
-  cancelRequestor: string;
-  partialCancel: string;
-  cashReceiptIssue: string;
+
+export interface EscrowListParams {
+  mid: string;
+  searchType: string;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  deliveryStatus: string;
+  settlementStatus: string;
+  minAmount: number;
+  maxAmount: number;
+  pagination: DefaultRequestPagination;
 };
-export interface DetailSettlementInfoProps {
-  approvalSettleDate: string;
-  approvalSettleAmount: number;
-  cancelSettleDate: string;
-  cancelSettleAmount: number;
+
+export interface BillingListParams {
+  mid: string;
+  searchType: string;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  requestStatus: string;
+  processResult: string;
+  paymentMethod: string;
+  pagination: DefaultRequestPagination
 };
-export interface DetailPartCancelInfoProps {
-  originalTid: string;
-  originalAmount: number;
-  partCancelTid: string;
-  partCancelAmount: number;
-  remainingAmount: number;
+
+export interface AllTransactionDetailParams {
+  svcCd?: string;
+  tid?: string;
+};
+export interface CashReceiptDetailParams {
+  issueNumber?: number;
+};
+export interface EscrowDetailParams {
+  issueNumber?: number;
+};
+export interface BillingDetailParams {
+  billKey?: string;
+};
+
+export interface AmountInfo {
+  mid?: string;
+  amount?: number;
+  cardAmount?: number;
+  pointAmount?: number;
+  couponAmount?: number;
+  kakaoMoney?: number;
+  kakaoPoint?: number;
+  kakaoInstantDiscount?: number;
+  naverPoint?: number;
+  tossMoney?: number;
+  tossDiscount?: number;
+  paycoPoint?: number;
+  paycoCoupon?: number;
+  escrowFee?: number;
+};
+export interface ImportantInfo {
+  ordNo?: string;
+  tid?: string;
+  tradeStatus?: string;
+  tradeMethod?: string;
+  productName?: string;
+  approvalDate?: string;
+  tradeDate?: string;
+  requestDate?: string;
+  cancelDate?: string;
+  mid?: string;
+  orderNumber?: string;
+  transactionStatus?: string;
+  paymentMethod?: string;
+  approvalDateTime?: string;
+};
+export interface PaymentInfo {
+  approvalAcquire?: string;
+  approvalReturn?: number;
+  approvalReAcquire?: number;
+  approvalVAN?: string;
+  cancelAcquire?: string;
+  cancelReturn?: string;
+  cancelReAcquire?: string;
+  acquireVAN?: string;
+  acquireCompany?: string;
+  cardNumber?: string;
+  approvalNumber?: string;
+  installmentPeriod?: number;
+  authentication?: string;
+  accountType?: string;
+  bankName?: string;
+  accountNumber?: string;
+  depositBankName?: string;
+  depositorName?: string;
+  depositDeadline?: string;
+  depositDate?: string;
+  refundScheduleDate?: string;
+  refundBankName?: string;
+  refundAccountNumber?: string;
+  accountHolder?: string;
+  refundCompleteDate?: string;
+  partner?: string;
+  cpid?: string;
+  productCategory?: string;
+  phoneNumber?: string;
+  customerId?: string;
+  giftCardNumber?: string;
+  culturelandId?: string;
+  paymentAmount?: number;
+
+};
+export interface TransactionInfo {
+  buyerName?: string;
+  email?: string;
+  phoneNumber?: string;
+  cancelReason?: string;
+  cancelRequestor?: string;
+  partialCancel?: string;
+  cashReceiptIssue?: string;
+  transactionDateTime?: string;
+  transactionAmount?: number;
+};
+export interface SettlementInfo {
+  approvalSettleDate?: string;
+  approvalSettleAmount?: number;
+  cancelSettleDate?: string;
+  cancelSettleAmount?: number;
+  scheduledSettlementDate?: string;
+  completedSettlementDate?: string;
+};
+export interface PartCancelInfo {
+  originalTid?: string;
+  originalAmount?: number;
+  partCancelTid?: string;
+  partCancelAmount?: number;
+  remainingAmount?: number;
+};
+
+export interface IssueInfo {
+  approvalNumber?: number;
+  issueNumber?: number;
+  issueDateTime?: string;
+  purpose?: string;
+  paymentMethod?: string;
+  productName?: string;
+  transmissionStatus?: string;
+  transactionType?: string;
+};
+export interface DetailInfo {
+  cancelDate?: string;
+  cancelApprovalNumber?: number;
+  receiptInfo?: string;
+  tid?: string;
+  merchantTid?: string;
+  subMallName?: string;
+  subMallBusinessNumber?: number;
+  issueChannel?: string;
+  failureReason?: string;
+};
+export interface EscrowInfo {
+  deliveryStatus: string;
+  deliveryRegistrationDate: string;
+  deliveryCompleteDate: string;
+  purchaseConfirmDate: string;
+  purchaseRejectReason: string;
+  rejectReason: string;
+  escrowCertNumber: string;
+  deliveryCompany: string;
+  trackingNumber: number;
+  deliveryAddress: string;
 };

 export interface DetailResponse {
-  amountInfo?: DetailAmountInfoProps;
-  importantInfo?: DetailImportantInfoProps;
-  paymentInfo?: DetailPaymentInfoProps;
-  transactionInfo?: DetailTransactionInfoProps;
-  settlementInfo?: DetailSettlementInfoProps;
-  partCancelInfo?: DetailPartCancelInfoProps;
+  amountInfo?: AmountInfo;
+  importantInfo?: ImportantInfo;
+  paymentInfo?: PaymentInfo;
+  transactionInfo?: TransactionInfo;
+  settlementInfo?: SettlementInfo;
+  partCancelInfo?: PartCancelInfo;
+  issueInfo?: IssueInfo;
+  detailInfo?: DetailInfo;
+  escrowInfo?: EscrowInfo;
 };
+export interface BillingDetailResponse {
+  billKey: string;
+  tid: string;
+  orderNumber: string;
+  approvalNumber: string;
+  approvalDate: string;
+  requestStatus: string;
+  processResult: string;
+  installmentMonth: string;
+  productName: string;
+  buyerName: string;
+}

 export interface DetailInfoProps extends DetailResponse{
-  pageType: PageType;
+  transactionCategory: TransactionCategory;
  show?: boolean;
  tid?: string;
-  onClickToShowInfo?: (info: DetailInfoKeys) => void;
+  issueNumber?: number;
+  onClickToShowInfo?: (info: InfoWrapKeys) => void;
 }
 export interface DetailArrowProps {
  show?: boolean;
 };

-export interface DownloadConfirmationParams extends TransactionRequestParams {
-  
+export interface DownloadConfirmationParams {
+  tid?: string;
 };
 export interface DownloadConfirmationResponse {

 };

-export interface DownloadExcelParams extends TransactionRequestParams {
-
+export interface DownloadExcelParams {
+  tid?: string
 };
 export interface DownloadExcelResponse {

 };
-export interface AllTransactionCancelParams extends TransactionRequestParams {
+export interface AllTransactionCancelParams{
+  tid: string;
  cancelAmount: number;
  cancelPassword: string;
  bankCode: string;
@@ -318,8 +372,8 @@ export interface AllTransactionCancelParams extends TransactionRequestParams {
 export interface AllTransactionCancelResponse {
  
 };
-export interface AllTransactionCancelInfoParams extends TransactionRequestParams {
-
+export interface AllTransactionCancelInfoParams {
+  tid: string;
 };
 export interface AllTransactionCancelInfoResponse {
  remainAmount: number;
--- a/src/entities/transaction/ui/all-transaction-list.tsx
+++ b/src/entities/transaction/ui/all-transaction-list.tsx
@@ -2,7 +2,7 @@ import { AllTransactionListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';

 export const AllTransactionList = ({ 
-  pageType,
+  transactionCategory,
  listItems 
 }: AllTransactionListProps) => {
  
@@ -11,7 +11,7 @@ export const AllTransactionList = ({
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
          key={ key }
          date={ key }
          items={ value }
--- a/src/entities/transaction/ui/billing-list.tsx
+++ b/src/entities/transaction/ui/billing-list.tsx
@@ -4,7 +4,7 @@ import { BillingListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';

 export const BillingList = ({ 
-  pageType,
+  transactionCategory,
  listItems 
 }: BillingListProps) => {
  const { navigate } = useNavigate();
@@ -14,7 +14,7 @@ export const BillingList = ({
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
          key={ key }
          date={ key }
          items={ value }
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
+++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
@@ -2,11 +2,11 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';

-export const CashReceitHandWrittenIssuanceStep1 = () => {
+export const CashReceiptHandWrittenIssuanceStep1 = () => {
  const { navigate } = useNavigate();

  useSetOnBack(() => {
-    navigate(PATHS.transaction.cashReceit.list);
+    navigate(PATHS.transaction.cashReceipt.list);
  });
  return (
    <>
--- a/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
+++ b/src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
@@ -1,12 +1,12 @@
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';

-export interface CashReceitHandWrittenIssuanceStep2Props {
+export interface CashReceiptHandWrittenIssuanceStep2Props {
  setProcessStep: ((processStep: ProcessStep) => void);
 };
-export const CashReceitHandWrittenIssuanceStep2 = ({
+export const CashReceiptHandWrittenIssuanceStep2 = ({
  setProcessStep
-}: CashReceitHandWrittenIssuanceStep2Props) => {
+}: CashReceiptHandWrittenIssuanceStep2Props) => {
  useSetOnBack(() => {
    setProcessStep(ProcessStep.One);
  });
--- a/src/entities/transaction/ui/cash-receipt-list.tsx
+++ b/src/entities/transaction/ui/cash-receipt-list.tsx
@@ -1,12 +1,12 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { CashReceitListProps } from '../model/types';
+import { CashReceiptListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';

-export const CashReceitList = ({ 
-  pageType,
+export const CashReceiptList = ({ 
+  transactionCategory,
  listItems 
-}: CashReceitListProps) => {
+}: CashReceiptListProps) => {
  const { navigate } = useNavigate();
  
  const getListDateGroup = () => {
@@ -14,7 +14,7 @@ export const CashReceitList = ({
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
          key={ key }
          date={ key }
          items={ value }
@@ -25,7 +25,7 @@ export const CashReceitList = ({
  };

  const onClickToNavigate = () => {
-    navigate(PATHS.transaction.cashReceit.handWrittenIssuance);
+    navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
  };

  return (
--- a/src/entities/transaction/ui/escrow-list.tsx
+++ b/src/entities/transaction/ui/escrow-list.tsx
@@ -1,17 +1,17 @@
-import { EscroListProps } from '../model/types';
+import { EscrowListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';

-export const EscroList = ({ 
-  pageType,
+export const EscrowList = ({ 
+  transactionCategory,
  listItems 
-}: EscroListProps) => {
+}: EscrowListProps) => {
  
  const getListDateGroup = () => {
    let rs = [];
    for (const [key, value] of Object.entries(listItems)) {
      rs.push(
        <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
          key={ key }
          date={ key }
          items={ value }
--- a/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx
@@ -1,12 +1,11 @@
-import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
-import { useDownloadConfirmationMutation } from '../api/use-download-confirmation-mutation';
+import { DetailArrow } from '../detail-arrow';
+import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailAmountInfo = ({
-  pageType, 
+export const AmountInfoWrap = ({
+  transactionCategory, 
  amountInfo,
  show,
  tid,
@@ -20,7 +19,7 @@ export const DetailAmountInfo = ({

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Amount);
+      onClickToShowInfo(InfoWrapKeys.Amount);
    }
  };

--- a/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const DetailInfoWrap = ({
+  transactionCategory,
+  detailInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Issue);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};
--- a/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const EscrowInfoWrap = ({
+  transactionCategory,
+  escrowInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Escrow);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};
--- a/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/important-info-wrap.tsx
@@ -1,13 +1,19 @@
-import { NumericFormat } from 'react-number-format';
 import moment from 'moment';
-import { DetailInfoProps } from '../model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailImportantInfo = ({
-  pageType,
-  importantInfo
+export const ImportantInfoWrap = ({
+  transactionCategory,
+  importantInfo,
+  show,
+  onClickToShowInfo
 }: DetailInfoProps) => {

+   const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Important);
+    }
+  };
+
  return (
    <>
      <div className="txn-section">
--- a/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx
@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const IssueInfoWrap = ({
+  transactionCategory,
+  issueInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Issue);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};
--- a/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
@@ -1,11 +1,10 @@
-import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailPartCancelInfo = ({
-  pageType,
+export const PartCancelInfoWrap = ({
+  transactionCategory,
  partCancelInfo,
  show,
  onClickToShowInfo
@@ -18,7 +17,7 @@ export const DetailPartCancelInfo = ({

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.PartCancel);
+      onClickToShowInfo(InfoWrapKeys.PartCancel);
    }
  };
  
--- a/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailPaymentInfo = ({
-  pageType,
+export const PaymentInfoWrap = ({
+  transactionCategory,
  paymentInfo,
  show,
  onClickToShowInfo
@@ -15,7 +15,7 @@ export const DetailPaymentInfo = ({

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Payment);
+      onClickToShowInfo(InfoWrapKeys.Payment);
    }
  };
  
--- a/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
@@ -1,10 +1,10 @@
 import moment from 'moment';
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailSettlementInfo = ({
-  pageType,
+export const SettlementInfoWrap = ({
+  transactionCategory,
  settlementInfo,
  show,
  onClickToShowInfo
@@ -16,7 +16,7 @@ export const DetailSettlementInfo = ({

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Settlement);
+      onClickToShowInfo(InfoWrapKeys.Settlement);
    }
  };
  
--- a/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';

-export const DetailTransactionInfo = ({
-  pageType,
+export const TransactionInfoWrap = ({
+  transactionCategory,
  transactionInfo,
  show,
  onClickToShowInfo
@@ -15,7 +15,7 @@ export const DetailTransactionInfo = ({

  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Transaction);
+      onClickToShowInfo(InfoWrapKeys.Transaction);
    }
  };

--- a/src/entities/transaction/ui/list-date-group.tsx
+++ b/src/entities/transaction/ui/list-date-group.tsx
@@ -4,7 +4,7 @@ import { ListDateGroupProps } from '../model/types';
 import { ListItem } from './list-item';

 export const ListDateGroup = ({
-  pageType,
+  transactionCategory,
  date,
  items
 }: ListDateGroupProps) => {
@@ -21,9 +21,11 @@ export const ListDateGroup = ({
        let key = 'ListItem-'+i;
        rs.push(
          <ListItem
-            pageType={ pageType }
+            transactionCategory={ transactionCategory }
            key={ key }
            tid={ items[i]?.tid }
+            issueNumber={ items[i]?.issueNumber }
+            billKey={ items[i]?.billKey }
            mid={ items[i]?.mid }
            stateDate={ items[i]?.stateDate }
            stateCode={ items[i]?.stateCode }
--- a/src/entities/transaction/ui/list-item.tsx
+++ b/src/entities/transaction/ui/list-item.tsx
@@ -1,11 +1,13 @@
 import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { ListItemProps, PageType } from '../model/types';
+import { ListItemProps, TransactionCategory } from '../model/types';

 export const ListItem = ({
-  pageType,
+  transactionCategory,
  tid,
+  issueNumber,
+  billKey,
  mid,
  stateDate,
  stateCode,
@@ -46,31 +48,31 @@ export const ListItem = ({
  };

  const onClickToNavigate = () => {
-    if(pageType === PageType.AllTransaction){
-      navigate(PATHS.transaction.allTransaction.detail + tid, {
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      navigate(PATHS.transaction.allTransaction.detail, {
        state: {
          tid: tid
        }
      });
    }
-    else if(pageType === PageType.CashReceit){
-      navigate(PATHS.transaction.cashReceit.detail + tid, {
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      navigate(PATHS.transaction.cashReceipt.detail, {
        state: {
-          tid: tid
+          issueNumber: issueNumber
        }
      });
    }
-    else if(pageType === PageType.Escro){
-      navigate(PATHS.transaction.escro.detail + tid, {
+    else if(transactionCategory === TransactionCategory.Escrow){
+      navigate(PATHS.transaction.escrow.detail, {
        state: {
-          tid: tid
+          issueNumber: issueNumber
        }
      });
    }
-    else if(pageType === PageType.Billing){
-      navigate(PATHS.transaction.billing.detail + tid, {
+    else if(transactionCategory === TransactionCategory.Billing){
+      navigate(PATHS.transaction.billing.detail, {
        state: {
-          tid: tid
+          billKey: billKey
        }
      });
    }
--- a/src/entities/user/lib/use-user-info.ts
+++ b/src/entities/user/lib/use-user-info.ts
@@ -1,36 +1,21 @@
 import { LoginParams } from '@/entities/user/model/types';
 import { StorageKeys } from '@/shared/constants/local-storage';
-import { setLocalStorage, getLocalStorage } from '@/shared/lib/web-view-bridge';
+import { setLocalStorage } from '@/shared/lib/web-view-bridge';
 import { useLoginMutation } from '@/entities/user/api/use-login-mutation';
 import { useStore } from '~/shared/model/store';

 export const useUserInfo = () => {
  const { mutateAsync: login } = useLoginMutation();
 	const callLogin = async (params: LoginParams) => {
+		try{
 			useStore.getState().UserStore.resetUserInfo();
-		let appStart = getLocalStorage(StorageKeys.AppStart);
 			
-		if(!!appStart){
-			let tokenType = getLocalStorage(StorageKeys.TokenType);
-			let accessToken = getLocalStorage(StorageKeys.AccessToken);
-			let refreshToken = getLocalStorage(StorageKeys.RefreshToken);
-			let accessTokenExpiresIn = getLocalStorage(StorageKeys.AccessTokenExpiresIn);
-			let refreshTokenExpiresIn = getLocalStorage(StorageKeys.RefreshTokenExpiresIn);
-			let menuGrants = getLocalStorage(StorageKeys.TokenType);
-			let usrid = getLocalStorage(StorageKeys.Usrid);
+			const result = await login(params);
+			if(result.requires2FA){
+				// 2차인증 필요
 				
-			useStore.getState().UserStore.setUserInfo({
-				tokenType: tokenType,
-				accessToken: accessToken,
-				refreshToken: refreshToken,
-				accessTokenExpiresIn: accessTokenExpiresIn,
-				refreshTokenExpiresIn: refreshTokenExpiresIn,
-				menuGrants: menuGrants,
-				usrid: usrid
-			});
 			}
 			else{
-			login(params).then((result) => {
 				const { 
 					tokenType,
 					accessToken,
@@ -38,9 +23,10 @@ export const useUserInfo = () => {
 					accessTokenExpiresIn,
 					refreshTokenExpiresIn,
 					menuGrants,
-					usrid
+					usrid,
+					// clientAddressIP,
+					// requires2FA
 				} = result;
-
 				setLocalStorage(StorageKeys.TokenType, tokenType);
 				setLocalStorage(StorageKeys.AccessToken, accessToken);
 				setLocalStorage(StorageKeys.RefreshToken, refreshToken);
@@ -48,12 +34,15 @@ export const useUserInfo = () => {
 				setLocalStorage(StorageKeys.RefreshTokenExpiresIn, refreshTokenExpiresIn);
 				setLocalStorage(StorageKeys.MenuGrants, menuGrants);
 				setLocalStorage(StorageKeys.Usrid, usrid);
+				// setLocalStorage(StorageKeys.ClientAddressIP, clientAddressIP);
+				// setLocalStorage(StorageKeys.Requires2FA, requires2FA);

 				useStore.getState().UserStore.setUserInfo(result);
-			});
 			}
+		}
+		catch(e: any){
 	
-		
+		}
 	};
 	return {
 		callLogin,
--- a/src/pages/home/home-page.tsx
+++ b/src/pages/home/home-page.tsx
@@ -1,13 +1,15 @@
 import moment from 'moment';
 import { useCallback, useEffect, useState } from 'react';
-import { getLocalStorage } from '@/shared/lib';
-import { StorageKeys } from '@/shared/constants/local-storage';
 import { useUserInfo } from '@/entities/user/lib/use-user-info';
 import { FavoriteWrapper } from '@/entities/home/ui/favorite-wrapper';
 import { DayStatusBox } from '@/entities/home/ui/day-status-box';
 import { HomeBottomBanner } from '@/entities/home/ui/home-bottom-banner';
 import { AuthRegister } from '@/entities/home/ui/auth-reguster';
 import { FooterItemActiveKey } from '@/entities/common/model/types';
+import { useStore } from '@/shared/model/store';
+import { StorageKeys } from '@/shared/constants/local-storage';
+import { setLocalStorage, getLocalStorage } from '@/shared/lib/web-view-bridge';
+
 import { HeaderType } from '@/entities/common/model/types';
 import { 
 	useSetHeaderTitle,
@@ -44,9 +46,35 @@ export const HomePage = () => {
  };
  
  const handleLogin = useCallback(async () =>{
+    let appStart = getLocalStorage(StorageKeys.AppStart);
+
+    if(!!appStart){
+      useStore.getState().UserStore.resetUserInfo();
+      let tokenType = getLocalStorage(StorageKeys.TokenType);
+      let accessToken = getLocalStorage(StorageKeys.AccessToken);
+      let refreshToken = getLocalStorage(StorageKeys.RefreshToken);
+      let accessTokenExpiresIn = getLocalStorage(StorageKeys.AccessTokenExpiresIn);
+      let refreshTokenExpiresIn = getLocalStorage(StorageKeys.RefreshTokenExpiresIn);
+      let menuGrants = getLocalStorage(StorageKeys.TokenType);
+      let usrid = getLocalStorage(StorageKeys.Usrid);
+      
+      useStore.getState().UserStore.setUserInfo({
+        tokenType: tokenType,
+        accessToken: accessToken,
+        refreshToken: refreshToken,
+        accessTokenExpiresIn: accessTokenExpiresIn,
+        refreshTokenExpiresIn: refreshTokenExpiresIn,
+        menuGrants: menuGrants,
+        usrid: usrid
+      });
+      setLoginSuccess(true);
+    }
+    else{
      callLogin(userParmas).then(() => {
        setLoginSuccess(true);
      });
+    }
+    
  }, []);

  const checkBottomBannerOpen = () => {
--- 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;
    setPageParam(pageParam);
-    
-    let listParam = {
-      ...listSummaryParams,
-      ...{page: pageParam}
+    let listParams = {
+      mid: 'nictest001m',
+      searchType: 'ALL',
+			searchKeyword: 'P14633723',
+      startDate: startDate,
+      endDate: endDate,
+      requestStatus: 'ALL',
+      processResult: 'ALL',
+      paymentMethod: 'ALL',
+			pagination: 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;
    setPageParam(pageParam);
-    
 		let listParams = {
-      ...listSummaryParams,
-      ...{page: pageParam}
+      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;
    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 />} />
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -99,18 +99,7 @@ export const API_URL = {
    // POST: 거래 내역 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
  },
-  cashReceitList: () => {
-    // POST: 거래 내역 조회
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
-  },
-  escroList: () => {
-    // POST: 거래 내역 조회
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
-  },
-  billingList: () => {
-    // POST: 거래 내역 조회
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
-  },
+
  allTransactionListSummary: () => {
    // POST: 거래 내역 합계 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list/summary`;
@@ -127,18 +116,6 @@ export const API_URL = {
    // POST: 거래내역 상세
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
  },
-  cashReceitDetail: () => {
-    // POST: 현금영수증 상세
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
-  },
-  escroDetail: () => {
-    // POST: 에스크로 상세
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
-  },
-  billingDetail: () => {
-    // POST: 빌링 상세
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
-  },
  allTransactionCancel: () => {
    // POST: 거래취소 요청
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/cancel`;
@@ -148,6 +125,55 @@ export const API_URL = {
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/cancel-info`;
  },

+
+  /* Cash Receipt Management - 현금영수증 API */
+  cashReceiptList: () => {
+    // POST: 현금영수증 목록 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/cash-receipt/list`;
+  },
+  cashReceiptDetail: () => {
+    // POST: 현금영수증 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/cash-receipt/detail`;
+  },
+  cashReceiptPurposeUpdate: () => {
+    // POST: 현금영수증 용도 변경
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/cash-receipt/purpose/update`;
+  },
+  cashReceiptManualIssue: () => {
+    // POST: 현금영수증 용도 변경
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/cash-receipt/manual/issue`;
+  },
+  
+
+  /* Escro Management - 에스크로 API */
+  escrowList: () => {
+    // POST: 에스크로 목록 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/list`;
+  },
+  escrowDetail: () => {
+    // POST: 에스크로 목록 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/detail`;
+  },
+  escroMailResend: () => {
+    // POST: 에스크로 메일 재발송
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/escrows/mail/resend`;
+  },
+  
+
+  /* Billing Management - 빌링 API */
+  billingList: () => {
+    // POST: 빌링 목록 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/billing/list`;
+  },
+  billingDetail: () => {
+    // POST: 빌링 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/billing/detail`;
+  },
+  billingCharge: () => {
+    // POST: 빌링 결제 신청
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/billing/charge`;
+  },
+
  settlementList: () => {
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
  },
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -29,30 +29,30 @@ export const PATHS: RouteNamesType = {
        ROUTE_NAMES.transaction.allTransaction.cancel,
      ),
    },
-    cashReceit: {
-      base: generatePath(`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceit.base}`),
+    cashReceipt: {
+      base: generatePath(`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`),
      list: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceit.base}`,
-        ROUTE_NAMES.transaction.cashReceit.list,
+        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
+        ROUTE_NAMES.transaction.cashReceipt.list,
      ),
      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceit.base}`,
-        ROUTE_NAMES.transaction.cashReceit.detail,
+        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
+        ROUTE_NAMES.transaction.cashReceipt.detail,
      ),
      handWrittenIssuance: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceit.base}`,
-        ROUTE_NAMES.transaction.cashReceit.handWrittenIssuance,
+        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.cashReceipt.base}`,
+        ROUTE_NAMES.transaction.cashReceipt.handWrittenIssuance,
      ),
    },
-    escro: {
-      base: generatePath(`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escro.base}`),
+    escrow: {
+      base: generatePath(`${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escrow.base}`),
      list: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escro.base}`,
-        ROUTE_NAMES.transaction.escro.list,
+        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escrow.base}`,
+        ROUTE_NAMES.transaction.escrow.list,
      ),
      detail: generatePath(
-        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escro.base}`,
-        ROUTE_NAMES.transaction.escro.detail,
+        `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.escrow.base}`,
+        ROUTE_NAMES.transaction.escrow.detail,
      ),
    },
    billing: {
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -5,24 +5,24 @@ export const ROUTE_NAMES = {
    allTransaction: {
      base: '/all-transaction/*',
      list: 'list',
-      detail: 'detail/:tid',
+      detail: 'detail',
      cancel: 'cancel',
    },
-    cashReceit: {
-      base: '/cash-receit/*',
+    cashReceipt: {
+      base: '/cash-receipt/*',
      list: 'list',
-      detail: 'detail/:tid',
+      detail: 'detail',
      handWrittenIssuance: 'hand-written-issuance',
    },
-    escro: {
-      base: '/escro/*',
+    escrow: {
+      base: '/escrow/*',
      list: 'list',
-      detail: 'detail/:tid',
+      detail: 'detail',
    },
    billing: {
      base: '/billing/*',
      list: 'list',
-      detail: 'detail/:tid',
+      detail: 'detail',
      paymentRequest: 'payment-request',
    }
  },
@@ -120,7 +120,7 @@ export const ROUTE_NAMES = {
    notice: {
      base: '/notice/*',
      list: 'list',
-      detail: 'detail/:noticeId',
+      detail: 'detail',
    },
    faq: {
      base: '/faq/*',
--- a/src/shared/ui/menu/index.tsx
+++ b/src/shared/ui/menu/index.tsx
@@ -32,8 +32,8 @@ export const Menu = ({
      categoryIcon: 'transaction-icon',
      items: [
        {title: '거래내역 조회', path: PATHS.transaction.allTransaction.list},
-        {title: '현금영수증 발행', path: PATHS.transaction.cashReceit.list},
-        {title: '에스크로', path: PATHS.transaction.escro.list},
+        {title: '현금영수증 발행', path: PATHS.transaction.cashReceipt.list},
+        {title: '에스크로', path: PATHS.transaction.escrow.list},
        {title: '빌링', path: PATHS.transaction.billing.list}
      ]
    },