diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx index da662d5..fd099a1 100644 --- a/src/pages/Transactions.tsx +++ b/src/pages/Transactions.tsx @@ -1,59 +1,33 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState } from 'react'; import NavBar from '@/components/NavBar'; import TransactionCard from '@/components/TransactionCard'; import AddTransactionButton from '@/components/AddTransactionButton'; import { Calendar, Search, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'; import { formatCurrency } from '@/utils/formatters'; +import { useTransactions, MONTHS_KR } from '@/hooks/useTransactions'; import { useBudget } from '@/contexts/BudgetContext'; -import { MONTHS_KR, getCurrentMonth, getPrevMonth, getNextMonth } from '@/utils/dateUtils'; const Transactions = () => { - const [searchQuery, setSearchQuery] = useState(''); - const [selectedMonth, setSelectedMonth] = useState(getCurrentMonth()); - const [isLoading, setIsLoading] = useState(false); - const [filteredTransactions, setFilteredTransactions] = useState([]); - const { transactions, - budgetData, - updateTransaction - } = useBudget(); + isLoading, + selectedMonth, + searchQuery, + setSearchQuery, + handlePrevMonth, + handleNextMonth, + updateTransaction, + deleteTransaction, + totalExpenses, + } = useTransactions(); - // 월 변경 처리 - const handlePrevMonth = () => { - setSelectedMonth(getPrevMonth(selectedMonth)); - }; - - const handleNextMonth = () => { - setSelectedMonth(getNextMonth(selectedMonth)); - }; - - // 트랜잭션 필터링 - useEffect(() => { - setIsLoading(true); - - // 해당 월의 트랜잭션만 필터링 - let filtered = transactions.filter(t => { - return t.date.includes(selectedMonth); - }); - - // 검색어로 필터링 - if (searchQuery.trim()) { - filtered = filtered.filter(t => - t.title.toLowerCase().includes(searchQuery.toLowerCase()) || - t.category.toLowerCase().includes(searchQuery.toLowerCase()) - ); - } - - setFilteredTransactions(filtered); - setIsLoading(false); - }, [transactions, selectedMonth, searchQuery]); + const { budgetData } = useBudget(); // 트랜잭션을 날짜별로 그룹화 - const groupedTransactions: Record = {}; + const groupedTransactions: Record = {}; - filteredTransactions.forEach(transaction => { + transactions.forEach(transaction => { const datePart = transaction.date.split(',')[0]; if (!groupedTransactions[datePart]) { groupedTransactions[datePart] = []; @@ -61,11 +35,6 @@ const Transactions = () => { groupedTransactions[datePart].push(transaction); }); - // 총 지출 계산 - const totalExpenses = filteredTransactions - .filter(t => t.type === 'expense') - .reduce((sum, t) => sum + t.amount, 0); - return (
@@ -133,7 +102,7 @@ const Transactions = () => { )} {/* Empty State */} - {!isLoading && filteredTransactions.length === 0 && ( + {!isLoading && transactions.length === 0 && (

{searchQuery.trim() @@ -152,7 +121,7 @@ const Transactions = () => { )} {/* Transactions By Date */} - {!isLoading && filteredTransactions.length > 0 && ( + {!isLoading && transactions.length > 0 && (

{Object.entries(groupedTransactions).map(([date, transactions]) => (