612 lines
23 KiB
TypeScript
612 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
const imgRiCheckboxCircleLine = "http://localhost:3845/assets/e4c498605e2559d2764a3112ae9a9019e6ad798e.svg";
|
|
const imgFormkitRadio = "http://localhost:3845/assets/ea30a9a80d95ced4bfb1174d3a8475a4a1dbbabb.svg";
|
|
const imgAkarIconsRadio = "http://localhost:3845/assets/d772bd292f6dfddfcbd42cc1f22aa796ed671b11.svg";
|
|
const imgLsiconDownFilled = "http://localhost:3845/assets/1c65a7143b6e9a0eee4b0878c33198a22da091cf.svg";
|
|
|
|
export default function RegisterPage() {
|
|
const router = useRouter();
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
password: '',
|
|
passwordConfirm: '',
|
|
gender: 'male',
|
|
birthYear: '',
|
|
birthMonth: '',
|
|
birthDay: '',
|
|
});
|
|
|
|
const [agreements, setAgreements] = useState({
|
|
all: false,
|
|
age14: false,
|
|
terms: false,
|
|
privacy: false,
|
|
});
|
|
|
|
const [errors, setErrors] = useState({
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
password: '',
|
|
passwordConfirm: '',
|
|
});
|
|
|
|
const [verificationCode, setVerificationCode] = useState('');
|
|
const [isVerificationSent, setIsVerificationSent] = useState(false);
|
|
const [isVerificationComplete, setIsVerificationComplete] = useState(false);
|
|
const [verificationError, setVerificationError] = useState('');
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target;
|
|
const prevValue = formData[name as keyof typeof formData];
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
if (errors[name as keyof typeof errors]) {
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
[name]: '',
|
|
}));
|
|
}
|
|
// 이메일이 실제로 변경되었을 때만 인증 상태 초기화
|
|
if (name === 'email' && prevValue !== value && isVerificationSent) {
|
|
setIsVerificationSent(false);
|
|
setVerificationCode('');
|
|
setIsVerificationComplete(false);
|
|
}
|
|
};
|
|
|
|
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let value = e.target.value.replace(/[^\d]/g, '');
|
|
if (value.length > 11) value = value.slice(0, 11);
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
phone: value,
|
|
}));
|
|
if (errors.phone) {
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
phone: '',
|
|
}));
|
|
}
|
|
};
|
|
|
|
const handleAgreementChange = (key: keyof typeof agreements) => {
|
|
if (key === 'all') {
|
|
const newValue = !agreements.all;
|
|
setAgreements({
|
|
all: newValue,
|
|
age14: newValue,
|
|
terms: newValue,
|
|
privacy: newValue,
|
|
});
|
|
} else {
|
|
const newAgreements = {
|
|
...agreements,
|
|
[key]: !agreements[key],
|
|
};
|
|
setAgreements({
|
|
...newAgreements,
|
|
all: newAgreements.age14 && newAgreements.terms && newAgreements.privacy,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleGenderChange = (gender: 'male' | 'female') => {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
gender,
|
|
}));
|
|
};
|
|
|
|
const validateEmail = (email: string) => {
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
return emailRegex.test(email);
|
|
};
|
|
|
|
const validatePassword = (password: string) => {
|
|
return password.length >= 8 && password.length <= 16 && /[a-zA-Z]/.test(password) && /[0-9]/.test(password);
|
|
};
|
|
|
|
const validatePhone = (phone: string) => {
|
|
if (phone === '') return true;
|
|
const phoneRegex = /^010\d{8}$/;
|
|
return phoneRegex.test(phone.replace(/[^\d]/g, ''));
|
|
};
|
|
|
|
const handleSendVerificationCode = () => {
|
|
if (!formData.email || !validateEmail(formData.email)) {
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
email: '올바른 이메일을 입력해주세요.',
|
|
}));
|
|
return;
|
|
}
|
|
// TODO: 인증번호 전송 API 호출
|
|
setIsVerificationSent(true);
|
|
setVerificationCode('');
|
|
setIsVerificationComplete(false);
|
|
setVerificationError('');
|
|
};
|
|
|
|
const handleVerificationCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setVerificationCode(e.target.value);
|
|
// 인증번호 입력 시 에러 초기화
|
|
if (verificationError) {
|
|
setVerificationError('');
|
|
}
|
|
};
|
|
|
|
const handleVerifyCode = () => {
|
|
if (!verificationCode.trim()) {
|
|
return;
|
|
}
|
|
// TODO: 인증번호 확인 API 호출
|
|
// API 연동 전까지 맞는 인증번호는 123456
|
|
if (verificationCode.trim() === '123456') {
|
|
setIsVerificationComplete(true);
|
|
setVerificationError('');
|
|
} else {
|
|
// 인증번호가 틀렸을 때 에러 메시지 표시
|
|
setVerificationError('인증번호가 잘못되었습니다.');
|
|
}
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors = {
|
|
name: '',
|
|
phone: '',
|
|
email: '',
|
|
password: '',
|
|
passwordConfirm: '',
|
|
};
|
|
|
|
let isValid = true;
|
|
|
|
if (formData.name.trim() === '') {
|
|
newErrors.name = '이름을 입력해주세요.';
|
|
isValid = false;
|
|
}
|
|
|
|
if (formData.phone && !validatePhone(formData.phone)) {
|
|
newErrors.phone = '올바른 전화번호 형식이 아닙니다.';
|
|
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~16자의 영문/숫자를 포함해야 합니다.';
|
|
isValid = false;
|
|
}
|
|
|
|
if (formData.passwordConfirm === '') {
|
|
newErrors.passwordConfirm = '비밀번호 확인을 입력해주세요.';
|
|
isValid = false;
|
|
} else if (formData.password !== formData.passwordConfirm) {
|
|
newErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.';
|
|
isValid = false;
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return isValid;
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!agreements.age14 || !agreements.terms || !agreements.privacy) {
|
|
alert('필수 약관에 동의해주세요.');
|
|
return;
|
|
}
|
|
if (validateForm()) {
|
|
router.push('/registercomplete');
|
|
}
|
|
};
|
|
|
|
const canProceed =
|
|
formData.name.trim() !== '' &&
|
|
formData.email.trim() !== '' &&
|
|
formData.password !== '' &&
|
|
formData.passwordConfirm !== '' &&
|
|
agreements.age14 &&
|
|
agreements.terms &&
|
|
agreements.privacy;
|
|
|
|
return (
|
|
<div className="relative min-h-screen flex flex-col items-center bg-white pb-[100px]">
|
|
{/* 제목 */}
|
|
<h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[100px]">
|
|
회원가입
|
|
</h1>
|
|
|
|
{/* 회원정보 입력 폼 */}
|
|
<form
|
|
className="w-[829px] border border-[#b9b9b9] rounded-[8px] mt-[56px] px-[31px] py-[29px]"
|
|
autoComplete="off"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<div className="flex flex-col gap-[20px]">
|
|
{/* 이름 */}
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
이름
|
|
</span>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.name ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="이름을 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{errors.name && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 휴대폰 */}
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
휴대폰
|
|
</span>
|
|
<input
|
|
type="text"
|
|
name="phone"
|
|
value={formData.phone}
|
|
onChange={handlePhoneChange}
|
|
maxLength={11}
|
|
className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.phone ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="-없이 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{errors.phone && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.phone}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 이메일(아이디) + 인증번호 발송 */}
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
이메일(아이디)
|
|
</span>
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
className={`h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[401px] ${errors.email ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="이메일을 입력해 주세요."
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleSendVerificationCode}
|
|
className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca]"
|
|
>
|
|
{isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
|
|
</button>
|
|
</div>
|
|
{errors.email && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 인증번호 입력 폼 */}
|
|
{isVerificationSent && (
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={verificationCode}
|
|
onChange={handleVerificationCodeChange}
|
|
className="h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#1669ca] text-[#515151] bg-white w-[401px]"
|
|
placeholder="인증번호를 입력해 주세요."
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={handleVerifyCode}
|
|
disabled={!verificationCode.trim() || isVerificationComplete}
|
|
className={`rounded-[10px] h-[43px] w-[158px] text-[18px] font-medium transition flex items-center justify-center
|
|
${verificationCode.trim() && !isVerificationComplete
|
|
? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
|
|
: 'bg-[#b9b9b9] text-white cursor-not-allowed'
|
|
}`}
|
|
>
|
|
인증번호 확인
|
|
</button>
|
|
</div>
|
|
{verificationError && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{verificationError}</p>
|
|
)}
|
|
{!isVerificationComplete && !verificationError && (
|
|
<div className="flex items-center ml-[193px] mt-[16px]">
|
|
<p className="text-[#1669ca] text-[12px] font-medium leading-[14px] max-w-[575px]">
|
|
인증 확인을 위해 작성한 이메일로 인증번호를 발송했어요.<br />이메일을 확인해 주세요.
|
|
</p>
|
|
</div>
|
|
)}
|
|
{isVerificationComplete && (
|
|
<div className="flex items-center ml-[193px] mt-[16px]">
|
|
<p className="text-[#1669ca] text-[12px] font-medium">
|
|
이메일 인증을 완료했어요.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 비밀번호 */}
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
비밀번호
|
|
</span>
|
|
<input
|
|
type="password"
|
|
name="password"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.password ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="8~16자의 영문/숫자/특수문자를 조합해서 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{errors.password && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 비밀번호 확인 */}
|
|
<div className="flex flex-col">
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
비밀번호 확인
|
|
</span>
|
|
<input
|
|
type="password"
|
|
name="passwordConfirm"
|
|
value={formData.passwordConfirm}
|
|
onChange={handleChange}
|
|
className={`flex-1 h-[41px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white ${errors.passwordConfirm ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="비밀번호를 다시 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{errors.passwordConfirm && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{errors.passwordConfirm}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 성별 */}
|
|
<div className="flex gap-[16px] items-center h-[24px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
성별
|
|
</span>
|
|
<div className="flex gap-[14px] items-center">
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-[10px]"
|
|
onClick={() => handleGenderChange('male')}
|
|
>
|
|
<img
|
|
src={formData.gender === 'male' ? imgFormkitRadio : imgAkarIconsRadio}
|
|
alt=""
|
|
className="w-[24px] h-[24px]"
|
|
/>
|
|
<span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
|
|
남성
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="flex items-center gap-[10px]"
|
|
onClick={() => handleGenderChange('female')}
|
|
>
|
|
<img
|
|
src={formData.gender === 'female' ? imgFormkitRadio : imgAkarIconsRadio}
|
|
alt=""
|
|
className="w-[24px] h-[24px]"
|
|
/>
|
|
<span className="text-[#515151] text-[14px] font-medium leading-[1.6]">
|
|
여성
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 생년월일 */}
|
|
<div className="flex gap-[16px] items-center h-[41px]">
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
|
생년월일
|
|
</span>
|
|
<div className="flex gap-[8px] flex-1">
|
|
<div className="relative flex-1">
|
|
<select
|
|
name="birthYear"
|
|
value={formData.birthYear}
|
|
onChange={handleChange}
|
|
className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
|
|
>
|
|
<option value="" className="text-[#b9b9b9]">년도</option>
|
|
{[...Array(100)].map((_, idx) => {
|
|
const year = new Date().getFullYear() - idx;
|
|
return <option key={year} value={year}>{year}</option>
|
|
})}
|
|
</select>
|
|
<img
|
|
src={imgLsiconDownFilled}
|
|
alt=""
|
|
className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
|
|
/>
|
|
</div>
|
|
<div className="relative flex-1">
|
|
<select
|
|
name="birthMonth"
|
|
value={formData.birthMonth}
|
|
onChange={handleChange}
|
|
className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
|
|
>
|
|
<option value="" className="text-[#b9b9b9]">월</option>
|
|
{[...Array(12)].map((_, idx) => (
|
|
<option key={idx + 1} value={idx + 1}>{idx + 1}</option>
|
|
))}
|
|
</select>
|
|
<img
|
|
src={imgLsiconDownFilled}
|
|
alt=""
|
|
className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
|
|
/>
|
|
</div>
|
|
<div className="relative flex-1">
|
|
<select
|
|
name="birthDay"
|
|
value={formData.birthDay}
|
|
onChange={handleChange}
|
|
className="w-full h-[41px] px-[10px] text-[18px] font-medium border border-[#b9b9b9] rounded-[8px] bg-white text-[#515151] appearance-none pr-[30px]"
|
|
>
|
|
<option value="" className="text-[#b9b9b9]">일</option>
|
|
{[...Array(31)].map((_, idx) => (
|
|
<option key={idx + 1} value={idx + 1}>{idx + 1}</option>
|
|
))}
|
|
</select>
|
|
<img
|
|
src={imgLsiconDownFilled}
|
|
alt=""
|
|
className="absolute right-[10px] top-1/2 -translate-y-1/2 w-[16px] h-[16px] pointer-events-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{/* 약관 동의 */}
|
|
<div className="mt-[46px] w-[829px] border border-[#b9b9b9] rounded-[8px] h-[221px] relative">
|
|
<div className="px-[31px] py-[29px]">
|
|
{/* 전체동의 */}
|
|
<div
|
|
className="flex items-center gap-[16px] cursor-pointer select-none mb-[17px]"
|
|
onClick={() => handleAgreementChange('all')}
|
|
>
|
|
<img
|
|
src={imgRiCheckboxCircleLine}
|
|
alt=""
|
|
className={`w-[24px] h-[24px] ${agreements.all ? 'opacity-100' : 'opacity-50'}`}
|
|
/>
|
|
<span className="font-bold text-[20px] text-[#515151]">
|
|
모든 항목에 동의합니다.
|
|
</span>
|
|
</div>
|
|
|
|
{/* 개별 동의들 */}
|
|
<div className="flex flex-col gap-[17px]">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('age14')}>
|
|
<img
|
|
src={imgRiCheckboxCircleLine}
|
|
alt=""
|
|
className={`w-[24px] h-[24px] ${agreements.age14 ? 'opacity-100' : 'opacity-50'}`}
|
|
/>
|
|
<span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
|
|
만 14세 이상입니다. (필수)
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
|
|
>
|
|
전체
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('terms')}>
|
|
<img
|
|
src={imgRiCheckboxCircleLine}
|
|
alt=""
|
|
className={`w-[24px] h-[24px] ${agreements.terms ? 'opacity-100' : 'opacity-50'}`}
|
|
/>
|
|
<span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
|
|
이용 약관 동의 (필수)
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
|
|
>
|
|
전체
|
|
</button>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-[16px] cursor-pointer" onClick={() => handleAgreementChange('privacy')}>
|
|
<img
|
|
src={imgRiCheckboxCircleLine}
|
|
alt=""
|
|
className={`w-[24px] h-[24px] ${agreements.privacy ? 'opacity-100' : 'opacity-50'}`}
|
|
/>
|
|
<span className="text-[#515151] text-[16px] font-medium leading-[1.6]">
|
|
개인정보 수집 및 이용 동의 (필수)
|
|
</span>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="border border-[#eeeeee] rounded-[10px] px-[10px] py-[10px] h-[27px] flex items-center justify-center text-[#1669ca] text-[12px] font-medium"
|
|
>
|
|
전체
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 버튼 영역 */}
|
|
<div className="mt-[52px] mb-[137px] w-[829px] flex gap-[21px] justify-center">
|
|
<Link
|
|
href="/registeragreement"
|
|
className="border border-[#1669ca] bg-white rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-[#515151] text-[18px] hover:bg-[#EDF4FC] transition"
|
|
>
|
|
돌아가기
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
disabled={!canProceed}
|
|
className={`rounded-[10px] h-[55px] w-[334px] font-medium text-[18px] transition flex items-center justify-center
|
|
${canProceed
|
|
? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
|
|
: 'bg-[#b9b9b9] text-white cursor-not-allowed'
|
|
}`}
|
|
>
|
|
회원가입 완료
|
|
</button>
|
|
</div>
|
|
|
|
{/* 카피라이트 */}
|
|
<footer className="absolute bottom-[78px] left-1/2 -translate-x-1/2 flex flex-col items-center">
|
|
<p className="text-[16px] text-[rgba(0,0,0,0.55)] leading-[1.45] font-medium tracking-[-0.08px]">
|
|
Copyright ⓒ 2025 XL LMS. All rights reserved
|
|
</p>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|