diff --git a/app.js b/app.js index 2ca9501..370f83f 100644 --- a/app.js +++ b/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 = []; }, diff --git a/index.html b/index.html index 60826fe..adb6e9e 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@
-
-
- -
- - -
- -
- + +
+ + - -
- -
- -
-
- - -
- -
-