Fix login failure after connection

Addresses an issue where login fails with a "Unexpected end of JSON input" error after a successful Supabase connection.

src/components/auth/LoginForm.tsx

@@ -4,7 +4,7 @@ import { Link } 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, AlertTriangle } from "lucide-react";
 
 interface LoginFormProps {
   email: string;
@@ -29,6 +29,11 @@ const LoginForm: React.FC<LoginFormProps> = ({
   loginError,
   handleLogin
 }) => {
+  // CORS 또는 JSON 관련 오류인지 확인
+  const isCorsOrJsonError = loginError && 
+    (loginError.includes('JSON') || loginError.includes('CORS') || 
+     loginError.includes('프록시') || loginError.includes('서버 응답'));
+
   return (
     <div className="neuro-flat p-8 mb-6">
       <form onSubmit={handleLogin}>
@@ -71,8 +76,21 @@ const LoginForm: React.FC<LoginFormProps> = ({
           </div>
           
           {loginError && (
-            <div className="p-3 bg-red-50 text-red-600 rounded-md text-sm">
-              <p>{loginError}</p>
+            <div className={`p-3 ${isCorsOrJsonError ? 'bg-amber-50 text-amber-800' : 'bg-red-50 text-red-600'} rounded-md text-sm`}>
+              <div className="flex items-start gap-2">
+                <AlertTriangle className="h-5 w-5 flex-shrink-0 mt-0.5 text-amber-500" />
+                <div>
+                  <p className="font-medium">{loginError}</p>
+                  
+                  {isCorsOrJsonError && (
+                    <ul className="mt-2 list-disc pl-5 text-xs space-y-1 text-amber-700">
+                      <li>설정 페이지에서 다른 CORS 프록시 유형을 시도해 보세요.</li>
+                      <li>HTTPS URL을 사용하는 Supabase 인스턴스로 변경해 보세요.</li>
+                      <li>네트워크 연결 상태를 확인하세요.</li>
+                    </ul>
+                  )}
+                </div>
+              </div>
             </div>
           )}
           

src/contexts/auth/authActions.ts

@@ -5,30 +5,84 @@ export const signIn = async (email: string, password: string) => {
   try {
     console.log('로그인 시도 중:', email);
     
-    const { data, error } = await supabase.auth.signInWithPassword({ email, password });
+    // 응답 예외 처리를 위한 래핑
+    const response = await fetch(`${supabase.auth.url}/token?grant_type=password`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'apikey': supabase.supabaseKey,
+        'Authorization': `Bearer ${supabase.supabaseKey}`,
+        'X-Client-Info': 'supabase-js/2.x'
+      },
+      body: JSON.stringify({ email, password })
+    }).catch(err => {
+      console.error('로그인 요청 중 fetch 오류:', err);
+      throw new Error('서버 연결에 실패했습니다. 네트워크 연결을 확인해주세요.');
+    });
     
-    if (error) {
-      console.error('로그인 오류:', error);
-      return { error };
+    // 응답 상태 확인 및 로깅
+    console.log('로그인 응답 상태:', response.status);
+    
+    // 빈 응답 또는 JSON 파싱 문제 처리
+    let responseData;
+    try {
+      // 응답 본문이 비어있는지 먼저 확인
+      const responseText = await response.text();
+      console.log('로그인 응답 원본:', responseText);
+      
+      if (!responseText || responseText.trim() === '') {
+        throw new Error('서버가 빈 응답을 반환했습니다');
       }
       
-    console.log('로그인 성공:', data);
+      // 응답이 있으면 JSON으로 파싱
+      responseData = JSON.parse(responseText);
+    } catch (parseError) {
+      console.error('로그인 응답 파싱 오류:', parseError);
+      return { 
+        error: { 
+          message: '서버 응답을 처리할 수 없습니다. CORS 프록시 설정을 확인하세요.'
+        } 
+      };
+    }
+    
+    // 응답 처리
+    if (response.ok && responseData?.access_token) {
+      // 로그인 성공 시 Supabase 세션 설정
+      await supabase.auth.setSession({
+        access_token: responseData.access_token,
+        refresh_token: responseData.refresh_token
+      });
+      
+      // 사용자 정보 가져오기
+      const { data: userData } = await supabase.auth.getUser();
+      
+      console.log('로그인 성공:', userData);
       
       toast({
         title: '로그인 성공',
         description: '환영합니다!',
       });
       
-    return { error: null, user: data.user };
+      return { error: null, user: userData.user };
+    } else {
+      // 오류 응답 처리
+      console.error('로그인 오류 응답:', responseData);
+      
+      const errorMessage = responseData?.error_description || 
+                          responseData?.error || 
+                          '로그인에 실패했습니다. 이메일과 비밀번호를 확인하세요.';
+      
+      return { error: { message: errorMessage } };
+    }
   } catch (error: any) {
     console.error('로그인 중 예외 발생:', error);
     
     // 네트워크 오류 확인
     const errorMessage = error.message && error.message.includes('fetch') 
       ? '서버 연결에 실패했습니다. 네트워크 연결을 확인해주세요.' 
-      : '예상치 못한 오류가 발생했습니다.';
+      : (error.message || '예상치 못한 오류가 발생했습니다.');
     
-    return { error };
+    return { error: { message: errorMessage } };
   }
 };
 

src/hooks/useLogin.ts

@@ -42,6 +42,12 @@ export function useLogin() {
             errorMessage = "이메일 또는 비밀번호가 올바르지 않습니다.";
           } else if (error.message.includes("Email not confirmed")) {
             errorMessage = "이메일 인증이 완료되지 않았습니다. 이메일을 확인해주세요.";
+          } else if (error.message.includes("JSON")) {
+            errorMessage = "서버 응답 오류: JSON 파싱 실패. 네트워크 연결이나 CORS 설정을 확인하세요.";
+          } else if (error.message.includes("CORS") || error.message.includes("프록시")) {
+            errorMessage = "CORS 오류: 프록시 설정을 확인하거나 다른 프록시를 시도해보세요.";
+          } else if (error.message.includes("fetch") || error.message.includes("네트워크")) {
+            errorMessage = "네트워크 오류: 서버 연결에 실패했습니다.";
           } else {
             errorMessage = `오류: ${error.message}`;
           }