Refactor SupabaseSettings component
The SupabaseSettings component was refactored into smaller, more manageable components to improve code organization and maintainability. The UI and functionality remain unchanged.
This commit is contained in:
gpt-engineer-app[bot]
116
src/components/supabase/SupabaseConnectionTest.tsx
Normal file
116
src/components/supabase/SupabaseConnectionTest.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { toast } from "@/hooks/useToast.wrapper";
|
||||
import { testSupabaseConnection } from '@/lib/supabase';
|
||||
|
||||
interface TestResult {
|
||||
url: string;
|
||||
proxyUrl: string;
|
||||
usingProxy: boolean;
|
||||
client: boolean;
|
||||
restApi: boolean;
|
||||
auth: boolean;
|
||||
database: boolean;
|
||||
errors: string[];
|
||||
}
|
||||
|
||||
const SupabaseConnectionTest: React.FC = () => {
|
||||
const [testResults, setTestResults] = useState<TestResult | null>(null);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
|
||||
const runConnectionTest = async () => {
|
||||
setIsTesting(true);
|
||||
try {
|
||||
const results = await testSupabaseConnection();
|
||||
setTestResults(results);
|
||||
|
||||
if (results.errors.length === 0 || (results.auth && results.restApi && results.database)) {
|
||||
toast({
|
||||
title: "연결 테스트 성공",
|
||||
description: "Supabase 서버 연결이 정상입니다.",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "연결 테스트 실패",
|
||||
description: `오류 발생: ${results.errors[0]}`,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("연결 테스트 중 오류:", error);
|
||||
toast({
|
||||
title: "연결 테스트 오류",
|
||||
description: "테스트 실행 중 예상치 못한 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setIsTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-4">연결 테스트</h2>
|
||||
|
||||
<Button
|
||||
onClick={runConnectionTest}
|
||||
disabled={isTesting}
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
>
|
||||
{isTesting ? (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||
테스트 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
연결 테스트 실행
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{testResults && (
|
||||
<div className="mt-4 space-y-3 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">REST API:</span>
|
||||
<span className={testResults.restApi ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.restApi ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">인증:</span>
|
||||
<span className={testResults.auth ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.auth ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">데이터베이스:</span>
|
||||
<span className={testResults.database ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.database ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{testResults.usingProxy && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded p-2 mt-2">
|
||||
<p className="text-xs">CORS 프록시 사용 중: {testResults.proxyUrl}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testResults.errors.length > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded p-2 mt-2">
|
||||
{testResults.errors.map((error: string, index: number) => (
|
||||
<p key={index} className="text-xs text-red-600">{error}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupabaseConnectionTest;
|
||||
30
src/components/supabase/SupabaseHelpSection.tsx
Normal file
30
src/components/supabase/SupabaseHelpSection.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
import React from 'react';
|
||||
|
||||
const SupabaseHelpSection: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-2">도움말</h2>
|
||||
<p className="text-gray-500 text-sm mb-4">
|
||||
온프레미스 Supabase 설정은 다음과 같이 구성됩니다:
|
||||
</p>
|
||||
<ul className="list-disc pl-5 text-sm text-gray-500 space-y-2">
|
||||
<li>
|
||||
<strong>Supabase URL</strong>: 온프레미스로 설치한 Supabase 인스턴스의 URL을 입력합니다.
|
||||
(예: https://192.168.1.100:8000)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Anon Key</strong>: Supabase 대시보드의 API 설정에서 찾을 수 있는 anon/public 키를 입력합니다.
|
||||
</li>
|
||||
<li>
|
||||
<strong>CORS 프록시</strong>: HTTP URL에 대한 브라우저 보안 제한을 우회하기 위해 사용합니다. HTTPS가 아닌 URL에 접근 문제가 있는 경우 활성화하세요.
|
||||
</li>
|
||||
<li className="text-amber-500 font-medium">
|
||||
가능하면 HTTPS URL을 사용하는 것이 좋습니다. HTTP URL을 사용해야 하는 경우 CORS 프록시를 활성화하세요.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupabaseHelpSection;
|
||||
177
src/components/supabase/SupabaseSettingsForm.tsx
Normal file
177
src/components/supabase/SupabaseSettingsForm.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Input } from "@/components/ui/input";
|
||||
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 { Switch } from "@/components/ui/switch";
|
||||
|
||||
interface SupabaseSettingsFormProps {
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
const SupabaseSettingsForm: React.FC<SupabaseSettingsFormProps> = ({ onSaved }) => {
|
||||
const [supabaseUrl, setSupabaseUrl] = useState('');
|
||||
const [supabaseKey, setSupabaseKey] = useState('');
|
||||
const [useProxy, setUseProxy] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// 저장된 설정 불러오기
|
||||
useEffect(() => {
|
||||
const savedUrl = localStorage.getItem('supabase_url');
|
||||
const savedKey = localStorage.getItem('supabase_key');
|
||||
const proxyEnabled = isCorsProxyEnabled();
|
||||
|
||||
if (savedUrl) setSupabaseUrl(savedUrl);
|
||||
if (savedKey) setSupabaseKey(savedKey);
|
||||
setUseProxy(proxyEnabled);
|
||||
}, []);
|
||||
|
||||
const validateUrl = (url: string): boolean => {
|
||||
// URL 유효성 검사: http:// 또는 https://로 시작하는지 확인
|
||||
return /^https?:\/\/.+/.test(url);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!supabaseUrl || !supabaseKey) {
|
||||
toast({
|
||||
title: "입력 오류",
|
||||
description: "Supabase URL과 Anon Key를 모두 입력해주세요.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateUrl(supabaseUrl)) {
|
||||
toast({
|
||||
title: "URL 오류",
|
||||
description: "유효한 URL 형식이 아닙니다. http:// 또는 https://로 시작하는 URL을 입력해주세요.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
// Supabase 설정 적용
|
||||
configureSupabase(supabaseUrl, supabaseKey, useProxy);
|
||||
|
||||
toast({
|
||||
title: "설정 저장 완료",
|
||||
description: "Supabase 설정이 저장되었습니다. 변경사항을 적용합니다.",
|
||||
});
|
||||
|
||||
onSaved();
|
||||
} catch (error) {
|
||||
console.error('Supabase 설정 저장 오류:', error);
|
||||
toast({
|
||||
title: "설정 저장 실패",
|
||||
description: "Supabase 설정을 저장하는 중 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isHttpsUrl = supabaseUrl.startsWith("https://");
|
||||
const suggestProxy = supabaseUrl.startsWith("http://") && !useProxy;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="supabase-url" className="text-base">Supabase URL</Label>
|
||||
<div className="relative">
|
||||
<DatabaseIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
|
||||
<Input
|
||||
id="supabase-url"
|
||||
placeholder="http://your-supabase-url.com"
|
||||
value={supabaseUrl}
|
||||
onChange={(e) => setSupabaseUrl(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL 관련 경고 및 안내 추가 */}
|
||||
{suggestProxy && (
|
||||
<div className="flex items-center text-amber-500 text-xs mt-1 p-2 bg-amber-50 rounded-md">
|
||||
<AlertTriangle className="h-4 w-4 mr-1 flex-shrink-0" />
|
||||
<span>HTTP URL을 사용하고 계십니다. CORS 프록시 활성화를 권장합니다.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isHttpsUrl && (
|
||||
<div className="flex items-center text-green-500 text-xs mt-1 p-2 bg-green-50 rounded-md">
|
||||
<Check className="h-4 w-4 mr-1 flex-shrink-0" />
|
||||
<span>HTTPS URL을 사용하고 있습니다. 권장됩니다.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="supabase-key" className="text-base">Supabase Anon Key</Label>
|
||||
<div className="relative">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
<Input
|
||||
id="supabase-key"
|
||||
placeholder="your-anon-key"
|
||||
value={supabaseKey}
|
||||
onChange={(e) => setSupabaseKey(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CORS 프록시 설정 추가 */}
|
||||
<div className="flex items-center justify-between space-x-2 py-2">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="cors-proxy" className="cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-4 w-4 mr-2 text-neuro-income" />
|
||||
<span>CORS 프록시 사용</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
HTTP URL에 접근 문제가 있는 경우 활성화하세요
|
||||
</p>
|
||||
</Label>
|
||||
</div>
|
||||
<Switch
|
||||
id="cors-proxy"
|
||||
checked={useProxy}
|
||||
onCheckedChange={setUseProxy}
|
||||
className="data-[state=checked]:bg-neuro-income"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="w-full bg-neuro-income text-white"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||
저장 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
설정 저장
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupabaseSettingsForm;
|
||||
@@ -34,7 +34,7 @@ try {
|
||||
console.log('Supabase fetch 요청:', url);
|
||||
|
||||
// 기본 fetch 호출
|
||||
return fetch(...args)
|
||||
return fetch(urlOrRequest, args[1])
|
||||
.then(response => {
|
||||
console.log('Supabase 응답 상태:', response.status);
|
||||
return response;
|
||||
|
||||
@@ -1,112 +1,18 @@
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Input } from "@/components/ui/input";
|
||||
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 { Switch } from "@/components/ui/switch";
|
||||
import { testSupabaseConnection } from "@/lib/supabase";
|
||||
import React, { useState } from 'react';
|
||||
import NavBar from '@/components/NavBar';
|
||||
import SupabaseSettingsForm from '@/components/supabase/SupabaseSettingsForm';
|
||||
import SupabaseConnectionTest from '@/components/supabase/SupabaseConnectionTest';
|
||||
import SupabaseHelpSection from '@/components/supabase/SupabaseHelpSection';
|
||||
|
||||
const SupabaseSettings = () => {
|
||||
const [supabaseUrl, setSupabaseUrl] = useState('');
|
||||
const [supabaseKey, setSupabaseKey] = useState('');
|
||||
const [useProxy, setUseProxy] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [testResults, setTestResults] = useState<any>(null);
|
||||
const [isTesting, setIsTesting] = useState(false);
|
||||
const [refreshCounter, setRefreshCounter] = useState(0);
|
||||
|
||||
// 저장된 설정 불러오기
|
||||
useEffect(() => {
|
||||
const savedUrl = localStorage.getItem('supabase_url');
|
||||
const savedKey = localStorage.getItem('supabase_key');
|
||||
const proxyEnabled = isCorsProxyEnabled();
|
||||
|
||||
if (savedUrl) setSupabaseUrl(savedUrl);
|
||||
if (savedKey) setSupabaseKey(savedKey);
|
||||
setUseProxy(proxyEnabled);
|
||||
}, []);
|
||||
|
||||
const validateUrl = (url: string): boolean => {
|
||||
// URL 유효성 검사: http:// 또는 https://로 시작하는지 확인
|
||||
return /^https?:\/\/.+/.test(url);
|
||||
const handleSettingsSaved = () => {
|
||||
// 설정이 저장될 때 테스트 컴포넌트를 다시 렌더링하기 위한 카운터 증가
|
||||
setRefreshCounter(prev => prev + 1);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
if (!supabaseUrl || !supabaseKey) {
|
||||
toast({
|
||||
title: "입력 오류",
|
||||
description: "Supabase URL과 Anon Key를 모두 입력해주세요.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!validateUrl(supabaseUrl)) {
|
||||
toast({
|
||||
title: "URL 오류",
|
||||
description: "유효한 URL 형식이 아닙니다. http:// 또는 https://로 시작하는 URL을 입력해주세요.",
|
||||
variant: "destructive"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
try {
|
||||
// Supabase 설정 적용
|
||||
configureSupabase(supabaseUrl, supabaseKey, useProxy);
|
||||
|
||||
toast({
|
||||
title: "설정 저장 완료",
|
||||
description: "Supabase 설정이 저장되었습니다. 변경사항을 적용합니다.",
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Supabase 설정 저장 오류:', error);
|
||||
toast({
|
||||
title: "설정 저장 실패",
|
||||
description: "Supabase 설정을 저장하는 중 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const runConnectionTest = async () => {
|
||||
setIsTesting(true);
|
||||
try {
|
||||
const results = await testSupabaseConnection();
|
||||
setTestResults(results);
|
||||
|
||||
if (results.errors.length === 0 || (results.auth && results.restApi && results.database)) {
|
||||
toast({
|
||||
title: "연결 테스트 성공",
|
||||
description: "Supabase 서버 연결이 정상입니다.",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "연결 테스트 실패",
|
||||
description: `오류 발생: ${results.errors[0]}`,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("연결 테스트 중 오류:", error);
|
||||
toast({
|
||||
title: "연결 테스트 오류",
|
||||
description: "테스트 실행 중 예상치 못한 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setIsTesting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const isHttpsUrl = supabaseUrl.startsWith("https://");
|
||||
const suggestProxy = supabaseUrl.startsWith("http://") && !useProxy;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neuro-background pb-24">
|
||||
<div className="max-w-md mx-auto px-6">
|
||||
@@ -118,180 +24,16 @@ const SupabaseSettings = () => {
|
||||
</header>
|
||||
|
||||
<div className="neuro-card p-6 mb-6">
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="supabase-url" className="text-base">Supabase URL</Label>
|
||||
<div className="relative">
|
||||
<DatabaseIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
|
||||
<Input
|
||||
id="supabase-url"
|
||||
placeholder="http://your-supabase-url.com"
|
||||
value={supabaseUrl}
|
||||
onChange={(e) => setSupabaseUrl(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* URL 관련 경고 및 안내 추가 */}
|
||||
{suggestProxy && (
|
||||
<div className="flex items-center text-amber-500 text-xs mt-1 p-2 bg-amber-50 rounded-md">
|
||||
<AlertTriangle className="h-4 w-4 mr-1 flex-shrink-0" />
|
||||
<span>HTTP URL을 사용하고 계십니다. CORS 프록시 활성화를 권장합니다.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isHttpsUrl && (
|
||||
<div className="flex items-center text-green-500 text-xs mt-1 p-2 bg-green-50 rounded-md">
|
||||
<Check className="h-4 w-4 mr-1 flex-shrink-0" />
|
||||
<span>HTTPS URL을 사용하고 있습니다. 권장됩니다.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="supabase-key" className="text-base">Supabase Anon Key</Label>
|
||||
<div className="relative">
|
||||
<svg
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
||||
</svg>
|
||||
<Input
|
||||
id="supabase-key"
|
||||
placeholder="your-anon-key"
|
||||
value={supabaseKey}
|
||||
onChange={(e) => setSupabaseKey(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CORS 프록시 설정 추가 */}
|
||||
<div className="flex items-center justify-between space-x-2 py-2">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor="cors-proxy" className="cursor-pointer">
|
||||
<div className="flex items-center">
|
||||
<Shield className="h-4 w-4 mr-2 text-neuro-income" />
|
||||
<span>CORS 프록시 사용</span>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">
|
||||
HTTP URL에 접근 문제가 있는 경우 활성화하세요
|
||||
</p>
|
||||
</Label>
|
||||
</div>
|
||||
<Switch
|
||||
id="cors-proxy"
|
||||
checked={useProxy}
|
||||
onCheckedChange={setUseProxy}
|
||||
className="data-[state=checked]:bg-neuro-income"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="w-full bg-neuro-income text-white"
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||
저장 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
설정 저장
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<SupabaseSettingsForm onSaved={handleSettingsSaved} />
|
||||
</div>
|
||||
|
||||
{/* 연결 테스트 섹션 */}
|
||||
<div className="neuro-card p-6 mb-6">
|
||||
<h2 className="text-lg font-semibold mb-4">연결 테스트</h2>
|
||||
|
||||
<Button
|
||||
onClick={runConnectionTest}
|
||||
disabled={isTesting}
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
>
|
||||
{isTesting ? (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
|
||||
테스트 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
연결 테스트 실행
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{testResults && (
|
||||
<div className="mt-4 space-y-3 text-sm">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">REST API:</span>
|
||||
<span className={testResults.restApi ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.restApi ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">인증:</span>
|
||||
<span className={testResults.auth ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.auth ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">데이터베이스:</span>
|
||||
<span className={testResults.database ? 'text-green-500' : 'text-red-500'}>
|
||||
{testResults.database ? '✅ 성공' : '❌ 실패'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{testResults.usingProxy && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded p-2 mt-2">
|
||||
<p className="text-xs">CORS 프록시 사용 중: {testResults.proxyUrl}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{testResults.errors.length > 0 && (
|
||||
<div className="bg-red-50 border border-red-200 rounded p-2 mt-2">
|
||||
{testResults.errors.map((error: string, index: number) => (
|
||||
<p key={index} className="text-xs text-red-600">{error}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<SupabaseConnectionTest key={`test-${refreshCounter}`} />
|
||||
</div>
|
||||
|
||||
<div className="neuro-card p-6">
|
||||
<h2 className="text-lg font-semibold mb-2">도움말</h2>
|
||||
<p className="text-gray-500 text-sm mb-4">
|
||||
온프레미스 Supabase 설정은 다음과 같이 구성됩니다:
|
||||
</p>
|
||||
<ul className="list-disc pl-5 text-sm text-gray-500 space-y-2">
|
||||
<li>
|
||||
<strong>Supabase URL</strong>: 온프레미스로 설치한 Supabase 인스턴스의 URL을 입력합니다.
|
||||
(예: https://192.168.1.100:8000)
|
||||
</li>
|
||||
<li>
|
||||
<strong>Anon Key</strong>: Supabase 대시보드의 API 설정에서 찾을 수 있는 anon/public 키를 입력합니다.
|
||||
</li>
|
||||
<li>
|
||||
<strong>CORS 프록시</strong>: HTTP URL에 대한 브라우저 보안 제한을 우회하기 위해 사용합니다. HTTPS가 아닌 URL에 접근 문제가 있는 경우 활성화하세요.
|
||||
</li>
|
||||
<li className="text-amber-500 font-medium">
|
||||
가능하면 HTTPS URL을 사용하는 것이 좋습니다. HTTP URL을 사용해야 하는 경우 CORS 프록시를 활성화하세요.
|
||||
</li>
|
||||
</ul>
|
||||
<SupabaseHelpSection />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user