feat: Add message and conversation validation to the message feedback endpoint.

2026-02-04 17:05:19 +07:00 · 2026-02-04 17:05:19 +07:00 · c9381b9385
commit c9381b9385
parent a201c4285b
1 changed files with 44 additions and 50 deletions
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@ -1,6 +1,6 @@
 # 🛠️ Web Development Documentation: e-Learning Platform (Frontend)

-เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด)
+เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)

 ---

@ -23,12 +23,14 @@
  - ใช้ **JWT** (Access Token 1 วัน, Refresh Token 7 วัน)
  - เก็บ Token ใน `useCookie` (Secure, SameSite)
  - Middleware (`middleware/auth.ts`) ป้องกัน Route ตามสถานะ
+  - **Remember Me:** ระบบจดจำอีเมลลงใน `localStorage` (จำแยกจาก session, ไม่ถูกลบเมื่อ Logout)
 - **API Handling:**
  - ใช้ `runtimeConfig.public.apiBase` เชื่องโยง Backend
  - Auto-attach Bearer Token ใน `useAuth` และ `useCourse`
 - **Performance:**
  - **Hybrid Progress Saving:** บันทึกเวลาเรียนลง LocalStorage (ถี่) และ Server (Throttle 15s) เพื่อความแม่นยำสูงสุด
  - **Caching:** ใช้ `useState` จำข้อมูล Profile และ Categories ลด request
+  - **Code Quality:** ลบ Log, Dead logic และ Redundant comments ทั่วทั้งโปรเจกต์ (Clean Code Phase)

 ---

@ -36,19 +38,19 @@

 ### 2.1 Application Routes (`pages/`)

-| Module      | ไฟล์                       | Path                    | หน้าที่                                      |
-| :---------- | :------------------------- | :---------------------- | :------------------------------------------- |
-| **Public**  | `index.vue`                | `/`                     | หน้าแรก Landing Page                         |
-|             | `browse/discovery.vue`     | `/browse/discovery`     | **ระบบค้นหาและ Filter คอร์ส** (Catalog)      |
-|             | `course/[id].vue`          | `/course/:id`           | **หน้ารายละเอียดคอร์ส** (Course Detail)      |
-| **Auth**    | `auth/login.vue`           | `/auth/login`           | เข้าสู่ระบบ (รองรับ Remember Me)             |
-|             | `auth/register.vue`        | `/auth/register`        | สมัครสมาชิกผู้เรียน                          |
-|             | `auth/reset-password.vue`  | `/auth/reset-password`  | ตั้งรหัสผ่านใหม่ (Reset Flow)                |
-| **Student** | `dashboard/index.vue`      | `/dashboard`            | แดชบอร์ดภาพรวมผู้เรียน                       |
-|             | `dashboard/my-courses.vue` | `/dashboard/my-courses` | **คอร์สของฉัน** และดาวน์โหลดใบประกาศฯ        |
-|             | `dashboard/profile.vue`    | `/dashboard/profile`    | จัดการโปรไฟล์, รูปภาพ, เปลี่ยนรหัสผ่าน       |
-|             | `classroom/learning.vue`   | `/classroom/learning`   | **ห้องเรียน (Video Player)** & Announcements |
-|             | `classroom/quiz.vue`       | `/classroom/quiz`       | การสอบวัดผล (Quiz System)                    |
+| Module      | ไฟล์                       | Path                    | หน้าที่                                       |
+| :---------- | :------------------------- | :---------------------- | :-------------------------------------------- |
+| **Public**  | `index.vue`                | `/`                     | หน้าแรก Landing Page (**Forced Light Mode**)  |
+|             | `browse/discovery.vue`     | `/browse/discovery`     | **ระบบค้นหาและ Filter คอร์ส** (Catalog)       |
+|             | `course/[id].vue`          | `/course/:id`           | **หน้ารายละเอียดคอร์ส** (Course Detail)       |
+| **Auth**    | `auth/login.vue`           | `/auth/login`           | เข้าสู่ระบบ (**Remember Me**, **Light Mode**) |
+|             | `auth/register.vue`        | `/auth/register`        | สมัครสมาชิกผู้เรียน (**Light Mode**)          |
+|             | `auth/forgot-password.vue` | `/auth/forgot-password` | กู้คืนรหัสผ่าน (**Light Mode**)               |
+| **Student** | `dashboard/index.vue`      | `/dashboard`            | แดชบอร์ดภาพรวมผู้เรียน                        |
+|             | `dashboard/my-courses.vue` | `/dashboard/my-courses` | **คอร์สของฉัน** และดาวน์โหลดใบประกาศฯ         |
+|             | `dashboard/profile.vue`    | `/dashboard/profile`    | จัดการโปรไฟล์, รูปภาพ, เปลี่ยนรหัสผ่าน        |
+|             | `classroom/learning.vue`   | `/classroom/learning`   | **ห้องเรียน (Video Player)** & Announcements  |
+|             | `classroom/quiz.vue`       | `/classroom/quiz`       | การสอบวัดผล (**API-Driven Logic**)            |

 ### 2.2 Key Components (`components/`)

@ -82,7 +84,7 @@
 จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย

 - **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role
+- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**

 ### 3.2 `useCourse.ts` (Course & Classroom)

@ -93,15 +95,13 @@
  - `fetchCourseLearningInfo`: โครงสร้างบทเรียน (Chapters/Lessons)
  - `fetchLessonContent`: เนื้อหาวิดีโอ/Quiz/Attachments
  - `saveVideoProgress`: บันทึกเวลาเรียน (Sync Server)
-  - `fetchCourseAnnouncements`: ดึงประกาศในคอร์สเรียน
-  - `getCertificate` / `generateCertificate`: ออกใบประกาศนียบัตร

-### 3.3 `useMediaPrefs.ts` (Media Control)
+### 3.3 `useQuizRunner.ts` (Quiz System)

-จัดการการตั้งค่า Media Player
+จัดการ Logic การทำข้อสอบ (Production-Ready)

- **State:** `volume` (0-1), `muted` (boolean)
- **Functions:** `setVolume`, `setMuted`, `applyTo` (apply state to video element)
+- **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
+- **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที

 ---

@ -110,11 +110,10 @@
 ### 4.1 Theme Strategy

 - **Framework:** Tailwind CSS + Quasar UI
- **Dark Mode:** รองรับ Class-based Dark Mode (`.dark`)
- **Fonts:**
-  - **Heading:** Prompt, Sarabun (TH), Inter (EN)
-  - **Body:** Sarabun (TH), Inter (EN)
-  - **Handwriting:** (Optional) Dancing Script
+- **Light/Dark Mode Policy:**
+  - **Public Pages:** บังคับ **Light Mode** (Landing, Course Detail, Auth) เพื่อภาพลักษณ์แบรนด์ที่สะอาดตา
+  - **Dashboard/Learning:** รองรับ **Dark Mode** เต็มรูปแบบ (Oceanic Theme)
+- **Visual Fixes:** แก้ไขปัญหา "Dark Frame" ในหน้า Auth โดยการบังคับสไตล์ระดับ HTML/Body

 ---

@ -122,41 +121,36 @@

 | หน้าเว็บ (Page)          | Components หลัก              | Composables หลัก                                       |
 | :----------------------- | :--------------------------- | :----------------------------------------------------- |
-| **Login / Register**     | `FormInput`                  | `useAuth`, `useFormValidation`                         |
+| **Login / Register**     | `FormInput`                  | `useAuth` (Remember Me), `useFormValidation`           |
 | **Discovery (Browse)**   | `CourseCard`                 | `useCourse` (Search/Filter), `useCategory`             |
 | **My Courses**           | `CourseCard` (with Progress) | `useCourse` (Certificates)                             |
 | **Classroom (Learning)** | Video Player, Sidebar        | `useCourse` (Progress, Announcements), `useMediaPrefs` |
+| **Quiz**                 | `QuizHeader`, `QuizContent`  | `useQuizRunner` (Real API Integration)                 |
 | **Profile**              | `UserAvatar`, `FormInput`    | `useAuth` (Upload Avatar, Verify Email)                |

 ---

 ## ✅ 6. Project Status (สถานะล่าสุด)

-### ✨ Recent Updates (อัปเดตล่าสุด)
+### ✨ Recent Updates (กุมภาพันธ์ 2026)

-1.  **Code Optimization (Clean Code):**
-    - **ลบ Mock Data ทั้งหมด:** หน้า `quiz`, `classroom`, `discovery` ใช้ข้อมูลจริงจาก API 100%
-    - **ลบ Dead Code:** กำจัดตัวแปรที่ไม่ได้ใช้ (`currentUser` ซ้ำซ้อน, `unused intervals`) และ `console.log`
+1.  **System-Wide Code Cleanup (Phase Final):**
+    - **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
+    - **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
+    - **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code

-2.  **Robust Learning System (Classroom):**
-    - **Hybrid Progress Saving:** ระบบบันทึกเวลาเรียนแบบลูกผสม (Local + Server) ป้องกันเวลาหายเมื่อเน็ตหลุดหรือปิดแท็บ
-    - **Announcements:** เพิ่มแท็บประกาศใน Sidebar ห้องเรียน เชื่อมต่อ API `course-announcements` พร้อมแจ้งเตือน "New"
-    - **Video Player:** ปรับปรุง UI Player, Volume Persistence (`useMediaPrefs`)
+2.  **Authentication & Security Polish:**
+    - **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
+    - **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)

-3.  **i18n & Configuration:**
-    - **Path Correction:** แก้ไข `nuxt.config.ts` ให้เรียกไฟล์ภาษาจาก `i18n/locales/` ได้ถูกต้อง
-    - **Consistency:** เพิ่มคีย์ภาษาที่ขาดหาย (เช่น `common.close`) ใน `en.json`
+3.  **UI & Aesthetics (Premium Fixes):**
+    - **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
+    - **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด

-4.  **Enrollment & User Experience:**
-    - **Smart Enrolled Filter:** หน้า "คอร์สของฉัน" Tab "กำลังเรียน" แสดงทั้งคอร์สที่เพิ่งลงทะเบียน (`ENROLLED`) และกำลังเรียน (`IN_PROGRESS`)
-    - **Certificate System:** ระบบดาวน์โหลด/สร้างใบประกาศฯ อัตโนมัติเมื่อเรียนจบ
+4.  **Quiz System Productionization:**
+    - **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
+    - **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล

-5.  **Profile & Security:**
-    - **Email Verification:** ปุ่มยืนยันอีเมลและสถานะในหน้าโปรไฟล์
-    - **Avatar Upload:** อัปโหลดรูปภาพพร้อม Preview และ Validation (Size/Type)
-
-6.  **Component Refactoring & Organization:**
-    - **Classroom:** แยก `CurriculumSidebar`, `AnnouncementModal`, `VideoPlayer` เพื่อลดขนาดไฟล์ `learning.vue`
-    - **Discovery:** แยก `CategorySidebar` และ `CourseDetailView`
-    - **Profile:** แยกฟอร์มแก้ไขข้อมูลและเปลี่ยนรหัสผ่านเป็น Components ย่อย
-    - **Cleanup:** ลบตัวแปร, ฟังก์ชัน, และ Imports ที่ไม่ได้ใช้งานทั้งหมด
+5.  **Performance & Stability:**
+    - แก้ไขปัญหาการเชื่อมต่อ Media (`ERR_CONNECTION_FAILED`) ผ่านการปรับปรุง config
+    - ปรับปรุงการโหลดข้อมูลเบื้องหลังด้วย `useAsyncData` ให้มีความเสถียรมากขึ้น