[ Feature/dev 60 ] 로그인 또는 회원가입 mock API 연결

[soomin9106]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-60/%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EB%98%90%EB%8A%94-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85-mock-api-%EC%97%B0%EA%B2%B0

✅ PR Point

• /api/v1/members (로그인 또는 회원가입 버튼 클릭 시 인증 이메일 보내는 API -> 그 결과를 리턴함) 을 mocking 하고 custom hook 구현
• 이메일 전송 성공 시, 전송 성공 페이지로 이동 => 실패 시, toast 출력

export const useEmailForm = () => {
  const { toast } = useToast();
  const router = useRouter()

  const form = useForm<EmailSubscribeFormData>({
    resolver: zodResolver(emailSubscribeSchema),
    defaultValues: {
      email: "",
    },
    mode: "onSubmit",
  });

  const { mutate: memberSave } = useMutation({
    ...memberSaveOptions()
  });

  const onSubmit = (values: EmailSubscribeFormData) => {
    try {
      memberSave(values, {
        onSuccess: (response: ApiResponse<memberSaveResponse>) => {
          console.log('res', response);

          if (response.data?.data?.sendAuth) {
            // redirect to validation page
            router.push(`/auth/validation?email=${values.email}`)
          } else {
            toast({
              title: SIGNUP_PROGRESS.EMAIL_SEND_FAIL,
            });
          }
        },
        onError: () => {  
          toast({
            title: SIGNUP_PROGRESS.EMAIL_SEND_FAIL,
          });
        },
      });
    } catch (error) {
      console.error("catch error", error);

      toast({
        title: LOGIN_STATUS.FAILED,
      });
    }
  };

  return {
    form,
    onSubmit,
  };
};

👀 스크린샷 / GIF / 링크

2024-07-29.11.21.40.mov

[soomin9106]

test code 는 mutation 포함해서 작성 중임다!!

[Happhee]

고생많았어요..!

근데 ㅠ.ㅠ 어째...순서가 또 뒤바뀌고 있는것가타욥 ㅠㅠㅠ테스크코드를 먼저짜는게 맞는것같습니다아 !!!!!

[Happhee]

오우 얘는 develop으로 가면 안될것같아요!

[soomin9106]

아아 얘 확인했습니다!

[Happhee]

혹시 onError에서 처리하지 않고, onSuccess 내부에서 data의 여부로 실패를 판단한 이유가 있을까요?

[soomin9106]

아 이 부분은 sendAuth 가 이메일이 전송이 되었는지 안되었는지를 따지는 필드인데, 아예 백엔드 자체에서 이메일 전송에 실패했을 경우도 있어서 저렇게 처리 했습니다!! onError 인 경우하고는 또 다른 경우인 것 같아용!! 이메일을 전송 못했을 때 sendAuth 가 false 로 올 수도 있습니당!!

[soomin9106]

근데 이메일 전송 실패 사유를 정확하게 파악은 못하는 상황이라 toast title 은 SIGNUP_PROGRESS.EMAIL_SEND_FAIL 로 onError 일 때와 같습니다!!
참고: https://www.figma.com/design/nfHptFfTa7zPwklplA6v4F?node-id=1014-977#890519000

[Happhee]

@soomin9106 아 네네 이해했습니다. 혹시 그러면 저희가 요청자체를 실패하는 경우는 없는걸까요?

[soomin9106]

이메일 검증 과정이 있어서 클라 쪽에서의 요청 실패는 없을 듯 합니당!!
조금 더 케이스 봐보고 보완할게요!

[soomin9106]

맞아요 ㅠㅠ mutation 부분을 어떻게 하면 좋을까 하다 테코 작성을 미뤘습니다.. ㅋㅋㅋ ㅠㅠ
담 PR 부터는 테코부터 써보겠슴다

[soomin9106]

테코 추가했습니다!
2d0f08a

[Happhee]

테스트 코드까지 검증하시느라 고생하셨습니다!

[Happhee]

이부분은 beforeEach 메소드 앞에 사용해서 정의해주면 반복해서 작성할 필요없는것같습니다..!