Refactor Transactions page

Refactor Transactions page to utilize the useTransactions hook for improved code reusability and reduced redundancy.

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<any[]>([]);
-  
   const { 
     transactions, 
-    budgetData, 
+    isLoading, 
-    updateTransaction
+    selectedMonth, 
-  } = useBudget();
+    searchQuery,
+    setSearchQuery,
+    handlePrevMonth,
+    handleNextMonth,
+    updateTransaction,
+    deleteTransaction,
+    totalExpenses,
+  } = useTransactions();
 
-  // 월 변경 처리
+  const { budgetData } = useBudget();
-  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 groupedTransactions: Record<string, typeof filteredTransactions> = {};
+  const groupedTransactions: Record<string, typeof transactions> = {};
   
-  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 (
     <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
@@ -133,7 +102,7 @@ const Transactions = () => {
         )}
 
         {/* Empty State */}
-        {!isLoading && filteredTransactions.length === 0 && (
+        {!isLoading && transactions.length === 0 && (
           <div className="text-center py-10">
             <p className="text-gray-500 mb-3">
               {searchQuery.trim() 
@@ -152,7 +121,7 @@ const Transactions = () => {
         )}
 
         {/* Transactions By Date */}
-        {!isLoading && filteredTransactions.length > 0 && (
+        {!isLoading && transactions.length > 0 && (
           <div className="space-y-6">
             {Object.entries(groupedTransactions).map(([date, transactions]) => (
               <div key={date}>