// src/components/DataTable.tsx
import type { ReactNode } from 'react'
 
interface WithId {
  id: string | number
}
 
export interface DataTableColumn<T> {
  key: keyof T
  label: string
  sortable?: boolean
  render?: (item: T) => ReactNode
}
 
interface DataTableProps<T extends WithId> {
  items: T[]
  columns: DataTableColumn<T>[]
  sortBy?: keyof T
  sortOrder?: 'asc' | 'desc'
  onSortChange?: (key: keyof T) => void
}
 
const DataTable = <T extends WithId>({ items, columns, sortBy, sortOrder, onSortChange }: DataTableProps<T>) => {
  return (
    <table className="data-table">
      <thead>
        <tr>
          {columns.map((column) => (
            <th key={String(column.key)}>
              {column.sortable && onSortChange ? (
                <button type="button" onClick={() => onSortChange(column.key)}>
                  {column.label}
                  {sortBy === column.key ? (sortOrder === 'asc' ? ' ▲' : ' ▼') : ''}
                </button>
              ) : (
                column.label
              )}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {items.map((item) => (
          <tr key={item.id}>
            {columns.map((column) => (
              <td key={String(column.key)}>{column.render ? column.render(item) : String(item[column.key])}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}
 
export default DataTable

// src/pages/BookListPage.tsx (08편 코드에서 표 연결 부분만 교체 — 검색·페이지네이션 UI는 그대로 유지)
import { useState, type ChangeEvent } from 'react'
import { useUiStore } from '../store/useUiStore.js'
import { useDebounce } from '../hooks/useDebounce.js'
import { useBooks } from '../hooks/useBooks.ts'
import DataTable, { type DataTableColumn } from '../components/DataTable.tsx'
import StatusBadge, { bookToStatusBadgeProps } from '../components/StatusBadge.tsx'
import type { Book } from '../types/book.ts'
 
const BOOK_COLUMNS: DataTableColumn<Book>[] = [
  { key: 'title', label: '제목', sortable: true },
  { key: 'author', label: '저자', sortable: true },
  { key: 'pages', label: '쪽수', sortable: true },
  { key: 'status', label: '상태', render: (book) => <StatusBadge {...bookToStatusBadgeProps(book)} /> },
]
 
function BookListPage() {
  const statusFilter = useUiStore((state) => state.statusFilter)
  const sortBy = useUiStore((state) => state.sortBy)
  const sortOrder = useUiStore((state) => state.sortOrder)
  const setSort = useUiStore((state) => state.setSort)
  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="제목으로 검색"
      />
      <DataTable items={data.items} columns={BOOK_COLUMNS} sortBy={sortBy} sortOrder={sortOrder} onSortChange={setSort} />
      <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

// 재사용 확인용 예시 — Book과 무관한 타입에도 그대로 쓰인다
interface Author {
  id: number
  name: string
  bookCount: number
}
 
const authors: Author[] = [
  { id: 1, name: '로버트 C. 마틴', bookCount: 3 },
  { id: 2, name: '마틴 파울러', bookCount: 5 },
]
 
const AUTHOR_COLUMNS: DataTableColumn<Author>[] = [
  { key: 'name', label: '저자명' },
  { key: 'bookCount', label: '보유 권수', sortable: true },
]
 
function AuthorTable() {
  return <DataTable items={authors} columns={AUTHOR_COLUMNS} />
}

rm src/components/BookTable.jsx

npm run dev