Fix import error in App.tsx

Corrected the import path for SupabaseSettings in App.tsx to resolve a module resolution error.

src/components/auth/ServerStatusAlert.tsx

@@ -0,0 +1,41 @@
+
+import React from 'react';
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface ServerStatusAlertProps {
+  serverStatus: {
+    checked: boolean;
+    connected: boolean;
+    message: string;
+  };
+  checkServerConnection: () => Promise<void>;
+}
+
+const ServerStatusAlert = ({ serverStatus, checkServerConnection }: ServerStatusAlertProps) => {
+  if (!serverStatus.checked || serverStatus.connected) {
+    return null;
+  }
+
+  return (
+    <Alert variant="destructive" className="mb-6">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>서버 연결 문제</AlertTitle>
+      <AlertDescription className="flex flex-col">
+        <span>{serverStatus.message}</span>
+        <Button 
+          variant="outline" 
+          size="sm" 
+          className="mt-2 self-start flex items-center gap-1"
+          onClick={checkServerConnection}
+        >
+          <RefreshCw className="h-3 w-3" />
+          <span>다시 시도</span>
+        </Button>
+      </AlertDescription>
+    </Alert>
+  );
+};
+
+export default ServerStatusAlert;

src/components/auth/SupabaseConnectionStatus.tsx

@@ -0,0 +1,42 @@
+
+import React from 'react';
+import { CheckCircle, XCircle } from 'lucide-react';
+
+interface SupabaseConnectionStatusProps {
+  testResults: {
+    connected: boolean;
+    message: string;
+    details?: string;
+  } | null;
+}
+
+const SupabaseConnectionStatus = ({ testResults }: SupabaseConnectionStatusProps) => {
+  if (!testResults) return null;
+
+  return (
+    <div className={`mt-2 p-3 rounded-md text-sm ${testResults.connected ? 'bg-green-50' : 'bg-red-50'}`}>
+      <div className="flex items-start">
+        {testResults.connected ? (
+          <CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
+        ) : (
+          <XCircle className="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" />
+        )}
+        <div>
+          <p className={`font-medium ${testResults.connected ? 'text-green-800' : 'text-red-800'}`}>
+            {testResults.connected ? '연결됨' : '연결 실패'}
+          </p>
+          <p className={testResults.connected ? 'text-green-700' : 'text-red-700'}>
+            {testResults.message}
+          </p>
+          {testResults.details && (
+            <p className="text-gray-500 mt-1 text-xs">
+              {testResults.details}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SupabaseConnectionStatus;

src/components/auth/TestConnectionSection.tsx

@@ -0,0 +1,68 @@
+
+import React, { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { verifySupabaseConnection } from "@/utils/auth/networkUtils";
+import { toast } from "@/hooks/useToast.wrapper";
+
+interface TestConnectionSectionProps {
+  setLoginError: (error: string | null) => void;
+  setTestResults: (results: any) => void;
+}
+
+const TestConnectionSection = ({ setLoginError, setTestResults }: TestConnectionSectionProps) => {
+  const [isTesting, setIsTesting] = useState(false);
+
+  const testConnection = async () => {
+    setLoginError(null);
+    setIsTesting(true);
+    
+    try {
+      const results = await verifySupabaseConnection();
+      setTestResults(results);
+      
+      if (results.connected) {
+        toast({
+          title: "연결 성공",
+          description: "Supabase 서버에 성공적으로 연결되었습니다.",
+        });
+      } else {
+        toast({
+          title: "연결 실패",
+          description: results.message,
+          variant: "destructive"
+        });
+      }
+    } catch (error: any) {
+      setTestResults({
+        connected: false,
+        message: error.message || '알 수 없는 오류'
+      });
+      
+      toast({
+        title: "테스트 오류",
+        description: error.message || '알 수 없는 오류',
+        variant: "destructive"
+      });
+    } finally {
+      setIsTesting(false);
+    }
+  };
+
+  return (
+    <div className="mt-8 border-t pt-6">
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="text-sm font-medium text-gray-700">연결 테스트</h3>
+        <Button 
+          variant="outline"
+          size="sm"
+          onClick={testConnection}
+          disabled={isTesting}
+        >
+          {isTesting ? '테스트 중...' : 'Supabase 연결 테스트'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TestConnectionSection;

src/components/auth/types.ts

@@ -0,0 +1,20 @@
+
+export interface ServerConnectionStatus {
+  checked: boolean;
+  connected: boolean;
+  message: string;
+  details?: string;
+}
+
+export interface RegisterFormProps {
+  signUp: (email: string, password: string, username: string) => Promise<{ error: any, user: any }>;
+  serverStatus: ServerConnectionStatus;
+  setServerStatus: React.Dispatch<React.SetStateAction<ServerConnectionStatus>>;
+  setRegisterError: (error: string | null) => void;
+}
+
+export interface TestConnectionResults {
+  connected: boolean;
+  message: string;
+  details?: string;
+}