diff --git a/src/pages/Auth/Signup.jsx b/src/pages/Auth/Signup.jsx index 30d5355..fcf7674 100644 --- a/src/pages/Auth/Signup.jsx +++ b/src/pages/Auth/Signup.jsx @@ -20,13 +20,28 @@ const Signup = () => { birthDate: "", role: "", }); + const [showconfirmAccountInfo, setShowconfirmAccountInfo] = useState(false); + const [errorMessage, setErrorMessage] = useState(""); + const navigate = useNavigate(); const handleChange = (e) => { + if (e.target.name === "confirmAccountInfo") { + setShowconfirmAccountInfo(true); + } + + // if (e.target.name === "birthDate") { + // const formattedValue = e.target.value.replaceAll("-", ""); + // setUserData({ + // ...userData, + // [e.target.name]: formattedValue, + // }); + // } else { setUserData({ ...userData, [e.target.name]: e.target.value, }); + // } }; const handleRoleChange = (role) => { @@ -37,20 +52,60 @@ const Signup = () => { }; const handleNext = () => { - setStep(step + 1); + let error = ""; + if (step === 0 && !isNameValid(userData.name)) { + error = "이름은 2~5글자 이내의 한글로 입력해주세요."; + } else if (step === 1 && !isPhoneNumValid(userData.phoneNum)) { + // TODO: 이미 존재하는 전화번호인지도 확인 + error = "전화번호는 010-XXXX-XXXX 형식으로 입력해주세요."; + } else if (step === 2) { + if (!isPasswordValid(userData.accountInfo)) { + error = "비밀번호는 6자리 숫자로 입력해주세요."; + } else if (showconfirmAccountInfo && userData.accountInfo !== userData.confirmAccountInfo) { + error = "비밀번호가 일치하지 않습니다."; + } + } else if (step === 3 && !isBirthDateValid(userData.birthDate)) { + error = "생년월일을 올바르게 입력해주세요."; + } + + if (error) { + setErrorMessage(error); + } else { + setErrorMessage(""); + if (step === 2 && !showconfirmAccountInfo) { + setShowconfirmAccountInfo(true); + } else { + setStep(step + 1); + } + } }; - const handleSubmit = (e) => { - e.preventDefault(); - console.log(userData); - // TODO: 폼 제출 로직 추가 - setStep(5); + const handleSubmit = () => { + let error = ""; + if (step === 4 && !userData.role) { + error = "역할을 선택해주세요."; + } + + if (error) { + if (step === 4 && !userData.role) { + setErrorMessage(error); + } + } else { + console.log(userData); + // TODO: 폼 제출 로직 추가 + setStep(5); + } }; const handleLoginRedirect = () => { navigate("/login"); }; + const isNameValid = (name) => /^[\uAC00-\uD7A3]{2,5}$/.test(name); // 2~5글자 이내의 한글 + const isPasswordValid = (password) => /^[0-9]{6}$/.test(password); // 6자리 숫자 + const isPhoneNumValid = (phoneNum) => /^010-\d{4}-\d{4}$/.test(phoneNum); // 010-0000-0000 형식 + const isBirthDateValid = (birthDate) => birthDate.replaceAll("-", "").length === 8; // YYYYMMDD 형식 + return ( @@ -60,6 +115,7 @@ const Signup = () => { + {errorMessage && {errorMessage}} )} {step === 1 && ( @@ -68,14 +124,24 @@ const Signup = () => { + {errorMessage && {errorMessage}} )} {step === 2 && ( - - + + + {showconfirmAccountInfo && ( +
+ + + + +
+ )} + {errorMessage && {errorMessage}}
)} {step === 3 && ( @@ -84,6 +150,7 @@ const Signup = () => { + {errorMessage && {errorMessage}} )} {step === 4 && ( @@ -91,18 +158,19 @@ const Signup = () => { - handleRoleChange("아이")}> + handleRoleChange(2)}> 아이 아이 - handleRoleChange("부모")}> + handleRoleChange(1)}> 부모 부모 + {errorMessage &&
{errorMessage}
}
)} {step === 5 && ( @@ -180,7 +248,6 @@ const ButtonWrapper = styled.div` const ButtonGroup = tw.div` flex gap-9 - justify-center `; @@ -207,3 +274,19 @@ const CompleteWrapper = tw.div` items-center justify-center `; + +const ErrorWrapper = tw.div` + flex + flex-col + items-center + mt-5 +`; + +const ErrorMessage = tw.div` + self-end + mb-10 + text-red-500 + text-sm + text-right + mt-2 +`;