今天是鐵人賽 Day24，目標是簡化圖片上傳方式，讓後台商品新增與修改功能更穩定，並整合前端表單與後端 API。

1️⃣ 商品圖片上傳簡化
將商品 schema 中 images 欄位設為 images: [String]，支援本地上傳或直接填寫圖片 URL
後端新增商品 API 支援接收 FormData 或 JSON：

const handleAddProduct = async (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("name", name);
  formData.append("price", price);
  formData.append("description", description);
  formData.append("stock", stock);
  formData.append("category", category);
  images.forEach((img) => formData.append("images", img));

  await axios.post("/api/products", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      Authorization: `Bearer ${token}`
    },
  });
  fetchProducts(); // 新增後重新載入商品列表
};

2️⃣ 後台商品整合
AddProduct.jsx 與 EditProduct.jsx 共享同一表單，支援新增與修改商品
編輯商品時，表單自動填入現有資料，支援更新名稱、價格、描述、庫存、分類與圖片
商品列表頁可即時顯示修改後資訊

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

修改按鈕點擊會填入表單資料
修改成功後重新載入商品列表

3️⃣ 測試流程
新增商品 → 首頁商品清單是否顯示正確
修改商品 → 表單資料自動填入，更新後首頁與列表同步更新
刪除商品 → 商品從列表移除
多圖或 URL 上傳 → 確認圖片正確顯示

4️⃣ 功能重點
支援單圖、單 URL 或多圖上傳
後台新增 / 編輯 / 刪除商品功能整合於同一表單
前端列表頁即時更新
簡化圖片上傳流程，減少 Cloudinary API 依賴

5️⃣ 遇到的問題與解決
問題：商品修改功能需要同時更新多張圖片
解決：使用 FormData 重新上傳所有圖片，後端更新後重新載入商品列表

💡 Day24 收穫

• 成功簡化圖片上傳方式（local / URL）
• 後台商品新增與修改功能整合完成
• 列表頁即時顯示修改結果
• 減少上傳複雜度，提高開發效率