# Training
## :calendar: Week 1
### 專案建置
- 套件安裝用 `yarn` 為主，不要混用 `npm`
- 用 vite 建置 vue3 (建置過程請選擇 typescript)
- vscode 插件推薦使用 volar (不要用 vetur 會衝突)，Eslint, Prettier
- 配置 EsLint Prettier
- 需達成即時於 vscode 顯示錯誤，`script` 和 `template` 都要能糾錯
- 儲存時能自動修正簡單錯誤
- 儲存時自動完成排版
- 配置 tailwindcss (官方有 vite vue3 的配置方式)
- 配置 Pinia
- 安裝 VueUse

### :hand: 練習項目

- 只能用 Composition API 進行開發，vue 實體使用 `<script setup lang="ts">`
- 利用 VueUse 的相關功能，製作一個懸浮可拖拉的小方塊，小方塊的懸浮樣式請用 Tailwindcss
- 小方塊內容需顯示方塊的即時位置 (x, y 值，基準點隨意)
- 將小方塊即時位置資訊更新至 Pinia 的 Store State 中
- 即時顯示 Pinia State 的更新位置在首頁裡頭

## :calendar: Week 2
### 專案建置
- 延續上週的專案
- 安裝 [Mocking Service Worker](https://mswjs.io/)，完成官方建置方式，並只在 `dev` 狀態下啟動此服務，也順便了解其運作方式，因為開發時，為了要讓你們的環境類似於測試環境，讓所有 api 都可以通，才有這個東西，正式開發時我會幫你們把 `handler` 處理好，你們只需要專注在前端就好
- 安裝 `pinia-plugin-persistedstate`
- 安裝 `vue-router@4`
- 安裝 `axios`

### :hand: 練習項目
#### 目標完成情境
> ✅ 進入首頁 (未登入) → Navigation Guards 阻擋轉跳至登入頁並登入 → 登入失敗 → 登入頁面顯示回傳的錯誤訊息

> ✅ 進入首頁 (未登入) → Navigation Guards 阻擋轉跳至登入頁並登入 → 登入成功 → 轉跳至首頁 → 關掉視窗

> ✅ 進入首頁 (已登入) → Navigation Guards 檢驗已有 token 給進首頁 → 登出 → 回到第一個情境

#### 實作步驟與使用技術
- 只做簡易 login 頁面 (需有帳密與登入按鈕) 與 home 主頁 (需有主頁標題與登出按鈕)
- 用來打 api 的 axios，必須使用攔截器，先對回傳做處理，回傳型別個階段應該是 `AxiosResponse` → `MswResponse` → `string`

:::warning
此部分型別請特別注意
:::

- 利用 msw 製作用來處理 login 的 rest，這個 login api，拿到帳密驗證後，會拿到回傳，回傳格式如下，且回傳成功，response headers 會帶 `Authorization: Bearer ohmytoken`，response status 都是 200

// 登入成功
{
  "code": 200,
  "msg": "成功"
}

// 登入失敗
{
  "code": 30001,
  "msg": "帳號不存在或密碼錯誤，請重新輸入。"
}

sequenceDiagram
    participant Client
    participant MSW
    Client ->> MSW: POST/user/login with password and username
    Note right of MSW: It happens in <br/>your browser
    MSW ->> Client: Returns the fake JWT token

- 製作一個 `authStore` (pinia)，儲存帳密與登入成功回傳的 token，已經裝好的 `pinia-plugin-persistedstate` 設定好會發揮作用，相關設定請見文件，預設會存到 `localStorage`，這邊只有 token 會進 `localStorage`，請設定清楚
- Navigation Guards 依目的描述設定好，請依據 token 存在與否
- 處理 axios 打 login api 之後的處理邏輯，處理登出邏輯，邏輯以情境為主