Refactor deleteTransaction hook

Refactors the `deleteTransaction` hook into smaller, more manageable units to improve code maintainability.

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

@@ -0,0 +1,126 @@
+
+import { useCallback, MutableRefObject } from 'react';
+import { Transaction } from '@/components/TransactionCard';
+import { toast } from '@/hooks/useToast.wrapper';
+import { handleDeleteStorage } from './deleteTransactionStorage';
+import { sortTransactionsByDate } from './deleteTransactionUtils';
+
+/**
+ * 트랜잭션 삭제 핵심 기능
+ */
+export const useDeleteTransactionCore = (
+  transactions: Transaction[],
+  setTransactions: React.Dispatch<React.SetStateAction<Transaction[]>>,
+  user: any,
+  pendingDeletionRef: MutableRefObject<Set<string>>
+) => {
+  // 트랜잭션 삭제 - 안정성과 성능 개선 버전
+  return useCallback((id: string): Promise<boolean> => {
+    // pendingDeletionRef 초기화 확인
+    if (!pendingDeletionRef.current) {
+      pendingDeletionRef.current = new Set<string>();
+    }
+
+    // 기존 promise를 변수로 저장해서 참조 가능하게 함
+    const promiseObj = new Promise<boolean>((resolve, reject) => {
+      // 삭제 작업 취소 플래그 초기화
+      let isCanceled = false;
+      let timeoutId: ReturnType<typeof setTimeout> | null = null;
+      
+      try {
+        console.log('트랜잭션 삭제 작업 시작 - ID:', id);
+        
+        // 이미 삭제 중인 트랜잭션인지 확인
+        if (pendingDeletionRef.current.has(id)) {
+          console.warn('이미 삭제 중인 트랜잭션입니다:', id);
+          reject(new Error('이미 삭제 중인 트랜잭션입니다'));
+          return;
+        }
+        
+        // 삭제할 트랜잭션이 존재하는지 확인 및 데이터 복사 보관
+        const transactionToDelete = transactions.find(t => t.id === id);
+        if (!transactionToDelete) {
+          console.warn('삭제할 트랜잭션이 존재하지 않음:', id);
+          reject(new Error('트랜잭션이 존재하지 않습니다'));
+          return;
+        }
+        
+        // 삭제 중인 상태로 표시
+        pendingDeletionRef.current.add(id);
+        
+        // 즉시 상태 업데이트 (현재 상태 복사를 통한 안전한 처리)
+        const updatedTransactions = transactions.filter(transaction => transaction.id !== id);
+        
+        // UI 업데이트 - 동기식 처리
+        setTransactions(updatedTransactions);
+        
+        // 사용자 인터페이스 응답성 감소 전에 이벤트 발생 처리
+        try {
+          // 상태 업데이트 바로 후 크로스 스레드 통신 방지
+          setTimeout(() => {
+            try {
+              window.dispatchEvent(new Event('transactionUpdated'));
+            } catch (innerError) {
+              console.warn('이벤트 발생 중 비치명적 오류:', innerError);
+            }
+          }, 0);
+        } catch (eventError) {
+          console.warn('이벤트 디스패치 설정 오류:', eventError);
+        }
+        
+        // UI 스레드 블록하지 않는 너비로 requestAnimationFrame 사용
+        requestAnimationFrame(() => {
+          if (isCanceled) {
+            console.log('작업이 취소되었습니다.');
+            return;
+          }
+          
+          // 백그라운드 작업은 너비로 처리
+          timeoutId = setTimeout(() => {
+            handleDeleteStorage(
+              isCanceled, 
+              updatedTransactions, 
+              id, 
+              user, 
+              transactionToDelete,
+              pendingDeletionRef
+            );
+          }, 0);
+        });
+        
+        // 상태 업데이트가 이미 수행되었으므로 즉시 성공 반환
+        console.log('트랜잭션 삭제 UI 업데이트 완료');
+        resolve(true);
+        
+        // 취소 기능을 가진 Promise 객체 생성
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (promiseObj as any).cancel = () => {
+          isCanceled = true;
+          
+          if (timeoutId !== null) {
+            clearTimeout(timeoutId);
+          }
+          
+          pendingDeletionRef.current?.delete(id);
+          console.log('트랜잭션 삭제 작업 취소 완료');
+        };
+      } catch (error) {
+        console.error('트랜잭션 삭제 초기화 중 오류:', error);
+        
+        // 오류 발생 시 토스트 표시
+        toast({
+          title: "시스템 오류",
+          description: "지출 삭제 중 오류가 발생했습니다.",
+          duration: 2000,
+          variant: "destructive"
+        });
+        
+        // 캣치된 모든 오류에서 보류 삭제 표시 제거
+        pendingDeletionRef.current?.delete(id);
+        reject(error);
+      }
+    });
+    
+    return promiseObj;
+  }, [transactions, setTransactions, user]);
+};

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

@@ -0,0 +1,71 @@
+
+import { MutableRefObject } from 'react';
+import { Transaction } from '@/components/TransactionCard';
+import { saveTransactionsToStorage } from '../../storageUtils';
+import { deleteTransactionFromSupabase } from '../../supabaseUtils';
+
+/**
+ * 스토리지 및 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);
+    
+    // Supabase 업데이트
+    if (user) {
+      deleteTransactionFromSupabase(user, id)
+        .then(() => {
+          if (!isCanceled) {
+            console.log('Supabase 트랜잭션 삭제 성공');
+            // 성공 로그만 추가, UI 업데이트는 이미 수행됨
+          }
+        })
+        .catch(error => {
+          console.error('Supabase 삭제 오류:', error);
+          handleDeleteError(error, isCanceled, id, transactionToDelete, pendingDeletionRef);
+        })
+        .finally(() => {
+          if (!isCanceled) {
+            // 작업 완료 후 보류 중인 삭제 목록에서 제거
+            pendingDeletionRef.current?.delete(id);
+          }
+        });
+    } else {
+      // 사용자 정보 없을 경우 목록에서 제거
+      pendingDeletionRef.current?.delete(id);
+    }
+  } catch (storageError) {
+    console.error('스토리지 작업 중 오류:', storageError);
+    pendingDeletionRef.current?.delete(id);
+  }
+};
+
+/**
+ * 삭제 오류 처리
+ */
+export const handleDeleteError = (
+  error: any, 
+  isCanceled: boolean, 
+  id: string, 
+  transactionToDelete: Transaction,
+  pendingDeletionRef: MutableRefObject<Set<string>>
+) => {
+  if (!isCanceled) {
+    console.error('삭제 작업 중 오류 발생:', error);
+    // 작업 완료 표시
+    pendingDeletionRef.current?.delete(id);
+  }
+};

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

@@ -0,0 +1,62 @@
+
+import { Transaction } from '@/components/TransactionCard';
+
+/**
+ * 날짜 기준 트랜잭션 정렬 함수
+ */
+export const sortTransactionsByDate = (transactions: Transaction[]): Transaction[] => {
+  return transactions.sort((a, b) => {
+    try {
+      // 날짜 형식이 다양할 수 있으므로 안전하게 처리
+      let dateA = new Date();
+      let dateB = new Date();
+      
+      // 타입 안전성 확보
+      if (a.date && typeof a.date === 'string') {
+        // 이미 포맷팅된 날짜 문자열 감지
+        if (!a.date.includes('오늘,') && !a.date.includes('년')) {
+          const testDate = new Date(a.date);
+          if (!isNaN(testDate.getTime())) {
+            dateA = testDate;
+          }
+        }
+      }
+      
+      if (b.date && typeof b.date === 'string') {
+        // 이미 포맷팅된 날짜 문자열 감지
+        if (!b.date.includes('오늘,') && !b.date.includes('년')) {
+          const testDate = new Date(b.date);
+          if (!isNaN(testDate.getTime())) {
+            dateB = testDate;
+          }
+        }
+      }
+      
+      return dateB.getTime() - dateA.getTime();
+    } catch (error) {
+      console.error('날짜 정렬 오류:', error);
+      return 0; // 오류 발생 시 순서 유지
+    }
+  });
+};
+
+/**
+ * 트랜잭션 목록에서 삭제 대상 트랜잭션 찾기
+ */
+export const findTransactionById = (transactions: Transaction[], id: string): Transaction | undefined => {
+  return transactions.find(transaction => transaction.id === id);
+};
+
+/**
+ * 중복 트랜잭션 검사
+ */
+export const hasDuplicateTransaction = (transactions: Transaction[], id: string): boolean => {
+  return transactions.some(transaction => transaction.id === id);
+};
+
+/**
+ * 트랜잭션 목록에서 특정 ID 제외하기
+ */
+export const removeTransactionById = (transactions: Transaction[], id: string): Transaction[] => {
+  return transactions.filter(transaction => transaction.id !== id);
+};

src/hooks/transactions/transactionOperations/deleteTransaction.ts

@@ -2,9 +2,7 @@
 import { useCallback, useRef } from 'react';
 import { Transaction } from '@/components/TransactionCard';
 import { useAuth } from '@/contexts/auth/AuthProvider';
-import { toast } from '@/hooks/useToast.wrapper';
+import { useDeleteTransactionCore } from './deleteOperation/deleteTransactionCore';
-import { saveTransactionsToStorage } from '../storageUtils';
-import { deleteTransactionFromSupabase } from '../supabaseUtils';
 
 /**
  * 트랜잭션 삭제 기능
@@ -18,202 +16,6 @@ export const useDeleteTransaction = (
   const pendingDeletionRef = useRef<Set<string>>(new Set());
   const { user } = useAuth();
 
-  // 트랜잭션 삭제 - 안정성과 성능 개선 버전
+  // 핵심 삭제 로직 사용
-  return useCallback((id: string): Promise<boolean> => {
+  return useDeleteTransactionCore(transactions, setTransactions, user, pendingDeletionRef);
-    // pendingDeletionRef 초기화 확인
-    if (!pendingDeletionRef.current) {
-      pendingDeletionRef.current = new Set<string>();
-    }
-
-    // 기존 promise를 변수로 저장해서 참조 가능하게 함
-    const promiseObj = new Promise<boolean>((resolve, reject) => {
-      // 삭제 작업 취소 플래그 초기화
-      let isCanceled = false;
-      let timeoutId: ReturnType<typeof setTimeout> | null = null;
-      
-      try {
-        console.log('트랜잭션 삭제 작업 시작 - ID:', id);
-        
-        // 이미 삭제 중인 트랜잭션인지 확인
-        if (pendingDeletionRef.current.has(id)) {
-          console.warn('이미 삭제 중인 트랜잭션입니다:', id);
-          reject(new Error('이미 삭제 중인 트랜잭션입니다'));
-          return;
-        }
-        
-        // 삭제할 트랜잭션이 존재하는지 확인 및 데이터 복사 보관
-        const transactionToDelete = transactions.find(t => t.id === id);
-        if (!transactionToDelete) {
-          console.warn('삭제할 트랜잭션이 존재하지 않음:', id);
-          reject(new Error('트랜잭션이 존재하지 않습니다'));
-          return;
-        }
-        
-        // 삭제 중인 상태로 표시
-        pendingDeletionRef.current.add(id);
-        
-        // 즉시 상태 업데이트 (현재 상태 복사를 통한 안전한 처리)
-        const originalTransactions = [...transactions]; // 복구를 위한 상태 복사
-        const updatedTransactions = transactions.filter(transaction => transaction.id !== id);
-        
-        // UI 업데이트 - 동기식 처리
-        setTransactions(updatedTransactions);
-        
-        // 사용자 인터페이스 응답성 감소 전에 이벤트 발생 처리
-        try {
-          // 상태 업데이트 바로 후 크로스 스레드 통신 방지
-          setTimeout(() => {
-            try {
-              window.dispatchEvent(new Event('transactionUpdated'));
-            } catch (innerError) {
-              console.warn('이벤트 발생 중 비치명적 오류:', innerError);
-            }
-          }, 0);
-        } catch (eventError) {
-          console.warn('이벤트 디스패치 설정 오류:', eventError);
-        }
-        
-        // UI 스레드 블록하지 않는 너비로 requestAnimationFrame 사용
-        requestAnimationFrame(() => {
-          if (isCanceled) {
-            console.log('작업이 취소되었습니다.');
-            return;
-          }
-          
-          // 백그라운드 작업은 너비로 처리
-          timeoutId = setTimeout(() => {
-            try {
-              if (isCanceled) {
-                console.log('백그라운드 작업이 취소되었습니다.');
-                return;
-              }
-              
-              // 로컬 스토리지 업데이트
-              saveTransactionsToStorage(updatedTransactions);
-              
-              // Supabase 업데이트
-              if (user) {
-                deleteTransactionFromSupabase(user, id)
-                  .then(() => {
-                    if (!isCanceled) {
-                      console.log('Supabase 트랜잭션 삭제 성공');
-                      // 성공 로그만 추가, UI 업데이트는 이미 수행됨
-                    }
-                  })
-                  .catch(error => {
-                    console.error('Supabase 삭제 오류:', error);
-                    handleDeleteError(error, isCanceled, id, transactionToDelete);
-                  })
-                  .finally(() => {
-                    if (!isCanceled) {
-                      // 작업 완료 후 보류 중인 삭제 목록에서 제거
-                      pendingDeletionRef.current?.delete(id);
-                    }
-                  });
-              } else {
-                // 사용자 정보 없을 경우 목록에서 제거
-                pendingDeletionRef.current?.delete(id);
-              }
-            } catch (storageError) {
-              console.error('스토리지 작업 중 오류:', storageError);
-              pendingDeletionRef.current?.delete(id);
-            }
-          }, 0);
-        });
-        
-        // 상태 업데이트가 이미 수행되었으므로 즉시 성공 반환
-        console.log('트랜잭션 삭제 UI 업데이트 완료');
-        resolve(true);
-        
-        // 취소 기능을 가진 Promise 객체 생성
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (promiseObj as any).cancel = () => {
-          isCanceled = true;
-          
-          if (timeoutId !== null) {
-            clearTimeout(timeoutId);
-          }
-          
-          pendingDeletionRef.current?.delete(id);
-          console.log('트랜잭션 삭제 작업 취소 완료');
-        };
-      } catch (error) {
-        console.error('트랜잭션 삭제 초기화 중 오류:', error);
-        
-        // 오류 발생 시 토스트 표시
-        toast({
-          title: "시스템 오류",
-          description: "지출 삭제 중 오류가 발생했습니다.",
-          duration: 2000,
-          variant: "destructive"
-        });
-        
-        // 캣치된 모든 오류에서 보류 삭제 표시 제거
-        pendingDeletionRef.current?.delete(id);
-        reject(error);
-      }
-    });
-    
-    return promiseObj;
-  }, [transactions, setTransactions, user]);
-
-  // 오류 처리 헬퍼 함수
-  function handleDeleteError(
-    error: any, 
-    isCanceled: boolean, 
-    id: string, 
-    transactionToDelete: Transaction
-  ) {
-    if (!isCanceled) {
-      // 현재 상태에 해당 트랜잭션이 이미 있는지 확인
-      setTransactions(prevState => {
-        // 동일 트랜잭션이 없을 경우에만 추가
-        const hasDuplicate = prevState.some(t => t.id === id);
-        if (hasDuplicate) return prevState;
-        
-        // 삭제되었던 트랜잭션 다시 추가
-        const newState = [...prevState, transactionToDelete];
-        
-        // 날짜 기준 정렬 - 안전한 경로
-        return sortTransactionsByDate(newState);
-      });
-    }
-  }
-
-  // 날짜 기준 트랜잭션 정렬 함수
-  function sortTransactionsByDate(transactions: Transaction[]): Transaction[] {
-    return transactions.sort((a, b) => {
-      try {
-        // 날짜 형식이 다양할 수 있으므로 안전하게 처리
-        let dateA = new Date();
-        let dateB = new Date();
-        
-        // 타입 안전성 확보
-        if (a.date && typeof a.date === 'string') {
-          // 이미 포맷팅된 날짜 문자열 감지
-          if (!a.date.includes('오늘,') && !a.date.includes('년')) {
-            const testDate = new Date(a.date);
-            if (!isNaN(testDate.getTime())) {
-              dateA = testDate;
-            }
-          }
-        }
-        
-        if (b.date && typeof b.date === 'string') {
-          // 이미 포맷팅된 날짜 문자열 감지
-          if (!b.date.includes('오늘,') && !b.date.includes('년')) {
-            const testDate = new Date(b.date);
-            if (!isNaN(testDate.getTime())) {
-              dateB = testDate;
-            }
-          }
-        }
-        
-        return dateB.getTime() - dateA.getTime();
-      } catch (error) {
-        console.error('날짜 정렬 오류:', error);
-        return 0; // 오류 발생 시 순서 유지
-      }
-    });
-  }
 };