fix: 회원탈퇴 후 유저정보가 남아있는 버그 수정

[ssolfa]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved [FIX]: 회원탈퇴 이후 유저 정보가 남아있는 문제 #204

버그 픽스

• LoginState랑 UserState가 초기화 코드 누락 해결

• 로그인 했을 때

• 계정 탈퇴 후

2️⃣ 알아두시면 좋아요!

로그아웃 api.logout과 LoginState를 false로, UserState를 null로 전부 초기화하는 useResetUserInfo 훅을 만들었습니다.
로그아웃에서도 LoginState, UserState 전부 초기화 해야하면 갖다 써도 될 것 같습니당

3️⃣ 추후 작업

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?

[nijuy]

빠르다 빨라!!!!!!!!!!!!!!

로그아웃에서도 LoginState, UserState 전부 초기화 해야하면 갖다 써도 될 것 같습니당

짱개발자

[nijuy]

resetUserInfo 라는 함수로 분리한 이유가 궁금합니다!

해당 함수의 크기가 크지 않기도 하고, return 안에서 바로 처리하는 게 코드 읽을 때 흐름이 왔다갔다 하지 않는다는 점에서 이해하기 쉬울 거 같다고 생각하는데 워때용

Suggested change

	export const useResetUserInfo = () => {
	const resetLoginState = useSetRecoilState(LogInState);
	const resetUserState = useSetRecoilState(UserState);
	return () => resetUserInfo(resetLoginState, resetUserState);
	};
	export const useResetUserInfo = () => {
	const resetLoginState = useSetRecoilState(LogInState);
	const resetUserState = useSetRecoilState(UserState);
	return () => {
	resetLoginState(false);
	resetUserState(null);
	api.logout();
	};
	};

[2wndrhs]

수고하셨습니다👍

[2wndrhs]

postWithdraw 로직을 tanstack query의 mutation을 활용해서 분리하면 어떨까요?
mutation으로 분리하면 API 호출 상태에 따른 로직들을 mutation으로 위임할 수 있어 가독성이 더 좋아질 것 같습니다!
https://tanstack.com/query/latest/docs/framework/react/guides/mutations

피그마에는 계정 탈퇴가 실패했을 때의 디자인은 따로 없는 것 같은데 맞을까요.?
그렇다면 alert로 처리하기 보다는 ErrorBoundary에서 처리하는게 통일성이 있을 것 같습니다!

• postWithdraw.ts(api)

export const postWithdraw = async (data: object) => {
  const res = await authClient.post('/auth/withdraw', data, {
    headers: api.headers,
  });
  return res.data;
};

• usePostWithdraw.ts(mutation)

export const usePostWithdraw = () => {
  const queryClient = useQueryClient();
  const setIsLoggedIn = useSetRecoilState(LogInState);

  return useMutation({
    mutationFn: postWithdraw,
    onSuccess: () => {
      setIsLoggedIn(false);
      api.logout();
    },
    // 가장 가까운 ErrorBoundary로 에러가 전파됨
    throwOnError: true,
  });
};

• Withdraw.tsx

export const Withdraw = () => {
  const navigate = useNavigate();
  const [agreed, setAgreed] = useState(false);
  const [draw, setDraw] = useState(false);
  const withdrawMutation = usePostWithdraw();

  const handleGoToHome = () => {
    navigate('/');
  };

  const handleCheckAgree = () => {
    setAgreed((prevAgreed) => !prevAgreed);
  };

  const handleWithdrawAgree = () => {
    withdrawMutation.mutate(
      {},
      {
        onSuccess: () => {
          setDraw((prevDraw) => !prevDraw);
        },
      }
    );
  };

  return (
    <StyledWrapper>
      <img onClick={handleGoToHome} src={Logo} alt="Logo-image" width={180} height={38} />
      <StyledWithdrawContainer>
        {draw ? (
          <WithdrawSuccess onConfirm={handleGoToHome} />
        ) : (
          <>
            <StyledTitleText>계정 탈퇴</StyledTitleText>
            <StyledSubTitleText>계정 탈퇴 전 꼭 확인하세요.</StyledSubTitleText>
            <StyledText>
              <StyledListItem>탈퇴하는 즉시 데이터가 제거되며, 복구가 불가능합니다.</StyledListItem>
              <StyledListItem>
                닉네임, 이메일 등 사용자를 특정할 수 있는 모든 계정 정보가 지워집니다.
              </StyledListItem>
              <StyledListItem>
                등록된 글이나 댓글의 삭제를 원한다면 탈퇴 이전에 삭제하시기 바랍니다.
              </StyledListItem>
            </StyledText>
            <StyledLeft>
              <CheckBox size="medium" isSelected={agreed} onClick={handleCheckAgree} type="button">
                <StyledButtonText>안내사항을 확인하였으며, 이에 동의합니다.</StyledButtonText>
              </CheckBox>
            </StyledLeft>
            <BoxButton
              style={{ width: '100%' }}
              rounding={8}
              size="large"
              variant="filled"
              onClick={handleWithdrawAgree}
              disabled={!agreed || withdrawMutation.isPending}
            >
              탈퇴하기
            </BoxButton>

[nijuy]

여기 나중에 리뷰 끝나면!! 합치기 전에 develop 한번 pull 해주세요 ㅎㅎ

[2wndrhs]

#216 에서 UserState 전역 상태를 제거해서 여기서도 UserState 관련 코드를 제거해야 될 것 같습니다!