Investigate Supabase API key issue

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

.env

@@ -1,3 +1,3 @@
 
-VITE_SUPABASE_URL=https://xguihxuzqibwxjnimxev.supabase.co
-VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhndWloeHV6cWlid3hqbmlteGV2Iiwicm9sZSI6ImFub24iLCJpYXQiOjE2NzUwOTQ4MzUsImV4cCI6MTk5MDY3MDgzNX0.0PMlOxtKL4O9GGZuAP_Xl4f-Tut1qOnW4bNEmAtoB8w
+VITE_SUPABASE_URL=your_supabase_url_here
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here

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>
   );

src/utils/supabaseTest.ts

@@ -2,11 +2,49 @@
 import { supabase } from '@/lib/supabase';
 import { toast } from '@/components/ui/use-toast';
 
+/**
+ * Supabase 환경 설정 확인
+ * 환경 변수가 올바르게 설정되었는지 확인합니다.
+ */
+export const checkSupabaseEnvironment = (): { valid: boolean; message: string } => {
+  const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+  const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+  
+  if (!supabaseUrl || !supabaseAnonKey) {
+    return { 
+      valid: false, 
+      message: '환경 변수가 설정되지 않았습니다.' 
+    };
+  }
+  
+  if (supabaseUrl.includes('your_supabase_url_here') || 
+      supabaseAnonKey.includes('your_supabase_anon_key_here')) {
+    return { 
+      valid: false, 
+      message: '환경 변수가 아직 실제 값으로 설정되지 않았습니다. .env 파일을 업데이트해주세요.' 
+    };
+  }
+  
+  return { 
+    valid: true, 
+    message: '환경 변수가 올바르게 설정되었습니다.' 
+  };
+};
+
 /**
  * Supabase 연결 테스트
  * 현재 Supabase 연결 상태를 확인합니다.
  */
 export const testSupabaseConnection = async (): Promise<{ success: boolean; message: string }> => {
+  // 먼저 환경 설정 확인
+  const envCheck = checkSupabaseEnvironment();
+  if (!envCheck.valid) {
+    return {
+      success: false,
+      message: `환경 설정 오류: ${envCheck.message}`
+    };
+  }
+  
   try {
     // 서버에 핑 보내기
     const { data, error } = await supabase.from('_ping').select('*').limit(1);
@@ -68,6 +106,12 @@ export const runSupabaseConnectionTest = async () => {
  * 지정된 테이블이 존재하는지 확인합니다.
  */
 export const checkSupabaseTables = async (): Promise<{ exists: boolean; tables: string[] }> => {
+  // 먼저 환경 설정 확인
+  const envCheck = checkSupabaseEnvironment();
+  if (!envCheck.valid) {
+    return { exists: false, tables: [] };
+  }
+  
   try {
     // 현재 스키마의 테이블 목록 가져오기
     const { data, error } = await supabase
@@ -95,32 +139,3 @@ export const checkSupabaseTables = async (): Promise<{ exists: boolean; tables:
     return { exists: false, tables: [] };
   }
 };
-
-/**
- * Supabase 환경 설정 확인
- * 환경 변수가 올바르게 설정되었는지 확인합니다.
- */
-export const checkSupabaseEnvironment = (): { valid: boolean; message: string } => {
-  const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-  const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-  
-  if (!supabaseUrl || !supabaseAnonKey) {
-    return { 
-      valid: false, 
-      message: '환경 변수가 설정되지 않았습니다.' 
-    };
-  }
-  
-  if (supabaseUrl.includes('YOUR_SUPABASE_URL') || 
-      supabaseAnonKey.includes('YOUR_SUPABASE_ANON_KEY')) {
-    return { 
-      valid: false, 
-      message: '환경 변수가 기본값으로 설정되어 있습니다.' 
-    };
-  }
-  
-  return { 
-    valid: true, 
-    message: '환경 변수가 올바르게 설정되었습니다.' 
-  };
-};