ユーザー・プロフィール・コンポーネント

ユーザーのプロフィール表示およびカスタマイズに関連するコンポーネントの設計ドキュメントです。

1. プロフィール表示

ProfileHeader

ユーザーの基本情報を表示するヘッダーコンポーネントです。

• 役割: 公開プロフィールページの上部に表示され、ユーザーの正体と統計情報を提示します。
• 機能:
  • アバター画像、ユーザー名、自己紹介文の表示。
  • 公開作品数などの統計表示。
  • ログインユーザー自身のプロフィールの場合は「編集」ボタンを表示が可能（将来拡張予定）。

ProfilePageClient

プロフィールページのメインロジックを担当するクライアントコンポーネントです。

• 役割: データの取得（または受け取り）と、作品一覧のレンダリングを制御します。
• 機能:
  • ExpandableGrid を使用した作品一覧の動的レイアウト。
  • 公開済み作品の詳細表示（ProjectDetailView）への遷移。
  • プロフィール所有者（isOwner）の場合の編集・公開停止（Unpublish）アクションの提供。
  • ブックマーク機能の統合。

2. プロフィール設定・カスタマイズ

AvatarSelectionDialog

ユーザーのアバターを選択するためのダイアログコンポーネントです。

• 役割: 設定画面（プロフィールヘッダー）から呼び出され、事前に定義されたアバター群から一つを選択させます。
• 機能:
  • 2ステップ選択フロー: 最初に「Human (Free)」と「Intelligent Animal (Pro)」のカテゴリ選択カードを表示し、ユーザーを誘導します。
  • カテゴリ別グリッド: 選択したカテゴリに応じてアバターをレスポンシブなグリッドで表示。
  • プレミアムなカードデザイン: カテゴリ選択画面では、代表的なアバター画像を使用した視覚的に魅力的なカードを提供。
  • Proプラン制限: Pro未加入ユーザーに対しては、アバター画像に鍵アイコンのオーバーレイを表示（見切れ防止のため境界外に配置）し、クリック時に ProPromotionToast を表示します。
  • モバイル最適化: 画面幅に応じたカラム数の調整や、タッチフレンドリーな UI 設計を採用。

ProPromotionToast

Proプランへのアップグレードを促すための、汎用的かつプレミアムなデザインのトースト通知です。

• 役割: プロ機能にアクセスしようとした非Proユーザーに対し、魅力的なビジュアルと直接的な導線（アップグレードボタン）を提供します。
• 機能:
  • プレミアムデザイン: sonner のカスタムトースト機能を利用し、背景のぼかし（backdrop-blur）やセマンティックなアイコン（Sparkles）を用いた高品質なカード表示。
  • 固定IDによる制御: 重複表示を防ぐため、常に固定のIDを使用して「1画面に1件のみ」が表示されるよう制御。連続してトリガーされた場合は、最新の内容で上書きされます。
  • アクション導線: 決済・料金ページ（/pricing）へのダイレクト遷移ボタンを配置。

3. 関連データと定数

アバター定数 (next-app/src/lib/constants.ts)

• 内容: 利用可能なアバター画像のパスを AVATAR_TIERS オブジェクトとして、ティア（free/pro）ごとに構造化して定義しています。
• 後方互換性: 既存コード向けのフラットな配列 AVATAR_PRESETS も維持されています。
• 拡張性: public/avatars/free/ または public/avatars/pro/ に新しい画像ファイルを配置し、定数を更新することで自動的に選択肢が増えます。

4. UI/UXのポイント

• 段階的な情報提示: 120種類以上のアバターを一度に表示するのではなく、カテゴリ選択を挟むことでユーザーの認知負荷を軽減し、Proプランへの導線を自然に作り出しています。
• 視覚的なインセンティブ: 「Human（人間）からIntelligent Animal（知的な動物さん）へ」というコンセプトに基づいた魅力的なプレビュー提示により、ユーザーのアップグレード意欲を刺激します。
• Proプラン導線の強化: ProPromotionToast を通じて、アプリ内のあらゆる制限箇所からシームレスかつ魅力的に課金ページへ誘導する仕組みを共通化しています。
• シームレスな同期: 作品一覧は ExpandableGrid を採用することで、ページ遷移なしに詳細を確認できる一貫したデザイン言語を守っています。