Further stabilize transaction deletion
Attempt to further stabilize transaction deletion process and address potential UI freezing issues.
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
|
||||
import { useCallback, MutableRefObject } from 'react';
|
||||
import { Transaction } from '@/components/TransactionCard';
|
||||
import { toast } from '@/hooks/useToast.wrapper';
|
||||
import { handleDeleteStorage } from './deleteOperation/deleteTransactionStorage';
|
||||
|
||||
/**
|
||||
* 트랜잭션 삭제 핵심 기능 - 완전히 재구현된 버전
|
||||
*/
|
||||
export const useDeleteTransactionCore = (
|
||||
transactions: Transaction[],
|
||||
setTransactions: React.Dispatch<React.SetStateAction<Transaction[]>>,
|
||||
user: any,
|
||||
pendingDeletionRef: MutableRefObject<Set<string>>
|
||||
) => {
|
||||
return useCallback(async (id: string): Promise<boolean> => {
|
||||
try {
|
||||
console.log('트랜잭션 삭제 시작 (ID):', id);
|
||||
|
||||
// 중복 삭제 방지
|
||||
if (pendingDeletionRef.current.has(id)) {
|
||||
console.warn('이미 삭제 중인 트랜잭션:', id);
|
||||
return true;
|
||||
}
|
||||
|
||||
// 삭제 상태 표시
|
||||
pendingDeletionRef.current.add(id);
|
||||
|
||||
// 안전장치: 최대 700ms 후 자동으로 pending 상태 제거
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (pendingDeletionRef.current.has(id)) {
|
||||
console.warn('안전장치: 삭제 타임아웃으로 pending 상태 자동 제거');
|
||||
pendingDeletionRef.current.delete(id);
|
||||
}
|
||||
}, 700);
|
||||
|
||||
// 트랜잭션 찾기
|
||||
const transactionToDelete = transactions.find(t => t.id === id);
|
||||
|
||||
// 트랜잭션이 없으면 오류 반환
|
||||
if (!transactionToDelete) {
|
||||
clearTimeout(timeoutId);
|
||||
pendingDeletionRef.current.delete(id);
|
||||
console.warn('삭제할 트랜잭션이 존재하지 않음:', id);
|
||||
|
||||
toast({
|
||||
title: "삭제 실패",
|
||||
description: "항목을 찾을 수 없습니다.",
|
||||
variant: "destructive",
|
||||
duration: 1500
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
// 1. UI 상태 즉시 업데이트 (사용자 경험 최우선)
|
||||
const updatedTransactions = transactions.filter(t => t.id !== id);
|
||||
setTransactions(updatedTransactions);
|
||||
|
||||
// 성공 알림 표시
|
||||
toast({
|
||||
title: "삭제 완료",
|
||||
description: "지출 항목이 삭제되었습니다.",
|
||||
duration: 1500
|
||||
});
|
||||
|
||||
// 2. 스토리지 처리 (UI 블로킹 없음)
|
||||
try {
|
||||
// 스토리지 작업에 타임아웃 적용 (500ms 내에 완료되지 않으면 중단)
|
||||
const storagePromise = handleDeleteStorage(updatedTransactions, id, user, pendingDeletionRef);
|
||||
const timeoutPromise = new Promise<boolean>((resolve) => {
|
||||
setTimeout(() => {
|
||||
console.warn('스토리지 작업 타임아웃 - 강제 완료');
|
||||
resolve(true);
|
||||
}, 500);
|
||||
});
|
||||
|
||||
// 빠른 것 우선 처리
|
||||
await Promise.race([storagePromise, timeoutPromise]);
|
||||
} catch (storageError) {
|
||||
console.error('스토리지 처리 오류 (무시됨):', storageError);
|
||||
// 오류가 있어도 계속 진행 (UI는 이미 업데이트됨)
|
||||
}
|
||||
|
||||
// 안전장치 타임아웃 제거
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// 업데이트 이벤트 발생 (오류 무시)
|
||||
try {
|
||||
window.dispatchEvent(new Event('transactionDeleted'));
|
||||
} catch (e) {
|
||||
console.error('이벤트 발생 오류 (무시됨):', e);
|
||||
}
|
||||
|
||||
console.log('삭제 작업 정상 완료:', id);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('트랜잭션 삭제 전체 오류:', error);
|
||||
|
||||
// 항상 pending 상태 제거 보장
|
||||
pendingDeletionRef.current.delete(id);
|
||||
|
||||
// 오류 알림
|
||||
toast({
|
||||
title: "삭제 실패",
|
||||
description: "지출 삭제 처리 중 문제가 발생했습니다.",
|
||||
duration: 1500,
|
||||
variant: "destructive"
|
||||
});
|
||||
|
||||
return false;
|
||||
}
|
||||
}, [transactions, setTransactions, user, pendingDeletionRef]);
|
||||
};
|
||||
Reference in New Issue
Block a user