Review expense history page

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

@@ -25,6 +25,18 @@ export const useDeleteTransactionCore = (
           pendingDeletionRef.current = new Set<string>();
         }
 
+        // 이미 삭제 중인지 확인 
+        if (pendingDeletionRef.current.has(id)) {
+          console.log('이미 삭제 중인 트랜잭션:', id);
+          toast({
+            title: "처리 중",
+            description: "이전 삭제 작업이 진행 중입니다.",
+            duration: 1500
+          });
+          resolve(false);
+          return;
+        }
+
         // 트랜잭션이 존재하는지 확인
         const transactionToDelete = transactions.find(t => t.id === id);
         if (!transactionToDelete) {
@@ -42,35 +54,31 @@ export const useDeleteTransactionCore = (
         // UI 업데이트 - 동기식 처리
         setTransactions(updatedTransactions);
         
+        // 삭제 성공 토스트
+        toast({
+          title: "삭제 완료",
+          description: "지출 항목이 삭제되었습니다.",
+          duration: 2000
+        });
+        
         // UI 업데이트 완료 후 즉시 성공 반환 (사용자 경험 개선)
         resolve(true);
         
-        // 백그라운드에서 스토리지 작업 처리 (setTimeout 사용해 메인 스레드 차단 방지)
+        // 백그라운드에서 스토리지 작업 처리
         setTimeout(() => {
           try {
-            // 스토리지 처리
+            // 스토리지 처리 - 간소화된 함수 호출
             handleDeleteStorage(
-              false, // 취소 상태 없음 
               updatedTransactions, 
               id, 
               user, 
-              transactionToDelete,
               pendingDeletionRef
             );
           } catch (storageError) {
             console.error('스토리지 작업 오류:', storageError);
-          } finally {
-            // 작업 완료 후 보류 중인 삭제 목록에서 제거
             if (pendingDeletionRef.current) {
               pendingDeletionRef.current.delete(id);
             }
-            
-            // 트랜잭션 삭제 완료 이벤트 발생
-            try {
-              window.dispatchEvent(new Event('transactionDeleted'));
-            } catch (e) {
-              console.warn('이벤트 발생 오류:', e);
-            }
           }
         }, 50);
         

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

@@ -4,82 +4,55 @@ import { Transaction } from '@/components/TransactionCard';
 import { saveTransactionsToStorage } from '../../storageUtils';
 import { deleteTransactionFromSupabase } from '../../supabaseUtils';
 import { toast } from '@/hooks/useToast.wrapper';
-import { normalizeDate } from '@/utils/sync/transaction/dateUtils';
 
 /**
- * 스토리지 및 Supabase 삭제 처리
+ * 스토리지 및 Supabase 삭제 처리 - 간소화 및 안정성 개선
  */
 export const handleDeleteStorage = (
-  isCanceled: boolean,
   updatedTransactions: Transaction[],
   id: string,
   user: any,
-  transactionToDelete: Transaction,
   pendingDeletionRef: MutableRefObject<Set<string>>
 ) => {
   try {
-    if (isCanceled) {
-      console.log('백그라운드 작업이 취소되었습니다.');
-      return;
-    }
-    
     // 로컬 스토리지 업데이트
     saveTransactionsToStorage(updatedTransactions);
     console.log('로컬 스토리지 저장 완료');
     
     // Supabase 업데이트 (비동기 처리)
     if (user) {
-      // 동기적 에러를 피하기 위해 setTimeout으로 감싸기
+      // 네트워크 작업은 비동기로 진행
       setTimeout(() => {
         try {
-          // 동기화 작업 실행
           deleteTransactionFromSupabase(user, id)
             .catch(error => {
               console.error('Supabase 삭제 오류:', error);
             })
             .finally(() => {
-              // 삭제 완료 후 토스트 표시 (취소되지 않은 경우만)
-              if (!isCanceled && pendingDeletionRef.current) {
+              // 작업 완료 표시
+              if (pendingDeletionRef.current) {
                 pendingDeletionRef.current.delete(id);
-                
-                // 사용자 피드백
-                toast({
-                  title: "삭제 완료",
-                  description: "지출 항목이 삭제되었습니다.",
-                  duration: 2000
-                });
               }
             });
         } catch (e) {
-          console.error('Supabase 작업 초기화 오류:', e);
+          console.error('Supabase 작업 오류:', e);
+          // 작업 완료 표시
           if (pendingDeletionRef.current) {
             pendingDeletionRef.current.delete(id);
           }
         }
       }, 10);
     } else {
-      // 사용자가 없는 경우 토스트 표시
-      if (!isCanceled) {
-        toast({
-          title: "삭제 완료",
-          description: "지출 항목이 삭제되었습니다.",
-          duration: 2000
-        });
-      }
-      
       // 작업 완료 표시
       if (pendingDeletionRef.current) {
         pendingDeletionRef.current.delete(id);
       }
     }
 
-    // 삭제 완료 이벤트 발생 - 지연 처리로 안정성 향상
+    // 이벤트 발생 
     setTimeout(() => {
       try {
-        if (!isCanceled) {
-          console.log('트랜잭션 삭제 완료 이벤트 발생');
-          window.dispatchEvent(new Event('transactionDeleted'));
-        }
+        window.dispatchEvent(new Event('transactionDeleted'));
       } catch (e) {
         console.error('이벤트 발생 오류:', e);
       }
@@ -92,17 +65,5 @@ export const handleDeleteStorage = (
     if (pendingDeletionRef.current) {
       pendingDeletionRef.current.delete(id);
     }
-    
-    // 삭제 실패 알림
-    if (!isCanceled) {
-      toast({
-        title: "삭제 중 오류",
-        description: "지출 항목 삭제 중 문제가 발생했습니다.",
-        variant: "destructive",
-        duration: 2000
-      });
-    }
   }
 };
-
-// 중복 정의된 함수 제거 - 이미 import로 가져오고 있으므로 여기서 중복 선언할 필요가 없습니다.

src/hooks/transactions/transactionOperations/deleteTransaction.ts

@@ -1,3 +1,4 @@
+
 import { useCallback, useRef, useEffect } from 'react';
 import { Transaction } from '@/components/TransactionCard';
 import { useAuth } from '@/contexts/auth/AuthProvider';
@@ -6,7 +7,6 @@ import { toast } from '@/hooks/useToast.wrapper';
 
 /**
  * 트랜잭션 삭제 기능 - 성능 및 안정성 개선
- * 로컬 스토리지와 Supabase에서 트랜잭션을 삭제합니다.
  */
 export const useDeleteTransaction = (
   transactions: Transaction[],
@@ -20,43 +20,30 @@ export const useDeleteTransaction = (
   const timeoutRef = useRef<Record<string, NodeJS.Timeout>>({});
 
   // 핵심 삭제 로직 사용
-  const deleteTransactionHandler = useDeleteTransactionCore(transactions, setTransactions, user, pendingDeletionRef);
+  const deleteTransactionHandler = useDeleteTransactionCore(
+    transactions, 
+    setTransactions, 
+    user, 
+    pendingDeletionRef
+  );
   
   // 성능 및 안정성 개선 버전
-  const deleteTransaction = useCallback(async (id: string) => {
+  const deleteTransaction = useCallback(async (id: string): Promise<boolean> => {
     console.log('트랜잭션 삭제 시작:', id);
     
     try {
-      // 이미 삭제 중인지 확인 (중복 호출 방지)
-      if (pendingDeletionRef.current?.has(id)) {
+      // 중복 삭제 방지 확인
+      if (pendingDeletionRef.current.has(id)) {
         console.log('이미 삭제 중인 트랜잭션:', id);
-        toast({
-          title: "처리 중",
-          description: "이전 삭제 작업이 진행 중입니다.",
-          duration: 1500
-        });
         return false;
       }
       
-      // 트랜잭션이 존재하는지 확인
-      const transactionExists = transactions.some(t => t.id === id);
-      if (!transactionExists) {
-        console.error('존재하지 않는 트랜잭션 ID:', id);
-        toast({
-          title: "삭제 실패",
-          description: "해당 지출 항목을 찾을 수 없습니다.",
-          variant: "destructive",
-          duration: 1500
-        });
-        return false;
-      }
-      
-      // 삭제 실행 (비동기 처리)
+      // 트랜잭션 삭제 실행
       const result = await deleteTransactionHandler(id);
       
       // 안전장치: 삭제 작업이 10초 이상 걸리면 강제로 상태 초기화
       timeoutRef.current[id] = setTimeout(() => {
-        if (pendingDeletionRef.current?.has(id)) {
+        if (pendingDeletionRef.current.has(id)) {
           console.warn('삭제 작업 타임아웃 - 강제 초기화:', id);
           pendingDeletionRef.current.delete(id);
           delete timeoutRef.current[id];
@@ -78,9 +65,10 @@ export const useDeleteTransaction = (
         variant: "destructive",
         duration: 1500
       });
+      
       return false;
     }
-  }, [transactions, deleteTransactionHandler]);
+  }, [deleteTransactionHandler]);
 
   // 컴포넌트 언마운트 시 타임아웃 정리
   useEffect(() => {