ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Display 0 for expenses

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-04-05 06:02:31 +00:00
parent f8948e1221
commit e947a84dcb
4 changed files with 103 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/transactions/TransactionsHeader.tsx
View File

@@ -2,6 +2,7 @@
import React from 'react';
import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';
interface TransactionsHeaderProps {
selectedMonth: string;
searchQuery: string;
@@ -12,6 +13,7 @@ interface TransactionsHeaderProps {
totalExpenses: number;
isDisabled: boolean;
}
const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
selectedMonth,
searchQuery,
@@ -29,18 +31,31 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
// 예산 정보가 없는 경우 기본값 사용
const targetAmount = budgetData?.monthly?.targetAmount || 0;
return <header className="py-4">
return (
<header className="py-4">
<h1 className="font-bold neuro-text mb-3 text-xl">지출 내역</h1>
{/* Search */}
<div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
<Search size={18} className="text-gray-500 mr-2" />
<input type="text" placeholder="지출 검색..." className="bg-transparent flex-1 outline-none text-sm" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} disabled={isDisabled} />
<input
type="text"
placeholder="지출 검색..."
className="bg-transparent flex-1 outline-none text-sm"
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
disabled={isDisabled}
/>
</div>
{/* Month Selector */}
<div className="flex items-center justify-between mb-5">
<button className="neuro-flat p-2 rounded-full" onClick={handlePrevMonth} disabled={isDisabled}>
<button
className="neuro-flat p-2 rounded-full"
onClick={handlePrevMonth}
disabled={isDisabled}
>
<ChevronLeft size={20} />
</button>
@@ -49,7 +64,11 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
<span className="font-medium text-lg">{selectedMonth}</span>
</div>
<button className="neuro-flat p-2 rounded-full" onClick={handleNextMonth} disabled={isDisabled}>
<button
className="neuro-flat p-2 rounded-full"
onClick={handleNextMonth}
disabled={isDisabled}
>
<ChevronRight size={20} />
</button>
</div>
@@ -69,6 +88,8 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
</p>
</div>
</div>
</header>;
</header>
);
};
export default TransactionsHeader;
export default React.memo(TransactionsHeader);

5
src/hooks/transactions/filterOperations/index.ts
View File

@@ -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);

69
src/hooks/transactions/filterUtils.ts
View File

@@ -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);

33
src/utils/dateParser.ts
View File

@@ -7,17 +7,20 @@ import { ko } from 'date-fns/locale';
*/
export const parseTransactionDate = (dateStr: string): Date | null => {
// 빈 문자열 체크
if (!dateStr) {
if (!dateStr || dateStr === '') {
console.log('빈 날짜 문자열');
return null;
}
try {
// 특수 키워드 처리
if (dateStr.includes('오늘')) {
if (dateStr.toLowerCase().includes('오늘')) {
console.log('오늘 날짜로 변환');
return new Date();
}
if (dateStr.includes('어제')) {
if (dateStr.toLowerCase().includes('어제')) {
console.log('어제 날짜로 변환');
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
return yesterday;
@@ -25,6 +28,7 @@ export const parseTransactionDate = (dateStr: string): Date | null => {
// ISO 형식 (yyyy-MM-dd) 시도
if (/^\d{4}-\d{2}-\d{2}/.test(dateStr)) {
console.log('ISO 형식 날짜 감지');
const date = parseISO(dateStr);
if (isValid(date)) {
return date;
@@ -36,6 +40,7 @@ export const parseTransactionDate = (dateStr: string): Date | null => {
const koreanMatch = dateStr.match(koreanDatePattern);
if (koreanMatch) {
console.log('한국어 날짜 형식 감지', koreanMatch);
const month = parseInt(koreanMatch[1]) - 1; // 0-based month
const day = parseInt(koreanMatch[2]);
const date = new Date();
@@ -44,6 +49,21 @@ export const parseTransactionDate = (dateStr: string): Date | null => {
return date;
}
// 쉼표 구분 형식 처리 (예: "오늘, 14:52 PM")
const commaSplit = dateStr.split(',');
if (commaSplit.length > 1) {
console.log('쉼표 구분 날짜 감지');
// 첫 부분이 오늘/어제 등의 키워드인 경우 처리
const firstPart = commaSplit[0].trim().toLowerCase();
if (firstPart === '오늘') {
return new Date();
} else if (firstPart === '어제') {
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
return yesterday;
}
}
// parse를 사용한 다양한 형식 시도
const formats = [
'yyyy-MM-dd',
@@ -51,13 +71,17 @@ export const parseTransactionDate = (dateStr: string): Date | null => {
'MM-dd-yyyy',
'MM/dd/yyyy',
'yyyy년 MM월 dd일',
'MM월 dd일'
'MM월 dd일',
'yyyy년 M월 d일',
'M월 d일'
];
for (const formatStr of formats) {
try {
console.log(`날짜 형식 시도: ${formatStr}`);
const date = parse(dateStr, formatStr, new Date(), { locale: ko });
if (isValid(date)) {
console.log('날짜 파싱 성공:', formatStr);
return date;
}
} catch (e) {
@@ -69,6 +93,7 @@ export const parseTransactionDate = (dateStr: string): Date | null => {
// 위 모든 형식이 실패하면 마지막으로 Date 생성자 시도
const dateFromConstructor = new Date(dateStr);
if (isValid(dateFromConstructor)) {
console.log('Date 생성자로 파싱 성공');
return dateFromConstructor;
}