// packages/ui/package.json
{
  "name": "@bookshelf/ui",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "scripts": {
    "build": "tsc -b"
  },
  "dependencies": {
    "@bookshelf/shared-types": "workspace:*"
  },
  "peerDependencies": {
    "react": "^19.3.0",
    "react-dom": "^19.3.0"
  },
  "devDependencies": {
    "typescript": "^7.0.2",
    "@types/react": "^19.3.0",
    "@types/react-dom": "^19.3.0"
  }
}

// packages/ui/tsconfig.json
{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "composite": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "jsx": "react-jsx",
    "lib": ["ES2023", "DOM", "DOM.Iterable"]
  },
  "include": ["src"],
  "references": [{ "path": "../shared-types" }]
}

// packages/ui/src/BookCard.tsx
import type { Book } from '@bookshelf/shared-types'
 
interface BookCardProps {
  book: Book
}
 
function BookCard({ book }: BookCardProps) {
  return (
    <article className="book-card">
      {book.coverUrl ? (
        <img className="book-cover" src={book.coverUrl} alt={`${book.title} 표지`} />
      ) : (
        <div className="book-cover-placeholder" aria-hidden="true" />
      )}
      <h3>{book.title}</h3>
      <p>{book.author}</p>
      <p>{book.pages}쪽</p>
    </article>
  )
}
 
export default BookCard

// packages/ui/src/StatusBadge.tsx
type StatusBadgeProps =
  | { status: 'wish' }
  | { status: 'reading'; startedAt: string }
  | { status: 'done'; rating: number }
 
function StatusBadge(props: StatusBadgeProps) {
  if (props.status === 'reading') {
    return <span className="badge badge-reading">읽는 중 · {props.startedAt}부터</span>
  }
  if (props.status === 'done') {
    return <span className="badge badge-done">완독 · 별점 {props.rating}</span>
  }
  return <span className="badge badge-wish">읽고 싶어요</span>
}
 
export default StatusBadge
export type { StatusBadgeProps }

// packages/ui/src/Modal.tsx
import { useEffect, useRef, type ReactNode } from 'react'
 
interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title: string
  children: ReactNode
}
 
export function Modal({ isOpen, onClose, title, children }: ModalProps) {
  const dialogRef = useRef<HTMLDivElement>(null)
  const previouslyFocused = useRef<HTMLElement | null>(null)
 
  useEffect(() => {
    if (!isOpen) return
    previouslyFocused.current = document.activeElement as HTMLElement | null
    dialogRef.current?.focus()
 
    function handleKeyDown(event: KeyboardEvent): void {
      if (event.key === 'Escape') onClose()
    }
 
    document.addEventListener('keydown', handleKeyDown)
    return () => {
      document.removeEventListener('keydown', handleKeyDown)
      previouslyFocused.current?.focus()
    }
  }, [isOpen, onClose])
 
  if (!isOpen) return null
 
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div
        ref={dialogRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="modal-title"
        tabIndex={-1}
        onClick={(event) => event.stopPropagation()}
      >
        <h2 id="modal-title">{title}</h2>
        {children}
      </div>
    </div>
  )
}

// packages/ui/src/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
}
 
function 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
export type { DataTableColumn }

// packages/ui/src/index.ts
export { default as BookCard } from './BookCard'
export { default as StatusBadge } from './StatusBadge'
export type { StatusBadgeProps } from './StatusBadge'
export { Modal } from './Modal'
export { default as DataTable } from './DataTable'
export type { DataTableColumn } from './DataTable'

// tsconfig.json (루트, references 배열만 발췌)
{
  "files": [],
  "references": [
    { "path": "packages/shared-types" },
    { "path": "packages/ui" },
    { "path": "apps/web" }
  ]
}

// apps/web/tsconfig.app.json (references 배열만 발췌 — 16편에서 shared-types 참조를 추가했던 바로 그 파일)
{
  "references": [
    { "path": "../../packages/shared-types" },
    { "path": "../../packages/ui" }
  ]
}

// apps/web/package.json (dependencies 발췌)
{
  "dependencies": {
    "@bookshelf/shared-types": "workspace:*",
    "@bookshelf/ui": "workspace:*"
  }
}

// apps/web/src/pages/BookListPage.tsx (import 부분만 발췌 — 나머지는 기존 코드 유지)
import { DataTable, BookCard, StatusBadge } from '@bookshelf/ui'
import type { Book } from '@bookshelf/shared-types'

pnpm install
pnpm --filter @bookshelf/ui build
pnpm -w exec tsc -b
pnpm --filter @bookshelf/web dev