// src/components/ErrorBoundary.jsx
import { Component } from 'react';
 
class ErrorBoundary extends Component {
  state = { hasError: false };
 
  static getDerivedStateFromError() {
    return { hasError: true };
  }
 
  componentDidCatch(error, info) {
    console.error('렌더링 오류:', error, info.componentStack);
  }
 
  render() {
    if (this.state.hasError) {
      return (
        <div role="alert" className="error-fallback">
          <p>이 화면을 표시하는 중 문제가 발생했습니다.</p>
          <button type="button" onClick={() => this.setState({ hasError: false })}>
            다시 시도
          </button>
        </div>
      );
    }
 
    return this.props.children;
  }
}
 
export default ErrorBoundary;

// src/router.jsx
import { lazy, Suspense } from 'react';
import { createBrowserRouter, Link, useRouteError } from 'react-router';
import ErrorBoundary from './components/ErrorBoundary.jsx';
import BookListPage from './pages/BookListPage.jsx';
import NewBookPage from './pages/NewBookPage.jsx';
 
// 상세 페이지는 목록보다 무겁고 처음 진입 시에는 필요 없으므로 지연 로딩합니다.
const BookDetailPage = lazy(() => import('./pages/BookDetailPage.jsx'));
 
function RouteErrorPage() {
  // ...04편에서 만든 내용 유지
  const error = useRouteError();
  return (
    <div className="route-error">
      <h1>{error?.status === 404 ? '페이지를 찾을 수 없습니다' : '문제가 발생했습니다'}</h1>
      <Link to="/">목록으로 돌아가기</Link>
    </div>
  );
}
 
function DetailBoundary() {
  return (
    <ErrorBoundary>
      <Suspense fallback={<p className="page-loading">상세 정보를 불러오는 중입니다...</p>}>
        <BookDetailPage />
      </Suspense>
    </ErrorBoundary>
  );
}
 
export const router = createBrowserRouter([
  { path: '/', element: <BookListPage />, errorElement: <RouteErrorPage /> },
  { path: '/books/new', element: <NewBookPage /> },
  {
    path: '/books/:bookId',
    // loader는 컴포넌트 코드와 별개로 항상 즉시 로드됩니다. lazy 대상은 화면(element)만입니다.
    loader: (args) => import('./pages/BookDetailPage.jsx').then((m) => m.bookDetailLoader(args)),
    element: <DetailBoundary />,
    errorElement: <RouteErrorPage />,
    // ...04편에서 만든 children(BookSummaryView, BookMemoView) 유지
  },
]);

npm run dev