Visual edit in Lovable

Edited UI in Lovable

src/components/analytics/MonthlyComparisonChart.tsx

@@ -1,19 +1,15 @@
-
 import React from 'react';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend, Cell } from 'recharts';
 import { formatCurrency } from '@/utils/formatters';
-
 interface MonthlyData {
   name: string;
   budget: number;
   expense: number;
 }
-
 interface MonthlyComparisonChartProps {
   monthlyData: MonthlyData[];
   isEmpty?: boolean;
 }
-
 const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
   monthlyData,
   isEmpty = false
@@ -35,24 +31,19 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
   console.log('MonthlyComparisonChart 데이터:', monthlyData);
 
   // EmptyGraphState 컴포넌트: 데이터가 없을 때 표시
-  const EmptyGraphState = () => (
+  const EmptyGraphState = () => <div className="flex flex-col items-center justify-center h-48 text-gray-400">
-    <div className="flex flex-col items-center justify-center h-48 text-gray-400">
       <p>데이터가 없습니다</p>
       <p className="text-sm mt-2">지출 내역을 추가하면 그래프가 표시됩니다</p>
-    </div>
+    </div>;
-  );
 
   // 데이터 여부 확인 로직 개선 - 데이터가 비어있거나 모든 값이 0인 경우도 고려
-  const hasValidData = monthlyData && 
+  const hasValidData = monthlyData && monthlyData.length > 0 && monthlyData.some(item => item.budget > 0 || item.expense > 0);
-                      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"; // 기본 초록색
@@ -64,42 +55,36 @@ const MonthlyComparisonChart: React.FC<MonthlyComparisonChartProps> = ({
   // 예산 색상을 좀 더 짙은 회색으로 변경
   const darkGrayColor = "#9F9EA1"; // 이전 색상 #C8C8C9에서 더 짙은 회색으로 변경
 
-  return (
+  return <div className="neuro-card h-72 w-full">
-    <div className="neuro-card h-72 w-full">
+      {hasValidData ? <ResponsiveContainer width="100%" height="100%">
-      {hasValidData ? (
-        <ResponsiveContainer width="100%" height="100%">
           <BarChart data={monthlyData} margin={{
-            top: 20,
+        top: 20,
-            right: 10,
+        right: 10,
-            left: -10,
+        left: -10,
-            bottom: 5
+        bottom: 5
-          }} style={{
+      }} style={{
-            fontSize: '11px'
+        fontSize: '11px'
-          }}>
+      }}>
             <XAxis dataKey="name" />
             <YAxis tickFormatter={formatYAxisTick} />
-            <Tooltip 
+            <Tooltip formatter={formatTooltip} contentStyle={{
-              formatter={formatTooltip} 
+          backgroundColor: 'white',
-              contentStyle={{ backgroundColor: 'white', border: 'none' }}
+          border: 'none'
-              cursor={{ fill: 'transparent' }}
+        }} cursor={{
-            />
+          fill: 'transparent'
-            <Legend 
+        }} />
-              formatter={(value) => {
+            <Legend formatter={value => {
-                // 범례 텍스트 색상 설정
+          // 범례 텍스트 색상 설정
-                return <span style={{ color: value === '지출' ? mainGreenColor : undefined }}>{value}</span>;
+          return <span style={{
-              }}
+            color: value === '지출' ? mainGreenColor : undefined
-            />
+          }} className="text-sm">{value}</span>;
+        }} />
             <Bar dataKey="budget" name="예산" fill={darkGrayColor} radius={[4, 4, 0, 0]} />
             <Bar dataKey="expense" name="지출" fill={mainGreenColor} radius={[4, 4, 0, 0]}>
               {/* 개별 셀 색상 설정은 제거하고 통일된 메인 그린 색상 사용 */}
             </Bar>
           </BarChart>
-        </ResponsiveContainer>
+        </ResponsiveContainer> : <EmptyGraphState />}
-      ) : (
+    </div>;
-        <EmptyGraphState />
-      )}
-    </div>
-  );
 };
-
 export default MonthlyComparisonChart;