오류 수정

src/entities/additional-service/model/payout/constant.ts

@@ -0,0 +1,12 @@
+import { PayoutSearchCl, PayoutDisbursementStatus } from './types';
+
+export const PayoutSearchClBtnGroup = [
+  {name: '요청일자', value: PayoutSearchCl.REQUEST_DATE },
+  {name: '지급일자', value: PayoutSearchCl.PROXY_DATE }
+];
+export const PayoutDisbursementStatusBtnGroup = [
+  {name: '전체', value: PayoutDisbursementStatus.ALL},
+  {name: '요청', value: PayoutDisbursementStatus.REQUEST},
+  {name: '성공', value: PayoutDisbursementStatus.SUCCESS},
+  {name: '실패', value: PayoutDisbursementStatus.FAIL},
+];

src/entities/additional-service/model/payout/types.ts

@@ -23,8 +23,8 @@ export interface ExtensionPayoutListParams {
   fromDate: string;
   toDate: string;
   disbursementStatus: PayoutDisbursementStatus;
-  minAmount: number;
+  minAmount?: number | string;
-  maxAmount: number;
+  maxAmount?: number | string;
   page?: DefaultRequestPagination;
 };
 export interface ExtensionPayoutListResponse extends DefaulResponsePagination{

src/entities/additional-service/ui/filter/payout-filter.tsx

@@ -0,0 +1,163 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  PayoutDisbursementStatus,
+  PayoutSearchCl
+} from '../../model/payout/types';
+import { 
+  PayoutSearchClBtnGroup,
+  PayoutDisbursementStatusBtnGroup
+} from '../../model/payout/constant';
+import { 
+  FilterMotionDuration, 
+  FilterMotionStyle, 
+  FilterMotionVariants
+} from '@/entities/common/model/constant';
+
+export interface PayoutFilterProps {
+  filterOn: boolean;
+  setFilterOn: (filterOn: boolean) => void;
+  mid: string;
+  searchCl: PayoutSearchCl;
+  fromDate: string;
+  toDate: string;
+  disbursementStatus: PayoutDisbursementStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMid: (mid: string) => void;
+  setSearchCl: (searchCl: PayoutSearchCl) => void;
+  setFromDate: (fromDate: string) => void;
+  setToDate: (toDate: string) => void;
+  setDisbursementStatus: (disbursementStatus: PayoutDisbursementStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+};
+
+export const PayoutFilter = ({
+  filterOn,
+  setFilterOn,
+  mid,
+  searchCl,
+  fromDate,
+  toDate,
+  disbursementStatus,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchCl,
+  setFromDate,
+  setToDate,
+  setDisbursementStatus,
+  setMinAmount,
+  setMaxAmount
+}: PayoutFilterProps) => {
+
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchCl, setFilterSearchCl] = useState<PayoutSearchCl>(searchCl);
+  const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
+  const [filterToDate, setFilterToDate] = useState<string>(toDate);
+  const [filterDisbursementStatus, setFilterDisbursementStatus] = useState<PayoutDisbursementStatus>(disbursementStatus);
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
+  
+  const onClickToClose = () => {
+    setFilterOn(false);
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchCl(filterSearchCl);
+    setFromDate(filterFromDate);
+    setToDate(filterToDate);
+    setDisbursementStatus(filterDisbursementStatus);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    onClickToClose();
+  };
+
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+
+  useEffect(() => {
+    setFilterDisbursementStatus(disbursementStatus);
+  }, [disbursementStatus]);
+
+  return (
+    <>
+      <motion.div 
+        id="fullMenuModal" 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (filterOn)? 'visible': 'hidden' }
+        variants={ FilterMotionVariants }
+        transition={ FilterMotionDuration }
+        style={ FilterMotionStyle }
+      >
+        <div className="full-menu-container">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-actions">
+              <button 
+                id="closeFullMenu"
+                className="full-menu-close"
+              >
+                <img 
+                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  alt="닫기"
+                  onClick={ () => onClickToClose() }
+                />
+              </button>
+            </div>
+          </div>
+          <div className="option-list pt-16">
+            <FilterSelect
+              title='가맹점'
+              selectValue={ filterMid }
+              selectSetter={ setFilterMid }
+              selectOptions={ MidOptions }
+            ></FilterSelect>
+            <FilterButtonGroups
+              title='조회기준'
+              activeValue={ filterSearchCl }
+              btnGroups={ PayoutSearchClBtnGroup }
+              setter={ setFilterSearchCl }
+            ></FilterButtonGroups>
+            <FilterCalendar
+              title='조회기간'
+              startDate={ filterFromDate }
+              endDate={ filterToDate }
+              setStartDate={ setFilterFromDate }
+              setEndDate={ setFilterToDate }
+            ></FilterCalendar>
+            <FilterButtonGroups
+              title='지급상태'
+              activeValue={ filterDisbursementStatus }
+              btnGroups={ PayoutDisbursementStatusBtnGroup }
+              setter={ setDisbursementStatus }
+            ></FilterButtonGroups>
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+          </div>
+          <div className="apply-row">
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};

src/pages/additional-service/intro/intro-page.tsx

@@ -41,7 +41,7 @@ export const IntroPage = () => {
   const requestList = [
     {
       className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
-      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency.list
+      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.payout.list
     },
     {
       className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',

src/pages/additional-service/payout/list-page.tsx

@@ -1,17 +1,39 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { HeaderType } from '@/entities/common/model/types';
+import { HeaderType, SortByKeys } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
+import { useExtensionPayoutListMutation } from '@/entities/additional-service/api/payout/use-extension-payout-list-mutation';
+import { ExtensionPayoutExcelParams, ExtensionPayoutExcelResponse, ExtensionPayoutListParams, ExtensionPayoutListResponse, PayoutDisbursementStatus, PayoutSearchCl } from '@/entities/additional-service/model/payout/types';
+import { useEffect, useState } from 'react';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
 	useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import moment from 'moment';
+import { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
+import { useExtensionPayoutExcelMutation } from '@/entities/additional-service/api/payout/use-extension-payout-excel-mutation';
 
 export const PayoutListPage = () => {
   const { navigate } = useNavigate();
 
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchCl, setSearchCl] = useState<PayoutSearchCl>(PayoutSearchCl.REQUEST_DATE);
+  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [disbursementStatus, setDisbursementStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
+  const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();
+
+  const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
+  const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
+  
   useSetHeaderTitle('지급대행');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -23,13 +45,79 @@ export const PayoutListPage = () => {
     navigate(PATHS.additionalService.payout.request);
   };
   const onClickToGoDetail = (tid?: string) => {
+    if(!!tid){
       navigate(PATHS.additionalService.payout.detail, {
         state: {
-        tid: 'A123456'
+          tid: tid
         }
       });
+    }
   };
 
+  const callExtensionPayoutList = (option?: {
+    sortBy?: string, 
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+    setPageParam(pageParam);
+		let newMinAmount = minAmount;
+		if(!!minAmount && typeof(minAmount) === 'string'){
+			newMinAmount = parseInt(minAmount);
+		}
+		let newMaxAmount = maxAmount;
+		if(!!maxAmount && typeof(maxAmount) === 'string'){
+			newMaxAmount = parseInt(maxAmount);
+		}
+    let params: ExtensionPayoutListParams = {
+      mid: mid,
+      searchCl: searchCl,
+      fromDate: fromDate,
+      toDate: toDate,
+      disbursementStatus: disbursementStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount,
+      page: pageParam
+    };
+    extensionPayoutList(params).then((rs: ExtensionPayoutListResponse) => {
+
+    });
+  };
+
+  const callDownloadExcel = () => {
+     let params: ExtensionPayoutExcelParams = {
+      mid: mid,
+      searchCl: searchCl,
+      fromDate: fromDate,
+      toDate: toDate,
+      disbursementStatus: disbursementStatus,
+      minAmount: minAmount,
+      maxAmount: maxAmount,
+    };
+    extensionPayoutExcel(params).then((rs: ExtensionPayoutExcelResponse) => {
+
+    });
+  };
+
+  const onClickToDownloadExcel = () => {
+    callDownloadExcel();
+  };
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callExtensionPayoutList({sortBy: sort});
+  };
+  const onClickToRequestStatus = (val: PayoutDisbursementStatus) => {
+    setDisbursementStatus(val);
+    callExtensionPayoutList({val: val});
+  };
+
+
+  useEffect(() => {
+    callExtensionPayoutList();
+  }, []);
+
   return (
     <>
       <main>
@@ -41,7 +129,7 @@ export const PayoutListPage = () => {
                   <input 
                     className="credit-period"
                     type="text"
-                    value="2025.06.01 ~ 2025.06.30"
+                    value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
                     readOnly={ true }
                   />
                   <button 
@@ -51,6 +139,7 @@ export const PayoutListPage = () => {
                     <img 
                       src={ IMAGE_ROOT + '/ico_setting.svg' }
                       alt="검색옵션"
+                      onClick={ () => onClickToOpenFilter() }
                     />
                   </button>
                 </div>
@@ -61,6 +150,7 @@ export const PayoutListPage = () => {
                   <img 
                     src={ IMAGE_ROOT + '/ico_download.svg' } 
                     alt="다운로드"
+                    onClick={ () => onClickToDownloadExcel() }
                   />
                 </button>
               </div>
@@ -77,11 +167,10 @@ export const PayoutListPage = () => {
             </section>
 
             <section className="filter-section">
-              <div className="sort-options">
+              <SortOptionsBox
-                <button className="sort-btn active">최신순</button>
+                sortBy={ sortBy }
-                <span className="sort-divider">|</span>
+                onClickToSort={ onClickToSort }
-                <button className="sort-btn">고액순</button>
+              ></SortOptionsBox>
-              </div>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
                   <span className="keyword-tag active">전체</span>

src/shared/ui/menu/index.tsx

@@ -91,7 +91,7 @@ export const Menu = ({
         {title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
         {title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList},
         {title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},
-        {title: '지급대행', path: PATHS.additionalService.paymentAgency.list},
+        {title: '지급대행', path: PATHS.additionalService.payout.list},
       ]
     },
     support: {