Feature/signup kkm

components/signup/PasswordInput.tsx

@@ -24,7 +24,11 @@ export default function PasswordInput(props: PasswordInputProps) {
     <StInputPwdWrapper>
       <Input
         {...register(keyIndex, passwordErrorPatterns)}
-        placeholder="비밀번호를 입력해 주세요"
+        placeholder={
+          keyIndex === "password2"
+            ? " 비밀번호를 확인해 주세요."
+            : "영문, 숫자, 특수문자를 조합해 8자 이상 입력해 주세요."
+        }
         type={isPwdSight ? "text" : "password"}
       />
       <PwdSightIcon isPwdSight={isPwdSight} onToggleSightPwd={toggleSightPwd} />

components/signup/SignupForm.tsx

@@ -6,6 +6,7 @@ import LocalStorage from "../../core/localStorage";
 import { IcSignupChecking } from "../../public/assets/icons";
 import { UseFormDataType } from "../../types/signup";
 import { errorPatterns } from "../../util/check";
+import referralLinkLIst from "../../util/referralLinkList";
 import { AlertLabel } from "../common";
 import { DefaultButton } from "../common/styled/Button";
 import { Input } from "../common/styled/Input";
@@ -25,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,9 +39,11 @@ export default function SignupForm(props: SignupFormProps) {
   );
 
   const AgreeConditionBox = (
-    <StAgreeConditionBox htmlFor="signupAgree" onClick={onToggleIsAgreeCondition}>
-      <StIcSignupChecking isagree={isAgree} />
-      <p>개인정보 수집 및 이용 약관에 동의합니다.</p>
+    <StAgreeConditionBox htmlFor="signupAgree">
+      <StIcSignupChecking isagree={isAgree} onClick={onToggleIsAgreeCondition} />
+      <a href={linkOfCondition} target="_blank" rel="noopener noreferrer">
+        개인정보 수집 및 이용 약관에 동의합니다.
+      </a>
     </StAgreeConditionBox>
   );
 
@@ -51,10 +56,8 @@ 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} type="submit">
+      <StNextStepBtn disabled={!isDirty || !isAgree} type="submit">
         다음 계단
       </StNextStepBtn>
     </>
@@ -87,6 +90,10 @@ const StAgreeConditionBox = styled.label`
 
   margin: 1.7rem 0 0 0;
 
+  & > a {
+    text-decoration: underline;
+  }
+
   ${({ theme }) => theme.fonts.body6}
 `;
 

pages/signup/index.tsx

@@ -12,7 +12,7 @@
 import styled from "@emotion/styled";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { NavHeader } from "../../components/common";
@@ -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,48 +97,63 @@ 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];
 
     // 비밀번호 입력까지 마치면 자동 로그인
     if (formDataKeyIndex === "password") {
       if (loginFormData["password"] === loginFormData["password2"]) {
-        autoLoginAfterSignup(key);
-      } else {
-        setError("password", { type: "server", message: "비밀번호가 일치하지 않습니다." });
+        autoLoginAfterSignup(inputValue);
+
+        return;
       }
-    } else {
-      // 이메일 입력시 개인정보 취급 방침 동의를 먼저 유도
-      if (formDataKeyIndex === "email" && !isAgreeCondition) {
-        setError(formDataKeyIndex, {
-          type: "agreeCondition",
-          message: "개인정보 수집 및 이용 약관에 동의해주시기 바랍니다.",
-        });
-      } 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 = () => {
     setIsAgreeCondition(!isAgreeCondition);
   };
 
+  useEffect(() => {
+    if (formDataKeyIndex == "nickname" || formDataKeyIndex == "password") {
+      const prevFormDataKeyIndex = formDataKeyIndex === "password" ? "nickname" : "email";
+
+      history.pushState(null, "", "");
+      window.onpopstate = () => {
+        setFormDataKeyIndex(prevFormDataKeyIndex);
+        setValue(prevFormDataKeyIndex, userData[prevFormDataKeyIndex], { shouldDirty: true });
+      };
+
+      return () => {
+        window.onpopstate = () => {
+          // 초기화
+        };
+      };
+    }
+  }, [formDataKeyIndex]);
+
   return (
     <>
       <NavHeader logoColor={theme.colors.gray100} />
@@ -155,7 +170,15 @@ export default function Signup() {
             <StFormWrapper>
               <StSignupImage src={imgList[formDataKeyIndex]} alt="회원가입 첫 단계" />
               <StSignupHeading2>나만의 서재를 만드는 중이에요!</StSignupHeading2>
-              <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+
+              {formDataKeyData[formDataKeyIndex] == "이메일" ? (
+                <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+              ) : formDataKeyData[formDataKeyIndex] == "닉네임" ? (
+                <StSignupParagraph>제가 여러분을 어떻게 부르면 될까요?</StSignupParagraph>
+              ) : (
+                <StSignupParagraph>{formDataKeyData[formDataKeyIndex]}를 설정해 주세요.</StSignupParagraph>
+              )}
+
               <StForm onSubmit={handleSubmit(submitForm)}>
                 <SignupForm
                   register={register}

util/check.ts

@@ -1,6 +1,8 @@
 const EMAIL_REGEX =
   /^(([^<>()\].,;:\s@"]+(\.[^<>()\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
 
+const NICKNAME_REGEX = /^(?=.*[a-z0-9가-힣])[a-z0-9가-힣]{2,10}$/i;
+
 const INVALID_PWD_CHAR_LIST: { [key: string]: string } = {
   ",": "반점(,)",
   '"': '쌍따옴표(")',
@@ -34,6 +36,10 @@ const nicknameErrorPatterns: ErrorCondition = {
     value: true,
     message: "닉네임을 입력해주세요.",
   },
+  pattern: {
+    value: NICKNAME_REGEX,
+    message: "2-10자 이내의 영문/한글/숫자로 입력해주세요.",
+  },
 };
 
 export const passwordErrorPatterns: ErrorCondition = {