Endo Admin Dashboard

기존 useQuery 기반 명령형 상태 관리는 isPending, isError, data null 체크 등 보일러플레이트 코드 산재. 컴포넌트마다 다른 로딩/에러 처리 방식으로 일관성 부족. props drilling으로 전달되는 initialData로 인한 타입 복잡도 증가.

useSuspenseQuery + ErrorBoundary 패턴 도입. - useCustomSuspenseQuery 커스텀 훅 설계: API 응답 자동 unwrapping 및 타입 안정성 확보. - ErrorBoundaryProvider 구현: 전역 에러 처리 및 QueryClient 자동 리셋 기능. - react-error-boundary 라이브러리 도입으로 표준화된 에러 처리.

advantages

Suspense의 선언적 API로 컴포넌트에서 로딩/에러 상태 관리 코드 완전 제거, ErrorBoundary로 에러 처리를 컴포넌트 트리 상위로 위임하여 관심사 분리

disadvantages

Suspense는 SSR에서 폴백 UI가 서버 렌더링되지 않음. 마이그레이션 시 CSR 위주 페이지(대시보드, 관리자 페이지)부터 단계적 적용하고, SEO 중요 페이지는 Streaming SSR 또는 서버 컴포넌트 직접 fetch 방식 병행 필요

rationale

관리자 대시보드는 SEO가 불필요하고 인증 후 접근하므로 Suspense의 이점이 단점보다 크다고 판단

- 보일러플레이트 코드 제거: isPending, isError, initialData, null 체크 로직 완전 제거. - 타입 안정성 향상: MapData | null → MapData. - 에러 처리 일관성: ErrorBoundary로 모든 비동기 에러 중앙 집중 처리.

Suspense는 단순 로딩 처리가 아닌 컴포넌트의 관심사 분리 철학을 구현하는 도구. - 선언적 API 설계: '무엇을 보여줄지'만 정의, '언제 보여줄지'는 프레임워크에 위임. 추상화 계층 추가 시 초기 코드량 증가하지만, 이후 모든 컴포넌트에서 반복 코드 제거 효과.