經過前面的實作，我們的系統已經透過 LocalStorage 擁有了持久化的記憶能力，重新整理也不怕資料遺失。但這同時也帶來了新的 UX（使用者體驗）挑戰：如果使用者手滑，不小心按到垃圾桶按鈕怎麼辦？

在健康追蹤類型的系統中，資料的容錯率是很低的，我們不能讓使用者在沒有任何警告的情況下瞬間刪除資料。今天，我們要捨棄瀏覽器內建那種生硬、會卡死畫面的 window.confirm()，改用一套前端非常知名的彈出視窗套件：SweetAlert2，來打造漂亮又專業的警告視窗。

Step 1：安裝 SweetAlert2
請在下方的終端機輸入以下指令安裝套件：
npm install sweetalert2

Step 2：改造刪除按鈕的邏輯
接下來我們要找到負責渲染單筆藥物的元件，在MedicationList裡
我們要在該檔案的最上方引入 SweetAlert2：



為什麼選擇 SweetAlert2？
非阻塞式設計： 原生的 alert() 會導致整個網頁的 JavaScript 暫停執行，直到使用者關閉視窗；而 1.SweetAlert2 是基於 Promise 的非同步設計，不會卡死系統背景運作。
2.高度客製化： 我們可以輕鬆把按鈕顏色設定為與我們專案相符的紫色 (#4f46e5)，讓整體視覺風格保持一致。
3.支援動畫與自動關閉： 成功刪除後的提示不需要使用者多點擊一次「確定」，設定 timer: 1500 讓它在 1.5 秒後自動消失，體驗更加順滑。

成果畫面如下