[Fix] 카드 옵션 선택 시 POST 409 요청 오류

[sooyeoniya]

🖥️ Preview

오류 화면

POST.409.mov

버그 수정 후

200.POST.409.mov

close #200

✏️ 한 일

카드 옵션 선택 시 카드 옵션 연타를 계속 하면 post 보낼 때 409 오류가 뜬다.
카드 연타할 경우 POST가 두 번 보내져서 이미 요청한 사용자에 대해서 계속 요청 보내지는 오류 발생하는 것이었다.
throttle 걸어줘서 POST 요청을 1초 정도 딜레이 줘서 요청이 한 번만 가도록 수정했다.

수정 후 몇 번이나 테스트했는데 409 오류는 발생하지 않았다.
우연히 요청을 한 번밖에 못보낸 건지는 모르겠지만 우선 안전성을 위해 처리해뒀다.

const [throttle, setThrottle] = useState<boolean>(false);

const {
    data: postSelectedRushOptionResponse,
    isSuccess: isSuccessPostSelectedRushOption,
    isLoading: isLoadingPostSelectedRushOption,
    fetchData: postSelectedRushOptionApply,
} = useFetch<RushEventStatusCodeResponse, { token: string; optionId: CardOption }>(
    ({ token, optionId }) => RushAPI.postSelectedRushOptionApply(token, optionId),
    false
);

const handleCardSelection = async (optionId: CardOption) => {
    if (!throttle && !isLoadingPostSelectedRushOption) {
        await postSelectedRushOptionApply({
            token: cookies[COOKIE_KEY.ACCESS_TOKEN],
            optionId,
        });
        dispatch({ type: RUSH_ACTION.SET_USER_OPTION, payload: optionId });
        setThrottle(true);
        setTimeout(() => {
            setThrottle(false);
        }, 1000);
    }
};

❗️ 발생한 이슈 (해결 방안)

❓ 논의가 필요한 사항

[github-actions]

빌드를 성공했습니다! 🎉