66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import TransactionEditDialog from './TransactionEditDialog';
|
|
import TransactionIcon from './transaction/TransactionIcon';
|
|
import TransactionDetails from './transaction/TransactionDetails';
|
|
import TransactionAmount from './transaction/TransactionAmount';
|
|
import { Transaction } from '@/contexts/budget/types';
|
|
|
|
interface TransactionCardProps {
|
|
transaction: Transaction;
|
|
onUpdate?: (updatedTransaction: Transaction) => void;
|
|
onDelete?: (id: string) => Promise<boolean> | boolean; // 타입 변경됨: boolean 또는 Promise<boolean> 반환
|
|
}
|
|
|
|
const TransactionCard: React.FC<TransactionCardProps> = ({
|
|
transaction,
|
|
onDelete,
|
|
}) => {
|
|
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
|
const { title, amount, date, category } = transaction;
|
|
|
|
// 삭제 핸들러 - 인자로 받은 onDelete가 없거나 타입이 맞지 않을 때 기본 함수 제공
|
|
const handleDelete = async (id: string): Promise<boolean> => {
|
|
try {
|
|
if (onDelete) {
|
|
return await onDelete(id);
|
|
}
|
|
console.log('삭제 핸들러가 제공되지 않았습니다');
|
|
return false;
|
|
} catch (error) {
|
|
console.error('트랜잭션 삭제 처리 중 오류:', error);
|
|
return false;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in cursor-pointer"
|
|
onClick={() => setIsEditDialogOpen(true)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<TransactionIcon category={category} />
|
|
<TransactionDetails title={title} date={date} />
|
|
</div>
|
|
|
|
<TransactionAmount amount={amount} />
|
|
</div>
|
|
</div>
|
|
|
|
<TransactionEditDialog
|
|
transaction={transaction}
|
|
open={isEditDialogOpen}
|
|
onOpenChange={setIsEditDialogOpen}
|
|
onDelete={handleDelete} // 래핑된 핸들러 사용
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TransactionCard;
|
|
// Transaction 타입을 context에서 직접 다시 내보냅니다
|
|
export type { Transaction } from '@/contexts/budget/types';
|