From a942858c97449832a4830cc0ffe46e8795797d1d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 15 Mar 2025 04:21:54 +0000
Subject: [PATCH] Enhance expense input category

Add icons to the expense input category selection in the add transaction dialog.
---
 src/components/AddTransactionButton.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/AddTransactionButton.tsx b/src/components/AddTransactionButton.tsx
index 6a88454..6312a6b 100644
--- a/src/components/AddTransactionButton.tsx
+++ b/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>