Skip to content

Commit

Permalink
feat: 회원가입 유효성 검사
Browse files Browse the repository at this point in the history 
feat: 회원가입 유효성 검사
  • Loading branch information
@jiminpark23
jiminpark23 authored Jun 8, 2024
2 parents 692f7ef + acc80db commit 87a6904
Showing 1 changed file with 94 additions and 11 deletions.
105 changes: 94 additions & 11 deletions src/pages/Auth/Signup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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 (
<Container>
<FormWrapper>
Expand All @@ -60,6 +115,7 @@ const Signup = () => {
<RightAlignedDiv>
<Input type="text" name="name" value={userData.name} onChange={handleChange} />
</RightAlignedDiv>
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
</StepWrapper>
)}
{step === 1 && (
Expand All @@ -68,14 +124,24 @@ const Signup = () => {
<RightAlignedDiv>
<Input type="text" name="phoneNum" value={userData.phoneNum} onChange={handleChange} />
</RightAlignedDiv>
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
</StepWrapper>
)}
{step === 2 && (
<StepWrapper>
<ChatBubble text="비밀번호를 알려주세요!" />
<RightAlignedDiv>
<Input type="password" name="accountInfo" value={userData.accountInfo} onChange={handleChange} />
<RightAlignedDiv tw="mb-10">
<Input type="password" name="accountInfo" value={userData.accountInfo} onChange={handleChange} disabled={showconfirmAccountInfo} />
</RightAlignedDiv>
{showconfirmAccountInfo && (
<div tw="flex flex-col">
<ChatBubble text="비밀번호를 한 번 더 알려주세요!" />
<RightAlignedDiv>
<Input type="password" name="confirmAccountInfo" value={userData.confirmAccountInfo} onChange={handleChange} />
</RightAlignedDiv>
</div>
)}
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
</StepWrapper>
)}
{step === 3 && (
Expand All @@ -84,25 +150,27 @@ const Signup = () => {
<RightAlignedDiv>
<Input type="date" name="birthDate" value={userData.birthDate} onChange={handleChange} width="100px" />
</RightAlignedDiv>
{errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
</StepWrapper>
)}
{step === 4 && (
<StepWrapper tw="justify-center mb-40">
<Label>어떤 서비스를 이용하고 싶으신가요?</Label>
<ButtonGroup>
<RoleWrapper>
<RoleButton role="아이" onClick={() => handleRoleChange("아이")}>
<RoleButton role="아이" onClick={() => handleRoleChange(2)}>
<img src={KidImage} alt="아이" />
</RoleButton>
아이
</RoleWrapper>
<RoleWrapper>
<RoleButton role="부모" onClick={() => handleRoleChange("부모")}>
<RoleButton role="부모" onClick={() => handleRoleChange(1)}>
<img src={ParentImage} alt="부모" />
</RoleButton>
부모
</RoleWrapper>
</ButtonGroup>
<ErrorWrapper>{errorMessage && <div tw="text-red-500 text-sm">{errorMessage}</div>}</ErrorWrapper>
</StepWrapper>
)}
{step === 5 && (
Expand Down Expand Up @@ -180,7 +248,6 @@ const ButtonWrapper = styled.div`
const ButtonGroup = tw.div`
flex
gap-9
justify-center
`;

Expand All @@ -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
`;

0 comments on commit 87a6904

Please sign in to comment.