첫 커밋

src/entities/transaction/api/use-all-transaction-cancel-info-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 { 
+  AllTransactionCancelInfoParams,
+  AllTransactionCancelInfoResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const allTransactionCancelInfo = (params: AllTransactionCancelInfoParams) => {
+  return resultify(
+    axios.post<AllTransactionCancelInfoResponse>(API_URL.allTransactionCancelInfo(), params),
+  );
+};
+
+export const useTransactioCancleInfonMutation = (options?: UseMutationOptions<AllTransactionCancelInfoResponse, CBDCAxiosError, AllTransactionCancelInfoParams>) => {
+  const mutation = useMutation<AllTransactionCancelInfoResponse, CBDCAxiosError, AllTransactionCancelInfoParams>({
+    ...options,
+    mutationFn: (params: AllTransactionCancelInfoParams) => allTransactionCancelInfo(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-all-transaction-cancel-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 { 
+  AllTransactionCancelParams,
+  AllTransactionCancelResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const allTransactionCancel = (params: AllTransactionCancelParams) => {
+  return resultify(
+    axios.post<AllTransactionCancelResponse>(API_URL.allTransactionCancel(), params),
+  );
+};
+
+export const useAllTransactioCancleMutation = (options?: UseMutationOptions<AllTransactionCancelResponse, CBDCAxiosError, AllTransactionCancelParams>) => {
+  const mutation = useMutation<AllTransactionCancelResponse, CBDCAxiosError, AllTransactionCancelParams>({
+    ...options,
+    mutationFn: (params: AllTransactionCancelParams) => allTransactionCancel(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-all-transaction-detail-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 { 
+  AllTransactionDetailParams,
+  DetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const allTransactionDetail = (params: AllTransactionDetailParams) => {
+  return resultify(
+    axios.post<DetailResponse>(API_URL.allTransactionDetail(), params),
+  );
+};
+
+export const useAllTransactionDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, AllTransactionDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, AllTransactionDetailParams>({
+    ...options,
+    mutationFn: (params: AllTransactionDetailParams) => allTransactionDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-all-transaction-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 { 
+  AllTransactionListParams,
+  AllTransactionListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const allTransactionList = (params: AllTransactionListParams) => {
+  return resultify(
+    axios.post<AllTransactionListResponse>(API_URL.allTransactionList(), params),
+  );
+};
+
+export const useAllTransactionListMutation = (options?: UseMutationOptions<AllTransactionListResponse, CBDCAxiosError, AllTransactionListParams>) => {
+  const mutation = useMutation<AllTransactionListResponse, CBDCAxiosError, AllTransactionListParams>({
+    ...options,
+    mutationFn: (params: AllTransactionListParams) => allTransactionList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-all-transaction-list-summary-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 { 
+  AllTransactionListSummaryParams,
+  AllTransactionListSummaryResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const allTransactionListSummary = (params: AllTransactionListSummaryParams) => {
+  return resultify(
+    axios.post<AllTransactionListSummaryResponse>(API_URL.allTransactionListSummary(), params),
+  );
+};
+
+export const useAllTransactionListSummaryMutation = (options?: UseMutationOptions<AllTransactionListSummaryResponse, CBDCAxiosError, AllTransactionListSummaryParams>) => {
+  const mutation = useMutation<AllTransactionListSummaryResponse, CBDCAxiosError, AllTransactionListSummaryParams>({
+    ...options,
+    mutationFn: (params: AllTransactionListSummaryParams) => allTransactionListSummary(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-billing-detail-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 { 
+  BillingDetailParams,
+  DetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const billingDetail = (params: BillingDetailParams) => {
+  return resultify(
+    axios.post<DetailResponse>(API_URL.billingDetail(), params),
+  );
+};
+
+export const useBillingDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, BillingDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, BillingDetailParams>({
+    ...options,
+    mutationFn: (params: BillingDetailParams) => billingDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-billing-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 { 
+  BillingListParams,
+  BillingListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const billingList = (params: BillingListParams) => {
+  return resultify(
+    axios.post<BillingListResponse>(API_URL.billingList(), params),
+  );
+};
+
+export const useBillingListMutation = (options?: UseMutationOptions<BillingListResponse, CBDCAxiosError, BillingListParams>) => {
+  const mutation = useMutation<BillingListResponse, CBDCAxiosError, BillingListParams>({
+    ...options,
+    mutationFn: (params: BillingListParams) => billingList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-cash-receit-detail-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 { 
+  CashReceitDetailParams,
+  DetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const cashReceitDetail = (params: CashReceitDetailParams) => {
+  return resultify(
+    axios.post<DetailResponse>(API_URL.cashReceitDetail(), params),
+  );
+};
+
+export const useCashReceitDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, CashReceitDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, CashReceitDetailParams>({
+    ...options,
+    mutationFn: (params: CashReceitDetailParams) => cashReceitDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-cash-receit-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 { 
+  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

@@ -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 { 
+  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-download-confirmation-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 { 
+  DownloadConfirmationParams,
+  DownloadConfirmationResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const downloadConfirmation = (params: DownloadConfirmationParams) => {
+  return resultify(
+    axios.post<DownloadConfirmationResponse>(API_URL.downloadConfirmation(), params),
+  );
+};
+
+export const useDownloadConfirmationMutation = (options?: UseMutationOptions<DownloadConfirmationResponse, CBDCAxiosError, DownloadConfirmationParams>) => {
+  const mutation = useMutation<DownloadConfirmationResponse, CBDCAxiosError, DownloadConfirmationParams>({
+    ...options,
+    mutationFn: (params: DownloadConfirmationParams) => downloadConfirmation(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-download-excel-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 { 
+  DownloadExcelParams,
+  DownloadExcelResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const downloadExcel = (params: DownloadExcelParams) => {
+  return resultify(
+    axios.post<DownloadExcelResponse>(API_URL.downloadExcel(), params),
+  );
+};
+
+export const useDownloadExcelMutation = (options?: UseMutationOptions<DownloadExcelResponse, CBDCAxiosError, DownloadExcelParams>) => {
+  const mutation = useMutation<DownloadExcelResponse, CBDCAxiosError, DownloadExcelParams>({
+    ...options,
+    mutationFn: (params: DownloadExcelParams) => downloadExcel(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-escro-detail-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 { 
+  EscroDetailParams,
+  DetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const escroDetail = (params: EscroDetailParams) => {
+  return resultify(
+    axios.post<DetailResponse>(API_URL.escroDetail(), params),
+  );
+};
+
+export const useEscroDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, EscroDetailParams>) => {
+  const mutation = useMutation<DetailResponse, CBDCAxiosError, EscroDetailParams>({
+    ...options,
+    mutationFn: (params: EscroDetailParams) => escroDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/transaction/api/use-escro-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 { 
+  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/model/types.ts

@@ -0,0 +1,336 @@
+import { DefaulResponsePagination } from '@/entities/common/model/types';
+
+export enum CancelTabKeys {
+  All = 'All',
+  Part = 'Part'
+};
+export enum AltMsgKeys {
+  Fold = '접기',
+  UnFold = '펼치기',
+};
+export enum SortByKeys {
+  New = 'New',
+  Amount = 'Amount',
+};
+export enum PageType {
+  AllTransaction = 'AllTransaction',
+  CashReceit = 'CashReceit',
+  Escro = 'Escro',
+  Billing = 'Billing',
+};
+export enum DetailInfoKeys {
+  Amount = 'Amount',
+  Payment = 'Payment',
+  Transaction = 'Transaction',
+  Settlement = 'Settlement',
+  PartCancel = 'PartCancel',
+};
+export enum ProcessStep {
+  One = 'One',
+  Two = 'Two',
+};
+export interface SortOptionsBoxProps {
+  sortBy: SortByKeys;
+  onCliCkToSort: (sortBy: SortByKeys) => void;
+};
+export interface ListItemProps extends ListItem{
+  pageType?: PageType;
+};
+export interface ListDateGroupProps {
+  pageType?: PageType;
+  date?: string;
+  items?: Array<ListItemProps>;
+};
+export interface AllTransactionListProps {
+  pageType: PageType;
+  listItems: Record<string, Array<ListItemProps>>
+};
+export interface CashReceitListProps {
+  pageType: PageType;
+  listItems: Record<string, Array<ListItemProps>>
+};
+export interface EscroListProps {
+  pageType: PageType;
+  listItems: Record<string, Array<ListItemProps>>
+};
+export interface BillingListProps {
+  pageType: PageType;
+  listItems: Record<string, Array<ListItemProps>>
+};
+export interface ListItem {
+  tid?: string;
+  mid?: string;
+  stateDate?: string;
+  stateCode?: string;
+  stateName?: string;
+  installmentMonth?: string;
+  serviceCode?: string;
+  serviceName?: string;
+  serviceDetailName?: string;
+  goodsAmount?: number;
+};
+export interface AllTransactionListResponse extends DefaulResponsePagination {
+  content: Array<ListItemProps>;
+};
+export interface CashReceitListResponse extends DefaulResponsePagination {
+  content: Array<ListItemProps>;
+};
+export interface EscroListResponse 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 {
+  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;
+};
+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 DetailTransactionInfoProps {
+  buyerName: string;
+  email: string;
+  phoneNumber: string;
+  cancelReason: string;
+  cancelRequestor: string;
+  partialCancel: string;
+  cashReceiptIssue: string;
+};
+export interface DetailSettlementInfoProps {
+  approvalSettleDate: string;
+  approvalSettleAmount: number;
+  cancelSettleDate: string;
+  cancelSettleAmount: number;
+};
+export interface DetailPartCancelInfoProps {
+  originalTid: string;
+  originalAmount: number;
+  partCancelTid: string;
+  partCancelAmount: number;
+  remainingAmount: number;
+};
+
+export interface DetailResponse {
+  amountInfo?: DetailAmountInfoProps;
+  importantInfo?: DetailImportantInfoProps;
+  paymentInfo?: DetailPaymentInfoProps;
+  transactionInfo?: DetailTransactionInfoProps;
+  settlementInfo?: DetailSettlementInfoProps;
+  partCancelInfo?: DetailPartCancelInfoProps;
+};
+
+export interface DetailInfoProps extends DetailResponse{
+  pageType: PageType;
+  show?: boolean;
+  tid?: string;
+  onClickToShowInfo?: (info: DetailInfoKeys) => void;
+}
+export interface DetailArrowProps {
+  show?: boolean;
+};
+
+export interface DownloadConfirmationParams extends TransactionRequestParams {
+  
+};
+export interface DownloadConfirmationResponse {
+
+};
+
+export interface DownloadExcelParams extends TransactionRequestParams {
+
+};
+export interface DownloadExcelResponse {
+
+};
+export interface AllTransactionCancelParams extends TransactionRequestParams {
+  cancelAmount: number;
+  cancelPassword: string;
+  bankCode: string;
+  accountNo: string;
+  accountHolder: string;
+  supplyAmount: number;
+  goodsVatAmount: number;
+  taxFreeAmount: number;
+  serviceAmount: number;
+};
+export interface AllTransactionCancelResponse {
+  
+};
+export interface AllTransactionCancelInfoParams extends TransactionRequestParams {
+
+};
+export interface AllTransactionCancelInfoResponse {
+  remainAmount: number;
+  partCancelCl: boolean;
+  isCompoundTax: boolean;
+  supplyAmount: number;
+  goodsVatAmount: number;
+  taxFreeAmount: number;
+  serviceAmount: number;
+};
+export interface FilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+}

src/entities/transaction/ui/all-transaction-all-cancel.tsx

@@ -0,0 +1,59 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+export const AllTransactionAllCancel = () => {
+  
+  return (
+    <>
+      <div className="form-section">
+        <div className="form-group">
+          <label className="form-label">취소 비밀번호</label>
+          <div className="input-wrapper wid-100 error">
+            <input 
+              className="wid-100 align-right" 
+              type="password" 
+              value="2736356352" 
+            />
+          </div>
+        </div>
+        <div className="error-msg">비밀번호 불일치</div>
+
+        <div className="form-group">
+          <label className="form-label">은행</label>
+          <div className="input-wrapper wid-100">
+            <select className="wid-100 align-right">
+              <option>선택</option>
+              <option>KB국민은행</option>
+              <option>22323213123</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="form-label">계좌번호</label>
+          <div className="input-wrapper wid-100">
+            <input 
+              className="form-input wid-100" 
+              type="text" 
+              placeholder="" 
+            />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="form-label">예금주</label>
+          <div className="input-wrapper wid-100">
+            <input 
+              className="form-input  wid-100" 
+              type="text" 
+              placeholder="" 
+            />
+          </div>
+        </div>
+
+        <div className="notice-text wid-100">
+          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
+        </div>
+    </div>
+    </>
+  );
+};

src/entities/transaction/ui/all-transaction-list.tsx

@@ -0,0 +1,31 @@
+import { AllTransactionListProps } from '../model/types';
+import { ListDateGroup } from './list-date-group';
+
+export const AllTransactionList = ({ 
+  pageType,
+  listItems 
+}: AllTransactionListProps) => {
+  
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          pageType={ pageType }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+      </div>  
+    </>
+  );
+};

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -0,0 +1,124 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+
+export const AllTransactionPartCancel = () => {
+  
+
+  return (
+    <>
+      <div className="tb_both">
+        <table className="partial-cancel-table">
+          <colgroup>
+            <col width="30%" />
+            <col width="30%" />
+            <col width="40%" />
+          </colgroup>
+          <thead>
+            <tr>
+              <th className="header-empty"></th>
+              <th className="header-balance">잔액</th>
+              <th className="header-cancel">취소금액</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="row-label">과세액</td>
+              <td className="row-balance">555,550,000</td>
+              <td className="row-cancel">
+                <input 
+                  className="cancel-input"
+                  type="text"
+                  value=""
+                />
+              </td>
+            </tr>
+              <tr>
+                <td className="row-label">부가세</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="row-label">면세</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+              <tr>
+                <td className="row-label">봉사료</td>
+                <td className="row-balance">50,000</td>
+                <td className="row-cancel">
+                  <input 
+                    className="cancel-input"
+                    type="text"
+                    placeholder=""
+                  />
+                </td>
+              </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div className="form-section">
+        <div className="form-group">
+          <label className="form-label">취소 비밀번호</label>
+          <div className="input-wrapper wid-100 error">
+            <input 
+              className="wid-100 align-right"
+              type="password"
+              value=""
+            />
+          </div>
+        </div>
+        <div className="error-msg">비밀번호 불일치</div>
+
+        <div className="form-group">
+          <label className="form-label">은행</label>
+          <div className="input-wrapper wid-100">
+            <select className="wid-100 align-right">
+              <option>선택</option>
+              <option>KB국민은행</option>
+              <option>22323213123</option>
+            </select>
+          </div>
+        </div>
+    
+        <div className="form-group">
+          <label className="form-label">계좌번호</label>
+          <div className="input-wrapper wid-100">
+            <input 
+              className="form-input wid-100"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+
+        <div className="form-group">
+          <label className="form-label">예금주</label>
+          <div className="input-wrapper wid-100">
+            <input
+              className="form-input  wid-100"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+
+        <div className="notice-text wid-100">
+          <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
+        </div>
+      </div>  
+    </>
+  );
+};

src/entities/transaction/ui/billing-list.tsx

@@ -0,0 +1,44 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { BillingListProps } from '../model/types';
+import { ListDateGroup } from './list-date-group';
+
+export const BillingList = ({ 
+  pageType,
+  listItems 
+}: BillingListProps) => {
+  const { navigate } = useNavigate();
+  
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          pageType={ pageType }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.transaction.billing.paymentRequest);
+  };
+  
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+        <div className="apply-row bottom-padding">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }          
+          >결제 신청</button>
+        </div>
+      </div>  
+    </>
+  );
+};

src/entities/transaction/ui/bottom-sheet-changes-cash-receit-uses.tsx

@@ -0,0 +1,43 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+export const BottomSheetChangesCashReceitUses = () => {
+
+  return (
+    <>
+      <div className="bg-dim"></div>
+      <div className="bottomsheet">
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>신청 방법을 선택하세요</h2>
+            <button
+              className="close-btn"
+              type="button"
+            >
+              <img
+                src={ IMAGE_ROOT + '/ico_close.svg' }
+                alt="닫기"
+              />
+            </button>
+          </div>
+        </div>
+
+        <div className="bottomsheet-content">
+          <div className="bottom-section">
+            <p>현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다. </p>
+            <ul className="list-style-circle">
+              <li>지출증빙용 → 소득공제용</li>
+              <li>소득공제용 → 지출증빙용</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+          >신청</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/bottom-sheet-email.tsx

@@ -0,0 +1,63 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+export const BottomSheetEmail = () => {
+
+  return (
+    <>
+      <div className="bg-dim"></div>
+      <div className="bottomsheet">
+        <div className="bottomsheet-header">
+          <div className="bottomsheet-title">
+            <h2>이메일 주소를 선택하세요</h2>
+            <button
+              className="close-btn"
+              type="button"
+            >
+              <img
+                src={ IMAGE_ROOT + '/ico_close.svg' }
+                alt="닫기"
+              />
+            </button>
+          </div>
+        </div>
+
+        <div className="bottomsheet-content">
+          <div className="email-section">
+            <div className="email-label">
+              <div className="mail-icon">
+                <div className="mail-icon-bg"></div>
+                <img
+                  src="../images/ico_email.svg"
+                  alt="메일"
+                />
+              </div>
+              <span className="label-text">메일로 받기</span>
+            </div>
+              
+            <div className="email-select">
+              <div className="select-wrapper">
+                <select>
+                  <option>선택</option>
+                  <option>선택1</option>
+                  <option>선택2</option>
+                </select>
+              </div>
+            </div>
+              
+            <div className="error-message">
+              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="bottomsheet-footer">
+          <button
+            className="btn-50 btn-blue flex-1"
+            type="button"
+            disabled
+          >신청</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/cash-receit-hand-written-issuance-step1.tsx

@@ -0,0 +1,90 @@
+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 = () => {
+  const { navigate } = useNavigate();
+
+  useSetOnBack(() => {
+    navigate(PATHS.transaction.cashReceit.list);
+  });
+  return (
+    <>
+      <h2 className="issue-title">발행 정보 입력</h2>
+      <div className="issue-form">
+        <div className="issue-row">
+          <div className="issue-label">사업자 번호</div>
+          <div className="issue-field">
+            <input 
+              className="error"
+              type="text"
+              value="123456789"
+              disabled={ true }
+            />
+          </div>
+        </div>
+
+        <div className="issue-row">
+          <div className="issue-label">용도</div>
+          <div className="issue-field">
+            <div className="seg-buttons">
+              <button
+                className="btn-40 btn-blue"
+                type="button"
+              >소득공제</button>
+              <button
+                className="btn-40 btn-white"
+                type="button"
+              >지출증빙</button>
+            </div>
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">상품명</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="상품명"
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">구매자</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="구매자명"
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">발행번호</div>
+          <div className="issue-field">
+            <input 
+              type="text" 
+              placeholder="사업자번호 OR 휴대폰번호"
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">이메일 주소</div>
+          <div className="issue-field">
+            <input
+              type="email"
+              placeholder="TEST123@nicepay.com"
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">전화번호</div>
+          <div className="issue-field">
+            <input
+              type="tel"
+              placeholder="01012345678"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/cash-receit-hand-written-issuance-step2.tsx

@@ -0,0 +1,81 @@
+import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
+import { ProcessStep } from '../model/types';
+
+export interface CashReceitHandWrittenIssuanceStep2Props {
+  setProcessStep: ((processStep: ProcessStep) => void);
+};
+export const CashReceitHandWrittenIssuanceStep2 = ({
+  setProcessStep
+}: CashReceitHandWrittenIssuanceStep2Props) => {
+  useSetOnBack(() => {
+    setProcessStep(ProcessStep.One);
+  });
+  return (
+    <>
+      <h2 className="issue-title">발행 금액 입력</h2>
+
+      <div className="issue-form">
+        <div className="issue-row">
+          <div className="issue-label">발행금액</div>
+          <div className="issue-field">
+            <div className="seg-buttons">
+              <input 
+                type="text" 
+                value="555,555,555" 
+                readOnly={ true }
+              />
+              <button
+                className="btn-40 btn-white"
+                type="button"
+              >VAT자동계산</button>
+            </div>
+          </div>
+        </div>
+
+        <div className="issue-row">
+          <div className="issue-label">공급가액</div>
+          <div className="issue-field">
+            <input
+              className="error"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">VAT</div>
+          <div className="issue-field">
+            <input
+              className="error"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">발행번호</div>
+          <div className="issue-field">
+            <input
+              className="error"
+              type="text"
+              placeholder=""
+            />
+          </div>
+        </div>
+        <div className="issue-row">
+          <div className="issue-label">이메일 주소</div>
+          <div className="issue-field">
+            <input
+              type="email"
+              className="error"
+              placeholder=""
+            />
+          </div>
+        </div>
+        <div className="issue-note error">
+          발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다.
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/cash-receit-list.tsx

@@ -0,0 +1,44 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { CashReceitListProps } from '../model/types';
+import { ListDateGroup } from './list-date-group';
+
+export const CashReceitList = ({ 
+  pageType,
+  listItems 
+}: CashReceitListProps) => {
+  const { navigate } = useNavigate();
+  
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          pageType={ pageType }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    navigate(PATHS.transaction.cashReceit.handWrittenIssuance);
+  };
+
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+        <div className="apply-row bottom-padding">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigate() }          
+          >수기발행</button>
+        </div>
+      </div>  
+    </>
+  );
+};

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

@@ -0,0 +1,122 @@
+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';
+
+export const DetailAmountInfo = ({
+  pageType, 
+  amountInfo,
+  show,
+  tid,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
+  const variants = {
+    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
+    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(DetailInfoKeys.Amount);
+    }
+  };
+
+  const onClickToDownloadConfirmation = () => {
+    if(!!tid){
+      downloadConfirmation({
+        tid: tid
+      }).then((rs) => {
+        alert('거래확인서 다운 성공');
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-num-group">
+        <div className="txn-amount">
+          <div className="value">
+            <NumericFormat
+              value={ amountInfo?.amount } 
+              thousandSeparator
+              displayType="text"
+            ></NumericFormat>
+            <span className="unit">원</span>
+          </div>
+          <button 
+            className="chip-btn" 
+            type="button"
+            onClick={ () => onClickToSetShowInfo() }
+          >
+            금액상세 <DetailArrow show={ show }></DetailArrow>
+          </button>
+        </div>
+      
+        <motion.div 
+          className="amount-expand"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <ul className="amount-list">
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;신용카드</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.cardAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;포인트</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.pointAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;쿠폰</span>
+              <span className="value minus">
+                <NumericFormat
+                  value={ amountInfo?.couponAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;에스크로</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.escrowFee } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+          </ul>
+        </motion.div>
+        
+        <div className="txn-mid">
+          <span className="value">{ amountInfo?.mid }</span>
+        </div>
+        <div className="txn-doc">
+          <button 
+            className="doc-btn" 
+            type="button"
+            onClick={ () => onClickToDownloadConfirmation() }
+          >거래 확인서</button>
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/detail-arrow.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { AltMsgKeys, DetailArrowProps } from '../model/types';
+
+export const DetailArrow = ({ show }: DetailArrowProps) => {
+  const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
+  const [className, setClassName] = useState<string>('ic20 rot-180');
+
+  useEffect(() => {
+    setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
+    setClassName(`ic20 ${(show)? 'rot-180': ''}`);
+  }, [show]);
+
+  return (
+    <>
+      <img
+        className={ className }
+        src={ IMAGE_ROOT + '/select_arrow.svg' } 
+        alt={ altMsg }
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,52 @@
+import { NumericFormat } from 'react-number-format';
+import moment from 'moment';
+import { DetailInfoProps } from '../model/types';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+
+export const DetailImportantInfo = ({
+  pageType,
+  importantInfo
+}: DetailInfoProps) => {
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">중요 정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">주문번호</span>
+            <span className="v">{ importantInfo?.ordNo }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ importantInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제상태</span>
+            <span className="v">{ importantInfo?.tradeStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제수단</span>
+            <span className="v">{ importantInfo?.tradeMethod }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인일</span>
+            <span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+          </li>
+          {
+            /*
+          <li className="kv-row">
+            <span className="k">취소일</span>
+            <span className="v">2025.06.08</span>
+          </li>
+            */
+          }
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ importantInfo?.productName }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,79 @@
+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';
+
+export const DetailPartCancelInfo = ({
+  pageType,
+  partCancelInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(DetailInfoKeys.PartCancel);
+    }
+  };
+  
+  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 }}
+        >
+          <li className="kv-row">
+            <span className="k">원거래 TID</span>
+            <span className="v">{ partCancelInfo?.originalTid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">원거래 금액</span>
+            <span className="v">
+              <NumericFormat
+                value={ partCancelInfo?.originalAmount } 
+                thousandSeparator
+                displayType="text"
+                suffix={ '원' }
+              ></NumericFormat>
+            </span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부분취소 TID</span>
+            <span className="v">nictest00m01012506171629294150</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부분취소 금액</span>
+            <span className="v">50,000원</span>
+          </li>
+          <li className="kv-row nopadding">
+            <span className="k">부분취소 후 잔액</span>
+            <span className="v">
+              <NumericFormat
+                value={ partCancelInfo?.remainingAmount } 
+                thousandSeparator
+                displayType="text"
+                suffix={ '원' }
+              ></NumericFormat>
+            </span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { DetailInfoKeys, DetailInfoProps } from '../model/types';
+import { DetailArrow } from './detail-arrow';
+
+export const DetailPaymentInfo = ({
+  pageType,
+  paymentInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(DetailInfoKeys.Payment);
+    }
+  };
+  
+  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 }}
+        >
+          <li className="kv-row">
+            <span className="k">승인 금액</span>
+            <span className="v">10,000,000원</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부가세</span>
+            <span className="v">0원</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,51 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailInfoKeys, DetailInfoProps } from '../model/types';
+import { DetailArrow } from './detail-arrow';
+
+export const DetailSettlementInfo = ({
+  pageType,
+  settlementInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(DetailInfoKeys.Settlement);
+    }
+  };
+  
+  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 }}
+        >
+          <li className="kv-row">
+            <span className="k">정산 예정일</span>
+            <span className="v">{ moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">정산 상태</span>
+            <span className="v">예정</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { DetailInfoKeys, DetailInfoProps } from '../model/types';
+import { DetailArrow } from './detail-arrow';
+
+export const DetailTransactionInfo = ({
+  pageType,
+  transactionInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(DetailInfoKeys.Transaction);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
+        <div 
+          className="section-title with-toggle"
+          
+        >
+          거래 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">가맹점명</span>
+            <span className="v">NICE PAY</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자번호</span>
+            <span className="v">123-45-67890</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

src/entities/transaction/ui/escro-list.tsx

@@ -0,0 +1,31 @@
+import { EscroListProps } from '../model/types';
+import { ListDateGroup } from './list-date-group';
+
+export const EscroList = ({ 
+  pageType,
+  listItems 
+}: EscroListProps) => {
+  
+  const getListDateGroup = () => {
+    let rs = [];
+    for (const [key, value] of Object.entries(listItems)) {
+      rs.push(
+        <ListDateGroup
+          pageType={ pageType }
+          key={ key }
+          date={ key }
+          items={ value }
+        ></ListDateGroup>
+      );  
+    }
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="transaction-list">
+        { getListDateGroup() }
+      </div>  
+    </>
+  );
+};

src/entities/transaction/ui/filter.tsx

@@ -0,0 +1,187 @@
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterProps } from '../model/types';
+import { motion } from 'framer-motion';
+
+export const Filter = ({
+  filterOn,
+  setFilterOn
+}: FilterProps) => {
+
+  const variants = {
+    hidden: { x: '100%' },
+    visible: { x: '0%' },
+  };
+
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ variants }
+        transition={{ duration: 0.3 }}
+        style={{
+          width: '100%',
+          height: '100%',
+        }}
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+      
+          <div className="option-list pb-120">
+            <div className="opt-field">
+              <div className="opt-label">가맹점</div>
+              <div className="opt-controls">
+                <select className="flex-1">
+                  <option>nictest001m</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="opt-field">
+              <div className="opt-label">주문번호/ID</div>
+              <div className="opt-controls">
+                <select className="w-110">
+                  <option>주문번호</option>
+                  <option>ID</option>
+                </select>
+                <input
+                  className="flex-1"
+                  type="text"
+                  placeholder=""
+                />
+              </div>
+            </div>
+
+            <div className="opt-field">
+              <div className="opt-label">조회기간</div>
+              <div className="opt-controls col below h36">
+                <div className="chip-row">
+                  <span className="keyword-tag active">당일</span>
+                  <span className="keyword-tag">일주일</span>
+                  <span className="keyword-tag">1개월</span>
+                  <span className="keyword-tag">직접입력</span>
+                </div>
+                <div className="range-row">
+                  <div className="input-wrapper date">
+                    <input
+                      className="date-input"
+                      type="text"
+                      placeholder="날짜 선택"
+                      value="2025.06.08"
+                      readOnly={ true }
+                    />
+                    <button
+                      type="button"
+                      className="date-btn"
+                    >
+                      <img
+                        src={ IMAGE_ROOT + '/ico_date.svg' }
+                        alt="날짜 선택"
+                      />
+                    </button>
+                  </div>
+                  <span className="beetween">~</span>
+                  <div className="input-wrapper date">
+                    <input
+                      className="date-input"
+                      type="text"
+                      placeholder="날짜 선택"
+                      value="2025.06.08"
+                      readOnly={ true }
+                    />
+                    <button 
+                      type="button" 
+                      className="date-btn"
+                    >
+                      <img
+                        src={ IMAGE_ROOT + '/ico_date.svg' }
+                        alt="날짜 선택"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+           <div className="opt-field">
+              <div className="opt-label">요청상태</div>
+              <div className="opt-controls col below h36">
+                <div className="chip-row">
+                  <span className="keyword-tag active">전체</span>
+                  <span className="keyword-tag">진행중</span>
+                  <span className="keyword-tag">성공</span>
+                  <span className="keyword-tag">요청취소</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="opt-field">
+              <div className="opt-label">저리결과</div>
+              <div className="opt-controls col below h36">
+                <div className="chip-row">
+                  <span className="keyword-tag active">전체</span>
+                  <span className="keyword-tag">성공</span>
+                  <span className="keyword-tag">실패</span>
+                  <span 
+                    className="keyword-tag" 
+                    style={{ visibility: 'hidden' }}
+                  ></span>
+                </div>
+              </div>
+            </div>
+
+            <div className="opt-field">
+              <div className="opt-label">결제수단</div>
+              <div className="opt-controls">
+                <select className="flex-1">
+                  <option>전체</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="opt-field">
+              <div className="opt-label">거래금액</div>
+              <div className="opt-controls">
+                <div className="input-wrapper ">
+                  <input
+                    type="text"
+                    placeholder=""
+                  />
+                </div>
+                <span> ~ </span>
+                <div className="input-wrapper date">
+                  <input
+                    type="text"
+                    placeholder=""
+                    />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="apply-row">
+            <button className="btn-50 btn-blue flex-1">적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/entities/transaction/ui/list-date-group.tsx

@@ -0,0 +1,52 @@
+import moment from 'moment';
+import 'moment/dist/locale/ko';
+import { ListDateGroupProps } from '../model/types';
+import { ListItem } from './list-item';
+
+export const ListDateGroup = ({
+  pageType,
+  date,
+  items
+}: ListDateGroupProps) => {
+  moment.locale('ko');
+  const getStateDate = () => {
+    let stateDate = moment(date).format('YY.MM.DD(ddd)');
+    return stateDate;
+  };
+
+  const getListItem = () => {
+    let rs = [];
+    if(!!items && items.length>0){
+      for(let i=0;i<items.length;i++){
+        let key = 'ListItem-'+i;
+        rs.push(
+          <ListItem
+            pageType={ pageType }
+            key={ key }
+            tid={ items[i]?.tid }
+            mid={ items[i]?.mid }
+            stateDate={ items[i]?.stateDate }
+            stateCode={ items[i]?.stateCode }
+            stateName={ items[i]?.stateName }
+            installmentMonth={ items[i]?.installmentMonth }
+            serviceCode={ items[i]?.serviceCode }
+            serviceName={ items[i]?.serviceName }
+            serviceDetailName={ items[i]?.serviceDetailName }
+            goodsAmount={ items[i]?.goodsAmount }
+          ></ListItem>
+        )
+      }  
+    }
+    
+    return rs;
+  };
+
+  return (
+    <>
+      <div className="date-group">
+        <div className="date-header">{ getStateDate() }</div>
+        { getListItem() }
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/list-item.tsx

@@ -0,0 +1,124 @@
+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';
+
+export const ListItem = ({
+  pageType,
+  tid,
+  mid,
+  stateDate,
+  stateCode,
+  stateName,
+  installmentMonth,
+  serviceCode,
+  serviceName,
+  serviceDetailName,
+  goodsAmount
+}: ListItemProps) => {
+  const { navigate } = useNavigate();
+  const getItemClass = () => {
+    let rs = '';
+    if(stateCode === '0'){
+      rs = '';
+    }
+    else if(stateCode === '1'){
+      rs = 'approved';
+    }
+    else if(stateCode === '2'){
+      rs = 'refund';
+    }
+    return rs;
+  };
+
+  const getDotClass = (str?: string) => {
+    let rs = '';
+    if(stateCode === '0'){
+      rs = '';
+    }
+    else if(stateCode === '1'){
+      rs = 'blue';
+    }
+    else if(stateCode === '2'){
+      rs = 'gray';
+    }
+    return rs;
+  };
+
+  const onClickToNavigate = () => {
+    if(pageType === PageType.AllTransaction){
+      navigate(PATHS.transaction.allTransaction.detail + tid, {
+        state: {
+          tid: tid
+        }
+      });
+    }
+    else if(pageType === PageType.CashReceit){
+      navigate(PATHS.transaction.cashReceit.detail + tid, {
+        state: {
+          tid: tid
+        }
+      });
+    }
+    else if(pageType === PageType.Escro){
+      navigate(PATHS.transaction.escro.detail + tid, {
+        state: {
+          tid: tid
+        }
+      });
+    }
+    else if(pageType === PageType.Billing){
+      navigate(PATHS.transaction.billing.detail + tid, {
+        state: {
+          tid: tid
+        }
+      });
+    }
+    else{
+      alert('pageType 이 존재하지 않습니다.');
+    }
+  };
+  
+  const getTime = () => {
+    let time = stateDate?.substring(8, 12);
+    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    return timeStr;
+  };
+
+  return (
+    <>
+      <div 
+        className={ `transaction-item ${getItemClass()}` }
+        onClick={ () => onClickToNavigate() }
+      >
+        <div className="transaction-status">
+          <div className={ `status-dot ${getDotClass()}`}></div>
+        </div>
+        <div className="transaction-content">
+          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
+          <div className="transaction-details">
+            <span>{ stateName }</span>
+            <span className="separator">|</span>
+            <span>{ getTime() }</span>
+            <span className="separator">|</span>
+            <span>{ mid }</span>
+            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
+              <>
+                <span className="separator">|</span>
+                <span>{ installmentMonth }개월 할부</span>
+              </>
+            }
+          </div>
+        </div>
+        <div className="transaction-amount">
+          <NumericFormat
+            value={ goodsAmount } 
+            thousandSeparator
+            displayType="text"
+            suffix={ '원' }
+          ></NumericFormat> 
+        </div>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/sort-options-box.tsx

@@ -0,0 +1,25 @@
+import { 
+  SortByKeys,
+  SortOptionsBoxProps
+} from '../model/types';
+export const SortOptionsBox = ({
+  sortBy,
+  onCliCkToSort
+}: SortOptionsBoxProps) => {
+   
+  return (
+    <>
+      <div className="sort-options">
+        <button 
+          className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
+          onClick={ () => onCliCkToSort(SortByKeys.New) }
+        >최신순</button>
+        <span className="sort-divider">|</span>
+        <button 
+          className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
+          onClick={ () => onCliCkToSort(SortByKeys.Amount) }
+        >고액순</button>
+      </div>
+    </>
+  );
+};