Please provide the file changes to generate a commit message.

Frontend-Learner/คู่มืออธิบาย/summary.md

@@ -0,0 +1,102 @@
+# สรุปโครงสร้างและหน้าที่ของไฟล์ (File Architecture Summary)
+
+เอกสารนี้สรุปภาพรวมของแต่ละโฟลเดอร์และไฟล์หลักในระบบ Frontend-Learner ว่าแต่ละไฟล์ทำหน้าที่อะไร และมีการเชื่อมโยง (Dependencies) กันอย่างไร
+
+---
+
+## 1. 📂 หน้าจอหลัก (Pages Directory: `pages/`)
+
+ควบคุมการทำงานและการนำทาง (Routing) ของผู้ใช้งานแต่ละหน้า โดยจะเรียกใช้ `components/` และ `composables/` มาทำงานร่วมกัน
+
+- **`pages/index.vue` (หน้า Landing Page):**
+  - **หน้าที่:** หน้าแรกสุดของระบบสำหรับผู้เยี่ยมชม (Guest) นำเสนอคอร์สเด่นและจุดเด่นของระบบ
+  - **การเชื่อมโยง:** ใช้ Layout `landing`, เชื่อมต่อ `useCourse`, `useCategory` และ components เช่น `CourseCard`, `LandingHeader`, `LandingFooter`
+- **`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, Logout, ระบบ Token (Access & Refresh), ดึง Data ของผู้ใช้
+  - **ถูกเรียกใช้โดย:** แทบทุกหน้าจอและ `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. **ล็อกอิน:** หน้า `login.vue` กดยืนยัน -> เรียก `useAuth.login()` -> ได้ Token และ Role ยัดลง Local Cache (Cookie)
+2. **เข้าห้องเรียน:** หน้า `index.vue` กดคอร์ส -> ส่งเข้า `middleware/auth.ts` เช็คผ่านเข้าหน้าเรียน -> `pages/course/[id].vue` เรียก `useCourse.fetchCourseById(id)` -> ส่งข้อมูลให้ UI
+3. **เปิดคลิปเรียน:** `learning.vue` ส่ง URL ให้ `<VideoPlayer />` เล่น
+4. **บันทึกเวลาเรียน:** `VideoPlayer` เฝ้าดูเวลา (TimeUpdate) -> รายงานตัวเลขกลับมายังฟังก์ชัน `handleVideoTimeUpdate()` ที่อยู่ใน `learning.vue` -> เรียก `useCourse.saveVideoProgress()` ส่ง API กลับ Database