Fix type errors in BudgetContext

Addresses type errors related to category budgets in BudgetContext and Index page. Specifically, ensures correct type assignment for category budget updates.

src/components/CategoryBudgetInputs.tsx

@@ -1,16 +1,11 @@
 
 import React from 'react';
 import { Input } from '@/components/ui/input';
-
-interface CategoryBudget {
-  식비: number;
-  생활비: number;
-  교통비: number;
-}
+import { EXPENSE_CATEGORIES } from '@/constants/categoryIcons';
 
 interface CategoryBudgetInputsProps {
-  categoryBudgets: CategoryBudget;
-  handleCategoryInputChange: (value: string, category: keyof CategoryBudget) => void;
+  categoryBudgets: Record<string, number>;
+  handleCategoryInputChange: (value: string, category: string) => void;
 }
 
 const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
@@ -23,7 +18,7 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
   };
 
   // Handle input with comma formatting
-  const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: keyof CategoryBudget) => {
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>, category: string) => {
     // Remove all non-numeric characters before passing to parent handler
     const numericValue = e.target.value.replace(/[^0-9]/g, '');
     handleCategoryInputChange(numericValue, category);
@@ -31,32 +26,16 @@ const CategoryBudgetInputs: React.FC<CategoryBudgetInputsProps> = ({
 
   return (
     <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <label className="text-sm text-gray-600">식비</label>
-        <Input 
-          value={formatWithCommas(categoryBudgets.식비)} 
-          onChange={(e) => handleInput(e, '식비')} 
-          className="neuro-pressed max-w-[150px]" 
-        />
-      </div>
-      
-      <div className="flex items-center justify-between">
-        <label className="text-sm text-gray-600">생활비</label>
-        <Input 
-          value={formatWithCommas(categoryBudgets.생활비)} 
-          onChange={(e) => handleInput(e, '생활비')} 
-          className="neuro-pressed max-w-[150px]" 
-        />
-      </div>
-      
-      <div className="flex items-center justify-between">
-        <label className="text-sm text-gray-600">교통비</label>
-        <Input 
-          value={formatWithCommas(categoryBudgets.교통비)} 
-          onChange={(e) => handleInput(e, '교통비')} 
-          className="neuro-pressed max-w-[150px]" 
-        />
-      </div>
+      {EXPENSE_CATEGORIES.map(category => (
+        <div key={category} className="flex items-center justify-between">
+          <label className="text-sm text-gray-600">{category}</label>
+          <Input 
+            value={formatWithCommas(categoryBudgets[category] || 0)} 
+            onChange={(e) => handleInput(e, category)} 
+            className="neuro-pressed max-w-[150px]" 
+          />
+        </div>
+      ))}
     </div>
   );
 };