Improve login error message

Update the login error message to be more specific when authentication fails due to incorrect email or password.

src/App.tsx

@@ -1,175 +1,106 @@
 
-import { Toaster } from "@/components/ui/toaster";
+import React from 'react';
-import { Toaster as Sonner } from "@/components/ui/sonner";
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
-import { TooltipProvider } from "@/components/ui/tooltip";
+import './App.css';
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Login from './pages/Login';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Register from './pages/Register';
-import { useState, useEffect } from "react";
+import NotFound from './pages/NotFound';
-import Index from "./pages/Index";
+import NavBar from './components/NavBar';
-import Transactions from "./pages/Transactions";
+import Index from './pages/Index';
-import Analytics from "./pages/Analytics";
+import AuthContextWrapper from './contexts/AuthContext';
-import Settings from "./pages/Settings";
+import { Toaster } from './components/ui/toaster';
-import ProfileManagement from "./pages/ProfileManagement";
+import ProfileManagement from './pages/ProfileManagement';
-import NotificationSettings from "./pages/NotificationSettings";
+import SupabaseSettings from './pages/SupabaseSettings';
-import SecurityPrivacySettings from "./pages/SecurityPrivacySettings";
+import Transactions from './pages/Transactions';
-import HelpSupport from "./pages/HelpSupport";
+import SecurityPrivacySettings from './pages/SecurityPrivacySettings';
-import PaymentMethods from "./pages/PaymentMethods";
+import NotificationSettings from './pages/NotificationSettings';
-import NotFound from "./pages/NotFound";
+import HelpSupport from './pages/HelpSupport';
-import Login from "./pages/Login";
+import ForgotPassword from './pages/ForgotPassword';
-import Register from "./pages/Register";
+import Analytics from './pages/Analytics';
-import ForgotPassword from "./pages/ForgotPassword";
+import PaymentMethods from './pages/PaymentMethods';
-import SupabaseSettings from "./pages/SupabaseSettings";
+import Settings from './pages/Settings';
-import { initSyncSettings } from "./utils/syncUtils";
-import { AuthProvider } from "./contexts/auth";
-import { BudgetProvider } from "./contexts/BudgetContext";
 
-// 전역 오류 처리
+// 전역 오류 핸들러
 const handleError = (error: any) => {
-  console.error("앱 오류 발생:", error);
+  console.error('앱 오류 발생:', error);
 };
 
-// 오류 발생 시 전역 핸들러에 연결
+// 오류 경계 컴포넌트
-window.addEventListener('error', (event) => {
+class ErrorBoundary extends React.Component<
-  handleError(event.error);
+  { children: React.ReactNode },
-});
+  { hasError: boolean; error: Error | null }
-
+> {
-window.addEventListener('unhandledrejection', (event) => {
+  constructor(props: { children: React.ReactNode }) {
-  handleError(event.reason);
+    super(props);
-});
+    this.state = { hasError: false, error: null };
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: 1,
-      refetchOnWindowFocus: false,
-      meta: {
-        // meta 객체를 사용하여 오류 관리
-        errorHandler: (error: Error) => {
-          console.error("쿼리 오류:", error);
-        }
-      }
-    },
-    mutations: {
-      // onSettled를 사용하여 완료 시 호출되는 콜백 설정
-      onSettled: (_data, error) => {
-        if (error) {
-          console.error("뮤테이션 오류:", error);
-        }
-      }
-    }
-  },
-});
-
-const App = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [initError, setInitError] = useState<Error | null>(null);
-
-  useEffect(() => {
-    // 애플리케이션 초기화 및 로딩 상태 관리
-    try {
-      // 동기화 설정 초기화
-      initSyncSettings();
-      
-      // 기본 예산 데이터 초기화
-      if (!localStorage.getItem('budgetData')) {
-        const defaultBudgetData = {
-          daily: {
-            targetAmount: 40000,
-            spentAmount: 0,
-            remainingAmount: 40000
-          },
-          weekly: {
-            targetAmount: 280000,
-            spentAmount: 0,
-            remainingAmount: 280000
-          },
-          monthly: {
-            targetAmount: 1200000,
-            spentAmount: 0,
-            remainingAmount: 1200000
-          }
-        };
-        localStorage.setItem('budgetData', JSON.stringify(defaultBudgetData));
-      }
-      
-      // 기본 카테고리 예산 설정
-      if (!localStorage.getItem('categoryBudgets')) {
-        const defaultCategoryBudgets = {
-          식비: 400000,
-          생활비: 600000,
-          교통비: 200000
-        };
-        localStorage.setItem('categoryBudgets', JSON.stringify(defaultCategoryBudgets));
-      }
-      
-      // 빈 트랜잭션 배열 초기화
-      if (!localStorage.getItem('transactions')) {
-        localStorage.setItem('transactions', JSON.stringify([]));
-      }
-      
-      setIsLoaded(true);
-    } catch (error) {
-      console.error('앱 초기화 중 오류 발생:', error);
-      setInitError(error instanceof Error ? error : new Error('앱 초기화 중 알 수 없는 오류가 발생했습니다'));
-      // 오류가 발생해도 앱 로딩
-      setIsLoaded(true);
-    }
-  }, []);
-
-  if (!isLoaded) {
-    return <div className="flex items-center justify-center h-screen">
-      <div className="text-center">
-        <div className="animate-spin h-8 w-8 border-4 border-neuro-income border-t-transparent rounded-full mx-auto mb-4"></div>
-        <p className="text-gray-600">앱을 로딩 중입니다...</p>
-      </div>
-    </div>;
   }
 
-  if (initError) {
+  static getDerivedStateFromError(error: Error) {
-    return <div className="flex items-center justify-center h-screen">
+    return { hasError: true, error };
-      <div className="text-center max-w-md p-6 neuro-card">
-        <h2 className="text-xl font-bold text-red-500 mb-4">앱 로드 오류</h2>
-        <p className="text-gray-600 mb-4">{initError.message}</p>
-        <button 
-          onClick={() => window.location.reload()} 
-          className="neuro-button"
-        >
-          다시 시도
-        </button>
-      </div>
-    </div>;
   }
 
+  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() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <ErrorBoundary>
-      <TooltipProvider>
+      <AuthContextWrapper>
-        <AuthProvider>
+        <Router>
-          <BudgetProvider>
+          <div className="flex flex-col min-h-screen">
-            <Toaster />
+            <NavBar />
-            <Sonner />
+            <div className="flex-grow">
-            <BrowserRouter>
               <Routes>
                 <Route path="/" element={<Index />} />
-                <Route path="/transactions" element={<Transactions />} />
-                <Route path="/analytics" element={<Analytics />} />
-                <Route path="/settings" element={<Settings />} />
-                <Route path="/profile-management" element={<ProfileManagement />} />
-                <Route path="/notification-settings" element={<NotificationSettings />} />
-                <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
-                <Route path="/help-support" element={<HelpSupport />} />
-                <Route path="/payment-methods" element={<PaymentMethods />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/register" element={<Register />} />
-                <Route path="/forgot-password" element={<ForgotPassword />} />
+                <Route path="/profile" element={<ProfileManagement />} />
+                <Route path="/settings" element={<Settings />} />
                 <Route path="/supabase-settings" element={<SupabaseSettings />} />
+                <Route path="/transactions" element={<Transactions />} />
+                <Route path="/security-privacy" element={<SecurityPrivacySettings />} />
+                <Route path="/notifications" element={<NotificationSettings />} />
+                <Route path="/help-support" element={<HelpSupport />} />
+                <Route path="/forgot-password" element={<ForgotPassword />} />
+                <Route path="/analytics" element={<Analytics />} />
+                <Route path="/payment-methods" element={<PaymentMethods />} />
                 <Route path="*" element={<NotFound />} />
               </Routes>
-            </BrowserRouter>
+            </div>
-          </BudgetProvider>
+            <Toaster />
-        </AuthProvider>
+          </div>
-      </TooltipProvider>
+        </Router>
-    </QueryClientProvider>
+      </AuthContextWrapper>
+    </ErrorBoundary>
   );
-};
+}
 
 export default App;

src/contexts/AuthContext.tsx

@@ -1,4 +1,9 @@
 
-import { AuthProvider, useAuth } from '@/contexts/auth';
+import React from 'react';
+import { AuthProvider, useAuth } from './auth/AuthProvider';
 
 export { AuthProvider, useAuth };
+
+export default function AuthContextWrapper({ children }: { children: React.ReactNode }) {
+  return <AuthProvider>{children}</AuthProvider>;
+}

src/contexts/auth/signIn.ts

@@ -1,4 +1,5 @@
-import { supabase } from '@/lib/supabase';
+
+import { supabase } from '@/integrations/supabase/client';
 import { 
   handleNetworkError, 
   parseResponse, 
@@ -10,66 +11,34 @@ import { getProxyType, isCorsProxyEnabled } from '@/lib/supabase/config';
 
 export const signIn = async (email: string, password: string) => {
   try {
-    // 서버 연결 상태 먼저 확인
-    const connectionStatus = await verifyServerConnection();
-    if (!connectionStatus.connected) {
-      console.log('서버 연결 실패:', connectionStatus.message);
-      
-      // 프록시 설정 확인 및 추천
-      const usingProxy = isCorsProxyEnabled();
-      const proxyType = getProxyType();
-      let errorMessage = connectionStatus.message;
-      
-      if (!usingProxy) {
-        errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시 활성화를 권장합니다)`;
-      } else if (proxyType !== 'cloudflare') {
-        errorMessage = `${errorMessage} (설정에서 Cloudflare CORS 프록시로 변경을 권장합니다)`;
-      }
-      
-      showAuthToast('서버 연결 실패', errorMessage, 'destructive');
-      return { 
-        error: { message: `서버 연결에 실패했습니다: ${errorMessage}` }, 
-        user: null 
-      };
-    }
-    
     console.log('로그인 시도 중:', email);
     
-    // 직접 API 호출 방식 시도
+    // 기본 Supabase 인증 방식 시도
     try {
-      return await signInWithDirectApi(email, password);
+      const { data, error } = await supabase.auth.signInWithPassword({
-    } catch (directApiError: any) {
+        email,
-      console.error('직접 API 호출 방식 실패:', directApiError);
+        password
+      });
       
-      // 기본 Supabase 인증 방식 시도
+      if (!error && data.user) {
-      try {
+        showAuthToast('로그인 성공', '환영합니다!');
-        const { data, error } = await supabase.auth.signInWithPassword({
+        return { error: null, user: data.user };
-          email,
+      } else if (error) {
-          password
+        console.error('Supabase 기본 로그인 오류:', error.message);
-        });
         
-        if (!error && data.user) {
+        let errorMessage = error.message;
-          showAuthToast('로그인 성공', '환영합니다!');
+        if (error.message.includes('Invalid login credentials')) {
-          return { error: null, user: data.user };
+          errorMessage = '이메일 또는 비밀번호가 올바르지 않습니다.';
-        } else if (error) {
+        } else if (error.message.includes('Email not confirmed')) {
-          console.error('Supabase 기본 로그인 오류:', error.message);
+          errorMessage = '이메일 인증이 완료되지 않았습니다. 이메일을 확인해주세요.';
-          
-          let errorMessage = error.message;
-          if (error.message.includes('Invalid login credentials')) {
-            errorMessage = '이메일 또는 비밀번호가 올바르지 않습니다.';
-          } else if (error.message.includes('Email not confirmed')) {
-            errorMessage = '이메일 인증이 완료되지 않았습니다. 이메일을 확인해주세요.';
-          }
-          
-          showAuthToast('로그인 실패', errorMessage, 'destructive');
-          return { error: { message: errorMessage }, user: null };
         }
-      } catch (basicAuthError: any) {
-        console.warn('Supabase 기본 인증 방식 예외 발생:', basicAuthError);
         
-        // 오류 전파
+        showAuthToast('로그인 실패', errorMessage, 'destructive');
-        throw directApiError;
+        return { error: { message: errorMessage }, user: null };
       }
+    } catch (basicAuthError: any) {
+      console.warn('Supabase 기본 인증 방식 예외 발생:', basicAuthError);
+      throw basicAuthError;
     }
     
     // 여기까지 왔다면 모든 로그인 시도가 실패한 것