Skip to main content

ภาพรวม Frontend

CCR มี frontend 2 ตัว

ProjectAudienceหน้าที่
ccr-frontend-userCustomerหน้า public/customer สำหรับ search car, booking, login, payment, contact/profile
ccr-frontend-backofficeStaff/Adminระบบหลังบ้านสำหรับ operation, setting, users/roles, report

Pattern สำคัญ

  • ใช้ Next.js App Router
  • ใช้ hooks แยกตาม feature สำหรับเรียก API
  • Backoffice ใช้ permission จาก menu config เพื่อควบคุมการเห็นเมนู/action
  • Shared UI ควรใช้ wrapper components ใน @/components/common/ ตามกฎโปรเจกต์
  • API proxy/auth helper อยู่ใน lib/* และ app/api/*

API proxy

ทั้ง Backoffice และ Customer Web ใช้ apiClient ที่ baseURL: /api/proxy

ProjectAuth behavior
Backofficeใช้ NextAuth/Auth0 token และส่งผ่าน proxy ไป APIM
Customer Webใช้ Auth0/passwordless/social routes, cookie/session และ proxy refresh token เมื่อจำเป็น

Environment keys ที่ frontend ใช้

Keyใช้เพื่อ
BASE_API_URLbackend/APIM base URL ฝั่ง server route
APIM_SUBSCRIPTION_KEYsubscription key สำหรับเรียก APIM
AUTH0_DOMAINAuth0 tenant
AUTH0_CLIENT_IDAuth0 application client id
AUTH0_CLIENT_SECRETexchange token / passwordless
AUTH0_AUDIENCEaudience สำหรับ access token
AUTH0_REDIRECT_URIsocial/callback redirect
NEXT_PUBLIC_BASE_URLcallback/base URL ฝั่ง browser
NEXT_PUBLIC_BASE_PATHbase path helper