Add supabase functionality test

This commit adds a test to verify that Supabase is functioning correctly.
2025-03-15 06:33:29 +00:00
parent c90fc7dfff
commit 38e2ebcd50
5 changed files with 376 additions and 82 deletions
--- a/src/components/SupabaseTestPanel.tsx
+++ b/src/components/SupabaseTestPanel.tsx
@@ -0,0 +1,151 @@
+
+import React, { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { CircleCheck, CircleAlert, RefreshCw, Database } from 'lucide-react';
+import { 
+  testSupabaseConnection, 
+  checkSupabaseEnvironment,
+  checkSupabaseTables
+} from '@/utils/supabaseTest';
+
+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>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {/* 환경 변수 상태 */}
+        <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} 
+          className="w-full mt-4"
+        >
+          {loading && <RefreshCw className="mr-2 h-4 w-4 animate-spin" />}
+          {loading ? '테스트 중...' : '연결 테스트 실행'}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default SupabaseTestPanel;