Fix: Display 0 for expenses

src/components/transactions/TransactionsHeader.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
+
 interface TransactionsHeaderProps {
   selectedMonth: string;
   searchQuery: string;
@@ -12,6 +13,7 @@ interface TransactionsHeaderProps {
   totalExpenses: number;
   isDisabled: boolean;
 }
+
 const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
   selectedMonth,
   searchQuery,
@@ -29,18 +31,31 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
 
   // 예산 정보가 없는 경우 기본값 사용
   const targetAmount = budgetData?.monthly?.targetAmount || 0;
-  return <header className="py-4">
+  
+  return (
+    <header className="py-4">
       <h1 className="font-bold neuro-text mb-3 text-xl">지출 내역</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} />
+        <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}>
+        <button 
+          className="neuro-flat p-2 rounded-full" 
+          onClick={handlePrevMonth} 
+          disabled={isDisabled}
+        >
           <ChevronLeft size={20} />
         </button>
         
@@ -49,7 +64,11 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
           <span className="font-medium text-lg">{selectedMonth}</span>
         </div>
         
-        <button className="neuro-flat p-2 rounded-full" onClick={handleNextMonth} disabled={isDisabled}>
+        <button 
+          className="neuro-flat p-2 rounded-full" 
+          onClick={handleNextMonth} 
+          disabled={isDisabled}
+        >
           <ChevronRight size={20} />
         </button>
       </div>
@@ -69,6 +88,8 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
           </p>
         </div>
       </div>
-    </header>;
+    </header>
+  );
 };
-export default TransactionsHeader;
+
+export default React.memo(TransactionsHeader);