今天是鐵人賽 Day 13，目標是新增「分類功能」，讓桌遊商品可以依類型顯示，並且在新增商品時可以選擇分類，首頁也能篩選指定類型的商品。這對於商城的使用者體驗非常重要，方便使用者快速找到想要的遊戲。

1️⃣ 新增商品分類選項
在 AddProduct.jsx 的新增商品表單中加入下拉選單，讓使用者可以選擇商品類型（重策、中策、輕策、派對、陣營、家庭、合作、反應）。提交表單時，分類資訊會一併送到後端儲存。

<select
  value={category}
  onChange={(e) => setCategory(e.target.value)}
  className="w-full p-2 border rounded"
  required
>
  <option value="">選擇分類</option>
  <option value="重策">重策</option>
  <option value="中策">中策</option>
  <option value="輕策">輕策</option>
  <option value="派對">派對</option>
  <option value="陣營">陣營</option>
  <option value="家庭">家庭</option>
  <option value="合作">合作</option>
  <option value="反應">反應</option>
</select>

2️⃣ 首頁顯示分類篩選
在 Home.jsx 增加分類篩選按鈕或下拉選單，點擊後會呼叫 API 只顯示該分類的商品，也能搭配關鍵字搜尋一起使用。

const handleCategoryFilter = (category) => {
  fetchProducts("", category); // 後端支援 category 參數
};

3️⃣ 後端 API 支援分類查詢
在 ProductRoutes.js 的 /api/products 端點新增 category 查詢參數。篩選邏輯如下：

let filter = {};
if (search) {
  filter.$or = [
    { name: { $regex: search, $options: 'i' } },
    { description: { $regex: search, $options: 'i' } }
  ];
}
if (category) {
  filter.category = category;
}
const products = await Product.find(filter);

🐛 遇到的問題
同時支援搜尋關鍵字 + 分類篩選時，原本 API 查詢邏輯需要改成合併 $or 與 category。
前端分類按鈕的狀態需保持，否則使用者切換分類會重置搜尋結果。

💡 Day 13 收穫

• 成功新增商品分類欄位與篩選功能。
• API 能夠支援分類 + 關鍵字的複合查詢。
• 使用者可以快速找到指定類型的桌遊，提升商城操作便利性。