หน้าทดลอง/Sandbox

ภาพรวม

เอกสารนี้รวบรวมเส้นทางในแอปที่ไม่ใช่ฟีเจอร์สำหรับผู้ใช้จริง แต่มีอยู่ในโค้ดและถูก deploy ออกไปพร้อมกับแอป ใช้สำหรับทดลองคอมโพเนนต์ของ Ant Design และทดสอบ ระบบติดตามข้อผิดพลาด

warning

เส้นทางเหล่านี้ ควรพิจารณาถอดออกก่อนขึ้น production เพราะไม่มีการป้องกัน การเข้าถึงเลย ใครที่ทราบ URL ก็เปิดดูได้

Business Flow

Playground ของ Ant Design (/antd)

1. เส้นทาง /antd แสดงหน้าภาพรวมที่รวมรายการคอมโพเนนต์ซึ่งมีตัวอย่างให้ดู
2. ส่วนนี้มีโครงหน้าของตัวเอง ประกอบด้วยแถบเมนูด้านข้างแยกจากโครงของแอปจริง และไฮไลต์เมนูตามเส้นทางที่กำลังเปิดอยู่
3. /antd/drawer — ตัวอย่างการใช้ Drawer ที่ปรับขนาดได้และเลือกทิศทาง การเปิดออกได้
4. /antd/form-drag-drop — ตัวอย่างรายการช่องกรอกแบบเพิ่มลดได้ ซึ่งลากเพื่อจัดลำดับได้ โดยมีทั้งเวอร์ชันหลักและเวอร์ชันทางเลือกที่เรียบง่ายกว่าให้เทียบกัน

เส้นทางทดสอบข้อผิดพลาด

/api/sentry-example-api เป็น Route Handler ที่ โยนข้อผิดพลาดทันที เมื่อถูกเรียก มีไว้เพื่อทดสอบว่าระบบติดตามข้อผิดพลาดจับ error ฝั่ง server ได้จริง

ปัจจุบันถือเป็น dead code ที่เหลือมาจาก template ของ Sentry เพราะไลบรารีของ Sentry ถูกถอดออกจากโปรเจกต์ไปแล้ว จึงไม่มีระบบใดรับข้อผิดพลาดที่เส้นทางนี้โยนออกมาอีก

หน้าจอและองค์ประกอบหลัก

• หน้าภาพรวม (src/app/antd/page.tsx) — รายการคอมโพเนนต์ที่มีตัวอย่าง
• โครงหน้าของ playground (src/app/antd/layout.tsx) — แถบเมนูด้านข้างและ การไฮไลต์เมนูตามเส้นทางปัจจุบัน
• ตัวอย่าง Drawer (src/app/antd/drawer/page.tsx)
• ตัวอย่างรายการที่ลากจัดลำดับได้ (src/app/antd/form-drag-drop/page.tsx) พร้อมคอมโพเนนต์ประกอบใต้โฟลเดอร์เดียวกัน ได้แก่ รายการช่องกรอกแบบเพิ่มลดได้ รายการที่ลากได้แบบทั่วไป และรายการเวอร์ชันเรียบง่าย
• เส้นทางทดสอบข้อผิดพลาด (src/app/api/sentry-example-api/route.ts)

จุดเชื่อมต่อกับฟีเจอร์อื่น

• Ant Design 6 — ใช้คอมโพเนนต์ Layout, Menu, Drawer, Radio, Flex, Typography และ Card
• ไม่ผูกกับ LIFF ไม่เรียก API ของระบบ และไม่ใช้ store ใด ๆ จึงถอดออกได้ โดยไม่กระทบฟีเจอร์อื่น
• ไม่มีการตรวจสิทธิ์เข้าถึง — เป็นเหตุผลหลักที่ควรถอดออกก่อนขึ้นใช้งานจริง