Build A Static Web By React With NextJs

Create a static website to collect eyelash customer information

Using NextJs to build the project

使用npm run dev啟動伺服器

網頁開啟後為預設樣板模樣

為了後續可能使用不同電腦同時開發需求，以及版本管控，此處使用gitHub進行管理，請參考此篇建置一個新的倉庫，建制後接續下方步驟進行管理。

已建置好自己有倉庫( repository ) 後，我已有程式專案後才建立GitHub repository，因此我要將程式碼與倉庫進行關聯，會使用下圖部份進行。

開啟 terminal 並確認目前於專案路徑下，並使用 GitHub 指令執行即可

此時重新整理 GitHub 倉庫頁面可以看到程式碼已成功。

進入正題開發程式，此處 IDE 使用 Visual Studio Code ( VS Code ) 進行開發，首先可以看到整個專案的進入點是 page.tsx 打算從此處開始修改重新刻一個頁面。

預計整體開發方向如下：

開始開發…
建立了雛形後再進行美化作業

為了使用 bootstrap 和 scss，使用下列指令安裝需要項目

yarn install bootstrap

yarn add scss

yarn add @popperjs/core

先將基本資料區塊做了美化，其中使用了幾個 class
form-group
form-control
form-check form-check-inline
form-check-input

套用 Bootstrap 後的樣子

接下來同意書需要有本人簽名區塊，這會是一大挑戰 …
研究了一番後先在原先網頁下方實現簡單簽名功能，確定功能可行後再進行畫面排版優化。

先實作可簽名區塊且提交後能產生縮圖

將簽名功能移置本人簽名後方，當點擊時開始簽名區塊進行簽名。

放置地方比較合理了，但是好像不夠美觀 …
於是嘗試了 bootstrap Modal 方式當點擊本人簽名後，產生出一個 focus 的 canvas。
當開啟簽名視窗，會將整個網頁 focus 在視窗中，除非點擊視窗按鈕關閉，否則點其他地方視窗不會被關閉。