From 92ae235b680ef60c3d072218662e6f980b5be507 Mon Sep 17 00:00:00 2001
From: "focp212@naver.com" <focp212@naver.com>
Date: Wed, 29 Oct 2025 10:06:15 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=EA=B7=B8=20=ED=94=BD=EC=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/entities/common/model/types.ts            |  4 +--
 .../ui/all-transaction-part-cancel.tsx        |  1 -
 src/shared/ui/filter/range-amount.tsx         | 28 ++++++++++++-------
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/entities/common/model/types.ts b/src/entities/common/model/types.ts
index f5a9b02..faf72da 100644
--- a/src/entities/common/model/types.ts
+++ b/src/entities/common/model/types.ts
@@ -52,8 +52,8 @@ export interface FilterRangeAmountProps {
   title?: string;
   minAmount?: number;
   maxAmount?: number;
-  setMinAmount: (minAmount: number) => void;
-  setMaxAmount: (maxAmount: number) => void;
+  setMinAmount: (minAmount: number | undefined) => void;
+  setMaxAmount: (maxAmount: number | undefined) => void;
 };
 export interface FilterButtonGroupsProps {
   title: string;
diff --git a/src/entities/transaction/ui/all-transaction-part-cancel.tsx b/src/entities/transaction/ui/all-transaction-part-cancel.tsx
index cef3dfc..dde9e51 100644
--- a/src/entities/transaction/ui/all-transaction-part-cancel.tsx
+++ b/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 }
diff --git a/src/shared/ui/filter/range-amount.tsx b/src/shared/ui/filter/range-amount.tsx
index 585d09c..565f829 100644
--- a/src/shared/ui/filter/range-amount.tsx
+++ b/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
-              type="number"
-              placeholder=""
+            <NumericFormat
               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
-              type="number"
-              placeholder=""
+            <NumericFormat
               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>