[FE] 리뷰완료 한번에 클릭 시 일어나는 문제 해결(#781)

[github-actions]

📓 스토리북 링크

바로가기

📌 관련 이슈

• closed : [FE] 리뷰완료 한번에 클릭 시 일어나는 문제 해결 #781

✨ PR 세부 내용

• 리뷰완료 한번에 클릭 시 일어나는 문제 해결
• 참여하기 버튼 클릭 시 private 방에서만 PR 작성에 대한 추가 문구가 보이도록 수정

리뷰완료 한번에 클릭 시 일어나는 문제 해결

기존에 문제가 발생한 이유는

  const handleReviewCompleteClick = (reviewee: ReviewInfo) => {
    if (loadingButtonId.includes(reviewee.userId)) return;
    setLoadingButtonId((prev) => [...prev, reviewee.userId]);

    postReviewCompleteMutation.mutate(
      { roomId: roomInfo.id, revieweeId: reviewee.userId },
      {
        onSuccess: () => {
          handleNavigateFeedbackPage(reviewee);
          setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId));
        },
        onError: () => setLoadingButtonId((prev) => prev.filter((id) => id !== reviewee.userId)),
      },
    );
}

해당 코드에서 여러번 handleReviewCompleteClick을 호출하게 됐을 때 첫 번째의 onError 콜백이 실행되기 전에 2번째 handleReviewCompleteClick 요청이 들어오게 되면서 postReviewCompleteMutation.mutate 함수가 오버라이딩이 되면서 기존의 이전 요청에 대해 정상적으로 처리되지 않는 문제가 있었어요

그래서 mutateAsync로 함수를 변경하여 각각의 mutate 처리를 비동기적으로 처리하도록 하여 해결했어요!

Screen.Recording.2024-11-21.at.6.32.53.PM.mov

로컬환경이라 에러가 났을때 저렇게 보이는데 배포환경에서는 정상적으로 보일거에요

[chlwlstlf]

mutateAsync를 처음 들어봤는데 공식 문서에서도 찾기가 조오금 어렵네요...! dev 환경에서 최종 확인 한 번 해봅시다!(이번엔 제가 클릭 좀 빠르게 할게요😂)

[chlwlstlf]

해당 mutation을 mutateAsync로 실행할 수 있군요..!! 새로운 것 알아갑니다👍👍
같은 mutation 호출로 오버라이딩이 되는 상황에서 mutateAsync를 활용하면 될 것 같네요!

mutateAsync는 promise를 반환해서 코드가 바꼈군여 finally에 로딩 배열에서 해당 id 제거하는 작업을 넣어서 가독성이 더 좋아진 것 같습니다!!

[pp449]

async/await 보다는 then 체이닝 메서드를 좋아하는 분은 mutateAsync를 많이 사용한다고 하더라구요

mutate 와 mutateAsync의 차이가 단순히 취향차이인줄 알았는데 이렇게 사용에 대한 차이가 있다는 것을 해당 작업하면서 알게됐어요!