135 lines
4.5 KiB
TypeScript
135 lines
4.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export default function IdFindPage() {
|
|
const router = useRouter();
|
|
const [name, setName] = useState('');
|
|
const [phone, setPhone] = useState('');
|
|
const [nameError, setNameError] = useState('');
|
|
const [phoneError, setPhoneError] = useState('');
|
|
|
|
const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let value = e.target.value;
|
|
setName(value);
|
|
if (nameError) {
|
|
setNameError('');
|
|
}
|
|
};
|
|
|
|
const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
let value = e.target.value.replace(/[^\d]/g, '');
|
|
if (value.length > 11) value = value.slice(0, 11);
|
|
setPhone(value);
|
|
if (phoneError) {
|
|
setPhoneError('');
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setNameError('');
|
|
setPhoneError('');
|
|
|
|
let isValid = true;
|
|
|
|
if (!name.trim()) {
|
|
setNameError('이름을 입력해주세요.');
|
|
isValid = false;
|
|
}
|
|
|
|
if (!phone.trim()) {
|
|
setPhoneError('휴대폰 번호를 입력해주세요.');
|
|
isValid = false;
|
|
} else if (phone.length !== 11) {
|
|
setPhoneError('올바른 휴대폰 번호를 입력해주세요.');
|
|
isValid = false;
|
|
}
|
|
|
|
if (isValid) {
|
|
// TODO: 아이디 찾기 API 호출
|
|
// 임시로 다음 단계로 이동
|
|
router.push('/idfind/result');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex flex-col items-center bg-white pb-[100px]">
|
|
{/* 제목 */}
|
|
<h1 className="font-bold text-[#1D1D1D] text-[32px] leading-tight mt-[292px]">
|
|
아이디 찾기
|
|
</h1>
|
|
{/* 입력 폼 */}
|
|
<form
|
|
className="w-[664px] border border-[#b9b9b9] rounded-[8px] mt-[40px] px-[88px] py-[48px]"
|
|
onSubmit={handleSubmit}
|
|
>
|
|
<p className="text-[#515151] text-[16px] font-medium leading-[1.6] text-center mb-[36px]">
|
|
가입 시 등록한 회원정보를 입력해 주세요.
|
|
</p>
|
|
|
|
<div className="flex flex-col gap-[20px]">
|
|
{/* 이름 */}
|
|
<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="text"
|
|
value={name}
|
|
onChange={handleNameChange}
|
|
className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${nameError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="이름을 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{nameError && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{nameError}</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="text"
|
|
value={phone}
|
|
onChange={handlePhoneChange}
|
|
maxLength={11}
|
|
className={`h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#b9b9b9] placeholder:text-[#b9b9b9] bg-white w-[313px] ${phoneError ? 'border-[#E85D5D] text-[#E85D5D]' : 'text-[#515151]'}`}
|
|
placeholder="숫자만 입력해 주세요."
|
|
/>
|
|
</div>
|
|
{phoneError && (
|
|
<p className="text-[13px] text-[#E85D5D] ml-[193px] mt-[16px]">{phoneError}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
{/* 다음 버튼 */}
|
|
<div className="mt-[54px] mb-[228px]">
|
|
<button
|
|
type="button"
|
|
onClick={handleSubmit}
|
|
className="bg-[#2B82E8] rounded-[10px] h-[55px] w-[334px] flex items-center justify-center font-medium text-white text-[18px] hover:bg-[#1669ca] transition"
|
|
>
|
|
다음
|
|
</button>
|
|
</div>
|
|
|
|
{/* 카피라이트 */}
|
|
<footer className="absolute bottom-[40px] 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>
|
|
);
|
|
}
|
|
|