Enhance expense input category

Add icons to the expense input category selection in the add transaction dialog.

src/components/AddTransactionButton.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState } from 'react';
-import { PlusIcon, X } from 'lucide-react';
+import { PlusIcon, X, Coffee, Home, Car } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useNavigate } from 'react-router-dom';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
@@ -18,6 +18,13 @@ interface ExpenseFormValues {
 
 const EXPENSE_CATEGORIES = ['식비', '생활비', '교통비'];
 
+// Define category icons mapping
+const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
 const AddTransactionButton = () => {
   const [showExpenseDialog, setShowExpenseDialog] = useState(false);
   const navigate = useNavigate();
@@ -124,9 +131,12 @@ const AddTransactionButton = () => {
                           <ToggleGroupItem 
                             key={category} 
                             value={category}
-                            className="px-4 py-2 rounded-md border"
+                            className="px-4 py-2 rounded-md border flex items-center gap-2"
                           >
-                            {category}
+                            <div className="text-neuro-income">
+                              {categoryIcons[category]}
+                            </div>
+                            <span>{category}</span>
                           </ToggleGroupItem>
                         ))}
                       </ToggleGroup>