diff --git a/src/components/supabase/SupabaseConnectionTest.tsx b/src/components/supabase/SupabaseConnectionTest.tsx index 09dd13c..08d644a 100644 --- a/src/components/supabase/SupabaseConnectionTest.tsx +++ b/src/components/supabase/SupabaseConnectionTest.tsx @@ -1,15 +1,17 @@ import React, { useState } from 'react'; import { Button } from "@/components/ui/button"; -import { RefreshCw, Info } from "lucide-react"; +import { RefreshCw, Info, HelpCircle, AlertCircle } from "lucide-react"; import { toast } from "@/hooks/useToast.wrapper"; import { testSupabaseConnection } from '@/lib/supabase'; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"; interface TestResult { url: string; proxyUrl: string; usingProxy: boolean; + proxyType?: string; client: boolean; restApi: boolean; auth: boolean; @@ -53,6 +55,13 @@ const SupabaseConnectionTest: React.FC = () => { } }; + const hasProxyRecommendation = (errors: string[]) => { + return errors.some(err => + err.includes('프록시 사용 시 정상 작동합니다') || + err.includes('프록시를 선택해보세요') + ); + }; + return (

연결 테스트

@@ -99,18 +108,49 @@ const SupabaseConnectionTest: React.FC = () => { {testResults.usingProxy && (
-

CORS 프록시 사용 중: {testResults.proxyUrl}

+

CORS 프록시 사용 중: {testResults.proxyType || 'corsproxy.io'}

+

{testResults.proxyUrl}

)} + {testResults.errors.length > 0 && hasProxyRecommendation(testResults.errors) && ( + + + 프록시 변경 권장 + + {testResults.errors.find(err => + err.includes('프록시 사용 시 정상 작동합니다') || + err.includes('프록시를 선택해보세요') + )} + + + )} + {testResults.errors.length > 0 && (
{testResults.errors.map((error: string, index: number) => ( -

{error}

+

{error}

))}
)} + {/* 오류 해결 팁 */} + {!testResults.restApi && testResults.auth && ( +
+
+ +
+

인증은 성공했지만 API/DB 연결에 실패했습니다

+
    +
  • 다른 CORS 프록시 옵션을 시도해보세요
  • +
  • Supabase 서버의 CORS 설정을 확인하세요
  • +
  • 브라우저 개발자 도구에서 네트워크 탭을 확인하세요
  • +
+
+
+
+ )} + {/* 디버그 정보 섹션 추가 */} {testResults.debugInfo && ( {
+ {testResults.usingProxy && ( +
+ 프록시 URL: +
+ {testResults.proxyUrl} +
+
+ 프록시 유형: {testResults.proxyType || 'corsproxy.io'} +
+
+ )} +
클라이언트 초기화:
@@ -146,6 +198,15 @@ const SupabaseConnectionTest: React.FC = () => {
+ {testResults.debugInfo.lastErrorDetails && ( +
+ 마지막 오류 상세: +
+ {testResults.debugInfo.lastErrorDetails} +
+
+ )} +
브라우저 정보:
diff --git a/src/components/supabase/SupabaseSettingsForm.tsx b/src/components/supabase/SupabaseSettingsForm.tsx index 6f3108b..fb0f33f 100644 --- a/src/components/supabase/SupabaseSettingsForm.tsx +++ b/src/components/supabase/SupabaseSettingsForm.tsx @@ -5,8 +5,13 @@ import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { DatabaseIcon, Save, RefreshCw, Shield, AlertTriangle, Check } from "lucide-react"; import { toast } from "@/hooks/useToast.wrapper"; -import { configureSupabase, isCorsProxyEnabled } from "@/lib/supabase/config"; +import { + configureSupabase, + isCorsProxyEnabled, + getProxyType +} from "@/lib/supabase/config"; import { Switch } from "@/components/ui/switch"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; interface SupabaseSettingsFormProps { onSaved: () => void; @@ -16,6 +21,7 @@ const SupabaseSettingsForm: React.FC = ({ onSaved }) const [supabaseUrl, setSupabaseUrl] = useState(''); const [supabaseKey, setSupabaseKey] = useState(''); const [useProxy, setUseProxy] = useState(false); + const [proxyType, setProxyType] = useState('corsproxy.io'); const [isSaving, setIsSaving] = useState(false); // 저장된 설정 불러오기 @@ -23,10 +29,12 @@ const SupabaseSettingsForm: React.FC = ({ onSaved }) const savedUrl = localStorage.getItem('supabase_url'); const savedKey = localStorage.getItem('supabase_key'); const proxyEnabled = isCorsProxyEnabled(); + const savedProxyType = getProxyType(); if (savedUrl) setSupabaseUrl(savedUrl); if (savedKey) setSupabaseKey(savedKey); setUseProxy(proxyEnabled); + setProxyType(savedProxyType); }, []); const validateUrl = (url: string): boolean => { @@ -57,7 +65,7 @@ const SupabaseSettingsForm: React.FC = ({ onSaved }) try { // Supabase 설정 적용 - configureSupabase(supabaseUrl, supabaseKey, useProxy); + configureSupabase(supabaseUrl, supabaseKey, useProxy, proxyType); toast({ title: "설정 저장 완료", @@ -153,6 +161,27 @@ const SupabaseSettingsForm: React.FC = ({ onSaved }) />
+ {/* 프록시 서비스 선택 옵션 추가 */} + {useProxy && ( +
+ + +

+ 특정 프록시 서비스가 작동하지 않으면 다른 서비스를 시도해보세요. +

+
+ )} +