หน้าไม่พบข้อมูล (404)

ภาพรวม

เอกสารนี้อธิบายหน้า 404 กลางของแอป และชุด "หน้าจอสถานะ" ที่แต่ละฟีเจอร์เลือกใช้ เมื่อไม่พบข้อมูลที่ต้องการ

เนื่องจากเว็บฝั่งผู้ใช้ไม่มีการตรวจสิทธิ์เข้าถึงเส้นทางที่ฝั่ง server (ไม่มี route guard) หน้าจอเหล่านี้จึงเป็นทางออกหลักเวลาที่ token หรือ hash ไม่ถูกต้อง หรือ API ตอบกลับว่าไม่มีสิทธิ์ — พูดอีกอย่างคือ การตรวจสิทธิ์เกิดขึ้น ตอนเรียก API แล้วผลลัพธ์จะสะท้อนออกมาเป็นหน้าจอเหล่านี้

Business Flow

1. หน้าใดก็ตามที่พบว่าข้อมูลไม่มีอยู่จริงจะเรียกกลไก not found ของ Next.js ตัวอย่างเช่น หน้าแรกของ OA เมื่อไม่พบโปรไฟล์ หน้าบทความเมื่อเกิดข้อผิดพลาด ที่ไม่ใช่เรื่องสิทธิ์ และหน้าเมนูเมื่อโหลดข้อมูลไม่สำเร็จ

2. เส้นทาง /404 เรนเดอร์หน้า 404 กลาง ซึ่งออกแบบเป็นพื้นหลัง gradient โทนฟ้าเขียว พร้อมรูปทรงเรขาคณิตที่เคลื่อนไหวเบา ๆ มีปุ่มกลับหน้าแรกและปุ่มย้อนกลับ เพื่อให้ผู้ใช้ไม่ติดตัน

3. บางฟีเจอร์เลือกใช้หน้าจอสถานะเฉพาะทางแทนหน้า 404 กลาง เพราะสื่อความหมาย ได้ตรงกว่าและคงบรรยากาศของฟีเจอร์นั้นไว้:

   ฟีเจอร์	หน้าจอที่ใช้
   ระบบฟอร์ม	หน้าไม่พบข้อมูลของฟอร์ม ซึ่งใช้ข้อความไทยและธีมเดียวกับตัวฟอร์ม
   บทความ/หน้าเนื้อหา	หน้าปฏิเสธการเข้าถึง ใช้กับกรณีไม่มีสิทธิ์
   รายการลิงก์เนื้อหา	ข้อความแจ้งในหน้าว่าไม่พบลิงก์ที่ร้องขอ
   บอร์ดประกาศ	หน้าจอสถานะรวมที่รองรับหลายกรณี ทั้งกำลังโหลด ว่างเปล่า ไม่พบข้อมูล เซสชันหมดอายุ ไม่มีสิทธิ์ดู และเกิดข้อผิดพลาด
   บัตรสะสมแต้ม	หน้าจอให้เข้าสู่ระบบอีกครั้ง

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

• เส้นทาง 404 (src/app/404/page.tsx) — จุดเข้าของหน้า 404 กลาง
• หน้า 404 กลาง (src/components/layout-app/not-found-app.tsx) — งานออกแบบจริง รวมถึงตัวจัดการปุ่มกลับหน้าแรกและปุ่มย้อนกลับ
• หน้าจอสถานะเฉพาะทางของแต่ละฟีเจอร์:
  • ระบบฟอร์ม — src/components/form-builder/layout/not-found.tsx
  • บอร์ดประกาศ — src/app/[hash]/bulletin/components/EmptyBoard.tsx
  • บัตรสะสมแต้ม — src/app/[hash]/loyalty/components/SignInAgain.tsx
  • หน้าเนื้อหา — src/components/content-viewer/AccessDenied.tsx

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

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

• กลไก not found ของ Next.js — เป็นตัวเชื่อมระหว่างหน้าฟีเจอร์กับหน้า 404 กลาง
• Tailwind CSS — ใช้กับเอฟเฟกต์เคลื่อนไหวและ gradient ของหน้า 404 กลาง
• ไม่มีการเรียก API ใด ๆ ในหน้าเหล่านี้ ทั้งหมดเรนเดอร์จากสถานะที่ได้รับมาแล้ว