// bookshelf-ts/src/types/book.ts
export type BookStatus = 'wish' | 'reading' | 'done'
 
export interface Book {
  id: number
  title: string
  author: string
  status: BookStatus
  rating: number
  pages: number
  coverColor: string
  coverImage?: string
  startedAt: string
  finishedAt: string | null
  memo: string
}

git mv src/components/BookCard.jsx src/components/BookCard.tsx

// bookshelf-ts/src/components/BookCard.tsx
import { useTranslation } from 'react-i18next'
import type { Book, BookStatus } from '../types/book'
 
interface BookCardProps {
  book: Book
}
 
const STATUS_KEY: Record<BookStatus, string> = {
  wish: 'statusWish',
  reading: 'statusReading',
  done: 'statusDone',
}
 
function formatDate(dateString: string | null, locale: string): string {
  if (!dateString) return '-'
  return new Intl.DateTimeFormat(locale, { dateStyle: 'medium' }).format(new Date(dateString))
}
 
function BookCover({ book }: BookCardProps) {
  if (book.coverImage) {
    return <img className="book-cover" src={book.coverImage} alt={`${book.title} 표지`} />
  }
  return <div className="book-cover-placeholder" style={{ backgroundColor: book.coverColor }} />
}
 
function BookCard({ book }: BookCardProps) {
  const { t, i18n } = useTranslation()
 
  return (
    <li className="book-card">
      <BookCover book={book} />
      <h3>{book.title}</h3>
      <p>{book.author}</p>
      <p>{t(`bookCard.${STATUS_KEY[book.status]}`)}</p>
      <p>{t('bookCard.pages', { count: book.pages })}</p>
      <p>{t('bookCard.startedAt', { date: formatDate(book.startedAt, i18n.language) })}</p>
    </li>
  )
}
 
export default BookCard

git mv src/components/Header.jsx src/components/Header.tsx

// bookshelf-ts/src/components/Header.tsx
import type { ChangeEvent } from 'react'
import { Link } from 'react-router'
import { useTranslation } from 'react-i18next'
import { useTheme } from '../context/ThemeContext'
import { useUiStore } from '../store/useUiStore'
import styles from './Header.module.css'
 
const FILTERS = ['all', 'wish', 'reading', 'done'] as const
 
function Header() {
  const { t, i18n } = useTranslation()
  const { theme, toggleTheme } = useTheme()
  const statusFilter = useUiStore((state) => state.statusFilter)
  const setStatusFilter = useUiStore((state) => state.setStatusFilter)
  const isSidebarOpen = useUiStore((state) => state.isSidebarOpen)
  const toggleSidebar = useUiStore((state) => state.toggleSidebar)
 
  function handleLanguageChange(event: ChangeEvent<HTMLSelectElement>) {
    i18n.changeLanguage(event.target.value)
  }
 
  return (
    <header className={styles.header}>
      <nav className={styles.nav}>
        <Link to="/">{t('header.title')}</Link>
        <Link to="/books/new">{t('header.newBook')}</Link>
      </nav>
      <button type="button" onClick={toggleSidebar} aria-expanded={isSidebarOpen}>
        {t('header.filterToggle')}
      </button>
      {isSidebarOpen && (
        <div className={styles.filterBar}>
          {FILTERS.map((filter) => (
            <button
              key={filter}
              type="button"
              className={statusFilter === filter ? styles.active : ''}
              onClick={() => setStatusFilter(filter)}
            >
              {t(`header.filter.${filter}`)}
            </button>
          ))}
        </div>
      )}
      <label>
        {t('language.label')}
        <select value={i18n.language} onChange={handleLanguageChange}>
          <option value="ko">{t('language.ko')}</option>
          <option value="en">{t('language.en')}</option>
        </select>
      </label>
      <button type="button" onClick={toggleTheme} className={styles.themeButton}>
        {theme === 'dark' ? t('header.lightMode') : t('header.darkMode')}
      </button>
    </header>
  );
}
 
export default Header

git mv src/components/ProtectedRoute.jsx src/components/ProtectedRoute.tsx

// bookshelf-ts/src/components/ProtectedRoute.tsx
import type { ReactNode } from 'react'
import { Navigate, useLocation } from 'react-router'
import { useAuth } from '../context/AuthContext'
 
interface ProtectedRouteProps {
  children: ReactNode
}
 
function ProtectedRoute({ children }: ProtectedRouteProps) {
  const { token } = useAuth()
  const location = useLocation()
 
  if (!token) {
    return <Navigate to="/login" replace state={{ from: location.pathname }} />
  }
 
  return children
}
 
export default ProtectedRoute

// bookshelf-ts/src/pages/BookListPage.jsx (import 부분만 발췌 — 나머지 코드는 그대로)
import Header from '../components/Header.tsx'
import BookCard from '../components/BookCard.tsx'
// ...기존 import·컴포넌트 본문 유지

npx json-server db.json --port 3001
npm run dev