feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.

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

@@ -3,7 +3,7 @@
 เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner (ฝั่งผู้เรียน)**  
 ใช้เป็นคู่มือสำหรับการพัฒนา บำรุงรักษา และขยายระบบต่อไป
 
-> อัปเดตล่าสุด: ปลายเดือนกุมภาพันธ์ 2026
+> อัปเดตล่าสุด: 27 กุมภาพันธ์ 2026 (อัปเดตคอมเมนต์ภาษาไทย & แก้ไข TypeScript)
 
 ---
 
@@ -134,5 +134,47 @@
 - **Standard Fonts:** ใช้ชุด Font Prompt ผ่านตัวแปร `--font-main` เสมอ
 - **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
 - **Mobile First:** ทุก Component ต้องรองรับระบบ Master Drawer บนมือถืออย่างสมบูรณ์
+- **Code Comments (Thai Localization):** ระบบหลักทั้งหมด (เช่น Classroom, Quiz, Dashboard, Profile) ได้รับการแปลคอมเมนต์ในโค้ดเป็นภาษาไทยอย่างละเอียด เพื่อให้ทีมนักพัฒนาชาวไทยสามารถทำความเข้าใจ บำรุงรักษา และขยายระบบได้ง่ายและรวดเร็วที่สุด
+- **TypeScript Strictness:** ระบบมีการบังคับใช้ Type ใน TypeScript อย่างเข้มงวด และมีการแก้ไข Linting Errors (เช่นในหน้าต่างทำแบบทดสอบ `quiz/[id].vue`) อย่างสม่ำเสมอ เพื่อลดข้อผิดพลาดในขณะรันไทม์ (Runtime)
 
 ---
+
+## 7. Getting Started & Setup (การติดตั้งและเริ่มต้นใช้งาน)
+
+สำหรับนักพัฒนาที่จะประเมิน เวิร์กโฟลว์ หรือรัน Frontend-Learner ข้อมูลที่จำเป็นมีดังนี้:
+
+- **Requirements:** ต้องมี Node.js (แนะนำเวอร์ชัน 18 ขึ้นไป)
+- **Install Dependencies:** ติดตั้งแพ็กเกจด้วยคำสั่ง `npm install`
+- **Run Development Server:** สำหรันการรันในเครื่องตัวเอง ให้ใช้ `npm run dev` ตัวระบบจะคอยรีเฟรชอัติโนมัติเมื่อโค้ดเปลี่ยน
+- **Build for Production:** ใช้คำสั่ง `npm run build` และเรียกใช้ระบบผ่าน `node .output/server/index.mjs` หรือรันผ่านคำสั่ง `npm run start` (Nuxt 3)
+
+---
+
+## 8. Environment Variables (การตั้งค่าตัวแปรสภาพแวดล้อม)
+
+ระบบฝั่ง Frontend จะเชื่อมต่อกับ API Backend ผ่านตัวแปรตั้งค่า ในการพัฒนาในเครื่องของตนเอง จำเป็นต้องสร้างไฟล์ `.env` ที่ root folder ของ `Frontend-Learner` โดยต้องมีข้อมูลดังต่อไปนี้:
+
+```env
+NUXT_PUBLIC_API_BASE=http://localhost:4000/api # เปลี่ยนเป็น URL หลังบ้านของ Production หากนำขึ้นโฮสต์
+```
+
+_(หมายเหตุ: Nuxt จะอ่านค่า `NUXT_PUBLIC_API_BASE` เข้าไปใน `useRuntimeConfig().public.apiBase` ให้นักพัฒนาเรียกใช้ใน Composables ตลอดทั้งแอปอัตโนมัติ)_
+
+---
+
+## 9. Internationalization (i18n) (ระบบสองภาษา)
+
+ระบบมี 2 รูปแบบการแปลภาษาคือ:
+
+- **UI Elements แบบ Static:** แปลผ่านไฟล์หรือแท็กในระบบ `@nuxtjs/i18n` (การสลับภาษาทำผ่านแฮมเบอร์เกอร์เมนูด้านบนขวา แจ้งสถานะผ่าน `useI18n()`)
+- **API Content แบบ Dynamic:** ในตาราง Course หรือ Quiz จากหลังบ้าน จะใช้โครงสร้างแบบคู่ (เช่น `title: { th: "...", en: "..." }`) โดยในทุกตรรกะหน้าเรียน (Composables) จะมีฟังก์ชันช่วยอย่าง `getLocalizedText()` ไว้คอยแปลงก้อน JSON นี้เป็นภาษาที่ผู้ใช้เลือกในปัจจุบันอัตโนมัติ
+
+---
+
+## 10. Error Handling & UI Feedback (การจัดการหน้าตาระหว่างเข้าถึง API)
+
+ระบบ Frontend-Learner มีแนวทางสำหรับประสบการณ์ผู้ใช้ (UX) ต่อกรณีข้อผิดพลาดที่ตายตัว ดังนี้:
+
+- **Toast Notifications:** ในกรณีข้อมูลไม่ถูกต้อง (เช่น ล็อกอินผิด, สมัครไม่ผ่าน) ระบบจะเด้ง `Notify` ของ Quasar (`$q.notify`) แจ้งผู้ใช้จากขอบบนขวา
+- **Confirmation Dialogs:** สำหรับการกระทำที่สำคัญและอาจผิดพลาดได้ (เช่น ยืนยันการส่งแบบทดสอบครั้งสุดท้ายเตือนไม่ให้กดส่งพลาด) จะใช้ `$q.dialog` แทน Toast
+- **Skeleton & Loading States:** ระหว่างดึงข้อมูลระบบจากหลังบ้าน จะใช้ Skeleton (กรอบเทากะพริบ) คงรูปทรงของวิดีโอ/แบบทดสอบไว้ก่อน ป้องกันไม่ให้หน้าขาวเพื่อลดอคติโหลดช้าของนักเรียน