[feat] Mutation 에러 시 Toast Message, Query 에러 발생에 대비한 LocalQueryErrorBoundary 구현

[seongjin2427]

Pull Request 요약

PR에 대한 내용을 작성해주세요.

에러 핸들링을 위한 로직 구현

작업 내용

작업 내용에 대해서 작성해주세요.

• Tanstack-query의 useMutation를 통해 서버 요청 중 에러 발생 시, 응답으로 전달되는 에러 메시지를 토스트 메시지로 표시합니다.
• LocalQueryErrorBoundary
  • 특정 컴포넌트에서 Tanstack-query의 useQuery를 통해 에러 발생 시, 본 컴포넌트로 감싸 재시도할 수 있는 Fallback UI를 표시합니다.
  • default Fallback UI가 지정되어 있으나, 필요시 fallback prop을 통해 전달할 수 있습니다. (전달한 fallback UI는 아래와 같은 props를 전달받습니다.)
  • error: Error: 발생한 에러 정보를 담고 있는 객체입니다.
  • resetErrorBoundary: () => void: 해당 메서드를 실행하면, Fallback UI로 전환되기 이전의 상태로 되돌립니다.

참고 사항

참고 사항이 있다면 첨부해주세요.

관련 이슈

closing할 이슈 번호를 작성해주세요.

• Close #이슈번호

[netlify]

❌ Deploy Preview for prostargram failed. Why did it fail? →

Name	Link
🔨 Latest commit	b1cedc2
🔍 Latest deploy log	https://app.netlify.com/sites/prostargram/deploys/677b7fb464d6890008895e18

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

[lee1nna]

여기서 error의 타입을 HttpResponseType으로 바꾸고
error.code 값이 401이나 403같이 재로그인이 필요한 경우 '인증이 만료되었습니다. 다시 로그인 해주세요.' 와 같은 팝업 에러로
분기 처리 하는건 어떨까요 ?!

interface ErrorComponentProps extends FallbackProps {
  error: HttpResponseType;
  resetErrorBoundary: () => void;
}

  const { error, resetErrorBoundary } = props;

  const errorComponentByErrorCode = () => {
    if (error.code === (401 | 403)) {
      return <>다시 로그인 해주세요 팝업</>;
    } else {
      <div className={styles.error_box}>
        <p className={styles.error_message}>{error?.message}</p>
        <Button
          type="button"
          className={styles.error_button}
          fill="gray"
          onClick={resetErrorBoundary}
        >
          다시 시도하기
        </Button>
      </div>;
    }
  };

  return errorComponentByErrorCode();

[seongjin2427]

좋은 의견 감사합니다!

다만, 해당 Fallback UI(LocalQueryErrorBoundary prop 중 fallback의 default 컴포넌트)의 역할은
에러가 발생한 지역적인 UI에 대해 대체 UI를 렌더링하는 것이라고 생각해요!
401, 403 에러 코드에 대해서 로그인 해야 한다는 팝업은 Fallback UI와 조금 그 의미와 역할이 다르다고 생각합니다 하하.

401, 403 에러 코드에 대해 팝업을 띄워 로그인을 강제해야 한다는 의견은 저도 동의하기 때문에,
현재 구현한 default Fallback UI와는 별개로 팝업창을 띄울 수 있게 추가 구현하겠습니다! 🤗