Investigate budget data issues

Investigate why budget and expense cards are not displaying correctly and why budget is showing as 0 on other pages.

src/components/BudgetTabContent.tsx

@@ -58,6 +58,7 @@ const BudgetTabContent: React.FC<BudgetTabContentProps> = ({
   // 카테고리 예산 저장
   const handleSaveCategoryBudgets = () => {
     const totalBudget = calculateTotalBudget();
+    console.log('카테고리 예산 저장 및 총 예산 설정:', totalBudget, categoryBudgets);
     onSaveBudget(totalBudget, categoryBudgets);
     setShowBudgetInput(false);
   };

src/contexts/budget/hooks/useBudgetDataState.ts

@@ -119,8 +119,7 @@ export const useBudgetDataState = (transactions: any[]) => {
   ) => {
     try {
       console.log(`예산 목표 업데이트: ${type}, 금액: ${amount}`);
-      // 월간 예산 직접 업데이트 (카테고리 예산이 없는 경우)
-      if (!newCategoryBudgets) {
+      // 예산 업데이트 (카테고리 예산이 있든 없든 무조건 실행)
       const updatedBudgetData = calculateUpdatedBudgetData(budgetData, type, amount);
       console.log('새 예산 데이터:', updatedBudgetData);
       
@@ -130,7 +129,6 @@ export const useBudgetDataState = (transactions: any[]) => {
       
       // 저장 시간 업데이트
       localStorage.setItem('lastBudgetSaveTime', new Date().toISOString());
-      }
     } catch (error) {
       console.error('예산 목표 업데이트 중 오류:', error);
       toast({

src/contexts/budget/useBudgetState.ts

@@ -1,70 +1,116 @@
 
-import { useCallback } from 'react';
-import { BudgetPeriod } from './types';
-import { useTransactionState } from './hooks/useTransactionState';
-import { useCategoryBudgetState } from './hooks/useCategoryBudgetState';
+import { useState, useEffect, useCallback } from 'react';
+import { BudgetData, BudgetPeriod, Transaction } from './types';
 import { useBudgetDataState } from './hooks/useBudgetDataState';
-import { useCategorySpending } from './hooks/useCategorySpending';
-import { useBudgetBackup } from './hooks/useBudgetBackup';
-import { useBudgetReset } from './hooks/useBudgetReset';
-import { useExtendedBudgetUpdate } from './hooks/useExtendedBudgetUpdate';
+import { useCategoryBudgetState } from './hooks/useCategoryBudgetState';
+import { useTransactionState } from './hooks/useTransactionState';
+import { calculateCategorySpending } from './budgetUtils';
+import { toast } from '@/hooks/useToast.wrapper';
+import { loadCategoryBudgetsFromStorage, saveCategoryBudgetsToStorage } from './storage';
 
+/**
+ * 예산 상태 관리를 위한 메인 훅
+ */
 export const useBudgetState = () => {
-  // 각 상태 관리 훅 사용
+  // 트랜잭션 상태 관리
   const {
     transactions,
     addTransaction,
     updateTransaction,
-    deleteTransaction,
-    resetTransactions
+    deleteTransaction
   } = useTransactionState();
   
+  // 예산 데이터 상태 관리
+  const {
+    budgetData,
+    selectedTab,
+    setSelectedTab,
+    handleBudgetGoalUpdate,
+    resetBudgetData
+  } = useBudgetDataState(transactions);
+
+  // 카테고리 예산 상태 관리
   const {
     categoryBudgets,
-    setCategoryBudgets, 
     updateCategoryBudgets,
     resetCategoryBudgets
   } = useCategoryBudgetState();
 
-  const { 
-    budgetData, 
-    selectedTab, 
-    setSelectedTab, 
-    handleBudgetGoalUpdate,
-    resetBudgetData: resetBudgetDataInternal
-  } = useBudgetDataState(transactions);
+  // 카테고리별 지출 계산
+  const getCategorySpending = useCallback(() => {
+    return calculateCategorySpending(transactions, categoryBudgets);
+  }, [transactions, categoryBudgets]);
 
-  const { getCategorySpending } = useCategorySpending(transactions, categoryBudgets);
+  // 예산 목표 업데이트 함수 (기존 함수 래핑)
+  const handleBudgetUpdate = useCallback((
+    type: BudgetPeriod, 
+    amount: number, 
+    newCategoryBudgets?: Record<string, number>
+  ) => {
+    console.log(`예산 업데이트 시작: ${type}, 금액: ${amount}, 카테고리 예산:`, newCategoryBudgets);
     
-  // 자동 백업 사용
-  useBudgetBackup(budgetData, categoryBudgets, transactions);
+    try {
+      // 카테고리 예산이 제공된 경우
+      if (newCategoryBudgets) {
+        console.log('카테고리 예산도 함께 업데이트:', newCategoryBudgets);
+        // 카테고리 예산 상태 업데이트
+        updateCategoryBudgets(newCategoryBudgets);
         
-  // 확장된 예산 업데이트 로직 사용
-  const { extendedBudgetGoalUpdate } = useExtendedBudgetUpdate(
-    budgetData, 
-    categoryBudgets, 
-    handleBudgetGoalUpdate, 
-    updateCategoryBudgets
-  );
+        // 전체 예산 값도 함께 업데이트 (카테고리 합계와 일치하도록)
+        console.log('전체 예산도 업데이트:', amount);
+      }
       
-  // 리셋 로직 사용
-  const { resetBudgetData } = useBudgetReset(
-    resetTransactions, 
-    resetCategoryBudgets, 
-    resetBudgetDataInternal
-  );
+      // 예산 목표 업데이트 (카테고리 예산이 없는 경우에도 실행)
+      handleBudgetGoalUpdate(type, amount, newCategoryBudgets);
+      
+      // 로컬 스토리지에 직접 저장 - 중복 저장이지만 안전을 위해 추가
+      if (newCategoryBudgets) {
+        saveCategoryBudgetsToStorage(newCategoryBudgets);
+      }
+      
+      console.log('예산 업데이트 완료');
+    } catch (error) {
+      console.error('예산 업데이트 오류:', error);
+      toast({
+        title: "예산 업데이트 실패",
+        description: "예산 설정 중 오류가 발생했습니다.",
+        variant: "destructive"
+      });
+    }
+  }, [handleBudgetGoalUpdate, updateCategoryBudgets]);
+
+  // 모든 데이터 초기화
+  const resetAllData = useCallback(() => {
+    resetBudgetData?.();
+    resetCategoryBudgets();
+  }, [resetBudgetData, resetCategoryBudgets]);
+
+  // 상태 디버깅 (개발 시 유용)
+  useEffect(() => {
+    console.log('BudgetState 훅 - 현재 상태:');
+    console.log('- 예산 데이터:', budgetData);
+    console.log('- 카테고리 예산:', categoryBudgets);
+    console.log('- 트랜잭션 수:', transactions.length);
+  }, [budgetData, categoryBudgets, transactions.length]);
 
   return {
+    // 데이터
     transactions,
-    categoryBudgets,
     budgetData,
+    categoryBudgets,
     selectedTab,
+    
+    // 상태 변경 함수
     setSelectedTab,
     addTransaction,
     updateTransaction,
     deleteTransaction,
-    handleBudgetGoalUpdate: extendedBudgetGoalUpdate,
+    handleBudgetGoalUpdate: handleBudgetUpdate,  // 래핑된 함수 사용
+    
+    // 도우미 함수
     getCategorySpending,
-    resetBudgetData
+    
+    // 데이터 초기화
+    resetBudgetData: resetAllData
   };
 };