Problem

• 서버 상태 관리는 TanStack Query를 사용합니다.
• 인턴 기간 종료 후 인수인계를 고려해 코드 가독성에 신경 씁니다.
• 데이터를 로드하는 동안 로딩 폴백 UI를 표시합니다.
• 데이터 로드 중 에러가 발생하면 에러 폴백 UI를 표시합니다.
• 단일 책임 원칙을 준수하여 각 컴포넌트는 하나의 작업만 수행하도록 설계합니다.

Problem Solving

• React의 Suspense와 TanStack Query의 useSuspenseQuery를 사용해야겠다고 판단
• 클래스 컴포넌트로 ErrorBoundary 컴포넌트 구현
• 데이터 컴포넌트인 SeatGrid 컴포넌트를 Suspense와 ErrorBoundary로 래핑

Output

• 각 컴포넌트가 하나의 비즈니스 로직에 집중하게 됨

  

• 스켈레톤 UI와 에러 폴백 UI를 통해 사용자 경험 향상

  

  스켈레톤 UI

  

  에러 폴백 UI

Beyond the Problem