회원가입과 자녀 정보 등록하기

✨ 배경

현재 우리 서비스를 이용 중인 유저(학생)들의 나이 정보에 대해서 알 수 없었다.
우리 서비스를 이용 중인 대상은 초등학생이지만 가입은 대부분 부모님의 계정으로 가입하는 상황이었고,
초등학생은 학년 별로 성취능력, 이해도가 크게 다르기 때문에 우리 서비스를 이용 중인 유저의 정보를 아는 것이 앞으로의 서비스의 방향을 결정하는데 도움이 될 것이라는 팀의 의사결정이 있었다.

✨ 초기 계획

1. 유저는 회원가입 버튼을 누른다.
2. 가입을 위한 정보(이름, 신분)를 입력 후 '가입하기' 버튼을 누른다.
   
3. '학생'이 아닌 '일반/학부모'의 경우 자녀 정보를 입력을 위한 폼으로 넘어간다.
   3-1. 학생의 경우 회원가입이 완료된다.
4. 자녀가 있는 경우 자녀 정보를 입력한다.
   4-1. 자녀가 없는 경우 '나중에 입력'을 누른다.
5. '완료' 버튼을 누른다. (회원 가입 요청은 최종 단계에서 요청됨)

• '가입하기' 요청을 마지막에 보내게 되다보니 회원정보를 입력 후 학부모/일반 가입자가 자녀 정보 입력에서 이탈했을 경우 회원가입이 되지 않는 상황이 발생했다.
  -> 재논의를 거쳐 회원가입 정보 입력 단계에서 '가입하기'를 눌렀을 경우 회원가입 요청을 보내도록 수정했다.

✨ 해야할 것

• 회원가입 유효성 검사 만들기
  • 닉네임 중복 체크, 1자 이상, 자음 모음 조합, 14세 미만의 경우 부모님 동의 체크
• 회원가입 요청 버튼에 적용할 Debounce에 대한 이해

✨ 유효성 검사 만들기

 const [isValid, setIsValid] = useState<boolean>(false); // 유효성 검사 state

  useEffect(() => {
    const validateNickname = !isExists && nickname.length > 0; 
 	// 닉네임이 1글자 이상인지는 프론트에서 확인하고, 닉네임 중복 여부는 서버에서 보내주는 response를 바탕으로 중복여부를 확인했다.  
    const validateRole = selected.length > 0; // 신분 선택 여부
    const validateConsent = isChild ? isConsent : true; // 14세 미만의 경우 부모님 동의 쳐부
    setIsValid(validateNickname && validateRole && validateConsent); 
  }, [isChild, isConsent, isExists, selected]);

• 아이 여부, 동의여부, 닉네임 존재에 대한 상태가 변결될 때마다 valid를 check하도록 했다.
• 유효성 검사는 useState를 통해 최종적으로 isValid가 true가 되었을 때 버튼이 활성화되도록 했다.

✨ 결과물