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

2025-09-18 09:45:10 +09:00
parent 22bdd45f0a
commit 746358dfe1
42 changed files with 1388 additions and 704 deletions
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -37,6 +37,10 @@ export enum HeaderType {
  LeftArrow = 'LeftArrow',
  RightClose = 'RightClose',
 };
+export enum AltMsgKeys {
+  Fold = '접기',
+  UnFold = '펼치기',
+};
 export interface FilterRangeAmountProps {
  title?: string;
  minAmount?: number | string;
@@ -172,4 +176,8 @@ export interface EmptyTokenAddSendCodeParams {
 export interface EmptyTokenAddSendCodeResponse {
  expiresIn: string;
  authCode: string;
+};
+
+export interface DetailArrowProps {
+  show?: boolean;
 };
--- a/src/entities/payment/ui/data-notification-notify-content.tsx
+++ b/src/entities/payment/ui/data-notification-notify-content.tsx
@@ -63,7 +63,7 @@ export const DataNotificationNotifyContent = ({
        { isOpen &&
          <div className="notify-content">
            <ul className="notify-detail-list">
-              <li className="notify-detail-item">시작일자 : { moment(startDate).format('YYYY-MM-DD') }</li>
+              <li className="notify-detail-item">시작일자 : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }</li>
              <li className="notify-detail-item">관리자 메일 : { adminEmail } </li>
              <li className="notify-detail-item">URL/IP : { urlIp }</li>
              <li className="notify-detail-item">재전송 간격 : { retransmissionInterval }</li>
--- 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>
    </>
--- a/src/entities/tax/model/types.ts
+++ b/src/entities/tax/model/types.ts
@@ -17,10 +17,6 @@ export interface SortOptionsBoxProps {
  sortBy: SortByKeys;
  onCliCkToSort: (sortBy: SortByKeys) => void;
 };
-export enum AltMsgKeys {
-  Fold = '접기',
-  UnFold = '펼치기',
-};
 export enum DetailInfoSectionKeys {
  Amount = 'Amount',
  Publish = 'Publish',
--- a/src/entities/tax/ui/invoice-arrow.tsx
+++ b/src/entities/tax/ui/invoice-arrow.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { AltMsgKeys, InvoiceArrowProps } from '../model/types';
+import { AltMsgKeys } from '@/entities/common/model/types';
+import { InvoiceArrowProps } from '../model/types';

 export const InvoiceArrow = ({ show }: InvoiceArrowProps) => {
  const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
--- a/src/entities/transaction/model/types.ts
+++ b/src/entities/transaction/model/types.ts
@@ -4,10 +4,6 @@ export enum CancelTabKeys {
  All = 'All',
  Part = 'Part'
 };
-export enum AltMsgKeys {
-  Fold = '접기',
-  UnFold = '펼치기',
-};
 export enum SortByKeys {
  New = 'New',
  Amount = 'Amount',
@@ -471,9 +467,6 @@ export interface DetailInfoProps extends DetailResponse {
  purposeType?: CashReceiptPurposeType;
  onClickToShowInfo?: (info: InfoWrapKeys) => void;
 }
-export interface DetailArrowProps {
-  show?: boolean;
-};

 export interface DownloadConfirmationParams {
  tid?: string;
--- a/src/entities/transaction/ui/detail-arrow.tsx
+++ b/src/entities/transaction/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/transaction/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx
@@ -1,9 +1,10 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
 import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const AmountInfoWrap = ({
  transactionCategory, 
@@ -96,12 +97,7 @@ export const AmountInfoWrap = ({
    }
    return rs;
  }
-  
-  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(InfoWrapKeys.Amount);
@@ -138,19 +134,16 @@ export const AmountInfoWrap = ({
            금액상세 <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">
-            { subLi() }
-          </ul>
-        </motion.div>
-        
+
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <div className="amount-expand">
+            <ul className="amount-list">
+              { subLi() }
+            </ul>
+          </div>
+        }
+        </SlideDown>
        <div className="txn-mid">
          <span className="value">{ amountInfo?.mid }</span>
        </div>
--- a/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
@@ -1,6 +1,8 @@
 import moment from 'moment';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const DetailInfoWrap = ({
  transactionCategory,
@@ -24,44 +26,48 @@ export const DetailInfoWrap = ({
        >
          상세 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
-        <ul className="kv-list">
-          <li className="kv-row">
-            <span className="k">취소일자</span>
-            <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">취소승인번호</span>
-            <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">현금영수증</span>
-            <span className="v">{ detailInfo?.receiptInfo }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">TID</span>
-            <span className="v">{ detailInfo?.tid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">거래ID</span>
-            <span className="v">{ detailInfo?.merchantTid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">서브몰명</span>
-            <span className="v">{ detailInfo?.subMallName }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">서브몰 사업자 번호</span>
-            <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">발행경로</span>
-            <span className="v">{ detailInfo?.issueChannel }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">실패사유</span>
-            <span className="v">{ detailInfo?.failureReason }</span>
-          </li>
-        </ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">취소일자</span>
+              <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">취소승인번호</span>
+              <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">현금영수증</span>
+              <span className="v">{ detailInfo?.receiptInfo }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">TID</span>
+              <span className="v">{ detailInfo?.tid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거래ID</span>
+              <span className="v">{ detailInfo?.merchantTid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰명</span>
+              <span className="v">{ detailInfo?.subMallName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰 사업자 번호</span>
+              <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">발행경로</span>
+              <span className="v">{ detailInfo?.issueChannel }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">실패사유</span>
+              <span className="v">{ detailInfo?.failureReason }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
      </div>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
@@ -1,7 +1,8 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const EscrowInfoWrap = ({
  transactionCategory,
@@ -9,11 +10,7 @@ export const EscrowInfoWrap = ({
  show,
  onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
+  
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Escrow);
@@ -29,54 +26,52 @@ export const EscrowInfoWrap = ({
        >
          정산 정보 <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">{ escrowInfo?.deliveryStatus }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송등록</span>
-            <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송완료</span>
-            <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">구매확인</span>
-            <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">구매거절</span>
-            <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">거절사유</span>
-            <span className="v">{ escrowInfo?.rejectReason }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">에스크로인증번호</span>
-            <span className="v">{ escrowInfo?.escrowCertNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">택배사</span>
-            <span className="v">{ escrowInfo?.deliveryCompany }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">운송장번호</span>
-            <span className="v">{ escrowInfo?.trackingNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송주소</span>
-            <span className="v">{ escrowInfo?.deliveryAddress }</span>
-          </li>
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">배송상태</span>
+              <span className="v">{ escrowInfo?.deliveryStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송등록</span>
+              <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송완료</span>
+              <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매확인</span>
+              <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매거절</span>
+              <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거절사유</span>
+              <span className="v">{ escrowInfo?.rejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">에스크로인증번호</span>
+              <span className="v">{ escrowInfo?.escrowCertNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">택배사</span>
+              <span className="v">{ escrowInfo?.deliveryCompany }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">운송장번호</span>
+              <span className="v">{ escrowInfo?.trackingNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송주소</span>
+              <span className="v">{ escrowInfo?.deliveryAddress }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
      </div>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
@@ -1,8 +1,9 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const PartCancelInfoWrap = ({
  transactionCategory,
@@ -19,7 +20,7 @@ export const PartCancelInfoWrap = ({
    partCancelAmount: {name: '부분취소 금액', type: 'number'},
    remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
  };
-  console.log(serviceCode)
+  
  const showSubItems: Record<string, Array<string>> = {
    // 신용카드
    '01': ['originalTid', 'originalAmount', 'partCancelTid', 
@@ -91,11 +92,6 @@ export const PartCancelInfoWrap = ({
    return rs;
  };

-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.PartCancel);
@@ -111,15 +107,14 @@ export const PartCancelInfoWrap = ({
        >
          부분취소 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-        { subLi() }
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+          { subLi() }
+          </ul>
+        }
+        </SlideDown>
+       
      </div>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
@@ -3,6 +3,8 @@ import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const PaymentInfoWrap = ({
  transactionCategory,
@@ -114,11 +116,6 @@ export const PaymentInfoWrap = ({
    return rs;
  };

-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Payment);
@@ -134,36 +131,34 @@ export const PaymentInfoWrap = ({
        >
          결제 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-          { (transactionCategory === TransactionCategory.AllTransaction) && 
-            subLi()
-          }
-          { (transactionCategory === TransactionCategory.Escrow) && 
-            <>
-              <li className="kv-row">
-                <span className="k">승인 금액</span>
-                <span className="v">
-                  <NumericFormat
-                    value={ paymentInfo?.paymentAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
-                </span>
-              </li>
-              <li className="kv-row">
-                <span className="k">승인 번호</span>
-                <span className="v">{ paymentInfo?.approvalNumber }</span>
-              </li>
-            </>
-          }
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            { (transactionCategory === TransactionCategory.AllTransaction) && 
+              subLi()
+            }
+            { (transactionCategory === TransactionCategory.Escrow) && 
+              <>
+                <li className="kv-row">
+                  <span className="k">승인 금액</span>
+                  <span className="v">
+                    <NumericFormat
+                      value={ paymentInfo?.paymentAmount } 
+                      thousandSeparator
+                      displayType="text"
+                      suffix='원'
+                    ></NumericFormat>
+                  </span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">승인 번호</span>
+                  <span className="v">{ paymentInfo?.approvalNumber }</span>
+                </li>
+              </>
+            }
+          </ul>
+        }
+        </SlideDown>
      </div>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
@@ -1,8 +1,9 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const SettlementInfoWrap = ({
  transactionCategory,
@@ -90,11 +91,6 @@ export const SettlementInfoWrap = ({
    return rs;
  };

-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Settlement);
@@ -110,15 +106,13 @@ export const SettlementInfoWrap = ({
        >
          정산 정보 <DetailArrow show={ show }></DetailArrow>
        </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
          { subLi() }
-        </motion.ul>
+          </ul>
+        }
+        </SlideDown>
      </div>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
+++ b/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
@@ -1,8 +1,9 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';

 export const TransactionInfoWrap = ({
  transactionCategory,
@@ -93,12 +94,6 @@ export const TransactionInfoWrap = ({
    return rs;
  };

-
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
  const onClickToSetShowInfo = () => {
    if(!!onClickToShowInfo){
      onClickToShowInfo(InfoWrapKeys.Transaction);
@@ -110,17 +105,13 @@ export const TransactionInfoWrap = ({
      <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
        <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 }}
-        >
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&  
+          <ul className="kv-list">
          { (transactionCategory === TransactionCategory.AllTransaction) && 
            subLi()
          }
@@ -136,8 +127,9 @@ export const TransactionInfoWrap = ({
              </li>
            </>
          }
-          
-        </motion.ul>
+          </ul>
+        }
+        </SlideDown>
      </div>
    </>
  )
--- a/src/pages/settlement/list/detail-page.tsx
+++ b/src/pages/settlement/list/detail-page.tsx
@@ -1,15 +1,21 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { DetailAmountInfo } from '@/entities/settlement/ui/detail-amount-info';
-import { DetailSettlementInfo } from '@/entities/settlement/ui/detail-settlement-info';
+import { AmountInfoWrap } from '@/entities/settlement/ui/info-wrap/amount-info-wrap';
+import { SettlementInfoWrap } from '@/entities/settlement/ui/info-wrap/settlement-info-wrap';
+import { TransactionInfoWrap } from '@/entities/settlement/ui/info-wrap/transaction-info-wrap'
 import { HeaderType } from '@/entities/common/model/types';
 import { 
-  SettlementDetailParams,
-  DetailResponse,
-  DetailAmountInfoProps,
-  DetailSettlementInfoProps,
+  AmountInfo,
+  InfoWrapKeys,
+  SettlementInfo,
+  SettlementPeriodType,
+  SettlementsHistoryDetailParams,
+  SettlementsHistoryDetailResponse,
+  SettlementsTransactionDetailParams,
+  SettlementsTransactionDetailResponse,
+  TransactionInfo
 } from '@/entities/settlement/model/types';
 import {
  useSetOnBack, 
@@ -17,15 +23,33 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/use-settlements-history-detail-mutation';
+import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
+import { NumericFormat } from 'react-number-format';
+import moment from 'moment';

 export const DetailPage = () => {
  const { navigate } = useNavigate();
-  const { tid } = useParams();
+  const location = useLocation();
+  
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [settlementAmount, setSettlementAmount] = useState<number>();
+  const [settlementDate, setSettlementDate] = useState<string>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [transactionAmount, setTransactionAmount] = useState<number>();
+  const [merchantName, setMerchantName] = useState<string>();

-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
  const [showSettlement, setShowSettlement] = useState<boolean>(false);
+  const [showTransaction, setShowTransaction] = useState<boolean>(false);
+
+  const { mutateAsync: settlementsHistoryDetail } = useSettlementsHistoryDetailMutation();
+  const { mutateAsync: settlementsTransactionDetail } = useSettlementsTransactionDetailMutation();
+  
+  const settlementId = location.state.settlementId;
+  const approvalNumber = location.state.approvalNumber;
+  const periodType = location.state.periodType;
+  

  useSetHeaderTitle('정산내역 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -34,15 +58,49 @@ export const DetailPage = () => {
  });
  useSetFooterMode(false);

-  const onClickToShowInfo = (info: string) => {
-    if(info === 'amount'){
-      setShowAmount(!showAmount);
-    }
-    else if(info === 'settlement'){
+  const callSettlementDetail = () => {
+    let params: SettlementsHistoryDetailParams = {
+      settlementId: settlementId
+    };
+
+    settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
+      setAmountInfo(rs.amountInfo);
+      setSettlementInfo(rs.settlementInfo);
+      setSettlementAmount(rs.settlementAmount);
+      setSettlementDate(rs.settlementDate);
+    });
+  };
+  const callTransactionDetail = () => {
+    let params: SettlementsTransactionDetailParams = {
+      approvalNumber: approvalNumber
+    };
+
+    settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
+      setAmountInfo(rs.amountInfo);
+      setTransactionInfo(rs.transactionInfo);
+      setTransactionAmount(rs.transactionAmount);
+      setMerchantName(rs.merchantName);
+    });
+  };
+  
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Settlement){
      setShowSettlement(!showSettlement);
    }
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
+      setShowTransaction(!showTransaction);
+    }
  };

+  useEffect(() => {
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
+      callSettlementDetail();
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
+      callTransactionDetail();
+    }
+  }, []);
+
  return (
    <>
      <main>
@@ -50,33 +108,57 @@ export const DetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <div className="txn-num-group">
-                  <div className="txn-amount">
-                    <div className="value">63,736,320<span className="unit">원</span></div>
-                    {/*
-                    <button className="chip-btn" type="button">금액상세 <img src="../images/select_arrow.svg" alt="펼치기"/></button>
-                    */}
+                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                  <div className="txn-num-group">
+                    <div className="txn-amount">
+                      <div className="value">
+                        <NumericFormat
+                          value={ settlementAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat><span className="unit">원</span>
+                      </div>
+                    </div>
+                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
                  </div>
-                  <div className="txn-date">2025.06.08</div>
-                </div>
+                }
+                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                  <div className="txn-num-group">
+                    <div className="txn-amount">
+                      <div className="value">
+                        <NumericFormat
+                          value={ transactionAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat><span className="unit">원</span>
+                      </div>
+                    </div>
+                    <div className="txn-date">{ merchantName }</div>
+                  </div>
+                }
                <div className="txn-divider minus"></div>
-                <DetailAmountInfo
+                
+                <AmountInfoWrap
+                  periodType={ periodType }
                  amountInfo={ amountInfo }
-                  show={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
+                ></AmountInfoWrap>
                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
+                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                  <SettlementInfoWrap
+                    settlementInfo={ settlementInfo }
+                    show={ showSettlement }
+                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  ></SettlementInfoWrap>
+                }
+                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                  <TransactionInfoWrap
+                    transactionInfo={ transactionInfo }
+                    show={ showTransaction }
+                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  ></TransactionInfoWrap>
+                }
              </div>
            </div>
-            <div className="apply-row">
-              <button className="btn-50 btn-blue flex-1">거래 취소</button>
-            </div>
          </div>
        </div>
      </main>
--- a/src/pages/settlement/settlement-pages.tsx
+++ b/src/pages/settlement/settlement-pages.tsx
@@ -3,6 +3,7 @@ import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { CalendarPage } from './calendar/calendar-page';
 import { ListPage } from './list/list-page';
+import { DetailPage } from './list/detail-page';

 export const SettlementPages = () => {
  return (
@@ -10,6 +11,7 @@ export const SettlementPages = () => {
      <SentryRoutes>
        <Route path={ROUTE_NAMES.settlement.calendar} element={<CalendarPage />} />
        <Route path={ROUTE_NAMES.settlement.list} element={<ListPage />} />
+        <Route path={ROUTE_NAMES.settlement.detail} element={<DetailPage />} />
      </SentryRoutes>
    </>
  );
--- a/src/shared/api/api-url-settlement.ts
+++ b/src/shared/api/api-url-settlement.ts
@@ -0,0 +1,37 @@
+import { 
+  API_BASE_URL,
+  API_URL_KEY,
+} from './../constants/url';
+
+/* Settlement Management = 정산 API */
+export const API_URL_SETTLEMENT = {
+  settlementsTransactionSummary: () => {
+     // POST: 정산내역 거래건별 요약 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/transaction/summary`;
+  },
+  settlementsTransactionList: () => {
+    // POST: 정산내역 거래건별 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/transaction/list`;
+  },
+  settlementsTransactionDetail: () => {
+    // POST: 정산내역 거래건별 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/transaction/detail`;
+  },
+  settlementsHistory: () => {
+    // POST: 정산내역 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/history`;
+  },
+  settlementsHistorySummary: () => {
+    // POST: 정산내역 요약 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/history/summary`;
+  },
+  settlementsHistoryDetail: () => {
+    // POST: 정산내역 거래건별 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/history/detail`;
+  },
+  settlementsCalendar: () => {
+    // POST: 정산내역 거래건별 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/settlements/calendar`;
+  },
+
+};
--- a/src/shared/api/urls.ts
+++ b/src/shared/api/urls.ts
@@ -91,15 +91,6 @@ export const API_URL = {
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/codes/cache/refresh/${codeCl}`;
  },

-
-  settlementList: () => {
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/list`;
-  },
-
-  businessMemberInfo: () => {
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
-  },
-
  /* User Management - 사용자 관리 API */
  userExistsUserid: () => {
    // 중복 사용자 ID 확인
@@ -109,6 +100,11 @@ export const API_URL = {
    // 사용자 추가
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/user/create`;
  },
+
+  // 가맹정 API 추가후 삭제
+  businessMemberInfo: () => {
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/transaction/detail`;
+  },
  

  /* Empty Token API Management - jwt 토큰이 없는 API 관리 */
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -30,7 +30,7 @@ export const ROUTE_NAMES = {
    base: '/settlement/*',
    calendar: 'calendar',
    list: 'list',
-    detail: 'detail/:tid',
+    detail: 'detail/:detailId',
  },
  businessMember: {
    base: '/business-member/*',
--- a/src/shared/ui/assets/css/style-fix.css
+++ b/src/shared/ui/assets/css/style-fix.css
@@ -15,28 +15,25 @@ main {
  -ms-overflow-style: none;
  scrollbar-width: none;
 }
+.tab-content{
+  overflow-y: unset;
+}

 .ic20.rot-180{
  transform: rotate(180deg);
 }
-.txn-divider{
-  z-index: 20;
-}
-.txn-section{
-  z-index: 20;
-  background-color: #ffffff;
-}
-.kv-list{
-  padding-bottom: 20px;
-  z-index: 10;
-}

 /* calendar */
 .react-calendar{
  margin: 10% auto;
-
 }

+.kv-list{
+  padding-bottom: 20px;
+}
+.txn-divider{
+  margin-top: 0px;
+}

 header{
 padding-top: env(safe-area-inset-top) !important;
--- a/src/widgets/pull-to-refresh/pull-to-refresh.tsx
+++ b/src/widgets/pull-to-refresh/pull-to-refresh.tsx
@@ -241,9 +241,11 @@ export const PullToRefresh: React.FC<PullToRefreshProps> = ({
      */}
      <div className="ptr__children" ref={childrenRef}>
        {children}
+        {/*
        <div className="ptr__fetch-more" ref={fetchMoreRef}>
          <div className="ptr__loader ptr__fetch-more--loading">{refreshingContent}</div>
        </div>
+        */}
      </div>
    </div>
  );