全自動程式碼重構

請分析當前專案中所有 React Class Component 檔案。

執行以下重構任務：
1. 將每個 class component 轉換為函式元件 + Hooks
2. this.state / this.setState → useState
3. componentDidMount / componentWillUnmount → useEffect
4. 提取可複用邏輯為自訂 Hook
5. 保持 props 介面不變，確保父元件不用改
6. 跑一遍現有測試確認沒有 break

每個檔案的改動單獨列出，說明改了什麼、為什麼這樣改。

分析當前專案中所有的錯誤處理程式碼。

當前狀態審計：
- 找出所有 try-catch 塊、.catch() 呼叫、error callback
- 列出不一致的地方（有的吞掉錯誤、有的只 console.log、有的往上拋）

統一方案：
1. 建立統一的 AppError 類（包含 code, message, cause）
2. 建立全域錯誤處理中介軟體
3. 所有業務層用 AppError 拋出，不直接 throw new Error
4. API 層統一返回 { success: false, error: { code, message } }
5. 給出修改後的檔案清單和 diff

我要把這個 JavaScript 專案遷移到 TypeScript。

請按以下步驟執行：
1. 分析專案結構，生成 tsconfig.json（strict 模式）
2. 從入口檔案開始，按依賴順序逐個遷移 .js → .ts/.tsx
3. 為所有函式參數和返回值添加型別註解
4. 將 any 使用降到最低，盡量用具體型別
5. 為第三方套件安裝對應的 @types 包
6. 建立 types/ 目錄存放公共型別定義
7. 確保 tsc --noEmit 通過，沒有型別錯誤

每個檔案列出改動摘要。如果某些地方必須用 any，說明原因。