목적: pregoi.com 웹사이트를 100% 동일하게 복제하여 apps/www에 Next.js로 구현하고, 기존 package 페이지를 동일 스타일로 Next.js 전환. 이후 공통 컴포넌트·스타일을 재활용해 apps/admin-web 디자인을 업데이트하고 Next.js로 마이그레이션.범위: 디자인 복제, 레이아웃·네비게이션·스타일, Next.js 구조, admin-web 연계. 코드 생성은 별도 단계.
1. 개요
Phase 작업 대상 Phase 1 pregoi.com 100% 복제 → www (Next.js) apps/wwwPhase 2 www package 페이지를 pregoi.com 스타일 기반 Next.js로 전환 apps/www/pricingPhase 3 www Next.js 컴포넌트·스타일 재활용 → admin-web Next.js 전환 apps/admin-web
1.1 기술 스택
구현 언어: Next.js (React)스타일: Tailwind CSS (pregoi.com 디자인 매칭)배포: Cloudflare Pages (정적 또는 next-on-pages)기존 www 구조: 정적 HTML (index.html, locale.js, plan-redirect.js, styles.css) → Next.js 앱으로 대체
항목 설명 비고 로고 Prego 좌측 Product 드롭다운: Users, Release management, Branding, B2B, Monetization 메가메뉴 또는 드롭다운 Pricing 링크 Case Study 링크 Support 링크 언어 선택기 Korea KR, English EN, Spanish ES 우측 Sign in 버튼/링크 → admin-web 로그인 Start for free CTA 버튼 → admin-web 또는 패키지 선택
2.1.2 히어로 섹션
요소 내용 배너 ”One month free – plus full migration support” 메인 타이틀 ”Easy, AI-Powered ERP” 서브타이틀 ”Bookkeeping, Accounting, Payroll, and HR with Multilingual ERP” CTA ”Start for free”, “Get Demo” 비디오 hero 비디오 (fallback: “Your browser does not support the video tag”) Trusted by ”Trusted by over 50,000 developers, including teams at” (로고 슬롯)
2.1.3 기능 섹션 (Features)
카드 제목 설명 1 Stress-Free! AI-ERP Streamline Your Business Operations: Effortless Bookkeeping, Accounting, Payroll, and HR with Multilingual ERP for Global Success 2 Intelligent Bookkeeping (아이콘/이미지) 3 Simplified Accounting (아이콘/이미지) 4 Smart All-in-one HR (아이콘/이미지) 5 Payroll Simplify your payroll processes with automated tax calculations, direct deposits, and compliance monitoring… 6 Multilingual AI-ERP (아이콘/이미지) 7 Smart AI Agent for Your Business (아이콘/이미지)
2.1.4 CTA 섹션
타이틀: “Build Business AI Agent with Prego!”테스티모니얼: Darren Dunlap, CEO & Founder at Flex.co — “The best solution for anyone who wants to work a AI Empowered ERP System”서브 CTA: “Get our Free Business Tools”설명: Mobile App Convenience: Business Card Scanner, Auto Bookkeeper Scanning, Employee Attendance Tracker
2.1.5 가격 섹션 (Pricing)
플랜 대상 가격 CTA Small For Individual Users $200 /mo Get Started Now Medium For bigger teams $400 /mo Get Started Now Custom Unlimited possibilities $1000 /mo Get Started Now
토글: Billed Monthly / Billed Annually플랜 특징: Access to all features, Assisted onboarding support, CPM Overage: Unlimited, Program reviews 1x a month
2.1.6 FAQ 섹션
아코디언 형식
항목: How long does it take to ship my order? / What payment methods do you accept? / What shipping options do you have? 등
실제 서비스에 맞게 FAQ 내용은 별도 편집 권장
타이틀: “Experience the Future-Try Demo Now!”3단계: Sign up → Get credentials → Explore All Features in Demo폼: Join for Free Demo — Email input, Get Started, OR (Google / Facebook / Apple 로그인)연락처:
Email: [email protected], Mon-Fri 10am-5pm
Phone: +65-8888-8888
Office: 111 Somerset Rd, #06-07, TripleOne Somerset, Singapore 238164
CTA: “Grow your business here” — “Power up your ideas. Integrate Prego in minutes!” — Talk to Sales, Start for Free
영역 항목 제품 Product, Pricing, Case Study, Support 회사 Company, Terms of Service, Privacy Policy 저작권 © 2025 Prego. All rights reserved. CTA Log In, Sign Up
2.2 복제 시 필수 반영 사항
유형 내용 이미지 hero 비디오/이미지, 기능 카드 아이콘, Trusted by 로고, 테스티모니얼 아바타 등 — 원본 URL 캡처 또는 동일 시각적 자산 확보 텍스트 모든 문구 원문 유지 (타이포·라인브레이크 포함) 색상 primary, accent, background, text 색상 팔레트 추출 타이포그래피 폰트 패밀리, 크기, weight, line-height 레이아웃 그리드, 간격, 카드 형태, 반응형 브레이크포인트 인터랙션 드롭다운, 아코디언, 호버 효과, CTA 클릭 동작
2.3 Next.js 구조 (www)
│ ├── layout.tsx # 공통 레이아웃 (Header, Footer)
│ ├── page.tsx # 랜딩 (pregoi.com 메인 페이지)
│ │ └── page.tsx # Phase 2: 패키지 선택 (pregoi 스타일)
│ ├── product/ # (선택) Product 하위 페이지
│ │ ├── LocaleSelector.tsx
2.4 www 환경 변수·연동
변수 용도 NEXT_PUBLIC_PREGO_ADMIN_BASE_URLSign in, Start for free, Get Started → admin-web 리다이렉트 NEXT_PUBLIC_PREGO_WWW_BASE_URLcanonical, og:url 등
2.5 기존 www 정적 파일 처리
locale.js → lib/locale.ts + LocaleSelector 컴포넌트plan-redirect.js 로직 → pricing 페이지의 “Get Started” 클릭 시 admin-web ?plan=X®ion=Y 리다이렉트functions/api/country.js → Next.js API Route /api/country 또는 Cloudflare Pages Function 유지 검토
3. Phase 2: Package 페이지 Next.js 전환 (pregoi 스타일)
3.1 기존 package 페이지 (www/index.html) 요약
플랜: Basic (S$99), Biz (S$299), Pro (S$599), Enterprise (S$1,499+)
Shared/Dedicated 구분, Users, AI tokens, Email, Storage, Overage
Billing table (AI tokens & usage-based billing)
3.2 전환 요건
항목 내용 경로 /pricing (또는 /packages)스타일 Phase 1의 pregoi.com Header, Footer, 카드 스타일, CTA 버튼 스타일 적용 플랜 카드 pregoi 가격 카드(Small/Medium/Custom) 레이아웃과 동일한 형태로 Basic/Biz/Pro/Enterprise 배치 동작 ”Select Basic/Biz/Pro/Enterprise” → admin-web?plan=X®ion=Y 리다이렉트 데이터 플랜별 스펙(Users, AI tokens, Email, Storage, Overage)은 기존 도메인 데이터 유지
3.3 공통 컴포넌트 활용
Header, Footer, LocaleSelector 재사용Pricing 섹션 컴포넌트 확장 — 랜딩용(200/400/1000) vs package용(Basic/Biz/Pro/Enterprise) prop 분기
4. Phase 3: admin-web Next.js 전환 및 디자인 업데이트
4.1 목표
admin-web을 Next.js로 전환
www(Phase 1·2)에서 만든 Header, Footer, 스타일, UI 컴포넌트 재활용
pregoi.com 톤앤매너에 맞는 테넌트 관리 UI
4.2 admin-web 페이지 매핑
기존 (HTML) Next.js 경로 설명 index.html (위저드) / 또는 /onboardingStep 2~6 온보딩 위저드 signup.html /signup회원가입 signup-verify.html /signup/verify이메일 OTP 검증 dashboard.html /dashboard테넌트 대시보드 billing.html /billing결제 정보
4.3 공유 패키지 / 모노레포 고려
옵션 설명 A. 패키지 분리 packages/prego-ui 또는 packages/shared에 Header, Footer, 공통 스타일 추출 — www, admin-web이 각각 의존B. 앱별 복사 www 컴포넌트를 admin-web으로 복사 후 수정 (간단하나 중복 발생) C. 단일 앱 + 라우팅 www + admin-web을 하나의 Next.js 앱으로 통합, 경로로 구분 (/ 랜딩, /pricing, /onboarding, /dashboard 등)
권장: 단기적으로 B 또는 C, 장기적으로 A
4.4 admin-web 레이아웃
Header: www와 동일한 스타일, 링크만 변경
Choose package → www
Dashboard, Billing, Sign up, Log in
Footer: www와 동일 또는 축소 버전내용 영역: 기존 위저드·대시보드·빌링 로직 유지, 스타일만 pregoi 기반으로 통일
4.5 admin-web 환경 변수
NEXT_PUBLIC_PREGO_CONTROL_PLANE_URLNEXT_PUBLIC_PREGO_AUTH_URLNEXT_PUBLIC_PREGO_BILLING_PROXY_URLNEXT_PUBLIC_PREGO_WWW_BASE_URL (Choose package 링크)
5. 배포 및 플로우
5.1 Cloudflare Pages
앱 Root Build command Output www apps/wwwnpm run build 또는 npx @cloudflare/next-on-pages.vercel/output/static (next-on-pages)admin-web apps/admin-web동일 동일
5.2 사용자 플로우
→ 랜딩 / Start for free / Get Demo
→ Select Basic/Biz/Pro/Enterprise
→ admin-web (prego-admin.pages.dev)?plan=X®ion=Y
→ 온보딩 Step 2~6 → Dashboard / Billing
5.3 패키지 선택 → prego-admin 연결 (온보딩 진입)
prego-www의 패키지 선택 페이지에서 특정 패키지(Basic/Biz/Pro/Enterprise 등)를 선택하면, prego-admin Cloudflare Pages 로 리다이렉트되어 온보딩 플로우가 시작된다.
단계 설명 1 사용자가 prego-www /pricing에서 “Select Basic” 등 클릭 2 prego-admin.pages.dev?plan=basic®ion=sg (또는 m.pregoi.com)로 이동3 prego-admin 온보딩 페이지에서 Sign in 또는 Sign up 으로 진입 4 로그인/회원가입 후 결제 → 테넌트 정보 → 프로비저닝 순 진행
즉, 패키지 선택은 prego-www에서 이루어지고, 온보딩(Sign in, Sign up 포함)은 prego-admin Pages 앱의 페이지 에서 수행된다.
6. 적용 순서
순서 작업 산출물 1 pregoi.com 디자인 분석 (색상, 폰트, 레이아웃, 이미지 목록) 디자인 스펙 문서 2 www Next.js 프로젝트 초기화, Tailwind 설정 apps/www/ Next.js 앱3 Header, Footer, 공통 레이아웃 구현 components/layout/*4 Hero, Features, Testimonial, FAQ, DemoContact 섹션 구현 components/sections/*5 랜딩 페이지 조합 (app/page.tsx) pregoi.com 메인 복제본 6 Pricing 섹션 확장, package 페이지(/pricing) 구현 package 선택 Next.js 페이지 7 admin-web Next.js 프로젝트 초기화 apps/admin-web/ Next.js 앱8 www 공통 컴포넌트 연동 (복사 또는 패키지) admin-web 레이아웃 9 온보딩·signup·dashboard·billing 페이지 Next.js 전환 admin-web 페이지 10 Cloudflare Pages 빌드·배포 설정 wrangler / Pages 프로젝트
7. 참조
