diff --git a/src/pages/auth/signup/CheckTermsAndConditions.tsx b/src/pages/auth/signup/CheckTermsAndConditions.tsx index 631157e..06db8ef 100644 --- a/src/pages/auth/signup/CheckTermsAndConditions.tsx +++ b/src/pages/auth/signup/CheckTermsAndConditions.tsx @@ -1,5 +1,5 @@ import { buttonText } from '@/constants/message'; -import { stepButtonProps, stepInstruction } from '@/store/common'; +import { currentFormType, stepButtonProps, stepInstruction } from '@/store/common'; import { theme } from '@/styles'; import { Box, @@ -14,6 +14,7 @@ import { import { useEffect, useState } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; + type ItemType = { required: boolean; desc: string; @@ -52,6 +53,7 @@ const CheckTermsAndConditions = (props: any) => { const setInstruction = useSetRecoilState(stepInstruction); const [nextButtonProps, setNextButtonProps] = useRecoilState(stepButtonProps); + const setStepType = useSetRecoilState(currentFormType); const [checked, setChecked] = useState([false, false, false, false, false]); const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true); @@ -113,6 +115,7 @@ const CheckTermsAndConditions = (props: any) => { }; useEffect(() => { + setStepType('SIGNUP'); setInstruction('서비스를 이용하기 위해 약관에 동의 해주세요.'); setNextButtonProps({ ...nextButtonProps, diff --git a/src/pages/auth/signup/SetEmail.tsx b/src/pages/auth/signup/SetEmail.tsx index f0a96a4..02e803e 100644 --- a/src/pages/auth/signup/SetEmail.tsx +++ b/src/pages/auth/signup/SetEmail.tsx @@ -1,7 +1,7 @@ import { checkDuplicatedEmail, requestCode } from '@/api/auth'; import { authenticationRequestId, signUpDataState } from '@/store/signUp'; import { Button, InputAdornment } from '@mui/material'; -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { stepButtonProps, stepInstruction } from '@/store/common'; @@ -15,12 +15,17 @@ const SetEmail = (props: any) => { const instruction = useSetRecoilState(stepInstruction); const [signUpData, setSignUpData] = useRecoilState(signUpDataState); const setRequestId = useSetRecoilState(authenticationRequestId); - + const refValue = useRef(''); const [email, setEmail] = useState(signUpData.email); const [disableDuplicateChkBtn, setDisableDuplicateChkBtn] = useState(true); const [helper, setHelper] = useState(''); const [isHelperError, setIsHelperError] = useState(true); const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true); + + useEffect(() => { + refValue.current = email; + }, [email]); + const onChangeHandler = ( event: React.ChangeEvent, @@ -45,7 +50,7 @@ const SetEmail = (props: any) => { }; const duplicateCheckerHandler = async (event: any) => { - await checkDuplicatedEmail(email).then((response) => { + await checkDuplicatedEmail(refValue.current).then((response) => { if (response.status === 'SUCCESS') { setHelper('사용 가능한 이메일입니다.'); setIsHelperError(false); @@ -55,7 +60,7 @@ const SetEmail = (props: any) => { ...nextButtonProps, isDisabled: false, }); - setSignUpData({ ...signUpData, email }); + setSignUpData({ ...signUpData, email: refValue.current }); } else { setHelper('이미 가입된 이메일입니다.'); setIsHelperError(() => true); @@ -91,7 +96,7 @@ const SetEmail = (props: any) => { setNextButtonProps({ ...nextButtonProps, clickHandler: async () => { - await requestCode(email).then((response: any) => { + await requestCode(refValue.current).then((response: any) => { if (response.status === 'SUCCESS') { setRequestId(response.result.id); props.handleNextButton(); diff --git a/src/pages/auth/signup/SetNickname.tsx b/src/pages/auth/signup/SetNickname.tsx index a1eecb7..ed77cf5 100644 --- a/src/pages/auth/signup/SetNickname.tsx +++ b/src/pages/auth/signup/SetNickname.tsx @@ -4,10 +4,11 @@ import { signUpDataState, signInUpStepInstruction, } from '@/store/signUp'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; import InputForm, { InputItemType } from '../common/InputForm'; +import { useNavigate } from 'react-router-dom'; const SetNickname = (props: any) => { const [signUpNextButtonProps, setSignUpNextButtonProps] = useRecoilState( @@ -17,9 +18,17 @@ const SetNickname = (props: any) => { const setSignUpStepInstruction = useSetRecoilState(signInUpStepInstruction); const [nickname, setNickname] = useState(signUpData.nickname); + + const refValue = useRef(''); + const [isNextButtonDisabled, setIsNextButtonDisabled] = useState(true); const [helper, setHelper] = useState(''); const [isHelperError, setIsHelperError] = useState(true); + const navigation = useNavigate(); + useEffect(() => { + refValue.current = nickname; + }, [nickname]); + const itemArray: InputItemType[] = [ { @@ -33,18 +42,18 @@ const SetNickname = (props: any) => { const reg = /^[a-zA-Z0-9_-]{2,15}$/g; let isNotAvail = true; - if (!reg.test(value)) { + if (!reg.test(refValue.current)) { setHelper( '영어, 숫자, _, - 를 사용한 2 ~ 15자리 이내로 입력해주세요.', ); setIsHelperError(isNotAvail); setIsNextButtonDisabled(isNotAvail); } else { - await checkDuplicatedNickname(value).then((response) => { + await checkDuplicatedNickname(refValue.current).then((response) => { if (response.status === 'SUCCESS') { isNotAvail = false; setHelper('사용 가능한 닉네임입니다.'); - setSignUpData({ ...signUpData, nickname: value }); + setSignUpData({ ...signUpData, nickname: refValue.current }); } else { setHelper('이미 사용하고 있는 닉네임입니다.'); } @@ -66,10 +75,9 @@ const SetNickname = (props: any) => { text: '회원가입 완료', isDisabled: true, clickHandler: async () => { - const userData = signUpData; - await addUser(userData).then((response) => { + await addUser({ ...signUpData, nickname: refValue.current }).then((response) => { if (response.status === 'SUCCESS') { - alert('회원 가입 성공'); + navigation('/statistics'); } else { alert('회원 가입 실패'); }