Skip to content
Prego Prego Docs

English {#english}

Deploy client-web with OTP verification screen to x.pregoi.com. Full steps (build, deploy, env vars, verification): see Korean section below.

한국어 {#korean}

Runbook: client-web 배포 (x.pregoi.com OTP 검증 화면 반영)

목적: OTP 입력 UI 개선(6칸 숫자 노출, 붙여넣기, 에러 시 초기화, 이메일/코드 정규화)이 반영된 client-web을 x.pregoi.com 등 상용에 배포할 때 확인 절차.
참조: otp-input-ui-improvement-plan.md, opsfork-production-welcome-email-and-kv-runbook.md §2.1.

1. 배포 전 확인

  • 코드: apps/client-web 에 다음이 포함되어 있는지 확인.
    • components/passcode/otp-digit-boxes.tsx (6칸 숫자 노출)
    • components/passcode/code-entry-form.tsx — masked prop, CodeEntryFormRef.reset()
    • app/[companyId]/[lang]/auth/verify-email/page.tsx — masked={false}, formRef, 에러 시 formRef.current?.reset(), email/code 정규화(소문자·숫자 6자리). OTP·Passcode 플로우 개선(기획서 otp-verify-and-passcode-flow-check-plan): API URL 미설정 시 안내 메시지, 성공 시 employee_id sessionStorage 저장, 네트워크 에러 메시지 구분, slug fallback.
    • app/[companyId]/[lang]/passcode/set/page.tsx — employee_id 없을 때 “Session expired” + Back to sign in, AUTH_EMPLOYEE_ID_KEY 사용. i18n: passcode.sessionExpired, passcode.backToSignIn (en/ko/zh/ja/ar/vi).

2. 빌드

Terminal window
cd /path/to/Prego/apps/client-web
pnpm install   # 또는 npm install
pnpm build     # 또는 npm run build
  • 상용 환경 변수: 빌드 시 NEXT_PUBLIC_API_URL 이 상용 Zuplo Gateway URL(예: https://prego-main-xxx.zuplo.app)로 설정되어 있어야 함. (Vercel/Cloudflare Pages 등에서는 프로젝트 환경 변수에서 설정.)

3. 배포

  • x.pregoi.com 에 실제로 서빙하는 방법(Vercel, Cloudflare Pages, S3+CloudFront 등)에 따라 해당 플랫폼의 배포 절차를 따름.
  • 최신 main(또는 해당 브랜치) 기준 빌드 산출물을 상용 환경에 배포.

4. 배포 후 검증

다음 URL로 접속하여 확인:

https://x.pregoi.com/default/en/auth/verify-email?email=opsfork@gmail.com

확인 항목기대 결과
화면OTP 6자리 입력 화면(로그인 화면이 아님).
입력 UI6개의 칸에 숫자가 보임(점 마스킹이 아님).
붙여넣기6자리 복사 후 붙여넣기 시 칸에 채워지고 자동 제출 가능.
에러 시잘못된 OTP 입력 후 에러 메시지 표시 시 6자리가 비워지고 첫 칸에 포커스.
올바른 OTP이메일로 받은 6자리 입력 시 통과(패스코드 설정 등 다음 단계로 이동).

5. 문제 시

  • 숫자 안 보임 / 초기화 안 됨 → 상용에 이 runbook 기준 최신 client-web이 배포되지 않은 것. 빌드·배포 재확인.
  • 올바른 OTP인데 틀림 → opsfork-production-welcome-email-and-kv-runbook.md 참고. 이메일 소문자·OTP 만료·AUTH_STORE(KV)에 해당 이메일 OTP 존재 여부, Zuplo/Auth Worker URL 확인.
Help