254 lines
12 KiB
TypeScript
254 lines
12 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export default function PasswordFindPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [email, setEmail] = useState('');
|
||
|
|
const [newPassword, setNewPassword] = useState('');
|
||
|
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||
|
|
const [emailError, setEmailError] = useState('');
|
||
|
|
const [newPasswordError, setNewPasswordError] = useState('');
|
||
|
|
const [confirmPasswordError, setConfirmPasswordError] = useState('');
|
||
|
|
const [isCodeSent, setIsCodeSent] = useState(false);
|
||
|
|
|
||
|
|
const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const value = e.target.value;
|
||
|
|
setEmail(value);
|
||
|
|
if (emailError) {
|
||
|
|
setEmailError('');
|
||
|
|
}
|
||
|
|
// 이메일이 변경되면 인증 상태 초기화
|
||
|
|
if (isCodeSent) {
|
||
|
|
setIsCodeSent(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleNewPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const value = e.target.value;
|
||
|
|
setNewPassword(value);
|
||
|
|
if (newPasswordError) {
|
||
|
|
setNewPasswordError('');
|
||
|
|
}
|
||
|
|
// 새 비밀번호가 변경되면 확인 비밀번호도 다시 검증
|
||
|
|
if (confirmPassword && value !== confirmPassword) {
|
||
|
|
setConfirmPasswordError('비밀번호와 일치하지 않아요.');
|
||
|
|
} else if (confirmPassword && value === confirmPassword) {
|
||
|
|
setConfirmPasswordError('');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleConfirmPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const value = e.target.value;
|
||
|
|
setConfirmPassword(value);
|
||
|
|
if (confirmPasswordError) {
|
||
|
|
setConfirmPasswordError('');
|
||
|
|
}
|
||
|
|
// 비밀번호 확인 실시간 검증
|
||
|
|
if (value && newPassword && value !== newPassword) {
|
||
|
|
setConfirmPasswordError('비밀번호와 일치하지 않아요.');
|
||
|
|
} else if (value && newPassword && value === newPassword) {
|
||
|
|
setConfirmPasswordError('');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
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 handleSendCode = () => {
|
||
|
|
if (!email.trim()) {
|
||
|
|
setEmailError('이메일을 입력해 주세요.');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!validateEmail(email)) {
|
||
|
|
setEmailError('올바른 이메일을 입력해주세요.');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// TODO: 인증번호 발송 API 호출
|
||
|
|
setIsCodeSent(true);
|
||
|
|
setEmailError('');
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setEmailError('');
|
||
|
|
setNewPasswordError('');
|
||
|
|
setConfirmPasswordError('');
|
||
|
|
|
||
|
|
let isValid = true;
|
||
|
|
|
||
|
|
if (!email.trim()) {
|
||
|
|
setEmailError('이메일을 입력해 주세요.');
|
||
|
|
isValid = false;
|
||
|
|
} else if (!validateEmail(email)) {
|
||
|
|
setEmailError('올바른 이메일을 입력해주세요.');
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!isCodeSent) {
|
||
|
|
setEmailError('인증번호를 발송해주세요.');
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!newPassword.trim()) {
|
||
|
|
setNewPasswordError('새 비밀번호를 입력해 주세요.');
|
||
|
|
isValid = false;
|
||
|
|
} else if (!validatePassword(newPassword)) {
|
||
|
|
setNewPasswordError('비밀번호는 8~16자의 영문/숫자를 포함해야 합니다.');
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!confirmPassword.trim()) {
|
||
|
|
setConfirmPasswordError('새 비밀번호 확인을 입력해 주세요.');
|
||
|
|
isValid = false;
|
||
|
|
} else if (newPassword !== confirmPassword) {
|
||
|
|
setConfirmPasswordError('비밀번호와 일치하지 않아요.');
|
||
|
|
isValid = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (isValid) {
|
||
|
|
// TODO: 비밀번호 재설정 API 호출
|
||
|
|
router.push('/login');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const canSubmit = email.trim() !== '' &&
|
||
|
|
newPassword.trim() !== '' &&
|
||
|
|
confirmPassword.trim() !== '' &&
|
||
|
|
isCodeSent &&
|
||
|
|
newPassword === confirmPassword &&
|
||
|
|
validatePassword(newPassword);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative flex flex-col min-h-screen bg-white">
|
||
|
|
{/* 메인 콘텐츠 영역 - 카피라이트와 브라우저 최상단 사이의 중앙 */}
|
||
|
|
<div className="flex-1 flex flex-col items-center justify-center pb-[100px]">
|
||
|
|
{/* 제목 */}
|
||
|
|
<h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight">
|
||
|
|
비밀번호 재설정
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* 안내 문구 */}
|
||
|
|
<p className="text-[#515151] text-[18px] font-medium leading-normal mt-[40px]">
|
||
|
|
비밀번호 재설정을 위해 아래 정보를 입력해 주세요.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{/* 입력 폼 */}
|
||
|
|
<form
|
||
|
|
className="w-[829px] border border-[#b9b9b9] rounded-[8px] mt-[40px] px-[31px] py-[29px]"
|
||
|
|
onSubmit={handleSubmit}
|
||
|
|
>
|
||
|
|
<div className="flex flex-col gap-[20px]">
|
||
|
|
{/* 이메일(아이디) + 인증번호 발송 */}
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div className="flex gap-[10px] items-center justify-between h-[42px]">
|
||
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
||
|
|
이메일(아이디)
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="email"
|
||
|
|
value={email}
|
||
|
|
onChange={handleEmailChange}
|
||
|
|
className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white w-[401px] focus:border-[#1669CA] focus:outline-none ${emailError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
|
||
|
|
placeholder="이메일을 입력해 주세요."
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={handleSendCode}
|
||
|
|
className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[43px] w-[158px] transition hover:bg-[#1669ca] flex items-center justify-center"
|
||
|
|
>
|
||
|
|
인증번호 발송
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{emailError && (
|
||
|
|
<p className="text-[13px] text-[#E85D5D] ml-[187px] mt-[16px]">{emailError}</p>
|
||
|
|
)}
|
||
|
|
{isCodeSent && !emailError && (
|
||
|
|
<p className="text-[#1669ca] text-[12px] font-medium ml-[187px] mt-[16px]">
|
||
|
|
인증번호가 발송되었습니다. 이메일을 확인해 주세요.
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 새 비밀번호 */}
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div className="flex gap-[16px] items-center h-[42px]">
|
||
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
||
|
|
새 비밀번호
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
value={newPassword}
|
||
|
|
onChange={handleNewPasswordChange}
|
||
|
|
className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white focus:border-[#1669CA] focus:outline-none ${newPasswordError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
|
||
|
|
placeholder="새 비밀번호를 입력해 주세요."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{newPasswordError && (
|
||
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{newPasswordError}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 새 비밀번호 확인 */}
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<div className="flex gap-[16px] items-center h-[42px]">
|
||
|
|
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
|
||
|
|
새 비밀번호 확인
|
||
|
|
</span>
|
||
|
|
<input
|
||
|
|
type="password"
|
||
|
|
value={confirmPassword}
|
||
|
|
onChange={handleConfirmPasswordChange}
|
||
|
|
className={`flex-1 h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border placeholder:text-[#b9b9b9] bg-white focus:border-[#1669CA] focus:outline-none ${confirmPasswordError ? 'border-[#E85D5D] text-[#E85D5D]' : 'border-[#b9b9b9] text-[#515151]'}`}
|
||
|
|
placeholder="새 비밀번호를 다시 입력해 주세요."
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{confirmPasswordError && (
|
||
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{confirmPasswordError}</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
{/* 버튼 영역 */}
|
||
|
|
<div className="mt-[54px] flex gap-[21px]">
|
||
|
|
<Link
|
||
|
|
href="/login"
|
||
|
|
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={!canSubmit}
|
||
|
|
className={`rounded-[10px] h-[55px] w-[334px] font-medium text-[18px] transition flex items-center justify-center
|
||
|
|
${canSubmit
|
||
|
|
? 'bg-[#2B82E8] text-white hover:bg-[#1669ca]'
|
||
|
|
: 'bg-[#b9b9b9] text-white cursor-not-allowed'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
비밀번호 재설정
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 카피라이트 */}
|
||
|
|
<footer className="absolute bottom-[51.5px] 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>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|