317 lines
10 KiB
TypeScript
317 lines
10 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export default function RegisterPage() {
|
||
|
|
const [formData, setFormData] = useState({
|
||
|
|
name: '',
|
||
|
|
email: '',
|
||
|
|
password: '',
|
||
|
|
passwordConfirm: '',
|
||
|
|
phone: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
const [errors, setErrors] = useState({
|
||
|
|
name: '',
|
||
|
|
email: '',
|
||
|
|
password: '',
|
||
|
|
passwordConfirm: '',
|
||
|
|
phone: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
// 입력 필드 변경 핸들러
|
||
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const { name, value } = e.target;
|
||
|
|
setFormData((prev) => ({
|
||
|
|
...prev,
|
||
|
|
[name]: value,
|
||
|
|
}));
|
||
|
|
// 에러 초기화
|
||
|
|
if (errors[name as keyof typeof errors]) {
|
||
|
|
setErrors((prev) => ({
|
||
|
|
...prev,
|
||
|
|
[name]: '',
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 이메일 유효성 검사
|
||
|
|
const validateEmail = (email: string) => {
|
||
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
|
|
return emailRegex.test(email);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 비밀번호 유효성 검사 (최소 8자, 영문/숫자 조합)
|
||
|
|
const validatePassword = (password: string) => {
|
||
|
|
return password.length >= 8 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 전화번호 유효성 검사
|
||
|
|
const validatePhone = (phone: string) => {
|
||
|
|
if (phone === '') return true; // 선택 항목
|
||
|
|
const phoneRegex = /^010-\d{4}-\d{4}$/;
|
||
|
|
return phoneRegex.test(phone);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 폼 제출 전 유효성 검사
|
||
|
|
const validateForm = () => {
|
||
|
|
const newErrors = {
|
||
|
|
name: '',
|
||
|
|
email: '',
|
||
|
|
password: '',
|
||
|
|
passwordConfirm: '',
|
||
|
|
phone: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
let isValid = true;
|
||
|
|
|
||
|
|
// 이름 검사
|
||
|
|
if (formData.name.trim() === '') {
|
||
|
|
newErrors.name = '이름을 입력해주세요.';
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 이메일 검사
|
||
|
|
if (formData.email.trim() === '') {
|
||
|
|
newErrors.email = '이메일을 입력해주세요.';
|
||
|
|
isValid = false;
|
||
|
|
} else if (!validateEmail(formData.email)) {
|
||
|
|
newErrors.email = '올바른 이메일 형식이 아닙니다.';
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 비밀번호 검사
|
||
|
|
if (formData.password === '') {
|
||
|
|
newErrors.password = '비밀번호를 입력해주세요.';
|
||
|
|
isValid = false;
|
||
|
|
} else if (!validatePassword(formData.password)) {
|
||
|
|
newErrors.password = '비밀번호는 8자 이상, 영문과 숫자를 포함해야 합니다.';
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 비밀번호 확인 검사
|
||
|
|
if (formData.passwordConfirm === '') {
|
||
|
|
newErrors.passwordConfirm = '비밀번호 확인을 입력해주세요.';
|
||
|
|
isValid = false;
|
||
|
|
} else if (formData.password !== formData.passwordConfirm) {
|
||
|
|
newErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.';
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 전화번호 검사 (선택 항목)
|
||
|
|
if (formData.phone && !validatePhone(formData.phone)) {
|
||
|
|
newErrors.phone = '올바른 전화번호 형식이 아닙니다. (예: 010-1234-5678)';
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
setErrors(newErrors);
|
||
|
|
return isValid;
|
||
|
|
};
|
||
|
|
|
||
|
|
// 전화번호 자동 포맷팅
|
||
|
|
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
let value = e.target.value.replace(/[^\d]/g, '');
|
||
|
|
if (value.length > 11) value = value.slice(0, 11);
|
||
|
|
|
||
|
|
if (value.length > 7) {
|
||
|
|
value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7);
|
||
|
|
} else if (value.length > 3) {
|
||
|
|
value = value.slice(0, 3) + '-' + value.slice(3);
|
||
|
|
}
|
||
|
|
|
||
|
|
setFormData((prev) => ({
|
||
|
|
...prev,
|
||
|
|
phone: value,
|
||
|
|
}));
|
||
|
|
};
|
||
|
|
|
||
|
|
// 폼 제출 핸들러
|
||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
if (validateForm()) {
|
||
|
|
// 회원가입 완료 페이지로 이동
|
||
|
|
// 실제로는 API 호출을 하여 회원가입 처리를 해야 합니다
|
||
|
|
window.location.href = '/registercomplete';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 필수 항목 입력 여부 확인
|
||
|
|
const canProceed =
|
||
|
|
formData.name.trim() !== '' &&
|
||
|
|
formData.email.trim() !== '' &&
|
||
|
|
formData.password !== '' &&
|
||
|
|
formData.passwordConfirm !== '';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex items-center justify-center bg-white">
|
||
|
|
<div className="w-full max-w-2xl px-4">
|
||
|
|
{/* 회원가입 카드 */}
|
||
|
|
<div className="bg-white rounded-lg shadow-lg p-8">
|
||
|
|
{/* 제목 */}
|
||
|
|
<h1 className="text-2xl font-bold text-center mb-8">회원가입</h1>
|
||
|
|
|
||
|
|
{/* 단계 표시 */}
|
||
|
|
<div className="flex items-center justify-center mb-8 text-sm">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<span className="px-3 py-1 text-gray-500">01 약관 동의</span>
|
||
|
|
<span className="mx-2 text-gray-400">></span>
|
||
|
|
<span className="px-3 py-1 bg-blue-500 text-white rounded-md font-semibold">
|
||
|
|
02 회원정보입력
|
||
|
|
</span>
|
||
|
|
<span className="mx-2 text-gray-400">></span>
|
||
|
|
<span className="px-3 py-1 text-gray-500">03 회원가입완료</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 회원정보 입력 폼 */}
|
||
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||
|
|
{/* 이름 */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="name" className="block text-sm font-medium mb-1">
|
||
|
|
이름 <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="name"
|
||
|
|
name="name"
|
||
|
|
value={formData.name}
|
||
|
|
onChange={handleChange}
|
||
|
|
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
|
||
|
|
errors.name
|
||
|
|
? 'border-red-500 focus:ring-red-500'
|
||
|
|
: 'border-gray-300 focus:ring-blue-500'
|
||
|
|
}`}
|
||
|
|
placeholder="이름을 입력하세요"
|
||
|
|
/>
|
||
|
|
{errors.name && (
|
||
|
|
<p className="mt-1 text-sm text-red-500">{errors.name}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 이메일 */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="email" className="block text-sm font-medium mb-1">
|
||
|
|
이메일 <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
id="email"
|
||
|
|
name="email"
|
||
|
|
value={formData.email}
|
||
|
|
onChange={handleChange}
|
||
|
|
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
|
||
|
|
errors.email
|
||
|
|
? 'border-red-500 focus:ring-red-500'
|
||
|
|
: 'border-gray-300 focus:ring-blue-500'
|
||
|
|
}`}
|
||
|
|
placeholder="이메일을 입력하세요"
|
||
|
|
/>
|
||
|
|
{errors.email && (
|
||
|
|
<p className="mt-1 text-sm text-red-500">{errors.email}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 비밀번호 */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="password" className="block text-sm font-medium mb-1">
|
||
|
|
비밀번호 <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
id="password"
|
||
|
|
name="password"
|
||
|
|
value={formData.password}
|
||
|
|
onChange={handleChange}
|
||
|
|
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
|
||
|
|
errors.password
|
||
|
|
? 'border-red-500 focus:ring-red-500'
|
||
|
|
: 'border-gray-300 focus:ring-blue-500'
|
||
|
|
}`}
|
||
|
|
placeholder="8자 이상, 영문과 숫자 조합"
|
||
|
|
/>
|
||
|
|
{errors.password && (
|
||
|
|
<p className="mt-1 text-sm text-red-500">{errors.password}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 비밀번호 확인 */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="passwordConfirm" className="block text-sm font-medium mb-1">
|
||
|
|
비밀번호 확인 <span className="text-red-500">*</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
id="passwordConfirm"
|
||
|
|
name="passwordConfirm"
|
||
|
|
value={formData.passwordConfirm}
|
||
|
|
onChange={handleChange}
|
||
|
|
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
|
||
|
|
errors.passwordConfirm
|
||
|
|
? 'border-red-500 focus:ring-red-500'
|
||
|
|
: 'border-gray-300 focus:ring-blue-500'
|
||
|
|
}`}
|
||
|
|
placeholder="비밀번호를 다시 입력하세요"
|
||
|
|
/>
|
||
|
|
{errors.passwordConfirm && (
|
||
|
|
<p className="mt-1 text-sm text-red-500">{errors.passwordConfirm}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 전화번호 */}
|
||
|
|
<div>
|
||
|
|
<label htmlFor="phone" className="block text-sm font-medium mb-1">
|
||
|
|
전화번호 <span className="text-gray-500 text-xs">(선택)</span>
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="phone"
|
||
|
|
name="phone"
|
||
|
|
value={formData.phone}
|
||
|
|
onChange={handlePhoneChange}
|
||
|
|
className={`w-full px-4 py-2 border rounded-md focus:outline-none focus:ring-2 ${
|
||
|
|
errors.phone
|
||
|
|
? 'border-red-500 focus:ring-red-500'
|
||
|
|
: 'border-gray-300 focus:ring-blue-500'
|
||
|
|
}`}
|
||
|
|
placeholder="010-1234-5678"
|
||
|
|
maxLength={13}
|
||
|
|
/>
|
||
|
|
{errors.phone && (
|
||
|
|
<p className="mt-1 text-sm text-red-500">{errors.phone}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 버튼 영역 */}
|
||
|
|
<div className="mt-8 flex space-x-4">
|
||
|
|
<Link
|
||
|
|
href="/registeragreement"
|
||
|
|
className="flex-1 py-3 bg-gray-200 text-gray-700 rounded-md text-center hover:bg-gray-300 transition font-medium"
|
||
|
|
>
|
||
|
|
이전 단계
|
||
|
|
</Link>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
disabled={!canProceed}
|
||
|
|
className={`flex-1 py-3 rounded-md font-medium transition ${
|
||
|
|
canProceed
|
||
|
|
? 'bg-blue-500 text-white hover:bg-blue-600'
|
||
|
|
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
가입하기
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 카피라이트 */}
|
||
|
|
<div className="mt-8 text-center text-sm text-gray-500">
|
||
|
|
Copyright © 2025 XL LMS. All rights reserved
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|