Refactor: Codebase review and cleanup

Review the entire codebase for potential issues and perform necessary cleanup.

src/components/transactions/TransactionsHeader.tsx

@@ -1,7 +1,8 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
 import { formatCurrency } from '@/utils/formatters';
+import { formatMonthForDisplay } from '@/hooks/transactions/dateUtils';
 
 interface TransactionsHeaderProps {
   selectedMonth: string;
@@ -24,14 +25,25 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
   totalExpenses,
   isDisabled
 }) => {
-  console.log('TransactionsHeader 렌더링:', {
-    selectedMonth,
-    totalExpenses
-  });
-
+  // 월 표시 형식 변환 (2024-04 -> 2024년 04월)
+  const displayMonth = useMemo(() => 
+    formatMonthForDisplay(selectedMonth), 
+    [selectedMonth]
+  );
+  
   // 예산 정보가 없는 경우 기본값 사용
   const targetAmount = budgetData?.monthly?.targetAmount || 0;
   
+  // 디버깅을 위한 로그
+  React.useEffect(() => {
+    console.log('TransactionsHeader 렌더링:', { 
+      selectedMonth, 
+      displayMonth, 
+      totalExpenses,
+      targetAmount
+    });
+  }, [selectedMonth, displayMonth, totalExpenses, targetAmount]);
+  
   return (
     <header className="py-4">
       <h1 className="font-bold neuro-text mb-3 text-xl">지출 내역</h1>
@@ -61,7 +73,7 @@ const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
         
         <div className="flex items-center gap-2">
           <Calendar size={18} className="text-neuro-income" />
-          <span className="font-medium text-lg">{selectedMonth}</span>
+          <span className="font-medium text-lg">{displayMonth}</span>
         </div>
         
         <button