Fix: Display 0 for expenses

src/hooks/transactions/filterOperations/index.ts

@@ -3,6 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { Transaction } from '@/contexts/budget/types';
 import { getCurrentMonth, getPrevMonth, getNextMonth } from '../dateUtils';
 import { filterTransactionsByMonth, filterTransactionsByQuery, calculateTotalExpenses } from '../filterUtils';
+import { parseTransactionDate } from '@/utils/dateParser';
 
 interface UseTransactionsFilteringProps {
   transactions: Transaction[];
@@ -28,7 +29,7 @@ export const useTransactionsFiltering = ({
     console.log('트랜잭션 필터링 적용:', { 선택된월: selectedMonth, 검색어: searchQuery });
     
     try {
-      // 먼저 월별 필터링
+      // 먼저 월별 필터링 - 개선된 날짜 처리 기능 사용
       const monthFiltered = filterTransactionsByMonth(transactions, selectedMonth);
       console.log('월별 필터링 결과:', monthFiltered.length);
       
@@ -57,7 +58,7 @@ export const useTransactionsFiltering = ({
     setSelectedMonth(getNextMonth(selectedMonth));
   }, [selectedMonth, setSelectedMonth]);
 
-  // 총 지출 계산 - date-fns 없이도 사용 가능한 단순 버전
+  // 총 지출 계산 - 개선된 계산 로직 사용
   const getTotalExpenses = useCallback((filteredTransactions: Transaction[]): number => {
     console.log('총 지출 계산 중...', filteredTransactions.length);
     const total = calculateTotalExpenses(filteredTransactions);

src/hooks/transactions/filterUtils.ts

@@ -1,8 +1,11 @@
 
 import { Transaction } from '@/contexts/budget/types';
+import { parseTransactionDate } from '@/utils/dateParser';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
 
 /**
- * 월별로 트랜잭션 필터링
+ * 월별로 트랜잭션 필터링 - 개선된 버전
  */
 export const filterTransactionsByMonth = (
   transactions: Transaction[],
@@ -15,6 +18,13 @@ export const filterTransactionsByMonth = (
     console.log('샘플 트랜잭션 날짜:', transactions.slice(0, 3).map(t => t.date));
   }
   
+  // 선택된 월의 숫자 추출 (ex: "4월" -> 4)
+  const selectedMonthNumber = parseInt(selectedMonth.replace('월', ''));
+  if (isNaN(selectedMonthNumber) || selectedMonthNumber < 1 || selectedMonthNumber > 12) {
+    console.error('잘못된 월 형식:', selectedMonth);
+    return [];
+  }
+  
   const filtered = transactions.filter(transaction => {
     // 트랜잭션 타입 확인 - 지출 항목만 포함
     if (transaction.type !== 'expense') {
@@ -28,27 +38,22 @@ export const filterTransactionsByMonth = (
         return false;
       }
       
-      // 현재 월 포함 확인 (다양한 형식 지원)
-      const dateIncludes = transaction.date.includes(selectedMonth);
-      
-      // 월 이름으로 확인 (한글)
-      const monthNumberMatch = selectedMonth.match(/\d{4}-(\d{2})/);
-      let monthNameIncluded = false;
-      
-      if (monthNumberMatch) {
-        const monthNumber = parseInt(monthNumberMatch[1]);
-        const koreanMonths = [
-          '1월', '2월', '3월', '4월', '5월', '6월', 
-          '7월', '8월', '9월', '10월', '11월', '12월'
-        ];
-        
-        // 해당 월의 한글 이름이 트랜잭션 날짜에 포함되어 있는지 확인
-        if (monthNumber >= 1 && monthNumber <= 12) {
-          monthNameIncluded = transaction.date.includes(koreanMonths[monthNumber - 1]);
-        }
+      // 날짜 파싱
+      const parsedDate = parseTransactionDate(transaction.date);
+      if (!parsedDate) {
+        console.warn('날짜 파싱 실패:', transaction.date);
+        return false;
       }
       
-      return dateIncludes || monthNameIncluded;
+      // 월 비교
+      const transactionMonth = parsedDate.getMonth() + 1; // 0-based -> 1-based
+      const isMatchingMonth = transactionMonth === selectedMonthNumber;
+      
+      if (isMatchingMonth) {
+        console.log(`트랜잭션 매칭: ${transaction.title}, 날짜: ${transaction.date}, 월: ${transactionMonth}`);
+      }
+      
+      return isMatchingMonth;
     } catch (e) {
       console.error('트랜잭션 필터링 중 오류:', e, transaction);
       return false;
@@ -89,17 +94,31 @@ export const filterTransactionsByQuery = (
 };
 
 /**
- * 총 지출 금액 계산
+ * 총 지출 금액 계산 - 개선된 버전
  */
 export const calculateTotalExpenses = (transactions: Transaction[]): number => {
   try {
-    const total = transactions.reduce((sum, t) => {
-      // 유효한 숫자인지 확인
-      const amount = typeof t.amount === 'number' ? t.amount : 0;
+    // 유효한 트랜잭션만 필터링 (undefined, null 제외)
+    const validTransactions = transactions.filter(t => t && typeof t.amount !== 'undefined');
+    console.log(`유효한 트랜잭션 수: ${validTransactions.length}/${transactions.length}`);
+    
+    // 디버깅용 로그
+    if (validTransactions.length > 0) {
+      console.log('첫 번째 트랜잭션 정보:', {
+        title: validTransactions[0].title,
+        amount: validTransactions[0].amount,
+        type: validTransactions[0].type
+      });
+    }
+    
+    const total = validTransactions.reduce((sum, t) => {
+      // 유효한 숫자인지 확인하고 기본값 처리
+      const amount = typeof t.amount === 'number' ? t.amount : 
+                    parseInt(t.amount as any) || 0;
       return sum + amount;
     }, 0);
     
-    console.log(`총 지출 계산: ${total}원 (${transactions.length}개 항목)`);
+    console.log(`총 지출 계산: ${total}원 (${validTransactions.length}개 항목)`);
     return total;
   } catch (e) {
     console.error('총 지출 계산 중 오류:', e);