From 273362ecb7cd050d996b89ca34addec229977d48 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 22 Mar 2025 12:56:28 +0000
Subject: [PATCH] Refactor monthly comparison chart

Modify expense text and bar color in the monthly comparison chart legend from black to main green.
---
 .../analytics/MonthlyComparisonChart.tsx      | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/analytics/MonthlyComparisonChart.tsx b/src/components/analytics/MonthlyComparisonChart.tsx
index d5acf02..e7405e9 100644
--- a/src/components/analytics/MonthlyComparisonChart.tsx
+++ b/src/components/analytics/MonthlyComparisonChart.tsx
@@ -58,6 +58,9 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
     return "#81c784"; // 기본 초록색
   };
 
+  // 지출 색상을 메인 그린으로 통일
+  const mainGreenColor = "#81c784";
+
   return (
     <div className="neuro-card h-72 w-full">
       {hasValidData ? (
@@ -77,15 +80,15 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
               contentStyle={{ backgroundColor: 'white', border: 'none' }}
               cursor={{ fill: 'transparent' }}
             />
-            <Legend />
+            <Legend 
+              formatter={(value) => {
+                // 범례 텍스트 색상 설정
+                return <span style={{ color: value === '지출' ? mainGreenColor : undefined }}>{value}</span>;
+              }}
+            />
             <Bar dataKey="budget" name="예산" fill="#C8C8C9" 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 dataKey="expense" name="지출" fill={mainGreenColor} radius={[4, 4, 0, 0]}>
+              {/* 개별 셀 색상 설정은 제거하고 통일된 메인 그린 색상 사용 */}
             </Bar>
           </BarChart>
         </ResponsiveContainer>