Skip to content
Prego Prego Docs

English {#english}

Preview changed OTP email template (apps/auth-worker/src/email-otp-template.ts) without sending real mail.

Save generated HTML to a file and open in a browser.

  1. From auth-worker directory:
    Terminal window
    cd apps/auth-worker
    npx tsx scripts/preview-otp-email.ts
  2. Open output file: apps/auth-worker/preview-otp-email.html (e.g. open preview-otp-email.html).
  3. Content: All locales (en, ko, ja, zh, vi, ar) are shown in one page by section.

Requirements: Node.js 18+ (20+ recommended), npx tsx available. If missing: npm i -D tsx.

Method 2: Verify via real OTP email

Send a test OTP request and check layout in the received email (set OTP_TEST_EMAILS in Worker, add USER_MAP KV, then trigger OTP from client or Control Plane email flow dashboard).

Method 3: Single locale

Modify the script to accept a locale argument and output one HTML for that locale only.

References: Template source apps/auth-worker/src/email-otp-template.ts; otp-email-newline-cap-and-link-position-plan. Add preview-otp-email.html to .gitignore.

한국어 {#korean}

OTP 이메일 템플릿 미리보기

변경된 OTP 이메일 템플릿(apps/auth-worker/src/email-otp-template.ts)을 실제 메일을 보내지 않고 미리 보는 방법.

방법 1: 로컬 HTML 파일로 미리보기 (권장)

템플릿에서 생성된 HTML을 파일로 저장한 뒤 브라우저에서 연다.

  1. auth-worker 디렉터리에서 실행:
    Terminal window
    cd apps/auth-worker
    npx tsx scripts/preview-otp-email.ts
  2. 출력된 파일 열기:
    • 생성 파일: apps/auth-worker/preview-otp-email.html
    • 브라우저에서 해당 파일을 연다 (예: open preview-otp-email.html 또는 파일 더블클릭).
  3. 내용: 모든 locale( en, ko, ja, zh, vi, ar )에 대한 제목·본문 HTML이 한 페이지에 섹션별로 표시된다.

필요 조건: Node.js 18+ (또는 20+ 권장), npx tsx 사용 가능. tsx가 없으면 npm i -D tsx 후 다시 실행.

방법 2: 실제 OTP 메일 수신으로 확인

테스트용 이메일로 실제 OTP 요청을 보내서 수신 메일에서 레이아웃을 확인한다.

  1. Auth Worker에 테스트 이메일 설정
    • Cloudflare Dashboard → Workers & Pages → prego-auth-worker → Settings → Variables
    • OTP_TEST_EMAILS에 확인용 주소 추가 (쉼표 구분, 예: your-test@gmail.com).
  2. **USER_MAP(KV)**에 해당 이메일 등록
    • 키: user:map:your-test@gmail.com
    • 값(JSON): { "tenant_id", "slug", "employee_id", "status" } 필수. 프로필·홈에 사용자 이름을 표시하려면 name(Employee 이름) 포함 권장. 예: { "tenant_id": "t1", "slug": "default", "employee_id": "emp-001", "status": "active", "name": "홍길동" }
  3. OTP 요청
    • 클라이언트에서 로그인 시 해당 이메일로 OTP 요청
    • 또는 Control Plane 이메일 플로우 대시보드(prego-control-plane-dashboard §이메일 플로우 검증)에서 플로우 B(OTP) 탭으로 요청.
  4. 수신 메일에서 제목·본문·줄바꿈·링크 위치 확인.

이 방법은 실제 발송 경로(Auth Worker → Zuplo Email API → Queue → Mail sender)까지 포함한 최종 결과를 보여준다.

방법 3: 특정 locale만 빠르게 보고 싶을 때

방법 1 스크립트를 수정해, 원하는 locale만 인자로 받아서 한 개 HTML로 출력하도록 할 수 있다. 필요하면 preview-otp-email.ts에 process.argv로 locale을 받는 분기를 추가하면 된다.

참고

  • 템플릿 소스: apps/auth-worker/src/email-otp-template.ts
  • 뉴라인·링크 위치 기획: otp-email-newline-cap-and-link-position-plan
  • preview-otp-email.html은 git에서 제외해 두는 것을 권장(.gitignore에 preview-otp-email.html 추가).
Help