feat: QueryErrorBoundary 컴포넌트 작성

[bbearcookie]

🧩 이슈 번호

• close 전역 쿼리 및 에러 바운더리 설정 #162

✅ 작업 사항

• 전역 쿼리 클라이언트의 옵션을 몇 가지 추가했어요.
• 네트워크 요청 실패에 대한 핸들링을 하는 QueryErrorBoundary 컴포넌트를 만들었어요.
• 네트워크 재요청하는 기능을 포함한 NetworkFallback UI를 만들었어요.
• 홈으로 가는 기능을 포함한 UnknownFallback UI를 만들었어요.

👩‍💻 공유 포인트 및 논의 사항

사용법

• 하위 컴포넌트에서 발생하는 쿼리 에러를 캐치하기 위해서 QueryErrorBoundary 컴포넌트로 래핑해요.
• 에러 발생시 보여주기 위한 UI는 fallback props로 전달해요.
  • fallback 을 위해서 사용할 수 있는 2가지의 UI 컴포넌트를 만들어뒀어요.

예시

  return (
    <>
      <QueryErrorBoundary fallback={<NetworkFallback />}>
          <Suspense fallback={<LoadingFallback />}>
            <RoomTab roomId={roomId} />
          </Suspense>
      </QueryErrorBoundary>
    </>
  );

NetworkFallback

• 네트워크 요청 실패 시 사용하기에 유용한 컴포넌트로, 재요청 버튼이 존재합니다.

GOMCAM.20231117_1615210212.mp4

UnknownFallback

• 알 수 없는 에러를 캐치하기 위한 컴포넌트로, 전역에 등록하기 위함입니다.
• 홈으로 갈 수 있는 버튼이 존재합니다.

[netlify]

✅ Deploy Preview for moabam-storybook ready!

Name	Link
🔨 Latest commit	edc01b7
🔍 Latest deploy log	https://app.netlify.com/sites/moabam-storybook/deploys/6558ff40f918ae00084a05f4
😎 Deploy Preview	https://deploy-preview-163--moabam-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nayeon-hub]

최고..👍🏻👍🏻

[chasj0326]

데이터 패칭 서스펜스 fallback 에 NetworkFallback 을 넣기만 하면 되네용 너무 편안