Fix deletion UI freeze

Addresses the issue where the UI becomes unresponsive after deleting a transaction.
2025-03-18 05:39:29 +00:00
parent 152586cd1b
commit 915967a9ac
4 changed files with 202 additions and 83 deletions
--- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts
+++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts
@@ -5,7 +5,7 @@ import { toast } from '@/hooks/useToast.wrapper';
 import { handleDeleteStorage } from './deleteTransactionStorage';

 /**
- * 트랜잭션 삭제 핵심 기능 - 성능 및 안정성 개선
+ * 트랜잭션 삭제 핵심 기능 - 안정성 대폭 개선
 */
 export const useDeleteTransactionCore = (
  transactions: Transaction[],
@@ -13,9 +13,9 @@ export const useDeleteTransactionCore = (
  user: any,
  pendingDeletionRef: MutableRefObject<Set<string>>
 ) => {
-  // 트랜잭션 삭제 - 성능 및 안정성 개선 버전
+  // 트랜잭션 삭제 - 안정성 대폭 개선 버전
  return useCallback((id: string): Promise<boolean> => {
-    // 프로미스 생성
+    // 반드시 Promise 반환
    return new Promise<boolean>((resolve) => {
      try {
        console.log('트랜잭션 삭제 작업 시작 - ID:', id);
@@ -29,53 +29,88 @@ export const useDeleteTransactionCore = (
          toast({
            title: "삭제 실패",
            description: "해당 항목을 찾을 수 없습니다.",
-            variant: "destructive"
+            variant: "destructive",
+            duration: 1500
          });
+          
+          // ID 정리
+          if (pendingDeletionRef.current.has(id)) {
+            pendingDeletionRef.current.delete(id);
+          }
+          
          resolve(false);
          return;
        }
        
-        // 즉시 상태 업데이트 (현재 상태에서 삭제할 항목 필터링)
-        const updatedTransactions = transactions.filter(t => t.id !== id);
-        setTransactions(updatedTransactions);
-        
-        // 삭제 성공 토스트
-        toast({
-          title: "삭제 완료",
-          description: "지출 항목이 삭제되었습니다.",
-          duration: 1500
-        });
-        
-        // 스토리지 업데이트 작업 시작 (백그라운드)
+        // 1. UI 업데이트 단계
        try {
-          // 스토리지 처리 (스토리지 및 Supabase 업데이트)
-          handleDeleteStorage(
-            updatedTransactions, 
-            id, 
-            user, 
-            pendingDeletionRef
-          );
+          // 상태 업데이트 (렌더링 트리거)
+          const updatedTransactions = transactions.filter(t => t.id !== id);
+          setTransactions(updatedTransactions);
          
-          // 이벤트 발생
-          setTimeout(() => {
-            window.dispatchEvent(new Event('transactionDeleted'));
-          }, 100);
+          // 삭제 성공 토스트 (UI 피드백)
+          toast({
+            title: "삭제 완료",
+            description: "지출 항목이 삭제되었습니다.",
+            duration: 1500
+          });
          
-          console.log('삭제 작업 완료:', id);
-          resolve(true);
-        } catch (storageError) {
-          console.error('스토리지 작업 오류:', storageError);
-          // 스토리지 오류가 발생해도 UI는 이미 업데이트되었으므로 true 반환
-          resolve(true);
+          // 2. 스토리지 업데이트 단계 (백그라운드 작업)
+          try {
+            // 스토리지 처리 (로컬 스토리지 및 Supabase 업데이트)
+            const storageResult = handleDeleteStorage(
+              updatedTransactions, 
+              id, 
+              user, 
+              pendingDeletionRef
+            );
+            
+            // 이벤트 발생
+            setTimeout(() => {
+              window.dispatchEvent(new Event('transactionDeleted'));
+            }, 100);
+            
+            console.log('삭제 작업 UI 단계 완료:', id);
+            
+            // 스토리지 결과와 관계없이 UI는 이미 업데이트되었으므로 true 반환
+            resolve(true);
+          } catch (storageError) {
+            console.error('스토리지 작업 오류:', storageError);
+            // 스토리지 오류가 발생해도 UI는 이미 업데이트되었으므로 true 반환
+            resolve(true);
+          }
+        } catch (uiError) {
+          console.error('UI 업데이트 단계 오류:', uiError);
+          
+          // 중요: 실패해도 pendingDeletion에서 삭제
+          if (pendingDeletionRef.current.has(id)) {
+            pendingDeletionRef.current.delete(id);
+          }
+          
+          toast({
+            title: "삭제 실패",
+            description: "지출 항목을 삭제하는 중 오류가 발생했습니다.",
+            variant: "destructive",
+            duration: 1500
+          });
+          
+          resolve(false);
        }
      } catch (error) {
-        console.error('트랜잭션 삭제 오류:', error);
+        console.error('트랜잭션 삭제 전체 오류:', error);
+        
+        // 중요: 모든 상황에서 pendingDeletion에서 제거
+        if (pendingDeletionRef.current.has(id)) {
+          pendingDeletionRef.current.delete(id);
+        }
+        
        toast({
          title: "삭제 실패",
          description: "지출 삭제 중 오류가 발생했습니다.",
          duration: 1500,
          variant: "destructive"
        });
+        
        resolve(false);
      }
    });
--- a/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts
+++ b/src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts
@@ -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);
--- a/src/hooks/transactions/transactionOperations/deleteTransaction.ts
+++ b/src/hooks/transactions/transactionOperations/deleteTransaction.ts
@@ -6,7 +6,7 @@ import { useDeleteTransactionCore } from './deleteOperation/deleteTransactionCor
 import { toast } from '@/hooks/useToast.wrapper';

 /**
- * 트랜잭션 삭제 기능 - 성능 및 안정성 개선
+ * 트랜잭션 삭제 기능 - 안정성 대폭 개선
 */
 export const useDeleteTransaction = (
  transactions: Transaction[],
@@ -16,9 +16,12 @@ export const useDeleteTransaction = (
  const pendingDeletionRef = useRef<Set<string>>(new Set());
  const { user } = useAuth();
  
-  // 삭제 작업 타임아웃 관리를 위한 ref
+  // 삭제 작업 타임아웃 관리를 위한 ref (ID별로 관리)
  const timeoutRef = useRef<Record<string, NodeJS.Timeout>>({});
  
+  // 삭제 완료 이벤트 추적을 위한 ref
+  const deleteCompletedRef = useRef<boolean>(false);
+
  // 핵심 삭제 로직 사용
  const deleteTransactionHandler = useDeleteTransactionCore(
    transactions, 
@@ -27,9 +30,24 @@ export const useDeleteTransaction = (
    pendingDeletionRef
  );
  
-  // 성능 및 안정성 개선 버전
+  // 모든 타임아웃 정리 유틸리티 함수
+  const clearAllTimeouts = useCallback(() => {
+    Object.values(timeoutRef.current).forEach(timeout => {
+      clearTimeout(timeout);
+    });
+    timeoutRef.current = {};
+  }, []);
+  
+  // 안전장치: 등록된 모든 pendingDeletion ID 정리
+  const clearAllPendingDeletions = useCallback(() => {
+    pendingDeletionRef.current.clear();
+    deleteCompletedRef.current = true;
+  }, []);
+  
+  // 완전히 개선된 삭제 함수 - 안정성 및 에러 처리 강화
  const deleteTransaction = useCallback(async (id: string): Promise<boolean> => {
-    console.log('트랜잭션 삭제 시작:', id);
+    console.log('트랜잭션 삭제 요청:', id, '현재 처리 중인 항목:', 
+      Array.from(pendingDeletionRef.current));
    
    try {
      // 중복 삭제 방지 확인
@@ -38,28 +56,68 @@ export const useDeleteTransaction = (
        return false;
      }
      
+      // 전역 상태 초기화 (새 삭제 작업 시작)
+      deleteCompletedRef.current = false;
+      
+      // 안전장치: 2초 이상 진행 중인 다른 삭제 작업이 있으면 모두 정리
+      if (pendingDeletionRef.current.size > 0) {
+        console.warn('오래된 삭제 작업 정리');
+        clearAllPendingDeletions();
+        clearAllTimeouts();
+      }
+      
      // pendingDeletionRef에 추가
      pendingDeletionRef.current.add(id);
      
-      // 트랜잭션 삭제 실행
-      const result = await deleteTransactionHandler(id);
+      // 삭제 작업 시간 제한 설정 (5초)
+      const deletePromise = new Promise<boolean>(async (resolve) => {
+        try {
+          // 트랜잭션 삭제 실행
+          const result = await deleteTransactionHandler(id);
          
-      // 삭제 작업이 완료되면 타임아웃 설정 (안전장치)
-      clearTimeout(timeoutRef.current[id]); // 기존 타임아웃 제거
-      timeoutRef.current[id] = setTimeout(() => {
-        if (pendingDeletionRef.current.has(id)) {
-          console.warn('삭제 작업 완료 후 정리:', id);
-          pendingDeletionRef.current.delete(id);
-          delete timeoutRef.current[id];
+          // 결과 반환 전 약간의 지연 (UI 상태 안정화)
+          setTimeout(() => {
+            resolve(result);
+          }, 100);
+        } catch (error) {
+          console.error('삭제 작업 실행 오류:', error);
+          resolve(false);
        }
-      }, 2000); // 2초 후 상태 정리
+      });
+      
+      // 타임아웃 프로미스 (5초)
+      const timeoutPromise = new Promise<boolean>((resolve) => {
+        timeoutRef.current[id] = setTimeout(() => {
+          console.warn('삭제 작업 시간 초과:', id);
+          
+          // 타임아웃 시 모든 상태 정리
+          if (pendingDeletionRef.current.has(id)) {
+            pendingDeletionRef.current.delete(id);
+          }
+          
+          delete timeoutRef.current[id];
+          resolve(false);
+        }, 5000);
+      });
+      
+      // Promise.race를 사용하여 둘 중 하나가 먼저 완료되면 처리
+      const result = await Promise.race([deletePromise, timeoutPromise]);
+      
+      // 성공적으로 완료되면 타임아웃 취소
+      clearTimeout(timeoutRef.current[id]);
+      delete timeoutRef.current[id];
+      
+      console.log('삭제 작업 완료:', id, '결과:', result);
+      
+      // 작업 완료 표시
+      deleteCompletedRef.current = true;
      
      return result;
    } catch (error) {
      console.error('트랜잭션 삭제 오류:', error);
      
-      // 오류 발생 시 상태 초기화 (중요: 반드시 해제 필요)
-      if (pendingDeletionRef.current) {
+      // 오류 발생 시 상태 정리
+      if (pendingDeletionRef.current.has(id)) {
        pendingDeletionRef.current.delete(id);
      }
      
@@ -77,20 +135,15 @@ export const useDeleteTransaction = (
      
      return false;
    }
-  }, [deleteTransactionHandler]);
+  }, [deleteTransactionHandler, clearAllPendingDeletions, clearAllTimeouts]);

-  // 컴포넌트 언마운트 시 타임아웃 정리
+  // 안전장치: 컴포넌트 언마운트 또는 의존성 변경 시 모든 타임아웃 및 진행 중인 작업 정리
  useEffect(() => {
    return () => {
-      // 모든 타임아웃 정리
-      Object.values(timeoutRef.current).forEach(timeout => {
-        clearTimeout(timeout);
-      });
-      
-      // 모든 대기 중인 삭제 작업 해제
-      pendingDeletionRef.current.clear();
+      clearAllTimeouts();
+      clearAllPendingDeletions();
    };
-  }, []);
+  }, [clearAllTimeouts, clearAllPendingDeletions]);

  return deleteTransaction;
 };
--- a/src/pages/Transactions.tsx
+++ b/src/pages/Transactions.tsx
@@ -35,10 +35,10 @@ const Transactions = () => {
    }
  }, [budgetData, isLoading]);

-  // 트랜잭션 삭제 핸들러 - 간소화 및 안정성 개선
+  // 트랜잭션 삭제 핸들러 - 완전히 개선된 버전
  const handleTransactionDelete = async (id: string): Promise<boolean> => {
-    // 이미 처리 중인 경우 작업 무시
-    if (isProcessing || deletingId === id) {
+    // 이미 처리 중인 경우 작업 무시하고 false 반환
+    if (isProcessing || deletingId) {
      console.log('이미 삭제 작업이 진행 중입니다:', deletingId);
      return false;
    }
@@ -50,32 +50,44 @@ const Transactions = () => {
      
      console.log('트랜잭션 삭제 시작 (ID):', id);
      
-      // deleteTransaction 함수 호출 (Promise<boolean> 반환 예상)
-      const success = await deleteTransaction(id);
+      // 삭제 시간 제한 설정 (5초)
+      const timeoutPromise = new Promise<boolean>((_, reject) => {
+        setTimeout(() => {
+          reject(new Error('삭제 작업 시간 초과'));
+        }, 5000);
+      });
+      
+      // deleteTransaction 함수 호출 또는 타임아웃 처리
+      const deletePromise = deleteTransaction(id);
+      
+      // Promise.race를 사용하여 둘 중 하나가 먼저 완료되면 처리
+      const success = await Promise.race([deletePromise, timeoutPromise])
+        .catch(error => {
+          console.error('삭제 작업 오류 또는 시간 초과:', error);
+          return false;
+        });
      
      console.log('삭제 작업 결과:', success);
-      
-      return success;
+      return Boolean(success);
    } catch (error) {
      console.error('트랜잭션 삭제 처리 중 오류:', error);
-      
-      // 오류 발생 시 토스트 표시
      toast({
        title: "삭제 실패",
        description: "지출 삭제 중 오류가 발생했습니다.",
        variant: "destructive"
      });
-      
      return false;
    } finally {
-      // 상태 초기화 (약간의 지연 후)
-      setTimeout(() => {
-        setIsProcessing(false);
-        setDeletingId(null);
+      // 상태 초기화 (즉시 처리)
+      setIsProcessing(false);
+      setDeletingId(null);
      
-        // 데이터 새로고침 (삭제 후 UI 업데이트)
-        refreshTransactions();
-      }, 500);
+      // 사용자 경험 개선을 위해 약간의 지연 후 데이터 새로고침
+      setTimeout(() => {
+        if (!isLoading) {
+          refreshTransactions();
+        }
+      }, 300);
    }
  };