wallace/XRLMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

아이디 찾기11

Browse Source
This commit is contained in:
wallace
2025-11-10 19:48:54 +09:00
parent 3d226a65f7
commit 6a9cd7c1e4
4 changed files with 158 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
app/idfind/page.tsx Normal file
View File

@@ -0,0 +1,134 @@
'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>
);
}

7
app/login/page.tsx
View File

@@ -206,9 +206,12 @@ export default function LoginPage() {
height={12}
className="h-3"
/>
<button className="text-sm text-gray-600 hover:text-gray-800">
<Link
href="/idfind"
className="text-sm text-gray-600 hover:text-gray-800"
>
아이디찾기
</button>
</Link>
<Image
src="/Divider.svg"
alt=""

24
app/register/page.tsx
View File

@@ -258,7 +258,7 @@ export default function RegisterPage() {
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]'}`}
className={`flex-1 h-[42px] 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>
@@ -279,7 +279,7 @@ export default function RegisterPage() {
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]'}`}
className={`flex-1 h-[42px] 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>
@@ -290,7 +290,7 @@ export default function RegisterPage() {
{/* 이메일(아이디) + 인증번호 발송 */}
<div className="flex flex-col">
<div className="flex gap-[16px] items-center h-[41px]">
<div className="flex gap-[16px] items-center h-[42px]">
<span className="text-[#515151] text-[18px] font-medium w-[177px]">
이메일(아이디)
</span>
@@ -299,13 +299,13 @@ export default function RegisterPage() {
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]'}`}
className={`h-[42px] 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]"
className="bg-[#2B82E8] rounded-[10px] px-[10px] text-[18px] font-medium text-white h-[42px] w-[158px] transition hover:bg-[#1669ca]"
>
{isVerificationSent ? '인증번호 재발송' : '인증번호 발송'}
</button>
@@ -325,7 +325,7 @@ export default function RegisterPage() {
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]"
className="h-[42px] px-[10px] text-[18px] font-medium rounded-[8px] border border-[#1669ca] text-[#515151] bg-white w-[401px]"
placeholder="인증번호를 입력해 주세요."
/>
<button
@@ -372,7 +372,7 @@ export default function RegisterPage() {
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]'}`}
className={`flex-1 h-[42px] 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>
@@ -392,7 +392,7 @@ export default function RegisterPage() {
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]'}`}
className={`flex-1 h-[42px] 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>
@@ -441,7 +441,7 @@ export default function RegisterPage() {
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]"
className="w-full h-[42px] 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) => {
@@ -460,7 +460,7 @@ export default function RegisterPage() {
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]"
className="w-full h-[42px] 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) => (
@@ -478,7 +478,7 @@ export default function RegisterPage() {
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]"
className="w-full h-[42px] 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) => (
@@ -561,7 +561,7 @@ export default function RegisterPage() {
{/* 버튼 영역 */}
<div className="mt-[52px] mb-[137px] w-[829px] flex gap-[21px] justify-center">
<Link
href="/registeragreement"
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"
>
돌아가기