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

refactor: 미니앱 페이지 분리 (/app)

Browse Source 
- /app → 텔레그램 미니앱 전용 대시보드
- / → 랜딩 페이지 (마케팅)
- initMiniApp() 메서드 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-22 13:53:38 +09:00
parent ea35848a97
commit 4c64346787
3 changed files with 412 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
app/index.html Normal file
View File

@@ -0,0 +1,388 @@
<!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>
</head>
<body x-data="anvilApp()" x-init="initMiniApp()" class="font-sans antialiased">
<!-- Not Telegram Warning -->
<template x-if="!telegram.isAvailable">
<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">
<div class="text-6xl mb-4">🔒</div>
<h1 class="text-2xl font-bold mb-2">텔레그램 전용 페이지</h1>
<p class="text-slate-400 mb-6">이 페이지는 텔레그램 미니앱에서만 접근할 수 있습니다.</p>
<a href="https://t.me/AnvilForgeBot"
class="inline-flex items-center gap-2 px-6 py-3 bg-brand-500 text-white font-bold rounded-xl hover:bg-brand-400 transition">
<svg class="w-5 h-5" 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>
</template>
<!-- Dashboard (Telegram Only) -->
<template x-if="telegram.isAvailable">
<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>
<template x-if="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>
</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="telegram.user">
<span>안녕하세요, <span class="text-brand-400" x-text="telegram.user.first_name || telegram.user.username"></span>님</span>
</template>
<template x-if="!telegram.user">
<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>
</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>
</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>