Function BookShelf3D

src/pages/DiscoverPage/BookShelf3D.tsx:22–592

({
  books, currentIndex,
  getCoverUrl, handleCoverError,
  onCardClick, onFavorite, onNavigate,
}: BookShelf3DProps)

const VISIBLE_RANGE = 3; // Show ±3 books from center

export default function BookShelf3D({
  books, currentIndex,
  getCoverUrl, handleCoverError,
  onCardClick, onFavorite, onNavigate,
}: BookShelf3DProps) {
  const [hoveredCenter, setHoveredCenter] = useState(false);
  const [favAnimating, setFavAnimating] = useState(false);
  const wheelCooldown = useRef(false);

  const handleWheel = useCallback((e: React.WheelEvent) => {
    if (wheelCooldown.current) return;
    wheelCooldown.current = true;
    if (e.deltaY > 0 || e.deltaX > 0) {
      onNavigate('right');
    } else if (e.deltaY < 0 || e.deltaX < 0) {
      onNavigate('left');
    }
    setTimeout(() => { wheelCooldown.current = false; }, 300);
  }, [onNavigate]);

  const handleFavoriteClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    const book = books[currentIndex];
    if (!book || favAnimating) return;
    setFavAnimating(true);
    onFavorite(book);
    setTimeout(() => setFavAnimating(false), 600);
  };

  const centerBook = books[currentIndex];
  const canGoLeft = currentIndex > 0;
  const canGoRight = currentIndex < books.length - 1;

  return (
    <div
      onWheel={handleWheel}
      style={{
        position: 'relative',
        width: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: '0px',
        userSelect: 'none',
      }}
    >
      {/* === Upper section: 3D Bookshelf === */}
      <div style={{
        position: 'relative',
        width: '100%',
        height: 'calc(100vh - 360px)',
        minHeight: '320px',
        maxHeight: '460px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'flex-end',
        perspective: '1200px',