Update budget display and input

- Allow budget progress bar to exceed 100% when over budget.
- Streamline budget input by directly displaying category budgets.

src/components/BudgetCategoriesSection.tsx

@@ -20,9 +20,15 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
       {categories.map((category, index) => {
         // 예산 초과 여부 확인
         const isOverBudget = category.current > category.total && category.total > 0;
+        // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
+        const actualPercentage = category.total > 0 
+          ? Math.round((category.current / category.total) * 100) 
+          : 0;
+        // 프로그레스 바용 퍼센트 (100%로 제한하지 않음)
+        const displayPercentage = actualPercentage;
+        
         // 예산이 얼마 남지 않은 경우 (10% 미만)
-        const percentage = Math.min(Math.round((category.current / (category.total || 1)) * 100), 100);
-        const isLowBudget = category.total > 0 && percentage >= 90 && percentage < 100;
+        const isLowBudget = category.total > 0 && actualPercentage >= 90 && actualPercentage < 100;
         
         // 프로그레스 바 색상 결정
         const progressBarColor = isOverBudget 
@@ -57,7 +63,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
             <div className="relative h-3 neuro-pressed overflow-hidden">
               <div 
                 className={`absolute top-0 left-0 h-full transition-all duration-700 ease-out ${progressBarColor}`}
-                style={{ width: `${percentage}%` }}
+                style={{ width: `${Math.min(displayPercentage, 100)}%` }}
               />
             </div>
             
@@ -66,7 +72,7 @@ const BudgetCategoriesSection: React.FC<BudgetCategoriesSectionProps> = ({
                 {budgetStatusText}{formatCurrency(budgetAmount)}
               </span>
               <span className="text-xs font-medium text-gray-500">
-                {percentage}%
+                {displayPercentage}%
               </span>
             </div>
           </div>