目的・役割

1位・2位・3位の3枠を選択して投票するモード。重み付け配分でランキング集計の表現力を上げる。

UI 構成

要素種類説明
RankingHeaderView(Xスタイル)VStack 共通ヘッダ。7段構成。
1段目: 作成者アバター + 表示名 + フォローボタン + 右上ランクバッジ(44px円)
2段目: 投票タイプバッジ(TOP3=淡い緑 GRN002) + クイズ通過バッジ(hasQuiz=true のみ)
3段目: 大タグ
4段目: 小タグ
5段目: 投票期間 + 残り時間
6段目: タイトル(選択肢直前に再表示)
7段目: 説明文(存在時のみ)
3枠スロットHStack1位 / 2位 / 3位の選択枠
選択肢グリッドLazyVGrid枠タップで Choice を割当
投票ボタンButton3枠すべて埋まると有効化
消費ポイント表示Text「投票には Npt を消費します」
バナー広告共通配置MainTabView の safeAreaInset(.bottom) でタブバー直上(プレミアム時は非表示)

レイアウト変更(v1.1)

状態

状態表示内容
未完了(isThreePointReady=false)投票ボタン無効
3枠完了(isThreePointReady=true)投票ボタン有効
投票中ProgressView

遷移

操作遷移先
3枠選択 + 投票ボタン3件のVote INSERT → ResultView
枠の入れ替え同画面(並べ替え)

使用するデータモデル

// 3件の Vote を順位ごとに INSERT(display_order = 1, 2, 3)
[Vote(choiceId: top1, ...), Vote(choiceId: top2, ...), Vote(choiceId: top3, ...)]

実装メモ

関連

変更履歴

バージョン日付変更内容
1.02026-05-09初版作成
1.12026-05-10RankingHeaderView を Xスタイル化(7段構成)/ThreePointVoteView の重複タイトル表示を削除/バナー広告を MainTabView 共通配置へ統一