Refactor useBudgetState hook
Refactor useBudgetState to use separate hooks for different concerns, similar to useBudgetDataState.ts.
This commit is contained in:
gpt-engineer-app[bot]
@@ -1,211 +1,74 @@
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Transaction } from '../types';
|
||||
import {
|
||||
loadTransactionsFromStorage,
|
||||
saveTransactionsToStorage,
|
||||
clearAllTransactions
|
||||
} from '../storage';
|
||||
import { toast } from '@/hooks/useToast.wrapper'; // 래퍼 사용
|
||||
import { addToDeletedTransactions } from '@/utils/sync/transaction/deletedTransactionsTracker';
|
||||
import {
|
||||
updateTitleUsage,
|
||||
analyzeTransactionTitles
|
||||
} from '@/utils/userTitlePreferences';
|
||||
import { loadTransactionsFromStorage, saveTransactionsToStorage } from '../storage/transactionStorage';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
|
||||
// 트랜잭션 상태 관리 훅
|
||||
/**
|
||||
* 트랜잭션 상태를 관리하는 훅
|
||||
* 트랜잭션 목록을 로드하고 추가, 수정, 삭제 기능을 제공합니다.
|
||||
*/
|
||||
export const useTransactionState = () => {
|
||||
// 로컬 스토리지에서 초기 트랜잭션 데이터 로드
|
||||
const [transactions, setTransactions] = useState<Transaction[]>([]);
|
||||
const [lastDeletedId, setLastDeletedId] = useState<string | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
// 초기 트랜잭션 로드 및 이벤트 리스너 설정
|
||||
// 초기 로드
|
||||
useEffect(() => {
|
||||
// 트랜잭션 로드 함수 - 비동기 처리로 변경
|
||||
const loadTransactions = async () => {
|
||||
try {
|
||||
console.log('[트랜잭션 상태] 트랜잭션 로드 시도 중...');
|
||||
|
||||
// 비동기 작업을 마이크로태스크로 지연
|
||||
await new Promise<void>(resolve => queueMicrotask(() => resolve()));
|
||||
|
||||
const storedTransactions = loadTransactionsFromStorage();
|
||||
console.log('[트랜잭션 상태] 트랜잭션 로드됨:', storedTransactions.length, '개');
|
||||
|
||||
// 상태 업데이트를 마이크로태스크로 지연
|
||||
queueMicrotask(() => {
|
||||
setTransactions(storedTransactions);
|
||||
|
||||
// 사용자 제목 선호도 분석 실행 (최근 50개 트랜잭션)
|
||||
analyzeTransactionTitles(storedTransactions, 50);
|
||||
});
|
||||
} 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);
|
||||
};
|
||||
try {
|
||||
const storedTransactions = loadTransactionsFromStorage();
|
||||
console.log('로컬 스토리지에서 트랜잭션 로드:', storedTransactions.length);
|
||||
setTransactions(storedTransactions);
|
||||
} catch (error) {
|
||||
console.error('트랜잭션 로드 중 오류 발생:', error);
|
||||
// 오류 발생 시 빈 배열로 초기화
|
||||
setTransactions([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 트랜잭션 추가 함수
|
||||
const addTransaction = useCallback((newTransaction: Transaction) => {
|
||||
console.log('[트랜잭션 상태] 새 트랜잭션 추가:', newTransaction);
|
||||
|
||||
// 현재 시간을 타임스탬프로 추가
|
||||
const transactionWithTimestamp = {
|
||||
...newTransaction,
|
||||
// 트랜잭션 변경 시 로컬 스토리지에 저장
|
||||
useEffect(() => {
|
||||
if (transactions.length > 0) {
|
||||
console.log('트랜잭션 저장 중:', transactions.length);
|
||||
saveTransactionsToStorage(transactions);
|
||||
}
|
||||
}, [transactions]);
|
||||
|
||||
// 트랜잭션 추가
|
||||
const addTransaction = (transaction: Transaction) => {
|
||||
const newTransaction = {
|
||||
...transaction,
|
||||
id: transaction.id || uuidv4(),
|
||||
localTimestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 사용자 제목 선호도 업데이트
|
||||
updateTitleUsage(transactionWithTimestamp);
|
||||
|
||||
setTransactions(prev => {
|
||||
const updated = [transactionWithTimestamp, ...prev];
|
||||
saveTransactionsToStorage(updated);
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
setTransactions(prevTransactions => [...prevTransactions, newTransaction]);
|
||||
console.log('트랜잭션 추가됨:', newTransaction);
|
||||
};
|
||||
|
||||
// 트랜잭션 업데이트 함수
|
||||
const updateTransaction = useCallback((updatedTransaction: Transaction) => {
|
||||
console.log('[트랜잭션 상태] 트랜잭션 업데이트:', updatedTransaction);
|
||||
|
||||
// 현재 시간을 타임스탬프로 업데이트
|
||||
const transactionWithTimestamp = {
|
||||
...updatedTransaction,
|
||||
localTimestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
// 사용자 제목 선호도 업데이트
|
||||
updateTitleUsage(transactionWithTimestamp);
|
||||
|
||||
setTransactions(prev => {
|
||||
const updated = prev.map(transaction =>
|
||||
transaction.id === updatedTransaction.id ? transactionWithTimestamp : transaction
|
||||
);
|
||||
saveTransactionsToStorage(updated);
|
||||
return updated;
|
||||
});
|
||||
}, []);
|
||||
// 트랜잭션 업데이트
|
||||
const updateTransaction = (updatedTransaction: Transaction) => {
|
||||
setTransactions(prevTransactions =>
|
||||
prevTransactions.map(transaction =>
|
||||
transaction.id === updatedTransaction.id
|
||||
? { ...updatedTransaction, localTimestamp: new Date().toISOString() }
|
||||
: transaction
|
||||
)
|
||||
);
|
||||
console.log('트랜잭션 업데이트됨:', updatedTransaction.id);
|
||||
};
|
||||
|
||||
// 트랜잭션 삭제 함수 - 성능 최적화 및 안정성 개선
|
||||
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 {
|
||||
console.log(`[트랜잭션 상태] 삭제 시작: ${transactionId}`);
|
||||
|
||||
setTransactions(prev => {
|
||||
// 삭제할 트랜잭션 찾기
|
||||
const transactionToDelete = prev.find(t => t.id === transactionId);
|
||||
if (!transactionToDelete) {
|
||||
console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId);
|
||||
return prev; // 변경 없음
|
||||
}
|
||||
|
||||
console.log(`[트랜잭션 상태] 삭제할 트랜잭션: "${transactionToDelete.title}", 금액: ${transactionToDelete.amount}원`);
|
||||
|
||||
// 삭제할 항목 필터링 - 성능 최적화
|
||||
const updated = prev.filter(transaction => transaction.id !== transactionId);
|
||||
|
||||
// 항목이 실제로 삭제되었는지 확인
|
||||
if (updated.length === prev.length) {
|
||||
console.log('[트랜잭션 상태] 삭제할 트랜잭션을 찾을 수 없음:', transactionId);
|
||||
return prev; // 변경 없음
|
||||
}
|
||||
|
||||
// 클라우드 동기화를 위해 삭제된 트랜잭션 ID 추적
|
||||
addToDeletedTransactions(transactionId);
|
||||
console.log(`[트랜잭션 상태] 삭제 트랜잭션 추적 목록에 추가: ${transactionId}`);
|
||||
|
||||
// 저장소 업데이트를 마이크로태스크로 진행
|
||||
queueMicrotask(() => {
|
||||
saveTransactionsToStorage(updated);
|
||||
console.log(`[트랜잭션 상태] 로컬 저장소 업데이트 완료`);
|
||||
|
||||
// 토스트 메시지 표시
|
||||
toast({
|
||||
title: "지출이 삭제되었습니다",
|
||||
description: "지출 항목이 성공적으로 삭제되었습니다.",
|
||||
});
|
||||
});
|
||||
|
||||
return updated;
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[트랜잭션 상태] 트랜잭션 삭제 중 오류 발생:', error);
|
||||
toast({
|
||||
title: "삭제 실패",
|
||||
description: "지출 항목 삭제 중 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
// 삭제 상태 초기화 (500ms 후) - 시간 단축
|
||||
setTimeout(() => {
|
||||
setIsDeleting(false);
|
||||
setLastDeletedId(null);
|
||||
console.log('[트랜잭션 상태] 삭제 상태 초기화 완료');
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
});
|
||||
}, [lastDeletedId, isDeleting]);
|
||||
|
||||
// 트랜잭션 초기화 함수
|
||||
const resetTransactions = useCallback(() => {
|
||||
console.log('[트랜잭션 상태] 모든 트랜잭션 초기화');
|
||||
clearAllTransactions();
|
||||
setTransactions([]);
|
||||
}, []);
|
||||
|
||||
// 트랜잭션 개수가 변경될 때 로그 기록
|
||||
useEffect(() => {
|
||||
console.log('[트랜잭션 상태] 현재 트랜잭션 개수:', transactions.length);
|
||||
}, [transactions.length]);
|
||||
// 트랜잭션 삭제
|
||||
const deleteTransaction = (id: string) => {
|
||||
setTransactions(prevTransactions =>
|
||||
prevTransactions.filter(transaction => transaction.id !== id)
|
||||
);
|
||||
console.log('트랜잭션 삭제됨:', id);
|
||||
};
|
||||
|
||||
return {
|
||||
transactions,
|
||||
setTransactions,
|
||||
addTransaction,
|
||||
updateTransaction,
|
||||
deleteTransaction,
|
||||
resetTransactions
|
||||
deleteTransaction
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user