Improve monthly chart colors

The monthly comparison chart now displays bars in yellow when expense is 90% of budget and in red when expense exceeds budget.

src/components/analytics/MonthlyComparisonChart.tsx

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts';
 import { formatCurrency } from '@/utils/formatters';
 
 interface MonthlyData {
@@ -47,6 +47,17 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
                       monthlyData.length > 0 && 
                       monthlyData.some(item => (item.budget > 0 || item.expense > 0));
 
+  // 지출 색상 결정 함수 추가
+  const getExpenseColor = (budget: number, expense: number) => {
+    if (budget === 0) return "#81c784"; // 예산이 0이면 기본 색상
+    
+    const ratio = expense / budget;
+    
+    if (ratio > 1) return "#f44336"; // 빨간색 (예산 초과)
+    if (ratio >= 0.9) return "#ffeb3b"; // 노란색 (예산의 90% 이상)
+    return "#81c784"; // 기본 초록색
+  };
+
   return (
     <div className="neuro-card h-72 w-full">
       {hasValidData ? (
@@ -64,7 +75,14 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
             <Tooltip formatter={formatTooltip} />
             <Legend />
             <Bar dataKey="budget" name="예산" fill="#C8C8C9" radius={[4, 4, 0, 0]} />
-            <Bar dataKey="expense" name="지출" fill="#81c784" radius={[4, 4, 0, 0]} />
+            <Bar dataKey="expense" name="지출" radius={[4, 4, 0, 0]}>
+              {monthlyData.map((entry, index) => (
+                <Cell 
+                  key={`cell-${index}`} 
+                  fill={getExpenseColor(entry.budget, entry.expense)} 
+                />
+              ))}
+            </Bar>
           </BarChart>
         </ResponsiveContainer>
       ) : (