Investigate transaction deletion issue

Further investigate the issue where deleting transactions causes the application to freeze.

src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionCore.ts

@@ -20,83 +20,62 @@ export const useDeleteTransactionCore = (
       try {
         console.log('트랜잭션 삭제 작업 시작 - ID:', id);
         
-        // pendingDeletionRef 초기화 확인
+        // 전달된 ID로 트랜잭션 찾기
-        if (!pendingDeletionRef.current) {
+        const transactionToDelete = transactions.find(t => t.id === id);
-          pendingDeletionRef.current = new Set<string>();
+        
-        }
+        // 트랜잭션이 존재하는지 확인
-
+        if (!transactionToDelete) {
-        // 이미 삭제 중인지 확인 
+          console.warn('삭제할 트랜잭션이 없음:', id);
-        if (pendingDeletionRef.current.has(id)) {
-          console.log('이미 삭제 중인 트랜잭션:', id);
           toast({
-            title: "처리 중",
+            title: "삭제 실패",
-            description: "이전 삭제 작업이 진행 중입니다.",
+            description: "해당 항목을 찾을 수 없습니다.",
-            duration: 1500
+            variant: "destructive"
           });
           resolve(false);
           return;
         }
 
-        // 트랜잭션이 존재하는지 확인
+        // 즉시 상태 업데이트 (현재 상태에서 삭제할 항목 필터링)
-        const transactionToDelete = transactions.find(t => t.id === id);
+        const updatedTransactions = transactions.filter(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 업데이트 - 동기식 처리
         setTransactions(updatedTransactions);
         
         // 삭제 성공 토스트
         toast({
           title: "삭제 완료",
           description: "지출 항목이 삭제되었습니다.",
-          duration: 2000
+          duration: 1500
         });
         
-        // UI 업데이트 완료 후 즉시 성공 반환 (사용자 경험 개선)
+        // 스토리지 업데이트 작업 시작 (백그라운드)
-        resolve(true);
+        try {
-        
+          // 스토리지 처리 (스토리지 및 Supabase 업데이트)
-        // 백그라운드에서 스토리지 작업 처리
+          handleDeleteStorage(
-        setTimeout(() => {
+            updatedTransactions, 
-          try {
+            id, 
-            // 스토리지 처리 - 간소화된 함수 호출
+            user, 
-            handleDeleteStorage(
+            pendingDeletionRef
-              updatedTransactions, 
+          );
-              id, 
+          
-              user, 
+          // 이벤트 발생
-              pendingDeletionRef
+          setTimeout(() => {
-            );
+            window.dispatchEvent(new Event('transactionDeleted'));
-          } catch (storageError) {
+          }, 100);
-            console.error('스토리지 작업 오류:', storageError);
+          
-            if (pendingDeletionRef.current) {
+          console.log('삭제 작업 완료:', id);
-              pendingDeletionRef.current.delete(id);
+          resolve(true);
-            }
+        } catch (storageError) {
-          }
+          console.error('스토리지 작업 오류:', storageError);
-        }, 50);
+          // 스토리지 오류가 발생해도 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);
       }
     });

src/hooks/transactions/transactionOperations/deleteOperation/deleteTransactionStorage.ts

@@ -21,49 +21,46 @@ export const handleDeleteStorage = (
     
     // Supabase 업데이트 (비동기 처리)
     if (user) {
-      // 네트워크 작업은 비동기로 진행
+      // 네트워크 작업은 비동기로 진행 - 실패해도 UI에 영향 없음
-      setTimeout(() => {
+      try {
-        try {
+        deleteTransactionFromSupabase(user, id)
-          deleteTransactionFromSupabase(user, id)
+          .then(() => {
-            .catch(error => {
+            console.log('Supabase 삭제 완료:', id);
-              console.error('Supabase 삭제 오류:', error);
+          })
-            })
+          .catch(error => {
-            .finally(() => {
+            console.error('Supabase 삭제 오류:', error);
-              // 작업 완료 표시
+          })
-              if (pendingDeletionRef.current) {
+          .finally(() => {
-                pendingDeletionRef.current.delete(id);
+            // 작업 완료 후 반드시 pendingDeletion에서 제거
-              }
+            if (pendingDeletionRef.current) {
-            });
+              pendingDeletionRef.current.delete(id);
-        } catch (e) {
+            }
-          console.error('Supabase 작업 오류:', e);
+          });
-          // 작업 완료 표시
+      } catch (e) {
-          if (pendingDeletionRef.current) {
+        console.error('Supabase 작업 오류:', e);
-            pendingDeletionRef.current.delete(id);
+        // 작업 완료 표시
-          }
+        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;
   }
 };

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();
     };
   }, []);
 

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<boolean> 반환 예상)
       const success = await deleteTransaction(id);
       
-      // 상태 초기화
+      console.log('삭제 작업 결과:', success);
-      setTimeout(() => {
-        setIsProcessing(false);
-        setDeletingId(null);
-      }, 300);
-      
-      // 성공 여부와 관계없이 데이터 새로고침
-      setTimeout(() => {
-        refreshTransactions();
-      }, 500);
       
       return success;
     } catch (error) {
       console.error('트랜잭션 삭제 처리 중 오류:', error);
       
-      // 오류 발생 시 상태 초기화
+      // 오류 발생 시 토스트 표시
-      setIsProcessing(false);
+      toast({
-      setDeletingId(null);
+        title: "삭제 실패",
-      
+        description: "지출 삭제 중 오류가 발생했습니다.",
-      // 오류 후에도 데이터 새로고침 (일관성 유지)
+        variant: "destructive"
-      setTimeout(() => {
+      });
-        refreshTransactions();
-      }, 500);
       
       return false;
+    } finally {
+      // 상태 초기화 (약간의 지연 후)
+      setTimeout(() => {
+        setIsProcessing(false);
+        setDeletingId(null);
+        
+        // 데이터 새로고침 (삭제 후 UI 업데이트)
+        refreshTransactions();
+      }, 500);
     }
   };