# Symphox Home Work(F2E)

您正在參與的是 Symphox 數商部小樹購團隊的前端工程師能力評估測驗，此測驗是為了能讓我們可以更加瞭解你的能力範圍，並且確認是否符合團隊技術。

### 測驗須知
- 作業繳交：
1. 此試題共三個題，兩題資料處理、一題實作題。
1. 前兩題請使用 CodePen 開發並把結果附上連結。
1. 第三題請將原始碼公開發佈至任一 Git 專案代管平台，並繳交專案網址。
1. 繳交期限：Symphox 寄出 Email **5 日內**，如有其他需求（如在職中）可以再寄信提出延長。

#### 試題一（資料處理）
- https://codepen.io/berglas/pen/oNyzPqz
#### 試題二（資料處理）
- https://codepen.io/berglas/pen/YzvGOLZ
#### 試題三（實作）
- 技術、規格要求（必要）：
1. 使用 Vue2 開發。
1. 使用 Vuex 做資料、狀態管理。
1. 使用 Vue Router 做路由切分。
1. 使用 CSS 預處理器或後處理器。
1. 使用 ESLint。
1. 需能相容以下目標瀏覽器。（last 2 versions and > 1%、Browserslist query）
1. 實作RWD。（配色、寬高、元件無限制，以實作功能為優先）
1. 請自行 Mock API資料，資料欄位參考下方功能說明。（建議使用mock.js）

- 加分項目（選擇性）：
1. 使用 Vue3。(Composition API)
1. 使用 TypeScript。
1. 具有設計美感的 UI。
1. 具有良好體驗的 UX。
1. 使用 Nuxt3。
1. SEO。
1. 承受大量渲染時，不會影響到原本瀏覽體驗。
1. 設計且封裝出 Pagination & Cursor 資料分頁模式。
1. Unit Test。
1. 實作 CI/CD，並將網站佈署至任一雲端代管服務中。
1. 加入其他可以展現個人能力和知識的細節（架構、程式碼風格、UX 等等）。
1. 撰寫 API 文件，建議使用 Markdown。

- 功能說明
請依照上方規範開發一個商品（賣場）展示網站。
- Figma：https://www.figma.com/file/W7E4rMScb2egA5E1Rxqwpb/Symphox-Home-Work?node-id=0%3A1
- 主要功能如下：
1. 顯示所有商品（賣場）的頁面。
2. 新增刪除修改商品（賣場）的頁面。
- 資料結構參考如下：

    {
        product_id: 'P123456', // string
        product_name: '企鵝嘟嘟玩偶', // string
        product_price: 55023.0, // number
        product_category: '玩偶', //string
        product_img_path: 'https://picsum.photos/800/600', // 請一律使用此路徑
        product_description: '此玩偶乃用純天然企鵝毛所製而成，親近肌膚不會引發幼童過敏，內容物填充採用美國原裝進口的棉花，絕對沒有使用黑奴採集，完全100%純棉！'
    }