# 🛠️ Web Development Details: e-Learning Platform (Learner Frontend)

เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบเพื่อความสะดวกในการพัฒนาต่อและส่งมอบงาน

## 🚀 Tech Stack

- **Framework:** Nuxt 3 (Vue 3 Composition API)
- **Language:** TypeScript
- **Styling:**
  - Tailwind CSS (Utility-first)
  - Vanilla CSS Variables (Design Tokens & Theming)
  - Custom CSS Animations (ใน `assets/css/main.css`)
- **State Management:** Vue `ref`, `reactive`, `computed` (Local State) & Composables (Global State)
- **UI Component:**
  - Custom Premium Components (สร้างเองเพื่อให้ได้ Design ที่เฉพาะตัว)
  - Quasar UI (ใช้บางส่วนสำหรับ Notifications และ Layout พื้นฐาน)
- **Icons:** SVG Icons (Inline เพื่อ Performance สูงสุด)

---

## 📂 โครงสร้างโฟลเดอร์และหน้าที่ของไฟล์ (Project Structure)

### `pages/` (Routes)

กำหนดเส้นทาง (Routes) ของเว็บไซต์:

| ไฟล์                      | Path URL           | หน้าที่และความสำคัญ                                                                          |
| :------------------------ | :----------------- | :------------------------------------------------------------------------------------------- |
| `index.vue`               | `/`                | **Main Landing Page:** หน้าแรกบุคคลทั่วไป มีเอฟเฟกต์พื้นหลัง Hero Section และข้อมูลแพลตฟอร์ม |
| **`auth/`**               |                    | **Authentication Module:** รวมหน้าที่เกี่ยวกับการยืนยันตัวตนทั้งหมด                          |
| ├── `login.vue`           | `/auth/login`      | หน้าเข้าสู่ระบบ                                                                              |
| ├── `register.vue`        | `/auth/register`   | หน้าสมัครสมาชิกใหม่                                                                          |
| ├── `forgot-password.vue` | `/auth/forgot..`   | หน้าขอรหัสผ่านใหม่                                                                           |
| └── `reset-password.vue`  | `/auth/reset..`    | หน้าตั้งรหัสผ่านใหม่                                                                         |
| **`dashboard/`**          |                    | **User Dashboard Module:** ส่วนพื้นที่ส่วนตัวของผู้ใช้                                       |
| ├── `index.vue`           | `/dashboard`       | **Main Dashboard:** หน้าหลักแสดงความคืบหน้าการเรียนล่าสุด และคอร์สแนะนำ                      |
| ├── `my-courses.vue`      | `/dashboard/my..`  | **User Knowledge Base:** รวมคอร์สที่ผู้ใช้งานลงทะเบียนเรียนแล้ว                              |
| ├── `profile.vue`         | `/dashboard/pro..` | **User Settings:** หน้าจัดการข้อมูลส่วนตัว                                                   |
| ├── `announcements.vue`   | `/dashboard/ann..` | **Platform News:** หน้ารวมประกาศข่าวสาร                                                      |
| **`browse/`**             |                    | **Browsing Module:** ส่วนค้นหาคอร์สเรียน                                                     |
| ├── `index.vue`           | `/browse`          | **Public Catalog:** หน้ารวมคอร์สสำหรับผู้เยี่ยมชมทั่วไป (Clean Card UI)                      |
| ├── `discovery.vue`       | `/browse/disc..`   | **Course Catalog:** หน้าค้นหาคอร์ส พร้อมระบบ Filter Accordion และ Expandable Categories      |
| ├── `opencovery.vue`      | `/browse/open..`   | **Public Detail:** หน้ารายละเอียดคอร์สแบบสาธารณะ                                             |
| **`classroom/`**          |                    | **Learning Module:** ส่วนการเรียนการสอน                                                      |
| ├── `learning.vue`        | `/classroom/lea..` | **Classroom Experience:** ห้องเรียนออนไลน์เต็มรูปแบบ (Video Player, Sidebar)                 |
| ├── `quiz.vue`            | `/classroom/quiz`  | **Assessment Module:** ระบบสอบวัดผล 4 ขั้นตอน                                                |

### `components/` (Reusable UI)

ส่วนประกอบที่นำไปใช้ซ้ำในหน้าต่างๆ:

- **Layout & Navigation:**
  - `AppHeader.vue` / `AppSidebar.vue`: ส่วนหัวและเมนูข้างสำหรับผู้ใช้ที่ล็อกอินแล้ว
  - `LandingHeader.vue` / `LandingFooter.vue`: ส่วนหัวและท้ายสำหรับหน้า Landing Page
  - `MobileNav.vue`: เมนูนำทางด้านล่างสำหรับหน้าจอมือถือ
  - `UserMenu.vue`: เมนู Dropdown จัดการบัญชีผู้ใช้
- **Cards & Display:**
  - `CourseCard.vue`: การ์ดแสดงข้อมูลคอร์ส (Updated: Clean Design, No Badge)
  - `UserAvatar.vue`: แสดงรูปโปรไฟล์ผู้ใช้ พร้อม Fallback
- **Forms & Feedback:**
  - `FormInput.vue`, `LoadingSpinner.vue`, `LoadingSkeleton.vue`

---

## 🔐 ระบบรักษาความปลอดภัยและ Logic พิเศษ (Core Logic)

| ส่วนงาน         | ไฟล์                                 | คำอธิบาย                                                        |
| :-------------- | :----------------------------------- | :-------------------------------------------------------------- |
| **Route Guard** | `middleware/auth.ts`                 | Middleware ดักจับการเข้าถึง เช็กสถานะการล็อกอิน                 |
| **Auth State**  | `composables/useAuth.ts`             | Centralized Logic สำหรับ Login/Logout เก็บ state ผู้ใช้ปัจจุบัน |
| **No-Cache**    | `server/middleware/cache-control.ts` | ป้องกันการ Cache หน้าสำคัญด้วย Headers                          |

---

## 🎨 Design System & Theming

- **Global Styles:** `assets/css/main.css`
  - **Strict Dark Palette:** ใช้ระบบ CSS Variables ใหม่ (`--bg-body`, `--bg-surface`, `--text-main`, etc.) เพื่อคุมธีม Dark Mode ให้แม่นยำ (`Slate-900` base)
  - **Dynamic Colors:** เปลี่ยนการใช้ Hardcoded HEX เป็น Tailwind Utilities (`text-slate-900 dark:text-white`) เพื่อรองรับทั้ง Light/Dark Mode สมบูรณ์แบบ
- **Font Configuration:** ใช้ **Inter** (English) และ **Prompt/Sarabun** (Thai)

---

## 🆕 อัปเดตล่าสุด (Recent Major Updates)

### 1. **Authentication Refactor**

- ย้ายไฟล์ที่เกี่ยวข้องกับ Auth (`login`, `register`, etc.) ไปไว้ในโฟลเดอร์ `pages/auth/` เพื่อความเป็นระเบียบและง่ายต่อการจัดการ

### 2. **UI/UX Refinements (Discovery & Courses)**

- **Discovery Page:**
  - **Accordion Filters:** ปรับปรุง Filter หมวดหมู่ให้สามารถ ย่อ/ขยาย ได้ (`v-show`)
  - **Show More Logic:** เพิ่มปุ่ม "แสดงเพิ่มเติม/แสดงน้อยลง" สำหรับรายการหมวดหมู่ที่ยาว
  - **Cleaner UI:** ลบไอคอน Chevron ที่ซ้ำซ้อนในแต่ละรายการออก
- **Courses Page (Public):**
  - **Simplified Cards:** ลบ Badge ระดับความยาก (Level) ออกเพื่อให้การ์ดดูสะอาดตาขึ้น
  - **Data Cleanup:** ลบข้อมูล Level ที่ไม่จำเป็นออกจาก Mock Data

### 3. **Dashboard (Home) Update**

- **New Layout:** ปรับปรุงหน้า Dashboard ให้แสดง "คอร์สที่เรียนล่าสุด" และ "คอร์สแนะนำ" อย่างชัดเจน
- **Progress Tracking:** แสดง Progress Bar ที่สวยงามสำหรับการเรียนปัจจุบัน