線上點餐系統實作題｜六角學院｜框架專題班

題目：線上點餐系統

功能描述：

1. 請 clone 此模板，實作一個線上點餐系統，可以將餐點加入購物車、調整購物車品項的數量，並計算總金額。
2. 實現以下功能：
   • 餐點列表： 畫面上顯示多個餐點選項，包含名稱、價格、圖片。
   • 加入購物車： 點擊「加入購物車」按鈕可將餐點加入購物車。
   • 數量調整： 在購物車中可以增加或減少餐點數量（最少為 1）。
   • 移除餐點： 可從購物車中移除特定餐點。
   • 金額計算： 自動計算並顯示購物車的總金額。
   • 清空購物車： 提供「清空購物車」按鈕，點擊時清除所有項目。

可參考的文件資源

1. React 官方文件、React Hooks - useState
2. MDN - Array（map, filter, find, reduce）
3. MDN - 解構賦值

實作題檢核點

1. 將 menuData 資料渲染到畫面中（餐點列表）
2. 使用 useState 管理購物車狀態
3. 能夠將餐點加入購物車（首次加入數量為 1）
4. 重複加入相同餐點時，數量會累加而非新增一筆資料
5. 將購物車資料渲染到畫面中
6. 當購物車為空時，顯示適當的提示訊息
7. 能夠在購物車中增加餐點數量
8. 能夠在購物車中減少餐點數量（最少為 1，不可為 0）
9. 能夠從購物車中移除特定餐點
10. 正確計算並顯示購物車總金額
11. 清空購物車功能正確運作