Format number inputs with commas

Formats numeric input fields to display commas for every three digits.

src/components/AddTransactionButton.tsx

@@ -30,8 +30,27 @@ const AddTransactionButton = () => {
     }
   });
   
+  // Format number with commas
+  const formatWithCommas = (value: string): string => {
+    // Remove commas first to avoid duplicates when typing
+    const numericValue = value.replace(/[^0-9]/g, '');
+    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatWithCommas(e.target.value);
+    form.setValue('amount', formattedValue);
+  };
+  
   const onSubmit = (data: ExpenseFormValues) => {
-    console.log('Expense data:', data);
+    // Remove commas before processing the amount
+    const numericAmount = data.amount.replace(/,/g, '');
+    const processedData = {
+      ...data,
+      amount: numericAmount
+    };
+    
+    console.log('Expense data:', processedData);
     setShowExpenseDialog(false);
     // 여기에서 실제 데이터 처리 로직을 구현할 수 있습니다
   };
@@ -77,9 +96,9 @@ const AddTransactionButton = () => {
                     <FormLabel>금액</FormLabel>
                     <FormControl>
                       <Input 
-                        type="number" 
                         placeholder="0" 
-                        {...field} 
+                        value={field.value}
+                        onChange={handleAmountChange}
                       />
                     </FormControl>
                   </FormItem>

src/components/BudgetInputCard.tsx

@@ -27,21 +27,18 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
   });
   const [isOpen, setIsOpen] = useState(false);
 
-  // Format for display without commas
-  const formatForInput = (amount: number) => {
-    return amount.toString();
-  };
-
   // Format with commas for display
   const formatWithCommas = (amount: string) => {
-    return amount.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    // Remove commas first to handle re-formatting
+    const numericValue = amount.replace(/,/g, '');
+    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   };
 
   useEffect(() => {
     setBudgetInputs({
-      daily: formatForInput(initialBudgets.daily),
+      daily: initialBudgets.daily.toString(),
-      weekly: formatForInput(initialBudgets.weekly),
+      weekly: initialBudgets.weekly.toString(),
-      monthly: formatForInput(initialBudgets.monthly)
+      monthly: initialBudgets.monthly.toString()
     });
   }, [initialBudgets]);
 
@@ -55,7 +52,7 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
   };
 
   const handleSave = () => {
-    const amount = parseInt(budgetInputs[selectedTab], 10) || 0;
+    const amount = parseInt(budgetInputs[selectedTab].replace(/,/g, ''), 10) || 0;
     onSave(selectedTab, amount);
     // Close the collapsible after saving
     setIsOpen(false);
@@ -86,7 +83,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
 
           <TabsContent value="daily" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
-              <Input value={budgetInputs.daily} onChange={e => handleInputChange(e.target.value, 'daily')} placeholder="목표 금액 입력" className="neuro-pressed" />
+              <Input 
+                value={formatWithCommas(budgetInputs.daily)} 
+                onChange={e => handleInputChange(e.target.value, 'daily')} 
+                placeholder="목표 금액 입력" 
+                className="neuro-pressed" 
+              />
               <Button onClick={handleSave} size="icon" className="neuro-flat text-slate-50 bg-slate-400 hover:bg-slate-300">
                 <Check size={18} />
               </Button>
@@ -96,7 +98,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
 
           <TabsContent value="weekly" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
-              <Input value={budgetInputs.weekly} onChange={e => handleInputChange(e.target.value, 'weekly')} placeholder="목표 금액 입력" className="neuro-pressed" />
+              <Input 
+                value={formatWithCommas(budgetInputs.weekly)} 
+                onChange={e => handleInputChange(e.target.value, 'weekly')} 
+                placeholder="목표 금액 입력" 
+                className="neuro-pressed" 
+              />
               <Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
                 <Check size={18} />
               </Button>
@@ -106,7 +113,12 @@ const BudgetInputCard: React.FC<BudgetGoalProps> = ({
 
           <TabsContent value="monthly" className="space-y-4 mt-0">
             <div className="flex items-center space-x-2">
-              <Input value={budgetInputs.monthly} onChange={e => handleInputChange(e.target.value, 'monthly')} placeholder="목표 금액 입력" className="neuro-pressed" />
+              <Input 
+                value={formatWithCommas(budgetInputs.monthly)} 
+                onChange={e => handleInputChange(e.target.value, 'monthly')} 
+                placeholder="목표 금액 입력" 
+                className="neuro-pressed" 
+              />
               <Button onClick={handleSave} size="icon" className="neuro-flat bg-slate-400 hover:bg-slate-300">
                 <Check size={18} />
               </Button>

src/components/CategoryBudgetInputs.tsx

@@ -17,13 +17,25 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
   categoryBudgets,
   handleCategoryInputChange
 }) => {
+  // Format number with commas for display
+  const formatWithCommas = (value: number): string => {
+    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  // Handle input with comma formatting
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: keyof CategoryBudget) => {
+    // Remove all non-numeric characters before passing to parent handler
+    const numericValue = e.target.value.replace(/[^0-9]/g, '');
+    handleCategoryInputChange(numericValue, category);
+  };
+
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
         <label className="text-sm text-gray-600">식비</label>
         <Input 
-          value={categoryBudgets.식비.toString()} 
+          value={formatWithCommas(categoryBudgets.식비)} 
-          onChange={e => handleCategoryInputChange(e.target.value, '식비')} 
+          onChange={(e) => handleInput(e, '식비')} 
           className="neuro-pressed max-w-[150px]" 
         />
       </div>
@@ -31,8 +43,8 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
       <div className="flex items-center justify-between">
         <label className="text-sm text-gray-600">생활비</label>
         <Input 
-          value={categoryBudgets.생활비.toString()} 
+          value={formatWithCommas(categoryBudgets.생활비)} 
-          onChange={e => handleCategoryInputChange(e.target.value, '생활비')} 
+          onChange={(e) => handleInput(e, '생활비')} 
           className="neuro-pressed max-w-[150px]" 
         />
       </div>
@@ -40,8 +52,8 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
       <div className="flex items-center justify-between">
         <label className="text-sm text-gray-600">교통비</label>
         <Input 
-          value={categoryBudgets.교통비.toString()} 
+          value={formatWithCommas(categoryBudgets.교통비)} 
-          onChange={e => handleCategoryInputChange(e.target.value, '교통비')} 
+          onChange={(e) => handleInput(e, '교통비')} 
           className="neuro-pressed max-w-[150px]" 
         />
       </div>