// src/components/ErrorBoundary.tsx
import { Component, type ErrorInfo, type ReactNode } from 'react'
 
interface ErrorBoundaryProps {
  children: ReactNode
}
 
interface ErrorBoundaryState {
  hasError: boolean
}
 
class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = { hasError: false }
 
  static getDerivedStateFromError(): ErrorBoundaryState {
    return { hasError: true }
  }
 
  componentDidCatch(error: Error, info: ErrorInfo) {
    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/pages/BookDetailPage.tsx
import { useParams, Link } from 'react-router'
import { useQuery } from '@tanstack/react-query'
import { getBook } from '../api/books'
import type { Book } from '../types/book'
 
function BookDetailPage() {
  const { id } = useParams<{ id: string }>()
 
  const { data: book, isPending, isError } = useQuery({
    queryKey: ['books', id],
    queryFn: () => getBook(id) as Promise<Book>,
    enabled: Boolean(id),
  })
 
  if (isPending) return <p role="status">책 정보를 불러오는 중입니다...</p>
  if (isError || !book) return <p role="alert">책 정보를 찾을 수 없습니다.</p>
 
  return (
    <article>
      <h1>{book.title}</h1>
      <p>{book.author}</p>
      <p>{book.pages}쪽</p>
      <p>상태: {book.status}</p>
      {book.memo && <p>{book.memo}</p>}
      <Link to="/">목록으로 돌아가기</Link>
    </article>
  )
}
 
export default BookDetailPage

// src/pages/BookListPage.tsx
import { useState, type ChangeEvent } from 'react'
import { useUiStore } from '../store/useUiStore'
import { useDebounce } from '../hooks/useDebounce'
import { useBooks } from '../hooks/useBooks'
import BookTable from '../components/BookTable'
 
function BookListPage() {
  const statusFilter = useUiStore((state) => state.statusFilter)
  const sortBy = useUiStore((state) => state.sortBy)
  const sortOrder = useUiStore((state) => state.sortOrder)
  const searchQuery = useUiStore((state) => state.searchQuery)
  const setSearchQuery = useUiStore((state) => state.setSearchQuery)
  const page = useUiStore((state) => state.page)
  const setPage = useUiStore((state) => state.setPage)
 
  const [searchInput, setSearchInput] = useState<string>(searchQuery)
  const debouncedSearch = useDebounce(searchInput, 300)
 
  if (debouncedSearch !== searchQuery) {
    setSearchQuery(debouncedSearch)
  }
 
  const { data, isPending, isError } = useBooks({
    status: statusFilter,
    sortBy,
    sortOrder,
    search: searchQuery,
    page,
  })
 
  if (isPending) return <p>불러오는 중...</p>
  if (isError) return <p role="alert">목록을 불러오지 못했습니다</p>
 
  const totalPages = Math.max(1, Math.ceil(data.total / data.pageSize))
 
  function handleSearchChange(event: ChangeEvent<HTMLInputElement>) {
    setSearchInput(event.target.value)
  }
 
  return (
    <section>
      <input
        type="search"
        aria-label="책 검색"
        value={searchInput}
        onChange={handleSearchChange}
        placeholder="제목으로 검색"
      />
      <BookTable books={data.items} />
      <nav className="pagination" aria-label="페이지 이동">
        <button type="button" disabled={page <= 1} onClick={() => setPage(page - 1)}>
          이전
        </button>
        <span>
          {page} / {totalPages}
        </span>
        <button type="button" disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
          다음
        </button>
      </nav>
    </section>
  )
}
 
export default BookListPage

// src/pages/LoginPage.tsx
import { useState, type FormEvent } from 'react'
import { useNavigate, useLocation } from 'react-router'
import { useAuth } from '../context/AuthContext'
 
interface LoginLocationState {
  from?: string
}
 
function LoginPage() {
  const navigate = useNavigate()
  const location = useLocation()
  const { login } = useAuth()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
 
  const state = location.state as LoginLocationState | null
  const from = state?.from ?? '/'
 
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setError('')
    setIsSubmitting(true)
    try {
      await login(email, password)
      navigate(from, { replace: true })
    } catch (err) {
      setError(err instanceof Error ? err.message : '로그인에 실패했습니다.')
    } finally {
      setIsSubmitting(false)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <h1>로그인</h1>
      <label htmlFor="email">이메일</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(event) => setEmail(event.target.value)}
        required
      />
 
      <label htmlFor="password">비밀번호</label>
      <input
        id="password"
        type="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
        required
      />
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '로그인 중...' : '로그인'}
      </button>
 
      {error && <p role="alert">{error}</p>}
    </form>
  )
}
 
export default LoginPage

// src/pages/NotFoundPage.tsx
import { Link } from 'react-router'
 
function NotFoundPage() {
  return (
    <div className="route-error">
      <h1>페이지를 찾을 수 없습니다</h1>
      <Link to="/">목록으로 돌아가기</Link>
    </div>
  )
}
 
export default NotFoundPage

// src/router.tsx
import { createBrowserRouter, type RouteObject } from 'react-router'
import type { ReactElement } from 'react'
import BookListPage from './pages/BookListPage'
import BookDetailPage from './pages/BookDetailPage'
import NewBookPage from './pages/NewBookPage'
import LoginPage from './pages/LoginPage'
import NotFoundPage from './pages/NotFoundPage'
import ErrorBoundary from './components/ErrorBoundary'
import ProtectedRoute from './components/ProtectedRoute'
import SessionWatcher from './components/SessionWatcher'
 
function guarded(element: ReactElement): ReactElement {
  return (
    <ProtectedRoute>
      <ErrorBoundary>{element}</ErrorBoundary>
    </ProtectedRoute>
  )
}
 
const routes: RouteObject[] = [
  {
    element: <SessionWatcher />,
    children: [
      { path: '/', element: guarded(<BookListPage />) },
      { path: '/books/new', element: guarded(<NewBookPage />) },
      { path: '/books/:id', element: guarded(<BookDetailPage />) },
      { path: '/login', element: <LoginPage /> },
      { path: '*', element: <NotFoundPage /> },
    ],
  },
]
 
export const router = createBrowserRouter(routes)

npm run dev