# Epic 1: 完整任務定義 (Story 1.3-1.17)

**建立日期：** 2025-01-30
**適用於：** Webflow to Payload CMS + Astro Migration 專案

---

## 📋 專案全貌

### Epic 結構

```
Epic 1: Webflow to Payload CMS + Astro Migration
├── Story 1.1: Project Infrastructure Setup ✅ 85%
├── Story 1.2: Payload CMS Collections Definition ⚠️ 43%
├── Story 1.3: Content Migration Script ⏸️ 0%
├── Story 1.4: Global Layout Components ⏸️ 0%
├── Story 1.5: Homepage Implementation ⏸️ 0%
├── Story 1.6: About Page Implementation ⏸️ 0%
├── Story 1.7: Solutions Page Implementation ⏸️ 0%
├── Story 1.8: Contact Page with Form ⏸️ 0%
├── Story 1.9: Blog System Implementation ⏸️ 0%
├── Story 1.10: Portfolio Implementation ⏸️ 0%
├── Story 1.11: Teams Page Implementation ⏸️ 0%
├── Story 1.12: Authentication System Implementation ⏸️ 0%
├── Story 1.13: Admin Dashboard ⏸️ 0%
├── Story 1.14: SEO Implementation ⏸️ 0%
├── Story 1.15: Performance Optimization ⏸️ 0%
├── Story 1.16: Deployment to Cloudflare ⏸️ 0%
└── Story 1.17: Testing and Quality Assurance ⏸️ 0%

Total: 1 Epic, 17 Stories
```

### Story 分類

**基礎設施 (Infrastructure):**
- Story 1.1: Project Infrastructure Setup
- Story 1.2: Payload CMS Collections Definition
- Story 1.3: Content Migration Script

**前端組件 (Frontend Components):**
- Story 1.4: Global Layout Components (Header/Footer)

**頁面實作 (Page Implementation):**
- Story 1.5: Homepage
- Story 1.6: About Page
- Story 1.7: Solutions Page
- Story 1.8: Contact Page

**內容系統 (Content Systems):**
- Story 1.9: Blog System
- Story 1.10: Portfolio
- Story 1.11: Teams Page

**後台系統 (Admin System):**
- Story 1.12: Authentication System
- Story 1.13: Admin Dashboard

**上線準備 (Production Readiness):**
- Story 1.14: SEO Implementation
- Story 1.15: Performance Optimization
- Story 1.16: Deployment to Cloudflare
- Story 1.17: Testing and Quality Assurance

---

## 📊 Story 依賴關係矩陣

```
       1.1  1.2  1.3  1.4  1.5  1.6  1.7  1.8  1.9  1.10 1.11 1.12 1.13 1.14 1.15 1.16 1.17
1.1    ✓  ⬆︎
1.2         ✓  ⬆︎
1.3             ⬎︎
1.4             ✓  ⬆︎
1.5                 ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.6                 ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.7                 ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.8                 ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.9                 ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.10                ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.11                ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.12                ⬎︎  ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.13                    ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.14                    ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.15                    ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.16                    ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎
1.17                    ⬎︎  ✓  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎  ⬎︎

Legend:
✓ = 直接依賴 (必須先完成)
⬆︎ = 強烈建議順序
⬎︎ = 可並行開發
```

---

## Story 1.3: Content Migration Script

**User Story:**
```gherkin
As a Developer,
I want to create a migration script that imports Webflow content to Payload CMS,
So that I can automate content transfer and reduce manual errors.
```

### Overall Goal
建立自動化工具，將 Webflow CMS 導出的內容轉換並匯入到 Payload CMS，確保：
- 35+ 篇文章完整遷移
- 4 個分類保留
- 所有 Portfolio 項目遷移
- 媒體檔案上傳到 R2
- SEO 屬性（slugs, meta tags）保留
- 可重複執行，不產生重複資料

### Estimated Effort
12-16 小時（含測試和除錯）

---

### Task 1.3.1: Research Webflow Export Format

**Description:**
研究 Webflow CMS 導出的資料格式，建立欄位對應表

**Acceptance Criteria:**
- [ ] 下載或取得 Webflow JSON/CSV 範例檔案
- [ ] 分析 Posts 集合的欄位結構
- [ ] 分析 Categories 集合的欄位結構
- [ ] 分析 Portfolio 集合的欄位結構
- [ ] 建立 Webflow → Payload 欄位對應表
- [ ] 識別資料型別轉換需求
- [ ] 識別特殊欄位處理需求（richtext, 圖片, 關聯）

**Definition of Done:**
- [ ] 欄位對應表文檔完成 (`docs/migration-field-mapping.md`)
- [ ] 包含所有 3 個主要集合的對應
- [ ] 標注資料型別轉換規則
- [ ] 標注特殊處理需求

**預估時間：** 2 小時

---

### Task 1.3.2: Create Migration Script Foundation

**Description:**
建立遷移腳本的基礎架構和配置

**Acceptance Criteria:**
- [ ] 建立專案目錄 `apps/backend/scripts/migration/`
- [ ] 建立 `migrate.ts` 主程式檔案
- [ ] 建立環境變數配置檔案 `.env.migration`
- [ ] 實作 Payload CMS API 客戶端
- [ ] 實作日誌系統（記錄遷移過程）
- [ ] 實作進度顯示功能
- [ ] 支援命令列參數（dry-run, verbose, collection filter）

**Definition of Done:**
- [ ] 腳本結構清晰
- [ ] 可執行 `pnpm tsx scripts/migration/migrate.ts --help`
- [ ] 支援 `--dry-run` 模式（只驗證不寫入）
- [ ] 支援 `--collection` 參數（指定遷移哪個集合）
- [ ] 連接到 Payload CMS API 成功

**預估時間：** 2 小時

---

### Task 1.3.3: Implement Posts Migration Logic

**Description:**
實作文章（行銷放大鏡）的遷移邏輯

**Acceptance Criteria:**
- [ ] 解析 Webflow Posts JSON/CSV
- [ ] 轉換欄位對應：
  - title → title
  - slug → slug (保留原始值)
  - body → content (richtext → Lexical format)
  - published-date → publishedAt
  - post-category → categories (relationship)
  - featured-image → heroImage (上傳到 R2)
  - seo-title → meta.title
  - seo-description → meta.description
- [ ] 處理 richtext 內容格式轉換
- [ ] 處理圖片下載和上傳到 R2
- [ ] 處理分類關聯（需先遷移 Categories）
- [ ] 保留原始 publishedDate
- [ ] 設定狀態為 published

**Definition of Done:**
- [ ] 成功遷移測試資料（5 篇文章）
- [ ] 圖片成功上傳到 R2
- [ ] Richtext 格式正確轉換
- [ ] 分類關聯正確建立
- [ ] Slug 保留原始值
- [ ] 可重複執行（檢查重複）

**預估時間：** 3 小時

---

### Task 1.3.4: Implement Categories Migration Logic

**Description:**
實作分類（文章分類）的遷移邏輯

**Acceptance Criteria:**
- [ ] 解析 Webflow Categories JSON/CSV
- [ ] 轉換欄位對應：
  - name → title
  - slug → slug
  - 顏色欄位 → textColor, backgroundColor
  - 排序欄位 → order
- [ ] 處理巢狀結構（如果有）
- [ ] 設定預設值（order: 0）

**Definition of Done:**
- [ ] 成功遷移所有 4 個分類
- [ ] 顏色欄位正確轉換
- [ ] Order 欄位正確設定
- [ ] 可重複執行

**預估時間：** 1 小時

---

### Task 1.3.5: Implement Portfolio Migration Logic

**Description:**
實作作品集（網站設計範本）的遷移邏輯

**Acceptance Criteria:**
- [ ] 解析 Webflow Portfolio JSON/CSV
- [ ] 轉換欄位對應：
  - Name → title
  - Slug → slug
  - website-link → url
  - preview-image → image (上傳到 R2)
  - description → description
  - website-type → websiteType
  - tags → tags (array)
- [ ] 處理圖片下載和上傳到 R2
- [ ] 處理標籤（字串轉陣列）

**Definition of Done:**
- [ ] 成功遷移測試資料（3 個項目）
- [ ] 圖片成功上傳到 R2
- [ ] 標籤正確解析為陣列
- [ ] 外部連結正確設定
- [ ] 可重複執行

**預估時間：** 2 小時

---

### Task 1.3.6: Implement Media Migration Module

**Description:**
實作媒體檔案遷移模組（下載 + 上傳 R2）

**Acceptance Criteria:**
- [ ] 從 Webflow 匯出取得所有媒體 URL 清單
- [ ] 下載圖片到本地臨時目錄
- [ ] 上傳到 Cloudflare R2
- [ ] 取得 R2 URL
- [ ] 更新 Payload 中的媒體引用
- [ ] 支援批次上傳（並行處理）
- [ ] 錯誤處理和重試機制
- [ ] 進度顯示（已處理 x / 總數 y）

**Definition of Done:**
- [ ] 成功下載測試圖片
- [ ] 成功上傳到 R2
- [ ] 取得正確的 R2 URL
- [ ] 支援常見圖片格式（jpg, png, webp）
- [ ] 支援批次上傳（5 並行）
- [ ] 錯誤時自動重試（3 次）
- [ ] 清理本地臨時檔案

**預估時間：** 3 小時

---

### Task 1.3.7: Implement Deduplication Logic

**Description:**
實作重複資料檢查機制，支援安全重複執行

**Acceptance Criteria:**
- [ ] 根據 slug 檢查是否已存在
- [ ] Posts: 檢查 slug + publishedDate 組合
- [ ] Categories: 檢查 slug
- [ ] Portfolio: 檢查 slug
- [ ] Media: 根據檔名或 hash 檢查
- [ ] 支援 `--force` 參數強制覆蓋
- [ ] 記錄跳過的項目
- [ ] Dry-run 模式只顯示不執行

**Definition of Done:**
- [ ] 重複執行腳本不產生重複資料
- [ ] 記錄每次執行的統計：
  - 新增數量
  - 跳過數量（重複）
  - 錯誤數量
- [ ] Dry-run 模式正確預覽結果
- [ ] Force 模式可正確覆蓋

**預估時間：** 2 小時

---

### Task 1.3.8: Generate Migration Report

**Description:**
產生詳細的遷移報告，供驗證使用

**Acceptance Criteria:**
- [ ] 生成 JSON 報告檔案
- [ ] 報告包含：
  - 遷移時間戳
  - 成功遷移清單（ids, slugs）
  - 失敗清單（錯誤原因）
  - 跳過清單（重複項目）
  - 統計摘要
- [ ] 生成可讀的 Markdown 報告
- [ ] 儲存到 `reports/migration-{timestamp}.md`

**Definition of Done:**
- [ ] 報告檔案格式清晰易讀
- [ ] 包含所有關鍵資訊
- [ ] Markdown 報告可直接分享
- [ ] 統計資訊準確無誤

**預估時間：** 1 小時

---

### Task 1.3.9: Testing and Validation

**Description:**
測試遷移腳本，確保資料正確性

**Acceptance Criteria:**
- [ ] 測試資料遷移（5 篇文章, 2 分類, 3 個項目）
- [ ] 驗證 Payload CMS admin 中的內容
- [ ] 驗證圖片可正常顯示
- [ ] 驗證 Richtext 格式正確
- [ ] 驗證關聯關係正確
- [ ] 測試 Dry-run 模式
- [ ] 測試重複執行（不產生重複）
- [ ] 測試 Force 模式（可覆蓋）
- [ ] 測試錯誤處理（無效資料）

**Definition of Done:**
- [ ] 所有測試案例通過
- [ ] 手動驗證 10 筆資料正確性
- [ ] 無資料損壞或格式錯誤
- [ ] 報告準確反映遷移結果

**預估時間：** 2 小時

---

## Story 1.4: Global Layout Components

**User Story:**
```gherkin
As a Developer,
I want to create Header and Footer components matching Webflow design,
So that all pages have consistent navigation and branding.
```

### Overall Goal
建立全站共用的 Header 和 Footer 組件，實現：
- 響應式導航選單（桌面/手機）
- 動態從 Payload CMS 載入導航項目
- 一致的 Enchun 品牌展示
- 頁腳動態分類連結

### Estimated Effort
8-10 小時

---

### Task 1.4.1: Design Component Architecture

**Description:**
規劃 Header 和 Footer 組件的架構和 API

**Acceptance Criteria:**
- [ ] 定義 Header 組件 Props 介面
- [ ] 定義 Footer 組件 Props 介面
- [ ] 規劃 Payload CMS Globals 結構
  - Header global (navItems array)
  - Footer global (company info, social links)
- [ ] 設計狀態管理（手機選單開闔）
- [ ] 規劃響應式斷點（991px, 768px, 479px）
- [ ] 設計顏色系統對應 Webflow

**Definition of Done:**
- [ ] 組件架構文檔完成
- [ ] Props 型別定義完成
- [ ] Payload Globals schema 規劃完成
- [ ] 響應式設計策略文檔完成

**預估時間：** 1.5 小時

---

### Task 1.4.2: Create Header Global in Payload CMS

**Description:**
在 Payload CMS 建立 Header global，管理導航選單

**Acceptance Criteria:**
- [ ] 建立 `globals/Header.ts` 檔案
- [ ] 定義 navItems 欄位（array）：
  - label (顯示文字)
  - type (link / dropdown / button)
  - url (連結位址)
  - items (子選單 array)
  - badge (Hot / New / none)
  - openInNewTab (boolean)
- [ ] Admin UI 配置（群組編輯）
- [ ] 預設導航項目：
  - 關於恩群
  - 行銷方案 (Hot badge)
  - 行銷放大鏡 (New badge)
  - 網站作品
  - 團隊介紹
  - 聯絡我們
- [ ] 設定 access control

**Definition of Done:**
- [ ] Header global 在 Payload admin 可見
- [ ] 可編輯所有導航項目
- [ ] 支援多層下拉選單
- [ ] Badge 顯示正確

**預估時間：** 1.5 小時

---

### Task 1.4.3: Create Footer Global in Payload CMS

**Description:**
在 Payload CMS 建立 Footer global，管理頁腳內容

**Acceptance Criteria:**
- [ ] 建立 `globals/Footer.ts` 檔案
- [ ] 定義欄位：
  - companyInfo (object: logo, description, phone, email)
  - socialLinks (array: platform, url)
  - marketingLinks (static array)
  - categoryLinks (dynamic: 關聯 Categories collection)
  - copyrightText (text)
- [ ] Admin UI 配置（分區編輯）
- [ ] 預設資料填入

**Definition of Done:**
- [ ] Footer global 在 Payload admin 可見
- [ ] 可編輯所有頁腳區塊
- [ ] Category links 動態載入
- [ ] 預設資料完整

**預估時間：** 1 小時

---

### Task 1.4.4: Implement Header.astro Component

**Description:**
實作 Header 組件，包含導航選單和手機選單

**Acceptance Criteria:**
- [ ] Header 固定在頂部（sticky）
- [ ] 顯示 Enchun logo（連結到首頁）
- [ ] 桌面導航選單（從 Payload CMS）
- [ ] Badge 標籤（Hot/New）
- [ ] 手機版漢堡選單按鈕
- [ ] 手機選單全螢幕覆蓋
- [ ] 手機選單項目點擊後關閉
- [ ] Scroll 時 Header 背景變化

**Definition of Done:**
- [ ] Header.astro 組件完成
- [ ] 從 Payload CMS 載入導航資料
- [ ] 桌面版導航正常顯示
- [ ] 手機版漢堡選單正常運作
- [ ] Badge 顯示正確（Hot 紅色, New 綠色）
- [ ] Responsive 斷點正確
- [ ] Scroll 行為實作

**預估時間：** 2 小時

---

### Task 1.4.5: Implement Footer.astro Component

**Description:**
實作 Footer 組件，包含公司資訊和連結

**Acceptance Criteria:**
- [ ] 顯示 Enchun logo
- [ ] 公司描述文字
- [ ] 聯絡資訊（電話, Email）
- [ ] 社群媒體連結（Facebook）
- [ ] 行銷方案連結（靜態）
- [ ] 行銷放大鏡分類連結（動態從 CMS）
- [ ] Copyright 顯示（2018 - 2024）
- [ ] 響應式佈局（桌面 3 欄，手機 1 欄）

**Definition of Done:**
- [ ] Footer.astro 組件完成
- [ ] 從 Payload CMS 載入資料
- [ ] 所有區塊正常顯示
- [ ] Category links 動態載入
- [ ] 社群連結可點擊
- [ ] Responsive 佈局正確

**預估時間：** 1.5 小時

---

### Task 1.4.6: Integration with MainLayout

**Description:**
將 Header 和 Footer 整合到 MainLayout.astro

**Acceptance Criteria:**
- [ ] 更新 `layouts/Layout.astro`
- [ ] 整合 Header 組件
- [ ] 整合 Footer 組件
- [ ] 設定頁面容器樣式
- [ ] 確保所有頁面使用此 Layout
- [ ] 測試不同頁面的 Header/Footer 顯示

**Definition of Done:**
- [ ] Layout.astro 更新完成
- [ ] Header 和 Footer 正確顯示
- [ ] 所有頁面繼承 Layout
- [ ] 無視覺問題

**預估時間：** 1 小時

---

## Story 1.5: Homepage Implementation

**User Story:**
```gherkin
As a Visitor,
I want to view the homepage with hero section and service features,
So that I can understand what Enchun Digital offers.
```

### Overall Goal
實作首頁，包含 Hero section、服務特色、Portfolio 預覽、CTA 區塊，視覺保真度 95%+。

### Estimated Effort
6-8 小時

---

### Task 1.5.1: Create Homepage in Payload CMS

**Description:**
在 Payload CMS 建立首頁內容

**Acceptance Criteria:**
- [ ] 在 Pages collection 建立 homepage
- [ ] Slug: `index`
- [ ] Hero section blocks:
  - Headline
  - Subheadline
  - CTA button text and link
- [ ] Service features section:
  - 4 個服務特色卡片
  - Icon + title + description
- [ ] Portfolio preview section
- [ ] Final CTA section
- [ ] SEO meta data

**Definition of Done:**
- [ ] Homepage 在 Payload admin 可編輯
- [ ] 所有 sections 可編輯
- [ ] Preview 功能正常

**預估時間：** 1 小時

---

### Task 1.5.2: Create index.astro Route

**Description:**
建立首頁路由和頁面結構

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/index.astro`
- [ ] 使用 MainLayout
- [ ] 從 Payload API 載入首頁內容
- [ ] 實作各 section 組件：
  - Hero section
  - Service features grid
  - Portfolio preview
  - CTA section
- [ ] 錯誤處理（404 或 API 失敗）

**Definition of Done:**
- [ ] index.astro 路由建立
- [ ] 從 Payload API 成功載入資料
- [ ] 所有 sections 正確顯示
- [ ] 錯誤處理正常

**預估時間：** 2 小時

---

### Task 1.5.3: Implement Hero Section

**Description:**
實作首頁 Hero 區塊

**Acceptance Criteria:**
- [ ] 全背景圖片/影片
- [ ] 標題文字（headline）
- [ ] 副標題（subheadline）
- [ ] CTA 按鈕（樣式、動畫）
- [ ] 覆蓋層（深色遮罩）
- [ ] 響應式對齊（桌面置中，手機置中）
- [ ] 動畫效果（淡入、滑入）

**Definition of Done:**
- [ ] Hero.astro 組件完成
- [ ] 視覺符合 Webflow 設計
- [ ] 響應式斷點正確
- [ ] CTA 按鈕可點擊
- [ ] 動畫流暢

**預估時間：** 1.5 小時

---

### Task 1.5.4: Implement Service Features Grid

**Description:**
實作服務特色展示區塊

**Acceptance Criteria:**
- [ ] 4 個服務特色卡片
- [ ] 每個卡片包含：
  - Icon (使用 Iconify 或 SVG)
  - 標題（中文）
  - 描述文字
- [ ] Grid 佈局（桌面 2x2，手機 1x4）
- [ ] Hover 效果（陰影、上移）
- [ ] 卡片間距一致

**Definition of Done:**
- [ ] ServiceFeatures.astro 組件完成
- [ ] 從 Payload CMS 載入資料
- [ ] 視覺符合 Webflow 設計
- [ ] Grid 佈局響應式
- [ ] Hover 效果流暢

**預估時間：** 1.5 小時

---

### Task 1.5.5: Implement Portfolio Preview Section

**Description:**
實作作品集預覽區塊

**Acceptance Criteria:**
- [ ] 顯示 3-4 個精選作品
- [ ] 每個項目卡片：
  - 項目圖片
  - 項目標題
  - 簡短描述
  - "查看作品" 按鈕
- [ ] Grid 佈局（桌面 3-4 欄，手機 1-2 欄）
- [ ] 連結到 Portfolio 頁面

**Definition of Done:**
- [ ] PortfolioPreview.astro 組件完成
- [ ] 從 Payload CMS 載入精選作品
- [ ] 卡片設計符合 Webflow
- [ ] 連結正確指向 Portfolio

**預估時間：** 1 小時

---

### Task 1.5.6: Implement CTA Section

**Description:**
實作最終行動呼籲區塊

**Acceptance Criteria:**
- [ ] 標題：「準備好開始新的旅程了嗎？」
- [ ] 副標題文字
- [ ] 主要 CTA 按鈕（聯絡我們）
- [ ] 次要 CTA 按鈕（查看案例）
- [ ] 背景色區塊（品牌色）
- [ ] 按鈕樣式（主色、次色）
- [ ] 居中對齊

**Definition of Done:**
- [ ] CTASection.astro 組件完成
- [ ] 從 Payload CMS 載入內容
- [ ] 兩個按鈕功能正常
- [ ] 視覺突出吸引注意

**預估時間：** 1 小時

---

### Task 1.5.7: Performance Optimization and Testing

**Description:**
優化首頁效能並測試

**Acceptance Criteria:**
- [ ] 圖片優化（WebP, responsive sizes）
- [ ] 懶加載首屏內容
- [ ] Lighthouse Performance audit ≥ 90
- [ ] FCP < 1.5s
- [ ] LCP < 2.5s
- [ ] CLS < 0.1
- [ ] 視覺保真度測試（對比 Webflow）

**Definition of Done:**
- [ ] 所有效能指標達標
- [ ] 視覺保真度 ≥ 95%
- [ ] 所有瀏覽器測試通過
- [ ] 移動版測試通過

**預估時間：** 1 小時

---

## Story 1.6: About Page Implementation

**User Story:**
```gherkin
As a Visitor,
I want to learn about Enchun Digital's values and differences,
So that I can trust them as my digital marketing partner.
```

### Estimated Effort
6-8 小時

---

### Task 1.6.1: Create About Page in Payload CMS

**Acceptance Criteria:**
- [ ] 建立 about-enchun 頁面（slug: about-enchun）
- [ ] Hero section:
  - Title: "關於恩群數位"
- [ ] Service features section:
  - 4 個特色卡片
  - 在地化優先
  - 高投資轉換率
  - 數據優先
  - 關係優於銷售
- [ ] Comparison table:
  - 恩群數位 vs 其他行銷公司
  - 多行對比
- [ ] CTA section:
  - Title: "跟行銷顧問聊聊"
  - 按鈕連結到聯絡頁面

**預估時間：** 1 小時

---

### Task 1.6.2: Create about-enchun.astro Route

**Acceptance Criteria:**
- [ ] 建立路由檔案
- [ ] 使用 MainLayout
- [ ] 從 Payload API 載入內容
- [ ] 實作各 section 組件

**預估時間：** 1.5 小時

---

### Task 1.6.3: Implement Hero Section

**Acceptance Criteria:**
- [ ] 背景圖片
- [ ] Title: "關於恩群數位"
- [ ] 副標題（如有）
- [ ] 覆蓋層

**預估時間：** 1 小時

---

### Task 1.6.4: Implement Service Features Section

**Acceptance Criteria:**
- [ ] 4 個特色卡片
- [ ] Icon + Title + Description
- [ ] Grid 佈局
- [ ] Hover 效果

**預估時間：** 1.5 小時

---

### Task 1.6.5: Implement Comparison Table

**Acceptance Criteria:**
- [ ] Table 結構：
  - 左欄：恩群數位
  - 右欄：其他行銷公司
- [ ] 多行對比項目
- [ ] 表格樣式（邊框、間距）
- [ ] 響應式（手機可水平滾動）

**預估時間：** 1.5 小時

---

### Task 1.6.6: Implement CTA Section

**Acceptance Criteria:**
- [ ] Title: "跟行銷顧問聊聊"
- [ ] CTA 按鈕
- [ ] 連結到 contact-us 或直接 mailto

**預估時間：** 0.5 小時

---

### Task 1.6.7: Performance and Visual Testing

**Acceptance Criteria:**
- [ ] Lighthouse Performance ≥ 90
- [ ] 視覺保真度 ≥ 95%
- [ ] Responsive 測試

**預估時間：** 1 小時

---

## Story 1.7: Solutions Page Implementation

**User Story:**
```gherkin
As a Visitor,
I want to see the marketing services offered,
So that I can understand how Enchun can help my business.
```

### Estimated Effort
4-6 小時

---

### Task 1.7.1: Create Solutions Page in Payload CMS

**Acceptance Criteria:**
- [ ] 建立 marketing-solutions 頁面（slug: marketing-solutions）
- [ ] Hero section:
  - Title: "行銷方案"
- [ ] Services list:
  - Google 商家關鍵字
  - Google Ads
  - 社群代操
  - 論壇行銷
  - 網紅行銷
  - 形象影片
- [ ] 每個服務包含：
  - Title
  - Description
  - 詳細資訊（可選）
- [ ] Service badges:
  - "Hot" badge（熱門服務）
  - "New" badge（新服務）

**預估時間：** 1 小時

---

### Task 1.7.2: Create marketing-solutions.astro Route

**Acceptance Criteria:**
- [ ] 建立路由檔案
- [ ] 使用 MainLayout
- [ ] 從 Payload API 載入內容
- [ ] 實作 services list 組件

**預估時間：** 1.5 小時

---

### Task 1.7.3: Implement Hero Section

**Acceptance Criteria:**
- [ ] 背景圖片
- [ ] Title: "行銷方案"
- [ ] 副標題（如有）

**預估時間：** 1 小時

---

### Task 1.7.4: Implement Services List Component

**Acceptance Criteria:**
- [ ] 6 個服務項目卡片
- [ ] 每個卡片包含：
  - Icon
  - Service title
  - Description
  - "Hot" badge（如有）
  - "New" badge（如有）
- [ ] Grid 或 List 佈局
- [ ] Hover 效果

**預估時間：** 2 小時

---

### Task 1.7.5: Performance and Visual Testing

**Acceptance Criteria:**
- [ ] Lighthouse Performance ≥ 90
- [ ] 視覺保真度 ≥ 95%
- [ ] Responsive 測試

**預估時間：** 1 小時

---

## Story 1.8: Contact Page with Form

**User Story:**
```gherkin
As a Potential Client,
I want to contact Enchun Digital through a form,
So that I can inquire about their services.
```

### Estimated Effort
6-8 小時

---

### Task 1.8.1: Create Contact Page in Payload CMS

**Acceptance Criteria:**
- [ ] 建立 contact-us 頁面（slug: contact-us）
- [ ] Hero section:
  - Title: "聯絡我們"
  - Description
- [ ] Contact form section:
  - 表單標題
  - 表單說明
- [ ] Contact info section:
  - Phone: 02-55700527
  - Email: enchuntaiwan@gmail.com
  - Facebook link
- [ ] CTA section

**預估時間：** 1 小時

---

### Task 1.8.2: Create contact-us.astro Route

**Acceptance Criteria:**
- [ ] 建立路由檔案
- [ ] 使用 MainLayout
- [ ] 從 Payload API 載入內容

**預估時間：** 1 小時

---

### Task 1.8.3: Implement Contact Form

**Acceptance Criteria:**
- [ ] 表單欄位：
  - Name (required)
  - Email (required, email validation)
  - Phone (optional)
  - Message (required, textarea)
  - Service interest (dropdown/select)
- [ ] Client-side validation
- [ ] Submit 按鈕（樣式、loading state）
- [ ] Success message display
- [ ] Error message display

**預估時間：** 2 小時

---

### Task 1.8.4: Implement Form Submission Logic

**Acceptance Criteria:**
- [ ] 建立 API route `/api/contact`
- [ ] Cloudflare Worker 處理表單提交
- [ ] Email 發送（使用 Resend）
- [ ] Spam protection:
  - Honeypot field
  - Rate limiting
- [ ] 表單資料儲存（可選）
- [ ] 錯誤處理

**Definition of Done:**
- [ ] 表單提交成功
- [ ] Email 正確發送
- [ ] Spam protection 正常運作
- [ ] 錯誤處理完善

**預估時間：** 2 小時

---

### Task 1.8.5: Implement Contact Info Display

**Acceptance Criteria:**
- [ ] Phone number顯示
- [ ] Email 顯示（可點擊 mailto）
- [ ] Facebook link（可點擊）
- [ ] Icon 或文字標籤

**預估時間：** 0.5 小時

---

### Task 1.8.6: Implement CTA Section

**Acceptance Criteria:**
- [ ] 標題和描述
- [ ] CTA 按鈕

**預估時間：** 0.5 小時

---

### Task 1.8.7: Testing and Validation

**Acceptance Criteria:**
- [ ] 表單驗證測試
- [ ] 表單提交測試
- [ ] Email 接收測試
- [ ] Spam protection 測試
- [ ] 視覺保真度 ≥ 95%

**預估時間：** 1 小時

---

## Story 1.9: Blog System Implementation

**User Story:**
```gherkin
As a Visitor,
I want to browse marketing articles and insights,
So that I can learn from Enchun's expertise.
```

### Overall Goal
建立完整的部落格系統，包含文章列表、文章詳情、分類頁面，支援分類篩選和搜尋。

### Estimated Effort
12-16 小時

---

### Task 1.9.1: Design Blog Architecture

**Description:**
規劃部落格系統的架構和路由

**Acceptance Criteria:**
- [ ] 定義路由結構：
  - `/blog` - 文章列表
  - `/blog/[slug]` - 文章詳情
  - `/blog/category/[slug]` - 分類頁面
- [ ] 設計 Payload CMS Posts collection 擴展
- [ ] 設計分類篩選機制
- [ ] 規劃 SEO 策略（每頁獨特 meta tags）
- [ ] 設計分頁機制

**Definition of Done:**
- [ ] 路由架構文檔完成
- [ ] Posts collection 擴展計劃完成
- [ ] 分類篩選策略定義
- [ ] SEO 實作計劃完成

**預估時間：** 2 小時

---

### Task 1.9.2: Implement Blog Listing Page

**Description:**
實作文章列表頁面

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/blog/index.astro`
- [ ] 從 Payload API 載入已發布文章（status: published）
- [ ] 預設排序：publishedDate 降序
- [ ] 分類篩選 UI：
  - 分類標籤（從 Categories collection）
  - 點擊後過濾文章
  - "全部" 選項
- [ ] 文章卡片顯示：
  - Featured image
  - Title
  - Excerpt (從 Posts.excerpt)
  - Category badge
  - Published date
- [ ] 分頁或無限滾動
- [ ] SEO meta tags

**Definition of Done:**
- [ ] /blog 頁面正常顯示
- [ ] 文章列表正確載入
- [ ] 分類篩選功能正常
- [ ] 分頁功能正常（或無限滾動）
- [ ] SEO meta 正確

**預估時間：** 2.5 小時

---

### Task 1.9.3: Implement Article Detail Page

**Description:**
實作文章詳情頁面

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/blog/[slug].astro`
- [ ] 從 Payload API 載入文章（根據 slug）
- [ ] Hero section:
  - Category badge
  - Title
  - Published date
  - Author（如有）
- [ ] 文章內容區塊：
  - Rich text 渲染（Lexical format）
  - 圖片顯示
  - 程式碼區塊（如有）
- [ ] Related articles section:
  - 同分類文章
  - 3-5 篇
  - 卡片式顯示
- [ ] Social sharing buttons:
  - Facebook share
  - LINE share
  - Copy link
- [ ] OG tags 配置（動態從 article.ogImage）

**Definition of Done:**
- [ ] 文章詳情頁正常顯示
- [ ] Rich text 格式正確
- [ ] Related articles 相關且正確
- [ ] Social sharing 功能正常
- [ ] SEO 和 OG tags 正確

**預估時間：** 3 小時

---

### Task 1.9.4: Implement Category Page

**Description:**
實作分類頁面

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/blog/category/[slug].astro`
- [ ] 從 Payload API 載入分類資訊
- [ ] 顯示分類名稱和描述
- [ ] 該分類文章列表
- [ ] 分類顏色主題：
  - 使用 Categories.textColor
  - 使用 Categories.backgroundColor
  - Badge 使用分類顏色
- [ ] SEO meta tags（動態）

**Definition of Done:**
- [ ] 分類頁面正常顯示
- [ ] 文章列表正確過濾
- [ ] 顏色主題套用
- [ ] SEO tags 正確

**預估時間：** 2 小時

---

### Task 1.9.5: Extend Posts Collection for Blog Features

**Description:**
擴展 Posts collection 以支援部落格功能

**Acceptance Criteria:**
- [ ] 添加 `excerpt` 欄位（已包含在 Story 1.2）
- [ ] 添加 `ogImage` 欄位（已包含在 Story 1.2）
- [ ] 添加 `showInFooter` 欄位（已包含在 Story 1.2）
- [ ] 添加 `relatedPosts` 欄位（關聯同分類文章）
- [ ] 添加 `readingTime` 欄位（計算閱讀時間）
- [ ] 更新 admin UI 配置

**Definition of Done:**
- [ ] 所有新欄位可編輯
- [ ] relatedPosts 可選擇多個文章
- [ ] readingTime 自動計算（字數 / 200）
- [ ] Types regenerated

**預估時間：** 1.5 小時

---

### Task 1.9.6: Implement Search/Filter Functionality (Optional)

**Description:**
實作文章搜尋功能（可選）

**Acceptance Criteria:**
- [ ] 搜尋框 UI
- [ ] Payload API `_q` 參數搜尋
- [ ] 即時搜尋（debounce）
- [ ] 搜尋結果頁面

**Definition of Done:**
- [ ] 搜尋功能正常
- [ ] 即時搜尋流暢
- [ ] 搜尋結果準確

**預估時間：** 2 小時

---

### Task 1.9.7: Performance Optimization and Testing

**Acceptance Criteria:**
- [ ] Lighthouse Performance ≥ 90 (所有頁面)
- [ ] 圖片懶加載
- [ ] 程式碼 syntax highlighting
- [ ] 視覺保真度 ≥ 95%
- [ ] 分頁效能測試
- [ ] 跨瀏覽器測試

**預估時間：** 2 小時

---

## Story 1.10: Portfolio Implementation

**User Story:**
```gherkin
As a Potential Client,
I want to see Enchun's past website projects,
So that I can evaluate their design capabilities.
```

### Estimated Effort
6-8 小時

---

### Task 1.10.1: Design Portfolio Architecture

**Acceptance Criteria:**
- [ ] 定義路由結構：
  - `/website-portfolio` - 列表頁
  - `/webdesign-profolio/[slug]` - 詳情頁
- [ ] 設計 Portfolio collection 擴展
- [ ] 設計篩選機制（按類型、標籤）
- [ ] SEO 策略

**預估時間：** 1 小時

---

### Task 1.10.2: Implement Portfolio Listing Page

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/website-portfolio.astro`
- [ ] 2-column grid 佈局
- [ ] Portfolio card 顯示：
  - Project image
  - Project title
  - Description
  - Tags (e.g., "一頁式銷售", "客戶預約")
- [ ] 從 Payload API 載入所有 portfolio
- [ ] Hover 效果（顯示更多資訊）
- [ ] SEO meta tags

**Definition of Done:**
- [ ] Portfolio 列表頁正常顯示
- [ ] 所有項目正確載入
- [ ] Grid 佈局響應式
- [ ] Hover 效果流暢

**預估時間：** 2 小時

---

### Task 1.10.3: Implement Portfolio Detail Page

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/webdesign-profolio/[slug].astro`
- [ ] 從 Payload API 載入專案資料
- [ ] Hero section:
  - Project image
  - Project title
  - Tags
- [ ] 專案描述區塊
- [ ] "前往網站" 按鈕（外部連結 url）
- [ ] Image gallery（多圖片輪播）
- [ ] Case study 內容（如有）
- [ ] 相關專案推薦

**Definition of Done:**
- [ ] 專案詳情頁正常顯示
- [ ] 外部連結正確
- [ ] Gallery 功能正常
- [ ] SEO tags 正確

**預估時間：** 2 小時

---

### Task 1.10.4: Implement Portfolio Filter (Optional)

**Acceptance Criteria:**
- [ ] 篩選 UI（按 websiteType 或 tags）
- [ ] 即時篩選
- [ ] 篩選結果計數顯示

**預估時間：** 1 小時

---

### Task 1.10.5: Performance and Visual Testing

**Acceptance Criteria:**
- [ ] Lighthouse Performance ≥ 90
- [ ] 視覺保真度 ≥ 95%
- [ ] 圖片優化（WebP, lazy loading）
- [ ] Gallery 載入效能

**預估時間：** 1 小時

---

## Story 1.11: Teams Page Implementation

**User Story:**
```gherkin
As a Visitor,
I want to see the Enchun team members,
So that I can know who will be working on my project.
```

### Estimated Effort
4-6 小時

---

### Task 1.11.1: Design Teams Architecture

**Acceptance Criteria:**
- [ ] 決定是否使用 Payload CMS collection
  - 選項 A: 建立 Teams collection（可編輯）
  - 選項 B: 硬編碼（資料量少）
- [ ] 路由：`/teams`
- [ ] SEO 策略

**建議：** 使用 Teams collection 以保持一致性

**預估時間：** 0.5 小時

---

### Task 1.11.2: Create Teams Collection (if using CMS)

**Acceptance Criteria:**
- [ ] 建立 `collections/Teams/index.ts`
- [ ] Slug: `teams`
- [ ] 欄位：
  - name (成員姓名)
  - role (職稱)
  - photo (upload to media)
  - bio (簡介, richtext)
  - order (排序)
  - email (email, 可選)
- [ ] Access control
- [ ] Admin UI 配置

**預估時間：** 1 小時

---

### Task 1.11.3: Implement Teams Page

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/teams.astro`
- [ ] 從 Payload API 載入團隊成員
- [ ] Grid 佈局（桌面 3-4 欄，手機 2 欄）
- [ ] Team member card:
  - Photo (圓形裁切)
  - Name
  - Role/title
  - Bio（截斷顯示或展開）
- [ ] Order 排序顯示
- [ ] SEO meta tags

**Definition of Done:**
- [ ] Teams 頁面正常顯示
- [ ] 所有成員正確載入
- [ ] 圓形照片裁切正確
- [ ] 響應式佈局

**預估時間：** 2 小時

---

### Task 1.11.4: Performance and Visual Testing

**Acceptance Criteria:**
- [ ] Lighthouse Performance ≥ 90
- [ ] 視覺保真度 ≥ 95%
- [ ] 圓形照片效能最佳化

**預估時間：** 1 小時

---

## Story 1.12: Authentication System Implementation

**User Story:**
```gherkin
As a Content Editor or Admin,
I want to securely log in to the admin area,
So that I can manage website content.
```

### Estimated Effort
8-10 小時

---

### Task 1.12.1: Design Authentication Architecture

**Acceptance Criteria:**
- [ ] 選擇認證方案：
  - Payload CMS built-in JWT ✅ (已決定)
  - Session management via HTTP-only cookies
- [ ] 定義路由保護策略：
  - `/admin/*` 需要認證
  - `/api/*` 部分需要認證
- [ ] 定義角色權限：
  - Admin: 完整權限
  - Editor: 僅內容管理
- [ ] 設計登入流程：
  - 登入頁面
  - 忘記密碼流程
  - Email 驗證

**Definition of Done:**
- [ ] 認證架構文檔完成
- [ ] 角色權限矩陣完成
- [ ] 流程圖完成

**預估時間：** 1.5 小時

---

### Task 1.12.2: Implement Login Page

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/admin/login.astro`
- [ ] Login form:
  - Email input
  - Password input
  - "Remember me" checkbox
  - Login button
  - Forgot password link
- [ ] Client-side validation
- [ ] Error message display
- [ ] Loading state
- [ ] 連結到 Payload CMS `/api/users/login`
- [ ] 成功後重定向到 `/admin/dashboard`

**Definition of Done:**
- [ ] 登入頁面設計完整
- [ ] 表單驗證正常
- [ ] API 整合完成
- [ ] 重定向正確
- [ ] 錯誤處理完善

**預估時間：** 2 小時

---

### Task 1.12.3: Implement Payload Authentication Middleware

**Acceptance Criteria:**
- [ ] Payload CMS 已配置 built-in auth (✅ 完成)
- [ ] 設定 HTTP-only cookies
- [ ] JWT token 管理
- [ ] Token refresh mechanism
- [ ] Session timeout 配置

**定義 of Done:**
- [ ] Payload auth 配置正確
- [ ] Cookies 安全（HTTP-only, secure, sameSite）
- [ ] Token 自動刷新

**預估時間：** 1 小時

---

### Task 1.12.4: Implement Route Protection

**Acceptance Criteria:**
- [ ] 建立 `src/middleware.ts`
- [ ] 保護所有 `/admin/*` 路由
- [ ] 未認證重定向到 `/admin/login`
- [ ] 已認證允許通過
- [ ] Payload session verification

**Definition of Done:**
- [ ] Middleware 正確攔截未認證請求
- [ ] 重定向正常運作
- [ ] Payload session 驗證正確

**預估時間：** 2 小時

---

### Task 1.12.5: Implement Role-Based Access Control

**Acceptance Criteria:**
- [ ] Users collection 添加 `role` 欄位 (admin, editor)
- [ ] 建立 `access/adminOnly.ts`
- [ ] 建立 `access/adminOrEditor.ts`
- [ ] 更新 Users collection access:
  - delete: adminOnly
- [ ] 更新 Posts/Pages access:
  - create/update/delete: adminOrEditor
- [ ] 更新 Settings access:
  - all: adminOnly
- [ ] 重新生成型別

**Definition of Done:**
- [ ] Role 欄位可編輯
- [ ] Access functions 正確執行
- [ ] Admin 可完整權限
- [ ] Editor 僅內容管理權限
- [ ] 測試兩種角色權限

**預估時間：** 2 小時

---

### Task 1.12.6: Implement Password Reset Flow

**Acceptance Criteria:**
- [ ] "Forgot password" 連結
- [ ] 輸入 email 頁面
- [ ] Payload forgot password API
- [ ] Resend email 發送重設連結
- [ ] 重設密碼頁面
- [ ] Email 驗證 token
- [ ] 更新密碼
- [ ] 成功訊息

**Definition of Done:**
- [ ] 忘記密碼流程完整
- [ ] Email 正確發送
- [ ] Token 驗證正常
- [ ] 密碼更新成功

**預估時間：** 2 小時

---

### Task 1.12.7: Implement Logout Functionality

**Acceptance Criteria:**
- [ ] "登出" 按鈕（在 Header 或 Dashboard）
- [ ] 呼叫 Payload `/api/users/logout`
- [ ] 清除本地 session
- [ ] 重定向到首頁或登入頁

**預估時間：** 0.5 小時

---

## Story 1.13: Admin Dashboard

**User Story:**
```gherkin
As an Authenticated User,
I want to see a dashboard after logging in,
So that I can access key features quickly.
```

### Estimated Effort
4-6 小時

---

### Task 1.13.1: Design Dashboard Layout

**Acceptance Criteria:**
- [ ] Dashboard layout 結構
- [ ] Sidebar navigation:
  - Dashboard
  - Content (Posts, Pages, Portfolio, Teams)
  - Media
  - Settings
  - Logout
- [ ] Main content area
- [ ] User profile header

**預估時間：** 1 小時

---

### Task 1.13.2: Create Dashboard Route

**Acceptance Criteria:**
- [ ] 建立 `apps/frontend/src/pages/admin/dashboard.astro`
- [ ] 使用 AdminLayout（不同於 MainLayout）
- [ ] Route protection via middleware
- [ ] 從 Payload API 載入統計資料

**預估時間：** 1.5 小時

---

### Task 1.13.3: Implement Quick Stats Section

**Acceptance Criteria:**
- [ ] 統計卡片：
  - Total posts
  - Published posts
  - Draft posts
  - Total portfolio items
  - Total categories
  - Total team members
- [ ] 從 Payload API 計算統計：
  - `/api/posts?where[status][equals]=published&limit=0`
  - `/api/posts?where[status][equals]=draft&limit=0`
  - `/api/portfolio?limit=0`
- [ ] 即時載入
- [ ] Loading states

**Definition of Done:**
- [ ] 統計資料準確
- [ ] Loading states 正確
- [ ] 數據即時更新（可選）

**預估時間：** 2 小時

---

### Task 1.13.4: Implement Quick Actions

**Acceptance Criteria:**
- [ ] Quick action 按鈕：
  - "新增文章" → `/admin/collection/posts/create`
  - "新增作品" → `/admin/collection/portfolio/create`
  - "前往 CMS" → `/admin/collections`
- [ ] Button 設計一致
- [ ] Hover 效果

**預估時間：** 1 小時

---

### Task 1.13.5: Implement Recent Activity List

**Acceptance Criteria:**
- [ ] 顯示最近 5 筆內容變更
- [ ] Activity type:
  - Created post
  - Updated post
  - Published post
  - Created portfolio
- [ ] 顯示標題和時間
- [ ] 連結到編輯頁面
- [ ] 從 Payload API 查詢：
  - `/api/posts?sort=-updatedAt&limit=5`
  - `/api/portfolio?sort=-updatedAt&limit=5`

**定義 of Done:**
- [ ] 最近活動列表正確
- [ ] 時間戳格式易讀
- [ ] 連結正確

**預估時間：** 1 小時

---

### Task 1.13.6: Implement User Profile Section

**Acceptance Criteria:**
- [ ] 顯示用戶資訊：
  - Name
  - Email
  - Role
  - Avatar (如有)
- [ ] "登出" 按鈕
- [ ] "個人設定" 按鈕（可選）

**預估時間：** 0.5 小時

---

## Story 1.14: SEO Implementation

**User Story:**
```gherkin
As a Marketing Manager,
I want to maintain SEO rankings after migration,
So that organic traffic is not lost.
```

### Estimated Effort
8-10 小時

---

### Task 1.14.1: Generate Dynamic Sitemap

**Acceptance Criteria:**
- [ ] 建立 `/sitemap.xml` 動態生成
- [ ] 包含所有公開頁面：
  - Homepage
  - Pages (所有 published)
  - Posts (所有 published)
  - Portfolio items
  - Categories
  - Teams
- [ ] 使用 `next-sitemap` 套件（已配置）
- [ ] 自動更新（內容變更時）
- [ ] Sitemap 提交到 Google Search Console

**Definition of Done:**
- [ ] `/sitemap.xml` 可訪問
- [ ] 包含所有必要 URL
- [ ] XML 格式正確
- [ ] 自動更新機制運作

**預估時間：** 2 小時

---

### Task 1.14.2: Implement Meta Tags System

**Acceptance Criteria:**
- [ ] 所有頁面包含 meta tags：
  - `<title>`
  - `<meta name="description">`
  - `<meta property="og:title">`
  - `<meta property="og:description">`
  - `<meta property="og:image">`
  - `<link rel="canonical">`
- [ ] Payload SEO plugin 配置（已完成）
- [ ] 動態 meta tags from Payload CMS
- [ ] Social share preview 測試

**Definition of Done:**
- [ ] 所有頁面 meta tags 完整
- [ ] OG tags 正確
- [ ] Social share 測試通過

**預估時間：** 2 小時

---

### Task 1.14.3: Create 301 Redirect Map

**Acceptance Criteria:**
- [ ] 從 Webflow 匯出取得所有 URL
- [ ] 建立 301 redirect 對應表
- [ ] Webflow URL → New URL
- [ ] 實作 redirects in:
  - Astro middleware
  - 或 Payload Redirects plugin（已配置）
- [ ] 測試所有關鍵 redirects
- [ ] 監控 404 錯誤

**Definition of Done:**
- [ ] Redirect map 文檔完成
- [ ] 301 redirects 正確運作
- [ ] 所有關鍵頁面可訪問
- [ ] 404 錯誤降至最低

**預估時間：** 2 小時

---

### Task 1.14.4: Setup Google Analytics

**Acceptance Criteria:**
- [ ] 使用現有 GA ID: G-DKBZWCGGZR
- [ ] 在 MainLayout 加入 GA script
- [ ] 追蹤事件：
  - Page views
  - Form submissions
  - External link clicks
- [ ] 驗證 GA 接收資料

**Definition of Done:**
- [ ] GA script 正確載入
- [ ] 事件追蹤正常
- [ ] GA Real-time 測試通過

**預估時間：** 1 小時

---

### Task 1.14.5: Implement Structured Data (Schema.org)

**Acceptance Criteria:**
- [ ] 為首頁加入 Organization schema
- [ ] 為文章加入 Article schema
- [ ] 為作品加入 CreativeWork schema
- [ ] JSON-LD 格式
- [ ] Google Rich Results Test 驗證

**Definition of Done:**
- [ ] Structured data 正確
- [ ] Rich Results 無錯誤
- [ ] 驗證測試通過

**預估時間：** 2 小時

---

### Task 1.14.6: SEO Testing and Validation

**Acceptance Criteria:**
- [ ] Lighthouse SEO score ≥ 95
- [ ] Meta tags 測試
- [ ] OG tags 測試（Facebook Debugger）
- [ ] Sitemap 驗證（Google Search Console）
- [ ] Redirects 測試
- [ ] GA 測試
- [ ] SEO 完整報告

**預估時間：** 2 小時

---

## Story 1.15: Performance Optimization

**User Story:**
```gherkin
As a Visitor,
I want pages to load quickly,
So that I have a smooth browsing experience.
```

### Estimated Effort
8-12 小時

---

### Task 1.15.1: Performance Audit and Baseline

**Acceptance Criteria:**
- [ ] 對所有頁面執行 Lighthouse audit
- [ ] 記錄 baseline scores:
  - Performance
  - Accessibility
  - Best Practices
  - SEO
- [ ] 識別關鍵問題：
  - Large images
  - Render-blocking resources
  - Unused JavaScript
  - Unoptimized CSS
- [ ] 建立改善計劃

**定義 of Done:**
- [ ] Baseline audit 報告完成
- [ ] 問題清單優先級排序
- [ ] 改善計劃文檔完成

**預估時間：** 2 小時

---

### Task 1.15.2: Optimize Images

**Acceptance Criteria:**
- [ ] 轉換所有圖片為 WebP 格式
- [ ] 實作 responsive images:
  - `srcset` for different sizes
  - sizes attribute
- [ ] 懶加載非首屏圖片：
  - Native loading="lazy"
  - JavaScript lazy loading fallback
- [ ] 圖片壓縮：
  - 使用 Sharp 或 ImageOptim API
  - 質質調整（80-90%）
- [ ] 圖片 CDN 配置（Cloudflare Images）

**Definition of Done:**
- [ ] 所有圖片為 WebP 格式
- [ ] Responsive images 正確
- [ ] Lazy loading 運作
- [ ] 圖片大小減少 50%+
- [ ] LCP 改善 ≥ 20%

**預估時間：** 3 小時

---

### Task 1.15.3: Optimize CSS and JavaScript

**Acceptance Criteria:**
- [ ] CSS minification（Tailwind 已處理）
- [ ] CSS purging（移除未使用樣式）
- [ ] JavaScript minification
- [ ] Code splitting:
  - 動態 import
  - Route-based splitting
  - Component lazy loading
- [ ] Tree shaking（移除未使用代碼）

**Definition of Done:**
- [ ] CSS/JS 已最小化
- [ ] Bundle size 減少 30%+
- [ ] Code splitting 正確運作
- [ ] Tree shaking 有效

**預估時間：** 2 小時

---

### Task 1.15.4: Optimize Font Loading

**Acceptance Criteria:**
- [ ] Preload critical fonts:
  - `<link rel="preload">` for Noto Sans TC
  - `<link rel="preload">` for Quicksand
- [ ] Font-display: swap
- [ ] Subset fonts（只包含必要字元）
- [ ] FOUT/FOIT 預防：
  - System font fallback
  - Invisible預載期

**Definition of Done:**
- [ ] 字載載時間 < 100ms
- [ ] 無 FOUT/FOIT 問題
- [ ] 字體顯示快速

**預估時間：** 1 小時

---

### Task 1.15.5: Implement Caching Strategy

**Acceptance Criteria:**
- [ ] Cloudflare CDN cache 配置
- [ ] Browser cache headers:
  - Static assets: 1 year
  - Images: 1 month
  - HTML: 不 cache（ETag）
- [ ] Service Worker for offline (optional)
- [ ] Cache invalidation strategy

**Definition of Done:**
- [ ] Cache headers 正確設定
- [ ] CDN hit rate > 80%
- [ ] 快取命中率良好

**預估時間：** 1.5 小時

---

### Task 1.15.6: Optimize Critical Rendering Path

**Acceptance Criteria:**
- [ ] Inline critical CSS
- [ ] Defer non-critical JavaScript
- [ ] Preconnect to external domains
- [ ] Prioritize above-the-fold content
- [ ] Minimize TBT (Total Blocking Time)

**Definition of Done:**
- [ ] FCP < 1.5s
- [ ] LCP < 2.5s
- [ ] TBT < 200ms
- [ ] CLS < 0.1

**預估時間：** 2 小時

---

### Task 1.15.7: Final Performance Testing

**Acceptance Criteria:**
- [ ] 所有頁面 Lighthouse ≥ 95:
  - Performance
  - Accessibility
  - Best Practices
  - SEO
- [ ] Core Web Vitals "Good"
- [ ] Mobile testing
- [ ] WebPageTest analysis
- [ ] Performance report

**Definition of Done:**
- [ ] 所有指標達標
- [ ] 跨瀏覽器測試通過
- [ ] 效能報告完整

**預估時間：** 1.5 小時

---

## Story 1.16: Deployment to Cloudflare

**User Story:**
```gherkin
As a DevOps Engineer,
I want to deploy the application to Cloudflare,
So that the website is live and accessible.
```

### Estimated Effort
6-8 小時

---

### Task 1.16.1: Prepare Frontend Build Configuration

**Acceptance Criteria:**
- [ ] Astro build 配置優化
- [ ] 環境變數設定：
  - `PUBLIC_PAYLOAD_CMS_URL`
  - `PAYLOAD_CMS_API_KEY` (if needed)
- [ ] wrangler.toml 配置：
  - name: "enchun-frontend"
  - compatibility_date
  - assets directory
  - routes (如有)
  - environment variables
- [ ] 構建指令測試

**定義 of Done:**
- [ ] Build 成功無錯誤
- [ ] 環境變數正確
- [ ] Wrangler 配置完整

**預估時間：** 1.5 小時

---

### Task 1.16.2: Configure Backend Deployment

**Acceptance Criteria:**
- [ ] Backend build 配置:
  - `output: 'standalone'`
  - Environment variables
- [ ] Docker configuration:
  - `Dockerfile.backend` (已存在)
  - Multi-stage build
  - Environment variables
- [ ] Deployment target:
  - Vercel / Railway / Coolify
- [ ] MongoDB Atlas connection
- [ ] R2 storage configuration

**定義 of Done:**
- [ ] Docker image 建立成功
- [ ] 環境變數正確設定
- [ ] 連線測試通過

**預估時間：** 2 小時

---

### Task 1.16.3: Configure Custom Domain

**Acceptance Criteria:**
- [ ] Frontend domain: `www.enchun.tw`
  - Cloudflare Pages
- [ ] Backend domain: `enchuntw-admin.anlstudio.cc`
  - Payload CMS admin
- [ ] DNS records:
  - A records / CNAME
  - WWW subdomain
- [ ] SSL certificates:
  - Auto-provisioned by Cloudflare
- [ ] DNS propagation 驗證

**定義 of Done:**
- [ ] DNS 正確指向 Cloudflare
- [ ] SSL 憑證有效
- [ ] WWW domain 運作正常

**預估時間：** 1.5 小時

---

### Task 1.16.4: Setup CI/CD Pipeline

**Acceptance Criteria:**
- [ ] Git repository 連接
- [ ] 自動部署觸發：
  - Push to `main` branch
  - Pull request merge
- [ ] Build steps:
  1. Install dependencies
  2. Run tests
  3. Build frontend
  4. Deploy to Cloudflare Pages
- [ ] Deployment notifications:
  - Slack / Email
  - Deployment status

**定義 of Done:**
- [ ] CI/CD pipeline 自動運作
- [ ] 測試失敗阻止部署
- [ ] 通知正常運作

**預估時間：** 2 小時

---

### Task 1.16.5: Configure Environment Variables

**Acceptance Criteria:**
- [ ] Frontend variables (Cloudflare Pages):
  - `PUBLIC_PAYLOAD_CMS_URL`
  - `PUBLIC_GA_ID` (G-DKBZWCGGZR)
- [ ] Backend variables:
  - `DATABASE_URI`
  - `PAYLOAD_SECRET`
  - `NEXT_PUBLIC_SERVER_URL`
  - `R2_*` variables
  - `RESEND_API_KEY`
- [ ] Production values
- [ ] Development values
- [ ] Secrets management

**定義 of Done:**
- [ ] 所有環境變數設定
- [ ] Secrets 安全存儲
- [ ] 開發/生產環境隔離

**預估時間：** 1 小時

---

### Task 1.16.6: Final Deployment and Verification

**Acceptance Criteria:**
- [ ] 前端部署到 Cloudflare Pages
- [ ] 後端部署到選擇平台
- [ ] DNS propagation complete
- [ ] SSL certificates active
- [ ] Full end-to-end testing:
  - Homepage loads
  - All pages accessible
  - Forms work
  - Auth works
  - CMS admin accessible
- [ ] Performance verification
- [ ] Monitoring setup

**定義 of Done:**
- [ ] 網站正式上線
- [ ] 所有功能正常運作
- [ ] 監控已建立

**預估時間：** 1.5 小時

---

## Story 1.17: Testing and Quality Assurance

**User Story:**
```gherkin
As a QA Engineer,
I want to thoroughly test the application,
So that there are no critical bugs at launch.
```

### Estimated Effort
12-16 小時

---

### Task 1.17.1: Create Test Plan

**Acceptance Criteria:**
- [ ] 測試範圍定義
- [ ] 測試案例清單
- [ ] 測試環境設定
- [ ] Bug 報告模板
- [ ] Launch checklist

**定義 of Done:**
- [ ] 測試計劃文檔完整
- [ ] 所有團隊成員理解計劃

**預估時間：** 2 小時

---

### Task 1.17.2: Cross-Browser Testing

**Acceptance Criteria:**
- [ ] 測試瀏覽器：
  - Chrome (latest 2 versions)
  - Firefox (latest 2 versions)
  - Safari (latest 2 versions)
  - Edge (latest 2 versions)
- [ ] 測試平台：
  - Windows 10/11
  - macOS 12+
  - iOS (latest)
  - Android (latest)
- [ ] 測試項目：
  - All pages render correctly
  - Navigation works
  - Forms submit
  - Media displays
  - Interactive features work
- [ ] Document browser-specific issues

**定義 of Done:**
- [ ] 所有主流瀏覽器相容
- [ ] 記錄已知問題
- [ ] Critical issues resolved

**預估時間：** 4 小時

---

### Task 1.17.3: Responsive Testing

**Acceptance Criteria:**
- [ ] 測試裝置尺寸：
  - Desktop: 1920x1080, 1440x900
  - Tablet: 768x1024 (iPad)
  - Mobile: 375x667, 414x896
- [ ] 測試項目：
  - 無水平滾動
  - Navigation menu works
  - Text is readable
  - Images scale correctly
  - Touch targets adequate size
  - No broken layouts
- [ ] Orientation testing (portrait/landscape)

**定義 of Done:**
- [ ] 所有裝置響應式正常
- [ ] 無 layout 破壞
- [ ] 觸控操作流暢

**預估時間：** 2 小時

---

### Task 1.17.4: Functional Testing

**Acceptance Criteria:**
- [ ] User flow 測試：
  - Browse homepage → About → Contact
  - Browse blog → Read article
  - View portfolio → View project
  - Login → Edit content → Logout
- [ ] Form 測試:
  - Contact form submission
  - Login form validation
  - Search/Filter functions
- [ ] External links 測試:
  - All social links work
  - Portfolio external links
  - Download links
- [ ] 301 redirects 測試:
  - All critical redirects work
- [ ] Admin functions 測試:
  - Create/edit/delete content
  - Upload media
  - Manage users

**定義 of Done:**
- [ ] 所有關鍵功能正常
- [ ] 無阻塞性 bug
- [ ] 測試報告完成

**預估時間：** 4 小時

---

### Task 1.17.5: Performance Testing

**Acceptance Criteria:**
- [ ] Lighthouse audit (all pages):
  - Performance ≥ 95
  - Accessibility ≥ 95
  - Best Practices ≥ 95
  - SEO ≥ 95
- [ ] WebPageTest analysis:
  - FCP < 1.5s
  - LCP < 2.5s
  - TBT < 200ms
  - CLS < 0.1
- [ ] Load testing:
  - 100 concurrent users
  - Response time < 1s (95th percentile)
- [ ] Mobile performance testing

**定義 of Done:**
- [ ] 所有效能指標達標
- [ ] Load testing 通過
- [ ] 效能報告完整

**預估時間：** 3 小時

---

### Task 1.17.6: Accessibility Testing

**Acceptance Criteria:**
- [ ] WCAG 2.1 AA compliance check
- [ ] Keyboard navigation test:
  - Tab 順序
  - Focus indicators
  - Skip links
- [ ] Screen reader test (basic):
  - NVDA / VoiceOver
  - Image alt text
  - Heading structure
- [ ] Color contrast verification:
  - All text WCAG AA compliant
- [ ] Form accessibility:
  - Labels properly associated
  - Error messages accessible
- [ ] Video captions (if applicable)

**定義 of Done:**
- [ ] WCAG AA 合規
- [ ] Keyboard 可完整操作
- [ ] Screen reader 基礎支援
- [ ] 顏色對比合格

**預估時間：** 2 小時

---

### Task 1.17.7: Security Testing

**Acceptance Criteria:**
- [ ] SQL injection testing
- [ ] XSS protection testing
- [ ] CSRF protection testing
- [ ] Authentication bypass testing
- [ ] Authorization bypass testing
- [ ] File upload security
- [ ] Rate limiting testing
- [ ] Sensitive data exposure check

**定義 of Done:**
- [ ] 無安全漏洞
- [ ] 保護機制正常運作
- [ ] 安全報告完成

**預估時間：** 2 小時

---

### Task 1.17.8: Content Verification

**Acceptance Criteria:**
- [ ] Manual content review:
  - 35+ articles all present
  - 4 categories all present
  - Portfolio items all present
  - No broken images
  - No broken links
- [ ] Content accuracy check:
  - Text formatting correct
  - Images display correctly
  - Rich text formatting correct
- [ ] SEO verification:
  - Meta tags present
  - OG tags correct
  - Canonical URLs correct
- [ ] Visual fidelity check:
  - Compare with Webflow
  - 95%+ similarity

**定義 of Done:**
- [ ] 所有內容完整遷移
- [ ] 無內容錯誤
- [ ] SEO 完整
- [ ] 視覺符合預期

**預估時間：** 4 小時

---

### Task 1.17.9: Bug Tracking and Resolution

**Acceptance Criteria:**
- [ ] Bug tracking system:
  - GitHub Issues
  - Priority levels (Critical, High, Medium, Low)
  - Status tracking
- [ ] Critical bugs must be fixed before launch
- [ ] High bugs should be fixed
- [ ] Medium/Low bugs documented
- [ ] Re-testing after fixes

**定義 of Done:**
- [ ] 所有 critical bugs 解決
- [ ] High bugs 解決或文件化
- [ ] 測試報告完成
- [ ] Launch decision made

**預估時間：** 2 小時

---

### Task 1.17.10: Launch Preparation

**Acceptance Criteria:**
- [ ] Launch checklist completed:
  - All tests passed
  - Critical bugs fixed
  - Monitoring setup
  - Backup strategy
  - Rollback plan
- [ ] Stakeholder sign-off
- [ ] Launch announcement prepared
- [ ] Support documentation ready

**定義 of Done:**
- [ ] Checklist 完成
- [ ] 利益相關者批准
- [ ] 準備好正式上線

**預估時間：** 1 小時

---

## 📊 總時間線和 Sprint 規劃

### Adjusted Timeline

| 週次 | Sprint | 主要交付物 | 預估工時 |
|------|--------|----------|----------|
| Week 1 | Sprint 0 | Story 1.1 完成 + Story 1.2 關鍵部分 | 8-12 hr |
| Week 2-3 | Sprint 1 | Story 1.2 完成 + Story 1.3 遷移 | 24-30 hr |
| Week 4-5 | Sprint 2 | Story 1.4-1.7 核心頁面 | 30-40 hr |
| Week 6-7 | Sprint 3 | Story 1.8-1.11 內容系統 | 30-40 hr |
| Week 8 | Sprint 4 | Story 1.12-1.13 認證後台 | 16-20 hr |
| Week 9-10 | Sprint 5 | Story 1.14-1.17 上線準備 | 40-50 hr |

**總預估：** 148-192 小時（約 10 週）

---

## 🎯 執行建議

### 立即執行（本週）
1. **完成 Story 1.1**（剩餘 40 分鐘）
2. **建立 Story 1.2-1.17 詳細任務定義** ✅ 本文檔
3. **開始 Story 1.2 Phase 1**（Portfolio Collection）

### 下週執行
4. **完成 Story 1.2**（剩餘 3 小時）
5. **準備 Story 1.3-1.4 規劃**

---

## 📌 關鍵決策點

### 決策 1: Story 1.3 優先順序？

**選項 A：** 儘先執行遷移腳本
- 優點：確保內容完整
- 缺點：無法立即看到頁面效果

**選項 B：** 延後執行，先實作頁面
- 優點：快速展示視覺成果
- 缺點：後續需更新所有內容

**建議：** **選項 B** - 先完成 Story 1.4-1.8，用測試資料實作，再執行 Story 1.3 正式遷移

### 決策 2: Story 1.12 認證優先級？

**選項 A：** 現在實作（與頁面並行）
- 優點：編輯者可提前開始工作

**選項 B：** 頁面完成後實作
- 優點：集中精力完成用戶可見功能

**建議：** **選項 B** - 在 Sprint 4 執行（頁面完成後）

---

**文檔完成時間：** 2025-01-30
**適用範圍：** Epic 1 所有 Stories 的詳細任務定義
**下一步：** 根據優先級開始執行或調整計劃