From ef239e6126b491a2c943d11a38b500a0f670281b Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 11:08:04 +0000
Subject: [PATCH] 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   | 17 +++++-
 src/components/budget/BudgetInputForm.tsx     | 52 +++++++++++--------
 .../budget/hooks/useExtendedBudgetUpdate.ts   | 12 +++++
 .../budget/utils/budgetCalculation.ts         | 10 ++--
 src/hooks/budget/useBudgetTabContent.ts       | 12 -----
 5 files changed, 64 insertions(+), 39 deletions(-)

diff --git a/src/components/budget/BudgetInputButton.tsx b/src/components/budget/BudgetInputButton.tsx
index dce7585..f5839a4 100644
--- a/src/components/budget/BudgetInputButton.tsx
+++ b/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>
diff --git a/src/components/budget/BudgetInputForm.tsx b/src/components/budget/BudgetInputForm.tsx
index ce7109a..498d551 100644
--- a/src/components/budget/BudgetInputForm.tsx
+++ b/src/components/budget/BudgetInputForm.tsx
@@ -23,35 +23,43 @@ 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">
-        <div>
-          <h3 className="text-base font-medium mb-3">카테고리별 월간 예산 설정</h3>
-          <p className="text-sm text-gray-500 mb-4">카테고리별로 월간 예산을 설정하세요. 일일, 주간 예산은 자동으로 계산됩니다.</p>
-          <CategoryBudgetInputs 
-            categoryBudgets={categoryBudgets} 
-            handleCategoryInputChange={handleCategoryInputChange} 
-          />
+        <form onSubmit={handleSubmit}>
+          <div>
+            <h3 className="text-base font-medium mb-3">카테고리별 월간 예산 설정</h3>
+            <p className="text-sm text-gray-500 mb-4">카테고리별로 월간 예산을 설정하세요. 일일, 주간 예산은 자동으로 계산됩니다.</p>
+            <CategoryBudgetInputs 
+              categoryBudgets={categoryBudgets} 
+              handleCategoryInputChange={handleCategoryInputChange} 
+            />
 
-          <div className="mt-4 border-t border-gray-300 pt-3">
-            <div className="flex justify-between items-center mb-4">
-              <h3 className="font-medium text-sm px-[34px]">월간 총 예산:</h3>
-              <p className="font-bold text-neuro-income text-base px-[10px]">{formatCurrency(calculateTotalBudget())}</p>
-            </div>
+            <div className="mt-4 border-t border-gray-300 pt-3">
+              <div className="flex justify-between items-center mb-4">
+                <h3 className="font-medium text-sm px-[34px]">월간 총 예산:</h3>
+                <p className="font-bold text-neuro-income text-base px-[10px]">{formatCurrency(calculateTotalBudget())}</p>
+              </div>
 
-            <div className="flex justify-end">
-              <Button 
-                onClick={handleSaveCategoryBudgets} 
-                size="sm" 
-                className="bg-neuro-income hover:bg-neuro-income/90 text-white mx-[6px]"
-              >
-                <Check size={18} className="mr-1" />
-                저장하기
-              </Button>
+              <div className="flex justify-end">
+                <Button 
+                  type="submit"
+                  size="sm" 
+                  className="bg-neuro-income hover:bg-neuro-income/90 text-white mx-[6px]"
+                >
+                  <Check size={18} className="mr-1" />
+                  저장하기
+                </Button>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
     </div>
   );
diff --git a/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts b/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts
index e59ec4c..694bedb 100644
--- a/src/contexts/budget/hooks/useExtendedBudgetUpdate.ts
+++ b/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;
diff --git a/src/contexts/budget/utils/budgetCalculation.ts b/src/contexts/budget/utils/budgetCalculation.ts
index 64a0947..7bd588e 100644
--- a/src/contexts/budget/utils/budgetCalculation.ts
+++ b/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;
-    monthlyAmount = Math.round(weeklyAmount * 4.3);
+    // 월 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);
   }
   
diff --git a/src/hooks/budget/useBudgetTabContent.ts b/src/hooks/budget/useBudgetTabContent.ts
index 9c74c88..cef3afa 100644
--- a/src/hooks/budget/useBudgetTabContent.ts
+++ b/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);
@@ -64,13 +59,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;