今天是鐵人賽 Day25，目標是讓後台商品管理功能完整運作，前端列表頁能即時反映新增、修改與刪除商品的變化。

1️⃣ 商品列表顯示編輯 / 刪除按鈕
在後台商品列表每個商品卡片下方新增「編輯」與「刪除」按鈕
編輯按鈕會將商品資料自動填入表單，方便修改
刪除按鈕可直接刪除商品並即時更新列表

<button
  className="flex-1 py-2 rounded text-center transition"
  style={{ backgroundColor: "#C2A68C", color: "#fff" }}
  onClick={() => handleEditProduct(p)}
>
  編輯
</button>

<button
  className="flex-1 py-2 rounded text-center transition"
  style={{ backgroundColor: "#E74C3C", color: "#fff" }}
  onClick={() => handleDeleteProduct(p._id)}
>
  刪除
</button>

2️⃣ 串接後端 API 功能
新增商品 → POST /api/products
修改商品 → PUT /api/products/:id
刪除商品 → DELETE /api/products/:id
使用 Axios 呼叫 API，並在成功後重新載入商品列表

const handleDeleteProduct = async (id) => {
  await axios.delete(`/api/products/${id}`, {
    headers: { Authorization: `Bearer ${token}` },
  });
  fetchProducts(); // 刪除後重新載入商品列表
};

3️⃣ 即時更新列表
新增 / 修改 / 刪除商品後，列表頁立即反映變化
使用 fetchProducts() 或類似函式重新抓取後端資料
提升管理者後台操作即時性與流暢度

4️⃣ 測試流程
新增商品 → 列表確認顯示正確
修改商品 → 表單填入現有資料，更新後列表同步更新
刪除商品 → 商品即時從列表消失

💡 Day25 收穫

• 後台商品列表完整整合「編輯 / 刪除」功能
• 前端成功串接後端 API
• 列表頁可即時更新，操作體驗更順暢