오류 수정

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

@@ -1,16 +1,38 @@
 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);
@@ -23,13 +45,79 @@ export const PayoutListPage = () => {
     navigate(PATHS.additionalService.payout.request);
   };
   const onClickToGoDetail = (tid?: string) => {
-    navigate(PATHS.additionalService.payout.detail, {
-      state: {
-        tid: 'A123456'
-      }
+    if(!!tid){
+      navigate(PATHS.additionalService.payout.detail, {
+        state: {
+          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">
-                <button className="sort-btn active">최신순</button>
-                <span className="sort-divider">|</span>
-                <button className="sort-btn">고액순</button>
-              </div>
+              <SortOptionsBox
+                sortBy={ sortBy }
+                onClickToSort={ onClickToSort }
+              ></SortOptionsBox>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
                   <span className="keyword-tag active">전체</span>