← プレビュー一覧に戻る

CRY-270: SPマイページ ポイントバッジ ヘッダー移動・モーダル化

SPヘッダーにポイントバッジを追加し、タップでポイント詳細モーダルを表示。
バッジは infoQ 準拠の「235 P >」スタイル（装飾なし・赤文字）。モーダルは既存 #pointGuideModal を再利用し、先頭にユーザー情報ブロックを追加。

Before / After 比較（ヘッダー）

Before: SPヘッダー（ポイントなし）
☰
ポイント表示なし。PCサイドバーのみ。
After: SPヘッダー（ポイントバッジ追加）
↑ バッジをタップするとモーダルが開きます

After: SPメニュー（ユーザー名追加）

山田 太郎 さん

3,500 pt

ポイント
ポイント 履歴
ポイント 交換
登録情報
よくある質問

※ #lowerGnav 先頭に class="block md:hidden" のユーザー名行が追加されます。

ポイント詳細モーダル（#pointGuideModal 再利用）デモ

上のバッジ、または下のボタンをクリックしてモーダルを確認できます。

変更概要（PR #237）

変更 内容
バッジスタイル #spBtnArea の <li> に移動。装飾なし・赤文字（color: #e60c0c）。{point} P > 形式（infoQ準拠）
モーダル #spPointModal 削除 → 既存 #pointGuideModal を再利用（jQuery click イベント追加）
ユーザー情報ブロック #pointGuideModal 先頭に名前・ポイント・回答数・継続日数を表示するブロックを追加
MENUユーザー名 #lowerGnav 先頭に block md:hidden のユーザー名行（border-gray-200）追加
コード削減 openSpPointModal() 関数削除。jQuery click イベントに移行。削除107行・追加74行の純減

サンプルデータ