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 loadBudget = () => {
-    const updatedBudgetData = calculateSpentAmounts(transactions, budgetData);
+      console.log('예산 데이터 로드 시도');
-    
+      const loadedData = loadBudgetDataFromStorage();
-    // 상태 및 스토리지 모두 업데이트
+      setBudgetData(loadedData);
-    setBudgetData(updatedBudgetData);
+      console.log('예산 데이터 로드됨:', loadedData);
-    saveBudgetDataToStorage(updatedBudgetData);
+    };
-  }, [transactions, budgetData]);
 
-  // 이벤트 리스너 설정
+    // 초기 로드
-  useEffect(() => {
+    loadBudget();
+
+    // 이벤트 리스너 설정
     const handleBudgetUpdate = () => {
-      const loadedBudgetData = loadBudgetDataFromStorage();
+      console.log('예산 데이터 업데이트 이벤트 감지');
-      setBudgetData(prevData => {
+      loadBudget();
-        // 예산 목표는 로드된 데이터에서 가져오고, 지출 금액은 유지
-        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;
-      });
     };
     
     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()}원으로 설정되었습니다.`

src/contexts/budget/hooks/useCategoryBudgetState.ts

@@ -12,28 +12,40 @@ export const useCategoryBudgetState = () => {
     loadCategoryBudgetsFromStorage()
   );
 
-  // 이벤트 리스너 설정
+  // 초기 로드 및 이벤트 리스너 설정
   useEffect(() => {
+    const loadCategories = () => {
+      console.log('카테고리 예산 로드 시도');
+      const loaded = loadCategoryBudgetsFromStorage();
+      setCategoryBudgets(loaded);
+      console.log('카테고리 예산 로드됨:', loaded);
+    };
+    
+    // 초기 로드
+    loadCategories();
+    
+    // 이벤트 리스너 설정
     const handleCategoryUpdate = () => {
-      setCategoryBudgets(loadCategoryBudgetsFromStorage());
+      console.log('카테고리 예산 업데이트 이벤트 감지');
+      loadCategories();
     };
     
     window.addEventListener('categoryBudgetsUpdated', handleCategoryUpdate);
     window.addEventListener('storage', handleCategoryUpdate);
+    window.addEventListener('focus', handleCategoryUpdate);
     
     return () => {
       window.removeEventListener('categoryBudgetsUpdated', handleCategoryUpdate);
       window.removeEventListener('storage', handleCategoryUpdate);
+      window.removeEventListener('focus', handleCategoryUpdate);
     };
   }, []);
 
   // 카테고리 예산 업데이트 함수
   const updateCategoryBudgets = useCallback((newCategoryBudgets: Record<string, number>) => {
+    console.log('카테고리 예산 업데이트:', newCategoryBudgets);
     setCategoryBudgets(newCategoryBudgets);
     saveCategoryBudgetsToStorage(newCategoryBudgets);
-    
-    // 로컬 이벤트 발생 (다른 컴포넌트에서 변경 감지하도록)
-    window.dispatchEvent(new Event('categoryBudgetsUpdated'));
   }, []);
 
   // 카테고리 예산 초기화 함수
@@ -45,7 +57,7 @@ export const useCategoryBudgetState = () => {
 
   return {
     categoryBudgets,
-    setCategoryBudgets,
+    setCategoryBudgets: updateCategoryBudgets,
     updateCategoryBudgets,
     resetCategoryBudgets
   };

src/contexts/budget/hooks/useTransactionState.ts

@@ -16,23 +16,32 @@ export const useTransactionState = () => {
   useEffect(() => {
     const loadTransactions = () => {
       const storedTransactions = loadTransactionsFromStorage();
+      console.log('트랜잭션 로드됨:', storedTransactions.length, '개');
       setTransactions(storedTransactions);
     };
 
     loadTransactions();
 
     // 이벤트 리스너를 추가하여 다른 컴포넌트에서 변경 시 업데이트
-    const handleTransactionUpdate = () => loadTransactions();
+    const handleTransactionUpdate = () => {
+      console.log('트랜잭션 업데이트 이벤트 감지');
+      loadTransactions();
+    };
+    
     window.addEventListener('transactionUpdated', handleTransactionUpdate);
     window.addEventListener('transactionDeleted', handleTransactionUpdate);
     window.addEventListener('transactionAdded', handleTransactionUpdate);
     window.addEventListener('storage', handleTransactionUpdate);
     
+    // 페이지 포커스 시 데이터 갱신
+    window.addEventListener('focus', handleTransactionUpdate);
+    
     return () => {
       window.removeEventListener('transactionUpdated', handleTransactionUpdate);
       window.removeEventListener('transactionDeleted', handleTransactionUpdate);
       window.removeEventListener('transactionAdded', handleTransactionUpdate);
       window.removeEventListener('storage', handleTransactionUpdate);
+      window.removeEventListener('focus', handleTransactionUpdate);
     };
   }, []);
 

src/contexts/budget/storage/budgetStorage.ts

@@ -33,6 +33,7 @@ export const saveBudgetDataToStorage = (budgetData: BudgetData): void => {
     console.log('예산 데이터 저장 완료');
     
     // 스토리지 이벤트 수동 트리거 (동일 창에서도 감지하기 위함)
+    window.dispatchEvent(new Event('budgetDataUpdated'));
     window.dispatchEvent(new StorageEvent('storage', {
       key: 'budgetData'
     }));
@@ -51,6 +52,9 @@ export const clearAllBudgetData = (): void => {
     const initialData = getInitialBudgetData();
     saveBudgetDataToStorage(initialData);
     console.log('예산 데이터가 초기화되었습니다.');
+    
+    // 스토리지 이벤트 수동 트리거
+    window.dispatchEvent(new Event('budgetDataUpdated'));
   } catch (error) {
     console.error('예산 데이터 삭제 오류:', error);
   }

src/contexts/budget/storage/categoryStorage.ts

@@ -31,6 +31,7 @@ export const saveCategoryBudgetsToStorage = (categoryBudgets: Record<string, num
     console.log('카테고리 예산 저장 완료:', categoryBudgets);
     
     // 스토리지 이벤트 수동 트리거 (동일 창에서도 감지하기 위함)
+    window.dispatchEvent(new Event('categoryBudgetsUpdated'));
     window.dispatchEvent(new StorageEvent('storage', {
       key: 'categoryBudgets'
     }));
@@ -48,6 +49,9 @@ export const clearAllCategoryBudgets = (): void => {
     // 기본값으로 재설정
     saveCategoryBudgetsToStorage(DEFAULT_CATEGORY_BUDGETS);
     console.log('카테고리 예산이 초기화되었습니다.');
+    
+    // 이벤트 발생
+    window.dispatchEvent(new Event('categoryBudgetsUpdated'));
   } catch (error) {
     console.error('카테고리 예산 삭제 오류:', error);
   }

src/contexts/budget/storage/transactionStorage.ts

@@ -8,7 +8,9 @@ export const loadTransactionsFromStorage = (): Transaction[] => {
   try {
     const storedTransactions = localStorage.getItem('transactions');
     if (storedTransactions) {
-      return JSON.parse(storedTransactions);
+      const parsedData = JSON.parse(storedTransactions);
+      console.log('트랜잭션 로드 완료, 항목 수:', parsedData.length);
+      return parsedData;
     }
   } catch (error) {
     console.error('트랜잭션 데이터 파싱 오류:', error);
@@ -25,6 +27,7 @@ export const saveTransactionsToStorage = (transactions: Transaction[]): void =>
     console.log('트랜잭션 저장 완료, 항목 수:', transactions.length);
     
     // 스토리지 이벤트 수동 트리거 (동일 창에서도 감지하기 위함)
+    window.dispatchEvent(new Event('transactionUpdated'));
     window.dispatchEvent(new StorageEvent('storage', {
       key: 'transactions'
     }));
@@ -44,6 +47,7 @@ export const clearAllTransactions = (): void => {
     console.log('모든 트랜잭션이 삭제되었습니다.');
     
     // 스토리지 이벤트 수동 트리거
+    window.dispatchEvent(new Event('transactionUpdated'));
     window.dispatchEvent(new StorageEvent('storage', {
       key: 'transactions'
     }));

src/contexts/budget/useBudgetState.ts

@@ -6,11 +6,6 @@ import { useTransactionState } from './hooks/useTransactionState';
 import { useCategoryBudgetState } from './hooks/useCategoryBudgetState';
 import { useBudgetDataState } from './hooks/useBudgetDataState';
 import { useCategorySpending } from './hooks/useCategorySpending';
-import {
-  clearAllTransactions,
-  clearAllCategoryBudgets,
-  clearAllBudgetData
-} from './storage';
 
 export const useBudgetState = () => {
   // 각 상태 관리 훅 사용
@@ -39,33 +34,45 @@ export const useBudgetState = () => {
   
   const { getCategorySpending } = useCategorySpending(transactions, categoryBudgets);
 
+  // 디버깅을 위한 로그
+  useEffect(() => {
+    console.log('현재 예산 데이터:', budgetData);
+    console.log('현재 카테고리 예산:', categoryBudgets);
+    console.log('현재 거래 수:', transactions.length);
+  }, [budgetData, categoryBudgets, transactions]);
+
   // 카테고리별 예산 및 지출 계산
   useEffect(() => {
     const totalMonthlyBudget = Object.values(categoryBudgets).reduce((sum, value) => sum + value, 0);
-    const totalDailyBudget = Math.round(totalMonthlyBudget / 30);
+    console.log('카테고리 예산 합계:', totalMonthlyBudget);
-    const totalWeeklyBudget = Math.round(totalMonthlyBudget / 4.3);
-
-    const updatedBudgetData = {
-      daily: {
-        targetAmount: totalDailyBudget,
-        spentAmount: budgetData.daily.spentAmount,
-        remainingAmount: totalDailyBudget - budgetData.daily.spentAmount
-      },
-      weekly: {
-        targetAmount: totalWeeklyBudget,
-        spentAmount: budgetData.weekly.spentAmount,
-        remainingAmount: totalWeeklyBudget - budgetData.weekly.spentAmount
-      },
-      monthly: {
-        targetAmount: totalMonthlyBudget,
-        spentAmount: budgetData.monthly.spentAmount,
-        remainingAmount: totalMonthlyBudget - budgetData.monthly.spentAmount
-      }
-    };
     
-    // 로컬 이벤트 발생 (다른 컴포넌트에서 변경 감지하도록)
+    if (totalMonthlyBudget > 0) {
-    window.dispatchEvent(new Event('budgetDataUpdated'));
+      const totalDailyBudget = Math.round(totalMonthlyBudget / 30);
-  }, [categoryBudgets, budgetData]);
+      const totalWeeklyBudget = Math.round(totalMonthlyBudget / 4.3);
+
+      const updatedBudgetData = {
+        daily: {
+          targetAmount: totalDailyBudget,
+          spentAmount: budgetData.daily.spentAmount,
+          remainingAmount: totalDailyBudget - budgetData.daily.spentAmount
+        },
+        weekly: {
+          targetAmount: totalWeeklyBudget,
+          spentAmount: budgetData.weekly.spentAmount,
+          remainingAmount: totalWeeklyBudget - budgetData.weekly.spentAmount
+        },
+        monthly: {
+          targetAmount: totalMonthlyBudget,
+          spentAmount: budgetData.monthly.spentAmount,
+          remainingAmount: totalMonthlyBudget - budgetData.monthly.spentAmount
+        }
+      };
+      
+      // 로컬 상태 업데이트
+      handleBudgetGoalUpdate('monthly', totalMonthlyBudget);
+      console.log('예산 데이터 자동 업데이트:', updatedBudgetData);
+    }
+  }, [categoryBudgets, handleBudgetGoalUpdate]);
 
   // 모든 데이터 리셋 함수
   const resetBudgetData = useCallback(() => {
@@ -80,11 +87,13 @@ export const useBudgetState = () => {
   }, [resetTransactions, resetCategoryBudgets, resetBudgetDataInternal]);
 
   // 확장된 예산 목표 업데이트 함수
-  const extendedBudgetGoalUpdate = (
+  const extendedBudgetGoalUpdate = useCallback((
     type: BudgetPeriod, 
     amount: number, 
     newCategoryBudgets?: Record<string, number>
   ) => {
+    console.log(`확장된 예산 목표 업데이트: ${type}, 금액: ${amount}, 카테고리 예산:`, newCategoryBudgets);
+    
     // 카테고리 예산이 직접 업데이트된 경우
     if (newCategoryBudgets) {
       updateCategoryBudgets(newCategoryBudgets);
@@ -111,7 +120,7 @@ export const useBudgetState = () => {
       // 일일이나 주간 예산이 직접 업데이트되는 경우
       handleBudgetGoalUpdate(type, amount);
     }
-  };
+  }, [budgetData, categoryBudgets, handleBudgetGoalUpdate, updateCategoryBudgets]);
 
   return {
     transactions,

src/pages/Index.tsx

@@ -37,11 +37,28 @@ const Index = () => {
     }
   }, [isInitialized, checkWelcomeDialogState]);
 
+  // 페이지가 처음 로드될 때 데이터 로딩 확인
+  useEffect(() => {
+    // 데이터 로드 상태 확인
+    console.log('Index 페이지 마운트, 현재 데이터 상태:');
+    console.log('트랜잭션:', transactions.length);
+    console.log('예산 데이터:', budgetData);
+    
+    // 수동으로 이벤트 발생시켜 데이터 갱신
+    window.dispatchEvent(new Event('transactionUpdated'));
+    window.dispatchEvent(new Event('budgetDataUpdated'));
+    window.dispatchEvent(new Event('categoryBudgetsUpdated'));
+  }, []);
+
   // 앱이 포커스를 얻었을 때 데이터를 새로고침
   useEffect(() => {
     const handleFocus = () => {
+      console.log('창이 포커스를 얻음 - 데이터 새로고침');
       // 이벤트 발생시켜 데이터 새로고침
       window.dispatchEvent(new Event('storage'));
+      window.dispatchEvent(new Event('transactionUpdated'));
+      window.dispatchEvent(new Event('budgetDataUpdated'));
+      window.dispatchEvent(new Event('categoryBudgetsUpdated'));
     };
 
     window.addEventListener('focus', handleFocus);