Enable transaction editing

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

src/components/TransactionCard.tsx

@@ -1,7 +1,8 @@
 
-import React from 'react';
-import { ArrowDownIcon, ArrowUpIcon, Coffee, Home, Car } from 'lucide-react';
+import React, { useState } from 'react';
+import { ArrowDownIcon, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import TransactionEditDialog from './TransactionEditDialog';
 
 export type Transaction = {
   id: string;
@@ -20,9 +21,14 @@ const categoryIcons: Record<string, React.ReactNode> = {
 
 interface TransactionCardProps {
   transaction: Transaction;
+  onUpdate?: (updatedTransaction: Transaction) => void;
 }
 
-const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
+const TransactionCard: React.FC<TransactionCardProps> = ({ 
+  transaction,
+  onUpdate
+}) => {
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
   const { title, amount, date, category, type } = transaction;
   
   const formattedAmount = new Intl.NumberFormat('ko-KR', {
@@ -30,29 +36,47 @@ const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
     currency: 'KRW',
     maximumFractionDigits: 0
   }).format(amount);
+
+  const handleSaveTransaction = (updatedTransaction: Transaction) => {
+    if (onUpdate) {
+      onUpdate(updatedTransaction);
+    }
+  };
   
   return (
-    <div className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
-          <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
-            {categoryIcons[category] || <Coffee size={18} />}
+    <>
+      <div 
+        className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in cursor-pointer"
+        onClick={() => setIsEditDialogOpen(true)}
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-full bg-neuro-income/10 text-neuro-income">
+              {categoryIcons[category] || <Coffee size={18} />}
+            </div>
+            
+            <div>
+              <h3 className="text-sm font-medium">{title}</h3>
+              <p className="text-xs text-gray-500">{date}</p>
+            </div>
           </div>
           
-          <div>
-            <h3 className="text-sm font-medium">{title}</h3>
-            <p className="text-xs text-gray-500">{date}</p>
+          <div className="flex items-center gap-1">
+            <ArrowDownIcon size={12} className="text-neuro-income" />
+            <span className="font-medium text-neuro-income">
+              {formattedAmount}
+            </span>
           </div>
         </div>
-        
-        <div className="flex items-center gap-1">
-          <ArrowDownIcon size={12} className="text-neuro-income" />
-          <span className="font-medium text-neuro-income">
-            {formattedAmount}
-          </span>
-        </div>
       </div>
-    </div>
+
+      <TransactionEditDialog 
+        transaction={transaction}
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        onSave={handleSaveTransaction}
+      />
+    </>
   );
 };