Add API test for login

This commit adds an API test to check if the login is working correctly.
2025-03-15 12:06:05 +00:00
parent 2f3dda3ca6
commit 5371462b49
2 changed files with 206 additions and 3 deletions
--- a/src/lib/supabase.ts
+++ b/src/lib/supabase.ts
@@ -43,14 +43,55 @@ try {
    },
  });

+  // CORS 문제 확인을 위한 기본 헤더 테스트
+  (async () => {
+    try {
+      // 기본 서버 상태 확인 (CORS 테스트)
+      console.log('Supabase 서버 상태 확인 중...');
+      const response = await fetch(`${supabaseUrl}/rest/v1/`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'apikey': supabaseAnonKey,
+        },
+      });
+      
+      if (response.ok) {
+        console.log('Supabase REST API 연결 성공:', response.status);
+      } else {
+        console.warn('Supabase REST API 연결 실패:', response.status);
+      }
+    } catch (err) {
+      console.error('Supabase 서버 상태 확인 중 오류 (CORS 문제 가능성):', err);
+    }
+  })();
+
  // Supabase 연결 테스트
  (async () => {
    try {
+      console.log('Supabase 인증 테스트 시도 중...');
      const { data, error } = await supabaseClient.auth.getSession();
      if (error) {
        console.warn('Supabase 연결 테스트 실패:', error.message);
      } else {
-        console.log('Supabase 연결 성공!');
+        console.log('Supabase 연결 성공!', data);
+      }
+      
+      // 추가 테스트: 공개 데이터 조회 시도
+      try {
+        console.log('Supabase 데이터베이스 공개 테이블 조회 시도...');
+        const { data: tableData, error: tableError } = await supabaseClient
+          .from('transactions')
+          .select('*')
+          .limit(1);
+          
+        if (tableError) {
+          console.warn('Supabase 데이터베이스 테스트 실패:', tableError.message);
+        } else {
+          console.log('Supabase 데이터베이스 테스트 성공:', tableData);
+        }
+      } catch (dbErr) {
+        console.error('Supabase 데이터베이스 테스트 중 예외 발생:', dbErr);
      }
    } catch (err) {
      console.error('Supabase 연결 확인 중 오류:', err);
@@ -96,3 +137,89 @@ export const configureSupabase = (url: string, key: string) => {
  // 페이지 새로고침 - 새로운 설정으로 Supabase 클라이언트 초기화
  window.location.reload();
 };
+
+// 테스트용 직접 로그인 함수 (디버깅 전용)
+export const testSupabaseLogin = async (email: string, password: string) => {
+  try {
+    console.log('테스트 로그인 시도:', email);
+    
+    const { data, error } = await supabaseClient.auth.signInWithPassword({
+      email,
+      password
+    });
+    
+    if (error) {
+      console.error('테스트 로그인 오류:', error);
+      return { success: false, error };
+    }
+    
+    console.log('테스트 로그인 성공:', data);
+    return { success: true, data };
+  } catch (err) {
+    console.error('테스트 로그인 중 예외 발생:', err);
+    return { success: false, error: err };
+  }
+};
+
+// API 테스트 도우미 함수
+export const testSupabaseConnection = async () => {
+  const results = {
+    url: supabaseUrl,
+    client: !!supabaseClient,
+    restApi: false,
+    auth: false,
+    database: false,
+    errors: [] as string[]
+  };
+  
+  try {
+    // 1. REST API 접근 테스트
+    try {
+      const response = await fetch(`${supabaseUrl}/rest/v1/`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'apikey': supabaseAnonKey,
+        },
+      });
+      
+      results.restApi = response.ok;
+      if (!response.ok) {
+        results.errors.push(`REST API 오류: ${response.status} ${response.statusText}`);
+      }
+    } catch (err: any) {
+      results.errors.push(`REST API 예외: ${err.message}`);
+    }
+    
+    // 2. 인증 서비스 테스트
+    try {
+      const { data, error } = await supabaseClient.auth.getSession();
+      results.auth = !error;
+      if (error) {
+        results.errors.push(`인증 오류: ${error.message}`);
+      }
+    } catch (err: any) {
+      results.errors.push(`인증 예외: ${err.message}`);
+    }
+    
+    // 3. 데이터베이스 연결 테스트
+    try {
+      const { data, error } = await supabaseClient
+        .from('transactions')
+        .select('*')
+        .limit(1);
+        
+      results.database = !error;
+      if (error) {
+        results.errors.push(`데이터베이스 오류: ${error.message}`);
+      }
+    } catch (err: any) {
+      results.errors.push(`데이터베이스 예외: ${err.message}`);
+    }
+  } catch (err: any) {
+    results.errors.push(`테스트 실행 예외: ${err.message}`);
+  }
+  
+  console.log('Supabase 연결 테스트 결과:', results);
+  return results;
+};
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,17 +1,21 @@
+
 import React, { useState, useEffect } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { ArrowRight, Mail, KeyRound, Eye, EyeOff } from "lucide-react";
+import { ArrowRight, Mail, KeyRound, Eye, EyeOff, RefreshCw } from "lucide-react";
 import { useToast } from "@/hooks/useToast.wrapper";
 import { useAuth } from "@/contexts/auth";
+import { testSupabaseConnection } from "@/lib/supabase";

 const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
+  const [testLoading, setTestLoading] = useState(false);
+  const [testResults, setTestResults] = useState<any>(null);
  const { toast } = useToast();
  const navigate = useNavigate();
  const { signIn, user } = useAuth();
@@ -48,6 +52,37 @@ const Login = () => {
    }
  };

+  // Supabase 연결 테스트
+  const runConnectionTest = async () => {
+    setTestLoading(true);
+    try {
+      const results = await testSupabaseConnection();
+      setTestResults(results);
+      
+      if (results.errors.length === 0) {
+        toast({
+          title: "연결 테스트 성공",
+          description: "Supabase 서버 연결이 정상입니다.",
+        });
+      } else {
+        toast({
+          title: "연결 테스트 실패",
+          description: `오류 발생: ${results.errors[0]}`,
+          variant: "destructive"
+        });
+      }
+    } catch (error) {
+      console.error("연결 테스트 중 오류:", error);
+      toast({
+        title: "연결 테스트 오류",
+        description: "테스트 실행 중 예상치 못한 오류가 발생했습니다.",
+        variant: "destructive"
+      });
+    } finally {
+      setTestLoading(false);
+    }
+  };
+
  return <div className="min-h-screen flex flex-col items-center justify-center p-6 bg-neuro-background">
      <div className="w-full max-w-md">
        <div className="text-center mb-8">
@@ -90,7 +125,7 @@ const Login = () => {
          </form>
        </div>
        
-        <div className="text-center">
+        <div className="text-center mb-4">
          <p className="text-gray-500">
            계정이 없으신가요?{" "}
            <Link to="/register" className="text-neuro-income font-medium hover:underline">
@@ -98,6 +133,47 @@ const Login = () => {
            </Link>
          </p>
        </div>
+        
+        {/* 연결 테스트 섹션 */}
+        <div className="neuro-card p-4 mb-6">
+          <h3 className="text-sm font-medium mb-2">Supabase 연결 진단</h3>
+          <div className="flex justify-between items-center">
+            <button
+              onClick={runConnectionTest}
+              disabled={testLoading}
+              className="text-xs flex items-center text-neuro-income hover:underline"
+            >
+              {testLoading ? (
+                <>
+                  <RefreshCw className="mr-1 h-3 w-3 animate-spin" />
+                  테스트 중...
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="mr-1 h-3 w-3" />
+                  연결 테스트 실행
+                </>
+              )}
+            </button>
+            
+            {testResults && (
+              <div className="text-xs">
+                <span className={`inline-block rounded-full w-2 h-2 mr-1 ${testResults.restApi ? 'bg-green-500' : 'bg-red-500'}`}></span>
+                API
+                <span className={`inline-block rounded-full w-2 h-2 mx-1 ${testResults.auth ? 'bg-green-500' : 'bg-red-500'}`}></span>
+                인증
+                <span className={`inline-block rounded-full w-2 h-2 mx-1 ${testResults.database ? 'bg-green-500' : 'bg-red-500'}`}></span>
+                DB
+              </div>
+            )}
+          </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>
+          )}
+        </div>
      </div>
    </div>;
 };