今天是鐵人賽 Day12，目標是新增商品搜尋功能，能夠依商品名稱與描述來篩選商品，讓使用者能更快速找到想要的商品，同時保留新增商品的功能。

1️⃣ 前端 Home 頁面搜尋功能
在 src/pages/Home.jsx 中新增搜尋欄位與按鈕，使用 useState 管理搜尋文字，按下搜尋後才發送 API 請求，避免每次輸入就觸發。

<form onSubmit={handleSearch} className="flex">
  <input
    type="text"
    placeholder="搜尋商品名稱或描述"
    value={searchText}
    onChange={(e) => setSearchText(e.target.value)}
    className="border rounded-l px-3 py-1 focus:outline-none"
  />
  <button
    type="submit"
    className="bg-blue-600 text-white px-4 py-1 rounded-r hover:bg-blue-700 transition"
  >
    搜尋
  </button>
</form>

2️⃣ 搜尋結果顯示與提示
顯示搜尋關鍵字與找到的商品數量
若搜尋不到，顯示紅色文字「找不到符合的商品」
「顯示所有商品」按鈕可清除搜尋並回到完整商品清單

{products.length === 0 ? (
  <p className="text-red-500 text-center mt-10">
    {searching ? "找不到符合的商品" : "目前沒有商品"}
  </p>
) : (
  <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
    {products.map((p) => (
      <li key={p._id} className="bg-white border rounded-lg shadow hover:shadow-lg transition transform hover:scale-105">
        {/* 商品圖片與資訊 */}
      </li>
    ))}
  </ul>
)}

3️⃣ 新增商品按鈕保留
頁面右上角仍保留「新增商品」按鈕，點擊後導向新增商品頁面（/add-product），方便管理者快速新增商品：

<Link
  to="/add-product"
  className="ml-2 bg-green-600 text-white px-4 py-1 rounded hover:bg-green-700 transition"
>
  新增商品
</Link>

4️⃣ 後端 API 搜尋支援
在 ProductRoutes.js 中修改 GET /api/products，當帶入 search query 時，使用正則搜尋商品名稱或描述：

const searchQuery = req.query.search
  ? {
      $or: [
        { name: { $regex: req.query.search, $options: "i" } },
        { description: { $regex: req.query.search, $options: "i" } },
      ],
    }
  : {};
const products = await Product.find(searchQuery);

🐛 遇到的問題與解決
搜尋結果無即時顯示：改為按下「搜尋」才觸發 API
沒有商品或搜尋不到結果：新增紅字提示
回到完整列表需要清空搜尋欄：加上「顯示所有商品」按鈕
新增商品功能仍需保留：保證頁面能快速導向新增商品頁

💡 Day12 收穫

• 成功實作依商品名稱與描述搜尋功能
• 體驗前後端整合搜尋流程
• 增加使用者操作體驗：可清除搜尋、看到無結果提示
• 保留新增商品功能，管理者能直接操作