www / admin-web 폴더 재구성 기획서
목적: apps/www를 랜딩·마케팅 전용으로 전환하고, 테넌트 관리(로그인, 온보딩, 빌링, 프로필 등) 페이지는 apps/admin-web으로 분리. 각각 Cloudflare Pages에 별도 배포.
범위: 폴더 구조, 파일 이동, 배포 연동, 플로우 설계. 코드 생성은 별도 단계.
1. 개요
| 사이트 | 경로 | 용도 | Cloudflare Pages | 도메인(예정) |
|---|
| www | apps/www | 랜딩 페이지, 마케팅, 패키지 선택 | prego-www.pages.dev | www.pregoi.com |
| admin-web | apps/admin-web | 로그인·온보딩·빌링·프로필 등 tenant admin 전체 | prego-admin.pages.dev | admin.pregoi.com 등 |
2. www (apps/www) — 랜딩·마케팅·패키지 선택
2.1 유지·배치할 내용
- 패키지 선택 페이지 — 현재
index.html의 Step 1(패키지 선택) 유지
- 랜딩·마케팅 페이지 — 신규 또는 기존 구조 재구성
- 공통 에셋 —
locale.js, styles.css(필요 부분), functions/api/country.js 등
2.2 www에 남길 파일
| 파일 | 역할 |
|---|
index.html | 랜딩 + 패키지 선택 (Step 1만 또는 별도 페이지) |
locale.js | 언어·국가 선택 (공통) |
styles.css | www 전용 스타일 (또는 공유 스타일 경량화) |
functions/api/country.js | IP 기반 국가 조회 (CF Pages Function) |
api.js | 패키지 선택 시 필요한 최소 API (예: checkSubdomainAvailable, 기타) |
README.md | www 전용 설명 |
2.3 www에서 제거·이동할 항목
app.js — 온보딩 위저드 로직 → admin-web으로 이동
signup.html, signup-verify.html → admin-web으로 이동
dashboard.html → admin-web으로 이동
billing.html → admin-web으로 이동
2.4 패키지 선택 후 플로우
패키지 선택 완료 시 admin-web으로 이동:
www (prego-www.pages.dev) → 패키지 선택 → admin-web (prego-admin.pages.dev)?plan=basic®ion=sg ...
선택한 plan, region 등을 쿼리 파라미터 또는 sessionStorage/localStorage로 전달.
3. admin-web (apps/admin-web) — 신규 폴더
3.1 생성 경로
3.2 이동·구성할 파일
| 기존 (www) | admin-web |
|---|
app.js | app.js |
api.js | api.js (전체 또는 tenant admin용 분리) |
locale.js | locale.js (복사 또는 공유) |
styles.css | styles.css (온보딩·대시보드·빌링용) |
signup.html | signup.html |
signup-verify.html | signup-verify.html |
dashboard.html | dashboard.html |
billing.html | billing.html |
| (index.html Step 2~6) | index.html — 로그인, 온보딩 위저드 Step 2~6, 프로비저닝 대기 |
3.3 admin-web 페이지 목록
| 페이지 | 경로 | 역할 |
|---|
| 온보딩·위저드 | index.html | Step 2 로그인 → Step 3 결제 → Step 4 테넌트 정보 → Step 5 확인 → Step 6 프로비저닝 |
| 회원가입 | signup.html | 이메일·Google 가입 |
| 이메일 인증 | signup-verify.html | OTP 검증 (fallback) |
| 대시보드 | dashboard.html | 테넌트 관리 대시보드 |
| 결제 정보 | billing.html | 플랜·결제 수단·인보이스 |
| 프로필 | profile.html | (신규 또는 기존 확장) 사용자 프로필 |
3.4 admin-web 환경 변수·API
window.PREGO_CONTROL_PLANE_URL
window.PREGO_AUTH_URL
window.PREGO_BILLING_PROXY_URL
window.PREGO_ADMIN_BASE_URL — admin-web 자신의 base URL (선택)
www에서 전달받은 plan, region을 쿼리 또는 localStorage에서 읽어 위저드 초기 상태로 사용.
4. Cloudflare Pages 배포
- 프로젝트: Cloudflare Pages —
prego-www (또는 기존 프로젝트)
- 빌드 소스:
Prego 레포, 브랜치 main (또는 지정)
- 빌드 설정:
- Root directory:
apps/www
- Build command: (없음 또는
echo "Static")
- Build output:
. (정적)
- 출력 URL: https://prego-www.pages.dev/
- 커스텀 도메인(예정): www.pregoi.com
4.2 admin-web (prego-admin.pages.dev)
- 프로젝트: Cloudflare Pages —
prego-admin (신규)
- 빌드 소스:
Prego 레포
- 빌드 설정:
- Root directory:
apps/admin-web
- Build command: (없음)
- Build output:
.
- 출력 URL: https://prego-admin.pages.dev/
- 커스텀 도메인(예정): admin.pregoi.com
5. 사용자 플로우
1. 사용자 접속: www.pregoi.com (또는 prego-www.pages.dev)
2. 패키지 선택 후: "시작하기" / "Select Basic" 등 클릭
→ prego-admin.pages.dev?plan=basic®ion=sg (또는 admin.pregoi.com) 리다이렉트
3. admin-web: 로그인/회원가입 → 결제(유료 시) → 테넌트 정보 → 제출 → 프로비저닝 대기
4. 완료 후: 대시보드, 빌링, 프로필 등 tenant admin 기능 이용
6. 폴더 구조 (목표)
│ ├── www/ # 랜딩·마케팅·패키지 선택
│ │ ├── index.html # 랜딩 + 패키지 선택
│ │ ├── api.js # 패키지 선택용 최소 API
│ └── admin-web/ # 테넌트 관리 (신규)
│ ├── index.html # 온보딩 위저드 (Step 2~6)
│ ├── profile.html # (선택)
│ ├── functions/ # 필요 시 country 등
7. 적용 순서
| Phase | 작업 |
|---|
| 1 | apps/admin-web 폴더 생성 |
| 2 | admin-web으로 이동: app.js, signup.html, signup-verify.html, dashboard.html, billing.html |
| 3 | www index.html 축소: 패키지 선택(Step 1)만 유지, admin-web 리다이렉트 링크 추가 |
| 4 | admin-web index.html 구성: Step 2~6 위저드, www에서 전달된 plan/region 사용 |
| 5 | api.js 분리: www용 최소 API vs admin-web용 전체 API |
| 6 | Cloudflare Pages에 prego-admin 프로젝트 생성 및 배포 설정 |
| 7 | 링크·리다이렉트 경로 수정 (www ↔ admin-web) |
| 8 | README, docs/runbook 업데이트 |
8. 참조