elearning/Frontend-Learner/web-dev-details.md

🛠️ 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 ที่สวยงามสำหรับการเรียนปัจจุบัน