버그 픽스

src/entities/common/model/types.ts

@@ -52,8 +52,8 @@ export interface FilterRangeAmountProps {
   title?: string;
   minAmount?: number;
   maxAmount?: number;
-  setMinAmount: (minAmount: number) => void;
+  setMinAmount: (minAmount: number | undefined) => void;
-  setMaxAmount: (maxAmount: number) => void;
+  setMaxAmount: (maxAmount: number | undefined) => void;
 };
 export interface FilterButtonGroupsProps {
   title: string;

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -194,7 +194,6 @@ export const AllTransactionPartCancel = ({
             <span className="value">
               <NumericFormat
                 value={ totalCancelAmount } 
-                thousandSeparator
                 displayType="input"
                 allowNegative={ false }
                 max={ remainAmount }

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

@@ -2,6 +2,7 @@ import { FilterRangeAmountProps } from '@/entities/common/model/types';
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { ChangeEvent } from 'react';
+import { NumericFormat } from 'react-number-format';
 
 export const FilterRangeAmount = ({
   title,
@@ -12,6 +13,13 @@ export const FilterRangeAmount = ({
 }: FilterRangeAmountProps) => {
   const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');
 
+  const onChangeMinAmount = (val?: number) => {
+    setMinAmount(val || undefined);
+  };
+  const onChangeMaxAmount = (val?: number) => {
+    setMaxAmount(val || undefined);
+  }
+
   useEffect(() => {
     setFilterTitle(title || '거래금액');
   }, [title])
@@ -21,21 +29,21 @@ export const FilterRangeAmount = ({
         <div className="opt-label">{ filterTitle }</div>
         <div className="opt-controls">
           <div className="input-wrapper ">
-            <input
+            <NumericFormat
-              type="number"
-              placeholder=""
               value={ minAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(parseInt(e.target.value)) }
+              allowNegative={ false }
-            />
+              displayType="input"
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMinAmount(parseInt(e.target.value)) }
+            ></NumericFormat>
           </div>
           <span> ~ </span>
           <div className="input-wrapper date">
-            <input
+            <NumericFormat
-              type="number"
-              placeholder=""
               value={ maxAmount }
-              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(parseInt(e.target.value)) }
+              allowNegative={ false }
-            />
+              displayType="input"
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onChangeMaxAmount(parseInt(e.target.value)) }
+            ></NumericFormat>
           </div>
         </div>
       </div>