動態課程導航#

功能說明#

系統會根據當前選擇的課程，動態顯示不同的側邊欄導航項目。每門課程可以啟用不同的功能模組，提供客製化的學習體驗。

實作方式#

後端配置#

每門課程在資料庫中有 enabledFeatures 欄位，用來設定該課程啟用的功能：

// 課程 1 - 軟體設計模式精通之旅
enabledFeatures: ["missions", "gyms", "sop"]

// 課程 2 - AI x BDD
enabledFeatures: ["missions", "prompt"]

前端渲染#

使用 Zustand 全域狀態管理當前課程的啟用功能
側邊欄根據 enabledFeatures 動態渲染導航項目
切換課程時自動更新導航選單

可用功能模組#

功能鍵值	導航名稱	說明
`missions`	所有單元	課程章節與任務列表
`gyms`	挑戰地圖	實戰挑戰道館
`sop`	SOP 寶典	標準作業流程文件
`prompt`	Prompt 寶典	AI Prompt 技巧文件

通用導航項目#

以下項目在所有課程中都會顯示：

首頁
課程
個人檔案（需登入）
排行榜

課程範例#

軟體設計模式精通之旅 顯示：

排行榜
所有單元
挑戰地圖
SOP 寶典

AI x BDD 顯示：

排行榜
所有單元
Prompt 寶典

技術架構#

資料流向#

用戶選擇課程 → API 回傳 enabledFeatures
前端更新 Zustand store 的 currentCourseFeatures
Sidebar 組件監聽 store 變化，重新渲染導航項目

相關檔案#

後端：

backend/src/main/java/tw/waterballsa/academy/entity/Course.java - 課程實體
backend/src/main/java/tw/waterballsa/academy/dto/CourseDetailDto.java - DTO
backend/src/main/java/tw/waterballsa/academy/config/DataInitializer.java - 初始資料

前端：

frontend/src/components/layout/Sidebar.tsx - 側邊欄組件
frontend/src/store/useJourneyStore.ts - 狀態管理
frontend/src/components/ui/JourneySwitcher.tsx - 課程切換器

優點#

✅ 無需前端硬編碼 - 所有配置由後端控制
✅ 靈活擴充 - 新增功能模組只需更新資料庫
✅ 課程客製化 - 每門課程可以有不同的功能組合
✅ 即時切換 - 切換課程時導航立即更新