【Next.js】ハッカソンで作成したwebアプリのリファクタリングを手伝って頂きたい

【ハッカソンレポジトリ】
lazy-bear
URL: https://github.com/Hayochan-man/fork_lazy-bear

---

【1. 目的】
- ハッカソンで作成した Web アプリ (Next.js) のフロントエンドを、設計と責務分離の観点からリファクタリングしたい。
- コンポーネント設計、型設計、エラーハンドリングの判断基準を学び、自力で拡張・保守しやすい構造にすることが目標。

---

【2. 相談方針とお願い事項】
- 設計方針決定後にコードレビューも依頼したいです。
- 主に知りたいのは「4〜6」ですが、状況に合わせて調整可能です。

---

【3. 前提】

a. 出来ること
- express で責務分離ベースのレイヤードアーキテクチャ実装。
* 参考: album/api/src 以下
https://github.com/study-basic-hackathon/album/tree/main/api/src
- 自作 Result クラスと Error クラスのサンプルを理解して自身のコードへ反映可能。

b. 出来ないこと
- React / Next.js の設計経験がほぼ無し。
- 状態管理、型定義、コンポーネント構造、層分離の判断に不安がある状態。
- TypeScript の型活用 (infer, mapper, omit など) に自信が無いです（学習中）。

---

【4. 設計について聞きたいこと】
- バリデーション、型変換、データ加工、副作用の配置基準。
- Atomic Design と feature sliced design の比較、採用基準、粒度崩壊の防止。
https://feature-sliced.design/
- UI / Adapter / Domain における型と責務の分離。
* 参考:
https://speakerdeck.com/kinocoboy2/hurontoendoniokeru-xing-noze-ren-fen-jie-nidui-suru1tunoapuroti
- データフロー (UI → Action → Domain) の設計。
- エラーハンドリング (validation / API / domain error を Result にどうまとめるか)。

---

【5. コードベースでレビューしてほしいこと】
-「4. 設計について聞きたいこと」で決めた指針と実装に齟齬が無いか確認していただきたいです。

---

【6. React / Next.js の基礎知識として聞きたいこと】
- 状態管理の切り出し基準 (useState / useReducer / custom hooks の使い分け)。
- hooks にロジックを逃がす際のベストプラクティス。
- Next.js の SSR / CSR / ISR など、初期設計時に必要な選択基準。

---

【7. 今回のスコープ外】
- UI デザイン (CSS やコンポーネントデザイン)。
- ライブラリ選定 (Redux / Zustand 等の比較)。
- テストコード設計。