Feature/signup kkm

components/signup/SignupForm.tsx

@@ -26,6 +26,8 @@ interface SignupFormProps {
 export default function SignupForm(props: SignupFormProps) {
   const { register, errors, keyData, keyIndex, isAgree, isDirty, onToggleIsAgreeCondition } = props;
 
+  const linkOfCondition = referralLinkLIst[0].href;
+
   const PasswordForm = (
     <>
       <StEmailFixed>{LocalStorage.getItem("booktez-email")}</StEmailFixed>
@@ -36,11 +38,9 @@ export default function SignupForm(props: SignupFormProps) {
     </>
   );
 
-  const linkOfCondition = referralLinkLIst[0].href;
-
   const AgreeConditionBox = (
-    <StAgreeConditionBox htmlFor="signupAgree" onClick={onToggleIsAgreeCondition}>
-      <StIcSignupChecking isagree={isAgree} />
+    <StAgreeConditionBox htmlFor="signupAgree">
+      <StIcSignupChecking isagree={isAgree} onClick={onToggleIsAgreeCondition} />
       <a href={linkOfCondition} target="_blank" rel="noopener noreferrer">
         개인정보 수집 및 이용 약관에 동의합니다.
       </a>
@@ -56,9 +56,7 @@ export default function SignupForm(props: SignupFormProps) {
         <Input {...register(keyIndex, errorPatterns[keyIndex])} placeholder={`${keyData[keyIndex]}을 입력해 주세요`} />
       )}
       {errors[keyIndex]?.message && <AlertLabel message={errors[keyIndex].message} />}
-
       {keyIndex === "email" && AgreeConditionBox}
-
       <StNextStepBtn disabled={!isDirty || !isAgree} type="submit">
         다음 계단
       </StNextStepBtn>

pages/signup/index.tsx

@@ -78,13 +78,13 @@ export default function Signup() {
   };
 
   // 다음 단계로 이동하는 함수
-  const setNextStep = (key: string) => {
+  const setNextStep = (inputValue: string) => {
     setUserData((current) => {
-      const formData = { ...current };
+      const userData = { ...current };
 
-      formData[formDataKeyIndex] = key;
+      userData[formDataKeyIndex] = inputValue;
 
-      return formData;
+      return userData;
     });
 
     setFormDataKeyIndex((current) => {
@@ -97,34 +97,41 @@ export default function Signup() {
       return "submit";
     });
 
-    setValue(formDataKeyIndex, "");
+    setValue(formDataKeyIndex, "", { shouldDirty: true });
   };
 
   // 폼 제출 에러가 없는지 확인
   const submitForm = async (loginFormData: UseFormDataType) => {
-    const key = loginFormData[formDataKeyIndex];
+    const inputValue = loginFormData[formDataKeyIndex];
+
+    console.log(inputValue);
 
     // 비밀번호 입력까지 마치면 자동 로그인
     if (formDataKeyIndex === "password") {
       if (loginFormData["password"] === loginFormData["password2"]) {
-        autoLoginAfterSignup(key);
-      } else {
-        setError("password", { type: "server", message: "비밀번호가 일치하지 않습니다." });
+        autoLoginAfterSignup(inputValue);
+
+        return;
       }
-    } else {
-      // 서버로 데이터를 보내서 유효성 검사
-      // return: 유효한지(isValid) && 에러 메시지(message)
-      const { isValid, message } = await checkIsValid(formDataKeyIndex, key);
-
-      if (isValid) {
-        setNextStep(key);
-        if (formDataKeyIndex === "email") {
-          LocalStorage.setItem("booktez-email", loginFormData["email"]);
-        }
-      } else {
-        setError(formDataKeyIndex, { type: "server", message });
+      setError("password", { type: "server", message: "비밀번호가 일치하지 않습니다." });
+
+      return;
+    }
+
+    // 서버로 데이터를 보내서 유효성 검사
+    // return: 유효한지(isValid) && 에러 메시지(message)
+    const { isValid, message } = await checkIsValid(formDataKeyIndex, inputValue);
+
+    if (isValid) {
+      setNextStep(inputValue);
+
+      if (formDataKeyIndex === "email") {
+        LocalStorage.setItem("booktez-email", loginFormData["email"]);
       }
+
+      return;
     }
+    setError(formDataKeyIndex, { type: "server", message });
   };
 
   const handleToggleIsAgreeCondition = () => {