Investigate Supabase connection issues

Investigate REST API and database connection failures despite successful authentication.

src/components/supabase/SupabaseConnectionTest.tsx

@@ -1,9 +1,10 @@
 
 import React, { useState } from 'react';
 import { Button } from "@/components/ui/button";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw, Info } from "lucide-react";
 import { toast } from "@/hooks/useToast.wrapper";
 import { testSupabaseConnection } from '@/lib/supabase';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 
 interface TestResult {
   url: string;
@@ -14,11 +15,13 @@ interface TestResult {
   auth: boolean;
   database: boolean;
   errors: string[];
+  debugInfo?: any;
 }
 
 const SupabaseConnectionTest: React.FC = () => {
   const [testResults, setTestResults] = useState<TestResult | null>(null);
   const [isTesting, setIsTesting] = useState(false);
+  const [showDebug, setShowDebug] = useState(false);
   
   const runConnectionTest = async () => {
     setIsTesting(true);
@@ -107,6 +110,59 @@ const SupabaseConnectionTest: React.FC = () => {
               ))}
             </div>
           )}
+          
+          {/* 디버그 정보 섹션 추가 */}
+          {testResults.debugInfo && (
+            <Collapsible
+              open={showDebug}
+              onOpenChange={setShowDebug}
+              className="border border-gray-200 rounded-md mt-4"
+            >
+              <div className="flex items-center justify-between px-4 py-2 bg-gray-50">
+                <h4 className="text-sm font-medium">고급 진단 정보</h4>
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-7 w-7 p-0">
+                    <Info className="h-4 w-4" />
+                    <span className="sr-only">
+                      {showDebug ? '진단 정보 숨기기' : '진단 정보 표시'}
+                    </span>
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              
+              <CollapsibleContent className="px-4 py-2 text-xs">
+                <div className="space-y-2">
+                  <div>
+                    <span className="font-medium">Supabase URL:</span>
+                    <div className="mt-1 bg-gray-100 p-1 rounded break-all">
+                      {testResults.url}
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <span className="font-medium">클라이언트 초기화:</span>
+                    <div className="mt-1 text-green-600">
+                      {testResults.client ? '성공' : '실패'}
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <span className="font-medium">브라우저 정보:</span>
+                    <div className="mt-1 bg-gray-100 p-1 rounded break-all">
+                      {testResults.debugInfo.browserInfo}
+                    </div>
+                  </div>
+                  
+                  <div>
+                    <span className="font-medium">테스트 시간:</span>
+                    <div className="mt-1">
+                      {new Date(testResults.debugInfo.timestamp).toLocaleString()}
+                    </div>
+                  </div>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          )}
         </div>
       )}
     </div>

src/components/supabase/SupabaseHelpSection.tsx

@@ -1,5 +1,6 @@
 
 import React from 'react';
+import { AlertCircle } from 'lucide-react';
 
 const SupabaseHelpSection: React.FC = () => {
   return (
@@ -17,12 +18,35 @@ const SupabaseHelpSection: React.FC = () => {
           <strong>Anon Key</strong>: Supabase 대시보드의 API 설정에서 찾을 수 있는 anon/public 키를 입력합니다.
         </li>
         <li>
-          <strong>CORS 프록시</strong>: HTTP URL에 대한 브라우저 보안 제한을 우회하기 위해 사용합니다. HTTPS가 아닌 URL에 접근 문제가 있는 경우 활성화하세요.
+          <strong>CORS 프록시</strong>: HTTP URL에 대한 브라우저 보안 제한을 우회하기 위해 사용합니다. 
+          HTTPS가 아닌 URL에 접근 문제가 있는 경우 활성화하세요.
         </li>
         <li className="text-amber-500 font-medium">
           가능하면 HTTPS URL을 사용하는 것이 좋습니다. HTTP URL을 사용해야 하는 경우 CORS 프록시를 활성화하세요.
         </li>
       </ul>
+      
+      {/* 오류 해결 팁 추가 */}
+      <div className="mt-6 border-t pt-4">
+        <h3 className="flex items-center text-sm font-semibold mb-2">
+          <AlertCircle className="h-4 w-4 mr-1 text-amber-500" />
+          <span>연결 문제 해결 팁</span>
+        </h3>
+        <ul className="list-disc pl-5 text-xs text-gray-500 space-y-2">
+          <li>
+            <strong>REST API 오류</strong>: 서버의 CORS 설정을 확인해보세요. Supabase 서버에서 CORS 허용 설정이 필요할 수 있습니다.
+          </li>
+          <li>
+            <strong>인증 성공, API 실패</strong>: 이 경우는 일반적으로 CORS 문제를 의미합니다. CORS 프록시를 활성화하고 서버 설정도 확인해보세요.
+          </li>
+          <li>
+            <strong>데이터베이스 오류</strong>: Supabase 관리자 대시보드에서 해당 테이블이 존재하는지, 그리고 익명 접근 권한이 있는지 확인하세요.
+          </li>
+          <li>
+            <strong>HTTPS 필요</strong>: 로컬 개발 환경에서는 HTTP 접근이 가능하지만, 배포된 앱에서는 HTTPS Supabase URL이 필요할 수 있습니다.
+          </li>
+        </ul>
+      </div>
     </div>
   );
 };