コンテンツにスキップ

Tasks

1. ルーティングとナビゲーション

  • [x] 1.1 src/App.jsx#/study-groups/:studyGroupId ルートを追加し、StudyGroupDetailPage をインポートする
  • [x] 1.2 src/components/StudyGroupList.jsx の各勉強会項目を <a href="#/study-groups/{id}"> でラップし、ホバーエフェクトを追加する

2. 勉強会詳細ページの実装

  • [x] 2.1 src/pages/StudyGroupDetailPage.jsx を新規作成し、基本構造(useParams、useNavigate、useState、useEffect)をセットアップする
  • [x] 2.2 データ取得ロジックを実装する(index.json から対象勉強会の取得、sessionIds で各セッションJSONの並列取得、members から参加者名の逆引き)
  • [x] 2.3 ヘッダーカード(勉強会名、総開催回数、合計学習時間)を実装する
  • [x] 2.4 セッション別サマリーカード(日付、参加人数、合計学習時間)の一覧を日付降順で表示する
  • [x] 2.5 アコーディオン展開/折りたたみ機能を実装する(クリックで参加者テーブルの表示/非表示、セッション1件のみの場合はデフォルト展開)
  • [x] 2.6 参加者テーブル(名前、学習時間)を実装する
  • [x] 2.7 戻るボタン、ローディング表示、エラー表示を実装する

3. テスト

  • [x] 3.1 勉強会詳細ページのユニットテストを作成する(基本表示、アコーディオン展開/折りたたみ、セッション1件時のデフォルト展開、存在しないID、エラー状態)
  • [x] 3.2 StudyGroupList のリンク化に関するユニットテストを更新する
  • [x] 3.3 E2Eテストを作成する(トップページから勉強会詳細ページへの遷移、セッション展開、戻るボタン)