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;