# 1. 專案簡介（Project Overview）
## 使用技術
**前端框架**：React + Vite
**後端技術**：Node.js
**資料庫**：PostgreSQL
**部署平台**：Render + Firebase
**CSS 技術**：Bootstrap 5 + SCSS
## 主要使用的套件
* Bootstrap 5
* React Router
* React Hook Form
* react-helmet-async
* Redux Toolkit
* Sweetalert2
* Swiper
* Axios
* AOS
* ReactQuill (文字編輯器)
* styled-components (CSS-in-JS)
* clsx
* React Datepicker
* DOMPurify (HTML 清理，阻擋 XSS 惡意攻擊)
* react-rating-stars-component (評分星星)
* react-medium-image-zoom (圖片放大)
## 專案目錄結構

📂 src/ # 主程式碼目錄
├── 📂 api/                      # API 請求管理
│ 
├── 📂 assets/                   # 靜態資源
│ └── 📂 scss/                   # SCSS 樣式
│     ├── 📂 base/               # 基本樣式
│     ├── 📂 components/         # 元件樣式
│     ├── 📂 layout/             # 佈局樣式
│     ├── 📂 pages/              # 頁面樣式
│     ├── 📂 utils/              # 工具類樣式
│     └── 📂 vendors/            # 第三方樣式
│
├── 📂 components/               # 可重複使用的元件
│ ├── 📂 auth/                   # 登入註冊頁面相關元件
│ ├── 📂 common/                 # 公用元件
│ │   ├── 📂 booking-record/     # 預約紀錄元件
│ │   ├── 📂 payment-form/       # 付款表單元件
│ │   └── 📂 profile/            # 個人檔案元件
│ ├── 📂 course/                 # 課程頁面相關元件
│ │   └── 📂 detail-page/        # 課程詳情頁元件
│ ├── 📂 custom-course/          # 客製化課程頁面相關元件
│ ├── 📂 help-center/            # 幫助中心頁面相關元件
│ ├── 📂 layout/                 # 佈局元件
│ ├── 📂 subscription/           # 訂閱頁面相關元件
│ ├── 📂 tutor/                  # 講師頁面相關元件
│ └── 📂 tutor-panel/            # 講師後台
│     ├── 📂 booking/            # 預約管理
│     │   ├── 📂 all-bookings/   # 所有預約
│     │   └── 📂 available-time/ # 可預約時間
│     ├── 📂 course/             # 課程管理
│     │   ├── 📂 add/            # 新增課程
│     │   ├── 📂 course-list/    # 課程列表
│     │   └── 📂 edit/           # 編輯課程
│     └── 📂 profile/            # 講師個人檔案
│
├── 📂 data/              # 存放資料數據的資料夾 (未使用 API 獲取的資料)
│
├── 📂 hooks/                    # React 自訂 Hook
│
├── 📂 pages/                    # 頁面
│ ├── 📂 student/                # 學生專區
│ ├── 📂 tutor/                  # 講師專區
│ │   ├── 📂 bookings/           # 預約管理頁面
│ │   ├── 📂 courses/            # 課程管理頁面
│ │   │   ├── 📂 course/         # 課程
│ │   │   └── 📂 video/          # 影片
│ │   └── 📂 profile/            # 講師個人資料
│ └── 📂 user/                   # 前台使用者相關頁面
│     ├── 📂 auth/               # 登入註冊相關頁面
│     ├── 📂 course/             # 課程相關頁面
│     │   └── 📂 detail-page/    # 課程詳情頁
│     ├── 📂 custom-course/      # 客製化課程相關頁面
│     ├── 📂 subscription/       # 訂閱流程相關頁面
│     └── 📂 tutor/              # 講師相關頁面
│
├── 📂 router/                   # 路由管理
│
└── 📂 utils/                    # 工具函式
    ├── 📂 schema/               # 資料驗證 Schema
    └── 📂 slice/                # Redux 切片

# 2. 環境設定（Setup Instructions）
### 安裝依賴

### 啟動開發環境

### 環境變數（.env 設定） # 待更新

# 3. 路由規則（Routing Guidelines）
使用 **巢狀路由**
## 路由設定的存放位置
src/router/routes.jsx
## 路由命名規範
烤肉串命名法 kebab-case
例如：/custom-course-list
## 動態路由的使用方式
動態路由使用 **:參數名稱** 來表示變數部分，例如 **/course/:id**，這樣的路徑可以匹配 /course/123 或 /course/abc。

### 課程相關
/course/category/:category
* category → 語言類別，例如：Vue、React 等 

/course/:id
* id → 課程的唯一識別碼

/course/:id/chapter/:videoId
/video/:videoId
* videoId → 影片的唯一識別碼
### 訂閱相關
/subscription/:subscriptionPlan/:duration
* subscriptionPlan → 訂閱方案類型
* duration → 訂閱時長 (例如 monthly 或 yearly)
### 講師預約相關
/tutor/:id
* id → 講師的唯一識別碼

### 後台相關
/video/:type/add/:courseId/:id
* type → 三大課程類別 (one of topicSeries, freeTipShorts and customLearning)
* courseId → 課程的唯一識別碼

# 4. API 串接（API Integration）
## API 介面管理方式
### 存放資料夾 ```src/api/```
![image](https://hackmd.io/_uploads/r1Qg8ihdke.png)
* apiClient →  統一管理 API 請求，在這裡設定 **基礎 URL**、**請求攔截器**、**錯誤處理** 等功能
* courseApi、tutorApi 等 → 所有相關類別的 API 都放在各自的檔案中
## 如何在元件中呼叫 API

import courseApi from "../../api/courseApi";

// 取得課程資料函式
const [courseList, setCourseList] = useState([]);
const getCoursesData = async () => {
setLoadingState(true);
try {
const result = await courseApi.getCourses("topicSeries");
setCourseList(result);
} catch (error) {
console.log("錯誤", error);
} finally {
setLoadingState(false);
}
};

# 5. 程式碼風格（Coding Style）
使用 Prettier / ESLint 格式化程式碼
## 元件命名規範
大駝峰命名法 PascalCase
例如：CustomCourseList
![image](https://hackmd.io/_uploads/SJ9bpi3dJg.png)
## 檔案命名規範
### 如果該檔案是頁面 (在 src/pages 裡面)
烤肉串命名法 kebab-case
例如：/custom-course-list
![image](https://hackmd.io/_uploads/SJlNas3_Jl.png)
### 如果該檔案只用來存放函式 / 方法 / 純資料
烤肉串命名法 kebab-case
檔名用 .js
(沒有改到的話請幫忙改)
例如：/utils
![image](https://hackmd.io/_uploads/H1Nd-SRdJg.png)

### 如果該檔案是元件 (在 src/components 裡面)
大駝峰命名法 PascalCase
例如：CourseCard
![image](https://hackmd.io/_uploads/HyDOTsnOkx.png)
# 6. 共用元件（Reusable Components）
## 元件存放位置
src/components/
## 元件撰寫原則
![image](https://hackmd.io/_uploads/Bkf4Co3ukg.png)
* 程式碼過多，移出去另外的檔案撰寫 (命名方式：-Section)
* 重用性高 (命名方式：大駝峰，以用途取名)

# 7. 開發流程（Development Workflow）
## Git 分支命名規則
* feature-功能或區塊名稱/撰寫人
* fix-功能或區塊名稱/撰寫人

![image](https://hackmd.io/_uploads/rJ5-Jn3OJx.png)
## PR（Pull Request）流程
0. 開新分支
1. pull main 的最新進度
2. 製作功能
3. commit
4. push 到自己的分支
5. 發 PR (發完請到 DC 通知幫忙審核的人)
6. 審核並 merge

## Commit Message
[參考](https://wadehuanglearning.blogspot.com/2019/05/commit-commit-commit-why-what-commit.html)
![image](https://hackmd.io/_uploads/SkefzSR_Jg.png)


# 8. 其他（Other Guidelines）
## import 順序
![image](https://hackmd.io/_uploads/rygAsg6dke.png)
1. React 相關方法
2. 第三方套件的引入
3. Api 引入
4. 元件引入
5. 內建資料引入 (較少)

如果沒有依照此方法做，應該是沒處理到 (請幫忙調整一下順序)