필터 수정

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">
-              <div className="opt-label">거래금액</div>
-              <div className="opt-controls">
-                <div className="input-wrapper ">
-                  <input
-                    type="text"
-                    placeholder=""
-                  />
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
+            <FilterRangeAmount
+              title='거래금액'
+              minAmount={ filterMinAmount }
+              maxAmount={ filterMaxAmount }
+              setMinAmount={ setFilterMinAmount }
+              setMaxAmount={ setFilterMaxAmount }
+            ></FilterRangeAmount>
+            
           </div>
           <div className="apply-row">
             <button