Tasks
1. データグルーピングロジックの実装
- [x] 1.1 MemberDetailPageのuseEffect内で、セッションデータを
studyGroupIdでグルーピングする処理を実装する。グルーピング結果は { studyGroupId, studyGroupName, sessionCount, totalDurationSeconds, sessions: [{ date, durationSeconds }] } の配列として state に保持する
- [x] 1.2 グルーピング結果を勉強会名の日本語ロケール順(
localeCompare('ja'))でソートし、各勉強会内のセッションを日付降順でソートする
2. 勉強会別サマリーカードの実装
- [x] 2.1 勉強会サマリーカードのUI実装(勉強会名、参加回数、合計学習時間を表示)。既存のデザイントークン(
bg-surface, rounded-xl, border-border-light)を使用する
- [x] 2.2 カードクリック時のアコーディオン展開/折りたたみの state 管理を実装する。展開状態は
useState で勉強会IDの Set として管理する
3. 出席履歴詳細テーブルの実装
- [x] 3.1 勉強会カード展開時に表示するセッション出席履歴テーブルを実装する。各行に日付と学習時間を表示する
- [x] 3.2 勉強会が1つのみの場合はデフォルトで展開状態にする初期化ロジックを実装する
4. 既存UI要素の整理
- [x] 4.1 既存のフラットな出席履歴テーブルを削除し、勉強会別サマリー+アコーディオン展開に置き換える
- [x] 4.2 メンバーヘッダーカード(メンバー名、合計学習時間、総参加回数)が既存のまま表示されることを確認する
5. テスト
- [x] 5.1 複数勉強会参加メンバーの表示、単一勉強会メンバーのデフォルト展開、アコーディオン開閉の動作を手動またはE2Eテストで確認する