Refactor: Split Analytics page

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

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;