Refactor code based on feedback

Refactor the code based on the provided feedback.

src/pages/Index.tsx

@@ -11,6 +11,9 @@ import { useWelcomeDialog } from '@/hooks/useWelcomeDialog';
 import { useDataInitialization } from '@/hooks/useDataInitialization';
 import { useIsMobile } from '@/hooks/use-mobile';
 import useNotifications from '@/hooks/useNotifications';
+import { setupPageVisibilityEvents, emitEvent, APP_EVENTS } from '@/utils/eventEmitter';
+import { useOptimizedDataSync } from '@/hooks/useOptimizedDataSync';
+import SafeAreaContainer from '@/components/SafeAreaContainer';
 
 // 메인 컴포넌트
 const Index = () => {
@@ -30,6 +33,12 @@ const Index = () => {
   const { isInitialized } = useDataInitialization(resetBudgetData);
   const isMobile = useIsMobile();
   const { addNotification } = useNotifications();
+  const { syncNow } = useOptimizedDataSync();
+
+  // 페이지 가시성 이벤트 설정 (최적화)
+  useEffect(() => {
+    setupPageVisibilityEvents();
+  }, []);
 
   // 초기화 후 환영 메시지 표시 상태 확인
   useEffect(() => {
@@ -59,98 +68,45 @@ const Index = () => {
     }
   }, [isInitialized, user, addNotification]);
 
-  // 페이지가 처음 로드될 때 데이터 로딩 확인
+  // 페이지가 처음 로드될 때 데이터 로딩 최적화
   useEffect(() => {
-    console.log('Index 페이지 마운트, 현재 데이터 상태:');
-    console.log('트랜잭션:', transactions.length);
-    console.log('예산 데이터:', budgetData);
+    console.log('Index 페이지 마운트');
     
-    // 페이지 마운트 시 데이터 동기화 이벤트 수동 발생
-    try {
-      window.dispatchEvent(new Event('transactionUpdated'));
-      window.dispatchEvent(new Event('budgetDataUpdated'));
-      window.dispatchEvent(new Event('categoryBudgetsUpdated'));
-    } catch (e) {
-      console.error('이벤트 발생 오류:', e);
-    }
+    // 페이지 로드 시 한 번에 모든 데이터 이벤트 발생 (통합 처리)
+    emitEvent(APP_EVENTS.PAGE_LOADED);
     
-    // 백업된 데이터 복구 확인 (메인 데이터가 없는 경우만)
+    // 백업된 데이터 확인 작업은 마운트 시 한 번만 수행
     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 (!localStorage.getItem('budgetData') && localStorage.getItem('budgetData_backup')) {
+        localStorage.setItem('budgetData', localStorage.getItem('budgetData_backup')!);
+        emitEvent(APP_EVENTS.BUDGET_UPDATED);
       }
       
-      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') && localStorage.getItem('categoryBudgets_backup')) {
+        localStorage.setItem('categoryBudgets', localStorage.getItem('categoryBudgets_backup')!);
+        emitEvent(APP_EVENTS.CATEGORY_UPDATED);
       }
       
-      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') && localStorage.getItem('transactions_backup')) {
+        localStorage.setItem('transactions', localStorage.getItem('transactions_backup')!);
+        emitEvent(APP_EVENTS.TRANSACTION_UPDATED);
+      }
+      
+      // 로그인 상태면 동기화 수행 (지연 시작으로 초기 로딩 성능 개선)
+      if (user) {
+        setTimeout(() => {
+          syncNow();
+        }, 1500);
       }
     } catch (error) {
       console.error('백업 복구 시도 중 오류:', error);
     }
-  }, [transactions.length, budgetData]);
-
-  // 앱이 포커스를 얻었을 때 데이터를 새로고침
-  useEffect(() => {
-    const handleFocus = () => {
-      console.log('창이 포커스를 얻음 - 데이터 새로고침');
-      // 이벤트 발생시켜 데이터 새로고침
-      try {
-        window.dispatchEvent(new Event('storage'));
-        window.dispatchEvent(new Event('transactionUpdated'));
-        window.dispatchEvent(new Event('budgetDataUpdated'));
-        window.dispatchEvent(new Event('categoryBudgetsUpdated'));
-      } catch (e) {
-        console.error('이벤트 발생 오류:', e);
-      }
-    };
-
-    // 포커스 이벤트
-    window.addEventListener('focus', handleFocus);
-    
-    // 가시성 변경 이벤트 (백그라운드에서 전경으로 돌아올 때)
-    document.addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'visible') {
-        console.log('페이지가 다시 보임 - 데이터 새로고침');
-        handleFocus();
-      }
-    });
-    
-    // 정기적인 데이터 새로고침 (10초마다)
-    const refreshInterval = setInterval(() => {
-      if (document.visibilityState === 'visible') {
-        console.log('정기 새로고침 - 데이터 업데이트');
-        handleFocus();
-      }
-    }, 10000);
-    
-    return () => {
-      window.removeEventListener('focus', handleFocus);
-      document.removeEventListener('visibilitychange', () => {});
-      clearInterval(refreshInterval);
-    };
   }, []);
 
   return (
-    <div className="min-h-screen bg-neuro-background pb-24">
-      <div className="max-w-md mx-auto px-6">
+    <SafeAreaContainer className="min-h-screen bg-neuro-background">
+      <div className="max-w-md mx-auto px-6 pb-24">
         <Header />
 
         <HomeContent 
@@ -168,7 +124,7 @@ const Index = () => {
       
       {/* 첫 사용자 안내 팝업 */}
       <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
-    </div>
+    </SafeAreaContainer>
   );
 };