From 9f9c49c588574865982190e230534bb50098ffe0 Mon Sep 17 00:00:00 2001 From: hansoo Date: Mon, 24 Mar 2025 00:11:30 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=8F=B0=20=EC=95=B1=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Index.tsx | 103 ++++++++++++++++++++++++++------------------ 1 file changed, 60 insertions(+), 43 deletions(-) diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index 3445772..106a23e 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1,4 +1,3 @@ - import React, { useEffect } from 'react'; import NavBar from '@/components/NavBar'; import AddTransactionButton from '@/components/AddTransactionButton'; @@ -66,60 +65,75 @@ const Index = () => { console.log('트랜잭션:', transactions.length); console.log('예산 데이터:', budgetData); - // 페이지 마운트 시 데이터 동기화 이벤트 수동 발생 - try { - window.dispatchEvent(new Event('transactionUpdated')); - window.dispatchEvent(new Event('budgetDataUpdated')); - window.dispatchEvent(new Event('categoryBudgetsUpdated')); - } catch (e) { - console.error('이벤트 발생 오류:', e); - } + // 페이지 첫 마운트 시에만 실행되는 로직으로 수정 + const isFirstMount = sessionStorage.getItem('initialDataLoaded') !== 'true'; - // 백업된 데이터 복구 확인 (메인 데이터가 없는 경우만) - try { - if (!localStorage.getItem('budgetData')) { - const budgetBackup = localStorage.getItem('budgetData_backup'); - if (budgetBackup) { - console.log('예산 데이터 백업에서 복구'); - localStorage.setItem('budgetData', budgetBackup); - window.dispatchEvent(new Event('budgetDataUpdated')); + if (isFirstMount) { + try { + // 백업된 데이터 복구 확인 (메인 데이터가 없는 경우만) + if (!localStorage.getItem('budgetData')) { + const budgetBackup = localStorage.getItem('budgetData_backup'); + if (budgetBackup) { + console.log('예산 데이터 백업에서 복구'); + localStorage.setItem('budgetData', budgetBackup); + } } - } - - if (!localStorage.getItem('categoryBudgets')) { - const categoryBackup = localStorage.getItem('categoryBudgets_backup'); - if (categoryBackup) { - console.log('카테고리 예산 백업에서 복구'); - localStorage.setItem('categoryBudgets', categoryBackup); - window.dispatchEvent(new Event('categoryBudgetsUpdated')); + + if (!localStorage.getItem('categoryBudgets')) { + const categoryBackup = localStorage.getItem('categoryBudgets_backup'); + if (categoryBackup) { + console.log('카테고리 예산 백업에서 복구'); + localStorage.setItem('categoryBudgets', categoryBackup); + } } - } - - if (!localStorage.getItem('transactions')) { - const transactionBackup = localStorage.getItem('transactions_backup'); - if (transactionBackup) { - console.log('트랜잭션 백업에서 복구'); - localStorage.setItem('transactions', transactionBackup); - window.dispatchEvent(new Event('transactionUpdated')); + + if (!localStorage.getItem('transactions')) { + const transactionBackup = localStorage.getItem('transactions_backup'); + if (transactionBackup) { + console.log('트랜잭션 백업에서 복구'); + localStorage.setItem('transactions', transactionBackup); + } } + + // 한 번만 이벤트 발생 + window.dispatchEvent(new Event('transactionUpdated')); + window.dispatchEvent(new Event('budgetDataUpdated')); + window.dispatchEvent(new Event('categoryBudgetsUpdated')); + + // 초기 로드 완료 표시 + sessionStorage.setItem('initialDataLoaded', 'true'); + } catch (error) { + console.error('백업 복구 시도 중 오류:', error); } - } catch (error) { - console.error('백업 복구 시도 중 오류:', error); } - }, [transactions.length, budgetData]); + }, []); // 의존성 배열 비움 - 컴포넌트 마운트 시 한 번만 실행 // 앱이 포커스를 얻었을 때 데이터를 새로고침 useEffect(() => { const handleFocus = () => { console.log('창이 포커스를 얻음 - 데이터 새로고침'); - // 이벤트 발생시켜 데이터 새로고침 + // 이미 리프레시 중인지 확인하는 플래그 + if (sessionStorage.getItem('isRefreshing') === 'true') { + console.log('이미 리프레시 진행 중, 중복 실행 방지'); + return; + } + try { + sessionStorage.setItem('isRefreshing', 'true'); + + // 이벤트 발생시켜 데이터 새로고침 window.dispatchEvent(new Event('storage')); window.dispatchEvent(new Event('transactionUpdated')); window.dispatchEvent(new Event('budgetDataUpdated')); window.dispatchEvent(new Event('categoryBudgetsUpdated')); + + // 리프레시 완료 표시 (300ms 후에 플래그 해제) + setTimeout(() => { + sessionStorage.setItem('isRefreshing', 'false'); + }, 300); } catch (e) { console.error('이벤트 발생 오류:', e); + sessionStorage.setItem('isRefreshing', 'false'); } }; @@ -127,24 +141,27 @@ const Index = () => { window.addEventListener('focus', handleFocus); // 가시성 변경 이벤트 (백그라운드에서 전경으로 돌아올 때) - document.addEventListener('visibilitychange', () => { + const handleVisibilityChange = () => { if (document.visibilityState === 'visible') { console.log('페이지가 다시 보임 - 데이터 새로고침'); handleFocus(); } - }); + }; - // 정기적인 데이터 새로고침 (10초마다) + document.addEventListener('visibilitychange', handleVisibilityChange); + + // 정기적인 데이터 새로고침 (60초마다로 변경 - 너무 빈번한 리프레시 방지) const refreshInterval = setInterval(() => { - if (document.visibilityState === 'visible') { + if (document.visibilityState === 'visible' && + sessionStorage.getItem('isRefreshing') !== 'true') { console.log('정기 새로고침 - 데이터 업데이트'); handleFocus(); } - }, 10000); + }, 60000); // 10초에서 60초로 변경 return () => { window.removeEventListener('focus', handleFocus); - document.removeEventListener('visibilitychange', () => {}); + document.removeEventListener('visibilitychange', handleVisibilityChange); clearInterval(refreshInterval); }; }, []);