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

refactor: 가격표 섹션 히어로 아래로 이동 및 탭 스타일 통일

Browse Source 
- 가격표 섹션을 페이지 하단에서 히어로 바로 아래로 이동
- 상단 패딩 축소 (py-24 → pt-12 pb-24)
- 서브탭(서울/글로벌 타입) 스타일을 메인탭과 동일하게 통일
- Pages Functions API 프록시 추가 (functions/)
- wrangler.toml 및 TypeScript 설정 추가

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-23 09:19:01 +09:00
parent 570ae8f49b
commit d08d1895d0
15 changed files with 1056 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
app/index.html
View File

@@ -23,27 +23,50 @@
<!-- 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">
<!-- 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">
<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>
<!-- 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 Only) -->
<template x-if="telegram.isAvailable">
<!-- Dashboard (Telegram MiniApp OR Web Logged In) -->
<template x-if="telegram.isAvailable || webUser">
<div class="min-h-screen">
<!-- Header -->
@@ -53,11 +76,27 @@
<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>
<!-- 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>
@@ -68,10 +107,10 @@
<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 x-if="currentUser">
<span>안녕하세요, <span class="text-brand-400" x-text="currentUser.first_name || currentUser.username"></span>님</span>
</template>
<template x-if="!telegram.user">
<template x-if="!currentUser">
<span>대시보드</span>
</template>
</h1>
@@ -102,6 +141,11 @@
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 -->
@@ -254,6 +298,124 @@
</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>