Review expense history page

src/components/TransactionEditDialog.tsx

@@ -29,7 +29,7 @@ interface TransactionEditDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onSave?: (updatedTransaction: Transaction) => void;
-  onDelete?: (id: string) => void;
+  onDelete?: (id: string) => Promise<boolean> | boolean;
 }
 
 const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
@@ -40,6 +40,7 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
   onDelete
 }) => {
   const { updateTransaction, deleteTransaction } = useBudget();
+
   const isMobile = useIsMobile();
 
   const form = useForm<TransactionFormValues>({
@@ -78,48 +79,28 @@ const TransactionEditDialog: React.FC<TransactionEditDialogProps> = ({
     });
   };
 
-  const handleDelete = (): Promise<boolean> => {
+  const handleDelete = async (): Promise<boolean> => {
-    return new Promise<boolean>((resolve) => {
     try {
       // 다이얼로그 닫기를 먼저 수행 (UI 블로킹 방지)
       onOpenChange(false);
       
-        // 잠시 지연 후 삭제 작업 수행 (안정성 향상)
+      // 삭제 처리 - 부모 컴포넌트의 onDelete 콜백이 있다면 호출
-        setTimeout(() => {
-          try {
-            // 트랜잭션 ID 임시 저장 (안전성 확보)
-            const transactionId = transaction.id;
-            
-            // 부모 컴포넌트의 onDelete 콜백이 있다면 호출
       if (onDelete) {
-              onDelete(transactionId);
+        return await onDelete(transaction.id);
       }
       
-            // 컨텍스트를 통해 트랜잭션 삭제
+      // 부모 컴포넌트에서 처리하지 않은 경우 기본 처리
-            deleteTransaction(transactionId);
+      deleteTransaction(transaction.id);
-            
+      return true;
-            console.log('트랜잭션 삭제 완료:', transactionId);
+    } catch (error) {
-            resolve(true);
+      console.error('트랜잭션 삭제 중 오류:', error);
-          } catch (innerError) {
-            console.error('트랜잭션 삭제 중 내부 오류:', innerError);
       toast({
         title: "삭제 실패",
         description: "지출 항목을 삭제하는데 문제가 발생했습니다.",
         variant: "destructive"
       });
-            resolve(false);
+      return false;
     }
-        }, 100);
-      } catch (outerError) {
-        console.error('트랜잭션 삭제 처리 중 오류:', outerError);
-        toast({
-          title: "시스템 오류",
-          description: "처리 중 문제가 발생했습니다. 다시 시도해주세요.",
-          variant: "destructive"
-        });
-        resolve(false);
-      }
-    });
   };
   
   return (

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'));
-        }
       } 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(() => {

src/pages/Transactions.tsx

@@ -34,12 +34,12 @@ const Transactions = () => {
     }
   }, [budgetData, isLoading]);
 
-  // 트랜잭션 삭제 핸들러 (성능 및 안정성 개선)
+  // 트랜잭션 삭제 핸들러 - 간소화 및 안정성 개선
   const handleTransactionDelete = async (id: string) => {
     // 이미 처리 중인 경우 작업 무시
     if (isProcessing || deletingId === id) {
       console.log('이미 삭제 작업이 진행 중입니다:', deletingId);
-      return;
+      return false;
     }
     
     try {
@@ -49,18 +49,20 @@ const Transactions = () => {
       setIsProcessing(true);
       setDeletingId(id);
       
-      // 비동기 삭제 작업 실행
+      // 간소화된 삭제 작업 실행
       const success = await deleteTransaction(id);
       
-      // 데이터 새로고침 (UI 응답성 향상을 위해 약간 지연)
-      setTimeout(() => {
-        refreshTransactions();
-        
       // 상태 초기화
+      setTimeout(() => {
         setIsProcessing(false);
         setDeletingId(null);
       }, 300);
       
+      // 성공 여부와 관계없이 데이터 새로고침
+      setTimeout(() => {
+        refreshTransactions();
+      }, 500);
+      
       return success;
     } catch (error) {
       console.error('트랜잭션 삭제 처리 중 오류:', error);