K Yami

# 📖 K YAMI — Premium Manga & Manhwa Reader Platform **K YAMI** คือแพลตฟอร์มสำหรับอ่านมังงะ (Manga), มันฮวา (Manhwa), มันฮัว (Manhua) และเว็บตูน (Webtoon) ระดับพรีเมียมที่ถูกสร้างขึ้นเพื่อมอบประสบการณ์การอ่านที่ดีที่สุด ไร้สิ่งรบกวน และลื่นไหลเป็นธรรมชาติ ออกแบบบนพื้นฐาน **Apple Human Interface Guidelines (Cupertino Aesthetics)** ผสานพลังของ **Next.js 16**, **React 19**, **Tailwind CSS v4** และ **Supabase** --- ## ✨ ไฮไลต์และฟีเจอร์เด่น (Key Features) ### 1. 📱 Apple-Inspired Design & Thumb-Friendly UX - **Apple Aesthetics**: สไตล์มินิมอล กระจกฝ้า Frosted Glass (Glassmorphism), เส้นสายโค้งมน และแอนิเมชัน Spring Physics ที่นุ่มนวล - **Dynamic Theming**: สลับธีม สว่าง (Light), มืด (Dark) และ **OLED True Black** (#000000) ถนอมสายตาและประหยัดพลังงานบนหน้าจอ OLED - **Mobile First & Thumb Navigation**: บาร์เมนูด้านล่างออกแบบตามหลักสรีรศาสตร์ จับถือและควบคุมด้วยนิ้วโป้งมือเดียวได้อย่างคล่องตัว ### 2. ⚡ Next-Gen Reading Engine (ระบบการอ่านอัจฉริยะ) - **โหมดการอ่านคู่ (Dual Reading Modes)**: - *Webtoon Continuous Scroll*: อ่านแนวตั้งต่อเนื่องแบบไร้รอยต่อ - *Paged Horizontal Reader*: อ่านทีละหน้าแบบแนวนอนสไตล์หนังสือการ์ตูนคลาสสิก - **Customizable Canvas**: - เลือกความกว้างหน้ากระดาษ: Compact (กระชับ), Comfortable (สบายตา), Full (เต็มจอ) - ปรับระยะห่างระหว่างหน้า (Gap): ไม่มีช่องว่าง (Seamless), เล็ก (Small), ปานกลาง (Medium) - พื้นหลังแคนวาส: ดำสนิท (OLED Black), ดาร์กโหมด (Deep Dark), สว่าง (Light) - **Smart Auto-Hide**: แถบควบคุมและเมนูจะซ่อนอัตโนมัติเมื่อเลื่อนอ่านลง และปรากฏขึ้นเมื่อแตะหน้าจอหรือเลื่อนย้อนขึ้น - **Reading Progress Tracker**: เส้นวัดเปอร์เซ็นต์ความคืบหน้าการอ่านแบบ Real-time - **Keyboard Shortcuts สำหรับคอมพิวเตอร์**: - `F` : เปิด/ปิด เต็มจอ (Fullscreen) - `S` : เปิดหน้าต่างตั้งค่าการอ่าน (Settings Sheet) - `B` : บันทึก/นำออกจากคลัง (Quick Bookmark) - `J` / `K` หรือลูกศร ขึ้น/ลง : เลื่อนหน้าจอแบบสมูท - `[` / `]` : ข้ามไปยังตอนก่อนหน้า / ตอนถัดไป - `0` หรือ `Home` : เลื่อนกลับขึ้นบนสุด ### 3. 📚 คลังส่วนตัวและการจำสถานะ (Personal Library & Progress Sync) - **Continue Reading (อ่านค้างไว้)**: บันทึกตอนล่าสุดและจุดที่อ่านค้างไว้เป็นเปอร์เซ็นต์อัตโนมัติ กดอ่านต่อได้ทันทีจากหน้าแรก - **Library Categories**: จัดหมวดหมู่การติดตาม (กำลังอ่าน, วางแผนจะอ่าน, อ่านจบแล้ว, พักไว้ก่อน, เลิกอ่าน) - **Hybrid Synchronization**: รองรับการจำค่าทั้งแบบผู้ใช้ทั่วไป (LocalStorage) และเชื่อมต่อฐานข้อมูล Supabase สำหรับผู้ใช้ที่มีบัญชี ### 4. 🧭 สำรวจและค้นหา (Browse & Discovery) - **Hero Showcase**: แบนเนอร์สไลด์ไฮไลต์เรื่องเด่น พร้อมเอฟเฟกต์ภาพพื้นหลังเบลอ (Ambient Backdrop) และระบบตั้งเวลาเปลี่ยนสไลด์อัตโนมัติ (Timed Pagination) - **Advanced Filtering**: กรองผลงานตามประเภท (Manga, Manhwa, Manhua, Webtoon, Comic) และสถานะ (กำลังอัปเดต, จบแล้ว, พักเรื่อง) - **Dynamic Genre Cloud**: แถบหมวดหมู่ยอดนิยม และโมดอลหมวดหมู่ฉบับเต็มแยกตามธีม (แอ็กชัน, โรแมนติก, แฟนตาซี, เกิดใหม่ ฯลฯ) - **Fast Search**: ค้นหาทันทีตามชื่อเรื่อง, ผู้แต่ง, หรือแนวเรื่อง ### 5. 💬 สังคมและการโต้ตอบ (Community & Engagement) - **Chapter Reactions**: แสดงความรู้สึกท้ายตอนด้วยอีโมจิแอนิเมชัน (ชอบมาก, มันส์มาก, ยอดเยี่ยม, ประทับใจ, ตื่นเต้น) - **Manga & Chapter Comments**: ระบบแสดงความคิดเห็นพร้อมให้คะแนนดาว (Star Rating) - **ระบบความปลอดภัยและการคัดกรองเนื้อหา (Content Moderation)**: - *Automated Word Blacklist*: กรองคำหยาบและคำไม่เหมาะสมแบบไดนามิก - *Spam & Rate Limit Protection*: ป้องกันการสแปมคอมเมนต์ซ้ำถี่เกินไป - *Anti-Bot Honeypot*: กลไกดักจับบอทอัตโนมัติ - **Social Sharing**: ปุ่มแชร์ผ่าน Web Share API และคัดลอกลิงก์ 1-Click พร้อมแอนิเมชันแจ้งเตือน ### 6. 🌐 ระบบรองรับ 2 ภาษา (Bilingual Support) - สลับภาษาได้ทันทีระหว่าง **ภาษาไทย (TH)** และ **English (EN)** ทั่วทั้งระบบ ทั้งเมนู, การตั้งค่า, ทูลทิป และระบบหลังบ้าน ### 7. 🛠️ ระบบจัดการเนื้อหาหลังบ้าน (Admin CMS Dashboard) - **Overview Dashboard**: สรุปยอดรวมจำนวนมังงะ, ตอนที่เผยแพร่, ยอดเข้าอ่านสะสม และหมวดหมู่ทั้งหมด - **Manga Management**: เพิ่ม, แก้ไข, ลบมังงะ พร้อมระบบสร้าง Slug อัตโนมัติ, อัปโหลดหน้าปกและแบนเนอร์, กำหนดผู้แต่งและสำนักพิมพ์ - **Chapter Batch Uploader**: - อัปโหลดรูปภาพหลายไฟล์พร้อมกันแบบ Drag & Drop พร้อมแถบแสดงความคืบหน้า - หรือใส่ลิงก์รูปภาพหลาย URL บรรทัดต่อบรรทัด - จัดเรียงลำดับหน้าได้อิสระ - **Genre Taxonomy**: ระบบจัดการหมวดหมู่และแท็ก - **Banned Words Center**: เมนูจัดการคำต้องห้าม เพิ่ม/ลบ คำที่ต้องการบล็อกในระบบคอมเมนต์แบบ Real-time - **Security & RBAC**: ป้องกันหน้า Admin ด้วย Middleware และ Supabase Role-Based Access Control --- ## 🛠️ สถาปัตยกรรมเทคโนโลยี (Tech Stack) | ส่วนของระบบ | เทคโนโลยีที่เลือกใช้ | |---|---| | **Core Framework** | Next.js 16 (App Router, Turbopack, React 19, TypeScript 5) | | **Styling & Theme** | Tailwind CSS v4, Vanilla CSS Custom Properties | | **Animation Engine** | Framer Motion (Apple Easing Curve & Spring Dynamics) | | **Icons** | Lucide React | | **Database & Auth** | Supabase (PostgreSQL, Supabase Auth SSR, RLS, Storage) | | **Caching Layer** | Multi-tier In-memory Caching + Next.js Server Revalidation | | **SEO & Web Standard** | Dynamic Metadata, OpenGraph, Sitemap XML, Robots, PWA Manifest | --- ## 🗄️ โครงสร้างฐานข้อมูลหลัก (Database Schema) - `profiles`: ข้อมูลโปรไฟล์ผู้ใช้งาน และสิทธิ์ (Role: user / admin) - `manga`: ตารางมังงะหลัก (Slug, Title, Cover, Banner, Type, Status, Views, Authors) - `genres` & `manga_genres`: หมวดหมู่และการเชื่อมโยงแบบ Many-to-Many - `manga_chapters`: ข้อมูลตอน (Chapter number, Title, Slug) - `chapter_pages`: หน้าภาพในแต่ละตอน (Page number, Image URL, Dimensions) - `reading_history`: ประวัติการอ่าน (Last page, Scroll percentage, Completed flag) - `library_items`: บันทึกคลังส่วนตัว (Status: Reading / Plan / Completed, Favorite)