npm run build
npm run preview
npx lighthouse http://localhost:4173 --view --only-categories=accessibility

// 수정 전 (07편 산출물, 발췌)
function LoginPage() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState(null)
 
  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="이메일" value={email} onChange={(e) => setEmail(e.target.value)} />
      {error && <p className="error">{error}</p>}
      <button type="submit">로그인</button>
    </form>
  )
}

// 수정 후
function LoginPage() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState(null)
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="login-email">이메일</label>
      <input
        id="login-email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        aria-invalid={Boolean(error)}
      />
      <p role="alert" aria-live="polite">
        {error}
      </p>
      <button type="submit">로그인</button>
    </form>
  )
}

// src/pages/NewBookPage.jsx (발췌, 제목 필드)
<label htmlFor="book-title">제목</label>
<input
  id="book-title"
  {...register('title')}
  aria-invalid={Boolean(errors.title)}
  aria-describedby={errors.title ? 'book-title-error' : undefined}
/>
{errors.title && (
  <p id="book-title-error" role="alert">
    {errors.title.message}
  </p>
)}

// src/components/BookTable.jsx (발췌 — books·onSelectBook props는 17편 코드 유지)
function BookTable({ books, onSelectBook }) {
  const sortBy = useUiStore((state) => state.sortBy)
  const sortOrder = useUiStore((state) => state.sortOrder)
  const setSort = useUiStore((state) => state.setSort)
 
  function ariaSortFor(key) {
    if (sortBy !== key) return 'none'
    return sortOrder === 'asc' ? 'ascending' : 'descending'
  }
 
  return (
    <table>
      <caption className="sr-only">책 목록, 열 제목을 눌러 정렬합니다</caption>
      <thead>
        <tr>
          <th scope="col" aria-sort={ariaSortFor('title')}>
            <button type="button" onClick={() => setSort('title')}>제목</button>
          </th>
          <th scope="col" aria-sort={ariaSortFor('author')}>
            <button type="button" onClick={() => setSort('author')}>저자</button>
          </th>
          <th scope="col">쪽수</th>
          <th scope="col">상태</th>
        </tr>
      </thead>
      {/* ...tbody는 17편 코드(BookRow 매핑) 그대로... */}
    </table>
  )
}

/* src/index.css (추가) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
 
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

// src/components/Modal.jsx
import { useEffect, useRef } from 'react'
 
export function Modal({ isOpen, onClose, title, children }) {
  const dialogRef = useRef(null)
  const previouslyFocused = useRef(null)
 
  useEffect(() => {
    if (!isOpen) return
    previouslyFocused.current = document.activeElement
    dialogRef.current?.focus()
 
    function handleKeyDown(event) {
      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}
        <button type="button" onClick={onClose} aria-label="닫기">
          닫기
        </button>
      </div>
    </div>
  )
}