diff --git a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts index df13aa3..1bbbeef 100644 --- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts +++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts @@ -20,83 +20,62 @@ export const useDeleteTransactionCore = ( try { console.log('트랜잭션 삭제 작업 시작 - ID:', id); - // pendingDeletionRef 초기화 확인 - if (!pendingDeletionRef.current) { - pendingDeletionRef.current = new Set(); - } - - // 이미 삭제 중인지 확인 - if (pendingDeletionRef.current.has(id)) { - console.log('이미 삭제 중인 트랜잭션:', id); + // 전달된 ID로 트랜잭션 찾기 + const transactionToDelete = transactions.find(t => t.id === id); + + // 트랜잭션이 존재하는지 확인 + if (!transactionToDelete) { + console.warn('삭제할 트랜잭션이 없음:', id); toast({ - title: "처리 중", - description: "이전 삭제 작업이 진행 중입니다.", - duration: 1500 + title: "삭제 실패", + description: "해당 항목을 찾을 수 없습니다.", + variant: "destructive" }); resolve(false); return; } - // 트랜잭션이 존재하는지 확인 - const transactionToDelete = transactions.find(t => t.id === id); - if (!transactionToDelete) { - console.warn('삭제할 트랜잭션이 존재하지 않음:', id); - resolve(false); - return; - } - - // 삭제 중인 상태로 표시 - pendingDeletionRef.current.add(id); - - // 즉시 상태 업데이트 (현재 상태 복사를 통한 안전한 처리) - const updatedTransactions = transactions.filter(transaction => transaction.id !== id); - - // UI 업데이트 - 동기식 처리 + // 즉시 상태 업데이트 (현재 상태에서 삭제할 항목 필터링) + const updatedTransactions = transactions.filter(t => t.id !== id); setTransactions(updatedTransactions); // 삭제 성공 토스트 toast({ title: "삭제 완료", description: "지출 항목이 삭제되었습니다.", - duration: 2000 + duration: 1500 }); - // UI 업데이트 완료 후 즉시 성공 반환 (사용자 경험 개선) - resolve(true); - - // 백그라운드에서 스토리지 작업 처리 - setTimeout(() => { - try { - // 스토리지 처리 - 간소화된 함수 호출 - handleDeleteStorage( - updatedTransactions, - id, - user, - pendingDeletionRef - ); - } catch (storageError) { - console.error('스토리지 작업 오류:', storageError); - if (pendingDeletionRef.current) { - pendingDeletionRef.current.delete(id); - } - } - }, 50); - + // 스토리지 업데이트 작업 시작 (백그라운드) + try { + // 스토리지 처리 (스토리지 및 Supabase 업데이트) + handleDeleteStorage( + updatedTransactions, + id, + user, + pendingDeletionRef + ); + + // 이벤트 발생 + setTimeout(() => { + window.dispatchEvent(new Event('transactionDeleted')); + }, 100); + + console.log('삭제 작업 완료:', id); + resolve(true); + } catch (storageError) { + console.error('스토리지 작업 오류:', storageError); + // 스토리지 오류가 발생해도 UI는 이미 업데이트되었으므로 true 반환 + resolve(true); + } } catch (error) { - console.error('트랜잭션 삭제 초기화 중 오류:', error); - - // 오류 발생 시 토스트 표시 + console.error('트랜잭션 삭제 오류:', error); toast({ title: "삭제 실패", description: "지출 삭제 중 오류가 발생했습니다.", - duration: 2000, + duration: 1500, variant: "destructive" }); - - // 캣치된 모든 오류에서 보류 삭제 표시 제거 - if (pendingDeletionRef.current) { - pendingDeletionRef.current.delete(id); - } resolve(false); } }); diff --git a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts index a8c89f2..6e65720 100644 --- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts +++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts @@ -21,49 +21,46 @@ export const handleDeleteStorage = ( // Supabase 업데이트 (비동기 처리) if (user) { - // 네트워크 작업은 비동기로 진행 - setTimeout(() => { - try { - deleteTransactionFromSupabase(user, id) - .catch(error => { - console.error('Supabase 삭제 오류:', error); - }) - .finally(() => { - // 작업 완료 표시 - if (pendingDeletionRef.current) { - pendingDeletionRef.current.delete(id); - } - }); - } catch (e) { - console.error('Supabase 작업 오류:', e); - // 작업 완료 표시 - if (pendingDeletionRef.current) { - pendingDeletionRef.current.delete(id); - } + // 네트워크 작업은 비동기로 진행 - 실패해도 UI에 영향 없음 + try { + deleteTransactionFromSupabase(user, id) + .then(() => { + console.log('Supabase 삭제 완료:', id); + }) + .catch(error => { + console.error('Supabase 삭제 오류:', error); + }) + .finally(() => { + // 작업 완료 후 반드시 pendingDeletion에서 제거 + if (pendingDeletionRef.current) { + pendingDeletionRef.current.delete(id); + } + }); + } catch (e) { + console.error('Supabase 작업 오류:', e); + // 작업 완료 표시 + if (pendingDeletionRef.current) { + pendingDeletionRef.current.delete(id); } - }, 10); + } } else { - // 작업 완료 표시 + // 로그인 안한 사용자는 바로 완료 처리 if (pendingDeletionRef.current) { pendingDeletionRef.current.delete(id); } } - - // 이벤트 발생 - setTimeout(() => { - try { - window.dispatchEvent(new Event('transactionDeleted')); - } catch (e) { - console.error('이벤트 발생 오류:', e); - } - }, 100); + // 추가 확인: 성공적으로 로컬 업데이트 완료 + return true; } catch (storageError) { console.error('스토리지 작업 중 오류:', storageError); - // 작업 완료 표시 + // 작업 완료 표시 (오류 발생해도 필수) if (pendingDeletionRef.current) { pendingDeletionRef.current.delete(id); } + + // 스토리지 작업 실패 시 false 반환 + return false; } }; diff --git a/src/hooks/transactions/transactionOperations/deleteTransaction.ts b/src/hooks/transactions/transactionOperations/deleteTransaction.ts index d56322f..bc650af 100644 --- a/src/hooks/transactions/transactionOperations/deleteTransaction.ts +++ b/src/hooks/transactions/transactionOperations/deleteTransaction.ts @@ -38,27 +38,36 @@ export const useDeleteTransaction = ( return false; } + // pendingDeletionRef에 추가 + pendingDeletionRef.current.add(id); + // 트랜잭션 삭제 실행 const result = await deleteTransactionHandler(id); - // 안전장치: 삭제 작업이 10초 이상 걸리면 강제로 상태 초기화 + // 삭제 작업이 완료되면 타임아웃 설정 (안전장치) + clearTimeout(timeoutRef.current[id]); // 기존 타임아웃 제거 timeoutRef.current[id] = setTimeout(() => { if (pendingDeletionRef.current.has(id)) { - console.warn('삭제 작업 타임아웃 - 강제 초기화:', id); + console.warn('삭제 작업 완료 후 정리:', id); pendingDeletionRef.current.delete(id); delete timeoutRef.current[id]; } - }, 10000); + }, 2000); // 2초 후 상태 정리 return result; } catch (error) { console.error('트랜잭션 삭제 오류:', error); - // 오류 발생 시 상태 초기화 + // 오류 발생 시 상태 초기화 (중요: 반드시 해제 필요) if (pendingDeletionRef.current) { pendingDeletionRef.current.delete(id); } + if (timeoutRef.current[id]) { + clearTimeout(timeoutRef.current[id]); + delete timeoutRef.current[id]; + } + toast({ title: "삭제 실패", description: "처리 중 오류가 발생했습니다. 다시 시도해주세요.", @@ -77,6 +86,9 @@ export const useDeleteTransaction = ( Object.values(timeoutRef.current).forEach(timeout => { clearTimeout(timeout); }); + + // 모든 대기 중인 삭제 작업 해제 + pendingDeletionRef.current.clear(); }; }, []); diff --git a/src/pages/Transactions.tsx b/src/pages/Transactions.tsx index 9f9f4a3..5b40d37 100644 --- a/src/pages/Transactions.tsx +++ b/src/pages/Transactions.tsx @@ -7,6 +7,7 @@ import { useTransactions } from '@/hooks/transactions'; import TransactionsHeader from '@/components/transactions/TransactionsHeader'; import TransactionsContent from '@/components/transactions/TransactionsContent'; import { Transaction } from '@/components/TransactionCard'; +import { toast } from '@/hooks/useToast.wrapper'; const Transactions = () => { const { @@ -43,40 +44,38 @@ const Transactions = () => { } try { - console.log('Transactions 페이지에서 트랜잭션 삭제:', id); - // 삭제 중임을 표시 setIsProcessing(true); setDeletingId(id); - // 간소화된 삭제 작업 실행 + console.log('트랜잭션 삭제 시작 (ID):', id); + + // deleteTransaction 함수 호출 (Promise 반환 예상) const success = await deleteTransaction(id); - // 상태 초기화 - setTimeout(() => { - setIsProcessing(false); - setDeletingId(null); - }, 300); - - // 성공 여부와 관계없이 데이터 새로고침 - setTimeout(() => { - refreshTransactions(); - }, 500); + console.log('삭제 작업 결과:', success); return success; } catch (error) { console.error('트랜잭션 삭제 처리 중 오류:', error); - // 오류 발생 시 상태 초기화 - setIsProcessing(false); - setDeletingId(null); - - // 오류 후에도 데이터 새로고침 (일관성 유지) - setTimeout(() => { - refreshTransactions(); - }, 500); + // 오류 발생 시 토스트 표시 + toast({ + title: "삭제 실패", + description: "지출 삭제 중 오류가 발생했습니다.", + variant: "destructive" + }); return false; + } finally { + // 상태 초기화 (약간의 지연 후) + setTimeout(() => { + setIsProcessing(false); + setDeletingId(null); + + // 데이터 새로고침 (삭제 후 UI 업데이트) + refreshTransactions(); + }, 500); } };