d08d1895d0
- 가격표 섹션을 페이지 하단에서 히어로 바로 아래로 이동 - 상단 패딩 축소 (py-24 → pt-12 pb-24) - 서브탭(서울/글로벌 타입) 스타일을 메인탭과 동일하게 통일 - Pages Functions API 프록시 추가 (functions/) - wrangler.toml 및 TypeScript 설정 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
551 lines
27 KiB
HTML
551 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Anvil Hosting - Dashboard</title>
|
|
|
|
<!-- Telegram Web App SDK -->
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<link rel="stylesheet" href="../style.css">
|
|
<link rel="stylesheet" href="../fonts.css">
|
|
|
|
<!-- Critical CSS -->
|
|
<style>
|
|
body { background: #0a0f1a; color: #e2e8f0; margin: 0; min-height: 100vh; }
|
|
.font-sans { font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif; }
|
|
</style>
|
|
|
|
<!-- App JavaScript -->
|
|
<script defer src="../app.js"></script>
|
|
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js" integrity="sha384-iZD2X8o1Zdq0HR5H/7oa8W30WS4No+zWCKUPD7fHRay9I1Gf+C4F8sVmw7zec1wW" crossorigin="anonymous"></script>
|
|
|
|
<!-- Telegram Login Widget Callback -->
|
|
<script>
|
|
function onTelegramAuth(user) {
|
|
// Alpine.js 컴포넌트에 이벤트 전달
|
|
window.dispatchEvent(new CustomEvent('telegram-web-login', { detail: user }));
|
|
}
|
|
</script>
|
|
</head>
|
|
<body x-data="anvilApp()" x-init="initMiniApp()" @telegram-web-login.window="handleWebLogin($event.detail)" class="font-sans antialiased">
|
|
|
|
<!-- Login Screen (Web Browser, Not Logged In) -->
|
|
<template x-if="!telegram.isAvailable && !webUser">
|
|
<div class="min-h-screen flex items-center justify-center p-6">
|
|
<div class="glass-card p-8 rounded-2xl text-center max-w-md">
|
|
<!-- Logo -->
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-white font-bold text-2xl mx-auto mb-6">A</div>
|
|
|
|
<h1 class="text-2xl font-bold mb-2">Anvil Hosting</h1>
|
|
<p class="text-slate-400 mb-8">텔레그램 계정으로 로그인하여<br>서버를 관리하세요</p>
|
|
|
|
<!-- Telegram Login Widget Container -->
|
|
<div id="telegram-login-container" class="flex justify-center mb-6"></div>
|
|
|
|
<p class="text-xs text-slate-500">
|
|
로그인하면 <a href="/terms.html" class="text-brand-400 hover:underline">이용약관</a> 및
|
|
<a href="/privacy.html" class="text-brand-400 hover:underline">개인정보처리방침</a>에 동의하는 것으로 간주됩니다.
|
|
</p>
|
|
|
|
<!-- Or use Mini App -->
|
|
<div class="mt-8 pt-6 border-t border-slate-700/50">
|
|
<p class="text-sm text-slate-400 mb-3">또는 텔레그램 앱에서 직접 이용</p>
|
|
<a href="https://t.me/AnvilForgeBot"
|
|
class="inline-flex items-center gap-2 px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-white rounded-xl transition text-sm">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
|
|
미니앱 열기
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Dashboard (Telegram MiniApp OR Web Logged In) -->
|
|
<template x-if="telegram.isAvailable || webUser">
|
|
<div class="min-h-screen">
|
|
|
|
<!-- Header -->
|
|
<header class="sticky top-0 z-50 bg-dark-900/90 backdrop-blur-md border-b border-white/5">
|
|
<div class="max-w-7xl mx-auto px-4 h-14 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded bg-brand-500 flex items-center justify-center text-white font-bold">A</div>
|
|
<span class="font-bold">Anvil</span>
|
|
</div>
|
|
|
|
<!-- User Info -->
|
|
<div class="flex items-center gap-3">
|
|
<!-- Telegram MiniApp User -->
|
|
<template x-if="telegram.isAvailable && telegram.user">
|
|
<div class="text-sm text-slate-400">
|
|
<span class="text-brand-400" x-text="'@' + (telegram.user.username || telegram.user.first_name)"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Web Login User -->
|
|
<template x-if="!telegram.isAvailable && webUser">
|
|
<div class="flex items-center gap-2">
|
|
<img x-show="webUser.photo_url" :src="webUser.photo_url" class="w-7 h-7 rounded-full">
|
|
<span class="text-sm text-brand-400" x-text="'@' + (webUser.username || webUser.first_name)"></span>
|
|
<button @click="logout()" class="text-xs text-slate-500 hover:text-red-400 transition ml-2">
|
|
로그아웃
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 py-6">
|
|
|
|
<!-- Dashboard Header -->
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold">
|
|
<template x-if="currentUser">
|
|
<span>안녕하세요, <span class="text-brand-400" x-text="currentUser.first_name || currentUser.username"></span>님</span>
|
|
</template>
|
|
<template x-if="!currentUser">
|
|
<span>대시보드</span>
|
|
</template>
|
|
</h1>
|
|
<p class="text-slate-400 text-sm mt-1">서버를 관리하고 사용량을 확인하세요</p>
|
|
</div>
|
|
<button @click="openLauncher()" class="px-5 py-2.5 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl text-sm flex items-center gap-2">
|
|
<span>+</span> 새 서버
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Navigation -->
|
|
<div class="flex gap-1 mb-6 bg-slate-800/50 p-1 rounded-xl overflow-x-auto">
|
|
<button @click="switchView('servers')"
|
|
:class="currentView === 'servers' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400'"
|
|
class="px-4 py-2 rounded-lg font-medium text-sm transition-all whitespace-nowrap">
|
|
내 서버 (<span x-text="servers.length"></span>)
|
|
</button>
|
|
<button @click="switchView('stats')"
|
|
:class="currentView === 'stats' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400'"
|
|
class="px-4 py-2 rounded-lg font-medium text-sm transition-all whitespace-nowrap">
|
|
사용량/비용
|
|
</button>
|
|
<button @click="switchView('notifications')"
|
|
:class="currentView === 'notifications' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400'"
|
|
class="px-4 py-2 rounded-lg font-medium text-sm transition-all whitespace-nowrap relative">
|
|
알림
|
|
<span x-show="unreadCount > 0"
|
|
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center"
|
|
x-text="unreadCount"></span>
|
|
</button>
|
|
<button @click="switchView('cloud'); fetchCloudInstances()"
|
|
:class="currentView === 'cloud' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400'"
|
|
class="px-4 py-2 rounded-lg font-medium text-sm transition-all whitespace-nowrap">
|
|
🌐 클라우드
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Server List View -->
|
|
<div x-show="currentView === 'servers'">
|
|
|
|
<!-- Loading -->
|
|
<div x-show="loadingServers" class="text-center py-12">
|
|
<div class="animate-spin w-10 h-10 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
|
|
<p class="text-slate-400 mt-4 text-sm">불러오는 중...</p>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div x-show="!loadingServers && servers.length === 0" class="glass-card p-12 rounded-2xl text-center">
|
|
<div class="text-5xl mb-4">🚀</div>
|
|
<h3 class="text-lg font-bold mb-2">아직 서버가 없습니다</h3>
|
|
<p class="text-slate-400 text-sm mb-4">첫 번째 서버를 생성해보세요!</p>
|
|
<button @click="openLauncher()" class="px-5 py-2.5 bg-brand-500 text-white font-bold rounded-xl text-sm">
|
|
서버 생성
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Server Cards -->
|
|
<div x-show="!loadingServers && servers.length > 0" class="space-y-4">
|
|
<template x-for="server in servers" :key="server.id">
|
|
<div class="glass-card p-4 rounded-xl">
|
|
<!-- Header -->
|
|
<div class="flex justify-between items-start mb-3">
|
|
<div>
|
|
<h3 class="font-bold" x-text="server.name"></h3>
|
|
<p class="text-xs text-slate-400" x-text="server.region"></p>
|
|
</div>
|
|
<span class="px-2 py-1 rounded-full text-xs font-bold"
|
|
:class="server.status === 'running' ? 'bg-green-500/20 text-green-400' : 'bg-slate-700 text-slate-400'"
|
|
x-text="server.status === 'running' ? '실행 중' : '중지됨'"></span>
|
|
</div>
|
|
|
|
<!-- Info -->
|
|
<div class="grid grid-cols-2 gap-2 text-sm mb-3">
|
|
<div>
|
|
<span class="text-slate-400">IP:</span>
|
|
<code class="text-brand-400 text-xs ml-1" x-text="server.ip"></code>
|
|
</div>
|
|
<div>
|
|
<span class="text-slate-400">스펙:</span>
|
|
<span class="text-white text-xs ml-1" x-text="`${server.vcpu}C/${server.ram}`"></span>
|
|
</div>
|
|
<div>
|
|
<span class="text-slate-400">OS:</span>
|
|
<span class="text-white text-xs ml-1" x-text="server.os"></span>
|
|
</div>
|
|
<div>
|
|
<span class="text-slate-400">비용:</span>
|
|
<span class="text-brand-400 text-xs ml-1 font-bold" x-text="`₩${server.cost.toLocaleString()}`"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-2">
|
|
<button x-show="server.status === 'stopped'"
|
|
@click="startServer(server.id)"
|
|
:disabled="apiLoading"
|
|
class="flex-1 py-2 bg-green-500/20 text-green-400 rounded-lg text-sm font-medium disabled:opacity-50">
|
|
▶ 시작
|
|
</button>
|
|
<button x-show="server.status === 'running'"
|
|
@click="stopServer(server.id)"
|
|
:disabled="apiLoading"
|
|
class="flex-1 py-2 bg-yellow-500/20 text-yellow-400 rounded-lg text-sm font-medium disabled:opacity-50">
|
|
⏸ 중지
|
|
</button>
|
|
<button @click="deleteServer(server.id)"
|
|
:disabled="apiLoading"
|
|
class="px-4 py-2 bg-red-500/20 text-red-400 rounded-lg text-sm disabled:opacity-50">
|
|
🗑
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Stats View -->
|
|
<div x-show="currentView === 'stats'" class="space-y-4">
|
|
|
|
<!-- Summary -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="glass-card p-4 rounded-xl">
|
|
<div class="text-slate-400 text-xs mb-1">총 서버</div>
|
|
<div class="text-2xl font-bold" x-text="stats.totalServers"></div>
|
|
<div class="text-xs text-green-400"><span x-text="stats.runningServers"></span>개 실행</div>
|
|
</div>
|
|
<div class="glass-card p-4 rounded-xl">
|
|
<div class="text-slate-400 text-xs mb-1">예상 비용</div>
|
|
<div class="text-2xl font-bold text-brand-400" x-text="`₩${stats.totalCost.toLocaleString()}`"></div>
|
|
<div class="text-xs text-slate-500">이번 달</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Breakdown -->
|
|
<div class="glass-card p-4 rounded-xl">
|
|
<h3 class="font-bold mb-3">비용 상세</h3>
|
|
<div x-show="stats.costBreakdown.length === 0" class="text-center py-4 text-slate-400 text-sm">
|
|
서버가 없습니다
|
|
</div>
|
|
<div x-show="stats.costBreakdown.length > 0" class="space-y-2">
|
|
<template x-for="item in stats.costBreakdown" :key="item.name">
|
|
<div class="flex justify-between items-center py-2 border-b border-slate-700/50 last:border-0">
|
|
<div>
|
|
<div class="font-medium text-sm" x-text="item.name"></div>
|
|
<div class="text-xs text-slate-400" x-text="`${item.region} · ${item.plan}`"></div>
|
|
</div>
|
|
<div class="text-brand-400 font-bold text-sm" x-text="`₩${item.cost.toLocaleString()}`"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Notifications View -->
|
|
<div x-show="currentView === 'notifications'" class="space-y-3">
|
|
|
|
<div class="flex justify-between items-center mb-2">
|
|
<span class="text-sm text-slate-400">알림</span>
|
|
<button x-show="unreadCount > 0" @click="markAllRead()" class="text-xs text-brand-400">
|
|
모두 읽음
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div x-show="notifications.length === 0" class="glass-card p-12 rounded-xl text-center">
|
|
<div class="text-4xl mb-3">🔔</div>
|
|
<p class="text-slate-400 text-sm">새로운 알림이 없습니다</p>
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<template x-for="notif in notifications" :key="notif.id">
|
|
<div class="glass-card p-3 rounded-xl flex gap-3"
|
|
:class="!notif.read ? 'border-brand-500/30 bg-brand-500/5' : ''">
|
|
<div class="text-xl" x-text="notif.icon"></div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="font-medium text-sm" x-text="notif.title"></div>
|
|
<div class="text-xs text-slate-400 truncate" x-text="notif.message"></div>
|
|
<div class="text-xs text-slate-500 mt-1" x-text="notif.time"></div>
|
|
</div>
|
|
<div x-show="!notif.read" class="w-2 h-2 rounded-full bg-brand-500 mt-1"></div>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<!-- Cloud Instances View -->
|
|
<div x-show="currentView === 'cloud'" class="space-y-4">
|
|
|
|
<!-- API Status -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-bold">클라우드 인스턴스</h2>
|
|
<button @click="testApiHealth()"
|
|
:disabled="apiTestLoading"
|
|
class="px-3 py-1.5 text-xs bg-slate-700 hover:bg-slate-600 rounded-lg transition disabled:opacity-50">
|
|
<span x-show="!apiTestLoading">API 상태 확인</span>
|
|
<span x-show="apiTestLoading">확인 중...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- API Test Result -->
|
|
<div x-show="apiTestResult" class="glass-card p-3 rounded-xl text-sm mb-4"
|
|
:class="apiTestResult?.success ? 'border border-green-500/30' : 'border border-red-500/30'">
|
|
<div class="flex items-center gap-2">
|
|
<span x-text="apiTestResult?.success ? '✅' : '❌'"></span>
|
|
<span x-text="apiTestResult?.message"></span>
|
|
</div>
|
|
<div x-show="apiTestResult?.success && apiTestResult?.data" class="mt-2 text-xs text-slate-400">
|
|
<div>버전: <span x-text="apiTestResult?.data?.version"></span></div>
|
|
<div>DB 상태: <span x-text="apiTestResult?.data?.database?.connected ? '연결됨' : '연결 안됨'"></span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="glass-card p-4 rounded-xl">
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
<div>
|
|
<label class="text-xs text-slate-400 block mb-1">프로바이더</label>
|
|
<select x-model="cloudInstancesFilter.provider"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
|
|
<option value="">전체</option>
|
|
<option value="linode">Linode</option>
|
|
<option value="vultr">Vultr</option>
|
|
<option value="aws">AWS</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-slate-400 block mb-1">최소 vCPU</label>
|
|
<input type="number" x-model="cloudInstancesFilter.min_vcpu" placeholder="예: 2"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-slate-400 block mb-1">최대 가격 ($/h)</label>
|
|
<input type="number" x-model="cloudInstancesFilter.max_price" placeholder="예: 0.05" step="0.01"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
|
|
</div>
|
|
<div>
|
|
<label class="text-xs text-slate-400 block mb-1">정렬</label>
|
|
<select x-model="cloudInstancesFilter.sort_by"
|
|
class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm">
|
|
<option value="monthly_price">가격순</option>
|
|
<option value="vcpu">vCPU순</option>
|
|
<option value="memory_mb">메모리순</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button @click="fetchCloudInstances()"
|
|
:disabled="cloudInstancesLoading"
|
|
class="mt-3 w-full py-2 bg-brand-500 hover:bg-brand-600 text-white font-bold rounded-lg text-sm disabled:opacity-50 transition">
|
|
<span x-show="!cloudInstancesLoading">🔍 검색</span>
|
|
<span x-show="cloudInstancesLoading">검색 중...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div x-show="cloudInstancesError" class="glass-card p-4 rounded-xl border border-red-500/30 text-red-400 text-sm">
|
|
<span>❌</span> <span x-text="cloudInstancesError"></span>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div x-show="cloudInstancesLoading" class="text-center py-8">
|
|
<div class="animate-spin w-8 h-8 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
|
|
<p class="text-slate-400 mt-3 text-sm">인스턴스 조회 중...</p>
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div x-show="!cloudInstancesLoading && cloudInstances.length > 0" class="space-y-3">
|
|
<div class="text-sm text-slate-400 mb-2">
|
|
<span x-text="cloudInstances.length"></span>개 인스턴스
|
|
</div>
|
|
|
|
<template x-for="instance in cloudInstances" :key="instance.id">
|
|
<div class="glass-card p-4 rounded-xl hover:border-brand-500/30 transition">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<div class="font-bold text-sm" x-text="instance.instance_name"></div>
|
|
<div class="text-xs text-slate-400">
|
|
<span x-text="instance.provider?.display_name || instance.provider?.name"></span>
|
|
<span x-show="instance.region"> · </span>
|
|
<span x-text="instance.region?.region_name"></span>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-brand-400 font-bold" x-text="instance.pricing ? formatUsd(instance.pricing.monthly_price) + '/월' : '-'"></div>
|
|
<div class="text-xs text-slate-500" x-text="instance.pricing ? formatUsd(instance.pricing.hourly_price) + '/시간' : ''"></div>
|
|
</div>
|
|
</div>
|
|
<div class="flex gap-4 text-xs text-slate-300">
|
|
<span><span class="text-slate-500">vCPU:</span> <span x-text="instance.vcpu"></span></span>
|
|
<span><span class="text-slate-500">RAM:</span> <span x-text="formatMemory(instance.memory_mb)"></span></span>
|
|
<span><span class="text-slate-500">Storage:</span> <span x-text="instance.storage_gb + ' GB'"></span></span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty -->
|
|
<div x-show="!cloudInstancesLoading && !cloudInstancesError && cloudInstances.length === 0" class="glass-card p-8 rounded-xl text-center">
|
|
<div class="text-4xl mb-3">🔍</div>
|
|
<p class="text-slate-400 text-sm">검색 버튼을 눌러 인스턴스를 조회하세요</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Server Launcher Modal -->
|
|
<div x-show="launcherOpen"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
|
|
@click.self="closeLauncher()">
|
|
|
|
<div class="w-full max-w-lg bg-dark-800 rounded-t-2xl sm:rounded-2xl border border-slate-700/50 max-h-[80vh] overflow-y-auto"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 translate-y-4"
|
|
x-transition:enter-end="opacity-100 translate-y-0">
|
|
|
|
<!-- Modal Header -->
|
|
<div class="sticky top-0 bg-dark-800 px-4 py-3 border-b border-slate-700/50 flex justify-between items-center">
|
|
<h2 class="font-bold">새 서버 생성</h2>
|
|
<button @click="closeLauncher()" class="p-1 hover:bg-slate-700 rounded-lg">
|
|
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Wizard Content -->
|
|
<div class="p-4">
|
|
|
|
<!-- Step 1: Region -->
|
|
<div x-show="wizardStep === 1" class="space-y-3">
|
|
<p class="text-sm text-slate-400 mb-3">리전을 선택하세요</p>
|
|
<template x-for="region in regions" :key="region.id">
|
|
<button @click="selectRegion(region)"
|
|
:class="config.region === region.name ? 'border-brand-500 bg-brand-500/10' : 'border-slate-700 hover:border-slate-600'"
|
|
class="w-full p-3 rounded-xl border text-left flex items-center gap-3 transition">
|
|
<span class="text-xl" x-text="region.flag"></span>
|
|
<div>
|
|
<div class="font-medium" x-text="region.name"></div>
|
|
<div class="text-xs text-slate-400" x-text="region.city"></div>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Step 2: Plan -->
|
|
<div x-show="wizardStep === 2" class="space-y-3">
|
|
<p class="text-sm text-slate-400 mb-3">플랜을 선택하세요</p>
|
|
<template x-for="(plan, idx) in pricingTable" :key="plan.name">
|
|
<button @click="selectPlan(plan)"
|
|
:class="config.plan === plan.name ? 'border-brand-500 bg-brand-500/10' : 'border-slate-700 hover:border-slate-600'"
|
|
class="w-full p-3 rounded-xl border text-left flex justify-between items-center transition">
|
|
<div>
|
|
<div class="font-medium" x-text="plan.name"></div>
|
|
<div class="text-xs text-slate-400" x-text="`${plan.vcpu} vCPU / ${plan.ram} RAM`"></div>
|
|
</div>
|
|
<div class="text-brand-400 font-bold text-sm" x-text="`₩${plan.price.toLocaleString()}`"></div>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Step 3: OS -->
|
|
<div x-show="wizardStep === 3" class="space-y-3">
|
|
<p class="text-sm text-slate-400 mb-3">OS를 선택하세요</p>
|
|
<template x-for="os in osList" :key="os">
|
|
<button @click="selectOS(os)"
|
|
:class="config.os === os ? 'border-brand-500 bg-brand-500/10' : 'border-slate-700 hover:border-slate-600'"
|
|
class="w-full p-3 rounded-xl border text-left transition">
|
|
<span x-text="os"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Step 4: Confirm -->
|
|
<div x-show="wizardStep === 4" class="space-y-4">
|
|
<p class="text-sm text-slate-400 mb-3">설정을 확인하세요</p>
|
|
<div class="glass-card p-4 rounded-xl space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">리전</span>
|
|
<span x-text="config.region"></span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">플랜</span>
|
|
<span x-text="config.plan"></span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-slate-400">OS</span>
|
|
<span x-text="config.os"></span>
|
|
</div>
|
|
</div>
|
|
<button @click="startLaunch()"
|
|
:disabled="launching"
|
|
class="w-full py-3 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl disabled:opacity-50">
|
|
<span x-show="!launching">🚀 서버 생성</span>
|
|
<span x-show="launching">생성 중...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Step 5: Deploying -->
|
|
<div x-show="wizardStep === 5" class="space-y-4">
|
|
<div class="text-center py-4">
|
|
<div class="animate-spin w-10 h-10 border-4 border-brand-500 border-t-transparent rounded-full mx-auto mb-4"></div>
|
|
<p class="text-sm text-slate-400">서버를 생성하고 있습니다...</p>
|
|
</div>
|
|
<div class="glass-card p-3 rounded-xl text-xs font-mono text-slate-400 max-h-32 overflow-y-auto">
|
|
<template x-for="log in logs" :key="log">
|
|
<div x-text="log"></div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Modal Footer -->
|
|
<div x-show="wizardStep < 5" class="px-4 py-3 border-t border-slate-700/50 flex justify-between">
|
|
<button @click="wizardStep > 1 ? wizardStep-- : closeLauncher()"
|
|
class="px-4 py-2 text-slate-400 hover:text-white text-sm">
|
|
<span x-text="wizardStep === 1 ? '취소' : '이전'"></span>
|
|
</button>
|
|
<div class="text-xs text-slate-500" x-text="`${wizardStep}/4`"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|