필터 수정

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

@@ -1,13 +1,5 @@
-interface FilterButtonGroupsProps {
-  title: string;
-  activeValue?: string;
-  btnGroups?: Array<ButtonItemProp>
-  setter: any;
-};
-interface ButtonItemProp {
-  name?: string;
-  value?: string;
-};
+import { FilterButtonGroupsProps } from '@/entities/common/model/types';
+
 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'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(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'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'week').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'));
-      setFilterEndDate(moment().format('YYYY-MM-DD'));
+      setStartDate(moment().subtract(1, 'month').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>
+    </>
+  )
+};