From 34317c1de52838a65e5157bf68e735fa34597662 Mon Sep 17 00:00:00 2001
From: choba <jek.1976534@gmail.com>
Date: Sat, 15 Jul 2023 21:20:41 +0900
Subject: [PATCH] =?UTF-8?q?Upt.=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=A9=94=ED=83=80=20=EB=8D=B0=EC=9D=B4=ED=84=B0?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html              |  2 +-
 src/api/auth.ts                |  8 ++---
 src/hooks/signUpSteps.ts       | 15 +++-----
 src/pages/auth/InputForm.tsx   |  3 +-
 src/pages/auth/SetEmail.tsx    | 32 +++++++++---------
 src/pages/auth/SetNickname.tsx | 25 +++++++-------
 src/pages/auth/SetPW.tsx       | 29 ++++++++--------
 src/pages/auth/VerifyCode.tsx  | 62 +++++++++++++++++-----------------
 src/store/signUp.ts            |  1 -
 9 files changed, 84 insertions(+), 93 deletions(-)

diff --git a/public/index.html b/public/index.html
index ec7f66f..739a557 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="ddok-ddak"
     />
 
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
diff --git a/src/api/auth.ts b/src/api/auth.ts
index 78d88e5..cf58829 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -38,16 +38,14 @@ export const checkDuplicatedNickname = async (nickname: string) => {
 
 /**
  * user sign up
- * @param nickname 
+ * @param request: UserData 
  * @returns response
  */
-export const addUser = async (userData: UserData) => {
+export const addUser = async (request: UserData) => {
   const response = await callAPI({
     url: '/api/v1/auth/signup',
     method: 'POST',
-    params: {
-      userData
-    }
+    body: request,
   });
 
   return response as CommonResponse;
diff --git a/src/hooks/signUpSteps.ts b/src/hooks/signUpSteps.ts
index 89c7d56..5b8be53 100755
--- a/src/hooks/signUpSteps.ts
+++ b/src/hooks/signUpSteps.ts
@@ -10,23 +10,16 @@ export function useSignUpStepForm(steps: ReactElement[]) {
    * handle next button
    */
   function handleNextButton() {
-    setCurrentStepIndex(i => {     
-      if (i < steps.length - 1) {
-        return i + 1;
-      } else {
-        return i;
-      }
-    });
-
+    const currIdx = currentStepIndex;
+    setCurrentStepIndex(() => (currIdx < steps.length - 1) ? (currIdx + 1) : currIdx);
   }
 
   /**
    * handle prev button
    */
   function handlePrevButton() {
-    setCurrentStepIndex(i => {
-      return (i <= 0) ? i : i - 1;
-    });
+    const currIdx = currentStepIndex;
+    setCurrentStepIndex(() => (currIdx <= 0) ? currIdx : currIdx - 1);
   }
 
   return {
diff --git a/src/pages/auth/InputForm.tsx b/src/pages/auth/InputForm.tsx
index ccd963d..827b8f1 100644
--- a/src/pages/auth/InputForm.tsx
+++ b/src/pages/auth/InputForm.tsx
@@ -19,7 +19,7 @@ export type InputItemType = {
   duplicateCheckerHandler?: () => {},
   verifyCodeRequestButton?: ReactJSXElement,
   verifyCodeRequestHandler?: () => void,
-  onChangeHandler?: (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => Promise<true | undefined> | void | boolean,
+  onChangeHandler?: (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => Promise<true | undefined | void> | void,
   type?: string,
   value?: string
 }
@@ -43,6 +43,7 @@ const InputForm = ({itemArray, disableDuplicateChkBtn, helper, isHelperError, va
               onChange={item.onChangeHandler}
               type={item.type}
               value={value}
+              autoComplete='off'
             />
             <FormHelperText 
               sx={{color: 'green'}}
diff --git a/src/pages/auth/SetEmail.tsx b/src/pages/auth/SetEmail.tsx
index 70578f2..dc5d82d 100644
--- a/src/pages/auth/SetEmail.tsx
+++ b/src/pages/auth/SetEmail.tsx
@@ -62,28 +62,28 @@ const SetEmail = (props: any) => {
     {
       name: '이메일',
       placeholder: '이메일 주소를 입력해주세요.',
-      duplicateCheckerButton:
-      (<InputAdornment 
-        position="end" 
-        onClick={duplicateCheckerHandler}
-        > 
-          <Button
-            sx={{
-              color: '#FF8999',
-              fontSize: '13px',
-              fontWeight: '400'
-            }}
-            disabled={disableDuplicateChkBtn}
-            >
-            {'중복확인'}
-          </Button>
-        </InputAdornment>),
+      duplicateCheckerButton:(
+      <InputAdornment position="end"> 
+        <Button
+          onClick={duplicateCheckerHandler}
+          disabled={disableDuplicateChkBtn}
+          sx={{
+            color: '#FF8999',
+            fontSize: '13px',
+            fontWeight: '400'
+          }}
+        >
+          {'중복확인'}
+        </Button>
+      </InputAdornment>
+      ),
       onChangeHandler,
       type: 'email'
     },
   ];
   
   useEffect(() => {
+    setDisableDuplicateChkBtn(true);
     setSignUpStepInstruction('이메일을 입력해주세요.');
     setSignUpNextButtonProps({
       ...signUpNextButtonProps,
diff --git a/src/pages/auth/SetNickname.tsx b/src/pages/auth/SetNickname.tsx
index cd0aa31..5f022e0 100644
--- a/src/pages/auth/SetNickname.tsx
+++ b/src/pages/auth/SetNickname.tsx
@@ -23,29 +23,28 @@ const SetNickname = (props: any) => {
       placeholder: '영어, 숫자, _, -를 사용한 2 ~ 15자리 이내',
       onChangeHandler: async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
         const value = event.target.value;
-        setNickname(value);
-
+        setNickname(() => value);
+        
         const reg = /^[a-zA-Z0-9_-]{2,15}$/g;
+        let isNotAvail = true;
         if (!reg.test(value)) {
           setHelper('영어, 숫자, _, - 를 사용한 2 ~ 15자리 이내로 입력해주세요.');
-          setIsHelperError(true);
-          setIsNextButtonDisabled(true);
-          return true;
+          setIsHelperError(isNotAvail);
+          setIsNextButtonDisabled(isNotAvail);
         } else {
           await checkDuplicatedNickname(value).then((response) => {
-            let isAvail = false;
             if (response.status === 'SUCCESS') {
+              isNotAvail = false;
               setHelper('사용 가능한 닉네임입니다.');
-              setIsNextButtonDisabled(isAvail);
               setSignUpData({...signUpData, nickname: value});
             } else {
-              isAvail = true;
               setHelper('이미 사용하고 있는 닉네임입니다.');
             }
-            setIsHelperError(isAvail);
+            setIsNextButtonDisabled(isNotAvail);
+            setIsHelperError(isNotAvail);
             setSignUpNextButtonProps({
               ...signUpNextButtonProps,
-              isDisabled: isAvail,
+              isDisabled: isNotAvail,
             });    
           });
         }
@@ -59,7 +58,8 @@ const SetNickname = (props: any) => {
       text: '회원가입 완료',
       isDisabled: true,
       clickHandler: async () => {
-        await addUser(signUpData).then((response) => {
+        const userData = signUpData;
+        await addUser(userData).then((response) => {
           if (response.status === 'SUCCESS') {
             alert('회원 가입 성공')
           } else {
@@ -68,9 +68,8 @@ const SetNickname = (props: any) => {
         });
       },
     });
-  }, []);
+  }, [nickname]);
 
-  
   return (
     <FormWrapper>
       <InputForm 
diff --git a/src/pages/auth/SetPW.tsx b/src/pages/auth/SetPW.tsx
index fdec522..a8b4704 100644
--- a/src/pages/auth/SetPW.tsx
+++ b/src/pages/auth/SetPW.tsx
@@ -40,7 +40,6 @@ const SetPW = (props: any) => {
       ...signUpNextButtonProps,
       isDisabled: isMatch,
     });
-
   };
 
   // password items
@@ -91,19 +90,21 @@ const SetPW = (props: any) => {
 
   return (
     <FormWrapper>
-      <InputForm
-        key="password1"
-        itemArray={itemArray1}
-        helper={helper1}
-        isHelperError={isHelperError1}
-        value={password}
-      />
-      <InputForm 
-        key="password2"
-        itemArray={itemArray2}
-        helper={helper2}
-        isHelperError={isHelperError2}     
-      />
+      <form>
+        <InputForm
+          key="password1"
+          itemArray={itemArray1}
+          helper={helper1}
+          isHelperError={isHelperError1}
+          value={password}
+        />
+        <InputForm 
+          key="password2"
+          itemArray={itemArray2}
+          helper={helper2}
+          isHelperError={isHelperError2}     
+        />
+      </form>
     </FormWrapper>
   );
 };
diff --git a/src/pages/auth/VerifyCode.tsx b/src/pages/auth/VerifyCode.tsx
index fa47e21..82418d3 100644
--- a/src/pages/auth/VerifyCode.tsx
+++ b/src/pages/auth/VerifyCode.tsx
@@ -36,41 +36,41 @@ const VerifyCode = (props: any) => {
         </InputAdornment>),
       verifyCodeRequestButton: 
         (<Button 
-          onClick={() => {
-            const requestCount = requestCodeCount;
-            if (requestCount < 5) {
-              setRequestCodeCount(requestCount + 1);
-              // TODO: check verification code
-            } else {
-              setModalInfo({ 
-                open: true, 
-                title: '인증 요청 제한 횟수(5회)를 초과했습니다. 다른 이메일로 시도하시겠습니까? ', 
-                msg: '그렇지 않은 경우 해당 이메일로는 24시간 후에 시도할 수 있습니다.',
-                btn1Text: '아니오',
-                btn1ClickHandler: () => {
-                  setModalInfo({ ...modalInfo, open: false });
-                },
-                btn2Text: '네',
-                btn2ClickHandler: () => {
-                  setModalInfo({ ...modalInfo, open: false });
-                  setCurrentStepIndex(currentStepIndex - 1);
-                }
-              })
-            }
-          }}
-          sx={{
-            height: '29px',
-            width: '110px',
-            margin: '16px 0 8px 10px',
-            justifyContent: 'center',
-            radius: '5px', 
-            backgroundColor: '#E8E8E8', 
-          }}
+            onClick={() => {
+              const requestCount = requestCodeCount;
+              if (requestCount < 5) {
+                setRequestCodeCount(requestCount + 1);
+                // TODO: check verification code
+              } else {
+                setModalInfo({ 
+                  open: true, 
+                  title: '인증 요청 제한 횟수(5회)를 초과했습니다. 다른 이메일로 시도하시겠습니까? ', 
+                  msg: '그렇지 않은 경우 해당 이메일로는 24시간 후에 시도할 수 있습니다.',
+                  btn1Text: '아니오',
+                  btn1ClickHandler: () => {
+                    setModalInfo({ ...modalInfo, open: false });
+                  },
+                  btn2Text: '네',
+                  btn2ClickHandler: () => {
+                    setModalInfo({ ...modalInfo, open: false });
+                    setCurrentStepIndex(currentStepIndex - 1);
+                  }
+                })
+              }
+            }}
+            sx={{
+              height: '29px',
+              width: '120px',
+              margin: '16px 0 8px 10px',
+              justifyContent: 'center',
+              radius: '5px', 
+              backgroundColor: '#E8E8E8', 
+            }}
           >
            <Typography
             sx={{
               fontSize: '11px',
-              color: '#949494'
+              color: '#949494',
             }}
            >
             인증코드 재요청
diff --git a/src/store/signUp.ts b/src/store/signUp.ts
index 7c01f14..e7d765c 100644
--- a/src/store/signUp.ts
+++ b/src/store/signUp.ts
@@ -4,7 +4,6 @@ import { atom } from 'recoil';
 export const SignUpStepState = atom({
   key: 'signUpState',
   default: 0,
-  dangerouslyAllowMutability: false
 });
 
 // sign up user data