モーダル内のカード絞り込み機能

[y4shiro]

• [x] 大まかな機能設計
• [x] filterSlice.ts 作成
• [x] CardFilter コンポーネント作成
• [x] 絞り込み用のクエリを filterSlice の state から作成し、CardModal コンポーネントで絞り込みクエリを適用
• [x] CardFilter コンポーネントのスタイルを整える
  • [x] チェックボックスをアイコンに差し替え
  • [x] チェックボックスのオンオフをカラー/モノクロで表現
  • [x] レスポンシブ対応
  • [x] CardFilter を上部に固定したい
  • [x] アイコン未選択時の透明度を下げる
• [x] フィルターのリセットボタン設置

[y4shiro]

大まかな機能設計

ゲーム内では絞り込みの項目が多岐にわたるが、本アプリではシンプルにしたい カードのレアリティとタイプくらいで良さそう

選択状態は useReducer でも良いが、Redux Toolkit に任せたほうがコード量も減って楽なので Redux を採用 filterSlice.ts を作成する

[y4shiro]

filterSlice.ts 作成

https://github.com/y4shiro/uma-card-deck-tools/blob/1db64e6145694ffab63537283426b3ed49277e6c/src/features/Support/CardDeck/CardModal/filterSlice.ts#L1-L49

[y4shiro]

CardFilter コンポーネント作成

https://github.com/y4shiro/uma-card-deck-tools/blob/1db64e6145694ffab63537283426b3ed49277e6c/src/features/Support/CardDeck/CardModal/CardFilter/index.tsx#L1-L39

[y4shiro]

絞り込み用のクエリを filterSlice の state から作成し、CardModal コンポーネントで絞り込みクエリを適用

変更が複数ファイルに跨るので、コード詳細は下記 Commit 参照 feat: CardFilter にカードのタイプやレアリティによるフィルター機能を実装

[y4shiro]

CardFilter コンポーネントのスタイルを整える

実装の詳細は各 Commit を参照する 最終的に下記の UI を実装した

[y4shiro]

フィルターのリセットボタン設置

filterSlice に resetFilter アクションを追加し、リセットボタンを押下した場合に呼び出すようにした feat: フィルターの状態をリセットする resetFilter を filterSlice に定義し、リセットボタンで呼び出すよう実装

[y4shiro]

気になる点など

カード一覧のレンダリングが重い状態なので、Issue 立てて早めに対策したい カードソート機能はいずれ実装したいが優先順位低め

次は取得可能スキルを一覧表示する Skills コンポーネントを実装したい

[y4shiro]

マージしたのでクローズ