FesTime
<SpotStatus /> / <MapSection />

マップ / QR現在地連動

各フロアのマップ表示とブース案内。階層切り替え、および会場内に設置されたQRコード読み取りに連動した現在地周辺情報の自動展開に対応。

使い方

参加者向け (マップ全体表示)

import MapSection from "@/features/map/components/MapSection";

<MapSection />

参加者向け (QR現在地スポット表示)

Spot-QRコードを読み取ったときのみ表示

import SpotStatus from "@/features/map/components/SpotStatus";

<SpotStatus />

Hooks src/features/map/hooks/

マップ機能はサーバー API 通信を行わず、以下の2つの専用フックを通じてローカルデータと UI 状態を制御します。

フック / プロパティ型役割
useMapData(place?) => MapDataフロアマップ階層切り替え、ピン座標マッピング、フルスクリーン制御 (iOS 対応)
useMapData.activeIndexnumber現在選択されているフロアマップ番号
useMapData.toggleFullscreen()() => voidマップの全画面表示切り替え
useSpotInfo() => SpotInfoURL クエリ ?spot=xxx を検知し、周辺の模擬店・展示情報を自動抽出
useSpotInfo.nearbyBoothsStallStatus[]現在地周辺の模擬店一覧 (DataContext の混雑状況とリアルタイム連動)
useSpotInfo.nearbyExhibitionsExhibition[]現在地周辺の展示企画一覧

コード

周辺ブース情報の自動抽出 src/features/map/hooks/useSpotInfo.ts

QR コードからスポット ID を取得し、該当スポットの周辺模擬店 ID に紐づく最新の混雑・在庫ステータスを即座に結合します。

src/features/map/hooks/useSpotInfo.ts
const nearbyBooths = useMemo(() => {
  if (!currentSpot || !fetchedData) return [];
  const ids = [...currentSpot.nearbyStalls];
  return fetchedData.stalls
    .filter((s) => ids.includes(Number(s.id)))
    .sort((a, b) => Number(a.id) - Number(b.id));
}, [currentSpot, fetchedData]);

データ構造 public/data/spots.json

スポットごとの名称、階層、および周辺の模擬店・展示 ID リストを定義します。

public/data/spots.json
[
  {
    "id": "1F_NW",
    "location": "校舎 1階 北西",
    "nearbyStalls": [1, 2],
    "nearbyExhibitions": [101]
  }
]