Investigate Supabase API key issue

The prompt indicates a problem with the Supabase API key, so this commit investigates and addresses the issue.

src/components/SupabaseTestPanel.tsx

@@ -1,14 +1,15 @@
 
 import React, { useState } from 'react';
 import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
-import { CircleCheck, CircleAlert, RefreshCw, Database } from 'lucide-react';
+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);
@@ -62,8 +63,22 @@ const SupabaseTestPanel = () => {
           <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>
@@ -137,12 +152,18 @@ const SupabaseTestPanel = () => {
 
         <Button 
           onClick={runConnectionTest} 
-          disabled={loading} 
+          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>
   );