관리자 페이지 교육과정 등록, 비밀번호 재설정 생성
This commit is contained in:
wallace
253
app/pwfind/page.tsx
Normal file
253
app/pwfind/page.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user