トップページの再設計とイベント一覧の独立ページ化

[oumelab]

📋 概要

現在のトップページ（イベント一覧 + ページネーション）を再設計し、より一般的なWebサイト構造に変更する。

🎯 目的

• トップページでの「ちらつき」問題の根本的解決
• 一般的なWebサイトUXパターンの採用
• ユーザーの目的に応じた情報設計の最適化

🔄 現在の問題

• ページネーション時のページトップへの一瞬の遷移（ちらつき）
• トップページとイベント一覧の責任が混在
• setTimeout による遅延でのUX上の違和感

🎨 新しい設計

トップページ (/)

• Hero セクション（既存）
• 注目のイベント（3-4件程度）
• 新着イベント（最新3-4件）
• ピックアップイベント（おすすめ3-4件）
• 「もっと見る」ボタン → イベント一覧ページへ遷移
• ページネーションなし（表示数固定）

イベント一覧ページ (/events/list または /events/all)

• 全イベントの一覧表示
• 検索・フィルタリング機能（将来実装）
• ページネーション実装
• シンプルなページ構造（Hero なし）

🛠️ 実装内容

フロントエンド

• 新しいイベント一覧ページコンポーネント作成
• トップページの再構成（限定的なイベント表示）
• React Router のルーティング更新
• ナビゲーション・リンクの更新

バックエンド

• 注目イベント取得API（オプション）
• 新着イベント取得API（limit付き）
• ピックアップイベント取得API（オプション）

UI/UX

• トップページのイベントカードデザイン統一
• 「もっと見る」ボタンのデザイン
• パンくずナビの実装（オプション）

✅ 受け入れ基準

• トップページでページネーション関連のちらつきが解消される
• 独立したイベント一覧ページが正常に動作する
• 全ての既存機能（申し込み、作成、編集等）が影響を受けない
• SEO的に適切なURL構造になっている
• モバイル・デスクトップでの表示が適切

🎯 期待される効果

• UX改善: ちらつきのない自然なページ遷移
• 目的の明確化: トップページ（発見）vs 一覧ページ（検索）
• 拡張性: 将来的な検索・フィルタ機能の実装基盤
• 保守性: 責任の分離による理解しやすいコード

📝 参考サイト

• connpass（イベントサイト）
• Eventbrite（イベント管理）
• Doorkeeper（技術系イベント）

🔗 関連Issue

• 関連 トップページのイベント表示順序の改善と終了イベントの視覚的区別 #48 (現在のページネーション実装)
• 将来実装 #XX (イベント検索・フィルタ機能)

---

優先度: 中（UX改善のため）
難易度: 中（ページ構造の再設計）

ブランチ名案

feature/redesign-homepage-and-event-list-separation