Refactor: Split Analytics page

Splits the Analytics page into smaller, more manageable components to improve code organization and maintainability.

src/components/analytics/MonthlyComparisonChart.tsx

@@ -0,0 +1,69 @@
+
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Legend } 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
+}) => {
+  // Format for Y-axis (K format)
+  const formatYAxisTick = (value: number) => {
+    return `${Math.round(value / 1000)}K`;
+  };
+
+  // Format for tooltip (original currency format)
+  const formatTooltip = (value: number | string) => {
+    if (typeof value === 'number') {
+      return formatCurrency(value);
+    }
+    return value;
+  };
+
+  // Empty state component
+  const EmptyGraphState = () => (
+    <div className="flex flex-col items-center justify-center h-48 text-gray-400">
+      <p>데이터가 없습니다</p>
+      <p className="text-sm mt-2">지출 내역을 추가하면 그래프가 표시됩니다</p>
+    </div>
+  );
+
+  return (
+    <div className="neuro-card h-72">
+      {!isEmpty && monthlyData.length > 0 ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={monthlyData} margin={{
+            top: 20,
+            right: 10,
+            left: -10,
+            bottom: 5
+          }} style={{
+            fontSize: '11px'
+          }}>
+            <XAxis dataKey="name" />
+            <YAxis tickFormatter={formatYAxisTick} />
+            <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]} />
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <EmptyGraphState />
+      )}
+    </div>
+  );
+};
+
+export default MonthlyComparisonChart;