From 8e96b07d7128e76920a3de71677efb0eaeda322c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Tue, 7 Oct 2025 00:31:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=96=B0=E7=B5=84?=
 =?UTF-8?q?=E7=B9=94=E8=A4=87=E7=BF=92=E9=A0=81=E9=9D=A2=E7=B5=90=E6=A7=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 將 review-simple 重命名為 review-dev (開發測試頁面)
- 新增 /review 作為正式複習頁面
- 複製相同功能作為新頁面的修改基礎
- 準備進行正式頁面的功能開發

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../{review-simple => review-dev}/page.tsx    |   2 +-
 frontend/app/review/page.tsx                  | 161 ++++++++++++++++++
 2 files changed, 162 insertions(+), 1 deletion(-)
 rename frontend/app/{review-simple => review-dev}/page.tsx (96%)
 create mode 100644 frontend/app/review/page.tsx

diff --git a/frontend/app/review-simple/page.tsx b/frontend/app/review-dev/page.tsx
similarity index 96%
rename from frontend/app/review-simple/page.tsx
rename to frontend/app/review-dev/page.tsx
index 3c6f04c..9cb9158 100644
--- a/frontend/app/review-simple/page.tsx
+++ b/frontend/app/review-dev/page.tsx
@@ -7,7 +7,7 @@ import { QuizProgress } from '@/components/review/ui/QuizProgress'
 import { QuizResult } from '@/components/review/quiz/QuizResult'
 import { useReviewSession } from '@/hooks/review/useReviewSession'
 
-export default function SimpleReviewPage() {
+export default function ReviewDevPage() {
   // 使用重構後的 Hook 管理線性複習狀態
   const {
     quizItems,
diff --git a/frontend/app/review/page.tsx b/frontend/app/review/page.tsx
new file mode 100644
index 0000000..5d27b20
--- /dev/null
+++ b/frontend/app/review/page.tsx
@@ -0,0 +1,161 @@
+'use client'
+
+import { Navigation } from '@/components/shared/Navigation'
+import { FlipMemory } from '@/components/review/quiz/FlipMemory'
+import { VocabChoiceQuiz } from '@/components/review/quiz/VocabChoiceQuiz'
+import { QuizProgress } from '@/components/review/ui/QuizProgress'
+import { QuizResult } from '@/components/review/quiz/QuizResult'
+import { useReviewSession } from '@/hooks/review/useReviewSession'
+
+export default function ReviewPage() {
+  // 使用重構後的 Hook 管理線性複習狀態
+  const {
+    quizItems,
+    score,
+    isComplete,
+    currentQuizItem,
+    currentCard,
+    vocabOptions,
+    totalQuizItems,
+    completedQuizItems,
+    handleAnswer,
+    handleSkip,
+    handleRestart,
+    isLoading,
+    error,
+    flashcards
+  } = useReviewSession()
+
+  // 顯示載入狀態
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+        <Navigation />
+        <div className="py-8">
+          <div className="max-w-4xl mx-auto px-4">
+            <div className="bg-white rounded-xl shadow-lg p-8 text-center">
+              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+              <h2 className="text-xl font-semibold text-gray-700">載入詞卡中...</h2>
+              <p className="text-gray-500 mt-2">正在從後端獲取您的複習詞卡</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // 顯示錯誤狀態
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+        <Navigation />
+        <div className="py-8">
+          <div className="max-w-4xl mx-auto px-4">
+            <div className="bg-white rounded-xl shadow-lg p-8 text-center">
+              <div className="text-red-500 text-4xl mb-4">⚠️</div>
+              <h2 className="text-xl font-semibold text-red-700 mb-2">載入失敗</h2>
+              <p className="text-gray-600 mb-6">{error}</p>
+              <button
+                onClick={handleRestart}
+                className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+              >
+                重新載入
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // 顯示結果頁面
+  if (isComplete) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+        <Navigation />
+        <div className="py-8">
+          <div className="max-w-4xl mx-auto px-4">
+            <QuizResult
+              score={score}
+              totalCards={flashcards.length}
+              onRestart={handleRestart}
+            />
+
+            {/* 線性測驗完成統計 */}
+            <div className="mt-6 bg-white rounded-lg shadow p-6">
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">測驗統計</h3>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
+                <div>
+                  <div className="text-2xl font-bold text-blue-600">{completedQuizItems}</div>
+                  <div className="text-sm text-gray-600">完成測驗項目</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-green-600">{flashcards.length}</div>
+                  <div className="text-sm text-gray-600">練習詞卡數</div>
+                </div>
+                <div>
+                  <div className="text-2xl font-bold text-purple-600">
+                    {score.total > 0 ? Math.round((score.correct / score.total) * 100) : 0}%
+                  </div>
+                  <div className="text-sm text-gray-600">正確率</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // 主要線性測驗頁面
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      <Navigation />
+
+      <div className="py-8">
+        <div className="max-w-4xl mx-auto px-4">
+          {/* 使用修改後的 SimpleProgress 組件 */}
+          <QuizProgress
+            currentQuizItem={currentQuizItem}
+            totalQuizItems={totalQuizItems}
+            completedQuizItems={completedQuizItems}
+            score={score}
+            quizItems={quizItems}
+          />
+
+          {/* 根據當前測驗項目類型渲染對應組件 */}
+          {currentQuizItem && currentCard && (
+            <>
+              {currentQuizItem.quizType === 'flip-card' && (
+                <FlipMemory
+                  card={currentCard}
+                  onAnswer={handleAnswer}
+                  onSkip={handleSkip}
+                />
+              )}
+
+              {currentQuizItem.quizType === 'vocab-choice' && (
+                <VocabChoiceQuiz
+                  card={currentCard}
+                  options={vocabOptions}
+                  onAnswer={handleAnswer}
+                  onSkip={handleSkip}
+                />
+              )}
+            </>
+          )}
+
+          {/* 控制按鈕 */}
+          <div className="mt-6 text-center">
+            <button
+              onClick={handleRestart}
+              className="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
+            >
+              重新開始
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file