TIL 2023.07.19

오늘 공부 계획 및 공부한 내용📝

• 팀프로젝트
• 회원가입 마무리, intro페이지 만들기

문제🧐 / 해결과정⚒️

• 처음 회원가입 모달창에 코드 짤 때는 useState만 사용해서 구현을 마쳤는데 팀원이 공용으로 사용할 useInput을 새로 만들면서 코드가 확 바꼈다.
  useMutation 훅을 사용해 회원가입이 완료되면 공용 컴포넌트로 만들어둔 Alert창이 뜨고 useModalal이 unmount되면서 모달창이 사라진다.
  성공과 실패에 따른 조치도 바로 추가할 수 있어 가속성면에서 훨씬 좋은 것 같다.

const { mutate, reset } = useMutation({
    mutationFn: signUp,
    onSuccess: async () => {
      await Alert("회원가입이 완료되었습니다.");
      unmount(SIGN_UP_MODAL);
      reset();
    },
    onError: error => {
      if (error.code === "auth/email-already-in-use") {
        setErrorMessage("이미 존재하는 이메일 주소입니다.");
      } else if (error.code === "auth/invalid-email") {
        setErrorMessage("올바른 이메일 형식이 아닙니다.");
      } else {
        setErrorMessage("회원가입에 실패했습니다. 다시 시도해 주세요.");
      }
    }
  });