거래내역 관련

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 {

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,
+  };
+};

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,
-  };
-};

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,
-  };
-};

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,
-  };
-};

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 {

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,
+  };
+};

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;

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 }

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 }

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 (
     <>

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

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 (

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 }

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

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

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

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">

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

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

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

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

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

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 }

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