Refactor Index page component

The Index page component was refactored into smaller, more manageable components to improve code readability and maintainability.

src/components/home/HomeContent.tsx

@@ -0,0 +1,86 @@
+
+import React from 'react';
+import BudgetProgressCard from '@/components/BudgetProgressCard';
+import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
+import RecentTransactionsSection from '@/components/RecentTransactionsSection';
+import EmptyState from './EmptyState';
+import { BudgetPeriod } from '@/contexts/BudgetContext';
+import { formatCurrency, calculatePercentage } from '@/utils/formatters';
+import { Transaction } from '@/components/TransactionCard';
+
+interface HomeContentProps {
+  transactions: Transaction[];
+  budgetData: {
+    daily: {
+      targetAmount: number;
+      spentAmount: number;
+      remainingAmount: number;
+    };
+    weekly: {
+      targetAmount: number;
+      spentAmount: number;
+      remainingAmount: number;
+    };
+    monthly: {
+      targetAmount: number;
+      spentAmount: number;
+      remainingAmount: number;
+    };
+  };
+  selectedTab: string;
+  setSelectedTab: (value: string) => void;
+  handleBudgetGoalUpdate: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
+  updateTransaction: (transaction: Transaction) => void;
+  getCategorySpending: () => Array<{
+    title: string;
+    current: number;
+    total: number;
+  }>;
+}
+
+const HomeContent: React.FC<HomeContentProps> = ({
+  transactions,
+  budgetData,
+  selectedTab,
+  setSelectedTab,
+  handleBudgetGoalUpdate,
+  updateTransaction,
+  getCategorySpending
+}) => {
+  return (
+    <>
+      {/* 목표 진행 상황 */}
+      <h2 className="text-lg font-semibold mb-3">예산과 지출</h2>
+      <BudgetProgressCard 
+        budgetData={budgetData}
+        selectedTab={selectedTab}
+        setSelectedTab={setSelectedTab}
+        formatCurrency={formatCurrency}
+        calculatePercentage={calculatePercentage}
+        onSaveBudget={handleBudgetGoalUpdate}
+      />
+
+      {/* 지출 카테고리 */}
+      {getCategorySpending().some(cat => cat.current > 0 || cat.total > 0) ? (
+        <BudgetCategoriesSection categories={getCategorySpending()} />
+      ) : (
+        <EmptyState />
+      )}
+
+      {/* 최근 지출 */}
+      {transactions.length > 0 ? (
+        <RecentTransactionsSection 
+          transactions={transactions.slice(0, 5)} 
+          onUpdateTransaction={updateTransaction}
+        />
+      ) : (
+        <div className="mt-4">
+          <h2 className="text-lg font-semibold mb-3">최근 지출</h2>
+          <EmptyState />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HomeContent;