我們的 AI 臨床用藥助理已經具備了完整的功能與流暢的 UX 設計。在明天（Day 30）迎來最後的正式部署前，今天我們要做一件每一位資深軟體工程師都必須做的事：重構 (Refactoring) 與專案清理。

當我們連續開發了近 30 天，專案中難免會累積一些可以寫得更簡潔的邏輯。清理這些「技術債 (Technical Debt)」，不僅能讓未來的維護更輕鬆，也能展現我們對系統架構的專業度。

為什麼要重構？看見 Custom Hook 的力量
回顧我們的 MedicationContext.jsx，裡面包含了落落長的 localStorage 讀取、寫入與 useEffect 監聽邏輯。雖然功能正常，但這違反了「職責分離 (Separation of Concerns)」的原則——Context 應該專心處理資料的流動，而不是處理瀏覽器底層 API 的讀寫。
今天，我們挑戰進階的 React 技巧：建立自訂 Hook (Custom Hook)，把存檔邏輯抽離出來。

Step 1：建立 useLocalStorage Hook
在 src 目錄下新增一個 hooks 資料夾，並建立 useLocalStorage.js 檔案：

Step 2：大幅瘦身 MedicationContext.jsx
有了神兵利器後，我們回到 src/context/MedicationContext.jsx。
我們只需要引入剛寫好的 Hook，並用一行程式碼替換掉原本一大段的存檔邏輯：

原本的檔案瞬間變得超級乾淨且好閱讀，這就是軟體工程中「封裝 (Encapsulation)」

最後確認網頁F12的console是乾淨的