Reverted to edit edt-ac485f97-7774-4a29-9d0a-ec4295ecbab8: "Configure Supabase environment variables
Sets Supabase URL and anon key using environment variables."
This commit is contained in:
gpt-engineer-app[bot]
@@ -2,16 +2,12 @@
|
||||
import React from 'react';
|
||||
import { Bell } from 'lucide-react';
|
||||
|
||||
interface HeaderProps {
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ title }) => {
|
||||
const Header: React.FC = () => {
|
||||
return (
|
||||
<header className="py-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold neuro-text">{title || '반갑습니다'}</h1>
|
||||
<h1 className="text-2xl font-bold neuro-text">반갑습니다</h1>
|
||||
<p className="text-gray-500">젤리의 적자탈출</p>
|
||||
</div>
|
||||
<button className="neuro-flat p-2.5 rounded-full">
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { CircleCheck, CircleAlert, RefreshCw, Database, AlertCircle } from 'lucide-react';
|
||||
import {
|
||||
testSupabaseConnection,
|
||||
checkSupabaseEnvironment,
|
||||
checkSupabaseTables
|
||||
} from '@/utils/supabaseTest';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
|
||||
const SupabaseTestPanel = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [connectionStatus, setConnectionStatus] = useState<{
|
||||
tested: boolean;
|
||||
success?: boolean;
|
||||
message?: string;
|
||||
}>({ tested: false });
|
||||
|
||||
const [envStatus] = useState(() => checkSupabaseEnvironment());
|
||||
const [tablesStatus, setTablesStatus] = useState<{
|
||||
checked: boolean;
|
||||
exists?: boolean;
|
||||
tables?: string[];
|
||||
}>({ checked: false });
|
||||
|
||||
const runConnectionTest = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const result = await testSupabaseConnection();
|
||||
setConnectionStatus({
|
||||
tested: true,
|
||||
success: result.success,
|
||||
message: result.message
|
||||
});
|
||||
|
||||
// 연결 성공 시 테이블도 확인
|
||||
if (result.success) {
|
||||
const tablesResult = await checkSupabaseTables();
|
||||
setTablesStatus({
|
||||
checked: true,
|
||||
exists: tablesResult.exists,
|
||||
tables: tablesResult.tables
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
setConnectionStatus({
|
||||
tested: true,
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : '알 수 없는 오류'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full max-w-md mx-auto">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Database className="h-5 w-5" />
|
||||
Supabase 연결 테스트
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
백엔드 서비스 연결 상태를 확인합니다
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{/* 환경 변수 설정이 잘못된 경우 경고 표시 */}
|
||||
{!envStatus.valid && (
|
||||
<Alert variant="destructive" className="mb-4">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
<p className="font-medium">환경 변수 설정이 필요합니다</p>
|
||||
<p className="text-xs mt-1">.env 파일을 업데이트하여 Supabase URL과 API 키를 설정해주세요.</p>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{/* 환경 변수 상태 */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">환경 변수 설정</span>
|
||||
<Badge
|
||||
variant={envStatus.valid ? "outline" : "destructive"}
|
||||
className={envStatus.valid ? "bg-green-50 text-green-700" : ""}
|
||||
>
|
||||
{envStatus.valid ? (
|
||||
<CircleCheck className="h-3 w-3 mr-1" />
|
||||
) : (
|
||||
<CircleAlert className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{envStatus.valid ? '설정됨' : '오류'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{!envStatus.valid && (
|
||||
<p className="text-xs text-red-500">{envStatus.message}</p>
|
||||
)}
|
||||
|
||||
{/* 연결 테스트 */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">서버 연결 상태</span>
|
||||
{connectionStatus.tested ? (
|
||||
<Badge
|
||||
variant={connectionStatus.success ? "outline" : "destructive"}
|
||||
className={connectionStatus.success ? "bg-green-50 text-green-700" : ""}
|
||||
>
|
||||
{connectionStatus.success ? (
|
||||
<CircleCheck className="h-3 w-3 mr-1" />
|
||||
) : (
|
||||
<CircleAlert className="h-3 w-3 mr-1" />
|
||||
)}
|
||||
{connectionStatus.success ? '연결됨' : '연결 실패'}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">테스트 필요</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{connectionStatus.tested && (
|
||||
<p className="text-xs text-gray-500">{connectionStatus.message}</p>
|
||||
)}
|
||||
|
||||
{/* 테이블 확인 */}
|
||||
{tablesStatus.checked && (
|
||||
<>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">테이블 구조</span>
|
||||
<Badge
|
||||
variant={tablesStatus.exists ? "outline" : "secondary"}
|
||||
className={tablesStatus.exists ? "bg-green-50 text-green-700" : ""}
|
||||
>
|
||||
{tablesStatus.exists ? '완료' : '미설정'}
|
||||
</Badge>
|
||||
</div>
|
||||
{tablesStatus.tables && tablesStatus.tables.length > 0 && (
|
||||
<div className="text-xs text-gray-500">
|
||||
<p>확인된 테이블:</p>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{tablesStatus.tables.map(table => (
|
||||
<Badge key={table} variant="secondary" className="text-xs">
|
||||
{table}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={runConnectionTest}
|
||||
disabled={loading || !envStatus.valid}
|
||||
className="w-full mt-4"
|
||||
>
|
||||
{loading && <RefreshCw className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{loading ? '테스트 중...' : '연결 테스트 실행'}
|
||||
</Button>
|
||||
|
||||
{!envStatus.valid && (
|
||||
<p className="text-xs text-center text-muted-foreground mt-2">
|
||||
테스트를 실행하기 전에 먼저 .env 파일을 업데이트해주세요.
|
||||
</p>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupabaseTestPanel;
|
||||
Reference in New Issue
Block a user