diff --git a/app/pwfind/page.tsx b/app/pwfind/page.tsx
new file mode 100644
index 0000000..50ce7c1
--- /dev/null
+++ b/app/pwfind/page.tsx
@@ -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
) => {
+ const value = e.target.value;
+ setEmail(value);
+ if (emailError) {
+ setEmailError('');
+ }
+ // 이메일이 변경되면 인증 상태 초기화
+ if (isCodeSent) {
+ setIsCodeSent(false);
+ }
+ };
+
+ const handleNewPasswordChange = (e: React.ChangeEvent) => {
+ 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) => {
+ 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 (
+
+ {/* 메인 콘텐츠 영역 - 카피라이트와 브라우저 최상단 사이의 중앙 */}
+
+ {/* 제목 */}
+
+ 비밀번호 재설정
+
+
+ {/* 안내 문구 */}
+
+ 비밀번호 재설정을 위해 아래 정보를 입력해 주세요.
+
+
+ {/* 입력 폼 */}
+
+
+ {/* 버튼 영역 */}
+
+
+ 돌아가기
+
+
+
+
+
+ {/* 카피라이트 */}
+
+
+