Lead Me Home - 網站流程總覽

• 發佈者：寵物飼主
• 目的：我的寵物走失了，拜託大家幫忙找
• 內容：寵物特徵、走失時間地點、聯絡方式
• 需要登入：是（LINE 登入）
• API type：type=0 (MISSING)

• 發佈者：路人 / 好心人
• 目的：我看到一隻疑似走失的寵物，通報一下
• 內容：目擊特徵、通報時間地點、通報人資訊
• 需要登入：否（任何人都能通報）
• API type：type=1 (REPORT)

頁面內容

• 品牌標語 + 兩個主要按鈕
• 縣市 + 品種搜尋
• 熱門搜尋標籤（Paw-pular Searches）
• 最新動態卡片輪播（最新 12 筆）
• 本週統計數字

主要操作

• 登記寵物走失 → 需登入 → /add-lost-pet
• 通報疑似走失寵物 → 免登入 → /lost-pet-report
• 搜尋 / 點標籤 → /pet-messages?filters
• 點卡片 → /pet-messages?postId=N

API

• GET /api/v1/posts 最新貼文
• GET /api/v1/pet-trait-options 品種選項

表單區塊

• 寵物基本資訊（物種、名字、年齡、性別）
• 品種與外觀特徵（毛色、體型、花紋等）
• 走失時間與地點
• 上傳照片（可排序、設封面）
• 飼主聯絡資訊 + 授權設定
• 補充說明 + 標籤

送出後

• 建立走失貼文 POST /api/v1/posts
• 自動生成協尋海報
• 導向個人檔案頁

表單區塊

• 目擊寵物特徵（物種、品種、外觀）
• 通報時間與地點
• 上傳目擊照片
• 通報人聯絡資訊
• 是否能暫時照顧（收容意願）
• 補充說明 + 標籤

送出後

• 建立通報貼文 POST /api/v1/posts
• 系統自動配對相似走失貼文
• 若配對成功 → 彈出確認 popup → 通知飼主
• 飼主收到 LINE 推播

頁面內容

• 左側：Leaflet 地圖（顯示所有貼文位置）
• 右側：卡片列表（綠色走失 + 粉色通報）
• 篩選器：縣市、品種、類型（全部/走失/通報）
• 已關注 / 全部訊息 切換

卡片操作

• 提供線索 開啟聊天室與飼主對話
• 分享協尋 下載/分享海報（僅限自己的貼文）
• 修改資料 編輯自己的貼文
• ❤️ 關注卡片

API

• GET /api/v1/posts 含篩選參數
• GET /api/v1/posts/county-counts
• POST /api/v1/chat/conversations/start

左欄

• 寵物檔案卡片（分頁切換多隻寵物）
• 寵物照片、基本資訊、完整特徵
• 走失時間地點、協尋群組資訊
• 聯絡資訊 + 授權設定（目前 disabled）

右欄

• 寵物動態 Timeline（重要事件 / 完整歷程）
• 顯示：目擊通報、聊天紀錄、配對結果等
• 分享協尋 下載海報

操作

• 登記寵物走失 → /add-lost-pet
• 修改檔案（側邊抽屜）
• 標記已找到

內容

• 我的通報紀錄（分頁切換）
• 通報詳情：目擊特徵、地點、時間、收容意願
• 通報動態 Timeline

操作

• 通報疑似走失寵物 → /lost-pet-report
• 修改通報資料（側邊抽屜）
• 分享協尋海報
• 確認團圓

內容

• 所有對話列表（依時間分群：今天/昨天/本週/更早）
• 篩選：全部 / 未讀 / 走失訊息 / 通報訊息
• 每張卡片顯示：對方頭像、寵物圖、最新訊息預覽、未讀數

操作

• 點卡片 → 開啟聊天抽屜（ConversationDrawer）
• 聊天室內可：傳訊息、上傳圖片、確認目擊地點

流程

• 使用者點「LINE 登入」
• 跳轉至 LINE 授權頁面
• 使用者同意後回到 callback 頁面
• 交換 code → 取得 access_token
• 存入 localStorage + Redux
• 導回原本想去的頁面

API

• POST /api/v1/auth/line/token

內容

• A4 列印格式的協尋海報
• 寵物照片（封面 + 副圖）
• 特徵標籤、走失地點時間
• 飼主聯絡資訊
• QR Code（掃碼到網站）

生成方式

• 後端 Playwright 截圖此頁面 → 存為 PNG 到 R2
• 前端 polling GET /poster-status 等待完成
• 使用者下載或分享連結