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

222
index.html
View File

@@ -106,10 +106,6 @@
<!-- Main Content -->
<main id="main-content">
<!-- Landing Page (Web Users) -->
<template x-if="!dashboardMode">
<div>
<!-- Hero Section -->
<section class="relative pt-24 pb-20 overflow-hidden grid-bg gradient-bg noise-bg">
<!-- Animated Blobs -->
@@ -732,224 +728,6 @@
</div>
</section>
</div>
</template>
<!-- End Landing Page -->
<!-- Dashboard (Telegram Users) -->
<template x-if="dashboardMode">
<div class="max-w-7xl mx-auto px-6 py-24">
<!-- Dashboard Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-8">
<div>
<h1 class="text-3xl font-bold">
안녕하세요<template x-if="telegram.user">, <span class="text-brand-400" x-text="telegram.user?.first_name || telegram.user?.username"></span>님</template><template x-if="!telegram.user">!</template>
</h1>
<p class="text-slate-400 mt-1">서버를 관리하고 사용량을 확인하세요</p>
</div>
<button @click="openLauncher()" class="px-6 py-3 bg-gradient-to-r from-brand-600 to-brand-500 text-white font-bold rounded-xl hover:shadow-lg hover:shadow-brand-500/30 transition-all flex items-center gap-2">
<span>+</span> 새 서버 생성
</button>
</div>
<!-- Tab Navigation -->
<div class="flex gap-1 mb-8 bg-slate-800/50 p-1 rounded-xl w-fit">
<button @click="switchView('servers')"
:class="currentView === 'servers' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
class="px-5 py-2.5 rounded-lg font-medium transition-all">
내 서버 (<span x-text="servers.length"></span>)
</button>
<button @click="switchView('stats')"
:class="currentView === 'stats' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
class="px-5 py-2.5 rounded-lg font-medium transition-all">
사용량/비용
</button>
<button @click="switchView('notifications')"
:class="currentView === 'notifications' ? 'bg-brand-500 text-white shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
class="px-5 py-2.5 rounded-lg font-medium transition-all relative">
알림
<span x-show="unreadCount > 0"
x-transition
class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
x-text="unreadCount"></span>
</button>
</div>
<!-- Server List View -->
<div x-show="currentView === 'servers'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
<!-- Loading State -->
<div x-show="loadingServers" class="text-center py-16">
<div class="animate-spin w-12 h-12 border-4 border-brand-500 border-t-transparent rounded-full mx-auto"></div>
<p class="text-slate-400 mt-4">서버 목록을 불러오는 중...</p>
</div>
<!-- Empty State -->
<div x-show="!loadingServers && servers.length === 0" class="glass-card p-16 rounded-2xl text-center">
<div class="text-6xl mb-4">🚀</div>
<h3 class="text-xl font-bold mb-2">아직 서버가 없습니다</h3>
<p class="text-slate-400 mb-6">첫 번째 서버를 생성해보세요!</p>
<button @click="openLauncher()" class="px-6 py-3 bg-brand-500 hover:bg-brand-400 text-white font-bold rounded-xl transition">
서버 생성하기
</button>
</div>
<!-- Server Cards Grid -->
<div x-show="!loadingServers && servers.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<template x-for="server in servers" :key="server.id">
<div class="glass-card p-6 rounded-2xl hover:border-brand-500/50 transition-all duration-300 group">
<!-- Server Header -->
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-bold text-lg group-hover:text-brand-400 transition" x-text="server.name"></h3>
<p class="text-sm text-slate-400" x-text="server.region"></p>
</div>
<span class="px-3 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>
<!-- Server Info -->
<div class="space-y-2 text-sm mb-4">
<div class="flex justify-between">
<span class="text-slate-400">IP</span>
<code class="text-brand-400 bg-black/30 px-2 py-0.5 rounded text-xs font-mono" x-text="server.ip"></code>
</div>
<div class="flex justify-between">
<span class="text-slate-400">스펙</span>
<span class="text-white" x-text="`${server.vcpu} vCPU / ${server.ram}`"></span>
</div>
<div class="flex justify-between">
<span class="text-slate-400">OS</span>
<span class="text-white" x-text="server.os"></span>
</div>
<div class="flex justify-between">
<span class="text-slate-400">비용</span>
<span class="text-brand-400 font-bold" x-text="`₩${server.cost.toLocaleString()}/월`"></span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex gap-2 pt-4 border-t border-slate-700/50">
<button x-show="server.status === 'stopped'"
@click="startServer(server.id)"
:disabled="apiLoading"
class="flex-1 py-2 bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
▶ 시작
</button>
<button x-show="server.status === 'running'"
@click="stopServer(server.id)"
:disabled="apiLoading"
class="flex-1 py-2 bg-yellow-500/20 hover:bg-yellow-500/30 text-yellow-400 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
⏸ 중지
</button>
<button @click="deleteServer(server.id)"
:disabled="apiLoading"
class="px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed">
🗑
</button>
</div>
</div>
</template>
</div>
</div>
<!-- Stats View -->
<div x-show="currentView === 'stats'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="space-y-6">
<!-- Summary Cards -->
<div class="grid md:grid-cols-3 gap-6">
<div class="glass-card p-6 rounded-2xl">
<div class="text-slate-400 text-sm mb-2">총 서버 수</div>
<div class="text-3xl font-bold" x-text="stats.totalServers"></div>
<div class="text-xs text-green-400 mt-1">
<span x-text="stats.runningServers"></span>개 실행 중
</div>
</div>
<div class="glass-card p-6 rounded-2xl">
<div class="text-slate-400 text-sm mb-2">이번 달 예상 비용</div>
<div class="text-3xl font-bold text-brand-400" x-text="`₩${stats.totalCost.toLocaleString()}`"></div>
<div class="text-xs text-slate-500 mt-1">VAT 별도</div>
</div>
<div class="glass-card p-6 rounded-2xl">
<div class="text-slate-400 text-sm mb-2">평균 서버당 비용</div>
<div class="text-3xl font-bold" x-text="stats.totalServers > 0 ? `₩${Math.round(stats.totalCost / stats.totalServers).toLocaleString()}` : '₩0'"></div>
<div class="text-xs text-slate-500 mt-1">월 기준</div>
</div>
</div>
<!-- Cost Breakdown -->
<div class="glass-card p-6 rounded-2xl">
<h3 class="font-bold text-lg mb-4">서버별 비용 상세</h3>
<div x-show="stats.costBreakdown.length === 0" class="text-center py-8 text-slate-400">
서버가 없습니다
</div>
<div x-show="stats.costBreakdown.length > 0" class="space-y-3">
<template x-for="item in stats.costBreakdown" :key="item.name">
<div class="flex justify-between items-center py-3 border-b border-slate-700/50 last:border-0">
<div>
<div class="font-semibold" 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" x-text="`₩${item.cost.toLocaleString()}`"></div>
</div>
</template>
</div>
</div>
<!-- Monthly Usage Chart Placeholder -->
<div class="glass-card p-6 rounded-2xl">
<h3 class="font-bold text-lg mb-4">월별 비용 추이</h3>
<div class="h-48 flex items-center justify-center text-slate-500 border border-dashed border-slate-700 rounded-xl">
📊 차트 영역 (추후 구현 예정)
</div>
</div>
</div>
<!-- Notifications View -->
<div x-show="currentView === 'notifications'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="space-y-4">
<div class="flex justify-between items-center">
<h2 class="text-xl font-bold">알림</h2>
<button x-show="unreadCount > 0" @click="markAllRead()" class="text-sm text-brand-400 hover:text-brand-300 hover:underline transition">
모두 읽음 처리
</button>
</div>
<!-- Empty State -->
<div x-show="notifications.length === 0" class="glass-card p-16 rounded-2xl text-center">
<div class="text-6xl mb-4">🔔</div>
<h3 class="text-xl font-bold mb-2">새로운 알림이 없습니다</h3>
<p class="text-slate-400">서버 상태 변경 시 알림을 받을 수 있습니다</p>
</div>
<!-- Notification List -->
<div x-show="notifications.length > 0" class="space-y-3">
<template x-for="notif in notifications" :key="notif.id">
<div class="glass-card p-4 rounded-xl flex gap-4 transition-all duration-300"
:class="!notif.read ? 'border-brand-500/30 bg-brand-500/5' : 'hover:border-slate-600'">
<div class="text-2xl" x-text="notif.icon"></div>
<div class="flex-1 min-w-0">
<div class="font-semibold" x-text="notif.title"></div>
<div class="text-sm 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-2 flex-shrink-0"></div>
</div>
</template>
</div>
</div>
</div>
</template>
<!-- End Dashboard -->
</main>
<!-- End Main Content -->