# 複習功能診斷檢查清單

## 📋 功能驗證檢查清單

### ✅ 已完成項目

- [x] **前端編譯狀況**
  - [x] `/review` 頁面成功編譯 (`✓ Compiled /review in 1011ms`)
  - [x] 頁面可正常訪問 (HTTP 200)
  - [x] 測試參數可正常傳遞 (`?test=true`)

- [x] **Mock 數據系統建立**
  - [x] 創建 `reviewMockData.ts` 文件
  - [x] 定義 3 張測試詞卡 (hello, beautiful, important)
  - [x] 設置 `isTestMode()` 檢測函數

- [x] **Store 測試模式支援**
  - [x] ReviewDataStore 支援 Mock 數據
  - [x] TestResultStore 支援測試模式（跳過API）

### 🔄 待驗證項目

#### 1. 基礎功能驗證
- [ ] **頁面載入流程**
  - [ ] 訪問 `http://localhost:3000/review?test=true`
  - [ ] 檢查控制台日誌是否顯示測試模式
  - [ ] 驗證 Mock 數據是否成功載入

- [ ] **Store 狀態驗證**
  - [ ] ReviewDataStore.dueCards 是否包含 Mock 數據
  - [ ] TestQueueStore 是否正確初始化測驗隊列
  - [ ] ReviewSessionStore 是否設置當前卡片

#### 2. 組件渲染驗證
- [ ] **基礎組件顯示**
  - [ ] Navigation 組件正常顯示
  - [ ] ProgressTracker 顯示進度
  - [ ] ReviewRunner 載入測驗內容

- [ ] **測驗組件驗證**
  - [ ] FlipMemoryTest 正確渲染
  - [ ] VocabChoiceTest 正確渲染
  - [ ] 測驗內容顯示正確的詞卡資料

#### 3. 交互功能驗證
- [ ] **翻卡記憶測試**
  - [ ] 卡片可正常翻轉
  - [ ] 信心度選擇功能
  - [ ] 提交答案功能

- [ ] **詞彙選擇測試**
  - [ ] 4個選項正確生成
  - [ ] 選項包含正確答案
  - [ ] 選擇答案功能

- [ ] **導航控制**
  - [ ] 跳過按鈕功能
  - [ ] 繼續按鈕功能
  - [ ] 測驗切換邏輯

#### 4. 狀態管理驗證
- [ ] **答題流程**
  - [ ] 答題後狀態更新
  - [ ] 分數正確計算
  - [ ] 進度正確更新

- [ ] **測驗隊列管理**
  - [ ] 下一題正確載入
  - [ ] 完成狀態正確標記
  - [ ] 隊列結束處理

### 🔍 手動測試步驟

#### 步驟1: 基礎載入測試
```bash
# 1. 訪問測試模式的複習頁面
open http://localhost:3000/review?test=true

# 2. 打開瀏覽器開發者工具 (F12)
# 3. 查看 Console 標籤，確認日誌顯示：
#    🧪 [測試模式] 使用 Mock 數據
#    ✅ [測試模式] 載入Mock數據成功: 3 張詞卡
```

#### 步驟2: 組件渲染測試
```bash
# 預期看到的UI元素：
- Navigation 頂部導航
- ProgressTracker 進度條 (顯示 0/X 測驗)
- 測驗內容區域
- 導航按鈕區域
```

#### 步驟3: 功能交互測試
```bash
# 翻卡記憶測試：
1. 點擊卡片進行翻轉
2. 選擇信心度 (1-5)
3. 檢查是否出現"繼續"按鈕
4. 點擊繼續到下一題

# 詞彙選擇測試：
1. 查看4個選項
2. 選擇其中一個選項
3. 檢查答案反饋
4. 點擊繼續到下一題
```

### 🐛 常見問題診斷

#### 問題1: 頁面空白或載入失敗
**檢查項目:**
- [ ] 控制台是否有 JavaScript 錯誤
- [ ] 網路請求是否失敗
- [ ] React 組件是否正確掛載

#### 問題2: Mock 數據未載入
**檢查項目:**
- [ ] URL 是否包含 `?test=true` 參數
- [ ] isTestMode() 函數是否正確檢測
- [ ] MockData 路徑是否正確

#### 問題3: 測驗組件不顯示
**檢查項目:**
- [ ] TestQueueStore 是否正確初始化
- [ ] currentCard 是否設置正確
- [ ] 組件 import 是否正確

#### 問題4: 按鈕無反應
**檢查項目:**
- [ ] 事件處理函數是否綁定
- [ ] 狀態更新是否正確
- [ ] disabled 狀態是否正確

### 📊 成功標準

**階段1完成標準:**
- [ ] 頁面成功載入，無 JavaScript 錯誤
- [ ] Mock 數據正確載入 (3張詞卡)
- [ ] 至少1種測驗模式可正常顯示和交互
- [ ] 基本導航功能正常 (繼續/跳過)

**階段2完成標準:**
- [ ] 2種核心測驗模式 (flip-memory, vocab-choice) 完全正常
- [ ] 完整答題流程無錯誤
- [ ] 分數和進度正確統計
- [ ] 測驗完成後正確顯示結果

### 🔧 調試工具和技巧

#### React DevTools 使用
```bash
# 1. 安裝 React Developer Tools 瀏覽器擴展
# 2. 打開 Components 標籤
# 3. 查看組件樹和 props/state
# 4. 監控 Hook 狀態變化
```

#### Zustand DevTools
```bash
# 1. 檢查 Store 狀態
# 2. 監控 action 執行
# 3. 查看狀態變化歷史
```

#### 控制台日誌分析
```bash
# 重要日誌標識：
🔍 - 數據載入相關
🧪 - 測試模式相關
✅ - 成功操作
❌ - 錯誤狀況
🔄 - 狀態更新
```

---

**檢查清單更新日期:** 2025-10-02
**下次更新:** 完成階段1驗證後