import { useState, useEffect, useCallback } from 'react'; import { Transaction } from '../types'; import { loadTransactionsFromStorage, saveTransactionsToStorage, clearAllTransactions } from '../storage'; import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용 // 트랜잭션 상태 관리 훅 export const useTransactionState = () => { const [transactions, setTransactions] = useState([]); const [lastDeletedId, setLastDeletedId] = useState(null); const [isDeleting, setIsDeleting] = useState(false); // 초기 트랜잭션 로드 및 이벤트 리스너 설정 useEffect(() => { // 트랜잭션 로드 함수 - 비동기 처리로 변경 const loadTransactions = async () => { try { console.log('트랜잭션 로드 시도 중...'); // 비동기 작업을 마이크로태스크로 지연 await new Promise(resolve => queueMicrotask(() => resolve())); const storedTransactions = loadTransactionsFromStorage(); console.log('트랜잭션 로드됨:', storedTransactions.length, '개'); // 상태 업데이트를 마이크로태스크로 지연 queueMicrotask(() => { setTransactions(storedTransactions); }); } catch (error) { console.error('트랜잭션 로드 오류:', error); } }; // 초기 로드 - 지연 시간 추가 setTimeout(() => { loadTransactions(); }, 100); // 지연된 초기 로드 // 이벤트 리스너 추가 - 최소한으로 유지 const handleTransactionUpdate = (e?: StorageEvent) => { if (!e || e.key === 'transactions' || e.key === null) { loadTransactions(); } }; // 필수 이벤트만 등록 const transactionUpdateHandler = () => handleTransactionUpdate(); window.addEventListener('transactionUpdated', transactionUpdateHandler); window.addEventListener('storage', handleTransactionUpdate); return () => { window.removeEventListener('transactionUpdated', transactionUpdateHandler); window.removeEventListener('storage', handleTransactionUpdate); }; }, []); // 트랜잭션 추가 함수 const addTransaction = useCallback((newTransaction: Transaction) => { console.log('새 트랜잭션 추가:', newTransaction); setTransactions(prev => { const updated = [newTransaction, ...prev]; saveTransactionsToStorage(updated); return updated; }); }, []); // 트랜잭션 업데이트 함수 const updateTransaction = useCallback((updatedTransaction: Transaction) => { console.log('트랜잭션 업데이트:', updatedTransaction); setTransactions(prev => { const updated = prev.map(transaction => transaction.id === updatedTransaction.id ? updatedTransaction : transaction ); saveTransactionsToStorage(updated); return updated; }); }, []); // 트랜잭션 삭제 함수 - 성능 최적화 및 안정성 개선 const deleteTransaction = useCallback((transactionId: string) => { // 이미 삭제 중이면 중복 삭제 방지 if (isDeleting) { console.log('이미 삭제 작업이 진행 중입니다.'); return; } // 중복 삭제 방지 if (lastDeletedId === transactionId) { console.log('중복 삭제 요청 무시:', transactionId); return; } // 삭제 상태 설정 - 마이크로태스크로 지연 queueMicrotask(() => { setIsDeleting(true); setLastDeletedId(transactionId); // 삭제 작업을 마이크로태스크로 진행하여 UI 차단 방지 queueMicrotask(() => { try { setTransactions(prev => { // 삭제할 항목 필터링 - 성능 최적화 const updated = prev.filter(transaction => transaction.id !== transactionId); // 항목이 실제로 삭제되었는지 확인 if (updated.length === prev.length) { console.log('삭제할 트랜잭션을 찾을 수 없음:', transactionId); return prev; // 변경 없음 } // 저장소 업데이트를 마이크로태스크로 진행 queueMicrotask(() => { saveTransactionsToStorage(updated); // 토스트 메시지 표시 toast({ title: "지출이 삭제되었습니다", description: "지출 항목이 성공적으로 삭제되었습니다.", }); }); return updated; }); } catch (error) { console.error('트랜잭션 삭제 중 오류 발생:', error); toast({ title: "삭제 실패", description: "지출 항목 삭제 중 오류가 발생했습니다.", variant: "destructive" }); } finally { // 삭제 상태 초기화 (500ms 후) - 시간 단축 setTimeout(() => { setIsDeleting(false); setLastDeletedId(null); }, 500); } }); }); }, [lastDeletedId, isDeleting]); // 트랜잭션 초기화 함수 const resetTransactions = useCallback(() => { console.log('모든 트랜잭션 초기화'); clearAllTransactions(); setTransactions([]); }, []); // 트랜잭션 개수가 변경될 때 로그 기록 useEffect(() => { console.log('현재 트랜잭션 개수:', transactions.length); }, [transactions.length]); return { transactions, addTransaction, updateTransaction, deleteTransaction, resetTransactions }; };