採取 CSS in JS 的開發模式,將 Emotion 套件與 React 元件整合使用,解決傳統上 CSS 因 global scope 造成的命名衝突問題。使用 SVG 遮罩製作圖片輪播區塊,並以 Intersection Observer API 實作瀏覽器頁面的自動捲動。
除了呈現店家形象,也建置了琴房、餐點的線上預約介面,依照不同的商品分類顯示對應的商品。並實作購物車介面系統,針對不同品項和數量計算商品金額。
➜ Project Link