Refactor: Split Analytics page

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

src/components/analytics/CategorySpendingList.tsx

@@ -0,0 +1,62 @@
+
+import React from 'react';
+import { formatCurrency } from '@/utils/formatters';
+
+interface CategorySpending {
+  title: string;
+  current: number;
+  total: number;
+}
+
+interface CategorySpendingListProps {
+  categories: CategorySpending[];
+  totalExpense: number;
+}
+
+const CategorySpendingList: React.FC<CategorySpendingListProps> = ({
+  categories,
+  totalExpense
+}) => {
+  // 카테고리별 색상 매핑
+  const getCategoryColor = (title: string) => {
+    switch (title) {
+      case '식비': return '#81c784';
+      case '생활비': return '#AED581';
+      case '교통비': return '#2E7D32';
+      default: return '#4CAF50';
+    }
+  };
+
+  return (
+    <div className="neuro-card mb-6">
+      {categories.some(cat => cat.current > 0) ? (
+        <div className="space-y-4">
+          {categories.map((category) => (
+            <div key={category.title} className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <div className="w-6 h-6 rounded-full" style={{
+                  backgroundColor: getCategoryColor(category.title)
+                }}></div>
+                <span>{category.title}</span>
+              </div>
+              <div className="text-right">
+                <p className="font-medium">
+                  {formatCurrency(category.current)}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {totalExpense > 0 ? Math.round(category.current / totalExpense * 100) : 0}%
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="py-8 text-center text-gray-400">
+          <p>아직 지출 내역이 없습니다</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CategorySpendingList;

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;

src/components/analytics/PeriodSelector.tsx

@@ -0,0 +1,39 @@
+
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+interface PeriodSelectorProps {
+  selectedPeriod: string;
+  onPrevPeriod: () => void;
+  onNextPeriod: () => void;
+}
+
+const PeriodSelector: React.FC<PeriodSelectorProps> = ({
+  selectedPeriod,
+  onPrevPeriod,
+  onNextPeriod
+}) => {
+  return (
+    <div className="flex items-center justify-between mb-6">
+      <button 
+        className="neuro-flat p-2 rounded-full"
+        onClick={onPrevPeriod}
+      >
+        <ChevronLeft size={20} />
+      </button>
+      
+      <div className="flex items-center">
+        <span className="font-medium text-lg">{selectedPeriod}</span>
+      </div>
+      
+      <button 
+        className="neuro-flat p-2 rounded-full"
+        onClick={onNextPeriod}
+      >
+        <ChevronRight size={20} />
+      </button>
+    </div>
+  );
+};
+
+export default PeriodSelector;

src/components/analytics/SummaryCards.tsx

@@ -0,0 +1,50 @@
+
+import React from 'react';
+import { Wallet, CreditCard, PiggyBank } from 'lucide-react';
+import { formatCurrency } from '@/utils/formatters';
+
+interface SummaryCardsProps {
+  totalBudget: number;
+  totalExpense: number;
+  savingsPercentage: number;
+}
+
+const SummaryCards: React.FC<SummaryCardsProps> = ({
+  totalBudget,
+  totalExpense,
+  savingsPercentage
+}) => {
+  return (
+    <div className="grid grid-cols-3 gap-3 mb-8">
+      <div className="neuro-card">
+        <div className="flex items-center gap-2 mb-1 py-[5px]">
+          <Wallet size={24} className="text-gray-500" />
+          <p className="text-gray-500 text-base">예산</p>
+        </div>
+        <p className="text-sm font-bold text-neuro-income">
+          {formatCurrency(totalBudget)}
+        </p>
+      </div>
+      <div className="neuro-card">
+        <div className="flex items-center gap-2 mb-1 py-[5px]">
+          <CreditCard size={24} className="text-gray-500" />
+          <p className="text-gray-500 font-medium text-base">지출</p>
+        </div>
+        <p className="text-sm font-bold text-neuro-income">
+          {formatCurrency(totalExpense)}
+        </p>
+      </div>
+      <div className="neuro-card">
+        <div className="flex items-center gap-2 mb-1 py-[5px]">
+          <PiggyBank size={24} className="text-gray-500" />
+          <p className="text-gray-500 text-base">저축</p>
+        </div>
+        <p className="text-sm font-bold text-neuro-income">
+          {savingsPercentage}%
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SummaryCards;