351 lines
13 KiB
TypeScript
351 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import Link from 'next/link';
|
|
import { createClient } from '@/lib/supabase/client';
|
|
import { Suspense } from 'react';
|
|
|
|
// next 파라미터가 안전한 내부 경로(`/`로 시작, `//`·`/\` 프로토콜-상대 아님)일 때만 허용.
|
|
function safeNext(raw: string | null): string {
|
|
if (!raw) return '/mypage';
|
|
if (!raw.startsWith('/') || raw.startsWith('//') || raw.startsWith('/\\')) return '/mypage';
|
|
return raw;
|
|
}
|
|
|
|
function LoginForm() {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [isSignUp, setIsSignUp] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [message, setMessage] = useState('');
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const supabase = createClient();
|
|
const next = safeNext(searchParams.get('next'));
|
|
|
|
useEffect(() => {
|
|
if (searchParams.get('error')) {
|
|
setMessage('인증 중 오류가 발생했습니다. 다시 시도해주세요.');
|
|
}
|
|
// 이미 로그인된 경우 리다이렉트
|
|
supabase.auth.getUser().then(({ data }) => {
|
|
if (data.user) router.push(next);
|
|
});
|
|
}, []);
|
|
|
|
const handleAuth = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setMessage('');
|
|
|
|
if (isSignUp) {
|
|
const { data, error } = await supabase.auth.signUp({
|
|
email,
|
|
password,
|
|
options: {
|
|
emailRedirectTo: `${window.location.origin}/auth/callback`,
|
|
},
|
|
});
|
|
if (error) {
|
|
setMessage('회원가입 실패: ' + error.message);
|
|
} else if (data.user?.identities?.length === 0) {
|
|
setMessage('이미 가입된 이메일입니다. 로그인해주세요.');
|
|
setIsSignUp(false);
|
|
} else {
|
|
setMessage('가입 완료! 이메일 인증 링크를 확인해주세요.');
|
|
}
|
|
} else {
|
|
const { error } = await supabase.auth.signInWithPassword({ email, password });
|
|
if (error) {
|
|
setMessage('로그인 실패: 이메일 또는 비밀번호를 확인해주세요.');
|
|
} else {
|
|
router.push(next);
|
|
router.refresh();
|
|
}
|
|
}
|
|
setLoading(false);
|
|
};
|
|
|
|
const handleGoogleLogin = async () => {
|
|
// dev 환경에서는 NEXT_PUBLIC_SITE_URL을 무시하고 현재 브라우저 origin 사용
|
|
// (NEXT_PUBLIC_SITE_URL이 .env.local에 있어도 localhost로 콜백 돌아옴)
|
|
const base =
|
|
process.env.NODE_ENV === 'development'
|
|
? window.location.origin
|
|
: (process.env.NEXT_PUBLIC_SITE_URL ?? window.location.origin);
|
|
// next는 /auth/callback에서 read해 로그인 후 목적지로 리다이렉트 (기본 /mypage)
|
|
const callbackUrl = `${base}/auth/callback?next=${encodeURIComponent(next)}`;
|
|
const { error } = await supabase.auth.signInWithOAuth({
|
|
provider: 'google',
|
|
options: { redirectTo: callbackUrl },
|
|
});
|
|
if (error) setMessage('Google 로그인 오류: ' + error.message);
|
|
};
|
|
|
|
const isSuccess =
|
|
message.includes('완료') || message.includes('확인해주세요');
|
|
|
|
return (
|
|
<div
|
|
className="min-h-screen flex items-center justify-center px-4 py-12"
|
|
style={{ background: 'var(--jsm-bg)' }}
|
|
>
|
|
<div className="w-full max-w-sm">
|
|
{/* 워드마크 */}
|
|
<div className="text-center mb-8">
|
|
<Link
|
|
href="/"
|
|
className="inline-block"
|
|
style={{
|
|
fontWeight: 800,
|
|
fontSize: '1.375rem',
|
|
letterSpacing: '-0.03em',
|
|
color: 'var(--jsm-ink)',
|
|
transition: 'color 0.15s',
|
|
}}
|
|
>
|
|
쟁승메이드
|
|
</Link>
|
|
<p
|
|
className="mt-2 text-sm break-keep"
|
|
style={{ color: 'var(--jsm-ink-soft)', letterSpacing: '-0.01em' }}
|
|
>
|
|
{isSignUp
|
|
? '가입 후 의뢰 현황과 구매 내역을 관리하세요'
|
|
: '로그인하고 의뢰 현황과 구매 내역을 확인하세요'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* 카드 */}
|
|
<div
|
|
className="rounded-xl p-8"
|
|
style={{
|
|
background: 'var(--jsm-surface)',
|
|
border: '1px solid var(--jsm-line)',
|
|
boxShadow: '0 1px 4px 0 rgba(15,23,42,0.06), 0 4px 16px 0 rgba(15,23,42,0.04)',
|
|
}}
|
|
>
|
|
{/* 카드 헤더 */}
|
|
<h1
|
|
className="text-xl font-bold mb-6 text-center"
|
|
style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.02em' }}
|
|
>
|
|
{isSignUp ? '회원가입' : '로그인'}
|
|
</h1>
|
|
|
|
{/* Google 로그인 */}
|
|
<button
|
|
type="button"
|
|
onClick={handleGoogleLogin}
|
|
className="w-full flex items-center justify-center gap-2.5 px-4 py-2.5 rounded-lg text-sm font-medium mb-5"
|
|
style={{
|
|
background: 'var(--jsm-surface)',
|
|
border: '1px solid var(--jsm-line)',
|
|
color: 'var(--jsm-ink)',
|
|
transition: 'background 0.15s, border-color 0.15s',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.background = 'var(--jsm-surface-alt)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.background = 'var(--jsm-surface)';
|
|
}}
|
|
>
|
|
{/* Google G 로고 */}
|
|
<svg className="w-4 h-4 shrink-0" viewBox="0 0 24 24" aria-hidden>
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
|
</svg>
|
|
Google로 계속하기
|
|
</button>
|
|
|
|
{/* 구분선 */}
|
|
<div className="relative mb-5">
|
|
<div
|
|
className="absolute inset-0 flex items-center"
|
|
aria-hidden
|
|
>
|
|
<div className="w-full" style={{ borderTop: '1px solid var(--jsm-line)' }} />
|
|
</div>
|
|
<div className="relative flex justify-center">
|
|
<span
|
|
className="px-3 text-xs"
|
|
style={{ background: 'var(--jsm-surface)', color: 'var(--jsm-ink-faint)' }}
|
|
>
|
|
또는
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 오류/성공 메시지 */}
|
|
{message && (
|
|
<div
|
|
className="mb-4 px-3.5 py-3 rounded-lg text-sm"
|
|
style={{
|
|
background: isSuccess ? '#f0fdf4' : '#fef2f2',
|
|
border: `1px solid ${isSuccess ? '#bbf7d0' : '#fecaca'}`,
|
|
color: isSuccess ? '#15803d' : '#dc2626',
|
|
}}
|
|
>
|
|
{message}
|
|
</div>
|
|
)}
|
|
|
|
{/* 이메일/비밀번호 폼 */}
|
|
<form onSubmit={handleAuth} className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="login-email"
|
|
className="block text-sm font-medium mb-1.5"
|
|
style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.01em' }}
|
|
>
|
|
이메일
|
|
</label>
|
|
<input
|
|
id="login-email"
|
|
type="email"
|
|
placeholder="name@example.com"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
|
|
style={{
|
|
background: 'var(--jsm-surface)',
|
|
border: '1px solid var(--jsm-line)',
|
|
color: 'var(--jsm-ink)',
|
|
transition: 'border-color 0.15s',
|
|
}}
|
|
onFocus={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--jsm-accent)';
|
|
}}
|
|
onBlur={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--jsm-line)';
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
htmlFor="login-password"
|
|
className="block text-sm font-medium mb-1.5"
|
|
style={{ color: 'var(--jsm-ink)', letterSpacing: '-0.01em' }}
|
|
>
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
id="login-password"
|
|
type="password"
|
|
placeholder="6자 이상 입력해주세요"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
minLength={6}
|
|
className="w-full px-3.5 py-2.5 rounded-lg text-sm outline-none focus-visible:ring-2 focus-visible:ring-[var(--jsm-accent)]"
|
|
style={{
|
|
background: 'var(--jsm-surface)',
|
|
border: '1px solid var(--jsm-line)',
|
|
color: 'var(--jsm-ink)',
|
|
transition: 'border-color 0.15s',
|
|
}}
|
|
onFocus={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--jsm-accent)';
|
|
}}
|
|
onBlur={(e) => {
|
|
e.currentTarget.style.borderColor = 'var(--jsm-line)';
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full py-2.5 rounded-lg text-sm font-semibold mt-1"
|
|
style={{
|
|
background: loading ? 'var(--jsm-ink-faint)' : 'var(--jsm-accent)',
|
|
color: loading ? '#ffffff' : '#ffffff',
|
|
border: 'none',
|
|
cursor: loading ? 'not-allowed' : 'pointer',
|
|
transition: 'background 0.15s, transform 0.15s',
|
|
letterSpacing: '-0.01em',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
if (!loading) (e.currentTarget as HTMLButtonElement).style.background = 'var(--jsm-accent-hover)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
if (!loading) (e.currentTarget as HTMLButtonElement).style.background = 'var(--jsm-accent)';
|
|
}}
|
|
>
|
|
{loading ? '처리 중...' : isSignUp ? '가입하기' : '로그인'}
|
|
</button>
|
|
</form>
|
|
|
|
{/* 가입/로그인 전환 */}
|
|
<div className="mt-5 text-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => { setIsSignUp(!isSignUp); setMessage(''); }}
|
|
className="text-sm"
|
|
style={{
|
|
color: 'var(--jsm-accent)',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
letterSpacing: '-0.01em',
|
|
transition: 'color 0.15s',
|
|
}}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.color = 'var(--jsm-accent-hover)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLButtonElement).style.color = 'var(--jsm-accent)';
|
|
}}
|
|
>
|
|
{isSignUp
|
|
? '이미 계정이 있으신가요? 로그인'
|
|
: '계정이 없으신가요? 회원가입'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 홈으로 */}
|
|
<div className="text-center mt-6">
|
|
<Link
|
|
href="/"
|
|
className="text-sm"
|
|
style={{ color: 'var(--jsm-ink-faint)', transition: 'color 0.15s', letterSpacing: '-0.01em' }}
|
|
onMouseEnter={(e) => {
|
|
(e.currentTarget as HTMLAnchorElement).style.color = 'var(--jsm-ink-soft)';
|
|
}}
|
|
onMouseLeave={(e) => {
|
|
(e.currentTarget as HTMLAnchorElement).style.color = 'var(--jsm-ink-faint)';
|
|
}}
|
|
>
|
|
홈으로 돌아가기
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div
|
|
className="min-h-screen flex items-center justify-center"
|
|
style={{ background: 'var(--jsm-bg)' }}
|
|
>
|
|
<div
|
|
className="w-6 h-6 rounded-full border-2 border-t-transparent animate-spin"
|
|
style={{ borderColor: 'var(--jsm-line)', borderTopColor: 'var(--jsm-accent)' }}
|
|
/>
|
|
</div>
|
|
}>
|
|
<LoginForm />
|
|
</Suspense>
|
|
);
|
|
}
|