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/BudgetTabContent.tsx

@@ -1,8 +1,9 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Plus, Wallet } from 'lucide-react';
 import BudgetInputCard from './BudgetInputCard';
 import { Button } from '@/components/ui/button';
+import CategoryBudgetInputs from './CategoryBudgetInputs';
 
 interface BudgetData {
   targetAmount: number;
@@ -23,11 +24,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   calculatePercentage,
   onSaveBudget
 }) => {
+  const [categoryBudgets, setCategoryBudgets] = useState<Record<string, number>>({});
   const [showBudgetInput, setShowBudgetInput] = useState(false);
   
   const spentAmount = data.spentAmount;
   const targetAmount = data.targetAmount;
-  const percentage = calculatePercentage(spentAmount, targetAmount);
+  // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
+  const actualPercentage = targetAmount > 0 
+    ? Math.round((spentAmount / targetAmount) * 100) 
+    : 0;
+  const percentage = actualPercentage;
   const isFirstBudget = targetAmount === 0;
   
   // 예산 초과 여부 계산
@@ -51,6 +57,14 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
     ? formatCurrency(Math.abs(targetAmount - spentAmount))
     : formatCurrency(Math.max(0, targetAmount - spentAmount));
   
+  const handleCategoryInputChange = (value: string, category: string) => {
+    const numValue = parseInt(value, 10) || 0;
+    setCategoryBudgets(prev => ({
+      ...prev,
+      [category]: numValue
+    }));
+  };
+  
   return (
     <div>
       {targetAmount > 0 ? (
@@ -63,7 +77,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           <div className="w-full h-2 neuro-pressed overflow-hidden mb-3">
             <div 
               className={`h-full ${progressBarColor} transition-all duration-700 ease-out`}
-              style={{ width: `${percentage}%` }}
+              style={{ width: `${Math.min(percentage, 100)}%` }}
             />
           </div>
           
@@ -78,7 +92,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
           
           <div className="mt-6">
             <button 
-              onClick={() => setShowBudgetInput(!showBudgetInput)}
+              onClick={() => setShowBudgetInput(true)}
               className="text-neuro-income text-sm font-medium hover:underline flex items-center text-[15px]"
             >
               <Plus size={16} className="mr-1" /> 예산 수정하기
@@ -101,18 +115,41 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
       
       {showBudgetInput && (
         <div className="mt-4">
-          <BudgetInputCard 
-            initialBudgets={{
-              daily: isFirstBudget ? 0 : data.targetAmount,
-              weekly: isFirstBudget ? 0 : data.targetAmount,
-              monthly: isFirstBudget ? 0 : data.targetAmount
-            }}
-            onSave={(type, amount) => {
-              onSaveBudget(amount);
-              setShowBudgetInput(false);
-            }}
-            highlight={isFirstBudget}
-          />
+          <div className="neuro-card p-4">
+            <div className="mb-4">
+              <h3 className="text-base font-medium mb-3">전체 예산 설정</h3>
+              <div className="flex items-center space-x-2">
+                <input
+                  type="text"
+                  className="w-full p-2 rounded neuro-pressed"
+                  placeholder="예산 금액 입력"
+                  value={targetAmount > 0 ? targetAmount : ''}
+                  onChange={(e) => {
+                    const value = e.target.value.replace(/[^0-9]/g, '');
+                    if (value) {
+                      const amount = parseInt(value, 10);
+                      onSaveBudget(amount, categoryBudgets);
+                    }
+                  }}
+                />
+                <Button 
+                  onClick={() => setShowBudgetInput(false)}
+                  size="icon" 
+                  className="bg-neuro-income hover:bg-neuro-income/90 text-white"
+                >
+                  <Wallet size={18} />
+                </Button>
+              </div>
+            </div>
+            
+            <div>
+              <h3 className="text-base font-medium mb-3">카테고리별 예산 설정</h3>
+              <CategoryBudgetInputs
+                categoryBudgets={categoryBudgets}
+                handleCategoryInputChange={handleCategoryInputChange}
+              />
+            </div>
+          </div>
         </div>
       )}
     </div>