Add. 회원 가입 개선

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,

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<HTMLTextAreaElement | HTMLInputElement>,
@@ -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();

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('회원 가입 실패');
           }