Implement transaction history page

This commit implements the transaction history page.

src/components/TransactionEditDialog.tsx

@@ -15,7 +15,9 @@ import {
 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';
+import { Coffee, Home, Car, Trash2 } from 'lucide-react';
+import { toast } from '@/components/ui/use-toast';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog';
 
 // Form schema for validation
 const formSchema = z.object({
@@ -35,13 +37,15 @@ interface TransactionEditDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (updatedTransaction: Transaction) => void;
+  onDelete?: (id: string) => void;
 }
 
 const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
   transaction,
   open,
   onOpenChange,
-  onSave
+  onSave,
+  onDelete
 }) => {
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -66,6 +70,18 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
     onOpenChange(false);
   };
 
+  const handleDelete = () => {
+    if (onDelete) {
+      onDelete(transaction.id);
+      onOpenChange(false);
+      
+      toast({
+        title: "지출이 삭제되었습니다",
+        description: `${transaction.title} 항목이 삭제되었습니다.`,
+      });
+    }
+  };
+
   const handleAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const formattedValue = formatWithCommas(e.target.value);
     form.setValue('amount', formattedValue);
@@ -147,11 +163,49 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
               )}
             />
             
-            <DialogFooter className="sm:justify-between">
-              <DialogClose asChild>
-                <Button type="button" variant="outline">취소</Button>
-              </DialogClose>
-              <Button type="submit">저장</Button>
+            <DialogFooter className="flex justify-between gap-2 mt-6">
+              {onDelete && (
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button 
+                      type="button" 
+                      variant="outline"
+                      className="border-red-200 text-red-500 hover:bg-red-50"
+                    >
+                      <Trash2 size={16} />
+                      삭제
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>지출 삭제</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        정말로 이 지출 항목을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>취소</AlertDialogCancel>
+                      <AlertDialogAction 
+                        className="bg-red-500 hover:bg-red-600"
+                        onClick={handleDelete}
+                      >
+                        삭제
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+              )}
+              <div className="flex gap-2">
+                <DialogClose asChild>
+                  <Button type="button" variant="outline">취소</Button>
+                </DialogClose>
+                <Button 
+                  type="submit"
+                  className="bg-neuro-income text-white hover:bg-neuro-income/90"
+                >
+                  저장
+                </Button>
+              </div>
             </DialogFooter>
           </form>
         </Form>