2022 F2E W2 - 今晚，我想來點點簽

UI 設計 - K-T

設計稿 - Figma

DEMO - 小綠簽

使用方式

1. 打開終端機，Clone 專案至本機

git clone https://github.com/Yuwen-ctw/2022_F2E_W2_dottedsign.git

2. 進入專案資料夾

cd 2022_F2E_W2_dottedsign

3. 安裝 npm 套件

npm install

4. 啟動專案

npm start

5. 成功後會自動開啟頁面於 http://localhost:3000

功能

• 首頁 -

  1. 可以上傳 PDF 檔
  2. 可以觀看歷史簽署紀錄 (目前僅透過 Local Storage 列出清單)

• 建立簽名頁面

  1. 可於頁面上自製簽名，顏色可為黑色、藍色及紅色三種
  2. 可點擊清除鍵重新簽名
  3. 亦可切換為匯入 PNG 檔

• 插入簽名頁面

  1. 可切換 PDF 頁碼

  2. 工具列 - 簽名: 彈出視窗並列出歷史簽名檔，可選擇本次欲使用的簽名 (儲存於 Local Storage)

  3. 工具列 - 勾選: 建立「V」勾選符號

  4. 工具列 - 日期: 建立當下日期

  5. 工具列 - 插入文字: 彈出視窗並可自行輸入欲插入的文字

     以上建立之物件均可移動、放大或刪除

  6. 點擊「完成簽署」後鎖定畫面以防止誤處理，並顯示儲存

  7. 點擊「儲存」後自動下載

• 歷史簽署頁面

  1. 可檢視儲存於 Local storage 內的簽署資料，暫時無法匯出
  2. 可輸入關鍵字搜尋歷史資料，檔名或日期均可
  3. 提供建立測試資料按鈕進行測試

資料夾說明

• ./src/image - 圖片放置處
• ./src/scss - 樣式放置處
• ./src/models - 資料放置處 (含 2 張簽名 PNG 檔、 3 份 PDF 檔 ，及建立歷史資料的 JS 檔)
• ./src/components - React 元件放置處

開發工具

• creat-react-app - 框架
• SCSS - CSS 預處理
• pdfjs-dist - 解析與渲染 PDF 檔
• fabric - 與 canvas 互動
• jspdf - 建立 PDF
• lottie-react - 讓 JSON 檔動起來
• ESLint - 協助除錯