有了規範的提交訊息工具後，就可以放心開始開發了，開發之前要記得讓自己站在對的分支上唷！

今日分支名稱：feat/component

更換 favicon.ico

在 React 中，預設會給你的網站既有圖標(也就是 React 的 logo)，為了讓你的網站更有獨特性，更換這個小圖標是最小也最簡單的起手式，如果不方便自己繪圖製作，你也可以和我一樣選擇在一些開源網站找適合的圖標，準備好後直接放到 public 資料夾中存成 favicon 這個檔名，並記得副檔名設定為 .ico 即可。(也就是取代掉原有的)

如果你正在運行專案，要記得重啟，這樣在頁面上才會看到你更新的圖標。

網頁共用元件

眾所皆知，製作網頁共用元件可讓程式碼較為簡潔、後續開發與維護成本也較低，所以我習慣參照一開始規劃的 Wireflame，提前將確定會重複使用性高的元件列出來。
製作前，會需要安裝現在前端最流行的 CSS 框架－Tailwind.css。可以依照個人習慣設定配置內容。

1. 表單系列-文字輸入框(input, checkbox, radio, select)

2. 按鈕系列-各種狀態對應樣式(button)

3. 表格(table)

4. 列表(list)

5. 頁碼(pagination)

6. 提示框(alert/modal)

7. 標籤(tag)

網頁路由規劃

製作前，會需要先安裝 react-router 和 react-router-dom 這兩個套件。按照 Flow Chart 和 Wireframe 的設計，擬出大概會有使用者註冊、使用者登入、服務項目分類頁、服務項目列表頁、服務項目詳細頁、新增與編輯服務項目、預約訂單列表頁、預約訂單詳細頁。

<Routes>
      <Route path="/" element={<Home />} />
      <Route path="/sign-in" element={<SignIn />} />
      <Route path="/sign-up" element={<SignUp />} />

      <Route path="create-item" element={<PrivateRoute />}>
        <Route path="/create-item" element={<CreateItem />} />
      </Route>

      <Route path="update-item" element={<PrivateRoute />}>
        <Route path="/update-item/:itemId" element={<UpdateItem />} />
      </Route>

      <Route path="create-order" element={<PrivateRoute />}>
        <Route path="/create-order" element={<CreateItem />} />
      </Route>

      <Route path="update-order" element={<PrivateRoute />}>
        <Route path="/update-order/:orderId" element={<UpdateOrder />} />
      </Route>

      <Route path="/categories" element={<Categories />} />
      <Route path="/items" element={<Items />} />
      <Route path="/item/:itemName" element={<ItemDetail />} />
</Routes>

小結

有了共用元件後，後續組裝頁面時就能更順利了，這兩天工作較為忙碌，做好的元件會在近期更新，並上傳縮圖唷！