kaffa/anvil-hosting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: remove unused launcher code

Browse Source 
- Remove old Server Launcher Modal from index.html (210 lines)
- Remove launcher state variables and methods from app.js
- Remove unused constants: LAUNCHER_PRICES, PLAN_SPECS, REGIONS, OS_LIST, PAYMENT_METHODS, DEPLOY_TIMING
- Remove deprecated API methods for deleted functions
- Preserve: wizard, pricing table, dashboard functionality

Total reduction: ~440+ lines of unused code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-23 12:50:54 +09:00
parent f93311ffe2
commit 347a5cc598
2 changed files with 6 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
app.js
View File

@@ -51,66 +51,8 @@ const ApiService = {
}
},
/**
* Health Check - 서버 상태 확인
*/
async health() {
console.log('[API] Health check...');
return this.request('/health');
},
/**
* Instances 조회 - 클라우드 인스턴스 목록
*/
async getInstances(params = {}) {
console.log('[API] Fetching instances...', params);
const query = new URLSearchParams();
// 파라미터 설정
if (params.provider) query.set('provider', params.provider);
if (params.region) query.set('region', params.region);
if (params.min_vcpu) query.set('min_vcpu', params.min_vcpu);
if (params.max_vcpu) query.set('max_vcpu', params.max_vcpu);
if (params.min_memory_gb) query.set('min_memory_gb', params.min_memory_gb);
if (params.max_memory_gb) query.set('max_memory_gb', params.max_memory_gb);
if (params.max_price) query.set('max_price', params.max_price);
if (params.instance_family) query.set('instance_family', params.instance_family);
if (params.has_gpu !== undefined) query.set('has_gpu', params.has_gpu);
if (params.sort_by) query.set('sort_by', params.sort_by);
if (params.order) query.set('order', params.order);
if (params.limit) query.set('limit', params.limit);
if (params.offset) query.set('offset', params.offset);
const queryString = query.toString();
return this.request(`/instances${queryString ? '?' + queryString : ''}`);
},
/**
* Recommend - 기술 스택 기반 인스턴스 추천
*/
async recommend(stack, scale = 'medium', budgetMax = null) {
console.log('[API] Getting recommendations...', { stack, scale, budgetMax });
const body = { stack, scale };
if (budgetMax) body.budget_max = budgetMax;
return this.request('/recommend', {
method: 'POST',
body: JSON.stringify(body)
});
},
/**
* Sync 트리거 - 프로바이더 데이터 동기화 (관리자용)
*/
async sync(provider = null) {
console.log('[API] Triggering sync...', { provider });
const body = provider ? { provider } : {};
return this.request('/sync', {
method: 'POST',
body: JSON.stringify(body)
});
}
// Removed: health(), getInstances(), recommend(), sync()
// These methods referenced deleted API functions (health.ts, instances.ts, recommend.ts)
};
// 텔레그램 봇 URL 상수
@@ -133,48 +75,8 @@ const PRICING_DATA = {
]
};
// 런처 모달용 가격 - PRICING_DATA에서 파생
const LAUNCHER_PRICES = Object.fromEntries(
PRICING_DATA.global.map(p => [p.plan, {
base: p.price,
seoul: PRICING_DATA.seoul.find(s => s.plan === p.plan)?.price || p.price
}])
);
// 플랜별 스펙 정보 - PRICING_DATA에서 파생
const PLAN_SPECS = Object.fromEntries(
PRICING_DATA.global.map(p => [p.plan, `${p.vcpu} / ${p.ram} 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 }
];
// 배포 시뮬레이션 타이밍 상수
const DEPLOY_TIMING = {
IMAGE_READY: 1500,
CONTAINER_CREATED: 3000,
NETWORK_CONFIGURED: 4500,
COMPLETE: 6000
};
// Removed: Old launcher constants (LAUNCHER_PRICES, PLAN_SPECS, REGIONS, OS_LIST, PAYMENT_METHODS, DEPLOY_TIMING)
// These were only used by the deprecated Server Launcher Modal
// Mock 데이터 (API 없이 UI 테스트용)
const MOCK_SERVERS = [
@@ -367,12 +269,6 @@ function calculateRecommendation(selectedStacks, scale) {
*/
function anvilApp() {
return {
// 모달 상태
launcherOpen: false,
launching: false,
wizardStep: 0, // 0: region, 1: plan, 2: os, 3: payment, 4: confirm, 5+: deploying
deployStep: 0,
// ============================================================
// 서버 추천 마법사 상태
// ============================================================
@@ -519,15 +415,6 @@ function anvilApp() {
return this.telegram.user || this.webUser;
},
// 서버 구성
config: {
region: null,
plan: null,
os: null,
payment: null,
telegram_id: null
},
// 서버 목록
servers: [],
loadingServers: false,
@@ -548,22 +435,6 @@ function anvilApp() {
apiLoading: false,
apiError: null,
// 대화 메시지
messages: [],
// 배포 로그
logs: [],
// 데이터 접근자
regions: REGIONS,
osList: OS_LIST,
paymentMethods: PAYMENT_METHODS,
// 플랜 목록 (리전에 따라 다름)
get plans() {
return ['Micro', 'Starter', 'Pro', 'Business'];
},
// 초기화 (텔레그램 연동 + 대시보드)
init() {
if (window.Telegram?.WebApp) {
@@ -866,294 +737,8 @@ function anvilApp() {
console.log('[Dashboard] View switched to:', view);
},
// 가격 조회
getPrice(plan) {
const prices = LAUNCHER_PRICES[plan];
if (!prices) return '0';
const price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
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() {
// 텔레그램 사용자 ID 추가
if (this.telegram.user) {
this.config.telegram_id = this.telegram.user.id;
}
this.launching = true;
this.wizardStep = 5;
this.deployStep = 1;
this.logs = [
'🔄 배포를 시작합니다...',
`📍 ${this.config.region} 리전 노드 선택 중...`,
`📦 ${this.config.os} 이미지 준비 중...`
];
// 디버그: config 출력
console.log('[Server Launch] Config:', this.config);
setTimeout(() => {
this.logs.push('✅ 이미지 준비 완료');
this.logs.push('🔧 컨테이너 인스턴스 생성 중...');
this.deployStep = 2;
}, DEPLOY_TIMING.IMAGE_READY);
setTimeout(() => {
this.logs.push('✅ 컨테이너 생성 완료');
this.logs.push('🌐 네트워크 및 방화벽 구성 중...');
this.deployStep = 3;
}, DEPLOY_TIMING.CONTAINER_CREATED);
setTimeout(() => {
const randomIP = Math.floor(Math.random() * 254 + 1);
this.logs.push(`✅ IP 할당 완료: 45.12.89.${randomIP}`);
this.logs.push('⚙️ 시스템 서비스 시작 중...');
this.deployStep = 4;
}, DEPLOY_TIMING.NETWORK_CONFIGURED);
setTimeout(() => {
this.launching = false;
this.deployStep = 5;
this.logs.push('🎉 서버가 활성화되었습니다!');
// 대시보드 모드에서는 서버 목록 새로고침
if (this.dashboardMode) {
setTimeout(() => {
this.fetchServers();
this.fetchStats();
}, 1000);
}
}, DEPLOY_TIMING.COMPLETE);
},
// 런처 열기 (대시보드용 추가 기능)
openLauncher() {
this.launcherOpen = true;
this.messages = [{ type: 'bot', text: '어느 리전에 서버를 생성할까요?', time: new Date() }];
// 대시보드 모드에서는 서버 생성 후 목록 새로고침
if (this.dashboardMode) {
console.log('[Dashboard] Launcher opened from dashboard');
}
},
// 런처 초기화
resetLauncher() {
this.launcherOpen = false;
this.launching = false;
this.wizardStep = 0;
this.deployStep = 0;
this.config = { region: null, plan: null, os: null, payment: null, telegram_id: null };
this.messages = [];
this.logs = [];
},
// ESC 키로 모달 닫기
handleKeydown(event) {
if (event.key === 'Escape' && this.launcherOpen && !this.launching) {
this.resetLauncher();
}
},
// ============================================================
// API 연동 메서드
// ============================================================
// API 테스트 결과
apiTestResult: null,
apiTestLoading: false,
// API 인스턴스 데이터
cloudInstances: [],
cloudInstancesLoading: false,
cloudInstancesError: null,
cloudInstancesFilter: {
provider: '',
min_vcpu: '',
max_price: '',
sort_by: 'monthly_price',
order: 'asc',
limit: 20
},
// API Health Check 테스트
async testApiHealth() {
console.log('[App] Testing API health...');
this.apiTestLoading = true;
this.apiTestResult = null;
try {
const result = await ApiService.health();
this.apiTestResult = {
success: true,
data: result,
message: `API 정상 (${result.status})`
};
console.log('[App] API health check success:', result);
} catch (error) {
this.apiTestResult = {
success: false,
error: error.message,
message: `API 오류: ${error.message}`
};
console.error('[App] API health check failed:', error);
} finally {
this.apiTestLoading = false;
}
},
// 클라우드 인스턴스 목록 조회
async fetchCloudInstances() {
console.log('[App] Fetching cloud instances...');
this.cloudInstancesLoading = true;
this.cloudInstancesError = null;
try {
const params = {};
if (this.cloudInstancesFilter.provider) params.provider = this.cloudInstancesFilter.provider;
if (this.cloudInstancesFilter.min_vcpu) params.min_vcpu = parseInt(this.cloudInstancesFilter.min_vcpu);
if (this.cloudInstancesFilter.max_price) params.max_price = parseFloat(this.cloudInstancesFilter.max_price);
if (this.cloudInstancesFilter.sort_by) params.sort_by = this.cloudInstancesFilter.sort_by;
if (this.cloudInstancesFilter.order) params.order = this.cloudInstancesFilter.order;
params.limit = this.cloudInstancesFilter.limit || 20;
const result = await ApiService.getInstances(params);
if (result.success && result.data) {
this.cloudInstances = result.data.instances || [];
console.log('[App] Cloud instances loaded:', this.cloudInstances.length);
} else {
throw new Error(result.error?.message || 'Unknown error');
}
} catch (error) {
this.cloudInstancesError = error.message;
console.error('[App] Failed to fetch cloud instances:', error);
} finally {
this.cloudInstancesLoading = false;
}
},
// 추천 인스턴스 조회
recommendResult: null,
recommendLoading: false,
recommendStack: ['nginx', 'nodejs'],
recommendScale: 'medium',
async getRecommendation() {
console.log('[App] Getting recommendation...');
this.recommendLoading = true;
this.recommendResult = null;
try {
const result = await ApiService.recommend(this.recommendStack, this.recommendScale);
if (result.success !== false) {
this.recommendResult = {
success: true,
data: result
};
console.log('[App] Recommendation received:', result);
} else {
throw new Error(result.error?.message || 'Recommendation failed');
}
} catch (error) {
this.recommendResult = {
success: false,
error: error.message
};
console.error('[App] Recommendation failed:', error);
} finally {
this.recommendLoading = false;
}
},
// 메모리 포맷팅 (MB to GB)
formatMemory(mb) {
if (mb >= 1024) {
return (mb / 1024).toFixed(1) + ' GB';
}
return mb + ' MB';
},
// 가격 포맷팅 (USD)
formatUsd(price) {
return '$' + price.toFixed(2);
}
// Removed: API test methods (testApiHealth, fetchCloudInstances, getRecommendation)
// These referenced deleted API functions
};
}

211
index.html
View File

@@ -1042,217 +1042,6 @@
</div>
</footer>
<!-- Server Launcher Modal -->
<div x-show="launcherOpen"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-[100] flex items-center justify-center p-2 sm:p-4 bg-dark-900/90 backdrop-blur-sm"
style="display: none;">
<div @click.away="if(!launching) launcherOpen = false"
role="dialog"
aria-modal="true"
aria-labelledby="modal-main-title"
aria-describedby="modal-description"
class="bg-slate-900/95 backdrop-blur-xl border border-white/10 mx-2 sm:mx-4 rounded-3xl shadow-2xl shadow-black/50 overflow-hidden flex flex-col"
style="width: 100%; max-width: 800px; max-height: 90vh; height: 90vh;">
<!-- Accessibility: Hidden description -->
<div id="modal-description" class="sr-only">
단계별로 서버 구성을 선택하세요. 각 단계에서 옵션을 클릭하거나 Tab 키로 네비게이션할 수 있습니다. ESC 키를 누르면 닫을 수 있습니다.
</div>
<!-- Modal Header -->
<div class="px-4 py-3 border-b border-white/5 flex justify-between items-center flex-shrink-0">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-sm flex-shrink-0">🚀</div>
<div>
<h2 id="modal-main-title" class="text-sm font-bold text-white">서버 생성 마법사</h2>
<p class="text-[10px] text-slate-400">Anvil Forge Bot</p>
</div>
</div>
<button @click="resetLauncher"
aria-label="모달 닫기 (ESC 키 지원)"
class="modal-close w-8 h-8 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-white/10 hover:text-white transition flex-shrink-0"
x-show="!launching">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- Chat Container -->
<div id="chat-container" role="log" aria-live="polite" class="flex-1 overflow-y-auto px-3 sm:px-6 py-3 sm:py-4 space-y-2 sm:space-y-4" x-show="wizardStep < 5">
<!-- Messages -->
<template x-for="(msg, idx) in messages" :key="idx">
<div :class="msg.type === 'bot' ? 'flex justify-start' : 'flex justify-end'"
role="article"
:aria-label="(msg.type === 'bot' ? 'Anvil Forge Bot' : '당신') + ': ' + msg.text">
<div :class="msg.type === 'bot'
? 'bg-slate-800 text-slate-200 rounded-xl sm:rounded-2xl rounded-tl-sm'
: 'bg-brand-500 text-white rounded-xl sm:rounded-2xl rounded-tr-sm'"
class="px-3 py-2 sm:px-4 sm:py-2.5 text-xs sm:text-sm max-w-[90%] break-words"
role="document">
<span x-text="msg.text"></span>
</div>
</div>
</template>
<!-- Current Step Options -->
<div class="pt-2">
<!-- Step 0: Region Selection -->
<fieldset x-show="wizardStep === 0" role="radiogroup" aria-label="리전 선택" class="space-y-3">
<legend class="sr-only">리전 선택 (지역 선택)</legend>
<template x-for="r in regions" :key="r.id">
<button @click="selectRegion(r)"
role="radio"
:aria-checked="config.region === r.id"
:tabindex="config.region === r.id ? '0' : '-1'"
class="w-full flex items-center justify-between px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border-2 rounded-xl transition-all group"
:class="config.region === r.id
? 'border-brand-500 bg-brand-500/10'
: 'border-slate-700/50 hover:border-brand-500/50'">
<div class="flex items-center gap-4">
<span class="text-3xl" x-text="r.flag"></span>
<div class="text-left">
<div class="font-semibold text-white text-base" x-text="r.name"></div>
<div class="text-sm text-slate-300" x-text="r.id"></div>
</div>
</div>
<div class="text-sm text-slate-500 group-hover:text-brand-400 font-mono" x-text="r.ping"></div>
</button>
</template>
</fieldset>
<!-- Step 1: Plan Selection -->
<fieldset x-show="wizardStep === 1" class="space-y-3">
<legend class="sr-only">플랜 선택 (서버 사양 선택)</legend>
<template x-for="p in plans" :key="p">
<button @click="selectPlan(p)"
class="w-full flex items-center justify-between px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-brand-500/50 rounded-xl transition-all">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-lg bg-slate-700/50 flex items-center justify-center text-2xl"
x-text="p === 'Micro' ? '🔹' : p === 'Starter' ? '🔷' : p === 'Pro' ? '⭐' : '💎'"></div>
<div class="text-left">
<div class="font-semibold text-white text-base" x-text="p"></div>
<div class="text-sm text-slate-400" x-text="getPlanSpec(p)"></div>
</div>
</div>
<div class="text-right">
<div class="font-bold text-brand-400 text-base" x-text="'₩' + getPrice(p)"></div>
<div class="text-xs text-slate-500">/월</div>
</div>
</button>
</template>
</fieldset>
<!-- Step 2: OS Selection -->
<fieldset x-show="wizardStep === 2" class="space-y-3">
<legend class="sr-only">운영체제 선택</legend>
<template x-for="os in osList" :key="os.id">
<button @click="selectOS(os)"
class="w-full flex items-center gap-4 px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-purple-500/50 rounded-xl transition-all">
<span class="text-2xl" x-text="os.icon"></span>
<span class="font-semibold text-white text-base" x-text="os.name"></span>
</button>
</template>
</fieldset>
<!-- Step 3: Payment Selection -->
<fieldset x-show="wizardStep === 3" class="space-y-3">
<legend class="sr-only">결제 방식 선택</legend>
<template x-for="pay in paymentMethods" :key="pay.id">
<button @click="selectPayment(pay)"
class="w-full flex items-center justify-between px-5 py-4 bg-slate-800/80 hover:bg-slate-700 border border-slate-700/50 hover:border-green-500/50 rounded-xl transition-all">
<div class="text-left">
<div class="font-semibold text-white text-base" x-text="pay.name"></div>
<div class="text-sm text-slate-400" x-text="pay.desc"></div>
</div>
<div x-show="pay.discount > 0" class="px-3 py-1.5 bg-green-500/20 text-green-400 text-sm font-bold rounded-full">
-<span x-text="pay.discount"></span>%
</div>
</button>
</template>
</fieldset>
<!-- Step 4: Confirmation -->
<div x-show="wizardStep === 4" class="space-y-4">
<div class="px-5 py-4 bg-slate-800/50 border border-slate-700/50 rounded-xl space-y-3">
<div class="flex justify-between text-base"><span class="text-slate-400">리전</span><span class="text-white font-medium" x-text="config.region"></span></div>
<div class="flex justify-between text-base"><span class="text-slate-400">플랜</span><span class="text-white font-medium" x-text="config.plan + ' (' + getPlanSpec(config.plan) + ')'"></span></div>
<div class="flex justify-between text-base"><span class="text-slate-400">OS</span><span class="text-white font-medium" x-text="config.os"></span></div>
<div class="flex justify-between text-base"><span class="text-slate-400">결제</span><span class="text-white font-medium" x-text="config.payment === 'yearly' ? '연간' : '월간'"></span></div>
<div class="border-t border-slate-700 pt-3 mt-3 flex justify-between font-bold text-lg">
<span class="text-slate-300">월 요금</span>
<span class="text-brand-400" x-text="'₩' + getFinalPrice().toLocaleString('ko-KR')"></span>
</div>
</div>
<button @click="startLaunch"
class="w-full py-4 bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 text-white font-bold rounded-xl transition-all shadow-lg shadow-brand-500/25 active:scale-[0.98] text-base">
🚀 서버 생성하기
</button>
</div>
</div>
</div>
<!-- Back Button -->
<div x-show="wizardStep > 0 && wizardStep < 5" class="px-4 pb-3 flex-shrink-0">
<button @click="goBack" class="text-xs text-slate-500 hover:text-slate-300 transition flex items-center gap-1">
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
이전 단계
</button>
</div>
<!-- Deploying State -->
<div x-show="wizardStep >= 5" class="p-4 flex flex-col min-h-[300px]">
<!-- Progress -->
<div class="mb-4">
<div class="flex justify-between text-xs text-slate-400 mb-2">
<span x-text="deployStep < 5 ? '배포 중...' : '완료'"></span>
<span x-text="(deployStep * 20) + '%'"></span>
</div>
<div class="h-1.5 bg-slate-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-brand-500 to-purple-500 transition-all duration-500 rounded-full" :style="'width: ' + (deployStep * 20) + '%'"></div>
</div>
</div>
<!-- Logs -->
<div class="flex-1 bg-black/30 rounded-xl p-3 text-xs text-slate-400 overflow-y-auto border border-white/5 space-y-1 max-h-40">
<template x-for="(log, idx) in logs" :key="idx">
<div x-text="log"></div>
</template>
<div x-show="launching" class="animate-pulse text-brand-400">▋</div>
</div>
<!-- Success State -->
<div x-show="deployStep === 5" x-transition class="mt-4 p-4 bg-gradient-to-br from-brand-500/10 to-purple-500/10 border border-brand-500/20 rounded-2xl text-center">
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white text-xl mb-2 mx-auto">✓</div>
<h4 class="text-base font-bold text-white mb-1">서버 준비 완료!</h4>
<p class="text-slate-400 text-xs mb-3">인스턴스가 활성화되었습니다</p>
<div class="flex gap-2">
<button @click="resetLauncher" class="flex-1 py-2.5 bg-slate-800 hover:bg-slate-700 text-white font-semibold rounded-xl transition text-sm">닫기</button>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="flex-1 py-2.5 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-semibold rounded-xl transition text-center text-sm">Console →</a>
</div>
</div>
</div>
</div>
</div>
<!-- Server Recommendation Wizard Modal -->
<div x-show="wizardOpen"
x-transition:enter="transition ease-out duration-300"