From 172015d67238339a47689eb23e916f5d47686723 Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Mon, 30 Jan 2023 00:37:56 +0900
Subject: [PATCH 1/6] fix: change active condition of button

---
 components/signup/SignupForm.tsx | 13 +++++++++++--
 pages/signup/index.tsx           | 28 ++++++++++------------------
 2 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/components/signup/SignupForm.tsx b/components/signup/SignupForm.tsx
index fee53f1..48afe1d 100644
--- a/components/signup/SignupForm.tsx
+++ b/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";
@@ -35,10 +36,14 @@ export default function SignupForm(props: SignupFormProps) {
     </>
   );
 
+  const linkOfCondition = referralLinkLIst[0].href;
+
   const AgreeConditionBox = (
     <StAgreeConditionBox htmlFor="signupAgree" onClick={onToggleIsAgreeCondition}>
       <StIcSignupChecking isagree={isAgree} />
-      <p>개인정보 수집 및 이용 약관에 동의합니다.</p>
+      <a href={linkOfCondition} target="_blank" rel="noopener noreferrer">
+        개인정보 수집 및 이용 약관에 동의합니다.
+      </a>
     </StAgreeConditionBox>
   );
 
@@ -54,7 +59,7 @@ export default function SignupForm(props: SignupFormProps) {
 
       {keyIndex === "email" && AgreeConditionBox}
 
-      <StNextStepBtn disabled={!isDirty} type="submit">
+      <StNextStepBtn disabled={!isDirty || !isAgree} type="submit">
         다음 계단
       </StNextStepBtn>
     </>
@@ -87,6 +92,10 @@ const StAgreeConditionBox = styled.label`
 
   margin: 1.7rem 0 0 0;
 
+  & > a {
+    text-decoration: underline;
+  }
+
   ${({ theme }) => theme.fonts.body6}
 `;
 
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index fc0959a..51d4425 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -112,25 +112,17 @@ export default function Signup() {
         setError("password", { type: "server", message: "비밀번호가 일치하지 않습니다." });
       }
     } 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 });
+      // 서버로 데이터를 보내서 유효성 검사
+      // 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 });
       }
     }
   };

From debe83079722c2a6ad3a57469b0daac1186ec25a Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Mon, 30 Jan 2023 02:52:37 +0900
Subject: [PATCH 2/6] fix: disable button when move next step for signup

---
 components/signup/SignupForm.tsx | 10 +++----
 pages/signup/index.tsx           | 49 ++++++++++++++++++--------------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/components/signup/SignupForm.tsx b/components/signup/SignupForm.tsx
index 48afe1d..627281d 100644
--- a/components/signup/SignupForm.tsx
+++ b/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>
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index 51d4425..0faba43 100644
--- a/pages/signup/index.tsx
+++ b/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 = () => {

From 18b0881fc49d27a168141b507de466f31a964010 Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Mon, 30 Jan 2023 14:11:58 +0900
Subject: [PATCH 3/6] fix: check validtaion of nickname at client side

---
 pages/signup/index.tsx | 8 +++++++-
 util/check.ts          | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index 0faba43..e271123 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -154,7 +154,13 @@ export default function Signup() {
             <StFormWrapper>
               <StSignupImage src={imgList[formDataKeyIndex]} alt="회원가입 첫 단계" />
               <StSignupHeading2>나만의 서재를 만드는 중이에요!</StSignupHeading2>
-              <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+
+              {formDataKeyData[formDataKeyIndex] == "닉네임" ? (
+                <StSignupParagraph>제가 여러분을 어떻게 부르면 될까요?</StSignupParagraph>
+              ) : (
+                <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+              )}
+
               <StForm onSubmit={handleSubmit(submitForm)}>
                 <SignupForm
                   register={register}
diff --git a/util/check.ts b/util/check.ts
index 8cb71a1..1f3a699 100644
--- a/util/check.ts
+++ b/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 = {

From 837cafea3d429146f8b1994498c9b101b3c39483 Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Mon, 30 Jan 2023 22:04:00 +0900
Subject: [PATCH 4/6] fix: block refresh when go back in signup

---
 pages/signup/index.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index e271123..e1541b8 100644
--- a/pages/signup/index.tsx
+++ b/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";
@@ -99,13 +99,10 @@ export default function Signup() {
 
     setValue(formDataKeyIndex, "", { shouldDirty: true });
   };
-
   // 폼 제출 에러가 없는지 확인
   const submitForm = async (loginFormData: UseFormDataType) => {
     const inputValue = loginFormData[formDataKeyIndex];
 
-    console.log(inputValue);
-
     // 비밀번호 입력까지 마치면 자동 로그인
     if (formDataKeyIndex === "password") {
       if (loginFormData["password"] === loginFormData["password2"]) {
@@ -138,6 +135,21 @@ export default function Signup() {
     setIsAgreeCondition(!isAgreeCondition);
   };
 
+  useEffect(() => {
+    if (formDataKeyIndex == "nickname" || formDataKeyIndex == "password") {
+      const prevFormDataKeyIndex = formDataKeyIndex == "password" ? "nickname" : "email";
+
+      history.pushState(null, "", "");
+      window.onpopstate = () => {
+        setFormDataKeyIndex(prevFormDataKeyIndex);
+      };
+    } else {
+      window.onpopstate = () => {
+        // 초기화
+      };
+    }
+  }, [setFormDataKeyIndex]);
+
   return (
     <>
       <NavHeader logoColor={theme.colors.gray100} />

From ecbc1328fcaf4f3194eba264dfbaa7dd7f901d68 Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Mon, 30 Jan 2023 23:14:45 +0900
Subject: [PATCH 5/6] hotfix: change deps of useEffect

---
 components/signup/PasswordInput.tsx | 6 +++++-
 pages/signup/index.tsx              | 8 +++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/signup/PasswordInput.tsx b/components/signup/PasswordInput.tsx
index 2bd29af..9cd513d 100644
--- a/components/signup/PasswordInput.tsx
+++ b/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} />
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index e1541b8..ddfbf92 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -148,7 +148,7 @@ export default function Signup() {
         // 초기화
       };
     }
-  }, [setFormDataKeyIndex]);
+  }, [formDataKeyIndex]);
 
   return (
     <>
@@ -167,10 +167,12 @@ export default function Signup() {
               <StSignupImage src={imgList[formDataKeyIndex]} alt="회원가입 첫 단계" />
               <StSignupHeading2>나만의 서재를 만드는 중이에요!</StSignupHeading2>
 
-              {formDataKeyData[formDataKeyIndex] == "닉네임" ? (
+              {formDataKeyData[formDataKeyIndex] == "이메일" ? (
+                <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+              ) : formDataKeyData[formDataKeyIndex] == "닉네임" ? (
                 <StSignupParagraph>제가 여러분을 어떻게 부르면 될까요?</StSignupParagraph>
               ) : (
-                <StSignupParagraph>당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요.</StSignupParagraph>
+                <StSignupParagraph>{formDataKeyData[formDataKeyIndex]}를 설정해 주세요.</StSignupParagraph>
               )}
 
               <StForm onSubmit={handleSubmit(submitForm)}>

From ecf7fd8206aea6e70b577e5405c70f815dedd25c Mon Sep 17 00:00:00 2001
From: kimkyumin <rhkdtlrtm12@hanyang.ac.kr>
Date: Wed, 8 Feb 2023 11:11:46 +0900
Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=20=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20=ED=8F=BC?=
 =?UTF-8?q?=EC=97=90=20=EA=B8=B0=EC=A1=B4=20value=EB=A5=BC=20=EB=84=A3?=
 =?UTF-8?q?=EC=96=B4=EB=86=93=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/signup/index.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
index ddfbf92..11e3c0c 100644
--- a/pages/signup/index.tsx
+++ b/pages/signup/index.tsx
@@ -99,6 +99,7 @@ export default function Signup() {
 
     setValue(formDataKeyIndex, "", { shouldDirty: true });
   };
+
   // 폼 제출 에러가 없는지 확인
   const submitForm = async (loginFormData: UseFormDataType) => {
     const inputValue = loginFormData[formDataKeyIndex];
@@ -137,15 +138,18 @@ export default function Signup() {
 
   useEffect(() => {
     if (formDataKeyIndex == "nickname" || formDataKeyIndex == "password") {
-      const prevFormDataKeyIndex = formDataKeyIndex == "password" ? "nickname" : "email";
+      const prevFormDataKeyIndex = formDataKeyIndex === "password" ? "nickname" : "email";
 
       history.pushState(null, "", "");
       window.onpopstate = () => {
         setFormDataKeyIndex(prevFormDataKeyIndex);
+        setValue(prevFormDataKeyIndex, userData[prevFormDataKeyIndex], { shouldDirty: true });
       };
-    } else {
-      window.onpopstate = () => {
-        // 초기화
+
+      return () => {
+        window.onpopstate = () => {
+          // 초기화
+        };
       };
     }
   }, [formDataKeyIndex]);