Refactor: Adapt to design changes

The design has been significantly updated, requiring code adjustments.

src/App.tsx

@@ -1,160 +1,53 @@
-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 React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Index from './pages/Index';
+import Settings from './pages/Settings';
 import Login from './pages/Login';
 import Register from './pages/Register';
+import ForgotPassword from './pages/ForgotPassword';
 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 ProfileManagement from './pages/ProfileManagement';
+import PaymentMethods from './pages/PaymentMethods';
 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 } from './utils/syncUtils';
+import Transactions from './pages/Transactions';
+import { AuthProvider } from './contexts/auth';
+import { BudgetProvider } from './contexts/budget';
+import { Toaster } from '@/components/ui/toaster';
+import { Toaster as SonnerToaster} from '@/components/ui/sonner';
+import SafeAreaContainer from './components/SafeAreaContainer';
 
-// 전역 오류 핸들러
-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>;
+  return (
+    <AuthProvider>
+      <BudgetProvider>
+        <Router>
+          <SafeAreaContainer className="min-h-screen bg-neuro-background">
+            <Routes>
+              <Route path="/" element={<Index />} />
+              <Route path="/login" element={<Login />} />
+              <Route path="/register" element={<Register />} />
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="/settings" element={<Settings />} />
+              <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
+              <Route path="/profile" element={<ProfileManagement />} />
+              <Route path="/payment-methods" element={<PaymentMethods />} />
+              <Route path="/notifications" element={<NotificationSettings />} />
+              <Route path="/help-support" element={<HelpSupport />} />
+              <Route path="/analytics" element={<Analytics />} />
+              <Route path="/transactions" element={<Transactions />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </SafeAreaContainer>
+          <Toaster />
+          <SonnerToaster />
+        </Router>
+      </BudgetProvider>
+    </AuthProvider>
+  );
 }
+
 export default App;