From 9be57a56b408c1f9f39f5acc1f69d6a188c7c280 Mon Sep 17 00:00:00 2001 From: wallace Date: Sat, 8 Nov 2025 13:55:27 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9D=B8=EC=A6=9D=EB=B2=88=ED=98=B8=20?= =?UTF-8?q?=EB=B0=9C=EC=86=A1=20=EB=B0=8F=20=ED=99=95=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/register/page.tsx | 266 ++++++++++++++++++++++++++++-------------- 1 file changed, 180 insertions(+), 86 deletions(-) diff --git a/app/register/page.tsx b/app/register/page.tsx index 8d21b87..4499afe 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -38,8 +38,14 @@ export default function RegisterPage() { passwordConfirm: '', }); + const [verificationCode, setVerificationCode] = useState(''); + const [isVerificationSent, setIsVerificationSent] = useState(false); + const [isVerificationComplete, setIsVerificationComplete] = useState(false); + const [verificationError, setVerificationError] = useState(''); + const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; + const prevValue = formData[name as keyof typeof formData]; setFormData((prev) => ({ ...prev, [name]: value, @@ -50,6 +56,12 @@ export default function RegisterPage() { [name]: '', })); } + // 이메일이 실제로 변경되었을 때만 인증 상태 초기화 + if (name === 'email' && prevValue !== value && isVerificationSent) { + setIsVerificationSent(false); + setVerificationCode(''); + setIsVerificationComplete(false); + } }; const handlePhoneChange = (e: React.ChangeEvent) => { @@ -119,7 +131,33 @@ export default function RegisterPage() { return; } // TODO: 인증번호 전송 API 호출 - alert('인증번호가 전송되었습니다.'); + setIsVerificationSent(true); + setVerificationCode(''); + setIsVerificationComplete(false); + setVerificationError(''); + }; + + const handleVerificationCodeChange = (e: React.ChangeEvent) => { + setVerificationCode(e.target.value); + // 인증번호 입력 시 에러 초기화 + if (verificationError) { + setVerificationError(''); + } + }; + + const handleVerifyCode = () => { + if (!verificationCode.trim()) { + return; + } + // TODO: 인증번호 확인 API 호출 + // API 연동 전까지 맞는 인증번호는 123456 + if (verificationCode.trim() === '123456') { + setIsVerificationComplete(true); + setVerificationError(''); + } else { + // 인증번호가 틀렸을 때 에러 메시지 표시 + setVerificationError('인증번호가 잘못되었습니다.'); + } }; const validateForm = () => { @@ -206,102 +244,158 @@ export default function RegisterPage() { >
{/* 이름 */} -
- - 이름 - - +
+
+ + 이름 + + +
+ {errors.name && ( +

{errors.name}

+ )}
- {errors.name && ( -

{errors.name}

- )} {/* 휴대폰 */} -
- - 휴대폰 - - +
+
+ + 휴대폰 + + +
+ {errors.phone && ( +

{errors.phone}

+ )}
- {errors.phone && ( -

{errors.phone}

- )} {/* 이메일(아이디) + 인증번호 발송 */} -
- - 이메일(아이디) - - - +
+
+ + 이메일(아이디) + + + +
+ {errors.email && ( +

{errors.email}

+ )}
- {errors.email && ( -

{errors.email}

+ + {/* 인증번호 입력 폼 */} + {isVerificationSent && ( +
+
+ + + + +
+ {verificationError && ( +

{verificationError}

+ )} + {!isVerificationComplete && !verificationError && ( +
+

+ 인증 확인을 위해 작성한 이메일로 인증번호를 발송했어요.
이메일을 확인해 주세요. +

+
+ )} + {isVerificationComplete && ( +
+

+ 이메일 인증을 완료했어요. +

+
+ )} +
)} {/* 비밀번호 */} -
- - 비밀번호 - - +
+
+ + 비밀번호 + + +
+ {errors.password && ( +

{errors.password}

+ )}
- {errors.password && ( -

{errors.password}

- )} {/* 비밀번호 확인 */} -
- - 비밀번호 확인 - - +
+
+ + 비밀번호 확인 + + +
+ {errors.passwordConfirm && ( +

{errors.passwordConfirm}

+ )}
- {errors.passwordConfirm && ( -

{errors.passwordConfirm}

- )} {/* 성별 */}
@@ -485,12 +579,12 @@ export default function RegisterPage() {
{/* 버튼 영역 */} -
+
- 돌아기기 + 돌아가기