Refactor Transactions page

Refactors the Transactions page into smaller, more manageable components to improve code organization and maintainability. The functionality remains the same.

src/components/transactions/TransactionsHeader.tsx

@@ -0,0 +1,87 @@
+
+import React from 'react';
+import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
+import { formatCurrency } from '@/utils/formatters';
+
+interface TransactionsHeaderProps {
+  selectedMonth: string;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  handlePrevMonth: () => void;
+  handleNextMonth: () => void;
+  budgetData: any;
+  totalExpenses: number;
+  isDisabled: boolean;
+}
+
+const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
+  selectedMonth,
+  searchQuery,
+  setSearchQuery,
+  handlePrevMonth,
+  handleNextMonth,
+  budgetData,
+  totalExpenses,
+  isDisabled
+}) => {
+  return (
+    <header className="py-8">
+      <h1 className="text-2xl font-bold neuro-text mb-5">지출 내역</h1>
+      
+      {/* Search */}
+      <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
+        <Search size={18} className="text-gray-500 mr-2" />
+        <input 
+          type="text" 
+          placeholder="지출 검색..." 
+          className="bg-transparent flex-1 outline-none text-sm"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          disabled={isDisabled}
+        />
+      </div>
+      
+      {/* Month Selector */}
+      <div className="flex items-center justify-between mb-5">
+        <button 
+          className="neuro-flat p-2 rounded-full"
+          onClick={handlePrevMonth}
+          disabled={isDisabled}
+        >
+          <ChevronLeft size={20} />
+        </button>
+        
+        <div className="flex items-center gap-2">
+          <Calendar size={18} className="text-neuro-income" />
+          <span className="font-medium text-lg">{selectedMonth}</span>
+        </div>
+        
+        <button 
+          className="neuro-flat p-2 rounded-full"
+          onClick={handleNextMonth}
+          disabled={isDisabled}
+        >
+          <ChevronRight size={20} />
+        </button>
+      </div>
+      
+      {/* Summary */}
+      <div className="grid grid-cols-2 gap-4 mb-8">
+        <div className="neuro-card">
+          <p className="text-sm text-gray-500 mb-1">총 예산</p>
+          <p className="text-lg font-bold text-neuro-income">
+            {formatCurrency(budgetData?.monthly?.targetAmount || 0)}
+          </p>
+        </div>
+        <div className="neuro-card">
+          <p className="text-sm text-gray-500 mb-1">총 지출</p>
+          <p className="text-lg font-bold text-neuro-income">
+            {formatCurrency(totalExpenses)}
+          </p>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default TransactionsHeader;