131 lines
4.2 KiB
TypeScript
131 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import { FormEvent, useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
|
|
// 회원가입 페이지 컴포넌트
|
|
// - 이메일/비밀번호를 입력받아 /api/auth/signup 으로 요청을 전송한다.
|
|
// - 성공 시 /projects 로 이동하고, 실패 시 에러 메시지를 보여준다.
|
|
|
|
export default function SignupPage() {
|
|
const router = useRouter();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
const checkAuth = async () => {
|
|
try {
|
|
const res = await fetch("/api/auth/me");
|
|
if (!cancelled && res.ok) {
|
|
router.push("/projects");
|
|
}
|
|
} catch {
|
|
// ignore
|
|
}
|
|
};
|
|
|
|
void checkAuth();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [router]);
|
|
|
|
const handleSubmit = async (e: FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
setError(null);
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await fetch("/api/auth/signup", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
if (!res.ok) {
|
|
try {
|
|
const data = await res.json();
|
|
setError(data?.message ?? "회원가입에 실패했습니다. 다시 시도해 주세요.");
|
|
} catch {
|
|
setError("회원가입에 실패했습니다. 다시 시도해 주세요.");
|
|
}
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
router.push("/projects");
|
|
} catch {
|
|
setError("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="min-h-screen flex items-center justify-center bg-slate-950 text-slate-50">
|
|
<div className="w-full max-w-sm rounded-lg border border-slate-800 bg-slate-900/70 p-6 shadow-xl">
|
|
<h1 className="text-lg font-semibold mb-1">회원가입</h1>
|
|
<p className="text-xs text-slate-400 mb-4">새 계정을 생성한 뒤 프로젝트를 저장하고 관리할 수 있습니다.</p>
|
|
|
|
{error && <p className="mb-3 text-xs text-red-300">{error}</p>}
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-3 text-xs">
|
|
<div className="space-y-1">
|
|
<label htmlFor="email" className="block text-slate-200">
|
|
이메일
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label htmlFor="password" className="block text-slate-200">
|
|
비밀번호
|
|
</label>
|
|
<input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="w-full rounded border border-slate-700 bg-slate-950 px-2 py-1 text-xs text-slate-50 focus:outline-none focus:ring-1 focus:ring-sky-500"
|
|
required
|
|
minLength={8}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="mt-2 w-full inline-flex items-center justify-center gap-1 rounded bg-sky-600 hover:bg-sky-500 disabled:opacity-40 disabled:cursor-not-allowed px-3 py-1 text-xs font-medium"
|
|
>
|
|
{loading ? "회원가입 중..." : "회원가입"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-4 text-[11px] text-slate-400">
|
|
이미 계정이 있다면
|
|
{" "}
|
|
<Link href="/login" className="text-sky-300 hover:text-sky-200 underline-offset-2 hover:underline">
|
|
로그인
|
|
</Link>
|
|
으로 이동해 주세요.
|
|
</p>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|