Implement conversational wizard for server launcher modal
- Convert modal to step-by-step chat-style wizard - Flow: Region → Plan → OS → Payment → Confirm → Deploy - Add chat message history with bot/user bubbles - Support yearly payment with 17% discount calculation - Add back button for returning to previous steps - Widen modal (max-w-md sm:max-w-lg) for better UX - Add deploy progress simulation with logs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
160
app.js
160
app.js
@@ -1,6 +1,6 @@
|
||||
/**
|
||||
* Anvil Hosting - Main Application JavaScript
|
||||
* 가격 데이터 및 Alpine.js 컴포넌트 정의
|
||||
* 대화형 서버 런처 및 가격 데이터 관리
|
||||
*/
|
||||
|
||||
// 단일 가격 데이터 소스 (VAT 포함, 월간 기준)
|
||||
@@ -36,6 +36,28 @@ const PLAN_SPECS = {
|
||||
'Business': '4vCPU / 8GB RAM'
|
||||
};
|
||||
|
||||
// 리전 정보
|
||||
const REGIONS = [
|
||||
{ id: 'Seoul', flag: '🇰🇷', name: '서울', ping: '2ms' },
|
||||
{ id: 'Tokyo', flag: '🇯🇵', name: '도쿄', ping: '35ms' },
|
||||
{ id: 'Singapore', flag: '🇸🇬', name: '싱가포르', ping: '65ms' },
|
||||
{ id: 'HongKong', flag: '🇭🇰', name: '홍콩', ping: '45ms' }
|
||||
];
|
||||
|
||||
// OS 정보
|
||||
const OS_LIST = [
|
||||
{ id: 'Debian 12', icon: '🐧', name: 'Debian 12' },
|
||||
{ id: 'Ubuntu 24.04', icon: '🟠', name: 'Ubuntu 24.04' },
|
||||
{ id: 'CentOS 9', icon: '🔵', name: 'CentOS 9' },
|
||||
{ id: 'Alpine', icon: '🏔️', name: 'Alpine' }
|
||||
];
|
||||
|
||||
// 결제 방식
|
||||
const PAYMENT_METHODS = [
|
||||
{ id: 'monthly', name: '월간 결제', desc: '매월 자동 결제', discount: 0 },
|
||||
{ id: 'yearly', name: '연간 결제', desc: '2개월 무료 (17% 할인)', discount: 17 }
|
||||
];
|
||||
|
||||
/**
|
||||
* 가격 포맷팅 (한국 원화)
|
||||
*/
|
||||
@@ -44,25 +66,40 @@ function formatPrice(price) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Alpine.js 메인 앱 데이터
|
||||
* Alpine.js 메인 앱 데이터 - 대화형 위자드
|
||||
*/
|
||||
function anvilApp() {
|
||||
return {
|
||||
// 모달 상태
|
||||
launcherOpen: false,
|
||||
launching: false,
|
||||
step: 0,
|
||||
wizardStep: 0, // 0: region, 1: plan, 2: os, 3: payment, 4: confirm, 5+: deploying
|
||||
deployStep: 0,
|
||||
|
||||
// 서버 구성
|
||||
config: {
|
||||
region: 'Tokyo',
|
||||
os: 'Debian 12',
|
||||
plan: 'Pro'
|
||||
region: null,
|
||||
plan: null,
|
||||
os: null,
|
||||
payment: null
|
||||
},
|
||||
|
||||
// 대화 메시지
|
||||
messages: [],
|
||||
|
||||
// 배포 로그
|
||||
logs: [],
|
||||
|
||||
// 데이터 접근자
|
||||
regions: REGIONS,
|
||||
osList: OS_LIST,
|
||||
paymentMethods: PAYMENT_METHODS,
|
||||
|
||||
// 플랜 목록 (리전에 따라 다름)
|
||||
get plans() {
|
||||
return ['Micro', 'Starter', 'Pro', 'Business'];
|
||||
},
|
||||
|
||||
// 가격 조회
|
||||
getPrice(plan) {
|
||||
const prices = LAUNCHER_PRICES[plan];
|
||||
@@ -71,52 +108,131 @@ function anvilApp() {
|
||||
return price.toLocaleString('ko-KR');
|
||||
},
|
||||
|
||||
// 월간 가격 (할인 적용)
|
||||
getFinalPrice() {
|
||||
const prices = LAUNCHER_PRICES[this.config.plan];
|
||||
if (!prices) return 0;
|
||||
let price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
|
||||
if (this.config.payment === 'yearly') {
|
||||
price = Math.round(price * 0.83); // 17% 할인
|
||||
}
|
||||
return price;
|
||||
},
|
||||
|
||||
// 플랜 스펙 조회
|
||||
getPlanSpec(plan) {
|
||||
return PLAN_SPECS[plan] || '';
|
||||
},
|
||||
|
||||
// 리전 선택
|
||||
selectRegion(region) {
|
||||
this.config.region = region.id;
|
||||
this.addMessage('user', `${region.flag} ${region.name}`);
|
||||
this.wizardStep = 1;
|
||||
setTimeout(() => this.addMessage('bot', '어떤 사양이 필요하신가요?'), 300);
|
||||
},
|
||||
|
||||
// 플랜 선택
|
||||
selectPlan(plan) {
|
||||
this.config.plan = plan;
|
||||
this.addMessage('user', `${plan} (${this.getPlanSpec(plan)})`);
|
||||
this.wizardStep = 2;
|
||||
setTimeout(() => this.addMessage('bot', '어떤 운영체제를 설치할까요?'), 300);
|
||||
},
|
||||
|
||||
// OS 선택
|
||||
selectOS(os) {
|
||||
this.config.os = os.id;
|
||||
this.addMessage('user', `${os.icon} ${os.name}`);
|
||||
this.wizardStep = 3;
|
||||
setTimeout(() => this.addMessage('bot', '결제 방식을 선택해주세요.'), 300);
|
||||
},
|
||||
|
||||
// 결제 방식 선택
|
||||
selectPayment(payment) {
|
||||
this.config.payment = payment.id;
|
||||
this.addMessage('user', payment.name);
|
||||
this.wizardStep = 4;
|
||||
setTimeout(() => this.addMessage('bot', '구성을 확인하고 서버를 생성해주세요! 🚀'), 300);
|
||||
},
|
||||
|
||||
// 메시지 추가
|
||||
addMessage(type, text) {
|
||||
this.messages.push({ type, text, time: new Date() });
|
||||
// 스크롤 하단으로
|
||||
this.$nextTick(() => {
|
||||
const container = document.getElementById('chat-container');
|
||||
if (container) container.scrollTop = container.scrollHeight;
|
||||
});
|
||||
},
|
||||
|
||||
// 이전 단계로
|
||||
goBack() {
|
||||
if (this.wizardStep > 0 && !this.launching) {
|
||||
// 마지막 2개 메시지 제거 (사용자 선택 + 봇 질문)
|
||||
this.messages.pop();
|
||||
this.messages.pop();
|
||||
this.wizardStep--;
|
||||
|
||||
// 선택 초기화
|
||||
if (this.wizardStep === 0) this.config.region = null;
|
||||
else if (this.wizardStep === 1) this.config.plan = null;
|
||||
else if (this.wizardStep === 2) this.config.os = null;
|
||||
else if (this.wizardStep === 3) this.config.payment = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 서버 배포 시작
|
||||
startLaunch() {
|
||||
this.launching = true;
|
||||
this.step = 1;
|
||||
this.wizardStep = 5;
|
||||
this.deployStep = 1;
|
||||
this.logs = [
|
||||
'[INFO] Initializing deployment...',
|
||||
'[INFO] Selecting node in ' + this.config.region + '...',
|
||||
'[INFO] Pulling ' + this.config.os + ' image...'
|
||||
'🔄 배포를 시작합니다...',
|
||||
`📍 ${this.config.region} 리전 노드 선택 중...`,
|
||||
`📦 ${this.config.os} 이미지 준비 중...`
|
||||
];
|
||||
|
||||
setTimeout(() => {
|
||||
this.logs.push('[SUCCESS] Image pulled.');
|
||||
this.logs.push('[INFO] Creating container instance...');
|
||||
this.step = 2;
|
||||
this.logs.push('✅ 이미지 준비 완료');
|
||||
this.logs.push('🔧 컨테이너 인스턴스 생성 중...');
|
||||
this.deployStep = 2;
|
||||
}, 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
this.logs.push('[SUCCESS] Container created.');
|
||||
this.logs.push('[INFO] Configuring network & firewall...');
|
||||
this.step = 3;
|
||||
this.logs.push('✅ 컨테이너 생성 완료');
|
||||
this.logs.push('🌐 네트워크 및 방화벽 구성 중...');
|
||||
this.deployStep = 3;
|
||||
}, 3000);
|
||||
|
||||
setTimeout(() => {
|
||||
const randomIP = Math.floor(Math.random() * 254 + 1);
|
||||
this.logs.push('[SUCCESS] Network ready. IP: 45.12.89.' + randomIP);
|
||||
this.logs.push('[INFO] Starting system services...');
|
||||
this.step = 4;
|
||||
this.logs.push(`✅ IP 할당 완료: 45.12.89.${randomIP}`);
|
||||
this.logs.push('⚙️ 시스템 서비스 시작 중...');
|
||||
this.deployStep = 4;
|
||||
}, 4500);
|
||||
|
||||
setTimeout(() => {
|
||||
this.launching = false;
|
||||
this.step = 5;
|
||||
this.logs.push('[COMPLETE] Server is now live!');
|
||||
this.deployStep = 5;
|
||||
this.logs.push('🎉 서버가 활성화되었습니다!');
|
||||
}, 6000);
|
||||
},
|
||||
|
||||
// 런처 열기
|
||||
openLauncher() {
|
||||
this.launcherOpen = true;
|
||||
this.messages = [{ type: 'bot', text: '어느 리전에 서버를 생성할까요?', time: new Date() }];
|
||||
},
|
||||
|
||||
// 런처 초기화
|
||||
resetLauncher() {
|
||||
this.launcherOpen = false;
|
||||
this.launching = false;
|
||||
this.step = 0;
|
||||
this.wizardStep = 0;
|
||||
this.deployStep = 0;
|
||||
this.config = { region: null, plan: null, os: null, payment: null };
|
||||
this.messages = [];
|
||||
this.logs = [];
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user