refactor: 完成Learn→Review重命名和Navigation死代碼清理

## Learn → Review 語義重命名
- 目錄結構: learn/ → review/ (內部架構)
- 測驗組件目錄: tests/ → review-tests/
- 狀態管理: useLearnStore → useReviewStore
- 服務層: LearnService → ReviewService
- 核心組件: TestRunner → ReviewRunner

## Navigation.tsx 死代碼清理
- 移除從未使用的 showExitLearning 和 onExitLearning props
- 刪除永不顯示的「結束複習」按鈕邏輯
- 簡化函數簽名，提升代碼可讀性
- 更新導航文字：「學習」→「複習」

## 架構優化成果
- 語義更精確：review(複習) 比 learn(學習) 更準確描述功能
- 代碼更清潔：移除16行左右的死代碼
- 用戶體驗保持：/learn 路由依然正常運作
- 維護性提升：組件職責更明確，擴展更容易

## 技術改進
- 保持完整的企業級4層架構
- 7種測驗組件完整重命名
- Zustand狀態管理語義優化
- 路由兼容性確保用戶無感知

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Learn重命名為Review計劃.md

@@ -0,0 +1,171 @@
+# Learn → Review 重命名計劃
+
+**建立日期**: 2025-09-27
+**目的**: 將所有 learn 相關命名改為 review，使程式碼語義更清晰準確
+
+---
+
+## 📋 需要重命名的項目盤點
+
+### **1. 目錄結構重命名**
+
+#### **主要目錄**
+```
+FROM                              TO
+/frontend/app/learn/              → /frontend/app/review/
+/frontend/components/learn/       → /frontend/components/review/
+/frontend/hooks/learn/            → /frontend/hooks/review/
+/frontend/lib/services/learn/     → /frontend/lib/services/review/
+```
+
+#### **子目錄重命名**
+```
+FROM                              TO
+/components/learn/tests/          → /components/review/review-tests/
+```
+
+### **2. 檔案重命名**
+
+#### **核心檔案**
+```
+FROM                              TO
+useLearnStore.ts                  → useReviewStore.ts
+learnService.ts                   → reviewService.ts
+TestRunner.tsx                    → ReviewRunner.tsx
+```
+
+#### **組件檔案 (可選重命名)**
+```
+FROM                              TO
+ProgressTracker.tsx               → ReviewProgressTracker.tsx
+TaskListModal.tsx                 → ReviewTaskListModal.tsx
+LoadingStates.tsx                 → ReviewLoadingStates.tsx
+```
+
+### **3. 程式碼內容修改**
+
+#### **Import 路徑修改**
+需要更新以下檔案中的import：
+- `/app/learn/page.tsx` (8個import)
+- `/components/learn/TestRunner.tsx` (2個import)
+- `/lib/services/learn/learnService.ts` (1個import)
+
+```typescript
+// FROM
+import { ProgressTracker } from '@/components/learn/ProgressTracker'
+import { useLearnStore } from '@/store/useLearnStore'
+import { LearnService } from '@/lib/services/learn/learnService'
+
+// TO
+import { ReviewProgressTracker } from '@/components/review/ReviewProgressTracker'
+import { useReviewStore } from '@/store/useReviewStore'
+import { ReviewService } from '@/lib/services/review/reviewService'
+```
+
+#### **類別和介面重命名**
+```typescript
+// FROM → TO
+useLearnStore        → useReviewStore
+LearnState          → ReviewState
+LearnService        → ReviewService
+TestRunner          → ReviewRunner
+
+// 函數名稱
+initializeLearnSession    → initializeReviewSession
+loadDueCards             → loadDueReviewCards (可選)
+```
+
+#### **註解和文字更新**
+所有註解中的 "learn" 改為 "review"：
+```typescript
+// FROM
+// 學習會話狀態
+// 載入到期詞卡
+// 初始化學習會話
+
+// TO
+// 複習會話狀態
+// 載入到期複習詞卡
+// 初始化複習會話
+```
+
+### **4. 特殊考量**
+
+#### **URL路由保持不變**
+- **用戶訪問**: 仍然是 `http://localhost:3000/learn`
+- **檔案路徑**: `/app/review/page.tsx` (內部重命名)
+- **Next.js**: 需要考慮路由映射問題
+
+#### **外部引用檢查**
+需要檢查是否有其他檔案引用了learn相關組件：
+- Navigation.tsx 中的 learn 連結
+- Dashboard.tsx 中的 learn 按鈕
+- 其他頁面的跳轉邏輯
+
+---
+
+## 🚀 執行順序
+
+### **階段一：目錄和檔案重命名** (15分鐘)
+1. 重命名主要目錄結構
+2. 重命名核心檔案
+3. 更新檔案的export名稱
+
+### **階段二：程式碼內容更新** (20分鐘)
+1. 更新所有import路徑
+2. 重命名類別和介面
+3. 更新函數和變數名稱
+4. 更新註解和字串
+
+### **階段三：路由配置** (10分鐘)
+1. 確認Next.js路由正常運作
+2. 檢查外部引用是否正確
+3. 測試頁面是否正常載入
+
+### **階段四：測試和驗證** (15分鐘)
+1. 檢查編譯是否通過
+2. 測試功能是否正常
+3. 確認沒有遺漏的引用
+
+---
+
+## ⚠️ 風險評估
+
+### **低風險項目**
+- 內部檔案重命名
+- 註解和字串更新
+- 組件內部邏輯
+
+### **中風險項目**
+- Import路徑更新 (可能遺漏)
+- Store狀態管理 (需要仔細測試)
+
+### **注意事項**
+- URL路由 `/learn` 保持不變
+- 確保所有依賴關係正確更新
+- 備份重要檔案以防萬一
+
+---
+
+## 📝 驗證清單
+
+### **重命名完成檢查**
+- [ ] 所有目錄重命名完成
+- [ ] 所有檔案重命名完成
+- [ ] 所有import路徑更新
+- [ ] 所有類別名稱更新
+- [ ] 所有函數名稱更新
+
+### **功能測試**
+- [ ] 頁面可以正常載入
+- [ ] 測驗組件正常顯示
+- [ ] 狀態管理正常運作
+- [ ] API調用正常
+- [ ] 錯誤處理正常
+
+### **外部整合測試**
+- [ ] Navigation導航正常
+- [ ] Dashboard跳轉正常
+- [ ] 路由映射正確
+
+這個重命名將讓程式碼語義更清晰，`review`(複習) 比 `learn`(學習) 更精確地描述這個功能的本質。

frontend/app/learn/page.tsx

@@ -7,15 +7,15 @@ import LearningComplete from '@/components/LearningComplete'
 import { Modal } from '@/components/ui/Modal'
 
 // 新架構組件
-import { ProgressTracker } from '@/components/learn/ProgressTracker'
+import { ProgressTracker } from '@/components/review/ProgressTracker'
-import { TaskListModal } from '@/components/learn/TaskListModal'
+import { TaskListModal } from '@/components/review/TaskListModal'
-import { LoadingStates } from '@/components/learn/LoadingStates'
+import { LoadingStates } from '@/components/review/LoadingStates'
-import { TestRunner } from '@/components/learn/TestRunner'
+import { ReviewRunner } from '@/components/review/ReviewRunner'
 
 // 狀態管理
-import { useLearnStore } from '@/store/useLearnStore'
+import { useReviewStore } from '@/store/useReviewStore'
 import { useUIStore } from '@/store/useUIStore'
-import { LearnService } from '@/lib/services/learn/learnService'
+import { ReviewService } from '@/lib/services/review/reviewService'
 
 export default function LearnPage() {
   const router = useRouter()
@@ -37,7 +37,7 @@ export default function LearnPage() {
     loadDueCards,
     initializeTestQueue,
     resetSession
-  } = useLearnStore()
+  } = useReviewStore()
 
   const {
     showTaskListModal,
@@ -64,11 +64,11 @@ export default function LearnPage() {
 
       if (dueCards.length > 0) {
         const cardIds = dueCards.map(c => c.id)
-        const completedTests = await LearnService.loadCompletedTests(cardIds)
+        const completedTests = await ReviewService.loadCompletedTests(cardIds)
         initializeTestQueue(completedTests)
       }
     } catch (error) {
-      console.error('初始化學習會話失敗:', error)
+      console.error('初始化複習會話失敗:', error)
     }
   }
 
@@ -114,7 +114,7 @@ export default function LearnPage() {
         />
 
         {/* 測驗執行器 */}
-        <TestRunner />
+        <ReviewRunner />
 
         {/* 任務清單Modal */}
         <TaskListModal

frontend/app/review/page.tsx

@@ -0,0 +1,216 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { Navigation } from '@/components/Navigation'
+import LearningComplete from '@/components/LearningComplete'
+import { Modal } from '@/components/ui/Modal'
+
+// 新架構組件
+import { ProgressTracker } from '@/components/review/ProgressTracker'
+import { TaskListModal } from '@/components/review/TaskListModal'
+import { LoadingStates } from '@/components/review/LoadingStates'
+import { ReviewRunner } from '@/components/review/ReviewRunner'
+
+// 狀態管理
+import { useReviewStore } from '@/store/useReviewStore'
+import { useUIStore } from '@/store/useUIStore'
+import { ReviewService } from '@/lib/services/review/reviewService'
+
+export default function LearnPage() {
+  const router = useRouter()
+
+  // Zustand stores
+  const {
+    mounted,
+    isLoading,
+    currentCard,
+    dueCards,
+    testItems,
+    completedTests,
+    totalTests,
+    score,
+    showComplete,
+    showNoDueCards,
+    error,
+    setMounted,
+    loadDueCards,
+    initializeTestQueue,
+    resetSession
+  } = useReviewStore()
+
+  const {
+    showTaskListModal,
+    showReportModal,
+    modalImage,
+    reportReason,
+    reportingCard,
+    setShowTaskListModal,
+    closeReportModal,
+    closeImageModal,
+    setReportReason
+  } = useUIStore()
+
+  // 初始化
+  useEffect(() => {
+    setMounted(true)
+    initializeSession()
+  }, [])
+
+  // 初始化學習會話
+  const initializeSession = async () => {
+    try {
+      await loadDueCards()
+
+      if (dueCards.length > 0) {
+        const cardIds = dueCards.map(c => c.id)
+        const completedTests = await ReviewService.loadCompletedTests(cardIds)
+        initializeTestQueue(completedTests)
+      }
+    } catch (error) {
+      console.error('初始化複習會話失敗:', error)
+    }
+  }
+
+  // 重新開始
+  const handleRestart = async () => {
+    resetSession()
+    await initializeSession()
+  }
+
+  // 載入狀態
+  if (!mounted || isLoading) {
+    return (
+      <LoadingStates
+        isLoadingCard={isLoading}
+        isAutoSelecting={true}
+      />
+    )
+  }
+
+  if (showNoDueCards) {
+    return (
+      <LoadingStates
+        showNoDueCards={true}
+        onRestart={handleRestart}
+      />
+    )
+  }
+
+  if (!currentCard) {
+    return <LoadingStates isLoadingCard={true} />
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <Navigation />
+
+      <div className="max-w-4xl mx-auto px-4 py-8">
+        {/* 進度追蹤 */}
+        <ProgressTracker
+          completedTests={completedTests}
+          totalTests={totalTests}
+          onShowTaskList={() => setShowTaskListModal(true)}
+        />
+
+        {/* 測驗執行器 */}
+        <ReviewRunner />
+
+        {/* 任務清單Modal */}
+        <TaskListModal
+          isOpen={showTaskListModal}
+          onClose={() => setShowTaskListModal(false)}
+          testItems={testItems}
+          completedTests={completedTests}
+          totalTests={totalTests}
+        />
+
+        {/* 學習完成 */}
+        {showComplete && (
+          <LearningComplete
+            score={score}
+            mode={'flip-memory'} // 可以從store獲取
+            onRestart={handleRestart}
+            onBackToDashboard={() => router.push('/dashboard')}
+          />
+        )}
+
+        {/* 圖片Modal */}
+        {modalImage && (
+          <div
+            className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
+            onClick={closeImageModal}
+          >
+            <div className="relative max-w-4xl max-h-[90vh] mx-4">
+              <img
+                src={modalImage}
+                alt="放大圖片"
+                className="max-w-full max-h-full rounded-lg"
+              />
+              <button
+                onClick={closeImageModal}
+                className="absolute top-4 right-4 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* 錯誤回報Modal */}
+        <Modal
+          isOpen={showReportModal}
+          onClose={closeReportModal}
+          title="回報錯誤"
+          size="md"
+        >
+          <div className="p-6">
+            <div className="mb-4">
+              <p className="text-sm text-gray-600 mb-2">
+                單字：{reportingCard?.word}
+              </p>
+            </div>
+
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                錯誤類型
+              </label>
+              <select
+                value={reportReason}
+                onChange={(e) => setReportReason(e.target.value)}
+                className="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+              >
+                <option value="">請選擇錯誤類型</option>
+                <option value="translation">翻譯錯誤</option>
+                <option value="definition">定義錯誤</option>
+                <option value="pronunciation">發音錯誤</option>
+                <option value="example">例句錯誤</option>
+                <option value="image">圖片錯誤</option>
+                <option value="other">其他</option>
+              </select>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={closeReportModal}
+                className="flex-1 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50"
+              >
+                取消
+              </button>
+              <button
+                onClick={() => {
+                  console.log('Report submitted:', { card: reportingCard, reason: reportReason })
+                  closeReportModal()
+                }}
+                disabled={!reportReason}
+                className="flex-1 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                送出回報
+              </button>
+            </div>
+          </div>
+        </Modal>
+      </div>
+    </div>
+  )
+}

frontend/components/Navigation.tsx

@@ -5,12 +5,8 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { useAuth } from '@/contexts/AuthContext'
 
-interface NavigationProps {
-  showExitLearning?: boolean
-  onExitLearning?: () => void
-}
 
-export function Navigation({ showExitLearning = false, onExitLearning }: NavigationProps = {}) {
+export function Navigation() {
   const { user, logout } = useAuth()
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
@@ -18,7 +14,7 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
   const navItems = [
     { href: '/dashboard', label: '儀表板' },
     { href: '/flashcards', label: '詞卡' },
-    { href: '/learn', label: '學習' },
+    { href: '/learn', label: '複習' },
     { href: '/generate', label: 'AI 生成' },
     { href: '/settings', label: '⚙️ 設定' }
   ]
@@ -64,17 +60,7 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
           </div>
 
           <div className="flex items-center space-x-4">
-            {/* 學習模式的結束學習按鈕 */}
+            {/* 通知按鈕 - 桌面和手機都顯示 */}
-            {showExitLearning ? (
-              <button
-                onClick={onExitLearning}
-                className="text-gray-600 hover:text-gray-900"
-              >
-                × 結束學習
-              </button>
-            ) : (
-              <>
-                {/* 通知按鈕 - 桌面和手機都顯示 */}
                 <button className="p-2 text-gray-600 hover:text-gray-900">
                   <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
@@ -94,8 +80,6 @@ export function Navigation({ showExitLearning = false, onExitLearning }: Navigat
                     登出
                   </button>
                 </div>
-              </>
-            )}
           </div>
         </div>
 

frontend/components/review/ReviewRunner.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { useLearnStore } from '@/store/useLearnStore'
+import { useReviewStore } from '@/store/useReviewStore'
 import { useUIStore } from '@/store/useUIStore'
 import {
   FlipMemoryTest,
@@ -9,20 +9,20 @@ import {
   VocabListeningTest,
   SentenceListeningTest,
   SentenceSpeakingTest
-} from './tests'
+} from './review-tests'
 
 interface TestRunnerProps {
   className?: string
 }
 
-export const TestRunner: React.FC<TestRunnerProps> = ({ className }) => {
+export const ReviewRunner: React.FC<TestRunnerProps> = ({ className }) => {
   const {
     currentCard,
     currentMode,
     updateScore,
     recordTestResult,
     error
-  } = useLearnStore()
+  } = useReviewStore()
 
   const {
     openReportModal,

frontend/lib/services/review/reviewService.ts

@@ -1,8 +1,8 @@
 import { flashcardsService } from '@/lib/services/flashcards'
-import { ExtendedFlashcard, TestItem } from '@/store/useLearnStore'
+import { ExtendedFlashcard, TestItem } from '@/store/useReviewStore'
 
-// 學習會話服務
+// 複習會話服務
-export class LearnService {
+export class ReviewService {
   // 載入到期詞卡
   static async loadDueCards(limit = 50): Promise<ExtendedFlashcard[]> {
     try {

frontend/store/useReviewStore.ts

@@ -30,8 +30,8 @@ export interface TestItem {
   order: number
 }
 
-// 學習會話狀態
+// 複習會話狀態
-interface LearnState {
+interface ReviewState {
   // 核心狀態
   mounted: boolean
   isLoading: boolean
@@ -69,7 +69,7 @@ interface LearnState {
   setError: (error: string | null) => void
 }
 
-export const useLearnStore = create<LearnState>()(
+export const useReviewStore = create<ReviewState>()(
   subscribeWithSelector((set, get) => ({
     // 初始狀態
     mounted: false,