久しぶりすぎる
YouTube参考に、色々と付け足したもの。
Hookこんなのあったなー。って思いながらやった。良い復習だった。
サイト:https://effervescent-macaron-32513b.netlify.app/
Github: https://github.com/Musasi914/react-practice-movie
学び
- URIに渡すクエリはencodeURIComponentに入れて適切に処理されるように
追加機能
1. ページネーション(ページ送り)
- 映画の件数が多い場合、ページごとに表示・切り替えできるようにする。
読み込みーSkeletonUI
2. 映画詳細ページ
- 映画カードをクリックしたときに、詳細情報(あらすじ、出演者、予告編など)を表示する。
createPortal
3. ジャンルや並び替え機能
- ジャンル(アクション、コメディなど)で絞り込みや、人気順・公開日順などで並び替え。
4. ローディングやエラー時のUI改善
- ローディング中のスケルトン表示や、エラー時の再試行ボタン。
5. レスポンシブ対応
- スマホやタブレットでも見やすいデザイン。
6. お気に入り登録
- 気になる映画をお気に入りリストに追加・管理できる機能。
useContext
7. 検索履歴やサジェスト
- 過去の検索履歴や、入力中にサジェストを表示。