feat(frontend): update dashboard UI #43

[kdix-23-071]

Issue: #43

Closes #43

実装の概要

添付されたモックアップ画像に基づき、ダッシュボード画面のUIを実装しました。
app/dashboard ルート配下に、サイドバー、ヘッダー、およびメインコンテンツ（ステータス、バッジ、スキルツリー）を配置しました。

🔧 技術的な意思決定とトレードオフ (最重要)

採用したアプローチ

• 手法:

  • src/app/dashboard ディレクトリを作成し、Next.js App Routerの特性を活かしたレイアウト構成を採用。
  • AppSidebar と AcquiredBadges を独立したコンポーネントとして切り出し。
  • ヘッダーは sticky ポジションを使用して画面上部に固定。
  • スタイリングには Tailwind CSS を使用し、配色はモックアップの緑色基調に合わせました。
  • ルーティング競合回避のため、src/app/(dashboard) を src/app/dashboard にリネームしました。

• メリット:

  • コンポーネントの再利用性と保守性が向上。
  • ページ遷移時もサイドバーの状態が保持されやすい（Layoutの使用）。
  • モックアップのデザインに忠実なUIを実現。

• デメリット/リスク:

  • 現時点ではデータは mock.ts のモックデータを使用しており、バックエンド連携は未実装。
  • モバイル表示時のハンバーガーメニュー等は未実装（レスポンシブ対応は最低限）。

却下したアプローチ（代替案）

• 手法: すべてのUIロジックを page.tsx に記述する。
• 却下理由: コードの見通しが悪くなり、将来的な機能拡張やテストが困難になるため。

🧪 テスト戦略と範囲

追加したテストケース

• 正常系: ローカル環境にて npm run dev を実行し、/dashboard ページが正常にレンダリングされることを目視確認。
• 正常系: サイドバーのリンク配置、バッジの表示、「前回の続きから」ボタンの配置確認。
• テストしていないこと:
  • 自動テスト（Jest/React Testing Library等）の追加。
  • バックエンドAPIとの通信（モックのため）。
  • 異なる画面サイズでの詳細なレスポンシブ挙動の検証。

セキュリティに関する自己評価

• 機密情報のハードコードはないか
• 入力値の検証（バリデーション）は行っているか（今回は表示のみのため対象外）
• 既知の脆弱性パターンへの対策は考慮したか

レビュワー（人間）への申し送り事項

• 現状はモックデータで動作しています。
• 画像アセットがないため、木の画像は絵文字（🌳）で代用しています。適切な画像があれば差し替えてください。

[kdix-23-071]