refactor: Extract chat input state management into a custom hook.

2026-02-24 11:49:24 +07:00 · 2026-02-24 11:49:24 +07:00 · c697a15525
commit c697a15525
parent 8cbef76b1e
1 changed files with 60 additions and 169 deletions
--- a/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
+++ b/Frontend-Learner/คู่มืออธิบาย/web-dev-details.md
@ -1,210 +1,101 @@
-# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
+# 🛠️ Web Development Documentation: Frontend-Learner
-
+เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner** (ระบบฝั่งผู้เรียน) อย่างครบถ้วน เพื่อใช้เป็นคู่มือสำหรับการพัฒนาและบำรุงรักษา (อัปเดตล่าสุด: ปลายเดือนกุมภาพันธ์ 2026)
 เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)
 ---
-## z️ 1. Technical Foundation (รากฐานทางเทคนิค)
+## 🚀 1. Technical Foundation
-รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
+รากฐานทางเทคนิคที่ขับเคลื่อนระบบ เพื่อให้ได้ประสิทธิภาพและความเสถียรสูงสุด
 ### 1.1 Tech Stack
- **Core:** [Nuxt 3](https://nuxt.com) (v`^3.11.2`), TypeScript `^5.4.5`
+- **Framework:** [Nuxt 3](https://nuxt.com) (Vue 3, Vite, SSR/SPA Hybrid)
- **UI Framework:** Quasar Framework `^2.15.2` (via `nuxt-quasar-ui ^3.0.0`)
+- **UI System:** Quasar Framework + Tailwind CSS (Utility-first)
- **Styling:** Tailwind CSS `^6.12.0` (Utility) + Vanilla CSS Variables (Theming/Dark Mode)
+- **Typography:** Google Fonts ("Prompt" เป็น Font หลักเพื่อความทันสมัยและอ่านง่าย)
- **State Management:** `ref`/`reactive` (Local) + `useState` (Global/Shared State)
+- **Multilingual:** `@nuxtjs/i18n` (รองรับ JSON-based locales ภาษาไทยและอังกฤษ)
- **Localization:** `@nuxtjs/i18n` (Supports JSON locales in `i18n/locales/`)
+- **Programming:** TypeScript (Strict Type Checking)
 - **Media Control:** `useMediaPrefs` (Command Pattern for global volume/mute state)
-### 1.2 Core Systems & Security
+### 1.2 Security & Authentication
- **Authentication:**
+- **Token Management:** ใช้ JWT (Access & Refresh Tokens) จัดเก็บผ่าน `useCookie` ระบบรักษาความปลอดภัยระดับ HTTP-only และ SameSite
-  - ใช้ **JWT** (Access Token 1 วัน, Refresh Token 7 วัน)
+- **Middleware:** `auth.ts` ตรวจสอบสิทธิ์การเข้าถึงหน้า Dashboard และ Classroom แบบ Real-time
-  - เก็บ Token ใน `useCookie` (Secure, SameSite)
+- **Persistence:** ระบบ **Remember Me** (จดจำอีเมล) ใช้ `localStorage` แยกส่วนจาก Session เพื่อความปลอดภัยและสะดวกสำหรับผู้ใช้
  - 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)
 ---
-## 📂 2. Frontend Structure (โครงสร้างหน้าเว็บและ UI)
+## 📂 2. Project Architecture
-### 2.1 Application Routes (`pages/`)
+โครงสร้างโฟลเดอร์ที่จัดระเบียบตามหลัก **Clean Architecture** เพื่อความคล่องตัวในการขยายระบบ
-| Module      | ไฟล์                       | Path                    | หน้าที่                                       |
+### 2.1 Directory Structure
 | :---------- | :------------------------- | :---------------------- | :-------------------------------------------- |
 | **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/`)
+- `pages/`: ระบบ Routing ทั้งหมด (Landing, Auth, Dashboard, Classroom)
 - `components/`: UI Components แยกตามความรับผิดชอบ (Common, Layout, Course, Classroom, Profile)
 - `composables/`: Business Logic ทั้งหมด (Auth, Course, Theme, Quiz, Navigation)
 - `types/`: ศูนย์รวม Interface และ Type definitions ของทั้งระบบ
 - `constants/`: แหล่งเก็บข้อมูล Static (เช่น Category cards, Why choose us) เพื่อลดความซับซ้อนในไฟล์ Vue
 - `assets/css/`: `main.css` ที่เป็น Single Source of Truth สำหรับสไตล์และ CSS Variables
 - `layouts/`: Master templates (Default, Auth, Dashboard)
 - `middleware/`: ตัวกรองความปลอดภัยก่อนเข้าถึงแต่ละหน้า
- **Common (`components/common/`):**
+### 2.2 Shared Infrastructure
  - `GlobalLoader.vue`: Loading indicator ทั่วทั้งแอป
  - `LanguageSwitcher.vue`: ปุ่มเปลี่ยนภาษา (TH/EN)
  - `AppHeader.vue`, `MobileNav.vue`: Navigation หลัก (ใช้ร่วมกับ AppSidebar)
  - `FormInput.vue`: Input field มาตรฐาน
 - **Layout (`components/layout/`):**
  - `AppSidebar.vue`: Sidebar หลักสำหรับ Dashboard (Collapsible)
  - `LandingHeader.vue`: Header เฉพาะสำหรับหน้า Landing Page
 - **Course (`components/course/`):**
  - `CourseCard.vue`: การ์ดแสดงผลคอร์ส รองรับ Progress และ **Glassmorphism** ในโหมดมืด
 - **Discovery (`components/discovery/`):**
  - `CategorySidebar.vue`: Sidebar ตัวกรองหมวดหมู่แบบย่อ/ขยายได้
  - `CourseDetailView.vue`: หน้ารายละเอียดคอร์สขนาดใหญ่ (Video Preview + Syllabus)
 - **Classroom (`components/classroom/`):**
  - `CurriculumSidebar.vue`: Sidebar บทเรียนและสถานะการเรียน
  - `AnnouncementModal.vue`: Modal แสดงประกาศของคอร์ส
  - `VideoPlayer.vue`: Video Player พร้อม Custom Controls และ YouTube Support
 - **User / Profile (`components/user/`, `components/profile/`):**
  - `UserAvatar.vue`: แสดงรูปโปรไฟล์ (รองรับ Fallback)
  - `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
  - `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
-### 2.3 Shared Infrastructure (`types/`, `constants/`)
+- **Types Architecture:** การสกัด Types จาก Composable ออกมาไว้ที่ `@/types` ช่วยลดความซ้ำซ้อนและป้องกัน Error จากการเปลี่ยนโครงสร้างข้อมูล API
-
+- **Constants System:** การใช้ `@/constants` ช่วยให้การแก้ไขคำโฆษณาหรือข้อมูลหน้าแรกทำได้จากจุดเดียว โดยไม่ต้องแก้โค้ด HTML
 - **Types (`types/`):** หัวใจของ Type Safety ทั่วทั้งแอป
  - `auth.ts`, `course.ts`: จัดเก็บ Interface หลักที่ใช้ร่วมกันระหว่าง Composable และ Components
  - `index.ts`: Central export สำหรับรวบรวมทุก Type ให้เรียกใช้ได้ง่ายผ่าน `@/types`
 - **Constants (`constants/`):** แหล่งเก็บข้อมูล Static
  - `landing.ts`: จัดเก็บข้อมูลการตลาดและเนื้อหาคงที่ของหน้าแรก (Landing Page) เพื่อลดขนาดไฟล์ `.vue`
 ---
 ## 🧠 3. Logic & Data Layer (Composables)
-รวบรวม Logic หลักแยกส่วนตามหน้าที่ (Separation of Concerns)
+การแยก Logic ออกจาก UI เพื่อความสะอาดและ Testable
-### 3.1 `useAuth.ts` (Authentication & User)
+- **`useAuth`:** จัดการสถานะ Login, การดึงโปรไฟล์ล่วงหน้า (Pre-fetching), และระบบ Token Refresh
-
+- **`useCourse`:** หัวใจของระบบ จัดการตั้งแต่ Catalog, การสมัครเรียน (Enroll), ไปจนถึงการส่งผลการเรียน (Progress)
-จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย
+- **`useThemeMode`:** ระบบจัดการธีมกลางที่เชื่อมต่อกับ `localStorage` และ CSS Variables อย่างเป็นระบบ
-
+- **`useQuizRunner`:** จัดการสถานะการสอบ เปลี่ยนข้อสอบ และส่งคะแนนไปยัง Backend โดยตรง
- **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
+- **`useNavItems`:** Single Source of Truth สำหรับเมนูทั้งหมด (Sidebar, Mobile Drawer, User Menu)
 - **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**
 ### 3.2 `useCourse.ts` (Course & Classroom)
 หัวใจหลักของการเรียนการสอน
 - **Catalog:** `fetchCourses`, `fetchCourseById`, `enrollCourse`
 - **Classroom:**
  - `fetchCourseLearningInfo`: โครงสร้างบทเรียน (Chapters/Lessons)
  - `fetchLessonContent`: เนื้อหาวิดีโอ/Quiz/Attachments
  - `fetchCourseAnnouncements`: ดึงข้อมูลประกาศของคอร์ส
  - `saveVideoProgress`: บันทึกเวลาเรียน (Sync Server)
 - **i18n Support:** `getLocalizedText` ตัวช่วยในการเลือกแสดงผลภาษา (TH/EN) ตาม Locale ปัจจุบันที่ผู้ใช้เลือก อัตโนมัติทั่วทั้งแอป
 ### 3.3 `useQuizRunner.ts` (Quiz System)
 จัดการ Logic การทำข้อสอบ (Production-Ready)
 - **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
 - **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที
 - **Type Safety:** ทุก Composable เรียกใช้ Interface จาก `@/types` เพื่อความสอดคล้องของข้อมูล
 ---
-## 🎨 4. Design System & Theming
+## 🎨 4. Branding & UI Policy
 มาตรฐานการออกแบบที่เน้นความ **Premium** และ **Consistent**
 ### 4.1 Theme Strategy
- **Framework:** Tailwind CSS + Quasar UI
+- **Public Pages (Landing, Auth, Detail):** บังคับ **Forced Light Mode** เพื่อภาพลักษณ์แบรนด์ที่สะอาดและน่าเชื่อถือ
- **Light/Dark Mode Policy:**
+- **Internal Pages (Dashboard, Learning):** รองรับ **Dark Mode (Oceanic Theme)** ลดการเมื่อยล้าของสายตาขณะเรียนเป็นเวลานาน
-  - **Public Pages:** บังคับ **Light Mode** (Landing, Course Detail, Auth) เพื่อภาพลักษณ์แบรนด์ที่สะอาดตา
+- **Transitions:** ใช้ `GlobalLoader` และ Smooth transitions ทั่วทั้งแอปเพื่อประสบการณ์ที่ลื่นไหล
-  - **Dashboard/Learning:** รองรับ **Dark Mode** เต็มรูปแบบ (Oceanic Theme)
+
-  - **Aesthetics:** ปรับปรุงความชัดเจนของ Badge, Icon และสถานะต่างๆ ในหน้าสอบ (Quiz) สำหรับโหมดมืดโดยเฉพาะ ให้มี Contrast สูงและดู Premium
+### 4.2 UI Elements
- **Visual Fixes:** แก้ไขปัญหา "Dark Frame" ในหน้า Auth โดยการบังคับสไตล์ระดับ HTML/Body
+
 - **Image 2 Style Categories:** การ์ดหมวดหมู่แบบแนวนอนที่เป็นระเบียบ (Minimalist)
 - **Glassmorphism:** พื้นผิวโปร่งแสงใน Dashboard และ Classroom ช่วยให้แอปดูมีมิติ
 - **Standardized Icons:** ใช้ Material Icons ผ่าน Quasar ระบบเดียวทั้งหมด
 ---
-## 📊 5. Dependency Map (ความสัมพันธ์ไฟล์)
+## 📚 5. Core Feature Highlights
-| หน้าเว็บ (Page)          | Components หลัก              | Composables หลัก                                       |
+ฟีเจอร์เด่นที่ถูกพัฒนาขึ้นเพื่อผู้เรียนโดยเฉพาะ
 | :----------------------- | :--------------------------- | :----------------------------------------------------- |
 | **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)                |
 | **Global Context**       | `GlobalLoader`               | `useThemeMode` (Theme Standard), `useAuth` (Root Init) |
-### 5.1 Shared Resource Architecture
+- **SPA Learning Journey:** การสลับบทเรียนในห้องเรียนเป็นแบบ Single Page App (ไม่มีการ Re-load หน้า) ทำให้การเรียนต่อเนื่อง
-
+- **Hybrid Progress Tracking:** บันทึกเวลาเรียนลง LocalStorage แบบ Real-time และ Sync ขึ้น Server เป็นระยะเพื่อป้องกันข้อมูลหาย
- **Data Flow:** `API` -> `Composable` (**with Types**) -> `Page/Component` (**with Constants**)
+- **Announcement System:** ระบบแจ้งเตือนในคอร์สพร้อมตัวระบุ "ยังไม่ได้อ่าน" (Unread Badge) ที่จำสถานะตามผู้ใช้งาน
- **State Persistence:** `useCookie` (Auth) + `localStorage` (Theme, Forget Me, Unread Badges)
+- **Interactive Quizzes:** ระบบสอบที่สลับคำถามอัตโนมัติ พร้อมโหมดเฉลย (Answer Review) ที่ชัดเจน
 - **Certificate Automation:** ระบบตรวจสอบสิทธิ์ความสำเร็จและออกใบประกาศนียบัตรได้ทันที
 ---
-## ✅ 6. Project Status (สถานะล่าสุด)
+## 🛠️ 6. Maintenance & Performance Guidelines
-### ✨ Recent Updates (กุมภาพันธ์ 2026)
+แนวทางสำหรับการพัฒนาต่อยอด
-1.  **System-Wide Code Cleanup (Phase Final):**
+1. **Clean Code:** หลีกเลี่ยงการใช้ `console.log` ในโค้ด Final และลบ Dead Logic ทิ้งทันที
-    - **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
+2. **Standard Fonts:** ใช้ชุด Font `Prompt` ผ่านตัวแปร `--font-main` เสมอ
-    - **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
+3. **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
-    - **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code
+4. **Mobile First:** ทุก Component ต้องรองรับระบบ **Master Drawer** บนมือถืออย่างสมบูรณ์
-2.  **Authentication & Security Polish:**
+---
    - **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
    - **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)
-3.  **UI & Aesthetics (Premium Fixes):**
+_เอกสารนี้ถูกจัดทำขึ้นเพื่อให้ทีมพัฒนาเข้าใจทิศทางเดียวกัน และรักษามารตฐานสูงสุดของโปรเจกต์ e-Learning Platform_
    - **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
    - **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด
 4.  **Quiz System Productionization:**
    - **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
    - **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล
 5.  **Smooth Navigation & Quiz Experience:**
    - **SPA Navigation:** เปลี่ยนการสไลด์บทเรียนจาก Hard Reload เป็น SPA Navigation (`router.push`) ทำให้เรียนได้ต่อเนื่อง ไม่ต้องรอโหลดหน้าใหม่
    - **Smart Lesson Loading:** ปรับปรุง Error ที่หน้าเว็บชอบเด้งกลับไปบทเรียนที่ 1 เสมอ โดยเปลี่ยนให้ความสำคัญกับ `lesson_id` จาก URL ก่อน
    - **UI Simplification:** ลบทิ้ง "Legend/คำอธิบายสถานะ" ในหน้าสอบเพื่อความสะอาดตา (Minimal UI)
    - **Sidebar visibility:** ช่วยให้ผู้ใช้เปิด-ปิด Sidebar บน Desktop ได้อย่างอิสระผ่านปุ่ม Hamburger
 6.  **Internationalization (i18n) Improvements:**
    - **Localized Text Logic:** แก้ไขฟังก์ชัน `getLocalizedText` ให้แสดงภาษาตามที่ผู้ใช้สลับจริง (แก้ปัญหาหน้าเว็บเป็นอังกฤษแต่ชื่อวิชาเป็นไทย)
    - **Hardcoded Removal:** ทยอยลบข้อความภาษาไทยที่พิมพ์ค้างไว้ในโค้ด (เช่น ใน Sidebar หมวดหมู่) และแทนที่ด้วย i18n keys
    - **Boot Sequence Fix:** แก้ไขปัญหาเว็บค้าง (Error 500) ที่เกิดจากการเรียกใช้ภาษาเร็วเกินไปก่อนที่ระบบจะพร้อม (`initialization error`)
 7.  **Classroom & UX Optimization (Mid-February 2026):**
    - **SPA Navigation for Learning:** เปลี่ยนระบบเลือกบทเรียนจากการ Reload หน้าเป็น SPA Navigation ทำให้เปลี่ยนวิดีโอ/บทเรียนได้ทันทีโดยไม่ต้อง Refresh หน้าจอ
    - **Announcement Persistence:** เพิ่มระบบเช็กสถานะการอ่านประกาศ (Unread Badge) โดยบันทึกสถานะล่าสุดลง LocalStorage แยกตามผู้ใช้และคอร์ส
    - **YouTube Resume:** รองรับการเรียนต่อจากจุดเดิมสำหรับวิดีโอ YouTube (Time Seeking via URL parameter)
 8.  **Quiz System Enhancements:**
    - **Answer Review Mode:** เพิ่มโหมดเฉลยข้อสอบหลังทำเสร็จ พร้อมการไฮไลท์สีที่ชัดเจน (เขียว = ถูก, แดง = ตอบผิด)
    - **Shuffle Logic:** เพิ่มการสลับคำถามและตัวเลือก (Shuffle) เพื่อความโปร่งใสในการสอบ
    - **Enhanced Feedback:** ปรับปรุง UI ผลลัพธ์การสอบให้มีความ Premium และเข้าใจง่ายขึ้น
 9.  **Security & Registration Polish:**
    - **Phone Validation:** เพิ่มระบบตรวจสอบเบอร์โทรศัพท์ในหน้าสมัครสมาชิก (ต้องเป็นตัวเลขและยาวไม่เกิน 10 หลัก)
    - **Enrollment Alert Logic:** ปรับปรุง Logic การสมัครเรียนให้ตรวจสอบสถานะ Enrollment เดิมก่อน เพื่อป้องกัน API Error และการเรียก request ซ้ำซ้อน
 10. **Profile & Certificates:**
    - **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
    - **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
 11. **Refactoring & UI System Overhaul (Late February 2026):**
    - **Centralized Types System:** ย้าย Interface และ Type definitions ทั้งหมดออกจากไฟล์ Composable (เช่น `useAuth`, `useCourse`) ไปไว้ในโฟลเดอร์ `@/types/` เพื่อลดขนาดไฟล์ Logic และเพิ่มความสามารถในการนำมาใช้ซ้ำ (Reusability)
    - **Constants Extraction:** แยกข้อมูล Static (เช่น รายชื่อหมวดหมู่, ข้อความหน้า Landing) ไปไว้ใน `@/constants/landing.ts` เพื่อให้โค้ดส่วน UI สะอาดและจัดการข้อมูลได้จากจุดเดียว
    - **Mobile Master Drawer:** รวบรวมเมนู Navigation, Profile, Tools (เปลี่ยนภาษา/Dark Mode) และ Logout เข้ามาไว้ใน Drawer เดียวกันบนมือถือ เพื่อความสะดวกในการใช้งานแบบ Single-Hand
    - **Landing Page Redesign:** ปรับโฉมส่วน "หมวดหมู่ที่น่าสนใจ" (Image 2 Style) เป็นแบบการ์ดแนวนอน (Horizontal) ที่เรียบง่าย ตัดลูกศรและคำอธิบายที่ไม่จำเป็นออกเพื่อให้ดู Minimal และ Premium มากขึ้น
    - **Theming Standardization:** ปรับปรุง `app.vue` ให้ใช้ Composable `useThemeMode` ในการควบคุมธีมทั้งหมดแทนการเขียน Logic แยกต่างหาก ทำให้การสลับโหมดเสถียรและแม่นยำขึ้น
    - **Authentication UI Polish:** เพิ่มกล่อง "Test Credentials" ในหน้า Login เพื่ออำนวยความสะดวกในการทดสอบระบบ และปรับเปลี่ยนหน้ายืนยันอีเมลให้เป็นแบบ Standalone UI (auth layout)