shwldshwld5 days ago

パネルUIは一括取得より各パネル独立ロードにする

カンバン風の複数パネルUI（Done / Current / Backlog / Icebox等）で、全データを一括取得→クライアント側で振り分けていた構成を、パネルごとに独立してAPIを叩く方式にリファクタした。

もともとの構成だと、全件取得してからクライアントでフィルタリングしていたため、データ量が増えると初期表示が遅くなり、特定パネルだけページネーションしたいケースに対応できなかった。

リファクタ後の構成:

panelStories:    Record<PanelType, Item[]>
panelLoading:    Record<PanelType, boolean>
panelErrors:     Record<PanelType, string | null>
panelPagination: Record<PanelType, { page: number; hasNext: boolean }>
  1. パネルごとにステートを分離 — loading / error / pagination を Record<PanelType, T> で管理。あるパネルのロード中でも他パネルは操作可能
  2. パネル別のページサイズ — Doneは10件、他は20件のように、パネルの性質に応じたページサイズを設定できる
  3. フィルタ変更時の全パネルリロード — オーナーやラベルのフィルタが変わったら全パネルをpage=1からリロード。共通クエリパラメータを buildSharedQuery() で組み立てて各パネルのリクエストに載せる

トレードオフとして、APIリクエスト数は増える（1回→パネル数分）。ただしパネルごとに並列リクエストできるので体感速度はむしろ改善する。パネル間でアイテムを移動した際のローカルステート同期は mergePanelStories() で全パネルの配列をフラットに結合して保持する形にした。

shwldshwld