글 작성 로딩 트러블 슈팅 TIL

songhsb·2023년 9월 8일

TIL 스파르타

내일배움캠프

목록 보기

101/106

2023.09.08

오늘의 회고

트러블 슈팅

게시물 중복 POST

문제

게시물 작성 버튼을 연속으로 누르면 똑같은 게시물이 여러번 작성되는 문제가 있었습니다.

해결방안

처음에는 디바운싱을 적용하려고 했습니다. 하지만 게시물을 서버에 POST 요청을 보내는 시간과 디바운싱의 딜레이 시간을 매번 계산할 수는 없기에 부적합하다고 생각했습니다.
POST 요청에 걸리는 시간을 로딩으로 유저에게 알려주고, 그 시간 동안은 게시물을 작성하지 못하게 막는 방법을 선택하게 되었습니다.

해결

작성 버튼이 클릭되면 disabled
로딩화면을 렌더링
POST 요청 성공 시 다른페이지로 이동 후 완료
POST 요청 실패 시 경고창과 함께 버튼 활성화

const [disable, setDisable] = useState(false);

const mutation = useMutation(insertPost, {
	onSuccess: async () => {
      queryClient.invalidateQueries(['partnerPost']);
      navigate('/partner');
    },
  	// 에러가 나면 버튼 다시 활성화
    onError: () => {
      AlertError({});
      setDisable(false);
    },
});

const handleWriteClick = () => {
  	// 버튼 클릭 시 비활성화
  	setDisable(true);
	mutation.mutate(dataToInsert);
};

<button type="button" disabled={disable} onClick={handleWriteClick}>
	작성완료
</button>

// 버튼 클릭 시 로딩
{disable && <LoadingSpinner />}