코드보기 : https://github.com/maplesyrup0423/DevTyper

이슈

api 호출이 많을 경우 403에러가 발생한다.

조치

403 에러가 발생할 경우 사용자에게 Alert로 "잠시 후 다시 시도해주세요" 라는 메세지를 출력한다.

 if (!response.ok) {
        console.log(`${randomRepo}의 GitHub API 요청 실패: ${response.status}`);
        if (response.status === 403) {
          console.error("API 요청이 금지되었습니다. 잠시 후 다시 시도합니다.");
          alert("잠시 후 다시 시도해주세요");
          setIsDisabled(true);
          return; // 403 오류가 발생했을 때 더 이상 요청하지 않음
        }
        return; // 요청 실패 시 함수 종료
      }

일반 Alert 의 경우 확인 버튼을 눌러야만 사라진다.

하지만 내가 구현하고자 하는 방향은 일정 시간 동안만 보여주고 알아서 사라지는 방식이다.

이를 간단하게 구현하기 위해 SweetAlert2 라이브 러리는 사용하겠다.

1. SweetAlert2 설치

npm install sweetalert2

2. 코드 수정

alert("잠시 후 다시 시도해주세요");

대신

             Swal.fire({
            position: "top",
            icon: "error",
            title: "잠시 후 다시 시도해주세요",
            showConfirmButton: false,
            timer: 2000,
            customClass: {
              title: "custom-title",
              popup: "custom-popup",
            },
          });

사용

import Swal from "sweetalert2";

임포트 해줘야함.

나의경우 customClass를 사용해서 배경색, 글자색, 글자 크기를 수정하였다.

.custom-title {
  font-size: 20px;
  color: white;
}
.custom-popup {
  background-color: rgb(54, 54, 54); 
}

결과

2초 후 자동으로 사라진다.

번외

  const [isDisabled, setIsDisabled] = useState(false);

 if (!response.ok) {
        console.log(`${randomRepo}의 GitHub API 요청 실패: ${response.status}`);
        if (response.status === 403) {
          console.error("API 요청이 금지되었습니다. 잠시 후 다시 시도합니다.");
           Swal.fire({
            position: "top",
            icon: "error",
            title: "잠시 후 다시 시도해주세요",
            showConfirmButton: false,
            timer: 2000,
            customClass: {
              title: "custom-title",
              popup: "custom-popup",
            },
          });
          setIsDisabled(true);
          return; // 403 오류가 발생했을 때 더 이상 요청하지 않음
        }
        return; // 요청 실패 시 함수 종료
      }

 <textarea
          placeholder="코드를 따라 입력하세요"
          value={userInput}
          onChange={handleInputChange}
          onKeyDown={handleKeyDown}
          autoComplete="off" // 자동 완성 비활성화
          spellCheck="false" // 맞춤법 검사 비활성화
          disabled={isPaused || isFinished || isDisabled}
          ref={textareaRef}
        />

403 에러의 경우 textarea 비활성화 코드를 추가했다.