필터 수정

src/entities/common/model/types.ts

@@ -1,3 +1,9 @@
+import { 
+  BillingPaymentMethod, 
+  BillingProcessResult, 
+  BillingRequestStatus 
+} from '@/entities/transaction/model/types';
+
 export enum SuccessResult {
   SUCCESS = 'SUCCESS',
   FAIL = 'FAIL'
@@ -27,6 +33,23 @@ export enum HeaderType {
   LeftArrow = 'LeftArrow',
   RightClose = 'RightClose',
 };
+export interface FilterRangeAmountProps {
+  title?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMinAmount: (minAmount: number | string) => void;
+  setMaxAmount: (maxAmount: number | string) => void;
+};
+export interface FilterButtonGroupsProps {
+  title: string;
+  activeValue?: string;
+  btnGroups?: Array<ButtonItemProp>
+  setter: (value: any) => void;
+};
+export interface ButtonItemProp {
+  name?: string;
+  value?: string;
+};
 export interface HeaderNavigationProps {
   onBack?: (() => void) | undefined;
   headerTitle?: string;

src/entities/transaction/model/types.ts

@@ -463,6 +463,8 @@ export interface BillingFilterProps extends FilterProps {
   requestStatus: BillingRequestStatus;
   processResult: BillingProcessResult;
   paymentMethod: BillingPaymentMethod;
+  minAmount?: number | string;
+  maxAmount?: number | string;
   setMid: (mid: string) => void;
   setSearchType: (searchType: BillingSearchType) => void;
   setSearchKeyword: (searchKeyword: string) => void;
@@ -471,6 +473,8 @@ export interface BillingFilterProps extends FilterProps {
   setRequestStatus: (requestStatus: BillingRequestStatus) => void;
   setProcessResult: (processResult: BillingProcessResult) => void;
   setPaymentMethod: (paymentMethod: BillingPaymentMethod) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
 };
 
 export interface CashReceiptPurposeUpdateParams {

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -12,6 +12,8 @@ import {
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { useEffect } from 'react';
 
 export const BillingFilter = ({
   filterOn,
@@ -24,6 +26,8 @@ export const BillingFilter = ({
   requestStatus,
   processResult,
   paymentMethod,
+  minAmount,
+  maxAmount,
   setMid,
   setSearchType,
   setSearchKeyword,
@@ -31,7 +35,9 @@ export const BillingFilter = ({
   setEndDate,
   setRequestStatus,
   setProcessResult,
-  setPaymentMethod
+  setPaymentMethod,
+  setMinAmount,
+  setMaxAmount
 }: BillingFilterProps) => {
 
   const [filterMid, setFilterMid] = useState<string>(mid);
@@ -42,7 +48,8 @@ export const BillingFilter = ({
   const [filterRequestStatus, setFilterRequestStatus] = useState<BillingRequestStatus>(requestStatus);
   const [filterProcessResult, setFilterProcessResult] = useState<BillingProcessResult>(processResult);
   const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
-
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
   const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
   const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
 
@@ -56,39 +63,7 @@ export const BillingFilter = ({
   const onClickToClose = () => {
     setFilterOn(false);
   };
-  const setFilterDate = (dateOptions: FilterDateOptions) => {
+  
-    if(dateOptions === FilterDateOptions.Today){
-      setFilterStartDate(moment().format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Today);
-    } 
-    else if(dateOptions === FilterDateOptions.Week){
-      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Week);
-    }
-    else if(dateOptions === FilterDateOptions.Month){
-      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
-      setDateReadyOnly(true);
-      setFilterDateOptionsBtn(FilterDateOptions.Month);
-    }
-    else if(dateOptions === FilterDateOptions.Input){
-      setDateReadyOnly(false);
-      setFilterDateOptionsBtn(FilterDateOptions.Input);
-    }
-  };
-  const onClickToOpenCalendar = () => {
-    if(!dateReadOnly){
-      setCalendarOpen(true);
-    }
-    else{
-      setCalendarOpen(false);
-    }
-  };
-
   const setNewDate = (newDate: any) => {
     console.log(newDate)
   };
@@ -102,6 +77,7 @@ export const BillingFilter = ({
     setRequestStatus(filterRequestStatus);
     setProcessResult(filterProcessResult);
     setPaymentMethod(filterPaymentMethod);
+    onClickToClose();
 	};
 
   let requestStatusBtnGroup = [
@@ -121,6 +97,11 @@ export const BillingFilter = ({
     {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
     {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
   ];
+
+  useEffect(() => {
+    setFilterRequestStatus(requestStatus);
+  }, [requestStatus]);
+
   return (
     <>
       <motion.div 
@@ -208,24 +189,14 @@ export const BillingFilter = ({
               setter={ setFilterPaymentMethod }
             ></FilterButtonGroups>
             
-            <div className="opt-field">
+            <FilterRangeAmount
-              <div className="opt-label">거래금액</div>
+              title='거래금액'
-              <div className="opt-controls">
+              minAmount={ filterMinAmount }
-                <div className="input-wrapper ">
+              maxAmount={ filterMaxAmount }
-                  <input
+              setMinAmount={ setFilterMinAmount }
-                    type="text"
+              setMaxAmount={ setFilterMaxAmount }
-                    placeholder=""
+            ></FilterRangeAmount>
-                  />
+            
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
           </div>
           <div className="apply-row">
             <button 

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

@@ -19,18 +19,17 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const serviceCodes = [
+const requestStatusBtnGroup = [
-	{name: '전체', key: 'all'},
+	{name: '전체', value: BillingRequestStatus.ALL},
-	{name: '진행중', key: 'process'},
+	{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
-	{name: '성공', key: 'success'},
+	{name: '성공', value: BillingRequestStatus.SUCCESS},
-	{name: '요청취소', key: 'cancel'}
+	{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) => {
+	const onClickToRequestStatus = (val: BillingRequestStatus) => {
-    setSelectedServiceCode(val);
+    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': ''}` }
+											className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											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>
 		</>
 	);

src/shared/ui/filter/button-groups.tsx

@@ -1,13 +1,5 @@
-interface FilterButtonGroupsProps {
+import { FilterButtonGroupsProps } from '@/entities/common/model/types';
-  title: string;
+
-  activeValue?: string;
-  btnGroups?: Array<ButtonItemProp>
-  setter: any;
-};
-interface ButtonItemProp {
-  name?: string;
-  value?: string;
-};
 export const FilterButtonGroups = ({
   title,
   activeValue,
@@ -23,7 +15,7 @@ export const FilterButtonGroups = ({
         rs.push(
           <span 
             className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
-            onClick={ () => setter(btnGroups[i]?.value) }
+            onClick={ () => setter(btnGroups[i]?.value || '') }
           >{ btnGroups[i]?.name }</span>
         )
       }

src/shared/ui/filter/filter-calendar.tsx

@@ -23,26 +23,24 @@ export const FilterCalendar = ({
   const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간');
   const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
   const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
-  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
   
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
-      setFilterStartDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Today);
     } 
     else if(dateOptions === FilterDateOptions.Week){
-      setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Week);
     }
     else if(dateOptions === FilterDateOptions.Month){
-      setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setEndDate(moment().format('YYYY-MM-DD'));
       setDateReadyOnly(true);
       setFilterDateOptionsBtn(FilterDateOptions.Month);
     }
@@ -50,6 +48,7 @@ export const FilterCalendar = ({
       setDateReadyOnly(false);
       setFilterDateOptionsBtn(FilterDateOptions.Input);
     }
+    
   };
 
   const onClickToOpenCalendar = () => {
@@ -93,7 +92,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ filterStartDate }
+                value={ startDate }
                 readOnly={ true }
               />
               <button
@@ -113,7 +112,7 @@ export const FilterCalendar = ({
                 className="date-input"
                 type="text"
                 placeholder="날짜 선택"
-                value={ filterEndDate }
+                value={ endDate }
                 readOnly={ true }
               />
               <button 

src/shared/ui/filter/range-amount.tsx

@@ -0,0 +1,44 @@
+import { FilterRangeAmountProps } from '@/entities/common/model/types';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { ChangeEvent } from 'react';
+
+export const FilterRangeAmount = ({
+  title,
+  minAmount,
+  maxAmount,
+  setMinAmount,
+  setMaxAmount,
+}: FilterRangeAmountProps) => {
+  const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
+
+  useEffect(() => {
+    setFilterTitle(title || '거래금액');
+  }, [title])
+  return (
+    <>
+      <div className="opt-field">
+        <div className="opt-label">{ filterTitle }</div>
+        <div className="opt-controls">
+          <div className="input-wrapper ">
+            <input
+              type="text"
+              placeholder=""
+              value={ minAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
+            />
+          </div>
+          <span> ~ </span>
+          <div className="input-wrapper date">
+            <input
+              type="text"
+              placeholder=""
+              value={ maxAmount }
+              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+};