Upt. 에러 수정

ddok-ddak · Jul 12, 2023 · 2abed05 · 2abed05
1 parent 34d3ae8
commit 2abed05
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 60 deletions.
diff --git 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<HTMLTextAreaElement | HTMLInputElement>) => {
     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
@@ -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
@@ -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<HTMLTextAreaElement | HTMLInputElement>) => {
         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
@@ -128,7 +128,7 @@ const VerifyCode = (props: any) => {
           let newAttemptCount = verificationAttemptCount + 1;
           setVerificationAttemptCount(newAttemptCount);
           setHelper(`인증코드가 일치하지 않습니다. 다시 한번 확인 후 입력해주세요. (${newAttemptCount} / 5 회)`);
-          setIsHelperError(true);
+          setIsHelperError(() => (true));
         }
       },
       isDisabled: true,