homaroma/goal.section.md

# ระบบ CMS Pages และ Section Block ของ DBK Platform

> **Platform scope:** HomAroma content blocks are reference-tenant examples, not a restriction on tenant verticals.

## การทำงานของระบบ CMS Pages และ Section Block

ระบบนี้ออกแบบมาในรูปแบบของ **Dynamic Page Builder** หรือ **Headless CMS** ที่ให้ผู้ใช้งานสามารถประกอบหน้าเว็บ (Page) ได้เองโดยการเรียงต่อ Block (Section) ต่างๆ เข้าด้วยกัน โดยมีโครงสร้างการทำงานหลักๆ ดังนี้:

1. **Database Structure**:
   - `Page`: เก็บข้อมูลพื้นฐานของหน้าเว็บ เช่น `slug`, `title`, สถานะการเผยแพร่ เป็นต้น
   - `PageSection`: เก็บข้อมูลของแต่ละ Block ภายในหน้านั้นๆ โดยมีความสัมพันธ์แบบ 1-to-many กับ `Page` (1 หน้ามีได้หลาย Section)

2. **การจัดเก็บข้อมูล (Data Storage)**:
   - แต่ละ `PageSection` จะมีฟิลด์ `type` เพื่อระบุว่า Block นี้คือ Component อะไร (เช่น `HERO`, `TEXT`, `PRODUCTS`)
   - ข้อมูลเนื้อหาและตั้งค่าของแต่ละ Block จะถูกเก็บไว้ในฟิลด์ `payload` ในรูปแบบ **JSON** ซึ่งทำให้มีความยืดหยุ่นสูง สามารถรองรับโครงสร้างข้อมูลที่แตกต่างกันของแต่ละ Block ได้โดยไม่ต้องแก้ Schema ฐานข้อมูล

3. **โครงสร้างของ Payload**:
   - `localized string`: รองรับหลายภาษา มักจะเป็น Object เช่น `{ "th": "...", "en": "..." }`
   - `plain string`: ค่าข้อความธรรมดาที่ไม่ต้องแปล
   - `optional`: ข้อมูลที่สามารถเว้นว่างได้

---

## รายการ Section Block ทั้งหมด (17 Blocks)

ปัจจุบันระบบรองรับ Block Section ทั้งหมด 17 ประเภท โดยแต่ละประเภทมีค่า (Payload) ดังต่อไปนี้:

### 1. `HERO`
- **หน้าที่**: แบนเนอร์หลักขนาดใหญ่สำหรับส่วนบนสุดของหน้า (เหมาะสำหรับหน้าแรกหรือแคมเปญ)
- **ค่าใน Payload**:
  - `tagline` (localized string)
  - `title` (localized string)
  - `description` (localized string)
  - `imageUrl` (plain string)
  - `buttonText` (localized string)
  - `buttonLink` (plain string)

### 2. `BANNER`
- **หน้าที่**: รูปภาพแบนเนอร์แนวนอนพร้อมปุ่มกด (Call to Action)
- **ค่าใน Payload**:
  - `imageUrl` (plain string)
  - `linkUrl` (plain string)
  - `title` (localized string) *optional*
  - `description` (localized string) *optional*
  - `buttonText` (localized string) *optional*

### 3. `TEXT`
- **หน้าที่**: Block สำหรับแสดงข้อความธรรมดา
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `content` (localized string)
  - `textAlign` (plain string) *optional*: `left`, `center`, `right`

### 4. `ANNOUNCEMENT_BAR`
- **หน้าที่**: แถบประกาศข้อความด้านบนสุดที่สามารถเลื่อน (Rotate) ได้
- **ค่าใน Payload**:
  - `slides` (array of localized strings)
  - `backgroundColor` (plain string) *optional*
  - `textColor` (plain string) *optional*
  - `speed` (number) *optional*

### 5. `NEWSLETTER`
- **หน้าที่**: ฟอร์มรับสมัครรับข่าวสาร (Newsletter)
- **ค่าใน Payload**:
  - `title` (localized string)
  - `description` (localized string)
  - `buttonText` (localized string)
  - `placeholderText` (plain string) *optional*
  - `showPrivacyCheckbox` (boolean)
  - `privacyText` (plain string) *optional*

### 6. `EDITORIAL_TILE`
- **หน้าที่**: แสดงเนื้อหาแบบช่องภาพคู่กับข้อความ (Side-by-side)
- **ค่าใน Payload**:
  - `title` (localized string)
  - `description` (localized string)
  - `imageUrl` (plain string)
  - `imagePosition` (plain string): `left` หรือ `right`
  - `buttonText` (plain string) *optional*
  - `buttonLink` (plain string) *optional*
  - `backgroundColor` (plain string) *optional*
  - `textColor` (plain string) *optional*

### 7. `EDITORIAL_CAROUSEL`
- **หน้าที่**: สไลด์แสดงเนื้อหาบทความแบบเรื่องราว (Storytelling)
- **ค่าใน Payload**:
  - `title` (localized string)
  - `slides` (array of objects): แต่ละสไลด์มี
    - `category` (localized string)
    - `title` (localized string)
    - `description` (localized string)
    - `imageUrl` (plain string)
    - `buttonText` (plain string) *optional*
    - `buttonLink` (plain string) *optional*

### 8. `PRODUCTS`
- **หน้าที่**: แสดงรายการสินค้าแบบ Grid หรือลิสต์
- **ค่าใน Payload**:
  - `title` (localized string)
  - `subtitle` (localized string) *optional*
  - `type` (plain string): `featured`, `scent`, หรือ `custom`
  - `scentId` (number) *optional*
  - `productIds` (array of numbers) *optional*
  - `limit` (number) *optional*
  - `layout` (plain string) *optional*: `grid` หรือ `carousel`
  - `enableQuickShop` (boolean) *optional*

### 9. `CATEGORIES`
- **หน้าที่**: แสดงหมวดหมู่สินค้า
- **ค่าใน Payload**:
  - `title` (localized string)
  - `subtitle` (localized string) *optional*
  - `categoryIds` (array of numbers) *optional*

### 10. `HERO_ARTICLE`
- **หน้าที่**: ส่วนหัวของบทความ (Article Header)
- **ค่าใน Payload**:
  - `title` (localized string)
  - `subtitle` (localized string) *optional*
  - `author` (localized string) *optional*
  - `category` (localized string) *optional*
  - `publishDate` (plain string) *optional*
  - `date` (plain string) *optional*
  - `imageUrl` (plain string)
  - `backgroundImageUrl` (plain string) *optional*
  - `overlayColor` (plain string) *optional*

### 11. `RICH_TEXT`
- **หน้าที่**: Block สำหรับเนื้อหาแบบ HTML ที่สามารถจัดรูปแบบได้
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `content` (localized string) *required* (รองรับ HTML)

### 12. `SCENT_NOTES_BREAKDOWN`
- **หน้าที่**: อธิบายเลเยอร์ของกลิ่นน้ำหอม (Top, Heart/Middle, Base Notes)
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `description` (localized string) *optional*
  - `topNotes` (array of strings or localized string objects)
  - `heartNotes` (array of strings or localized string objects) *หมายเหตุ: ผูกรวมกับ middleNotes*
  - `middleNotes` (array of strings or localized string objects)
  - `baseNotes` (array of strings or localized string objects)

### 13. `QUOTE_CALLOUT`
- **หน้าที่**: แสดงคำคมหรือข้อความเน้นพิเศษ
- **ค่าใน Payload**:
  - `quote` (localized string) *required*
  - `author` (localized string) *optional*
  - `role` (localized string) *optional*

### 14. `PRODUCT_CAROUSEL`
- **หน้าที่**: แสดงสินค้าที่แนะนำในรูปแบบ Carousel
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `description` (localized string) *optional*
  - `collectionId` (plain string) *optional*
  - `limit` (number) *optional*
  - `showPrice` (boolean) *optional*
  - `showAddToCart` (boolean) *optional*
  - `products` (optional explicit product list)

### 15. `ACCORDION`
- **หน้าที่**: แสดงข้อมูลแบบถาม-ตอบ หรือเนื้อหาที่พับเก็บได้ (FAQ)
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `categories` (*required* array): แต่ละหมวดหมู่มี
    - `name` (localized string)
    - `icon` (plain string) *optional*
    - `questions` (*required* array): แต่ละคำถามมี
      - `q` (localized string)
      - `a` (localized string)

### 16. `CONTACT_INFO`
- **หน้าที่**: แสดงข้อมูลการติดต่อ (ที่อยู่, อีเมล, Line ฯลฯ)
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `address` (localized string) *required*
  - `email` (plain string) *required*
  - `line` (plain string) *required*
  - `hours` (localized string) *required*

### 17. `CONTACT_FORM`
- **หน้าที่**: ส่วนหัวสำหรับแบบฟอร์มการติดต่อ
- **ค่าใน Payload**:
  - `title` (localized string) *optional*
  - `subtitle` (localized string) *optional*