// src/context/FilterContext.jsx
import { createContext, useContext, useState } from 'react';
 
const FilterContext = createContext(null);
 
export function FilterProvider({ children }) {
  const [statusFilter, setStatusFilter] = useState('all');
  const [searchTerm, setSearchTerm] = useState('');
  const [sortBy, setSortBy] = useState('title');
 
  const value = {
    statusFilter,
    setStatusFilter,
    searchTerm,
    setSearchTerm,
    sortBy,
    setSortBy,
  };
 
  return <FilterContext.Provider value={value}>{children}</FilterContext.Provider>;
}
 
export function useFilter() {
  const context = useContext(FilterContext);
  if (context === null) {
    throw new Error('useFilter는 FilterProvider 내부에서만 사용합니다.');
  }
  return context;
}

// src/components/SearchBar.jsx
import { useFilter } from '../context/FilterContext';
 
function SearchBar() {
  const { searchTerm, setSearchTerm } = useFilter();
 
  return (
    <input
      type="search"
      value={searchTerm}
      onChange={(event) => setSearchTerm(event.target.value)}
      placeholder="제목으로 검색"
      aria-label="책 제목 검색"
      className="search-bar"
    />
  );
}
 
export default SearchBar;

// src/components/SortControl.jsx
import { useFilter } from '../context/FilterContext';
 
function SortControl() {
  const { sortBy, setSortBy } = useFilter();
 
  return (
    <select
      value={sortBy}
      onChange={(event) => setSortBy(event.target.value)}
      aria-label="정렬 기준"
      className="sort-control"
    >
      <option value="title">제목순</option>
      <option value="rating">별점순</option>
    </select>
  );
}
 
export default SortControl;

// src/components/Stats.jsx
function Stats({ books }) {
  const total = books.length;
  const ratedBooks = books.filter((book) => book.rating > 0);
  const averageRating =
    ratedBooks.length === 0
      ? 0
      : ratedBooks.reduce((sum, book) => sum + book.rating, 0) / ratedBooks.length;
 
  return (
    <div className="stats">
      <span>총 {total}권</span>
      <span>평균 별점 {averageRating.toFixed(1)}</span>
    </div>
  );
}
 
export default Stats;

// src/components/Header.jsx
import { useTheme } from '../context/ThemeContext';
import { useFilter } from '../context/FilterContext';
import SearchBar from './SearchBar';
import SortControl from './SortControl';
 
const FILTERS = [
  { value: 'all', label: '전체' },
  { value: 'wish', label: '읽고 싶음' },
  { value: 'reading', label: '읽는 중' },
  { value: 'done', label: '다 읽음' },
];
 
function Header() {
  const { theme, toggleTheme } = useTheme();
  const { statusFilter, setStatusFilter } = useFilter();
 
  return (
    <header className="header">
      <h1>bookshelf</h1>
      <button type="button" onClick={toggleTheme}>
        {theme === 'light' ? '다크 모드' : '라이트 모드'}
      </button>
      <div className="filter-bar">
        {FILTERS.map((filter) => (
          <button
            key={filter.value}
            type="button"
            className={statusFilter === filter.value ? 'active' : ''}
            onClick={() => setStatusFilter(filter.value)}
          >
            {filter.label}
          </button>
        ))}
      </div>
      <SearchBar />
      <SortControl />
    </header>
  );
}
 
export default Header;

// src/components/BookList.jsx
import { forwardRef } from 'react';
import BookCard from './BookCard.jsx';
import { useFilter } from '../context/FilterContext.jsx';
 
const BookList = forwardRef(function BookList(
  { books, onDelete, onRate, onToggleStatus, onOpenDetail },
  scrollTargetRef,
) {
  const { statusFilter, searchTerm, sortBy } = useFilter();
 
  const visibleBooks = books
    .filter((book) => statusFilter === 'all' || book.status === statusFilter)
    .filter((book) => book.title.toLowerCase().includes(searchTerm.toLowerCase()))
    .sort((a, b) => {
      if (sortBy === 'rating') return b.rating - a.rating;
      return a.title.localeCompare(b.title);
    });
 
  if (visibleBooks.length === 0) {
    return <p className="empty-state">표시할 책이 없습니다.</p>;
  }
 
  return (
    <ul className="book-list">
      {visibleBooks.map((book) => (
        <li key={book.id}>
          <BookCard
            book={book}
            onDelete={onDelete}
            onRate={onRate}
            onToggleStatus={onToggleStatus}
            onOpenDetail={onOpenDetail}
          />
        </li>
      ))}
      <li ref={scrollTargetRef} className="scroll-sentinel" />
    </ul>
  );
});
 
export default BookList;

// src/App.jsx (Stats 배치 부분만 발췌 — 나머지는 기존 코드 유지)
import Stats from './components/Stats';
// ...기존 import 유지
 
function App() {
  // ...기존 useReducer·useEffect·useRef·selectedBook state 유지
 
  return (
    <Layout>
      <Header />
      <Stats books={books} />
      <BookList
        ref={scrollTargetRef}
        books={books}
        onDelete={handleDeleteBook}
        onRate={handleRateBook}
        onToggleStatus={handleToggleStatus}
        onOpenDetail={handleOpenDetail}
      />
      <BookForm onAddBook={handleAddBook} />
      <Modal isOpen={selectedBook !== null} onClose={handleCloseDetail}>
        {selectedBook && (
          <div className="book-detail">
            <h2>{selectedBook.title}</h2>
            <p>{selectedBook.author}</p>
            <p>{selectedBook.pages}쪽</p>
            <p>{selectedBook.memo || '메모가 없습니다.'}</p>
          </div>
        )}
      </Modal>
    </Layout>
  );
}
 
export default App;

npm run dev