Skip to content

www / admin-web 폴더 재구성 기획서

목적: apps/www를 랜딩·마케팅 전용으로 전환하고, 테넌트 관리(로그인, 온보딩, 빌링, 프로필 등) 페이지는 apps/admin-web으로 분리. 각각 Cloudflare Pages에 별도 배포.
범위: 폴더 구조, 파일 이동, 배포 연동, 플로우 설계. 코드 생성은 별도 단계.


1. 개요

사이트경로용도Cloudflare Pages도메인(예정)
wwwapps/www랜딩 페이지, 마케팅, 패키지 선택prego-www.pages.devwww.pregoi.com
admin-webapps/admin-web로그인·온보딩·빌링·프로필 등 tenant admin 전체prego-admin.pages.devadmin.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.csswww 전용 스타일 (또는 공유 스타일 경량화)
functions/api/country.jsIP 기반 국가 조회 (CF Pages Function)
api.js패키지 선택 시 필요한 최소 API (예: checkSubdomainAvailable, 기타)
README.mdwww 전용 설명

2.3 www에서 제거·이동할 항목

  • app.js — 온보딩 위저드 로직 → admin-web으로 이동
  • signup.html, signup-verify.htmladmin-web으로 이동
  • dashboard.htmladmin-web으로 이동
  • billing.htmladmin-web으로 이동

2.4 패키지 선택 후 플로우

패키지 선택 완료 시 admin-web으로 이동:

www (prego-www.pages.dev) → 패키지 선택 → admin-web (prego-admin.pages.dev)?plan=basic&region=sg ...

선택한 plan, region 등을 쿼리 파라미터 또는 sessionStorage/localStorage로 전달.


3. admin-web (apps/admin-web) — 신규 폴더

3.1 생성 경로

Prego/apps/admin-web/

3.2 이동·구성할 파일

기존 (www)admin-web
app.jsapp.js
api.jsapi.js (전체 또는 tenant admin용 분리)
locale.jslocale.js (복사 또는 공유)
styles.cssstyles.css (온보딩·대시보드·빌링용)
signup.htmlsignup.html
signup-verify.htmlsignup-verify.html
dashboard.htmldashboard.html
billing.htmlbilling.html
(index.html Step 2~6)index.html — 로그인, 온보딩 위저드 Step 2~6, 프로비저닝 대기

3.3 admin-web 페이지 목록

페이지경로역할
온보딩·위저드index.htmlStep 2 로그인 → Step 3 결제 → Step 4 테넌트 정보 → Step 5 확인 → Step 6 프로비저닝
회원가입signup.html이메일·Google 가입
이메일 인증signup-verify.htmlOTP 검증 (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 배포

4.1 www (prego-www.pages.dev)

  • 프로젝트: 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&region=sg (또는 admin.pregoi.com) 리다이렉트
3. admin-web: 로그인/회원가입 → 결제(유료 시) → 테넌트 정보 → 제출 → 프로비저닝 대기
4. 완료 후: 대시보드, 빌링, 프로필 등 tenant admin 기능 이용

6. 폴더 구조 (목표)

Prego/
├── apps/
│ ├── www/ # 랜딩·마케팅·패키지 선택
│ │ ├── index.html # 랜딩 + 패키지 선택
│ │ ├── locale.js
│ │ ├── api.js # 패키지 선택용 최소 API
│ │ ├── styles.css
│ │ ├── functions/
│ │ │ └── api/
│ │ │ └── country.js
│ │ └── README.md
│ │
│ └── admin-web/ # 테넌트 관리 (신규)
│ ├── index.html # 온보딩 위저드 (Step 2~6)
│ ├── signup.html
│ ├── signup-verify.html
│ ├── dashboard.html
│ ├── billing.html
│ ├── profile.html # (선택)
│ ├── app.js
│ ├── api.js
│ ├── locale.js
│ ├── styles.css
│ ├── functions/ # 필요 시 country 등
│ │ └── api/
│ │ └── country.js
│ └── README.md

7. 적용 순서

Phase작업
1apps/admin-web 폴더 생성
2admin-web으로 이동: app.js, signup.html, signup-verify.html, dashboard.html, billing.html
3www index.html 축소: 패키지 선택(Step 1)만 유지, admin-web 리다이렉트 링크 추가
4admin-web index.html 구성: Step 2~6 위저드, www에서 전달된 plan/region 사용
5api.js 분리: www용 최소 API vs admin-web용 전체 API
6Cloudflare Pages에 prego-admin 프로젝트 생성 및 배포 설정
7링크·리다이렉트 경로 수정 (www ↔ admin-web)
8README, docs/runbook 업데이트

8. 참조

Help