Investigate budget display issue

Examine why budget data is not displaying correctly on the expense and analytics screens, despite being saved successfully.

src/components/BudgetProgressCard.tsx

@@ -1,5 +1,5 @@
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import BudgetTabContent from './BudgetTabContent';
 import { BudgetPeriod } from '@/contexts/budget/BudgetContext';
@@ -31,21 +31,52 @@ const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
   calculatePercentage,
   onSaveBudget
 }) => {
-  // 컴포넌트 마운트 시 예산 데이터 업데이트 이벤트 발생
+  // 데이터 상태 추적 (불일치 감지를 위한 로컬 상태)
+  const [localBudgetData, setLocalBudgetData] = useState(budgetData);
+
+  // 컴포넌트 마운트 및 budgetData 변경 시 업데이트
   useEffect(() => {
-    console.log("BudgetProgressCard 마운트 - 예산 데이터:", budgetData);
+    console.log("BudgetProgressCard 데이터 업데이트 - 예산 데이터:", budgetData);
+    setLocalBudgetData(budgetData);
     
     // 지연 작업으로 이벤트 발생 (컴포넌트 마운트 후 데이터 갱신)
     const timeoutId = setTimeout(() => {
       window.dispatchEvent(new Event('budgetDataUpdated'));
-    }, 500);
+    }, 300);
     
     return () => clearTimeout(timeoutId);
+  }, [budgetData]);
+
+  // budgetDataUpdated 이벤트 감지
+  useEffect(() => {
+    const handleBudgetDataUpdated = () => {
+      console.log("BudgetProgressCard: 예산 데이터 업데이트 이벤트 감지");
+    };
+
+    window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
+    return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
   }, []);
 
+  // 탭 변경 처리 - 예산 데이터 확인
+  const handleTabChange = (value: string) => {
+    console.log(`탭 변경: ${value}, 현재 예산 데이터:`, {
+      daily: budgetData.daily.targetAmount,
+      weekly: budgetData.weekly.targetAmount,
+      monthly: budgetData.monthly.targetAmount
+    });
+    setSelectedTab(value);
+  };
+
+  // 각 탭에 대한 현재 예산 설정 여부 계산
+  const isDailyBudgetSet = budgetData.daily.targetAmount > 0;
+  const isWeeklyBudgetSet = budgetData.weekly.targetAmount > 0;
+  const isMonthlyBudgetSet = budgetData.monthly.targetAmount > 0;
+
+  console.log(`BudgetProgressCard 상태: 일=${isDailyBudgetSet}, 주=${isWeeklyBudgetSet}, 월=${isMonthlyBudgetSet}`);
+
   return (
     <div className="neuro-card mb-6 overflow-hidden w-full">
-      <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
+      <Tabs defaultValue="daily" value={selectedTab} onValueChange={handleTabChange} className="w-full">
         <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
           <TabsTrigger 
             value="daily"

src/components/BudgetTabContent.tsx

@@ -29,13 +29,35 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   const spentAmount = data.spentAmount;
   const targetAmount = data.targetAmount;
 
-  // 예산 설정 여부 확인 (수정: 0보다 큰지만 확인)
+  // 로그 추가 - 받은 데이터 확인
+  useEffect(() => {
+    console.log(`BudgetTabContent 수신 데이터:`, data);
+  }, [data]);
+
+  // 전역 예산 데이터가 변경되었을 때 로컬 상태 갱신
+  useEffect(() => {
+    const handleBudgetDataUpdated = () => {
+      console.log(`BudgetTabContent: 전역 예산 데이터 이벤트 감지, 현재 targetAmount=${targetAmount}`);
+      // 입력 폼이 열려있고 예산이 설정된 경우 폼 닫기
+      if (showBudgetInput && targetAmount > 0) {
+        console.log('예산이 설정되어 입력 폼을 닫습니다.');
+        setShowBudgetInput(false);
+      }
+    };
+
+    window.addEventListener('budgetDataUpdated', handleBudgetDataUpdated);
+    return () => window.removeEventListener('budgetDataUpdated', handleBudgetDataUpdated);
+  }, [showBudgetInput, targetAmount]);
+
+  // 예산 설정 여부 확인 - 데이터 targetAmount가 실제로 0보다 큰지 확인
   const isBudgetSet = targetAmount > 0;
   
-  // 디버깅을 위한 로그 추가
   useEffect(() => {
-    console.log(`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}`);
-  }, [targetAmount, isBudgetSet]);
+    if (isBudgetSet && showBudgetInput) {
+      console.log('예산이 설정되었으므로 입력 폼을 닫습니다.');
+      setShowBudgetInput(false);
+    }
+  }, [isBudgetSet, showBudgetInput]);
 
   // 실제 백분율 계산 (초과해도 실제 퍼센트로 표시)
   const actualPercentage = targetAmount > 0 ? Math.round((spentAmount / targetAmount) * 100) : 0;
@@ -116,12 +138,16 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
 
   // 예산 버튼 클릭 핸들러 - 토글 기능 추가
   const toggleBudgetInput = () => {
+    console.log('예산 입력 폼 토글. 현재 상태:', showBudgetInput, '예산 설정 여부:', isBudgetSet);
     setShowBudgetInput(prev => !prev);
   };
 
   // 예산 여부에 따른 텍스트 결정
   const budgetButtonText = isBudgetSet ? "예산 수정하기" : "예산 입력하기";
 
+  // 화면에 표시할 내용 - 디버깅을 위한 로그 추가
+  console.log(`BudgetTabContent 렌더링: targetAmount=${targetAmount}, isBudgetSet=${isBudgetSet}, 표시될 화면:`, isBudgetSet ? "예산 진행 상황" : "예산 입력하기 버튼");
+
   return (
     <div>
       {isBudgetSet ? (