From fd793998e47f7577243296f910581931f70c37c8 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 17 Mar 2025 12:47:30 +0000
Subject: [PATCH] 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.
---
 .../analytics/MonthlyComparisonChart.tsx      | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/analytics/MonthlyComparisonChart.tsx b/src/components/analytics/MonthlyComparisonChart.tsx
index f7f962c..fc7219c 100644
--- a/src/components/analytics/MonthlyComparisonChart.tsx
+++ b/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>
       ) : (