Fix deletion UI freeze

Addresses the issue where the UI becomes unresponsive after deleting a transaction.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-18 05:39:29 +00:00
parent 152586cd1b
commit 915967a9ac
4 changed files with 202 additions and 83 deletions

View File

@@ -6,22 +6,35 @@ import { deleteTransactionFromSupabase } from '../../supabaseUtils';
import { toast } from '@/hooks/useToast.wrapper';
/**
* 스토리지 및 Supabase 삭제 처리 - 간소화 및 안정성 개선
* 스토리지 및 Supabase 삭제 처리 - 안정성 대폭 개선
*/
export const handleDeleteStorage = (
updatedTransactions: Transaction[],
id: string,
user: any,
pendingDeletionRef: MutableRefObject<Set<string>>
) => {
): boolean => {
try {
// 로컬 스토리지 업데이트
saveTransactionsToStorage(updatedTransactions);
console.log('로컬 스토리지 저장 완료');
// 로컬 스토리지 업데이트 (동기 처리)
try {
saveTransactionsToStorage(updatedTransactions);
console.log('로컬 스토리지 저장 완료');
} catch (storageError) {
console.error('로컬 스토리지 저장 실패:', storageError);
// 스토리지 실패해도 계속 진행 (Supabase 업데이트 시도)
}
// Supabase 업데이트 (비동기 처리)
if (user) {
// 네트워크 작업은 비동기로 진행 - 실패해도 UI에 영향 없음
// 타임아웃 설정 (10초)
const timeoutId = setTimeout(() => {
console.warn('Supabase 삭제 작업 시간 초과:', id);
if (pendingDeletionRef.current) {
pendingDeletionRef.current.delete(id);
}
}, 10000);
try {
deleteTransactionFromSupabase(user, id)
.then(() => {
@@ -31,6 +44,9 @@ export const handleDeleteStorage = (
console.error('Supabase 삭제 오류:', error);
})
.finally(() => {
// 타임아웃 취소
clearTimeout(timeoutId);
// 작업 완료 후 반드시 pendingDeletion에서 제거
if (pendingDeletionRef.current) {
pendingDeletionRef.current.delete(id);
@@ -38,6 +54,9 @@ export const handleDeleteStorage = (
});
} catch (e) {
console.error('Supabase 작업 오류:', e);
// 타임아웃 취소
clearTimeout(timeoutId);
// 작업 완료 표시
if (pendingDeletionRef.current) {
pendingDeletionRef.current.delete(id);