---
# System prepended metadata

title: Shopping Mall

---

# Shopping Mall

## 需求
1. 新建 npm 專案
2. 專案內容是 「建置一個簡易商城」
3. 照圖刻出下方 `必須的` 頁面 （可忽略上方手機訊號 icon，放一個黑色背景即可）
4. 模擬情境設計 mock data 的格式（假設後端尚未給 api)
5. 加入適當的操作動畫


## 提醒
1. 使用 React 撰寫
2. 不可以用任何 UI Component library （ex: Material UI, Bootstrap）。


## 介面


### 必須實作


| 頁面 | 說明 | 圖示 | 
| -------- | --------- | -------- | 
| 產品詳細 | 1. 顯示售價及詳細資訊 <br> 2. 產品資訊內容不一定完善  | ![](https://i.imgur.com/ODaXPVc.png)  |
| 選擇規格 | 1. 將有庫存的商品加進購物車 <Br> 2. 每種商品的規格不一定 <Br> 3. 數量可以按 +/-, 或是填入數字 <br> 4. 選取後，點擊 “加入購物車”，顯示購物車的規格及數量 | ![](https://i.imgur.com/jxG5dAF.png)  |

### 非必須實作 （有時間可做）

| 頁面 | 說明 | 圖示 | 
| -------- | --------- | -------- | 
| 產品列表 （非必須） | 1. 瀏覽商品 <br> 2. 顯示商品名稱及價格 <br> 3. 商品可能都賣完了，也可能有一個，也可能超多 | ![](https://i.imgur.com/PN4Smfs.png)  |




## 加分

1. 使用 typescript 撰寫
2. 當離線的時候，可能出現的情境處理
3. 產品列表頁面，可下拉無限滾動印出下一頁的產品
4. 使用類似 mock service worker 的服務（或自己撰寫類似的 mock data 資料流)
5. 能設計出高彈性的頁面資料變換

## 繳交

使用可在線上立即看的平台繳交 
ex: codesandbox：https://codesandbox.io/
