[SENTENCE U] 나는 분명 클릭도 잘 했고 삭제도 잘 했단 말이에요

시작하기 버튼의 클릭 영역 에러

시작하기 버튼의 바깥쪽 영역을 클릭하면 반응은 하지만 버튼의 기능은 하지 못한다.(로그인/회원가입 페이지로 안넘어간다는 뜻)

export const LoginButton = styled.button`
  ...
  padding: 0.4rem 1.2rem;
`;

수정 전에는 a태그(리액트라우터의 Link)를 감싸고 있는 button에 padding이 있다. 

export const LoginButton = styled.button`
  ...
  /* padding: 0.4rem 1.2rem; */
  a {
    padding: 0.4rem 1.2rem;
  }
`;

button태그에 있던 padding을 지우고 자식인 a태그에 padding을 옮겨줘서 a태그의 영역으로 버튼영역을 채워줘서 해결했다.

별것 아닌 에러같지만 실제 사용자 입장에서는 클릭을 어디에 하느냐에 따라 기능이 정상작동하지 않는 것이니 나중에는 이런 것 까지 잘 생각하고 스타일코드를 작성해야겠다.

---

계정삭제 후 로그인이 되어있는 것처럼 보이는 버그

이번에도 이상한 점을 찾아보자.

계정을 삭제했는데 로그인 상태가 유지되어있다.

사실 계정이 삭제되고 로그아웃은 성공적으로 됐다.

navbar의 쿼리데이터가 리패치가 되지 않아서 로그인 상태로 보이는 것이다.

const handleDeleteAccount = useCallback(() => {
   Swal.fire({
     title: '계정을 삭제하시겠습니까?',
     text: '작성하신 모든 포스트가 삭제되며 복구되지 않습니다.',
     icon: 'warning',
     showCancelButton: true,
     confirmButtonColor: '#008bf8',
     cancelButtonColor: '#e06c75',
     confirmButtonText: '확인',
     cancelButtonText: '취소',
   }).then((result) => {
     if (result.isConfirmed) {
        axios
          .delete(`/api/users/${userId}`)
          .then(() => navigate('/')) // 삭제 성공 시 홈으로 navigate
          .catch((error) => console.log(error));
    }
  });
}, [userId, navigate]);

수정 전 코드다. 계정삭제에 성공하면 홈으로 navigate하는 것이 전부다.

axios
  .delete(`/api/users/${userId}`)
  .then(() => {
    refetch(); // 삭제 후 클라이언트 리패치
    navigate('/');
  }) // 삭제 성공 시 홈으로 navigate
  .catch((error) => console.log(error));

삭제 성공 시 위와 같이 refetch함수도 추가로 실행시켜준다. 이 refetch함수는 클라이언트유저 정보를 가져오는 리액트쿼리 함수에서 가져왔다.

const { userName, userTitle, userAvatar, userId, isLoading, refetch } = useGetClientUser();

성공적으로 수정했다!