Fix data display issues

Addresses issues where budget and expense data were not displaying correctly on the summary cards, category bar graph, and transaction/analytics pages. Also fixes a bug where data was disappearing after input.

src/contexts/budget/hooks/useBudgetDataState.ts

@@ -17,72 +17,61 @@ export const useBudgetDataState = (transactions: any[]) => {
   const [budgetData, setBudgetData] = useState<BudgetData>(loadBudgetDataFromStorage());
   const [selectedTab, setSelectedTab] = useState<BudgetPeriod>("daily");
 
-  // 지출 금액 업데이트 - 트랜잭션이 변경될 때마다 실행
+  // 초기 로드 및 이벤트 리스너 설정
   useEffect(() => {
-    // 지출 금액 업데이트
-    const updatedBudgetData = calculateSpentAmounts(transactions, budgetData);
-    
-    // 상태 및 스토리지 모두 업데이트
-    setBudgetData(updatedBudgetData);
-    saveBudgetDataToStorage(updatedBudgetData);
-  }, [transactions, budgetData]);
+    const loadBudget = () => {
+      console.log('예산 데이터 로드 시도');
+      const loadedData = loadBudgetDataFromStorage();
+      setBudgetData(loadedData);
+      console.log('예산 데이터 로드됨:', loadedData);
+    };
 
-  // 이벤트 리스너 설정
-  useEffect(() => {
+    // 초기 로드
+    loadBudget();
+
+    // 이벤트 리스너 설정
     const handleBudgetUpdate = () => {
-      const loadedBudgetData = loadBudgetDataFromStorage();
-      setBudgetData(prevData => {
-        // 예산 목표는 로드된 데이터에서 가져오고, 지출 금액은 유지
-        const updatedData = {
-          daily: {
-            ...loadedBudgetData.daily,
-            spentAmount: prevData.daily.spentAmount,
-          },
-          weekly: {
-            ...loadedBudgetData.weekly,
-            spentAmount: prevData.weekly.spentAmount,
-          },
-          monthly: {
-            ...loadedBudgetData.monthly,
-            spentAmount: prevData.monthly.spentAmount,
-          }
-        };
-        
-        // 남은 금액 재계산
-        updatedData.daily.remainingAmount = updatedData.daily.targetAmount - updatedData.daily.spentAmount;
-        updatedData.weekly.remainingAmount = updatedData.weekly.targetAmount - updatedData.weekly.spentAmount;
-        updatedData.monthly.remainingAmount = updatedData.monthly.targetAmount - updatedData.monthly.spentAmount;
-        
-        return updatedData;
-      });
+      console.log('예산 데이터 업데이트 이벤트 감지');
+      loadBudget();
     };
     
     window.addEventListener('budgetDataUpdated', handleBudgetUpdate);
-    window.addEventListener('categoryBudgetsUpdated', handleBudgetUpdate);
     window.addEventListener('storage', handleBudgetUpdate);
+    window.addEventListener('focus', handleBudgetUpdate);
     
     return () => {
       window.removeEventListener('budgetDataUpdated', handleBudgetUpdate);
-      window.removeEventListener('categoryBudgetsUpdated', handleBudgetUpdate);
       window.removeEventListener('storage', handleBudgetUpdate);
+      window.removeEventListener('focus', handleBudgetUpdate);
     };
   }, []);
 
+  // 지출 금액 업데이트 - 트랜잭션이 변경될 때마다 실행
+  useEffect(() => {
+    if (transactions.length > 0) {
+      console.log('트랜잭션 변경으로 인한 예산 데이터 업데이트');
+      // 지출 금액 업데이트
+      const updatedBudgetData = calculateSpentAmounts(transactions, budgetData);
+      
+      // 상태 및 스토리지 모두 업데이트
+      setBudgetData(updatedBudgetData);
+      saveBudgetDataToStorage(updatedBudgetData);
+    }
+  }, [transactions]);
+
   // 예산 목표 업데이트 함수
   const handleBudgetGoalUpdate = useCallback((
     type: BudgetPeriod, 
     amount: number, 
     newCategoryBudgets?: Record<string, number>
   ) => {
+    console.log(`예산 목표 업데이트: ${type}, 금액: ${amount}`);
     // 월간 예산 직접 업데이트 (카테고리 예산이 없는 경우)
     if (!newCategoryBudgets) {
       const updatedBudgetData = calculateUpdatedBudgetData(budgetData, type, amount);
       setBudgetData(updatedBudgetData);
       saveBudgetDataToStorage(updatedBudgetData);
       
-      // 이벤트 발생시키기
-      window.dispatchEvent(new Event('budgetDataUpdated'));
-      
       toast({
         title: "목표 업데이트 완료",
         description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`