113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
|
|
import { useEffect } from 'react';
|
|
|
|
/**
|
|
* 트랜잭션 이벤트 리스너 훅
|
|
* 트랜잭션 업데이트 이벤트를 리스닝합니다.
|
|
*/
|
|
export const useTransactionsEvents = (
|
|
loadTransactions: () => void,
|
|
refreshKey: number
|
|
) => {
|
|
useEffect(() => {
|
|
console.log('useTransactions - 이벤트 리스너 설정');
|
|
|
|
// 바운싱 방지 변수
|
|
let isProcessing = false;
|
|
|
|
// 트랜잭션 업데이트 이벤트
|
|
const handleTransactionUpdate = (e?: any) => {
|
|
console.log('트랜잭션 업데이트 이벤트 감지:', e);
|
|
|
|
// 처리 중 중복 호출 방지
|
|
if (isProcessing) return;
|
|
|
|
isProcessing = true;
|
|
setTimeout(() => {
|
|
loadTransactions();
|
|
isProcessing = false;
|
|
}, 150);
|
|
};
|
|
|
|
// 트랜잭션 삭제 이벤트
|
|
const handleTransactionDelete = () => {
|
|
console.log('트랜잭션 삭제 이벤트 감지됨');
|
|
|
|
// 처리 중 중복 호출 방지
|
|
if (isProcessing) return;
|
|
|
|
isProcessing = true;
|
|
setTimeout(() => {
|
|
loadTransactions();
|
|
isProcessing = false;
|
|
}, 200);
|
|
};
|
|
|
|
// 트랜잭션 변경 이벤트 (통합 이벤트)
|
|
const handleTransactionChange = (e: CustomEvent) => {
|
|
console.log('트랜잭션 변경 이벤트 감지:', e.detail?.type);
|
|
|
|
// 처리 중 중복 호출 방지
|
|
if (isProcessing) return;
|
|
|
|
isProcessing = true;
|
|
setTimeout(() => {
|
|
loadTransactions();
|
|
isProcessing = false;
|
|
}, 150);
|
|
};
|
|
|
|
// 스토리지 이벤트
|
|
const handleStorageEvent = (e: StorageEvent) => {
|
|
if (e.key === 'transactions' || e.key === null) {
|
|
console.log('스토리지 이벤트 감지:', e.key);
|
|
|
|
// 처리 중 중복 호출 방지
|
|
if (isProcessing) return;
|
|
|
|
isProcessing = true;
|
|
setTimeout(() => {
|
|
loadTransactions();
|
|
isProcessing = false;
|
|
}, 150);
|
|
}
|
|
};
|
|
|
|
// 포커스 이벤트
|
|
const handleFocus = () => {
|
|
console.log('창 포커스: 트랜잭션 새로고침');
|
|
|
|
// 처리 중 중복 호출 방지
|
|
if (isProcessing) return;
|
|
|
|
isProcessing = true;
|
|
setTimeout(() => {
|
|
loadTransactions();
|
|
isProcessing = false;
|
|
}, 200);
|
|
};
|
|
|
|
// 이벤트 리스너 등록
|
|
window.addEventListener('transactionUpdated', handleTransactionUpdate);
|
|
window.addEventListener('transactionDeleted', handleTransactionDelete);
|
|
window.addEventListener('transactionChanged', handleTransactionChange as EventListener);
|
|
window.addEventListener('storage', handleStorageEvent);
|
|
window.addEventListener('focus', handleFocus);
|
|
|
|
// 새로고침 키가 변경되면 데이터 로드
|
|
if (!isProcessing) {
|
|
loadTransactions();
|
|
}
|
|
|
|
// 클린업 함수
|
|
return () => {
|
|
console.log('useTransactions - 이벤트 리스너 제거');
|
|
window.removeEventListener('transactionUpdated', handleTransactionUpdate);
|
|
window.removeEventListener('transactionDeleted', handleTransactionDelete);
|
|
window.removeEventListener('transactionChanged', handleTransactionChange as EventListener);
|
|
window.removeEventListener('storage', handleStorageEvent);
|
|
window.removeEventListener('focus', handleFocus);
|
|
};
|
|
}, [loadTransactions, refreshKey]);
|
|
};
|