今天是鐵人賽 Day20，目標是讓前端商品列表能串接購物車 API，完成「加入購物車」功能，使用者可直接將商品加入自己的購物車。

1️⃣ 前端 Home.jsx
今天在商品卡片下方新增「加入購物車」按鈕，並串接後端購物車 API：

const handleAddToCart = async (productId, productName) => {
  const token = localStorage.getItem("token");
  if (!token) {
    alert("請先登入！");
    return;
  }

  try {
    await axios.post(
      "http://localhost:3000/api/cart/add",
      { productId, quantity: 1 },
      { headers: { Authorization: `Bearer ${token}` } }
    );
    alert(`${productName} 已加入購物車！`);
  } catch (err) {
    console.error(err);
    alert(err.response?.data?.message || "加入購物車失敗！");
  }
};

從 localStorage 取得 token 做 API 認證
POST /api/cart/add，傳送 productId 與數量

成功後跳出提示訊息，失敗顯示錯誤

2️⃣ 商品卡片整合按鈕
在 Home.jsx 的商品卡片下方加入按鈕：

{user && p.stock > 0 && (
  <button
    className="flex-1 py-2 rounded text-center transition"
    style={{ backgroundColor: "#b96349ff", color: "#fff" }}
    onMouseOver={(e) => (e.currentTarget.style.backgroundColor = "#a55a43ff")}
    onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "#b96349ff")}
    onClick={() => handleAddToCart(p._id, p.name)}
  >
    加入購物車
  </button>
)}

只有登入使用者可看到按鈕
商品庫存為 0 時不顯示
點擊按鈕時呼叫 handleAddToCart

3️⃣ 功能重點
前端串接 API：使用 axios 與後端購物車接口連線
登入狀態判斷：未登入使用者點擊按鈕時提示登入
操作反饋：成功加入購物車時跳出提示
UI 整合：按鈕與商品卡片整合，加入 hover 效果

4️⃣ 測試流程
登入會員 → 在商品列表點擊「加入購物車」
成功 → 顯示提示訊息「XXX 已加入購物車！」
失敗 → 顯示錯誤訊息

🐛 遇到的問題與解決

問題：未登入使用者無法操作 API
解決：在前端判斷登入狀態，未登入時跳出提示，避免直接呼叫 API

💡 Day20 收穫

• 完成前端商品列表加入購物車按鈕
• 前端成功串接後端購物車 API
• 使用者點擊即可將商品加入購物車
• 提升前端操作體驗與使用者互動