プロジェクト管理コンポーネント

プロジェクト管理コンポーネント

プロジェクトの一覧表示や管理を行うためのコンポーネントです。

ProjectCard

個々のプロジェクト情報を表示するための静的なカードコンポーネントです。

• 責務:
  • プロジェクトのカバー画像、タイトル、著者、最終更新日を視覚的に表示する。
  • カバー画像が存在しない場合は、プロジェクトタイトルを背景色付きのプレースホルダーとして表示する。
  • ステータスバッジの表示: Published、Unlisted、Draft の各状態を視覚的に表示。
  • オリジナル言語バッジの表示: OriginalLanguageBadge コンポーネントを使用して多言語対応を強調。
  • プロジェクトの編集、複製、削除アクションをトリガーするためのドロップダウンメニューを提供する。
  • 親から渡される isDragging propに基づき、ドラッグ中のスタイルを適用する（ただし、D&Dのロジック自体は持たない）。
• 主要なProps:
  • title: プロジェクトタイトル（string）
  • authorName: 著者名（string | null）
  • coverImageUrl: カバー画像URL（string | null）
  • updatedAt: 最終更新日（string | null）
  • status: プロジェクトステータス（published | unlisted | draft）
  • variant: カードの種類（private | public | library）
  • isDragging: ドラッグ中かどうかを示すboolean
  • isSelected: 選択状態かどうかを示すboolean
  • onEdit: 編集ボタンが押されたときに呼び出されるコールバック関数
  • onDelete: 削除ボタンが押されたときに呼び出されるコールバック関数
  • onDuplicate: 複製ボタンが押されたときに呼び出されるコールバック関数
  • originalLanguage: オリジナル言語コード（string | null）
• 関連Atoms: なし
• 使用コンポーネント:
  • OriginalLanguageBadge: オリジナル言語を表示するバッジコンポーネント

SortableProjectCard

ProjectCardに、ドラッグ＆ドロップによる並び替え機能とページ遷移機能を追加するラッパーコンポーネントです。

• 責務:
  • @dnd-kit/sortable を利用して、ドラッグ＆ドロップによる並べ替えを可能にする。
  • 内部で ProjectCard をレンダリングし、ドラッグ状態（isDragging）を渡す。
  • カードがクリックされた際に、対応するプロジェクトページ (/project/[id]) へ遷移させる。
  • ドラッグ操作中はページ遷移を無効化し、意図しない画面遷移を防ぐ。
• 主要なProps:
  • project: 表示する ProjectRecord オブジェクト
  • status: プロジェクトステータス
  • variant: カードの種類（private | public）
  • onEdit: 編集コールバック関数
  • onDelete: 削除コールバック関数
  • onDuplicate: 複製コールバック関数（オプション）
  • coverPlaceholderColor: カバー画像がない場合のプレースホルダー色
• 関連Atoms: なし

ProjectCard と SortableProjectCard の違い

• 関心の分離: ProjectCardは純粋な 「表示」 に責務を持ち、SortableProjectCardは 「インタラクション(並べ替えとページ遷移)」 に責務を持ちます。
• 再利用性: ProjectCardは並び替えが不要な他の場所でも再利用可能な、汎用的なコンポーネントです。一方、SortableProjectCardは@dnd-kitを利用した特定のリストコンテキスト内での使用が想定されています。
• ロジックの所在: ページ遷移ロジック (useRouter) や、D&Dの状態管理 (useSortable) はすべて SortableProjectCard にカプセル化されており、ProjectCardはそれらのロジックから独立しています。

StatusBadge

プロジェクトのステータスを視覚的に表示するバッジコンポーネントです。

• 責務:
  • Published: 緑色のチェックマークアイコン付きバッジ
  • Unlisted: 黄色の目アイコン付きバッジ
  • Draft: グレーの編集アイコン付きバッジ
• Props:
  • status: プロジェクトステータス
  • variant: 表示するカードの種類（private の場合のみ表示）