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) { diff --git a/components/signup/SignupForm.tsx b/components/signup/SignupForm.tsx index fee53f1..627281d 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"; @@ -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 = ( <> {LocalStorage.getItem("booktez-email")} @@ -36,9 +39,11 @@ export default function SignupForm(props: SignupFormProps) { ); const AgreeConditionBox = ( - - -

개인정보 수집 및 이용 약관에 동의합니다.

+ + + + 개인정보 수집 및 이용 약관에 동의합니다. + ); @@ -51,10 +56,8 @@ export default function SignupForm(props: SignupFormProps) { )} {errors[keyIndex]?.message && } - {keyIndex === "email" && AgreeConditionBox} - - + 다음 계단 @@ -87,6 +90,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..11e3c0c 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"; @@ -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 ( <> @@ -155,7 +170,15 @@ export default function Signup() { 나만의 서재를 만드는 중이에요! - 당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요. + + {formDataKeyData[formDataKeyIndex] == "이메일" ? ( + 당신의 {formDataKeyData[formDataKeyIndex]}을 입력해 주세요. + ) : formDataKeyData[formDataKeyIndex] == "닉네임" ? ( + 제가 여러분을 어떻게 부르면 될까요? + ) : ( + {formDataKeyData[formDataKeyIndex]}를 설정해 주세요. + )} + ()\].,;:\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 = {