정산조회 - 정산내역 리스트 및 상세

2025-09-18 09:45:10 +09:00
parent 22bdd45f0a
commit 746358dfe1
42 changed files with 1388 additions and 704 deletions
--- a/src/entities/settlement/api/use-settlement-list-mutation.ts
+++ b/src/entities/settlement/api/use-settlement-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 { 
-  SettlementListParams,
-  SettlementListResponse
-} from '../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const settlementList = (params: SettlementListParams) => {
-  return resultify(
-    axios.post<SettlementListResponse>(API_URL.settlementList(), params),
-  );
-};
-
-export const useSettlementListMutation = (options?: UseMutationOptions<SettlementListResponse, CBDCAxiosError, SettlementListParams>) => {
-  const mutation = useMutation<SettlementListResponse, CBDCAxiosError, SettlementListParams>({
-    ...options,
-    mutationFn: (params: SettlementListParams) => settlementList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};
--- a/src/entities/settlement/api/use-settlements-calendar-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-calendar-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsCalendarParams,
+  SettlementsCalendarResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsCalendar = (params: SettlementsCalendarParams) => {
+  return resultify(
+    axios.post<SettlementsCalendarResponse>(API_URL_SETTLEMENT.settlementsCalendar(), params),
+  );
+};
+
+export const useSettlementsCalendarMutation = (options?: UseMutationOptions<SettlementsCalendarResponse, CBDCAxiosError, SettlementsCalendarParams>) => {
+  const mutation = useMutation<SettlementsCalendarResponse, CBDCAxiosError, SettlementsCalendarParams>({
+    ...options,
+    mutationFn: (params: SettlementsCalendarParams) => settlementsCalendar(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-history-detail-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-history-detail-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsHistoryDetailParams,
+  SettlementsHistoryDetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsHistoryDetail = (params: SettlementsHistoryDetailParams) => {
+  return resultify(
+    axios.post<SettlementsHistoryDetailResponse>(API_URL_SETTLEMENT.settlementsHistoryDetail(), params),
+  );
+};
+
+export const useSettlementsHistoryDetailMutation = (options?: UseMutationOptions<SettlementsHistoryDetailResponse, CBDCAxiosError, SettlementsHistoryDetailParams>) => {
+  const mutation = useMutation<SettlementsHistoryDetailResponse, CBDCAxiosError, SettlementsHistoryDetailParams>({
+    ...options,
+    mutationFn: (params: SettlementsHistoryDetailParams) => settlementsHistoryDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-history-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-history-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsHistoryParams,
+  SettlementsHistoryResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsHistory = (params: SettlementsHistoryParams) => {
+  return resultify(
+    axios.post<SettlementsHistoryResponse>(API_URL_SETTLEMENT.settlementsHistory(), params),
+  );
+};
+
+export const useSettlementsHistoryMutation = (options?: UseMutationOptions<SettlementsHistoryResponse, CBDCAxiosError, SettlementsHistoryParams>) => {
+  const mutation = useMutation<SettlementsHistoryResponse, CBDCAxiosError, SettlementsHistoryParams>({
+    ...options,
+    mutationFn: (params: SettlementsHistoryParams) => settlementsHistory(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-history-summary-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-history-summary-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsHistorySummaryParams,
+  SettlementsHistorySummaryResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsHistorySummary = (params: SettlementsHistorySummaryParams) => {
+  return resultify(
+    axios.post<SettlementsHistorySummaryResponse>(API_URL_SETTLEMENT.settlementsHistorySummary(), params),
+  );
+};
+
+export const useSettlementsHistorySummaryMutation = (options?: UseMutationOptions<SettlementsHistorySummaryResponse, CBDCAxiosError, SettlementsHistorySummaryParams>) => {
+  const mutation = useMutation<SettlementsHistorySummaryResponse, CBDCAxiosError, SettlementsHistorySummaryParams>({
+    ...options,
+    mutationFn: (params: SettlementsHistorySummaryParams) => settlementsHistorySummary(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-transaction-detail-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-transaction-detail-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsTransactionDetailParams,
+  SettlementsTransactionDetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsTransactionDetail = (params: SettlementsTransactionDetailParams) => {
+  return resultify(
+    axios.post<SettlementsTransactionDetailResponse>(API_URL_SETTLEMENT.settlementsTransactionDetail(), params),
+  );
+};
+
+export const useSettlementsTransactionDetailMutation = (options?: UseMutationOptions<SettlementsTransactionDetailResponse, CBDCAxiosError, SettlementsTransactionDetailParams>) => {
+  const mutation = useMutation<SettlementsTransactionDetailResponse, CBDCAxiosError, SettlementsTransactionDetailParams>({
+    ...options,
+    mutationFn: (params: SettlementsTransactionDetailParams) => settlementsTransactionDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-transaction-list-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-transaction-list-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsTransactionListParams,
+  SettlementsTransactionListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsTransactionList = (params: SettlementsTransactionListParams) => {
+  return resultify(
+    axios.post<SettlementsTransactionListResponse>(API_URL_SETTLEMENT.settlementsTransactionList(), params),
+  );
+};
+
+export const useSettlementsTransactionListMutation = (options?: UseMutationOptions<SettlementsTransactionListResponse, CBDCAxiosError, SettlementsTransactionListParams>) => {
+  const mutation = useMutation<SettlementsTransactionListResponse, CBDCAxiosError, SettlementsTransactionListParams>({
+    ...options,
+    mutationFn: (params: SettlementsTransactionListParams) => settlementsTransactionList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/api/use-settlements-transaction-summary-mutation.ts
+++ b/src/entities/settlement/api/use-settlements-transaction-summary-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_SETTLEMENT } from '@/shared/api/api-url-settlement';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  SettlementsTransactionSummaryParams,
+  SettlementsTransactionSummaryResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const settlementsTransactionSummary = (params: SettlementsTransactionSummaryParams) => {
+  return resultify(
+    axios.post<SettlementsTransactionSummaryResponse>(API_URL_SETTLEMENT.settlementsTransactionSummary(), params),
+  );
+};
+
+export const useSettlementsTransactionSummaryMutation = (options?: UseMutationOptions<SettlementsTransactionSummaryResponse, CBDCAxiosError, SettlementsTransactionSummaryParams>) => {
+  const mutation = useMutation<SettlementsTransactionSummaryResponse, CBDCAxiosError, SettlementsTransactionSummaryParams>({
+    ...options,
+    mutationFn: (params: SettlementsTransactionSummaryParams) => settlementsTransactionSummary(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/settlement/model/types.ts
+++ b/src/entities/settlement/model/types.ts
@@ -1,110 +1,199 @@
-import { DefaulResponsePagination } from '@/entities/common/model/types';
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';

-export enum AltMsgKeys {
-  Fold = '접기',
-  UnFold = '펼치기',
-};
 export enum SortByKeys {
  New = 'New',
  Amount = 'Amount',
 };
+export interface SortOptionsBoxProps {
+  sortBy: SortByKeys;
+  onClickToSort: (sortBy: SortByKeys) => void;
+};
 export enum SettlementTabKeys {
  Calendar = 'calendar',
  List = 'list'
 };
-export enum DetailInfoKeys {
+export enum InfoWrapKeys {
  Amount = 'Amount',
  Settlement = 'Settlement',
+  Transaction = 'Transaction'
 };
 export interface SettlementTabProps {
  activeTab: SettlementTabKeys
 };
-export interface SettlementRequestParams {
-  tid?: string;
-}
-
-export interface SettlementDetailParams extends SettlementRequestParams {
-  svcCd: string;
+export enum SettlementPeriodType {
+  SETTLEMENT_DATE = 'SETTLEMENT_DATE',
+  TRANSACTION_DATE = 'TRANSACTION_DATE',
 };
-
-
-export interface DetailAmountInfoProps {
+export enum SettlementPaymentMethod {
+  ALL = 'ALL',
+  CREDIT_CARD = 'CREDIT_CARD',
+  VIRTUAL_ACCOUNT = 'VIRTUAL_ACCOUNT',
+  ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER',
+  ACCOUNT_EASY_PAY = 'ACCOUNT_EASY_PAY',
+  MOBILE_PAYMENT = 'MOBILE_PAYMENT',
+  SSG_MONEY = 'SSG_MONEY',
+  SSG_BANK_ACCOUNT = 'SSG_BANK_ACCOUNT',
+  CULTURE_VOUCHER = 'CULTURE_VOUCHER',
+  TMONEY_PAY = 'TMONEY_PAY',
+};
+export interface SettlementsTransactionSummaryParams {
  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;
+  periodType: SettlementPeriodType;
+  startDate: string;
+  endDate: string;
+  paymentMethod: SettlementPaymentMethod;
+  transactionIds?: Array<string>;
+  pagination: DefaultRequestPagination
+};
+export interface SettlementsTransactionSummaryResponse {
+  settlementAmount?: number;
+  transactionAmount?: number;
+  paymentFeeAmount?: number;
+  escrowFeeAmount?: number;
+  authFeeAmount?: number;
+  vatAmount?: number;
+  preSettlementCancelOffset?: number;
+};
+export interface SettlementsTransactionListParams {
+  mid: string;
+  periodType: SettlementPeriodType;
+  startDate: string;
+  endDate: string;
+  paymentMethod: SettlementPaymentMethod;
+  pagination: DefaultRequestPagination;
+};
+export interface SettlementsTransactionListResponse extends DefaulResponsePagination {
+  content: Array<SettlementsTransactionListContent>;
+};
+export interface SettlementsTransactionListContent {
+  approvalNumber?: string;
+  mid?: string;
+  approvalDate?: string;
+  settlementDate?: string;
+  transactionAmount?: number;
+};
+export interface SettlementsTransactionDetailParams {
+  approvalNumber: string;
+};
+export interface SettlementsTransactionDetailResponse {
+  transactionAmount: number;
+  merchantName: string;
+  amountInfo: AmountInfo;
+  transactionInfo: TransactionInfo;
+};
+export interface AmountInfo {
+  transactionAmount: number;
+  paymentFee: number;
  escrowFee: number;
+  authFee: number;
+  vatFee: number;
+  settlementAmount: number;
+  preSettlementCancelOffset: number;
+  finalSettlementAmount: number;
 };
-export interface DetailSettlementInfoProps {
-  approvalSettleDate: string;
-  approvalSettleAmount: number;
-  cancelSettleDate: string;
-  cancelSettleAmount: number;
+export interface TransactionInfo {
+  orderNumber: string;
+  tid: string;
+  originalTid: string;
+  transactionStatus: string;
+  paymentMethod: string;
+  settlementDate: string;
+  approvalDate: string;
+  cancelDate: string;
+  cardCompany: string;
+  approvalNumber: string;
+  productName: string;
+  buyerName: string;
 };
-export interface DetailResponse {
-  amountInfo?: DetailAmountInfoProps;
-  settlementInfo?: DetailSettlementInfoProps;
+export interface SettlementsHistoryParams {
+  mid: string;
+  periodType: SettlementPeriodType;
+  startDate: string;
+  endDate: string;
+  paymentMethod: SettlementPaymentMethod;
+  pagination: DefaultRequestPagination
 };
-export interface DetailInfoProps extends DetailResponse{
-  show?: boolean;
-  tid?: string;
-  onClickToShowInfo?: (info: DetailInfoKeys) => void;
+export interface SettlementsHistoryResponse extends DefaulResponsePagination {
+  content: Array<SettlementsHistoryContent>;
 };
-export interface DetailArrowProps {
-  show?: boolean;
+export interface SettlementsHistoryContent {
+  settlementId?: string;
+  settlementDate?: string;
+  merchantName?: string;
+  mid?: string;
+  settlementAmount?: number;
 };
-export interface SortOptionsBoxProps {
-  sortBy: SortByKeys;
-  onCliCkToSort: (sortBy: SortByKeys) => void;
+export interface SettlementsHistorySummaryParams {
+  mid: string;
+  periodType: SettlementPeriodType;
+  startDate: string;
+  endDate: string;
+  paymentMethod: SettlementPaymentMethod;
 };
-export interface ListItemProps extends ListItem{
-  
+export interface SettlementsHistorySummaryResponse {
+  settlementAmount?: number;
+  transactionAmount?: number;
+  pgFeeAmount?: number;
+  holdAmount?: number;
+  releaseAmount?: number;
+  offsetAmount?: number;
+};
+export interface SettlementsHistoryDetailParams {
+  settlementId: string;
+};
+export interface SettlementsHistoryDetailResponse {
+  settlementAmount: number;
+  settlementDate: string;
+  amountInfo: AmountInfo;
+  settlementInfo: SettlementInfo;
+};
+export interface SettlementInfo {
+  mid: string;
+  transferStatus: string;
+  transferId: string;
+  transferTime: string;
+  bankName: string;
+  accountNumber: number;
+  depositorName: string;
+  settlementDepositAmount: number;
+  errorReason: string;
+};
+export interface SettlementsCalendarParams {
+  mid: string;
+  yearMonth: string;
+};
+export interface SettlementsCalendarResponse {
+  yearMonth: string;
+  totalCompletedAmount: number;
+  totalScheduledAmount: number;
+  settlementDays: Array<SettlementDays>;
+};
+export interface SettlementDays {
+  settlementDate: string;
+  completedAmount: number;
+  scheduledAmount: number;
+  settlementStatus: string;
 };
 export interface ListDateGroupProps {
  date?: string;
-  items?: Array<ListItemProps>;
+  periodType: SettlementPeriodType;
+  items?: Array<SettlementsHistoryContent & SettlementsTransactionListContent>
 };
-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 SettlementRequestParams {
-  tid?: string;
+export interface ListItemProps extends SettlementsHistoryContent, SettlementsTransactionListContent {
+  periodType: SettlementPeriodType;
 }
-export interface SettlementListParams extends SettlementRequestParams {
-  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 SettlementListResponse extends DefaulResponsePagination {
-  content: Array<ListItemProps>;
-};

+export interface AmountInfoWrapProps {
+  periodType: SettlementPeriodType;
+  amountInfo?: AmountInfo;
+};
+export interface SettlementInfoWrapProps {
+  settlementInfo?: SettlementInfo;
+  show: boolean;
+  onClickToShowInfo: (infoWrapKey: InfoWrapKeys) => void;
+};
+export interface TransactionInfoWrapProps {
+  transactionInfo?: TransactionInfo;
+  show: boolean;
+  onClickToShowInfo: (infoWrapKey: InfoWrapKeys) => void;
+};
--- a/src/entities/settlement/ui/detail-amount-info.tsx
+++ b/src/entities/settlement/ui/detail-amount-info.tsx
@@ -1,79 +0,0 @@
-import { motion } from 'framer-motion';
-import { NumericFormat } from 'react-number-format';
-import { DetailInfoKeys, DetailInfoProps } from '@/entities/settlement/model/types';
-
-export const DetailAmountInfo = ({
-  amountInfo,
-  show,
-  tid,
-  onClickToShowInfo
-}: DetailInfoProps) => {
-
-  const onClickToSetShowInfo = () => {
-    if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Amount);
-    }
-  };
-
-  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">6,017,600 (269건)</span>
-            <ul className="txn-amount-detail">
-              <li>
-                <span>·&nbsp;&nbsp;신용카드</span>
-                <span>6,017,000 (260건)</span>
-              </li>
-              <li>
-                <span>·&nbsp;&nbsp;계좌이체</span>
-                <span>600 (9건)</span>
-              </li>
-            </ul>
-          </li>
-          <li className="kv-row">
-            <span className="k">PG 수수료 합계</span>
-            <span className="v">205,255</span>
-            <ul className="txn-amount-detail">
-              <li>
-                <span>·&nbsp;&nbsp;결제수수료</span>
-                <span>165,384</span>
-              </li>
-              <li>
-                <span>·&nbsp;&nbsp;에스크로 수수료</span>
-                <span>0</span>
-              </li>
-              <li>
-                <span>·&nbsp;&nbsp;인증 수수료</span>
-                <span>21,300</span>
-              </li>
-              <li>
-                <span>·&nbsp;&nbsp;VAT</span>
-                <span>18,571</span>
-              </li>
-            </ul>
-          </li>
-          <li className="kv-row">
-            <span className="k">보류</span>
-            <span className="v">0</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">해제</span>
-            <span className="v">0</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">상계</span>
-            <span className="v">- 80,603</span>
-          </li>
-          <li className="kv-row bolder">
-            <span className="k">정산금액</span>
-            <span className="v">5,731,742</span>
-          </li>
-        </ul>
-      </div>
-    </>
-  );
-};
--- a/src/entities/settlement/ui/detail-arrow.tsx
+++ b/src/entities/settlement/ui/detail-arrow.tsx
@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { AltMsgKeys, DetailArrowProps } from '../model/types';
+import { 
+  AltMsgKeys,
+  DetailArrowProps 
+} from '@/entities/common/model/types';

 export const DetailArrow = ({ show }: DetailArrowProps) => {
  const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
--- a/src/entities/settlement/ui/detail-settlement-info.tsx
+++ b/src/entities/settlement/ui/detail-settlement-info.tsx
@@ -1,74 +0,0 @@
-import moment from 'moment';
-import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '@/entities/settlement/model/types';
-import { DetailArrow } from './detail-arrow';
-
-export const DetailSettlementInfo = ({
-  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">MID</span>
-            <span className="v">cruquis01m</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">이체상태</span>
-            <span className="v">정상처리</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">이체ID</span>
-            <span className="v">APG000600m</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">이체시간</span>
-            <span className="v">12:00:00</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">계좌번호</span>
-            <span className="v">123231231****</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">입금인자</span>
-            <span className="v">나이스페이먼츠</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">정상입금액</span>
-            <span className="v">5,731,742</span>
-          </li>
-          <li className="kv-row nopadding">
-            <span className="k">오류사유</span>
-            <span className="v"></span>
-          </li>
-        </motion.ul>
-      </div>
-    </>
-  );
-};
--- a/src/entities/settlement/ui/filter/list-filter.tsx
+++ b/src/entities/settlement/ui/filter/list-filter.tsx
--- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
@@ -0,0 +1,76 @@
+import { NumericFormat } from 'react-number-format';
+import { 
+  InfoWrapKeys, 
+  AmountInfoWrapProps, 
+  SettlementPeriodType
+} from '@/entities/settlement/model/types';
+
+export const AmountInfoWrap = ({
+  periodType,
+  amountInfo,
+}: AmountInfoWrapProps) => {
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">금액 정보</div>
+        { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">거래금액 합계</span>
+              <span className="v">6,017,600 (269건)</span>
+              <ul className="txn-amount-detail">
+                <li>
+                  <span>·&nbsp;&nbsp;신용카드</span>
+                  <span>6,017,000 (260건)</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;계좌이체</span>
+                  <span>600 (9건)</span>
+                </li>
+              </ul>
+            </li>
+            <li className="kv-row">
+              <span className="k">PG 수수료 합계</span>
+              <span className="v">205,255</span>
+              <ul className="txn-amount-detail">
+                <li>
+                  <span>·&nbsp;&nbsp;결제수수료</span>
+                  <span>165,384</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;에스크로 수수료</span>
+                  <span>0</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;인증 수수료</span>
+                  <span>21,300</span>
+                </li>
+                <li>
+                  <span>·&nbsp;&nbsp;VAT</span>
+                  <span>18,571</span>
+                </li>
+              </ul>
+            </li>
+            <li className="kv-row">
+              <span className="k">보류</span>
+              <span className="v">0</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">해제</span>
+              <span className="v">0</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">상계</span>
+              <span className="v">- 80,603</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">정산금액</span>
+              <span className="v">5,731,742</span>
+            </li>
+          </ul>
+        }
+      </div>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx
@@ -0,0 +1,84 @@
+import moment from 'moment';
+import { NumericFormat } from 'react-number-format';
+import { DetailArrow } from '../detail-arrow';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { 
+  InfoWrapKeys, 
+  SettlementInfoWrapProps, 
+  SettlementPeriodType
+} from '@/entities/settlement/model/types';
+
+export const SettlementInfoWrap = ({
+  settlementInfo,
+  show,
+  onClickToShowInfo
+}: SettlementInfoWrapProps) => {
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Settlement);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { show &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">MID</span>
+              <span className="v">{ settlementInfo?.mid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">이체상태</span>
+              <span className="v">{ settlementInfo?.transferStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">이체ID</span>
+              <span className="v">{ settlementInfo?.transferId }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">이체시간</span>
+              <span className="v">{ moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">은행명</span>
+              <span className="v">{ settlementInfo?.bankName }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">계좌번호</span>
+              <span className="v">{ settlementInfo?.accountNumber }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">입금인자</span>
+              <span className="v">{ settlementInfo?.depositorName }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">정상입금액</span>
+              <span className="v">
+                <NumericFormat
+                  value={ settlementInfo?.settlementDepositAmount  } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">오류사유</span>
+              <span className="v">{ settlementInfo?.errorReason }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
@@ -0,0 +1,88 @@
+import moment from 'moment';
+import { DetailArrow } from '../detail-arrow';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+import { 
+  InfoWrapKeys, 
+  TransactionInfoWrapProps, 
+} from '@/entities/settlement/model/types';
+
+export const TransactionInfoWrap = ({
+  transactionInfo,
+  show,
+  onClickToShowInfo
+}: TransactionInfoWrapProps) => {
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Transaction);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          거래 상세 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { show && 
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">주문번호</span>
+              <span className="v">{ transactionInfo?.orderNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">TID</span>
+              <span className="v">{ transactionInfo?.tid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">원거래 TID</span>
+              <span className="v">{ transactionInfo?.originalTid }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">거래상태</span>
+              <span className="v">{ transactionInfo?.transactionStatus }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">결제수단</span>
+              <span className="v">{ transactionInfo?.paymentMethod }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">정산일</span>
+              <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">승인일</span>
+              <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">취소일</span>
+              <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">카드/은행/이통사</span>
+              <span className="v">{ transactionInfo?.cardCompany }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">승인번호/계좌번호/휴대번호</span>
+              <span className="v">{ transactionInfo?.approvalNumber }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">상품명</span>
+              <span className="v">{ transactionInfo?.productName }</span>
+            </li>
+            <li className="kv-row bolder">
+              <span className="k">구매자</span>
+              <span className="v">{ transactionInfo?.buyerName }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/list-date-group.tsx
+++ b/src/entities/settlement/ui/list-date-group.tsx
@@ -5,6 +5,7 @@ import { ListItem } from './list-item';

 export const ListDateGroup = ({
  date,
+  periodType,
  items
 }: ListDateGroupProps) => {
  moment.locale('ko');
@@ -17,20 +18,18 @@ export const ListDateGroup = ({
    let rs = [];
    if(!!items && items.length>0){
      for(let i=0;i<items.length;i++){
-        let key = 'ListItem-'+i;
        rs.push(
          <ListItem
-            key={ key }
-            tid={ items[i]?.tid }
+            key={ 'key-list-item-' + i }
+            periodType={ periodType }
+            settlementId={ items[i]?.settlementId }
+            settlementDate={ items[i]?.settlementDate }
+            merchantName={ items[i]?.merchantName }
            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 }
+            settlementAmount={ items[i]?.settlementAmount }
+            approvalNumber={ items[i]?.approvalNumber }
+            approvalDate={ items[i]?.approvalDate }
+            transactionAmount={ items[i]?.transactionAmount }
          ></ListItem>
        )
      }  
--- a/src/entities/settlement/ui/list-item.tsx
+++ b/src/entities/settlement/ui/list-item.tsx
@@ -1,92 +1,69 @@
 import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { ListItemProps } from '../model/types';
+import { ListItemProps, SettlementPeriodType } from '../model/types';
+import moment from 'moment';

 export const ListItem = ({
-  tid,
+  periodType,
+  settlementId,
+  settlementDate,
+  merchantName,
  mid,
-  stateDate,
-  stateCode,
-  stateName,
-  installmentMonth,
-  serviceCode,
-  serviceName,
-  serviceDetailName,
-  goodsAmount
+  settlementAmount,
+  approvalNumber,
+  approvalDate,
+  transactionAmount
 }: 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 = () => {
-    navigate(PATHS.settlement.detail + tid, {
+    let detailId;
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
+      detailId = settlementId;
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
+      detailId = approvalNumber;
+    }
+
+    navigate(PATHS.settlement.detail + detailId, {
      state: {
-        tid: tid
+        periodType: periodType,
+        settlementId: settlementId,
+        approvalNumber: approvalNumber,
      }
    });
  };
  
-  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()}` }
+        className={ `transaction-item approved` }
        onClick={ () => onClickToNavigate() }
      >
        <div className="transaction-status">
-          <div className={ `status-dot ${getDotClass()}`}></div>
+          <div className={ `status-dot blue`}></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) && 
-              <>
+          { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+            <div className="transaction-title">{ `${merchantName}(${mid})` }</div>
+          }
+          { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+            <>
+              <div className="transaction-title">{ `${approvalNumber}(${mid})` }</div>
+              <div className="transaction-details">
+                <span>{ (!!settlementDate)? '정산': (!!approvalDate)? '승인' : '' }</span>
                <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
-              </>
-            }
-          </div>
+                <span>정산 { moment(settlementDate).format('MM.DD') }</span>
+                <span className="separator">|</span>
+                <span>승인 { moment(approvalDate).format('MM.DD') }</span>
+              </div>
+            </>
+          }
        </div>
        <div className="transaction-amount">
          { 
            <NumericFormat
-              value={ goodsAmount } 
+              value={ settlementAmount || transactionAmount } 
              thousandSeparator
              displayType="text"
              suffix={ '원' }
--- a/src/entities/settlement/ui/list-summary-extend-settlement.tsx
+++ b/src/entities/settlement/ui/list-summary-extend-settlement.tsx
@@ -0,0 +1,73 @@
+import { NumericFormat } from 'react-number-format';
+import { SettlementsHistorySummaryResponse } from '../model/types';
+
+export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {};
+
+export const ListSummaryExtendSettlement = ({
+  settlementAmount,
+  transactionAmount,
+  pgFeeAmount,
+  holdAmount,
+  releaseAmount,
+  offsetAmount
+}: ListSummaryExtendSettlementProps) => {
+  
+  return (
+    <>
+      <div className="summary-extend">
+        <ul className="summary-amount-list">
+          <li className="summary-amount-item">
+            <span className="label">거래금액</span>
+            <span className="value">
+              <NumericFormat
+                value={ transactionAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">PG 수수료</span>
+            <span className="value minus">
+              <NumericFormat
+                value={ pgFeeAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">보류</span>
+            <span className="value">
+              <NumericFormat
+                value={ holdAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">해제</span>
+            <span className="value link">
+              <NumericFormat
+                value={ releaseAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">상계</span>
+            <span className="value minus">
+              <NumericFormat
+                value={ offsetAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/list-summary-extend-transaction.tsx
+++ b/src/entities/settlement/ui/list-summary-extend-transaction.tsx
@@ -0,0 +1,84 @@
+import { NumericFormat } from 'react-number-format';
+import { SettlementsTransactionSummaryResponse } from '../model/types';
+
+export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {};
+
+export const ListSummaryExtendTransaction = ({
+  settlementAmount,
+  transactionAmount,
+  paymentFeeAmount,
+  escrowFeeAmount,
+  authFeeAmount,
+  vatAmount,
+  preSettlementCancelOffset
+}: ListSummaryExtendTransactionProps) => {
+  
+  return (
+    <>
+      <div className="summary-extend">
+        <ul className="summary-amount-list">
+          <li className="summary-amount-item">
+            <span className="label">거래금액</span>
+            <span className="value">
+              <NumericFormat
+                value={ transactionAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">결제 수수료</span>
+            <span className="value minus">
+              <NumericFormat
+                value={ paymentFeeAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">에스크로 수수료</span>
+            <span className="value">
+              <NumericFormat
+                value={ escrowFeeAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">인증 수수료</span>
+            <span className="value link">
+              <NumericFormat
+                value={ authFeeAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">VAT</span>
+            <span className="value minus">
+              <NumericFormat
+                value={ vatAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+          <li className="summary-amount-item">
+            <span className="label">정산전 취소상계</span>
+            <span className="value minus">
+              <NumericFormat
+                value={ preSettlementCancelOffset } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> <span className="unit">원</span>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -3,59 +3,141 @@ import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { ListDateGroup } from './list-date-group';
-import { ListItem, ListDateGroupProps, SortByKeys } from '@/entities/settlement/model/types';
-import { useSettlementListMutation } from '@/entities/settlement/api/use-settlement-list-mutation';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
-import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
+import { SortOptionsBox } from '@/entities/settlement/ui/sort-options-box';
+import { useSettlementsHistoryMutation } from '../api/use-settlements-history-mutation';
+import { useSettlementsHistorySummaryMutation } from '../api/use-settlements-history-summary-mutation';
+import { 
+  SortByKeys,
+  SettlementPeriodType,
+  SettlementPaymentMethod,
+  SettlementsHistoryContent,
+  ListDateGroupProps,
+  SettlementsTransactionListContent
+} from '@/entities/settlement/model/types';
+import { useSettlementsTransactionSummaryMutation } from '../api/use-settlements-transaction-summary-mutation';
+import { useSettlementsTransactionListMutation } from '../api/use-settlements-transaction-list-mutation';
+import { ListSummaryExtendSettlement } from './list-summary-extend-settlement';
+import { ListSummaryExtendTransaction } from './list-summary-extend-transaction';
+import SlideDown from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const ListWrap = () => {
-  const [selectedServiceCode, setSelectedServiceCode] = useState<string>('st');
+  const { navigate } = useNavigate();
+  
  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
-  const [listItems, setListItems] = useState<ListDateGroupProps>({});
+  const [settlementDateListItems, setSettlementDateListItems] = useState<Record<string, Array<SettlementsHistoryContent>>>({});
+  const [transactionDatelistItems, setTransactionDateListItems] = useState<Record<string, Array<SettlementsTransactionListContent>>>({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-    
-  const { mutateAsync: settlementList } = useSettlementListMutation();
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [paymentMethod, setPaymentMethod] = useState<SettlementPaymentMethod>(SettlementPaymentMethod.ALL);

-  const callList = (option?: {
+  const [settlementAmount, setSettlementAmount] = useState<number>();
+  const [transactionAmount, setTransactionAmount] = useState<number>();
+  const [pgFeeAmount, setPgFeeAmount] = useState<number>();
+  const [holdAmount, setHoldAmount] = useState<number>();
+  const [releaseAmount, setReleaseAmount] = useState<number>();
+  const [offsetAmount, setOffsetAmount] = useState<number>();
+  const [paymentFeeAmount, setPaymentFeeAmount] = useState<number>();
+  const [escrowFeeAmount, setEscrowFeeAmount] = useState<number>();
+  const [authFeeAmount, setAuthFeeAmount] = useState<number>();
+  const [vatAmount, setVatAmount] = useState<number>();
+  const [preSettlementCancelOffset, setPreSettlementCancelOffset] = useState<number>();
+  
+  const [isOpenSummary, setIsOpenSummary] = useState<boolean>(false);
+
+  const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
+  const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
+  const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation();
+  const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation();
+
+  const callList = () => {
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
+      callSettlementList();
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
+      callTransactionList();
+    }
+  };
+
+  const callSettlementList = (option?: {
    sortBy?: string, 
    val?: string
  }) => {
    let listSummaryParams = {
-      moid: 'string',
-      tid: 'string',
-      fromDate: fromDate,
-      toDate: toDate,
-      stateCode: '0',
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
-      minAmount: 0,
-      maxAmount: 0,
-      dateCl: 'TRANS',
-      goodsName: 'string',
-      cardCode: 'st',
-      bankCode: 'str',
-      searchCl: 'CARD_NO',
-      searchValue: 'string',
+      mid: mid,
+      periodType: periodType,
+      startDate: startDate,
+      endDate: endDate,
+      paymentMethod: paymentMethod,
    };
    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
    
    let listParams = {
      ...listSummaryParams,
-      ...{page: pageParam}
+      ...{pagination: pageParam}
    };
-    settlementList(listParams).then((rs) => {
-      setListItems(assembleData(rs.content));
+    settlementsHistory(listParams).then((rs) => {
+      setSettlementDateListItems(assembleData(rs.content));
+    });
+    settlementsHistorySummary(listSummaryParams).then((rs) => {
+      setSettlementAmount(rs.settlementAmount);
+      setTransactionAmount(rs.transactionAmount);
+      setPgFeeAmount(rs.pgFeeAmount);
+      setHoldAmount(rs.holdAmount);
+      setReleaseAmount(rs.releaseAmount);
+      setOffsetAmount(rs.offsetAmount);
+    });
+  };
+  const callTransactionList = (option?: {
+    sortBy?: string, 
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+    setPageParam(pageParam);
+    let params = {
+      mid: mid,
+      periodType: periodType,
+      startDate: startDate,
+      endDate: endDate,
+      paymentMethod: paymentMethod,
+      pagination: pageParam
+    };
+    
+    let summaryParams = {
+      ...params,
+      transactionIds: [
+        "TXN_20250608_001",
+        "TXN_20250608_002"
+      ]
+    };
+    
+    settlementsTransactionList(params).then((rs) => {
+      setTransactionDateListItems(assembleData(rs.content));
+    });
+    settlementsTransactionSummary(summaryParams).then((rs) => {
+      setSettlementAmount(rs.settlementAmount);
+      setTransactionAmount(rs.transactionAmount);
+      setPaymentFeeAmount(rs.paymentFeeAmount);
+      setEscrowFeeAmount(rs.escrowFeeAmount);
+      setAuthFeeAmount(rs.authFeeAmount);
+      setVatAmount(rs.vatAmount);
+      setPreSettlementCancelOffset(rs.preSettlementCancelOffset);
    });
  };

-  const assembleData = (content: Array<ListItem>) => {
+  const assembleData = (content: Array<SettlementsHistoryContent>) => {
    let data: any = {};
    if(content && content.length > 0){
      for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
-        let groupDate = stateDate?.substring(0, 8);
+        let groupDate = moment(content[i]?.settlementDate).format('YYYYMMDD');
        if(!!groupDate && !data.hasOwnProperty(groupDate)){
          data[groupDate] = [];
        }
@@ -68,19 +150,52 @@ export const ListWrap = () => {
  };
  const onCliCkToSort = (sort: SortByKeys) => {
    setSortBy(sort);
-    callList({sortBy: sort});
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
+      callSettlementList({sortBy: sort});
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
+      callTransactionList({sortBy: sort});
+    }
+  };
+  const changePeriodType = (val: SettlementPeriodType) => {
+    if(val !== periodType){
+      setPeriodType(val);
+      if(val === SettlementPeriodType.SETTLEMENT_DATE){
+        callSettlementList();
+      }
+      else if(val === SettlementPeriodType.TRANSACTION_DATE){
+        callTransactionList();
+      }
+    }
  };
  useEffect(() => {
    callList();
  }, []);

-  const getListDateGroup = () => {
+  const getSettlementDateListDateGroup = () => {
    let rs = [];
-    if(Object.keys(listItems).length > 0){
-      for (const [key, value] of Object.entries(listItems)) {
+    if(Object.keys(settlementDateListItems).length > 0){
+      for (const [key, value] of Object.entries(settlementDateListItems)) {
        rs.push(
          <ListDateGroup
            key={ key }
+            periodType={ periodType }
+            date={ key }
+            items={ value }
+          ></ListDateGroup>
+        );  
+      }
+    }
+    return rs;
+  };
+  const getTransactionDateListDateGroup = () => {
+    let rs = [];
+    if(Object.keys(transactionDatelistItems).length > 0){
+      for (const [key, value] of Object.entries(transactionDatelistItems)) {
+        rs.push(
+          <ListDateGroup
+            key={ key }
+            periodType={ periodType }
            date={ key }
            items={ value }
          ></ListDateGroup>
@@ -98,7 +213,7 @@ export const ListWrap = () => {
            <input 
              className="credit-period" 
              type="text" 
-              value="2025.06.01 ~ 2025.06.31" 
+              value={`${startDate} ~ ${endDate}`} 
              readOnly={ true }
            />
            <button className="filter-btn">
@@ -119,92 +234,80 @@ export const ListWrap = () => {
        <div className="summary-amount divTop">
          <span className="amount-text">
            <NumericFormat
-              value={ '83745200' } 
+              value={ settlementAmount } 
              thousandSeparator
              displayType="text"
              suffix={ '원' }
            ></NumericFormat>
          </span>
-          <button>
+          <button
+            onClick={ () => setIsOpenSummary(!isOpenSummary) }
+          >
            <img 
+              className={`ic20 ${(isOpenSummary)? '': 'rot-180'}`}
              src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' } 
              alt="화살표"
            />
          </button>
        </div>
-        <div className="summary-extend">
-          <ul className="summary-amount-list">
-            <li className="summary-amount-item">
-              <span className="label">거래금액</span>
-              <span className="value">
-                <NumericFormat
-                  value={ '67860120' } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> <span className="unit">원</span>
-              </span>
-            </li>
-            <li className="summary-amount-item">
-              <span className="label">PG수수료</span>
-              <span className="value minus">
-                <NumericFormat
-                  value={ '-2409428' } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> <span className="unit">원</span>
-              </span>
-            </li>
-            <li className="summary-amount-item">
-              <span className="label">보류</span>
-              <span className="value">
-                <NumericFormat
-                  value={ '0' } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> <span className="unit">원</span>
-              </span>
-            </li>
-            <li className="summary-amount-item">
-              <span className="label">해제</span>
-              <span className="value link">
-                <NumericFormat
-                  value={ '5000' } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> <span className="unit">원</span>
-              </span>
-            </li>
-            <li className="summary-amount-item">
-              <span className="label">상계</span>
-              <span className="value minus">
-                <NumericFormat
-                  value={ '-388393' } 
-                  thousandSeparator
-                  displayType="text"
-                ></NumericFormat> <span className="unit">원</span>
-              </span>
-            </li>
-          </ul>
-        </div>
+        
+        { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+          <SlideDown className={'my-dropdown-slidedown'}>
+          { isOpenSummary &&
+            <ListSummaryExtendSettlement
+              settlementAmount={ settlementAmount }
+              transactionAmount={ transactionAmount }
+              pgFeeAmount={ pgFeeAmount }
+              holdAmount={ holdAmount }
+              releaseAmount={ releaseAmount }
+              offsetAmount={ offsetAmount }
+            ></ListSummaryExtendSettlement>
+          }
+          </SlideDown>
+        }
+        { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+          <SlideDown className={'my-dropdown-slidedown'}>
+          { isOpenSummary &&
+            <ListSummaryExtendTransaction
+              settlementAmount={ settlementAmount }
+              transactionAmount={ transactionAmount }
+              paymentFeeAmount={ paymentFeeAmount }
+              escrowFeeAmount={ escrowFeeAmount }
+              authFeeAmount={ authFeeAmount }
+              vatAmount={ vatAmount }
+              preSettlementCancelOffset={ preSettlementCancelOffset }
+            ></ListSummaryExtendTransaction>
+          }
+          </SlideDown>
+        }
      </div>

      <div className="filter-section">
        <SortOptionsBox
          sortBy={ sortBy }
-          onCliCkToSort={ onCliCkToSort }
+          onClickToSort={ onCliCkToSort }
        ></SortOptionsBox>
        <div>
          <div className="full-menu-keywords no-padding">
-            <span className="keyword-tag active">거래건별 보기</span>
-            <span className="keyword-tag">정산내역</span>
+            <span 
+              className={ `keyword-tag ${(periodType === SettlementPeriodType.SETTLEMENT_DATE)? 'active': ''}` }
+              onClick={ () => changePeriodType(SettlementPeriodType.SETTLEMENT_DATE) }
+            >가맹점 기준</span>
+            <span 
+              className={ `keyword-tag ${(periodType === SettlementPeriodType.TRANSACTION_DATE)? 'active': ''}` }
+              onClick={ () => changePeriodType(SettlementPeriodType.TRANSACTION_DATE) }
+            >거래 기준</span>
          </div>
        </div>
      </div>
      <div className="transaction-list">
-        { 
-          (!!listItems && Object.keys(listItems).length > 0) &&
-            getListDateGroup() 
-        }
+      { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+        getSettlementDateListDateGroup()
+      }
+    
+      { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+        getTransactionDateListDateGroup()
+      }
      </div>
    </>
  );
--- a/src/entities/settlement/ui/sort-options-box.tsx
+++ b/src/entities/settlement/ui/sort-options-box.tsx
@@ -1,7 +1,7 @@
 import { SortByKeys, SortOptionsBoxProps } from '../model/types';
 export const SortOptionsBox = ({
  sortBy,
-  onCliCkToSort
+  onClickToSort
 }: SortOptionsBoxProps) => {
   
  return (
@@ -9,12 +9,12 @@ export const SortOptionsBox = ({
      <div className="sort-options">
        <button 
          className={ `sort-btn ${(sortBy === SortByKeys.New)? 'active': ''}` }
-          onClick={ () => onCliCkToSort(SortByKeys.New) }
+          onClick={ () => onClickToSort(SortByKeys.New) }
        >최신순</button>
        <span className="sort-divider">|</span>
        <button 
          className={ `sort-btn ${(sortBy === SortByKeys.Amount)? 'active': ''}` }
-          onClick={ () => onCliCkToSort(SortByKeys.Amount) }
+          onClick={ () => onClickToSort(SortByKeys.Amount) }
        >고액순</button>
      </div>
    </>