zellyy-finance/src/App.tsx

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { SplashScreen } from '@capacitor/splash-screen';
import './App.css';
import Login from './pages/Login';
import Register from './pages/Register';
import NotFound from './pages/NotFound';
import NavBar from './components/NavBar';
import Index from './pages/Index';
import AuthContextWrapper from './contexts/AuthContext';
import { Toaster } from './components/ui/toaster';
import ProfileManagement from './pages/ProfileManagement';
import Transactions from './pages/Transactions';
import SecurityPrivacySettings from './pages/SecurityPrivacySettings';
import NotificationSettings from './pages/NotificationSettings';
import HelpSupport from './pages/HelpSupport';
import ForgotPassword from './pages/ForgotPassword';
import Analytics from './pages/Analytics';
import PaymentMethods from './pages/PaymentMethods';
import Settings from './pages/Settings';
import { BudgetProvider } from './contexts/BudgetContext';
import PrivateRoute from './components/auth/PrivateRoute';
import { initSyncState, startNetworkMonitoring } from './utils/syncUtils';

// 전역 오류 핸들러
const handleError = (error: Error | unknown) => {
  console.error('앱 오류 발생:', error);
};

// 오류 경계 컴포넌트
class ErrorBoundary extends React.Component<{
  children: React.ReactNode;
}, {
  hasError: boolean;
  error: Error | null;
}> {
  constructor(props: {
    children: React.ReactNode;
  }) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }
  static getDerivedStateFromError(error: Error) {
    return {
      hasError: true,
      error
    };
  }
  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
    handleError({
      error,
      errorInfo
    });
  }
  render() {
    if (this.state.hasError) {
      return <div className="min-h-screen flex items-center justify-center p-4 bg-gray-50">
          <div className="bg-white p-8 rounded-lg shadow-lg max-w-md w-full">
            <h1 className="text-2xl font-bold text-red-600 mb-4">오류가 발생했습니다</h1>
            <p className="text-gray-600 mb-4">
              앱에서 예상치 못한 오류가 발생했습니다. 페이지를 새로고침하거나 나중에 다시 시도해주세요.
            </p>
            <pre className="bg-gray-100 p-4 rounded text-xs overflow-auto max-h-40 mb-4">
              {this.state.error?.message}
            </pre>
            <button onClick={() => window.location.reload()} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full">
              페이지 새로고침
            </button>
          </div>
        </div>;
    }
    return this.props.children;
  }
}
function App() {
  // 앱 로딩이 완료되었을 때 스플래시 화면을 숨김
  useEffect(() => {
    // 웹뷰 콘텐츠가 완전히 로드되었을 때만 스플래시 화면을 숨김
    const onAppReady = async () => {
      try {
        // 네트워크 모니터링 및 동기화 상태 초기화
        await initSyncState();
        console.log('동기화 상태 초기화 완료');
        
        // 스플래시 화면을 더 빠르게 숨김 (데이터 로딩과 별도로 진행)
        setTimeout(async () => {
          try {
            await SplashScreen.hide();
            console.log('스플래시 화면 숨김 성공');
          } catch (err) {
            console.error('스플래시 화면 숨김 오류:', err);
          }
        }, 300); // 300ms로 줄임
      } catch (err) {
        console.error('앱 준비 오류:', err);
      }
    };

    // 앱 준비 함수 실행
    onAppReady();

    // 추가 보호장치: 페이지 로드 시 다시 실행
    const handleLoad = () => {
      // 즉시 스플래시 화면을 숨김 시도
      SplashScreen.hide().catch(() => {});

      // 백업 시도
      setTimeout(() => {
        SplashScreen.hide().catch(() => {});
      }, 300);
    };
    window.addEventListener('load', handleLoad);
    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, []);
  return <ErrorBoundary>
      <AuthContextWrapper>
        <BudgetProvider>
          <Router>
            <div className="flex flex-col min-h-screen">
              <div className="pt-[10px] py-[15px]"></div> {/* 상단 여백 5px에서 10px로 증가 */}
              <NavBar />
              <div className="flex-grow">
                <Routes>
                  <Route path="/" element={<Index />} />
                  <Route path="/login" element={<Login />} />
                  <Route path="/register" element={<Register />} />
                  <Route path="/profile" element={<PrivateRoute>
                      <ProfileManagement />
                    </PrivateRoute>} />
                  <Route path="/settings" element={<Settings />} />
                  {/* 지출 페이지는 더 이상 인증이 필요하지 않음 */}
                  <Route path="/transactions" element={<Transactions />} />
                  {/* 분석 페이지는 더 이상 인증이 필요하지 않음 */}
                  <Route path="/analytics" element={<Analytics />} />
                  {/* 보안 및 개인정보 페이지도 로그인 없이 접근 가능하도록 수정 */}
                  <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
                  <Route path="/notifications" element={<PrivateRoute>
                      <NotificationSettings />
                    </PrivateRoute>} />
                  <Route path="/help-support" element={<HelpSupport />} />
                  <Route path="/forgot-password" element={<ForgotPassword />} />
                  <Route path="/payment-methods" element={<PrivateRoute>
                      <PaymentMethods />
                    </PrivateRoute>} />
                  <Route path="*" element={<NotFound />} />
                </Routes>
              </div>
              <Toaster />
            </div>
          </Router>
        </BudgetProvider>
      </AuthContextWrapper>
    </ErrorBoundary>;
}
export default App;