Address error condition

The code has an error that needs to be addressed.

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