108 lines
3.1 KiB
TypeScript
108 lines
3.1 KiB
TypeScript
|
|
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;
|
|
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
|
|
}) => {
|
|
// 월 표시 형식 변환 (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>
|
|
|
|
{/* 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">{displayMonth}</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="font-bold text-neuro-income text-base">
|
|
{formatCurrency(targetAmount)}
|
|
</p>
|
|
</div>
|
|
<div className="neuro-card">
|
|
<p className="text-sm text-gray-500 mb-1">총 지출</p>
|
|
<p className="font-bold text-neuro-income text-base">
|
|
{formatCurrency(totalExpenses)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TransactionsHeader);
|