찍찍이 #마이 페이지 (프로필, 비번, 회원탈퇴, 로그아웃)

마이 페이지에서는 크게 4가지 기능이 있다.
1. 프로필 사진변경
2. 비밀번호 변경
3. 회원탈퇴
4. 로그아웃

로그아웃에 관한 api 명세서가 없어 임시적으로 이 부분은 프론트에서 따로 처리를 하기로 하였으며 아래의 코드를 만들었다. 하지만 보안측면에서 토큰 무효화를 해줘야하기 때문에 반드시 로그아웃 api는 백엔드분께 부탁을 하여 리팩토링으로 만들어야 할 것이다.

export const useLogout = () => {
  const queryClient = useQueryClient();
  const router = useRouter();

  const logout = () => {
    document.cookie = 'token=; max-age=0; path=/;';
    notify('success', '로그아웃을 하였습니다', 3000);
    queryClient.clear();
    router.push('/signin');
  };

  return { logout };
};

로그아웃을 하게 되면 로그인시 쿠키에 저장한 토큰 값을 지워주고 로그인 페이지로 라우팅 처리를 하였다.

프로필 사진 변경은 PUT요청으로써 이전에 작성했던 http Method 유틸함수를 사용하여 쿼리 hooks로 body값으로 Base64로 인코딩된 이미지 전송

export const useModifyProfilePic = (): UseMutationResult<
  AxiosResponse,
  AxiosError,
  ModifyProfilePicRequest
> => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: ModifyProfilePicRequest) =>
      PUT<AxiosResponse, ModifyProfilePicRequest>(
        API_ENDPOINTS.AUTH.PROFILE_PIC,
        data,
      ),
    onSuccess: () => {
      notify('success', '수정에 성공하였습니다.', 3000);
      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.USER_INFO] });
    },
    onError: (error) => {
      notify('error', '수정에 실패하였습니다', 3000);
      console.error('Error Modify ProfilePic:', error.message);
    },
  });
};

비밀번호 변경은 로그인, 회원가입 페이지에서 구현했던 방식으로 React-Hook-Form을 사용하여 구현하였다. 또한 코드 가독성을 위해 validation 유틸 함수들을 아래의 한 파일에 묶어놓았음.

훅폼 validation 유틸 함수

비밀번호 변경 컴포넌트는 아래 링크에서 보시다시피 컴포넌트를 잘게 나누어 가독성과 유지보수성을 향상시켰다. 또한 Framer-motion을 적용을 통해 사용자 경험을 개선시켰다.

비밀번호 변경 컴포넌트

회원탈퇴 : 회원탈퇴 hooks 코드