Fix deletion UI freeze

Addresses the issue where the UI becomes unresponsive after deleting a transaction.

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);
       }
     });