# **(實作) PM 產品需求文件 – 收藏商品功能**
:::info
- 規格書
1. 背景與目標
2. User Story
3. 功能需求一覽
4. 非功能需求
5. 邊界情境與例外處理
6. UI / UX 設計概念
7. 資料結構設計
8. API 介面設計
9. MVP 範圍界定
10. 發佈與迭代計畫 Roadmap
11. 驗收準則
12. KPIs
- 時程表+負責人
- 任務拆解估時
:::
<br/>
轉職班寫過類似的規格書，現在 vibe coding，自己管理自己，體會到：
1. 良好規格書 = 專案羅盤 ─ 先寫清楚背景、目標與範圍，最好寫成 md 檔，會大幅降低與 AI 溝通的 token 量
2. 時程可視化 ─ 需求拆解並估時，能自我約束(畢竟自己懶又有點完美主義)
3. 驗收與 KPI 明確化 ─ 提前定義成功標準，後續才知道該優化哪裡
這裡試著改以前的文件，假設有一整個團隊，以完整 PRD 格式梳理「收藏商品功能」，希望以後獨立開發別的專案，能像團隊協作，有條不紊地推進
<br/>
## 規格書
### 1. 背景與目標
- 使用者常在瀏覽時發現有興趣的商品，缺乏暫存機制導致流失
- **目標**：提供收藏功能，提升回訪率與轉換率
---
### 2. User Story
> **As a** registered user
> **I want to** mark/unmark products as favorites
> **So that** I can revisit them later easily
---
### 3. 功能需求一覽
| 編號 | 功能 | 說明 |
|------|------------------|--------------------------------------|
| FR1 | 收藏商品 | 點擊愛心圖示，將商品加入收藏清單 |
| FR2 | 取消收藏 | 再次點擊愛心圖示，可取消收藏 |
| FR3 | 收藏列表頁 | 我的帳號中可查看「我的收藏」清單 |
| FR4 | 登入限制 | 未登入使用者需先登入才能收藏商品 |
---
### 4. 非功能需求
- 收藏/取消收藏操作需在 500ms 內完成
- 收藏列表支援 infinite scroll（初始載入10筆）
- 收藏狀態應跨裝置同步
---
### 5. 邊界情境與例外處理
| 編號 | 情境類型 | 說明 |
|-------|--------------|----------------------------------------------------------------------|
| EC1 | 商品下架 | 收藏清單中應顯示「商品已下架」提示文字，避免造成操作錯誤 |
| EC2 | 重複點擊 | 多次快速點擊收藏按鈕，不可重複送出請求，應進行 debounce 或鎖定操作 |
| EC3 | 離線狀態 | 若裝置離線時點擊收藏，應顯示「目前無法操作，請檢查網路連線」提示 |
| EC4 | 未登入狀態 | 點擊收藏應觸發導向登入頁，登入後返回原頁，並保留原意圖自動執行收藏 |
| EC5 | 跨裝置操作 | 使用者從 A 裝置收藏商品，於 B 裝置登入帳號後應顯示相同收藏狀態 |
| EC6 | 快取未更新 | 商品已被取消收藏但頁面仍顯示愛心實心，需驗證快取更新機制或手動同步行為 |
---
### 6. UI / UX 設計概念
- 商品卡右上角加入愛心圖示（空心 / 實心）
- active 狀態：愛心變為實心並變色
- 需預留足夠空間與寬度容錯，以支援多語系與 RWD
- 收藏頁以卡片方式顯示商品（圖片、名稱、價格、加入購物車
- 收藏清單需支援 responsive 排版，於手機與桌機尺寸下皆可正常閱讀
- 未登入點擊收藏導向登入頁，登入後自動返回商品頁
- 字串最大長度限制（如英文西文會變長）
- breakpoints（如手機 ≤768px）
- 按鈕寬度 auto-expand
---
### 7. 資料結構設計
```=
favorites (
user_id UUID,
product_id UUID,
created_at TIMESTAMP
)
```
---
### 8. API 介面設計
- 前端框架：預期使用 Vue / React 進行元件化開發，請提供 JSON 結構清楚、回應迅速的 API
- 資料同步：收藏狀態選擇 Redis Cache 快取用戶清單，以支援跨裝置快速同步，降低 DB 查詢壓力
#### 收藏商品
```
POST /api/favorites
Body: { "product_id": "abc123" }
Response: { "success": true }
# 成功回應
{ "success": true }
# 失敗回應
{
"error_code": "UNAUTHORIZED",
"message": "請先登入後再操作",
"status": 401
}
```
#### 取消收藏
```=
DELETE /api/favorites/abc123
Response: { "success": true }
# 成功回應
{ "success": true }
# 失敗回應
{
"error_code": "NOT_FOUND",
"message": "該商品未被收藏",
"status": 404
}
```
#### 取得收藏清單
```
GET /api/favorites
Response: [
{
"product_id": "abc123",
"name": "產品A",
"image_url": "...",
"price": 999
}
]
# 成功回應
[
{
"product_id": "abc123",
"name": "產品A",
"image_url": "...",
"price": 999
}
]
# 失敗回應
{
"error_code": "TOKEN_EXPIRED",
"message": "請重新登入",
"status": 401
}
```
---
### 9. MVP 範圍界定
- 包含：
- 收藏 / 取消收藏功能
- 收藏清單頁展示
- 延後項目：
- 收藏清單排序 / 分類標籤 (next)
- 收藏清單分享與通知功能 (next)
---
### 10. 發佈與迭代計畫 Roadmap
- 版本 1.0：上線 MVP（收藏功能＋清單頁）
- 版本 1.1：加入排序與標籤功能
- 版本 1.2：收藏分享與通知提醒
---
### 11. 驗收準則
- **AC1**：已登入使用者可成功收藏與取消商品，收藏按鈕需具備 hover/active 狀態切換，並可正確儲存至資料庫（DB）
- **AC2**：使用者的收藏狀態可於不同頁面與跨裝置間同步顯示（需與帳號綁定）
- **AC3**：收藏清單頁能準確顯示所有已收藏商品，包含商品圖片、名稱、價格
- **AC4**：未登入使用者在點擊收藏時，會正確導向登入頁；登入成功後可返回原商品頁並保留操作意圖（即登入後自動收藏）
```=
BE-AC1：成功收藏 / 取消後，資料正確儲存至資料庫（含 user_id 與 product_id）
BE-AC2：收藏清單 API 回傳商品資訊（名稱、價格、圖片）完整且正確
BE-AC3：跨裝置登入後仍能獲得相同收藏狀態（依據帳號綁定）
BE-AC4：登入成功後，如有 pending 收藏請求，API 需能支援補送收藏操作（ex: 登入時附帶 redirect 與 action token）
```
```=
UX-AC1：收藏按鈕需具備 hover / active 狀態切換，樣式與設計稿一致
UX-AC2：未登入點擊收藏時，導向登入頁流程符合 UX 動線規範
UX-AC3：收藏清單視覺設計需能支援商品圖片、名稱、價格完整呈現
```
```=
FE-AC1：已登入使用者可成功收藏 / 取消商品，點擊愛心後 UI 狀態同步切換
FE-AC2：收藏狀態需正確呈現在所有商品卡與收藏清單中
FE-AC3：登入跳轉後可保留操作意圖（自動完成收藏並返回原商品頁）
FE-AC4：未登入點擊收藏時，前端需觸發登入跳轉流程，登入後可保留原操作意圖並自動完成收藏，最後返回原商品頁
```
```=
QA-AC1：點擊收藏按鈕，應在 500ms 內收到伺服器成功回應
QA-AC2：商品下架時，收藏清單應顯示「商品已下架」提示
QA-AC3：未登入用戶點擊收藏，應正確跳轉至登入頁並登入成功後返回原商品頁
QA-AC4：跨頁面、跨裝置驗證收藏狀態一致性
```
```=
PM-AC1：所有功能需於 8/10 前完成測試與驗收
PM-AC2：PM 確認所有 AC 條件通過後，才可安排上線作業
PM-AC3/4：上線當天須追蹤收藏功能啟用率、錯誤率及回訪數據（配合 KPI 監控）
```
---
### 12. KPIs
- 收藏功能啟用率（日活用戶中有幾％點擊收藏）
- 收藏後 7 日內轉換率提升
- 收藏功能使用後回訪率提升
<br/>
## 時程表+負責人
Gantt Chart or Timeline
- 所有功能依照優先順序安排，前後端並行處理部分模組
- 若後端 API 有結構異動，請同步更新 API 文件區段
- 若 UI 有變動，請於 Figma 中 comment 並通知 PM
- 設計需提前 2 日完成以供工程實作，QA 測試後再安排上線
- PM 負責追蹤進度並更新 Slack 通知群組
```
7/28 ────────────────▶ 8/12
▍收藏 API ████
▍UX 設計 ██████
▍前端收藏 ██████
▍列表頁 █████
▍測試 ██
▍上線 █
```
| 功能模塊 | 起始日期 | 結束日期 | 負責人 | 備註 |
|----------------------|------------|------------|------------------|------------------------------------------------|
| 收藏 API 設計 | 2025-07-28 | 2025-07-30 | Backend: Max | 提供 POST/DELETE/GET API 規格與測試接口 |
| 收藏按鈕 UX 設計 | 2025-07-28 | 2025-08-01 | UX: Wang | 於 7/29 交付 Prototype v1 給 FE |
| 前端收藏功能開發 | 2025-07-30 | 2025-08-05 | Frontend: Simon | 先進行邏輯與 API 串接，設計定稿後整合畫面 |
| 收藏列表頁開發 | 2025-08-02 | 2025-08-08 | Frontend: Simon | 須等 API 結構穩定與 UX Wireframe 支援 |
| 驗收測試 QA | 2025-08-09 | 2025-08-10 | QA: Matin | 根據 AC 條件測試互動邏輯與資料正確性 |
| 上線發佈 | 2025-08-11 | 2025-08-12 | PM: Mario | 含最後驗收與版本標記，上線後監控功能使用數據 |
<br/>
## 任務拆解估時
| 模組 | 任務子項目 | 負責角色 | 估時（人日） | 備註 |
|--------------------|------------------------------------------|-----------------|--------------|----------------------------------|
| 收藏 API 設計 | 設計資料結構與 schema 定義 | Backend | 0.5 | 參考已定義 favorites 結構 |
| | 實作 POST / DELETE / GET API | Backend | 1.5 | 含 Redis 快取邏輯 |
| | API 單元測試與 Swagger 文件撰寫 | Backend | 0.5 | |
| 收藏按鈕 UX 設計 | 按鈕樣式設計（hover/active） | UX Designer | 0.5 | 符合主色與行為動態 |
| | 收藏列表 wireframe / layout | UX Designer | 1 | 含空狀態與 loading 樣式 |
| | 交付 Figma 檔＋標註與寬度容錯說明 | UX Designer | 0.5 | |
| 前端收藏功能 | 收藏邏輯實作（按鈕互動與 API 串接） | Frontend | 1.5 | |
| | 收藏狀態呈現（卡片/清單同步） | Frontend | 1 | 含快取狀態更新 |
| | 未登入收藏 ➜ 導向登入並保留意圖 | Frontend | 1 | 含 redirect token 處理 |
| 收藏列表頁開發 | 撈資料並呈現商品卡片 | Frontend | 1.5 | 含圖片、名稱、價格與購物車按鈕 |
| | infinite scroll 與 loading 狀態設計 | Frontend | 1 | 初始載入 10 筆 |
| 測試驗收 | 撰寫並執行 QA 測試腳本（含邊界情境） | QA | 1 | EC1~EC6 + AC 條件覆蓋 |
| | 手機／桌機 Responsiveness 測試 | QA | 0.5 | breakpoints 行為測試 |
| 上線發佈 | 功能驗收與版本標記 | PM | 0.5 | |
| | 上線後功能監控與 KPI 數據觀察 | PM | 0.5 | 日誌追蹤、啟用率等 |
Sign in with Wallet
Connect another wallet