実装指示書
Cafe Explorer プロトタイプの実装仕様（サンプル）
概要
ユーザーストーリー: ユーザーとして、近くのカフェを探して詳細情報やレビューを確認し、行きたい店を決めたい。
スコープ: 一覧画面（検索・フィルタ付き）と詳細画面（メニュー・レビュー）の2画面構成。
画面構成
カフェ一覧 /
- 検索バー（カフェ名・エリアでフィルタ）
- フィルタチップ（タグベース）
- グリッド/リスト切替トグル
- カフェカード（画像・名前・エリア・評価・タグ）
カフェ詳細 /cafe
- ヒーロー画像
- 基本情報（名前・エリア・営業時間・価格帯・評価）
- タブ切替: Menu / Reviews
- Menu: カテゴリ別メニュー一覧（人気バッジ付き）
- Reviews: カード型 or タイムライン型（パターン比較）
インタラクション仕様
| 要素 | トリガー | 変化 | duration |
|---|---|---|---|
| カフェカード | hover | shadow-bottom-200、画像 scale(1.05) | 300ms ease |
| カフェカード名前 | hover | text-text → text-primary | 150ms |
| フィルタチップ | click | border → bg-primary + text-on-fill | instant |
| タブ | click | border-bottom color + text-primary | 150ms |
デザイントークン
この画面で使用しているトークン:
--color-primary#FF8900
--color-primary-subtle#FFECE4
--color-bg#FFFFFF
--color-bg-surface#F3F3F3
--color-text#191919
--color-text-sub#7D7D7D
--color-text-hint#A7A7A7
--color-border#E5E5E5
レスポンシブ挙動
sm (640px): カフェ一覧 1列 → 2列グリッド
lg (1024px): カフェ一覧 2列 → 3列グリッド
全幅: 最大幅 max-w-5xl（一覧）/ max-w-2xl（詳細）で中央寄せ
エッジケース / 状態
ローディングプロトで確認 →
スケルトンUIを表示。カードのアスペクト比を維持したプレースホルダー。
検索結果なしプロトで確認 →
検索アイコン + 「見つかりませんでした」メッセージ + 条件変更の案内。
レビューなしプロトで確認 →
星アイコン + 「最初のレビューを書きましょう」CTA。
実装メモ
クエリパラメータ設計: _p=パターン切替、_v=バリアント、_tab=タブ切替
画像: Unsplash の外部URLを使用（本番では自前ストレージに置き換え）
価格フォーマット: VND表記（例: 55,000đ）。Intl.NumberFormat で整形。