찍찍이 #로그인 (Api, Mutation)

요약

우선 글을 쓰기 전 오늘 하루 힘들었습니다...
로그인 기능을 끝내고 회원가입 api도 연동하려 했으나
백엔드 Chrome Cookie SameSite 이슈

위와 같은 오류로 인해!!! 시간낭비!! -> 결국에는 응답 헤더를 통해 토큰을 전달하는 방식
추후 백엔드분들이 해결한다면 쿠키 저장 방식으로 리팩토링 할 예정

이 문제가 오래되다보니 일단은 응답 헤더를 통한 토큰 전달을 받기로 함.

엔드 포인트 상수화 및 axios 인스턴스 생성 (토큰 관련 인터셉터 추가!!)

로그인 api 함수 생성

로그인 로직 커스텀 훅 분리 (응답 헤더의 토큰 이슈 -> 해결 -> localStorage에 저장)

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

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

요청 인터셉터를 활용해 모든 API 요청에서 토큰 존재 여부를 중앙에서 관리함으로써 코드 중복을 제거하고, 유연한 확장성과 일관된 에러 처리를 통해 유지보수성을 향상시킴.
인터셉터 공식문서

axiosInstance.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['token'] = token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

응답 헤더에 토큰값이 불러와지는지 응답 값의 헤더를 콘솔로 찍어 확인을 해봄.
하지만 불러와지지않았음. 이게 어떻게 된 일인가.. 분명 내 경험 상 있어야하는데??
응답 헤더 접근 관련 블로그
검색을 하다가 위의 블로그에서 해당 오류를 발견.
백엔드 분들의 코드를 잘은 모르지만 해당 부분을 찾아 수정해달라고 부탁.
결국 블로그와 같이 해결이됨.!!!

...
export const useSignin = (): UseMutationResult<
  AxiosResponse,
  AxiosError,
  AuthDataRequest
=> {
  return useMutation({
    mutationFn: (data) => signin(data),
    onSuccess: (response) => {
      notify('success', '로그인에 성공하였습니다', 2000);
      localStorage.setItem('token', response.headers.token);
    },
    onError: (error: AxiosError) => {
      notify('error', '로그인에 실패하였습니다', 2000);
      console.error('Error Sign in:', error.message);
    },
  });
};

뮤테이션 관련 response 타입을 지정해주고 성공 시 응답 헤더의 토큰을 저장!

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