diff --git a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts index 41ac099..02ff866 100644 --- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts +++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts @@ -3,14 +3,15 @@ import { useCallback, MutableRefObject } from 'react'; import { Transaction } from '@/components/TransactionCard'; import { toast } from '@/hooks/useToast.wrapper'; import { handleDeleteStorage } from './deleteTransactionStorage'; +import { User } from '@supabase/supabase-js'; /** - * 트랜잭션 삭제 핵심 기능 - 완전 재구현 버전 + * 트랜잭션 삭제 핵심 기능 - 완전히 개선된 UI/서버 분리 버전 */ export const useDeleteTransactionCore = ( transactions: Transaction[], setTransactions: React.Dispatch>, - user: any, + user: User | null, pendingDeletionRef: MutableRefObject> ) => { return useCallback(async (id: string): Promise => { @@ -26,20 +27,20 @@ export const useDeleteTransactionCore = ( // 삭제 중인 상태 표시 pendingDeletionRef.current.add(id); - // 완전히 분리된 안전장치: 최대 700ms 후 강제로 pendingDeletion 상태 제거 - const timeoutId = setTimeout(() => { + // 안전장치: 최대 800ms 후 강제로 pendingDeletion 상태 제거 + const safetyTimeoutId = setTimeout(() => { if (pendingDeletionRef.current.has(id)) { - console.warn('안전장치: pendingDeletion 강제 제거 (700ms 타임아웃)'); + console.warn('안전장치: pendingDeletion 강제 제거 (800ms 타임아웃)'); pendingDeletionRef.current.delete(id); } - }, 700); + }, 800); // 트랜잭션 찾기 const transactionToDelete = transactions.find(t => t.id === id); // 트랜잭션이 없는 경우 if (!transactionToDelete) { - clearTimeout(timeoutId); + clearTimeout(safetyTimeoutId); pendingDeletionRef.current.delete(id); console.warn('삭제할 트랜잭션이 존재하지 않음:', id); @@ -53,8 +54,10 @@ export const useDeleteTransactionCore = ( return false; } - // 1. UI 상태 즉시 업데이트 (가장 중요한 부분) + // 1. UI 상태 즉시 업데이트 (가장 중요한 부분) - 화면 블로킹 방지 const updatedTransactions = transactions.filter(t => t.id !== id); + + // React 18 자동 배치 처리 활용 setTransactions(updatedTransactions); // 삭제 알림 표시 @@ -64,36 +67,31 @@ export const useDeleteTransactionCore = ( duration: 1500 }); - // 2. 스토리지 처리 (타임아웃 보호 적용) - try { - // 스토리지 작업에 타임아웃 적용 - const storagePromise = handleDeleteStorage(updatedTransactions, id, user, pendingDeletionRef); - const timeoutPromise = new Promise((resolve) => { - setTimeout(() => { - console.warn('스토리지 작업 타임아웃 - 강제 종료'); - resolve(true); - }, 500); - }); - - // 둘 중 먼저 완료되는 것 채택 - await Promise.race([storagePromise, timeoutPromise]); - } catch (storageError) { - console.error('스토리지 처리 오류 (무시됨):', storageError); - // 오류가 있어도 계속 진행 (UI는 이미 업데이트됨) - } + // 2. 스토리지 처리와 서버 동기화는 완전히 비동기로 처리 (UI 블로킹 없음) + queueMicrotask(() => { + handleDeleteStorage(updatedTransactions, id, user, pendingDeletionRef) + .catch(err => console.error('스토리지 처리 오류:', err)) + .finally(() => { + // 작업 완료 후 pendingDeletion 상태 정리 + pendingDeletionRef.current.delete(id); + + // 안전장치 타임아웃 제거 + clearTimeout(safetyTimeoutId); + + try { + // 이벤트 발생 (오류 처리 포함) + window.dispatchEvent(new Event('transactionDeleted')); + console.log('삭제 이벤트 발생 성공 (ID: ' + id + ')'); + } catch (e) { + console.error('이벤트 발생 오류:', e); + } + }); + }); - // 안전장치 타임아웃 제거 - clearTimeout(timeoutId); - - // 이벤트 발생 시도 (오류 억제) - try { - window.dispatchEvent(new Event('transactionDeleted')); - } catch (e) { - console.error('이벤트 발생 오류 (무시됨):', e); - } - - console.log('삭제 작업 정상 완료:', id); + // 즉시 성공 반환 (UI 응답성 우선) - 스토리지 작업 완료를 기다리지 않음 + console.log('삭제 UI 업데이트 완료, 백그라운드 작업 진행 중'); return true; + } catch (error) { console.error('트랜잭션 삭제 전체 오류:', error); diff --git a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts index ba346bf..ff20edd 100644 --- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts +++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts @@ -4,56 +4,81 @@ import { Transaction } from '@/components/TransactionCard'; import { saveTransactionsToStorage } from '../../storageUtils'; import { deleteTransactionFromServer } from '@/utils/sync/transaction/deleteTransaction'; import { toast } from '@/hooks/useToast.wrapper'; +import { User } from '@supabase/supabase-js'; /** - * 스토리지 및 Supabase 삭제 처리 - 안정성 개선 버전 + * 스토리지 및 Supabase 삭제 처리 - 최적화된 성능 및 오류 회복 가능한 버전 */ export const handleDeleteStorage = ( updatedTransactions: Transaction[], id: string, - user: any, + user: User | null, pendingDeletionRef: MutableRefObject> ): Promise => { return new Promise((resolve) => { try { - // 즉시 로컬 저장소 업데이트 (가장 중요한 부분) - try { - saveTransactionsToStorage(updatedTransactions); - console.log('로컬 스토리지에서 트랜잭션 삭제 완료 (ID: ' + id + ')'); - } catch (storageError) { - console.error('로컬 스토리지 저장 실패:', storageError); - } - - // 삭제 완료 상태로 업데이트 (pending 제거) - pendingDeletionRef.current.delete(id); - - // 로그인된 경우에만 서버 동기화 시도 - if (user && user.id) { + // 1. 로컬 스토리지 저장 - requestAnimationFrame 사용하여 UI 렌더링 착각 방지 + requestAnimationFrame(() => { try { - // 비동기 작업 실행 (결과 기다리지 않음) - deleteTransactionFromServer(user.id, id) - .then(() => { - console.log('서버 삭제 완료:', id); - }) - .catch(serverError => { - console.error('서버 삭제 실패 (무시됨):', serverError); - }); - } catch (syncError) { - console.error('서버 동기화 요청 실패 (무시됨):', syncError); + saveTransactionsToStorage(updatedTransactions); + console.log('로컬 스토리지에서 트랜잭션 삭제 완료 (ID: ' + id + ')'); + + // 2. 서버 동기화 - 로컬 저장 성공 후 비동기로 실행 + if (user && user.id) { + // 비동기 서버 연동 - 실패해도 UI에 영향 없음 + setTimeout(() => { + try { + deleteTransactionFromServer(user.id, id) + .then(() => console.log('서버 삭제 완료:', id)) + .catch(err => console.error('서버 삭제 실패 (무시됨):', err)); + } catch (syncError) { + console.error('서버 동기화 요청 오류:', syncError); + } + }, 0); // 다음 이벤트 루프로 지연 - UI 차단 방지 + } + + // 저장소 이벤트 발생 (중요) + try { + window.dispatchEvent(new Event('storage')); + window.dispatchEvent(new CustomEvent('transactionChanged', { + detail: { type: 'delete', id } + })); + } catch (eventError) { + console.error('이벤트 발생 오류:', eventError); + } + + } catch (storageError) { + console.error('로컬 스토리지 저장 실패:', storageError); + // 오류가 있어도 성공으로 처리 (UI 응답성 우선) + } finally { + // 반드시 pending 상태 제거 + if (pendingDeletionRef.current.has(id)) { + pendingDeletionRef.current.delete(id); + } + + // 항상 성공 반환 (UI는 이미 업데이트됨) + resolve(true); } - } - - // 항상 성공으로 간주 (UI 응답성 우선) - resolve(true); + }); } catch (error) { - console.error('트랜잭션 삭제 스토리지 전체 오류:', error); + console.error('트랜잭션 삭제 스토리지 처리 오류:', error); // 안전하게 pending 상태 제거 if (pendingDeletionRef.current.has(id)) { pendingDeletionRef.current.delete(id); } - // 심각한 오류 발생해도 UI는 이미 업데이트되었으므로 성공 반환 + // 해당 트랜잭션에 대한 오류 - 디버그 모드에서만 토스트 표시 + if (process.env.NODE_ENV === 'development') { + toast({ + title: "스토리지 오류", + description: "저장소 업데이트 중 문제가 발생했지만, UI는 업데이트되었습니다.", + variant: "default", + duration: 1500 + }); + } + + // 오류가 있어도 UI는 이미 업데이트되었으므로 성공으로 처리 resolve(true); } }); diff --git a/src/utils/sync/transaction/deleteTransaction.ts b/src/utils/sync/transaction/deleteTransaction.ts index 9403d44..58c777a 100644 --- a/src/utils/sync/transaction/deleteTransaction.ts +++ b/src/utils/sync/transaction/deleteTransaction.ts @@ -4,7 +4,8 @@ import { isSyncEnabled } from '../syncSettings'; import { toast } from '@/hooks/useToast.wrapper'; /** - * 특정 트랜잭션 ID 삭제 처리 - 안정성 개선 버전 + * 특정 트랜잭션 ID 삭제 처리 - 완전히 재구현된 안정성 개선 버전 + * 타임아웃 처리 및 오류 회복력 강화 */ export const deleteTransactionFromServer = async (userId: string, transactionId: string): Promise => { if (!isSyncEnabled()) return; @@ -12,31 +13,57 @@ export const deleteTransactionFromServer = async (userId: string, transactionId: try { console.log(`트랜잭션 삭제 요청: ${transactionId}`); - // 삭제 요청 (타임아웃 처리 없음 - 불필요한 복잡성 제거) - const { error } = await supabase - .from('transactions') - .delete() - .eq('transaction_id', transactionId) - .eq('user_id', userId); - - if (error) { - console.error('트랜잭션 삭제 실패:', error); - throw error; - } + // AbortController를 사용한 타임아웃 처리 (3초) + const controller = new AbortController(); + const timeoutId = setTimeout(() => { + console.warn(`트랜잭션 삭제 타임아웃 (ID: ${transactionId})`); + controller.abort(); + }, 3000); - console.log(`트랜잭션 ${transactionId} 삭제 완료`); + try { + // Supabase 요청에 AbortSignal 추가 + const { error } = await supabase + .from('transactions') + .delete() + .eq('transaction_id', transactionId) + .eq('user_id', userId) + .abortSignal(controller.signal); + + // 요청 완료 후 타임아웃 해제 + clearTimeout(timeoutId); + + if (error) { + console.error('트랜잭션 삭제 실패:', error); + throw error; + } + + console.log(`트랜잭션 ${transactionId} 삭제 완료`); + } catch (e) { + // 타임아웃에 의한 중단인 경우 + const error = e as Error & { code?: number }; + if (error.name === 'AbortError' || error.code === 20) { + console.warn(`트랜잭션 삭제 요청 타임아웃 (ID: ${transactionId})`); + return; // 정상적으로 처리된 것으로 간주 + } + throw error; // 그 외 오류는 상위로 전파 + } finally { + clearTimeout(timeoutId); // 안전하게 항상 타임아웃 해제 + } } catch (error) { console.error('트랜잭션 삭제 중 오류:', error); - // 오류 메시지 (중요도 낮음) - toast({ - title: "동기화 문제", - description: "서버에서 삭제 중 문제가 발생했습니다.", - variant: "default", - duration: 1500 - }); + // 시각적 알림은 최소화 (사용자 경험 저하 방지) + // 개발 모드나 로그에만 오류 기록 + if (process.env.NODE_ENV === 'development') { + toast({ + title: "동기화 문제", + description: "서버에서 삭제 중 문제가 발생했습니다. 로컬 데이터는 정상 처리되었습니다.", + variant: "default", + duration: 1500 + }); + } - // 오류 다시 던지기 (호출자가 처리하도록) - throw error; + // UI 작업에는 영향을 주지 않도록 오류 무시 + console.log('서버 동기화 오류 발생했으나 UI 작업은 계속 진행됨'); } };