# สรุปโครงสร้างและหน้าที่ของไฟล์ (File Architecture Summary)

เอกสารนี้สรุปภาพรวมของแต่ละโฟลเดอร์และไฟล์หลักในระบบ Frontend-Learner ว่าแต่ละไฟล์ทำหน้าที่อะไร และมีการเชื่อมโยง (Dependencies) กันอย่างไร

---

## 1. 📂 หน้าจอหลัก (Pages Directory: `pages/`)

ควบคุมการทำงานและการนำทาง (Routing) ของผู้ใช้งานแต่ละหน้า โดยจะเรียกใช้ `components/` และ `composables/` มาทำงานร่วมกัน

- **`pages/index.vue` (หน้า Landing Page):**
  - **หน้าที่:** หน้าแรกสุดของระบบสำหรับผู้เยี่ยมชม นำเสนอคอร์สเด่น รายละเอียดสถิติ และรีวิวล่าสุด โดยดึงข้อมูลจริงจาก API (Dynamic Data) ขับเคลื่อน UI ทันสมัย
  - **การเชื่อมโยง:** ใช้ Layout `landing`, เชื่อมต่อ `useCourse`, `useCategory` และ components พื้นฐานเช่น `CourseCard`, `LandingHeader`, `LandingFooter`, `StarIcon`, และ `NuxtTime`
- **`pages/auth/` (กลุ่มหน้าเข้าสู่ระบบและสมัครสมาชิก):**
  - **`login.vue`:** หน้าเข้าสู่ระบบ (เชื่อม `useAuth` -> `login()`)
  - **`register.vue`:** หน้าลงทะเบียนผู้ใช้ใหม่ (เชื่อม `useAuth` -> `register()`)
  - **`forgot-password.vue`:** หน้าลืมรหัสผ่าน
  - **การเชื่อมโยง:** กลุ่มนี้ใช้ Layout `auth` และ `useFormValidation` เพื่อตรวจสอบฟอร์ม
- **`pages/dashboard/` (กลุ่มหน้าแผงควบคุมหลักของผู้ใช้):**
  - **`index.vue`:** หน้า Dashboard หลัก แสดงคอร์สที่กำลังเรียนและคอร์สแนะนำ
  - **`my-courses.vue`:** หน้าแสดงคอร์สทั้งหมดที่ผู้เรียนลงทะเบียนแล้ว
  - **`profile.vue`:** หน้าจัดการข้อมูลส่วนตัวของผู้ใช้งาน
  - **`announcements.vue`:** หน้าแสดงประกาศระบบและประกาศจากคอร์ส
  - **การเชื่อมโยง:** ใช้ Layout `default`, เชื่อม `useAuth`, `useCourse`, และ components โซน `layout/` กับ `course/`
- **`pages/classroom/` (กลุ่มหน้าห้องเรียนเมื่อเข้าสู่คอร์ส):**
  - **`learning.vue`:** หน้าจอหลักของการเรียน (มี Video Player เนื้อหาบทเรียน และคอมเมนต์) ควบคุมสถานะความคืบหน้า (Progress)
  - **`quiz.vue`:** หน้า Landing ก่อนเริ่มทำแบบทดสอบ แสดงรายละเอียดและสถิติ
  - **การเชื่อมโยง:** เชี่อมต่อ `useCourse`, `useQuizRunner` และเรียกใช้คอมโพเนนต์กลุ่ม `classroom/`
- **`pages/quiz/[id].vue` (หน้าจอขณะทำข้อสอบ):**
  - **หน้าที่:** นำเสนอตัวคำถามแบบ Interactive และตัวเลือกการตอบ (ข้อความ, ตัวเลือกเดี่ยว, หลายตัวเลือก)
  - **การเชื่อมโยง:** เชื่อมกับตัวจัดการสถานะ `useQuizRunner` หนักที่สุด
- **`pages/course/[id].vue` (หน้ารายละเอียดคอร์สก่อนซื้อ/ลงทะเบียน):**
  - **การเชื่อมโยง:** เชื่อมต้อ `useCourse` เพื่อดึงรายละเอียดแบบ SSR (Server-Side Rendering)

---

## 2. 🧩 ตัวจัดการข้อมูล (Composables Directory: `composables/`)

เปรียบเสมือน "สมอง" ของระบบ แยกการจัดการข้อมูล (State) และการเรียก API (Fetch) ออกจากหน้าจอ (UI)

- **`useAuth.ts`:**
  - **หน้าที่:** จัดการ Login, Register, Request Reset Password, อัปโหลดรูปโปรไฟล์ (Avatar), ระบบ Token (มีกลไก Refresh Token อัตโนมัติเมื่อพบ 401), และดึง/อัปเดตข้อมูลผู้ใช้
  - **ถูกเรียกใช้โดย:** แทบทุกหน้าจอและ `middleware/auth.ts`
- **`useCourse.ts`:**
  - **หน้าที่:** ศูนย์รวม API คอร์สเรียน (ดึงรายการคอร์ส, รายละเอียด, รายชื่อบทเรียน, การลงทะเบียน, ส่งความคืบหน้า, โหลดหน้าวิดีโอ)
  - **ถูกเรียกใช้โดย:** `pages/dashboard/`, `pages/classroom/`, `pages/course/` และคอมโพเนนต์ที่แสดงรายการคอร์ส
- **`useQuizRunner.ts`:**
  - **หน้าที่:** จัดการสถานะข้อสอบขณะรัน (Current Question), เก็บคำตอบ, ข้ามคำถาม, บันทึกส่งคะแนนเมื่อจบเกม
  - **ถูกเรียกใช้โดย:** `pages/quiz/[id].vue` และ `pages/classroom/quiz.vue`
- **`useCategory.ts`:** ดึงหมวดหมู่หลักสูตร นำไปใช้ทำ Filter ใน `index.vue` และ `my-courses.vue`
- **`useThemeMode.ts`:** จัดการโหมดสว่าง-มืด (Dark/Light mode) บันทึกและซิงค์กับ LocalStorage
- **`useFormValidation.ts`:** ดักจับ Error และ Validate กฎ (Rules) ต่างๆ ในฟอร์มรหัสผ่าน, สมัครสมาชิก
- **`useNavItems.ts`:** จัดการรายการเมนูด้านซ้าย (Sidebar Links) เปลี่ยนเมนูตาม Role อัตโนมัติ

---

## 3. 📦 คอมโพเนนต์หน้าจอ (Components Directory: `components/`)

ส่วนประกอบของ UI ที่สามารถนำไปใช้ซ้ำได้ (Reusable) เพื่อลดความซ้ำซ้อนในโค้ดฝั่งหน้าจอ

- **`layout/`:**
  - **`AppHeader.vue` & `AppSidebar.vue`:** ประกอบร่างเป็นเมนูและส่วนหัวของ Layout `default`
  - **`LandingHeader.vue` & `LandingFooter.vue`:** เมนูส่วนหน้าของเว็บ Guest
- **`classroom/`:**
  - **`VideoPlayer.vue`:** ตัวเล่นวิดีโออัจฉริยะ (จัดการ Youtube API และ Native Video) ส่งเวลาดูคืนหน้า `learning.vue` เสมอ
  - **`CurriculumSidebar.vue`:** แถบขวาในห้องเรียนเพื่อกดเปลี่ยนบทเรียน แสดงสถานะล็อก/ผ่าน/กำลังเรียน
  - **`AnnouncementModal.vue`:** เด้ง Pop-up แจ้งข่าวสารในคอร์สเรียน
- **`course/`:**
  - **`CourseCard.vue`:** การ์ดสี่เหลี่ยมแสดงหน้าปกคอร์ส (ถูกใช้ใน `index.vue` และ `my-courses.vue`)
- **`profile/`:**
  - แบบฟอร์มแก้ไขแยกย่อยของหน้า `profile.vue` เช่น ฟอร์มเปลี่ยนรหัส (`PasswordChangeForm`)
- **`common/`:**
  - คอมโพเนนต์จิปาถะทั่วไปที่ใช้ทุกที่ เช่น สวิตช์เปลี่ยนภาษา (`LanguageSwitcher`) สปินเนอร์โหลดของระบบ (`GlobalLoader.vue`)

---

## 4. 🖼 โครงสร้างเลย์เอาต์ (Layouts Directory: `layouts/`)

เป็นตัวคลุม (Wrapper) พื้นโครงสร้างเว็บของหน้าจอนั้นๆ ไม่ให้กระตุกเมื่อเปลี่ยนเนื้อหา

- **`default.vue`:** เลย์เอาต์หลัก มี Header และ Sidebar ใช้สำหรับ Dashboard
- **`auth.vue`:** เลย์เอาต์เรียบง่ายตรงกลางจอ มีพื้นหลังเบลอๆ สำหรับหน้า Login/Register
- **`landing.vue`:** เลย์เอาต์สำหรับหน้า `index.vue` เต็มจอแบบ Modern นำเสนอผลิตภัณฑ์
- **`dashboard.vue`:** เลย์เอาต์สำหรับมุมมอง Dashboard บางชนิด (ขึ้นอยู่กับโปรเจกต์)

---

## 5. 🛡 ตัวกรองหน้าและยามรักษาความปลอดภัย (Middleware: `middleware/`)

- **`auth.ts`:** ตรวจสอบผู้ใช้ก่อนเข้าหน้าใดๆ เสมอ (Route Guard)
  - ถ้ายังไม่ Login จะถูกดีดไปหน้า `/auth/login`
  - ถ้าจะเข้าหน้า Login แต่มี Token ล็อกอินแล้ว จะผลักกลับไปหน้า `/dashboard`
  - มันจะพึ่งพา Token ที่จัดการผ่าน `useAuth`

---

### ภาพรวมการหมุนเวียนข้อมูล (Data Flow Example)

1. **ล็อกอินและจัดการ Session:** หน้า `login.vue` กดยืนยัน -> เรียก `useAuth.login()` -> ได้ Token และรายละเอียดผู้ใช้ยัดลง Cookie -> _หากดึงโปรไฟล์แล้ว API หมดอายุ (401)_ ระบบจะเรียก `refreshAccessToken()` อัตโนมัติเพื่อใช้ต่อ
2. **เข้าห้องเรียน:** หน้า `index.vue` กดคอร์ส -> ส่งเข้า `middleware/auth.ts` เช็คผ่านเข้าหน้าเรียน -> `pages/course/[id].vue` เรียก `useCourse.fetchCourseById(id)` -> ส่งข้อมูลให้ UI
3. **เปิดคลิปเรียน:** `learning.vue` ส่ง URL ให้ `<VideoPlayer />` เล่น
4. **บันทึกเวลาเรียน:** `VideoPlayer` เฝ้าดูเวลา (TimeUpdate) -> รายงานตัวเลขกลับมายังบัญชีผู้ใช้ใน `learning.vue` -> เรียก `useCourse.saveVideoProgress()` ส่ง API กลับ Database พร้อมเช็คสถานะเนื้อหาว่าสำเร็จหรือไม่