1

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

@@ -6,6 +6,7 @@
 
 - **Framework:** Nuxt 3 (Vue 3 Composition API)
 - **Language:** TypeScript
+- **Internationalization:** @nuxtjs/i18n (Multi-language support: TH/EN)
 - **Styling:**
   - Tailwind CSS (Utility-first)
   - Vanilla CSS Variables (Design Tokens & Theming)
@@ -54,12 +55,21 @@
   - `LandingHeader.vue` / `LandingFooter.vue`: ส่วนหัวและท้ายสำหรับหน้า Landing Page
   - `MobileNav.vue`: เมนูนำทางด้านล่างสำหรับหน้าจอมือถือ
   - `UserMenu.vue`: เมนู Dropdown จัดการบัญชีผู้ใช้
+  - `LanguageSwitcher.vue`: ปุ่มสลับภาษา (TH/EN) พร้อมดีไซน์ที่รองรับ Dark Mode
 - **Cards & Display:**
   - `CourseCard.vue`: การ์ดแสดงข้อมูลคอร์ส (Updated: Clean Design, No Badge)
   - `UserAvatar.vue`: แสดงรูปโปรไฟล์ผู้ใช้ พร้อม Fallback
 - **Forms & Feedback:**
   - `FormInput.vue`, `LoadingSpinner.vue`, `LoadingSkeleton.vue`
 
+### `i18n/` (Localization)
+
+โฟลเดอร์เก็บไฟล์แปลภาษา:
+
+- `locales/`:
+  - `th.json`: ไฟล์รวมคำแปลภาษาไทย
+  - `en.json`: ไฟล์รวมคำแปลภาษาอังกฤษ
+
 ---
 
 ## 🔐 ระบบรักษาความปลอดภัยและ Logic พิเศษ (Core Logic)
@@ -109,3 +119,10 @@
 - **Dynamic Detail View:** เพิ่มระบบดึงข้อมูลรายคอร์ส (`/api/courses/{id}`) เมื่อคลิก "ดูรายละเอียด"
 - **New Composable:** สร้าง `useCourse.ts` เพื่อจัดการ Logic การดึงข้อมูลคอร์สแยกออกมาให้เป็นระเบียบ
 - **Updated Course Card:** รองรับการแสดงผลรูปภาพปกคอร์ส (`thumbnail_url`) และราคาจริงจาก API
+
+### 5. **Internationalization (i18n) Implementation**
+
+- **Full Language Support:** ติดตั้งและตั้งค่า `@nuxtjs/i18n` รองรับ 2 ภาษา (ไทย/อังกฤษ)
+- **Locale Management:** แยกไฟล์คำแปลเป็น `locales/th.json` และ `locales/en.json` เพื่อง่ายต่อการแก้ไข
+- **Dynamic Translation:** เปลี่ยนข้อความ Static ทั้งหมดในหน้า `Dashboard`, `Discovery`, `My Courses`, `Profile` และ `Sidebar` ให้ใช้ `$t(...)`
+- **Language Switcher:** เพิ่มปุ่มสลับภาษาที่ Header/Sidebar พร้อมจำค่าภาษาที่เลือกไว้