Enable transaction editing

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

src/pages/Index.tsx

@@ -14,7 +14,7 @@ const Index = () => {
   const [selectedTab, setSelectedTab] = useState("daily");
 
   // Sample data - in a real app, this would come from a data source
-  const transactions: Transaction[] = [{
+  const [transactions, setTransactions] = useState<Transaction[]>([{
     id: '1',
     title: '식료품 구매',
     amount: 25000,
@@ -35,7 +35,7 @@ const Index = () => {
     date: '2일전, 9:00 AM',
     category: 'income',
     type: 'income'
-  }];
+  }]);
 
   // 카테고리별 예산
   const [categoryBudgets, setCategoryBudgets] = useState({
@@ -139,6 +139,15 @@ const Index = () => {
       description: `${type === 'daily' ? '일일' : type === 'weekly' ? '주간' : '월간'} 목표가 ${amount.toLocaleString()}원으로 설정되었습니다.`
     });
   };
+
+  // Handle transaction updates
+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    setTransactions(prev => 
+      prev.map(transaction => 
+        transaction.id === updatedTransaction.id ? updatedTransaction : transaction
+      )
+    );
+  };
   
   return (
     <div className="min-h-screen bg-neuro-background pb-24">
@@ -160,7 +169,10 @@ const Index = () => {
         <BudgetCategoriesSection categories={categories} />
 
         {/* 최근 지출 */}
-        <RecentTransactionsSection transactions={transactions} />
+        <RecentTransactionsSection 
+          transactions={transactions} 
+          onUpdateTransaction={handleUpdateTransaction}
+        />
       </div>
 
       <AddTransactionButton />

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>