Refactor Login component
Splits the Login component into smaller, more manageable parts and extracts related logic into hooks to improve code organization and readability.
This commit is contained in:
gpt-engineer-app[bot]
99
src/components/auth/LoginForm.tsx
Normal file
99
src/components/auth/LoginForm.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight, Mail, KeyRound, Eye, EyeOff } from "lucide-react";
|
||||
|
||||
interface LoginFormProps {
|
||||
email: string;
|
||||
setEmail: (email: string) => void;
|
||||
password: string;
|
||||
setPassword: (password: string) => void;
|
||||
showPassword: boolean;
|
||||
setShowPassword: (show: boolean) => void;
|
||||
isLoading: boolean;
|
||||
loginError: string | null;
|
||||
handleLogin: (e: React.FormEvent) => Promise<void>;
|
||||
}
|
||||
|
||||
const LoginForm: React.FC<LoginFormProps> = ({
|
||||
email,
|
||||
setEmail,
|
||||
password,
|
||||
setPassword,
|
||||
showPassword,
|
||||
setShowPassword,
|
||||
isLoading,
|
||||
loginError,
|
||||
handleLogin
|
||||
}) => {
|
||||
return (
|
||||
<div className="neuro-flat p-8 mb-6">
|
||||
<form onSubmit={handleLogin}>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-base">이메일</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="your@email.com"
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-base">비밀번호</Label>
|
||||
<div className="relative">
|
||||
<KeyRound className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 h-5 w-5" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="••••••••"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
className="pl-10 neuro-pressed"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"
|
||||
>
|
||||
{showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loginError && (
|
||||
<div className="p-3 bg-red-50 text-red-600 rounded-md text-sm">
|
||||
<p>{loginError}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-right">
|
||||
<Link to="/forgot-password" className="text-sm text-neuro-income hover:underline">
|
||||
비밀번호를 잊으셨나요?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full hover:bg-neuro-income/80 text-white py-6 h-auto bg-neuro-income"
|
||||
>
|
||||
{isLoading ? "로그인 중..." : "로그인"}
|
||||
{!isLoading && <ArrowRight className="ml-2 h-5 w-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginForm;
|
||||
74
src/components/auth/SupabaseConnectionStatus.tsx
Normal file
74
src/components/auth/SupabaseConnectionStatus.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowRight, Shield } from "lucide-react";
|
||||
|
||||
interface TestResultProps {
|
||||
testResults: {
|
||||
url?: string;
|
||||
usingProxy?: boolean;
|
||||
proxyUrl?: string;
|
||||
client?: boolean;
|
||||
restApi?: boolean;
|
||||
auth?: boolean;
|
||||
database?: boolean;
|
||||
errors: string[];
|
||||
} | null;
|
||||
}
|
||||
|
||||
const SupabaseConnectionStatus: React.FC<TestResultProps> = ({ testResults }) => {
|
||||
if (!testResults) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<details className="neuro-flat p-3 text-xs mb-4">
|
||||
<summary className="cursor-pointer text-gray-500 font-medium">고급 진단 정보</summary>
|
||||
<div className="mt-2 space-y-2">
|
||||
<div>
|
||||
<p className="font-medium">Supabase URL:</p>
|
||||
<p className="break-all bg-gray-100 p-1 rounded">{testResults?.url || '알 수 없음'}</p>
|
||||
</div>
|
||||
{testResults?.usingProxy && (
|
||||
<div>
|
||||
<p className="font-medium">CORS 프록시:</p>
|
||||
<div className="flex items-center gap-1">
|
||||
<Shield className="h-3 w-3 text-blue-500" />
|
||||
<p className="break-all text-blue-500">활성화됨 - {testResults.proxyUrl}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium">클라이언트 초기화:</p>
|
||||
<p>{testResults?.client ? '성공' : '실패'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">브라우저 정보:</p>
|
||||
<p className="break-all">{navigator.userAgent}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">앱 버전:</p>
|
||||
<p>1.0.0</p>
|
||||
</div>
|
||||
{testResults && (
|
||||
<div className="border-t pt-2 mt-2">
|
||||
<p>REST API: {testResults.restApi ? '✅' : '❌'}</p>
|
||||
<p>인증: {testResults.auth ? '✅' : '❌'}</p>
|
||||
<p>데이터베이스: {testResults.database ? '✅' : '❌'}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-right pt-1">
|
||||
<Link
|
||||
to="/supabase-settings"
|
||||
className="inline-flex items-center text-neuro-income hover:underline"
|
||||
>
|
||||
<span>Supabase 설정 변경</span>
|
||||
<ArrowRight className="h-3 w-3 ml-1" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupabaseConnectionStatus;
|
||||
78
src/components/auth/TestConnectionSection.tsx
Normal file
78
src/components/auth/TestConnectionSection.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { testSupabaseConnection } from "@/lib/supabase";
|
||||
import { useToast } from "@/hooks/useToast.wrapper";
|
||||
|
||||
interface TestConnectionSectionProps {
|
||||
setLoginError: (error: string | null) => void;
|
||||
setTestResults: (results: any) => void;
|
||||
}
|
||||
|
||||
const TestConnectionSection: React.FC<TestConnectionSectionProps> = ({
|
||||
setLoginError,
|
||||
setTestResults
|
||||
}) => {
|
||||
const [testLoading, setTestLoading] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
const runConnectionTest = async () => {
|
||||
setTestLoading(true);
|
||||
setLoginError(null);
|
||||
try {
|
||||
const results = await testSupabaseConnection();
|
||||
setTestResults(results);
|
||||
|
||||
if (results.errors.length === 0) {
|
||||
toast({
|
||||
title: "연결 테스트 성공",
|
||||
description: "Supabase 서버 연결이 정상입니다.",
|
||||
});
|
||||
} else {
|
||||
toast({
|
||||
title: "연결 테스트 실패",
|
||||
description: `오류 발생: ${results.errors[0]}`,
|
||||
variant: "destructive"
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("연결 테스트 중 오류:", error);
|
||||
setLoginError(error.message || "테스트 실행 중 예상치 못한 오류가 발생했습니다.");
|
||||
|
||||
toast({
|
||||
title: "연결 테스트 오류",
|
||||
description: "테스트 실행 중 예상치 못한 오류가 발생했습니다.",
|
||||
variant: "destructive"
|
||||
});
|
||||
} finally {
|
||||
setTestLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="neuro-card p-4 mb-6">
|
||||
<h3 className="text-sm font-medium mb-2">Supabase 연결 진단</h3>
|
||||
<div className="flex justify-between items-center">
|
||||
<button
|
||||
onClick={runConnectionTest}
|
||||
disabled={testLoading}
|
||||
className="text-xs flex items-center text-neuro-income hover:underline"
|
||||
>
|
||||
{testLoading ? (
|
||||
<>
|
||||
<RefreshCw className="mr-1 h-3 w-3 animate-spin" />
|
||||
테스트 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<RefreshCw className="mr-1 h-3 w-3" />
|
||||
연결 테스트 실행
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TestConnectionSection;
|
||||
Reference in New Issue
Block a user