From 2abed05e4ff3c7830141b40f6d332b1f88f5fce4 Mon Sep 17 00:00:00 2001 From: choba Date: Wed, 12 Jul 2023 19:28:56 +0900 Subject: [PATCH] =?UTF-8?q?Upt.=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/auth/SetEmail.tsx | 43 ++++++++++++++--------------- src/pages/auth/SetNickname.tsx | 49 +++++++++++++++++----------------- src/pages/auth/SetPW.tsx | 32 ++++++++++++---------- src/pages/auth/VerifyCode.tsx | 2 +- 4 files changed, 66 insertions(+), 60 deletions(-) diff --git a/src/pages/auth/SetEmail.tsx b/src/pages/auth/SetEmail.tsx index 7b1bda6..70578f2 100644 --- a/src/pages/auth/SetEmail.tsx +++ b/src/pages/auth/SetEmail.tsx @@ -21,42 +21,43 @@ const SetEmail = (props: any) => { const onChangeHandler = (event: React.ChangeEvent) => { const value = event.target.value; setEmail(value); - setIsNextButtonDisabled(true); + setIsNextButtonDisabled(() => (true)); if (email === '') { - setDisableDuplicateChkBtn(true); + setDisableDuplicateChkBtn(() => (true)); setHelper(''); return true; } - const isMailValidPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email); + const isMailValidPattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value); if (isMailValidPattern) { setDisableDuplicateChkBtn(false); setHelper(''); } else { - setDisableDuplicateChkBtn(true); + setDisableDuplicateChkBtn(() => (true)); setHelper('올바른 이메일 형태가 아닙니다.'); - setIsHelperError(true); + setIsHelperError(() => (true)); } }; const duplicateCheckerHandler = async (event: any) => { - const response = await checkDuplicatedEmail(email); - if (response.status === 'SUCCESS') { - setHelper('사용 가능한 이메일입니다.'); - setIsHelperError(false); - setIsNextButtonDisabled(false); - setDisableDuplicateChkBtn(true); - setSignUpNextButtonProps({ - ...signUpNextButtonProps, - isDisabled: false, - }); - setSignUpData({...signUpData, email}); - - } else { - setHelper('이미 가입된 이메일입니다.'); - setIsHelperError(true); - } + await checkDuplicatedEmail(email).then((response) => { + if (response.status === 'SUCCESS') { + setHelper('사용 가능한 이메일입니다.'); + setIsHelperError(false); + setIsNextButtonDisabled(false); + setDisableDuplicateChkBtn(false); + setSignUpNextButtonProps({ + ...signUpNextButtonProps, + isDisabled: false, + }); + setSignUpData({...signUpData, email}); + } else { + setHelper('이미 가입된 이메일입니다.'); + setIsHelperError(() => (true)); + } + }); }; + const itemArray: InputItemType[] = [ { name: '이메일', diff --git a/src/pages/auth/SetNickname.tsx b/src/pages/auth/SetNickname.tsx index 214fe52..cd0aa31 100644 --- a/src/pages/auth/SetNickname.tsx +++ b/src/pages/auth/SetNickname.tsx @@ -25,28 +25,30 @@ const SetNickname = (props: any) => { const value = event.target.value; setNickname(value); - const reg = /^[a-zA-Z0-9]{2,15}$/; - if (!reg.test(nickname)) { + const reg = /^[a-zA-Z0-9_-]{2,15}$/g; + if (!reg.test(value)) { setHelper('영어, 숫자, _, - 를 사용한 2 ~ 15자리 이내로 입력해주세요.'); setIsHelperError(true); setIsNextButtonDisabled(true); return true; - } - - const response = await checkDuplicatedNickname(nickname); - if (response.status === 'SUCCESS') { - setHelper('사용 가능한 닉네임입니다.'); - setIsHelperError(false); - setIsNextButtonDisabled(false); - setSignUpData({...signUpData, nickname}); } else { - setHelper('이미 사용하고 있는 닉네임입니다.'); - setIsHelperError(true); + await checkDuplicatedNickname(value).then((response) => { + let isAvail = false; + if (response.status === 'SUCCESS') { + setHelper('사용 가능한 닉네임입니다.'); + setIsNextButtonDisabled(isAvail); + setSignUpData({...signUpData, nickname: value}); + } else { + isAvail = true; + setHelper('이미 사용하고 있는 닉네임입니다.'); + } + setIsHelperError(isAvail); + setSignUpNextButtonProps({ + ...signUpNextButtonProps, + isDisabled: isAvail, + }); + }); } - setSignUpNextButtonProps({ - ...signUpNextButtonProps, - isDisabled: isNextButtonDisabled, - }); } }, ]; @@ -57,14 +59,13 @@ const SetNickname = (props: any) => { text: '회원가입 완료', isDisabled: true, clickHandler: async () => { - console.log(signUpData) - const response = await addUser(signUpData); - console.log('response', response); - if (response.status === 'SUCCESS') { - alert('회원 가입 성공') - } else { - alert('회원 가입 실패') - } + await addUser(signUpData).then((response) => { + if (response.status === 'SUCCESS') { + alert('회원 가입 성공') + } else { + alert('회원 가입 실패') + } + }); }, }); }, []); diff --git a/src/pages/auth/SetPW.tsx b/src/pages/auth/SetPW.tsx index ffc18ef..fdec522 100644 --- a/src/pages/auth/SetPW.tsx +++ b/src/pages/auth/SetPW.tsx @@ -18,25 +18,29 @@ const SetPW = (props: any) => { const [isHelperError1, setIsHelperError1] = useState(true); const [isHelperError2, setIsHelperError2] = useState(true); + /** - * check if two passwords are equal - * @param password password - * @param compare password to compare + * compare two passwords + * @param value + * @param compareValue */ - const checkPasswordEquality = (password: string, compare: string) => { - if (password === compare) { - setHelper2('동일한 비밀번호입니다.'); - setIsHelperError2(false); - setIsNextButtonDisabled(false); + const checkPasswordMatch = (value: string, compareValue: string) => { + let isMatch = true; + if (value === compareValue) { + setHelper2(() => '동일한 비밀번호입니다.'); + isMatch = false; + setIsHelperError2(() => isMatch); + setIsNextButtonDisabled(() => isMatch); setSignUpData({...signUpData, password}); } else { setHelper2('동일한 비밀번호를 입력해주세요.'); - setIsHelperError2(true); + setIsHelperError2(() => isMatch); } setSignUpNextButtonProps({ ...signUpNextButtonProps, - isDisabled: isNextButtonDisabled, + isDisabled: isMatch, }); + }; // password items @@ -52,11 +56,11 @@ const SetPW = (props: any) => { const reg = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,15}$/; if (reg.test(value)) { setHelper1('사용 가능한 비밀번호입니다.'); - setIsHelperError1(false); - checkPasswordEquality(value, confirmPassword); + setIsHelperError1(() => false); + checkPasswordMatch(value, confirmPassword); } else { setHelper1('영어, 숫자, 특수문자를 모두 포함한 8 ~ 15자리 이내로 입력해주세요.'); - setIsHelperError1(true); + setIsHelperError1(() => true); } } }, @@ -71,7 +75,7 @@ const SetPW = (props: any) => { onChangeHandler: (event: React.ChangeEvent) => { const value = event.target.value; setConfirmPassword(value); - checkPasswordEquality(value, password); + checkPasswordMatch(value, password); } }, ]; diff --git a/src/pages/auth/VerifyCode.tsx b/src/pages/auth/VerifyCode.tsx index aeeaa48..fa47e21 100644 --- a/src/pages/auth/VerifyCode.tsx +++ b/src/pages/auth/VerifyCode.tsx @@ -128,7 +128,7 @@ const VerifyCode = (props: any) => { let newAttemptCount = verificationAttemptCount + 1; setVerificationAttemptCount(newAttemptCount); setHelper(`인증코드가 일치하지 않습니다. 다시 한번 확인 후 입력해주세요. (${newAttemptCount} / 5 회)`); - setIsHelperError(true); + setIsHelperError(() => (true)); } }, isDisabled: true,