diff --git a/app/idfind/page.tsx b/app/idfind/page.tsx new file mode 100644 index 0000000..219e377 --- /dev/null +++ b/app/idfind/page.tsx @@ -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) => { + let value = e.target.value; + setName(value); + if (nameError) { + setNameError(''); + } + }; + + const handlePhoneChange = (e: React.ChangeEvent) => { + 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 ( +
+ {/* 제목 */} +

+ 아이디 찾기 +

+ {/* 입력 폼 */} +
+

+ 가입 시 등록한 회원정보를 입력해 주세요. +

+ +
+ {/* 이름 */} +
+
+ + 이름 + + +
+ {nameError && ( +

{nameError}

+ )} +
+ + {/* 휴대폰 */} +
+
+ + 휴대폰 + + +
+ {phoneError && ( +

{phoneError}

+ )} +
+
+
+ + {/* 다음 버튼 */} +
+ +
+ + {/* 카피라이트 */} +
+

+ Copyright ⓒ 2025 XL LMS. All rights reserved +

+
+
+ ); +} + diff --git a/app/login/page.tsx b/app/login/page.tsx index 5ff4151..f8f797f 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -206,9 +206,12 @@ export default function LoginPage() { height={12} className="h-3" /> - + @@ -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="-없이 입력해 주세요." /> @@ -290,7 +290,7 @@ export default function RegisterPage() { {/* 이메일(아이디) + 인증번호 발송 */}
-
+
이메일(아이디) @@ -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="이메일을 입력해 주세요." /> @@ -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="인증번호를 입력해 주세요." />
@@ -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="비밀번호를 다시 입력해 주세요." />
@@ -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]" > {[...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]" > {[...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]" > {[...Array(31)].map((_, idx) => ( @@ -561,7 +561,7 @@ export default function RegisterPage() { {/* 버튼 영역 */}
돌아가기 diff --git a/public/svg/chevron_small.tsx b/public/svg/chevron_small.tsx new file mode 100644 index 0000000..0e6540d --- /dev/null +++ b/public/svg/chevron_small.tsx @@ -0,0 +1,7 @@ +export default function ChevronSmall() { + return ( + + + + ); +}