찍찍이 #회원가입 (Api, Mutation)

요약

지난 시간에 말했던 쿠키로 토큰 전달 방식에 관한 이슈들을 N일차 만에 해결을 할 수 있었습니다. 곧 이 이슈에 관한 게시물 올려볼 예정...

요약하자면 쿠키의 도메인 문제였다!!

일단 이 문제를 직면하기 이전 회원가입 post 기능을 구현하였음.

api 함수에서 엔드 포인트를 적을 때 유지보수성 증가, 오타방지, 가독성 향샹 등을 위해
constant 폴더에 따로 상수화된 엔드포인트들을 관리하도록 하였음.

...
export const signup = async (data: AuthDataRequest) => {
  try {
    const response = await axiosInstance.post(API_ENDPOINTS.AUTH.SIGN_UP, data);
    return response;
  } catch (error) {
    console.error('Error signin:', error);
    throw error;
  }
};

회원가입 mutation 로직 커스텀 훅을 분리하여 코드의 유지보수 성과 가독성을 향상 시킴.

...
export const useSignup = (): UseMutationResult<
  AxiosResponse,
  AxiosError,
  AuthDataRequest
=> {
  const router = useRouter();
  return useMutation({
    mutationFn: (data) => signup(data),
    onSuccess: () => {
      notify('success', '회원가입에 성공하였습니다', 3000);
      router.push('/signin');
    },
    onError: (error: AxiosError) => {
      notify('error', '회원가입에 실패하였습니다', 3000);
      console.error('Error Sign up:', error.message);
    },
  });
};

회원가입 성공 시 로그인 페이지로 이동 !

디자이너님 로고 언제 만들어주시나요..ㅎㅎㅎㅎ