Address error condition

The code has an error that needs to be addressed.
2025-03-15 12:09:51 +00:00
parent 5371462b49
commit 66c2240bb2
3 changed files with 129 additions and 21 deletions
--- a/src/contexts/auth/authActions.ts
+++ b/src/contexts/auth/authActions.ts
@@ -1,4 +1,3 @@
-
 import { supabase } from '@/lib/supabase';
 import { toast } from '@/hooks/useToast.wrapper';

@@ -10,14 +9,11 @@ export const signIn = async (email: string, password: string) => {
    
    if (error) {
      console.error('로그인 오류:', error);
-      toast({
-        title: '로그인 실패',
-        description: error.message,
-        variant: 'destructive',
-      });
      return { error };
    }

+    console.log('로그인 성공:', data);
+    
    toast({
      title: '로그인 성공',
      description: '환영합니다!',
@@ -32,11 +28,6 @@ export const signIn = async (email: string, password: string) => {
      ? '서버 연결에 실패했습니다. 네트워크 연결을 확인해주세요.' 
      : '예상치 못한 오류가 발생했습니다.';
    
-    toast({
-      title: '로그인 오류',
-      description: errorMessage,
-      variant: 'destructive',
-    });
    return { error };
  }
 };
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -41,6 +41,19 @@ try {
      // 온프레미스 설치를 위한 추가 설정
      flowType: 'implicit',
    },
+    global: {
+      fetch: (...args) => {
+        // CORS 디버깅을 위한 사용자 정의 fetch
+        console.log('Supabase fetch 요청:', args[0]);
+        return fetch(...args).then(response => {
+          console.log('Supabase 응답 상태:', response.status);
+          return response;
+        }).catch(err => {
+          console.error('Supabase fetch 오류:', err);
+          throw err;
+        });
+      }
+    }
  });

  // CORS 문제 확인을 위한 기본 헤더 테스트
@@ -59,7 +72,14 @@ try {
      if (response.ok) {
        console.log('Supabase REST API 연결 성공:', response.status);
      } else {
-        console.warn('Supabase REST API 연결 실패:', response.status);
+        console.warn('Supabase REST API 연결 실패:', response.status, response.statusText);
+        // 응답 세부 정보 로깅
+        try {
+          const errorText = await response.text();
+          console.warn('Supabase REST API 오류 응답:', errorText);
+        } catch (e) {
+          console.error('응답 내용 읽기 실패:', e);
+        }
      }
    } catch (err) {
      console.error('Supabase 서버 상태 확인 중 오류 (CORS 문제 가능성):', err);
@@ -175,6 +195,7 @@ export const testSupabaseConnection = async () => {
  try {
    // 1. REST API 접근 테스트
    try {
+      console.log('REST API 테스트 시작...');
      const response = await fetch(`${supabaseUrl}/rest/v1/`, {
        method: 'GET',
        headers: {
@@ -185,25 +206,36 @@ export const testSupabaseConnection = async () => {
      
      results.restApi = response.ok;
      if (!response.ok) {
-        results.errors.push(`REST API 오류: ${response.status} ${response.statusText}`);
+        const errorBody = await response.text();
+        results.errors.push(`REST API 오류(${response.status} ${response.statusText}): ${errorBody || '응답 없음'}`);
+        console.error('REST API 테스트 실패:', response.status, errorBody);
+      } else {
+        console.log('REST API 테스트 성공');
      }
    } catch (err: any) {
-      results.errors.push(`REST API 예외: ${err.message}`);
+      results.errors.push(`REST API 예외: ${err.message || '알 수 없는 오류'}`);
+      console.error('REST API 테스트 중 예외:', err);
    }
    
    // 2. 인증 서비스 테스트
    try {
+      console.log('인증 서비스 테스트 시작...');
      const { data, error } = await supabaseClient.auth.getSession();
      results.auth = !error;
      if (error) {
        results.errors.push(`인증 오류: ${error.message}`);
+        console.error('인증 테스트 실패:', error);
+      } else {
+        console.log('인증 테스트 성공');
      }
    } catch (err: any) {
-      results.errors.push(`인증 예외: ${err.message}`);
+      results.errors.push(`인증 예외: ${err.message || '알 수 없는 오류'}`);
+      console.error('인증 테스트 중 예외:', err);
    }
    
    // 3. 데이터베이스 연결 테스트
    try {
+      console.log('데이터베이스 연결 테스트 시작...');
      const { data, error } = await supabaseClient
        .from('transactions')
        .select('*')
@@ -212,12 +244,22 @@ export const testSupabaseConnection = async () => {
      results.database = !error;
      if (error) {
        results.errors.push(`데이터베이스 오류: ${error.message}`);
+        console.error('데이터베이스 테스트 실패:', error);
+      } else {
+        console.log('데이터베이스 테스트 성공', data);
      }
    } catch (err: any) {
-      results.errors.push(`데이터베이스 예외: ${err.message}`);
+      results.errors.push(`데이터베이스 예외: ${err.message || '알 수 없는 오류'}`);
+      console.error('데이터베이스 테스트 중 예외:', err);
+    }
+    
+    // 오류가 없는 경우 메시지 추가
+    if (results.errors.length === 0) {
+      results.errors.push('모든 테스트 통과! 연결 상태가 정상입니다.');
    }
  } catch (err: any) {
-    results.errors.push(`테스트 실행 예외: ${err.message}`);
+    results.errors.push(`테스트 실행 예외: ${err.message || '알 수 없는 오류'}`);
+    console.error('전체 테스트 실행 중 예외:', err);
  }
  
  console.log('Supabase 연결 테스트 결과:', results);
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -16,6 +16,7 @@ const Login = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [testLoading, setTestLoading] = useState(false);
  const [testResults, setTestResults] = useState<any>(null);
+  const [loginError, setLoginError] = useState<string | null>(null);
  const { toast } = useToast();
  const navigate = useNavigate();
  const { signIn, user } = useAuth();
@@ -29,6 +30,7 @@ const Login = () => {

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
+    setLoginError(null);
    
    if (!email || !password) {
      toast({
@@ -44,9 +46,41 @@ const Login = () => {
    try {
      const { error } = await signIn(email, password);
      
-      if (!error) {
+      if (error) {
+        console.error("로그인 실패:", error);
+        let errorMessage = "로그인에 실패했습니다.";
+        
+        // Supabase 오류 메시지 처리
+        if (error.message) {
+          if (error.message.includes("Invalid login credentials")) {
+            errorMessage = "이메일 또는 비밀번호가 올바르지 않습니다.";
+          } else if (error.message.includes("Email not confirmed")) {
+            errorMessage = "이메일 인증이 완료되지 않았습니다. 이메일을 확인해주세요.";
+          } else {
+            errorMessage = `오류: ${error.message}`;
+          }
+        }
+        
+        setLoginError(errorMessage);
+        
+        toast({
+          title: "로그인 실패",
+          description: errorMessage,
+          variant: "destructive"
+        });
+      } else {
        navigate("/");
      }
+    } catch (err: any) {
+      console.error("로그인 과정에서 예외 발생:", err);
+      const errorMessage = err.message || "알 수 없는 오류가 발생했습니다.";
+      setLoginError(errorMessage);
+      
+      toast({
+        title: "로그인 오류",
+        description: errorMessage,
+        variant: "destructive"
+      });
    } finally {
      setIsLoading(false);
    }
@@ -55,6 +89,7 @@ const Login = () => {
  // Supabase 연결 테스트
  const runConnectionTest = async () => {
    setTestLoading(true);
+    setLoginError(null);
    try {
      const results = await testSupabaseConnection();
      setTestResults(results);
@@ -71,8 +106,10 @@ const Login = () => {
          variant: "destructive"
        });
      }
-    } catch (error) {
+    } catch (error: any) {
      console.error("연결 테스트 중 오류:", error);
+      setLoginError(error.message || "테스트 실행 중 예상치 못한 오류가 발생했습니다.");
+      
      toast({
        title: "연결 테스트 오류",
        description: "테스트 실행 중 예상치 못한 오류가 발생했습니다.",
@@ -112,6 +149,12 @@ const Login = () => {
                </div>
              </div>
              
+              {loginError && (
+                <div className="p-3 bg-red-50 text-red-600 rounded-md text-sm">
+                  <p>{loginError}</p>
+                </div>
+              )}
+              
              <div className="text-right">
                <Link to="/forgot-password" className="text-sm text-neuro-income hover:underline">
                  비밀번호를 잊으셨나요?
@@ -169,11 +212,43 @@ const Login = () => {
          </div>
          
          {testResults && testResults.errors.length > 0 && (
-            <div className="mt-2 text-xs text-red-500 bg-red-50 p-2 rounded">
-              {testResults.errors[0]}
+            <div className="mt-2 text-xs text-red-500 bg-red-50 p-2 rounded-md overflow-auto max-h-24">
+              {testResults.errors.map((error: string, index: number) => (
+                <div key={index} className="mb-1">{error}</div>
+              ))}
            </div>
          )}
        </div>
+        
+        {/* 고급 진단 정보 */}
+        <details className="neuro-flat p-3 text-xs mb-4">
+          <summary className="cursor-pointer text-gray-500 font-medium">고급 진단 정보</summary>
+          <div className="mt-2 space-y-2">
+            <div>
+              <p className="font-medium">Supabase URL:</p>
+              <p className="break-all bg-gray-100 p-1 rounded">{testResults?.url || '알 수 없음'}</p>
+            </div>
+            <div>
+              <p className="font-medium">클라이언트 초기화:</p>
+              <p>{testResults?.client ? '성공' : '실패'}</p>
+            </div>
+            <div>
+              <p className="font-medium">브라우저 정보:</p>
+              <p className="break-all">{navigator.userAgent}</p>
+            </div>
+            <div>
+              <p className="font-medium">앱 버전:</p>
+              <p>1.0.0</p>
+            </div>
+            {testResults && (
+              <div className="border-t pt-2 mt-2">
+                <p>REST API: {testResults.restApi ? '✅' : '❌'}</p>
+                <p>인증: {testResults.auth ? '✅' : '❌'}</p>
+                <p>데이터베이스: {testResults.database ? '✅' : '❌'}</p>
+              </div>
+            )}
+          </div>
+        </details>
      </div>
    </div>;
 };