From a62d2aff250b6c5656660c6561b04b14d701ad75 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:25:08 +0000
Subject: [PATCH] Add icons to summary cards

Added icons to the budget, expense, and savings items in the summary cards.
---
 src/pages/Analytics.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/Analytics.tsx b/src/pages/Analytics.tsx
index d3c1b83..364e6ef 100644
--- a/src/pages/Analytics.tsx
+++ b/src/pages/Analytics.tsx
@@ -4,7 +4,7 @@ import NavBar from '@/components/NavBar';
 import ExpenseChart from '@/components/ExpenseChart';
 import AddTransactionButton from '@/components/AddTransactionButton';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Wallet, CreditCard, PiggyBank } from 'lucide-react';
 
 const Analytics = () => {
   const [selectedPeriod, setSelectedPeriod] = useState('이번 달');
@@ -98,7 +98,10 @@ const Analytics = () => {
           {/* Summary Cards */}
           <div className="grid grid-cols-3 gap-3 mb-8">
             <div className="neuro-card">
-              <p className="text-xs text-gray-500 mb-1">예산</p>
+              <div className="flex items-center gap-2 mb-1">
+                <Wallet size={16} className="text-gray-500" />
+                <p className="text-xs text-gray-500">예산</p>
+              </div>
               <p className="text-sm font-bold text-neuro-income">
                 {new Intl.NumberFormat('ko-KR', {
                 style: 'currency',
@@ -109,7 +112,10 @@ const Analytics = () => {
               </p>
             </div>
             <div className="neuro-card">
-              <p className="text-xs text-gray-500 mb-1">지출</p>
+              <div className="flex items-center gap-2 mb-1">
+                <CreditCard size={16} className="text-gray-500" />
+                <p className="text-xs text-gray-500">지출</p>
+              </div>
               <p className="text-sm font-bold text-neuro-income">
                 {new Intl.NumberFormat('ko-KR', {
                 style: 'currency',
@@ -120,7 +126,10 @@ const Analytics = () => {
               </p>
             </div>
             <div className="neuro-card">
-              <p className="text-xs text-gray-500 mb-1">저축</p>
+              <div className="flex items-center gap-2 mb-1">
+                <PiggyBank size={16} className="text-gray-500" />
+                <p className="text-xs text-gray-500">저축</p>
+              </div>
               <p className="text-sm font-bold text-neuro-income">
                 {savingsPercentage}%
               </p>