58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
|
|
import React, { useCallback } from 'react';
|
|
import TransactionCard, { Transaction } from '@/components/TransactionCard';
|
|
|
|
interface TransactionDateGroupProps {
|
|
date: string;
|
|
transactions: Transaction[];
|
|
onTransactionDelete: (id: string) => Promise<boolean> | boolean;
|
|
}
|
|
|
|
/**
|
|
* 날짜별 트랜잭션 그룹 컴포넌트 - 성능 및 안정성 개선 버전
|
|
*/
|
|
const TransactionDateGroup: React.FC<TransactionDateGroupProps> = ({
|
|
date,
|
|
transactions,
|
|
onTransactionDelete
|
|
}) => {
|
|
// 메모이즈된 삭제 핸들러로 성능 최적화
|
|
const handleDelete = useCallback(async (id: string): Promise<boolean> => {
|
|
try {
|
|
if (!onTransactionDelete) {
|
|
console.warn('삭제 핸들러가 제공되지 않았습니다');
|
|
return false;
|
|
}
|
|
|
|
// Promise 반환 여부에 따라 적절히 처리
|
|
const result = await Promise.resolve(onTransactionDelete(id));
|
|
return Boolean(result);
|
|
} catch (error) {
|
|
console.error('트랜잭션 삭제 처리 중 오류:', error);
|
|
return false;
|
|
}
|
|
}, [onTransactionDelete]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<div className="h-1 flex-1 neuro-pressed"></div>
|
|
<h2 className="text-sm font-medium text-gray-500">{date}</h2>
|
|
<div className="h-1 flex-1 neuro-pressed"></div>
|
|
</div>
|
|
|
|
<div className="grid gap-3">
|
|
{transactions.map(transaction => (
|
|
<TransactionCard
|
|
key={transaction.id}
|
|
transaction={transaction}
|
|
onDelete={handleDelete}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(TransactionDateGroup);
|