Libraryコンポーネント

Libraryコンポーネント

ユーザーがブックマークした公開作品を管理するためのコンポーネント群です。

ExpandableGrid

グリッドレイアウトとインラインエクスパンダー（詳細パネル）を提供する汎用コンポーネントです。

• 責務:
  • レスポンシブなグリッドレイアウトの提供（2〜7列）
  • アイテムのクリックによる詳細パネルの展開・収縮
  • 選択されたアイテムの視覚的な強調表示
  • 詳細パネルへの自動スクロール
  • Framer Motionによる滑らかなアニメーション
• 主要なProps:
  • items: 表示するアイテムの配列
  • renderCard: 各アイテムのカードをレンダリングする関数 (item, isSelected, onClick) => ReactNode
  • renderDetail: 詳細パネルをレンダリングする関数 (item, onClose) => ReactNode
  • keyExtractor: アイテムから一意なキーを抽出する関数
  • className: グリッドコンテナに適用する追加のCSSクラス
• 使用例:

  <ExpandableGrid
    items={projects}
    renderCard={(project, isSelected, onClick) => (
      <ProjectCard {...project} onClick={onClick} />
    )}
    renderDetail={(project, onClose) => (
      <ProjectDetailPanel project={project} onClose={onClose} />
    )}
    keyExtractor={(p) => p.id}
  />

• 設計思想:
  • レンダープロップパターン: カードと詳細パネルのレンダリングロジックを外部から注入可能にすることで、高い再利用性を実現
  • レスポンシブ対応: useWindowSizeフックで画面幅を監視し、動的に列数を調整
  • アニメーション: LayoutGroupとAnimatePresenceで自然な展開・収縮アニメーションを実現

LibraryPageClient

ライブラリページのクライアント側ロジックを管理するコンポーネントです。

• 責務:
  • ライブラリアイテムの表示（ExpandableGridを使用）
  • ドラッグ＆ドロップによる並べ替え機能
  • 並び順の変更をバックエンドAPIに送信
  • ライブラリからのアイテム削除（楽観的UI更新）
• 主要なProps:
  • initialItems: サーバーから取得した初期ライブラリアイテム
• 使用している主要なライブラリ:
  • @dnd-kit/core: ドラッグ＆ドロップのコア機能
  • @dnd-kit/sortable: ソート可能なリストの実装
• UI統合:
  • ProjectCardコンポーネントを使用して各ライブラリアイテムを表示
  • ProjectCardにoriginalLanguageプロパティを渡し、作品のオリジナル言語をバッジとして表示
  • OriginalLanguageBadgeコンポーネントを活用して多言語対応を強化
• 関連APIエンドポイント:
  • PATCH /api/library: 並び順の一括更新
  • DELETE /api/library?projectId={id}: アイテムの削除

BookmarkButton

作品をライブラリに追加・削除するためのトグルボタンコンポーネントです。

• 責務:
  • ブックマーク状態の表示（塗りつぶしアイコン/アウトラインアイコン）
  • ワンクリックでのライブラリへの追加・削除
  • 楽観的UI更新（即座に状態を反映し、エラー時にロールバック）
  • トースト通知による操作フィードバック
• 主要なProps:
  • projectId: ブックマーク対象の作品ID
  • initialIsBookmarked: 初期のブックマーク状態（boolean）
  • className: 追加のCSSクラス
• 使用箇所:
  • Exploreページ: カードのホバー時、詳細パネル
  • Readerページ: ヘッダー
• 関連APIエンドポイント:
  • POST /api/library: ライブラリに追加
  • DELETE /api/library?projectId={id}: ライブラリから削除