Refactor code for stability

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

@@ -6,7 +6,7 @@ import { deleteTransactionFromSupabase } from '../../supabaseUtils';
 import { toast } from '@/hooks/useToast.wrapper';
 
 /**
- * 스토리지 및 Supabase 삭제 처리 - 오류 회복 및 성능 개선 버전
+ * 스토리지 및 Supabase 삭제 처리 - 완전히 개선된 버전
  */
 export const handleDeleteStorage = (
   updatedTransactions: Transaction[],
@@ -16,48 +16,53 @@ export const handleDeleteStorage = (
 ): Promise<boolean> => {
   return new Promise((resolve) => {
     try {
-      // 즉시 로컬 스토리지 업데이트 (UI 응답성 향상)
+      // 1. 로컬 스토리지 즉시 업데이트 - 가장 중요한 부분
       try {
         saveTransactionsToStorage(updatedTransactions);
-        console.log('로컬 스토리지 저장 완료 (ID: ' + id + ')');
+        console.log('로컬 스토리지에서 트랜잭션 삭제 완료 (ID: ' + id + ')');
       } catch (storageError) {
         console.error('로컬 스토리지 저장 실패:', storageError);
-        // 로컬 저장 실패해도 계속 진행 (Supabase 시도)
       }
       
-      // Supabase가 없거나 사용자가 로그인하지 않은 경우 즉시 완료 처리
+      // 상태 정리 - 삭제 완료로 표시
+      pendingDeletionRef.current.delete(id);
+      
+      // 로그인되지 않은 경우 즉시 성공 반환
       if (!user) {
-        console.log('로그인 안 됨 - 로컬 삭제만 수행:', id);
-        pendingDeletionRef.current.delete(id);
+        console.log('로그인 상태 아님 - 로컬 삭제만 수행');
         resolve(true);
         return;
       }
       
-      // 최대 2초 타임아웃 (UI 블로킹 방지 - 짧게 설정)
-      const timeoutId = setTimeout(() => {
-        console.log('Supabase 삭제 타임아웃 - UI 정상화 처리');
-        pendingDeletionRef.current.delete(id);
-        resolve(true); // 타임아웃되어도 삭제는 성공으로 간주 (UI에는 이미 반영됨)
-      }, 2000);
+      // 2. Supabase 삭제는 백그라운드로 처리 (결과는 기다리지 않음)
+      const deleteFromSupabase = async () => {
+        try {
+          const timeoutPromise = new Promise<void>((_, reject) => {
+            setTimeout(() => reject(new Error('Supabase 삭제 타임아웃')), 3000);
+          });
+          
+          // Promise.race로 타임아웃 처리
+          await Promise.race([
+            deleteTransactionFromSupabase(user, id),
+            timeoutPromise
+          ]);
+          
+          console.log('Supabase 삭제 성공:', id);
+        } catch (error) {
+          console.error('Supabase 삭제 실패 (백그라운드 작업):', error);
+        }
+      };
       
-      // Supabase에 삭제 요청 시도
-      deleteTransactionFromSupabase(user, id)
-        .then(() => {
-          console.log('Supabase 삭제 완료:', id);
-          clearTimeout(timeoutId); // 타임아웃 제거
-          pendingDeletionRef.current.delete(id);
-          resolve(true);
-        })
-        .catch(error => {
-          console.error('Supabase 삭제 오류:', error);
-          clearTimeout(timeoutId); // 타임아웃 제거
-          pendingDeletionRef.current.delete(id);
-          resolve(true); // UI는 이미 업데이트되어 있으므로 true 반환
-        });
+      // 백그라운드로 실행 (await 안 함)
+      deleteFromSupabase();
+      
+      // 3. 즉시 성공 반환 (UI 응답성 유지)
+      resolve(true);
     } catch (error) {
-      console.error('스토리지 작업 중 일반 오류:', error);
-      pendingDeletionRef.current.delete(id); // 항상 pending 상태 제거
-      resolve(true); // 로컬 UI는 이미 업데이트되었으므로 사용자 경험을 위해 성공 반환
+      console.error('삭제 작업 중 일반 오류:', error);
+      // 오류 발생해도 UI는 이미 업데이트되었으므로 성공 반환
+      pendingDeletionRef.current.delete(id);
+      resolve(true);
     }
   });
 };