Enable transaction editing

Make each transaction item in the transaction history clickable for modification and editing.

src/pages/Transactions.tsx

@@ -4,12 +4,13 @@ import NavBar from '@/components/NavBar';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+import { toast } from '@/components/ui/use-toast';
 
 const Transactions = () => {
   const [selectedMonth, setSelectedMonth] = useState('8월');
 
   // Sample data - updated to use only the three specified categories
-  const transactions: Transaction[] = [{
+  const [transactions, setTransactions] = useState<Transaction[]>([{
     id: '1',
     title: '식료품 구매',
     amount: 25000,
@@ -44,7 +45,7 @@ const Transactions = () => {
     date: '8월 12일, 2:15 PM',
     category: '식비',
     type: 'expense'
-  }];
+  }]);
   
   // Filter only expense transactions
   const expenseTransactions = transactions.filter(t => t.type === 'expense');
@@ -65,6 +66,19 @@ const Transactions = () => {
     groupedTransactions[datePart].push(transaction);
   });
 
+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    setTransactions(prev => 
+      prev.map(transaction => 
+        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
+      )
+    );
+    
+    toast({
+      title: "지출이 수정되었습니다",
+      description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`,
+    });
+  };
+
   return <div className="min-h-screen bg-neuro-background pb-24">
       <div className="max-w-md mx-auto px-6">
         {/* Header */}
@@ -128,7 +142,13 @@ const Transactions = () => {
               </div>
               
               <div className="grid gap-3">
-                {transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
+                {transactions.map(transaction => (
+                  <TransactionCard 
+                    key={transaction.id} 
+                    transaction={transaction} 
+                    onUpdate={handleUpdateTransaction}
+                  />
+                ))}
               </div>
             </div>)}
         </div>