Fix budget display and button

- Fix the budget display issue where monthly budgets were showing four amounts instead of one.
- Resolve the functionality of the "Edit Budget" button.

src/components/budget/BudgetInputButton.tsx

@@ -14,12 +14,20 @@ const BudgetInputButton: React.FC<BudgetInputButtonProps> = ({
   budgetButtonText,
   toggleBudgetInput
 }) => {
+  const handleButtonClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('예산 수정 버튼 클릭됨');
+    toggleBudgetInput();
+  };
+
   if (isBudgetSet) {
     return (
       <div className="mt-6">
         <button
-          onClick={toggleBudgetInput}
+          onClick={handleButtonClick}
           className="text-neuro-income hover:underline flex items-center text-base font-semibold group"
+          type="button"
         >
           <CirclePlus size={26} className="mr-2 text-neuro-income transition-transform group-hover:scale-110" />
           <span className="text-base font-semibold">{budgetButtonText}</span>
@@ -31,7 +39,12 @@ const BudgetInputButton: React.FC<BudgetInputButtonProps> = ({
   return (
     <div className="py-4 text-center">
       <div className="text-gray-400 mb-4">아직 예산이 설정되지 않았습니다</div>
-      <Button onClick={toggleBudgetInput} variant="default" className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg">
+      <Button 
+        onClick={handleButtonClick} 
+        variant="default" 
+        className="bg-neuro-income hover:bg-neuro-income/90 animate-pulse shadow-lg"
+        type="button"
+      >
         <CirclePlus className="mr-2" size={24} />
         <span className="animate-pulse">{budgetButtonText}</span>
       </Button>

src/components/budget/BudgetInputForm.tsx

@@ -23,9 +23,16 @@ const BudgetInputForm: React.FC<BudgetInputFormProps> = ({
 }) => {
   if (!showBudgetInput) return null;
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    handleSaveCategoryBudgets();
+  };
+
   return (
     <div className="mt-4">
       <div className="neuro-card p-4">
+        <form onSubmit={handleSubmit}>
           <div>
             <h3 className="text-base font-medium mb-3">카테고리별 월간 예산 설정</h3>
             <p className="text-sm text-gray-500 mb-4">카테고리별로 월간 예산을 설정하세요. 일일, 주간 예산은 자동으로 계산됩니다.</p>
@@ -42,7 +49,7 @@ const BudgetInputForm: React.FC<BudgetInputFormProps> = ({
 
               <div className="flex justify-end">
                 <Button 
-                onClick={handleSaveCategoryBudgets} 
+                  type="submit"
                   size="sm" 
                   className="bg-neuro-income hover:bg-neuro-income/90 text-white mx-[6px]"
                 >
@@ -52,6 +59,7 @@ const BudgetInputForm: React.FC<BudgetInputFormProps> = ({
               </div>
             </div>
           </div>
+        </form>
       </div>
     </div>
   );

src/contexts/budget/hooks/useExtendedBudgetUpdate.ts

@@ -15,6 +15,8 @@ export const useExtendedBudgetUpdate = (
     amount: number, 
     newCategoryBudgets?: Record<string, number>
   ) => {
+    console.log('확장 예산 업데이트 시작:', type, amount, newCategoryBudgets);
+    
     // 기본 예산 목표 업데이트
     handleBudgetUpdate(type, amount);
     
@@ -22,7 +24,17 @@ export const useExtendedBudgetUpdate = (
     if (newCategoryBudgets) {
       console.log('카테고리 예산 업데이트:', newCategoryBudgets);
       setCategoryBudgets(newCategoryBudgets);
+      
+      // 카테고리 예산 업데이트 이벤트 발생
+      setTimeout(() => {
+        window.dispatchEvent(new Event('categoryBudgetsUpdated'));
+      }, 100);
     }
+    
+    // 모든 업데이트가 완료된 후 전역 예산 데이터 업데이트 이벤트 발생
+    setTimeout(() => {
+      window.dispatchEvent(new Event('budgetDataUpdated'));
+    }, 200);
   };
 
   return extendedBudgetUpdate;

src/contexts/budget/utils/budgetCalculation.ts

@@ -22,19 +22,23 @@ export const calculateUpdatedBudgetData = (
   if (type === 'monthly') {
     // 월간 예산이 직접 입력된 경우
     monthlyAmount = amount;
-    // 월 30일 기준 (실제 사용 시 값 확인)
+    // 월 30일 기준
     dailyAmount = Math.round(monthlyAmount / 30);
-    // 월 4.3주 기준 (실제 사용 시 값 확인)
+    // 월 4.3주 기준 (30일 / 7일)
     weeklyAmount = Math.round(monthlyAmount / 4.3);
   } else if (type === 'weekly') {
     // 주간 예산이 직접 입력된 경우
     weeklyAmount = amount;
+    // 월 4.3주 기준 (30일 / 7일)
     monthlyAmount = Math.round(weeklyAmount * 4.3); 
+    // 주 7일 기준
     dailyAmount = Math.round(weeklyAmount / 7);
   } else { // 'daily'
     // 일일 예산이 직접 입력된 경우
     dailyAmount = amount;
+    // 주 7일 기준
     weeklyAmount = Math.round(dailyAmount * 7);
+    // 월 30일 기준
     monthlyAmount = Math.round(dailyAmount * 30);
   }
   

src/hooks/budget/useBudgetTabContent.ts

@@ -51,11 +51,6 @@ export const useBudgetTabContent = ({
   useEffect(() => {
     const handleBudgetDataUpdated = () => {
       console.log(`BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}`);
-      // 입력 폼이 열려있고 예산이 설정된 경우 폼 닫기
-      if (showBudgetInput && targetAmount > 0) {
-        console.log('예산이 설정되어 입력 폼을 닫습니다.');
-        setShowBudgetInput(false);
-      }
     };
 
     window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
@@ -65,13 +60,6 @@ export const useBudgetTabContent = ({
   // 예산 설정 여부 확인 - 데이터 targetAmount가 실제로 0보다 큰지 확인
   const isBudgetSet = targetAmount > 0;
 
-  useEffect(() => {
-    if (isBudgetSet && showBudgetInput) {
-      console.log('예산이 설정되었으므로 입력 폼을 닫습니다.');
-      setShowBudgetInput(false);
-    }
-  }, [isBudgetSet, showBudgetInput]);
-
   // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
   const actualPercentage = targetAmount > 0 ? Math.round((spentAmount / targetAmount) * 100) : 0;
   const percentage = Math.min(actualPercentage, 100); // 대시보드 표시용으로는 100% 제한