個人專案是自己的，也是獨一無二的，只有自己才知道發生了什麼，也只有自己能掌控整個專案未來的走向，所以老實說，根本沒預期自己的專案可以用到那麼多技術關鍵字，很多內容都是在和老師、同學們、助教們交流中的一、兩句話就跳上去的，也因為願意往未知多走幾步，所以最後的成果遠遠超乎當初的想像。
技術堆疊
- React: useEffect, useState, useCallback
- Custom Hooks: useAuthState, useRequireAuth
- Redux: useSelector, useDispatch
- Redux Toolkit: createSlice, createAction
- Next.js: App Router
- TypeScript
- ESLint
- Jest: Integration Tests
- Self-Built WYSIWYG Canvas Editor
- Firebase: Cloud Firestore, Storage, Authentication
- Vercel
響應式網頁設計
主要功能
筆刷
橡皮擦
返回、重做
拖移
鍵盤快捷鍵
次要功能
會員系統
購物車
第三方支付系統
歷史訂單管理
元件架構
Custom Hooks
useAuthState: 是一個用來管理 React 應用程式中使用者驗證狀態的 Hook。它運用了 Firebase 的驗證服務，來監聽使用者登入狀態的變化。
useRequireAuth: 是一個用來管理 React 元件中存取控制的 Hook，特別適用於當某些使用者操作需要登入驗證（即使用者必須已登入）時使用。
畫布分層示意圖
狀態管理工具 Redux Toolkit
Jest 測試
