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 && (
+
+
+
+
+ 특정 프록시 서비스가 작동하지 않으면 다른 서비스를 시도해보세요.
+
+
+ )}
+