Enable transaction editing

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

src/components/RecentTransactionsSection.tsx

@@ -1,14 +1,17 @@
 
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import TransactionCard, { Transaction } from '@/components/TransactionCard';
+import { toast } from '@/components/ui/use-toast';
 
 interface RecentTransactionsSectionProps {
   transactions: Transaction[];
+  onUpdateTransaction?: (updatedTransaction: Transaction) => void;
 }
 
 const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
-  transactions
+  transactions,
+  onUpdateTransaction
 }) => {
   const navigate = useNavigate();
   
@@ -16,10 +19,27 @@ const RecentTransactionsSection: React.FC<RecentTransactionsSectionProps> = ({
     navigate('/transactions');
   };
 
+  const handleUpdateTransaction = (updatedTransaction: Transaction) => {
+    if (onUpdateTransaction) {
+      onUpdateTransaction(updatedTransaction);
+      
+      toast({
+        title: "지출이 수정되었습니다",
+        description: `${updatedTransaction.title} 항목이 업데이트되었습니다.`,
+      });
+    }
+  };
+  
   return <>
       <h2 className="text-lg font-semibold mb-3 mt-8">최근 지출</h2>
       <div className="grid gap-3 mb-6">
-        {transactions.map(transaction => <TransactionCard key={transaction.id} transaction={transaction} />)}
+        {transactions.map(transaction => (
+          <TransactionCard 
+            key={transaction.id} 
+            transaction={transaction} 
+            onUpdate={handleUpdateTransaction}
+          />
+        ))}
       </div>
       
       <div className="flex justify-center mb-6">

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', {
@@ -31,8 +37,18 @@ const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
     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="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">
@@ -53,6 +69,14 @@ const TransactionCard: React.FC<TransactionCardProps> = ({ transaction }) => {
           </div>
         </div>
       </div>
+
+      <TransactionEditDialog 
+        transaction={transaction}
+        open={isEditDialogOpen}
+        onOpenChange={setIsEditDialogOpen}
+        onSave={handleSaveTransaction}
+      />
+    </>
   );
 };
 

src/components/TransactionEditDialog.tsx

@@ -0,0 +1,163 @@
+
+import React from 'react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Transaction } from '@/components/TransactionCard';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { Coffee, Home, Car } from 'lucide-react';
+
+// Form schema for validation
+const formSchema = z.object({
+  title: z.string().min(1, '제목을 입력해주세요'),
+  amount: z.string().min(1, '금액을 입력해주세요'),
+  category: z.enum(['식비', '생활비', '교통비']),
+});
+
+interface TransactionEditDialogProps {
+  transaction: Transaction;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (updatedTransaction: Transaction) => void;
+}
+
+const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
+  transaction,
+  open,
+  onOpenChange,
+  onSave
+}) => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      title: transaction.title,
+      amount: transaction.amount.toString(),
+      category: transaction.category as any,
+    },
+  });
+
+  const handleSubmit = (values: z.infer<typeof formSchema>) => {
+    // Remove commas from amount string and convert to number
+    const cleanAmount = values.amount.replace(/,/g, '');
+    
+    onSave({
+      ...transaction,
+      title: values.title,
+      amount: Number(cleanAmount),
+      category: values.category,
+    });
+    
+    onOpenChange(false);
+  };
+
+  // Function to format number with commas
+  const formatWithCommas = (value: string) => {
+    const numericValue = value.replace(/[^0-9]/g, '');
+    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  };
+
+  const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const formattedValue = formatWithCommas(e.target.value);
+    form.setValue('amount', formattedValue);
+  };
+
+  const categoryIcons: Record<string, React.ReactNode> = {
+    식비: <Coffee size={18} />,
+    생활비: <Home size={18} />,
+    교통비: <Car size={18} />,
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>지출 수정</DialogTitle>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>제목</FormLabel>
+                  <FormControl>
+                    <Input placeholder="제목을 입력하세요" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>금액</FormLabel>
+                  <FormControl>
+                    <Input 
+                      placeholder="금액을 입력하세요" 
+                      {...field} 
+                      onChange={handleAmountChange}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <FormField
+              control={form.control}
+              name="category"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>카테고리</FormLabel>
+                  <div className="grid grid-cols-3 gap-2">
+                    {['식비', '생활비', '교통비'].map((category) => (
+                      <div
+                        key={category}
+                        className={`flex items-center gap-2 p-2 rounded-md cursor-pointer border ${
+                          field.value === category 
+                            ? 'border-neuro-income bg-neuro-income/10' 
+                            : 'border-gray-200'
+                        }`}
+                        onClick={() => form.setValue('category', category as any)}
+                      >
+                        <div className="p-1 rounded-full">
+                          {categoryIcons[category]}
+                        </div>
+                        <span>{category}</span>
+                      </div>
+                    ))}
+                  </div>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            
+            <DialogFooter className="sm:justify-between">
+              <DialogClose asChild>
+                <Button type="button" variant="outline">취소</Button>
+              </DialogClose>
+              <Button type="submit">저장</Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TransactionEditDialog;

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({
@@ -140,6 +140,15 @@ const Index = () => {
     });
   };
 
+  // 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">
       <div className="max-w-md mx-auto px-6">
@@ -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>