class LogicErrorBoundary extends CommonErrorBoundary<LogicErrorBoundaryProps> {
	constructor(props: LogicErrorBoundaryProps & ErrorBoundaryProps) {
		super(props);
	}
	componentDidUpdate(_: never, prevState: ErrorBoundaryState) {
		if (prevState.error === this.state.error || !this.state.error) {
			return;
		}
		const { showSnackBar, navigate } = this.props;
		const errorCode = this.state.error.errorCode;
		if (
			typeof errorCode === 'undefined' ||
			typeof showSnackBar === 'undefined' ||
			typeof navigate === 'undefined'
		) {
			throw new CustomError('9999', '빠진 인자가 없는지 확인해주세요');
		}
		const errorMessage = ErrorMessage[errorCode];
		if (isExpiredTokenError(errorCode)) {
			navigate(URL.REFRESH_TOKEN_HANDLER);
		}
		if (isVoteError(errorCode)) {
			navigate(-1);
		}
		if (isNotAccessVoteError(errorCode)) {
			navigate(URL.CATEGORY_DISCUSSION);
		}
		if (isCommentError(errorCode)) {
			queryClient.invalidateQueries('comments');
		}
		if (isAlreayLoginRefreshTokenError(errorCode)) {
			navigate(URL.HOME);
		}
		if (isInvalidRefreshTokenError(errorCode)) {
			localStorage.removeItem(ACCESSTOKEN_KEY);
			window.location.href = URL.HOME;
		}
      // 모든 에러에 대해서는 스낵바를 보여준다.
		showSnackBar(errorMessage);
      // Server에러나 NotFound에러는 LogicErrorBoundary의 부모인 FallbackErrorBoundary에게 에러를 던져 처리를 위임한다.
		if (isServerError(errorCode) || isNotFoundArticleError(errorCode)) {
			throw new CustomError(errorCode);
		}
		if (this.state.error !== null && prevState.error !== null) {
			this.reset();
		}
	}

class FallbackErrorBoundary extends CommonErrorBoundary<FallbackErrorBoundaryProps> {
  constructor(props: FallbackErrorBoundaryProps & ErrorBoundaryProps) {
    super(props);
  }
  componentDidUpdate(_: never, prevState: ErrorBoundaryState) {
    if (prevState.error === this.state.error || !this.state.error) {
      return;
    }
    if (prevState.error !== null) {
      this.reset();
    }
  }
  render() {
    const { children, serverErrorFallback, NotFoundErrorFallback } = this.props;
    if (this.state.error) {
      if (String(this.state.error.errorCode) === '0000') {
        return serverErrorFallback;
      }
      return NotFoundErrorFallback;
    }
    return children;
  }
}

import { useNavigate } from 'react-router-dom';
import useSnackBar from '@/hooks/common/useSnackBar';
function WithHooksHOC<F>(Component: React.ComponentType<F>) {
	return function Hoc(props: F) {
		const { showSnackBar } = useSnackBar();
		const navigate = useNavigate();
		return <Component {...props} showSnackBar={showSnackBar} navigate={navigate} />;
	};
}
export default WithHooksHOC;
// LogicErrorBoundary
export default WithHooksHOC(LogicErrorBoundary);

try {
  // 비동기 에러 발생!
} catch (err) {
  console.log(err.message);
}

const [error, setError] = useState(null);
try {
  fetch('some url').catch(err => {
    setError(err);
  });
} catch (err) {
  //
}
useEffect(() => {
  if (error) {
    throw new Error(error.message);
  }
}, [error]);

useEffect(() => {
  if (error) {
    if (!error.response) {
      throw new CustomError('9999', '런타임 에러');
    }
    if (typeof error.response.data === 'undefined') {
      throw new CustomError('0000', '네트워크에 에러가 발생하였습니다.');
    } // 네트워크 에러
    throw new CustomError(
      error.response.data.errorCode,
      ErrorMessage[error.response.data.errorCode],
    ); // 일반 API에러
  }
}, [error]);