From a34c37facd106a95c1e087494a9d6284fb800216 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:22:35 +0000
Subject: [PATCH] Add icons to category cards

This commit adds icons to the expense category cards.
---
 src/components/BudgetCard.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/BudgetCard.tsx b/src/components/BudgetCard.tsx
index 933bd22..ab6375b 100644
--- a/src/components/BudgetCard.tsx
+++ b/src/components/BudgetCard.tsx
@@ -1,6 +1,7 @@
 
 import React from 'react';
 import { cn } from '@/lib/utils';
+import { Coffee, Home, Car } from 'lucide-react';
 
 interface BudgetCardProps {
   title: string;
@@ -9,6 +10,13 @@ interface BudgetCardProps {
   color?: string;
 }
 
+// Category icons mapping
+const categoryIcons: Record<string, React.ReactNode> = {
+  식비: <Coffee size={18} />,
+  생활비: <Home size={18} />,
+  교통비: <Car size={18} />,
+};
+
 const BudgetCard: React.FC<BudgetCardProps> = ({ 
   title, 
   current, 
@@ -34,7 +42,12 @@ const BudgetCard: React.FC<BudgetCardProps> = ({
   
   return (
     <div className="neuro-card">
-      <h3 className="text-sm font-medium text-gray-600 mb-1">{title}</h3>
+      <div className="flex items-center gap-2 mb-1">
+        <div className="text-neuro-income">
+          {categoryIcons[title]}
+        </div>
+        <h3 className="text-sm font-medium text-gray-600">{title}</h3>
+      </div>
       
       <div className="flex items-center justify-between mb-2">
         <p className="text-lg font-semibold">{formattedCurrent}</p>