Add API test for login

This commit adds an API test to check if the login is working correctly.

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>;
 };