필터 수정

src/pages/transaction/billing/list-page.tsx

@@ -19,18 +19,17 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const serviceCodes = [
-	{name: '전체', key: 'all'},
-	{name: '진행중', key: 'process'},
-	{name: '성공', key: 'success'},
-	{name: '요청취소', key: 'cancel'}
+const requestStatusBtnGroup = [
+	{name: '전체', value: BillingRequestStatus.ALL},
+	{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
+	{name: '성공', value: BillingRequestStatus.SUCCESS},
+	{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}
 ];
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
-	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -44,7 +43,9 @@ export const BillingListPage = () => {
 	const [requestStatus, setRequestStatus] = useState<BillingRequestStatus>(BillingRequestStatus.ALL);
 	const [processResult, setProcessResult] = useState<BillingProcessResult>(BillingProcessResult.ALL);
 	const [paymentMethod, setPaymentMethod] = useState<BillingPaymentMethod>(BillingPaymentMethod.ALL);
-		
+	const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();
+
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
@@ -61,6 +62,14 @@ export const BillingListPage = () => {
   }) => {
 		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 listParams = {
       mid: mid,
       searchType: searchType,
@@ -70,6 +79,8 @@ export const BillingListPage = () => {
       requestStatus: requestStatus,
       processResult: processResult,
       paymentMethod: paymentMethod,
+			minAmount: newMinAmount,
+			maxAmount: newMaxAmount,
 			pagination: pageParam
     };    
     
@@ -110,8 +121,8 @@ export const BillingListPage = () => {
     callList({sortBy: sort});
   };
 
-	const onClickToServiceCode = (val: string) => {
-    setSelectedServiceCode(val);
+	const onClickToRequestStatus = (val: BillingRequestStatus) => {
+    setRequestStatus(val);
     callList({val: val});
   };
 
@@ -159,11 +170,11 @@ export const BillingListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									serviceCodes.map((value, index) => (
+									requestStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
+											onClick={ () => onClickToRequestStatus(value.value) }
 										>{ value.name }</span>
 									))
 								}
@@ -188,6 +199,8 @@ export const BillingListPage = () => {
 				requestStatus={ requestStatus }
 				processResult={ processResult }
 				paymentMethod={ paymentMethod }
+				minAmount={ minAmount }
+				maxAmount={ maxAmount }
 				setMid={ setMid }
 				setSearchType={ setSearchType }
 				setSearchKeyword={ setSearchKeyword }
@@ -196,6 +209,8 @@ export const BillingListPage = () => {
 				setRequestStatus={ setRequestStatus }
 				setProcessResult={ setProcessResult }
 				setPaymentMethod={ setPaymentMethod }
+				setMinAmount={ setMinAmount }
+				setMaxAmount={ setMaxAmount }
       ></BillingFilter>
 		</>
 	);