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

feat: Global 서브탭 추가 (Standard/Dedicated/Premium/High Memory)

Browse Source 
- 도쿄/오사카/싱가폴을 단일 탭으로 통합 (동일 가격)
- Linode 인스턴스 타입별 서브탭 필터링 추가
- 서브탭 설명 개선 (공유 CPU, 전용 CPU, AMD EPYC, 대용량 RAM)
- GPU Japan 렌더링 이슈 수정 (template key 중복 문제)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-23 01:57:34 +09:00
parent 4c64346787
commit 570ae8f49b
2 changed files with 957 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
index.html
View File

@@ -29,7 +29,7 @@
<meta name="twitter:image" content="https://hosting.anvil.it.com/og-image.png">
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%230ea5e9' rx='20' width='100' height='100'/><text x='50' y='70' font-size='60' text-anchor='middle' fill='white' font-family='sans-serif' font-weight='bold'>A</text></svg>">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Telegram Web App SDK -->
<script src="https://telegram.org/js/telegram-web-app.js"></script>
@@ -584,7 +584,7 @@
<div class="absolute bottom-1/4 -left-32 w-96 h-96 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="text-center mb-16 animate-on-scroll">
<div class="text-center mb-8 animate-on-scroll">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-panel text-sm text-slate-300 mb-6">
<span class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
투명한 가격 정책
@@ -594,77 +594,191 @@
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
</div>
<!-- Pricing Tabs -->
<div x-data="pricingTable()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
<!-- Tab Buttons -->
<div class="flex justify-center mb-8">
<div class="glass-panel p-1.5 rounded-2xl inline-flex gap-1">
<button @click="region = 'global'" :class="region === 'global' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30 border-b-2 border-b-white/60' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🌏 Global</span>
<span class="text-[10px] font-normal opacity-80">(Tokyo/SG/HK)</span>
</button>
<button @click="region = 'seoul'" :class="region === 'seoul' ? 'bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg shadow-brand-500/30 border-b-2 border-b-white/60' : 'text-slate-400 hover:text-white hover:bg-white/5'" class="px-6 py-3 rounded-xl text-sm font-bold transition-all flex items-center gap-2">
<span>🇰🇷 Seoul</span>
<span class="text-[10px] font-normal opacity-80">(Premium)</span>
<!-- Real-time Cloud Pricing -->
<div x-data="pricingTable()" x-init="init()" class="glass-card-static p-8 rounded-3xl mb-12 animate-on-scroll">
<!-- Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
<div class="flex items-center gap-3">
<span class="text-lg font-bold text-white">🔥 Forge Instances</span>
<span x-show="fromCache" class="text-xs text-slate-500 glass-panel px-2 py-1 rounded">캐시됨</span>
</div>
<button @click="forceRefresh()" :disabled="loading" class="p-2 glass-panel rounded-lg hover:bg-slate-700 transition disabled:opacity-50" title="새로고침">
<svg class="w-5 h-5 text-slate-400" :class="loading && 'animate-spin'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
</button>
</div>
<!-- City Tabs -->
<div class="flex flex-wrap gap-2 mb-4">
<template x-for="city in cities" :key="city.id">
<button
@click="selectedCity = city.id; onFilterChange()"
:class="selectedCity === city.id
? 'bg-brand-500 text-white border-brand-500'
: 'bg-transparent text-slate-400 border-slate-600 hover:border-slate-500 hover:text-white'"
class="px-4 py-2 rounded-lg border text-sm font-medium transition-all flex items-center gap-2"
:title="city.desc || ''">
<span x-text="city.flag"></span>
<span x-text="city.name"></span>
<span x-show="city.desc" class="text-[10px] opacity-60 hidden md:inline" x-text="city.desc"></span>
<span class="text-xs opacity-70" x-text="'(' + getInstanceCountByCity(city.id) + ')'"></span>
</button>
</template>
</div>
<!-- Seoul Subtabs (서울 선택 시 인스턴스 타입 필터) -->
<div x-show="selectedCity === 'seoul'" x-transition class="mb-4">
<div class="glass-panel rounded-xl p-1 inline-flex gap-1">
<template x-for="type in seoulTypes" :key="type.id">
<button
@click="selectedSeoulType = type.id; onFilterChange()"
:class="selectedSeoulType === type.id
? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
: 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
:title="type.desc">
<span x-text="type.name"></span>
<span class="text-[10px] opacity-60" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
</button>
</template>
</div>
</div>
<!-- Dynamic Pricing Table -->
<div x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-95" x-transition:enter-end="opacity-100 transform scale-100">
<div class="overflow-x-auto">
<table class="w-full text-left font-sans"
aria-label="서버 요금 비교표 - 리전 및 플랜별 가격 정보">
<caption class="sr-only">
서버 요금은 월간 기준입니다. 글로벌 리전(도쿄, 싱가포르, 홍콩)과 서울 프리미엄 리전 중에서 선택할 수 있습니다.
</caption>
<thead>
<tr class="text-slate-500 text-sm border-b border-slate-700">
<th class="pb-4 font-medium pl-4">Plan</th>
<th class="pb-4 font-medium text-center">vCPU</th>
<th class="pb-4 font-medium text-center">RAM</th>
<th class="pb-4 font-medium text-center" :class="isSeoul() ? 'text-green-400' : ''">
<span x-text="isSeoul() ? 'SSD (High)' : 'SSD'"></span>
</th>
<th class="pb-4 font-medium text-center">Transfer</th>
<th class="pb-4 font-medium text-right pr-4">Price / Month</th>
</tr>
</thead>
<tbody class="text-slate-300 text-sm">
<template x-for="(plan, index) in plans" :key="plan.plan">
<tr :class="plan.featured
? 'border-b border-slate-700/50 bg-brand-500/5 hover:bg-brand-500/10 transition border-l-4 border-l-brand-500'
: (index < plans.length - 1 ? 'border-b border-slate-700/50 hover:bg-slate-800/50 transition' : 'hover:bg-slate-800/50 transition')">
<td :class="plan.featured ? 'py-4 pl-3 font-bold text-brand-400' : 'py-4 pl-4 font-bold text-white'">
<span x-text="plan.plan"></span>
<span x-show="plan.featured"> ⭐</span>
</td>
<td :class="plan.featured ? 'text-center text-brand-400 font-bold' : 'text-center text-brand-400'" x-text="plan.vcpu"></td>
<td :class="plan.featured ? 'text-center font-bold' : 'text-center'" x-text="plan.ram"></td>
<td :class="isSeoul() ? 'text-center text-green-400 font-bold' : 'text-center'" x-text="plan.ssd"></td>
<td class="text-center" x-text="plan.transfer"></td>
<td :class="plan.featured ? 'text-right pr-4 font-bold text-lg text-brand-400' : 'text-right pr-4 font-bold text-lg'" x-text="formatPrice(plan.price)"></td>
<!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
<div x-show="selectedCity === 'global'" x-transition class="mb-4">
<div class="glass-panel rounded-xl p-1 inline-flex gap-1">
<template x-for="type in globalTypes" :key="type.id">
<button
@click="selectedGlobalType = type.id; onFilterChange()"
:class="selectedGlobalType === type.id
? 'bg-brand-500/20 text-brand-400 shadow-lg shadow-brand-500/10'
: 'text-slate-400 hover:text-white hover:bg-slate-700/50'"
class="px-3 py-1.5 rounded-lg text-xs font-medium transition-all flex items-center gap-1.5"
:title="type.desc">
<span x-text="type.name"></span>
<span class="text-[10px] opacity-60" x-text="'(' + getGlobalTypeCount(type.id) + ')'"></span>
</button>
</template>
</div>
</div>
<!-- GPU 탭에서 간격 맞추기 -->
<div x-show="selectedCity.startsWith('gpu-')" class="mb-4"></div>
<!-- Status Bar -->
<div class="flex justify-between items-center mb-4 text-xs text-slate-500">
<span x-show="!loading && !error">
<span x-text="filteredInstances.length"></span>개 인스턴스
<span x-show="selectedCity !== 'all'"> · <span x-text="cities.find(c => c.id === selectedCity)?.name"></span></span>
<span x-show="selectedCity === 'seoul'"> · <span x-text="seoulTypes.find(t => t.id === selectedSeoulType)?.name"></span></span>
<span x-show="selectedCity === 'global'"> · <span x-text="globalTypes.find(t => t.id === selectedGlobalType)?.name"></span></span>
</span>
<span x-show="loading" class="flex items-center gap-2">
<svg class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
</svg>
불러오는 중...
</span>
</div>
<!-- Error State -->
<div x-show="error" class="mb-4 p-4 bg-red-500/10 border border-red-500/30 rounded-lg text-red-400 text-sm">
<span x-text="error"></span>
<button @click="refresh()" class="ml-2 underline hover:no-underline">다시 시도</button>
</div>
<!-- Pricing Table -->
<div x-show="!error" x-transition class="overflow-x-auto">
<table class="w-full text-left font-sans" aria-label="클라우드 인스턴스 가격 비교표">
<caption class="sr-only">실시간 클라우드 인스턴스 가격입니다.</caption>
<thead>
<tr class="text-slate-500 text-sm border-b border-slate-700">
<!-- GPU 컬럼 (GPU 탭에서만 표시) -->
<th x-show="selectedCity.startsWith('gpu-')" class="pb-4 font-medium pl-4 text-left">GPU 모델</th>
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" :class="!selectedCity.startsWith('gpu-') && 'pl-4'" @click="toggleSort('vcpu')">
vCPU <span x-show="sortBy === 'vcpu'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
</th>
<th class="pb-4 font-medium text-center cursor-pointer hover:text-white transition" @click="toggleSort('memory')">
RAM <span x-show="sortBy === 'memory'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
</th>
<th class="pb-4 font-medium text-center">Storage</th>
<th class="pb-4 font-medium text-center">Transfer</th>
<th class="pb-4 font-medium text-right">시간요금</th>
<th class="pb-4 font-medium text-right pr-4 cursor-pointer hover:text-white transition" @click="toggleSort('price')">
월요금 <span x-show="sortBy === 'price'" class="text-brand-400" x-text="sortOrder === 'asc' ? '↑' : '↓'"></span>
</th>
</tr>
</thead>
<tbody class="text-slate-300 text-sm">
<!-- Loading Skeleton -->
<template x-if="loading && filteredInstances.length === 0">
<template x-for="i in 5" :key="i">
<tr class="border-b border-slate-700/50 animate-pulse">
<td class="py-4 pl-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-12 mx-auto"></div></td>
<td class="py-4 text-center"><div class="h-4 bg-slate-700 rounded w-10 mx-auto"></div></td>
<td class="py-4 text-right"><div class="h-4 bg-slate-700 rounded w-16 ml-auto"></div></td>
<td class="py-4 pr-4 text-right"><div class="h-4 bg-slate-700 rounded w-20 ml-auto"></div></td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
<!-- Global Note -->
<p x-show="!isSeoul()" class="mt-4 text-center text-xs text-slate-500">
* 🇯🇵 도쿄, 🇸🇬 싱가포르 기준 요금입니다. 🇭🇰 홍콩 리전은 약 10%의 추가 요금이 발생할 수 있습니다.
</p>
<!-- Instance Rows -->
<template x-for="(inst, idx) in filteredInstances" :key="inst.id + '-' + (inst.region?.region_code || idx)">
<tr class="border-b border-slate-700/50 hover:bg-slate-800/50 transition" :class="idx === 0 && 'bg-brand-500/5 border-l-4 border-l-brand-500'">
<!-- GPU (GPU 탭에서만 표시) -->
<td x-show="selectedCity.startsWith('gpu-')" class="py-4 pl-4 text-left">
<div class="flex flex-col gap-0.5">
<span class="text-green-400 font-bold text-sm" x-text="inst.instance_name || inst.gpu_type"></span>
<span class="text-[10px] text-slate-500" x-text="inst.gpu_count > 1 ? inst.gpu_count + '× GPU' : ''"></span>
</div>
</td>
<!-- vCPU -->
<td class="py-4 text-center" :class="!selectedCity.startsWith('gpu-') && 'pl-4'">
<span class="text-brand-400 font-bold" x-text="inst.vcpu + ' Core' + (inst.vcpu > 1 ? 's' : '')"></span>
<span x-show="inst.id && inst.id.endsWith('-v6')" class="ml-1 text-[10px] px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded font-medium">IPv6 only</span>
</td>
<!-- RAM -->
<td class="py-4 text-center" x-text="formatMemory(inst.memory_mb)"></td>
<!-- Storage -->
<td class="py-4 text-center">
<span x-text="formatStorage(inst.storage_gb)"></span>
<span x-show="inst.storage_gb && inst.storage_gb <= 1" class="ml-1 text-[10px] px-1.5 py-0.5 bg-amber-500/20 text-amber-400 rounded font-medium">블록 스토리지 전용</span>
</td>
<!-- Transfer -->
<td class="py-4 text-center" x-text="formatTransfer(inst.transfer_tb)"></td>
<!-- 시간당 요금 (DB에서 가져온 한화 금액) -->
<td class="py-4 text-right">
<div class="text-sm text-slate-400" x-text="formatKrwHourly(inst.pricing?.hourly_price_krw)"></div>
</td>
<!-- 월 요금 (DB에서 가져온 한화 금액) -->
<td class="py-4 pr-4 text-right">
<div class="font-bold text-lg" :class="idx === 0 ? 'text-brand-400' : 'text-white'" x-text="formatKrw(inst.pricing?.monthly_price_krw)"></div>
</td>
</tr>
</template>
<!-- Seoul Enterprise Note -->
<div x-show="isSeoul()" class="mt-6 p-4 bg-slate-800/50 rounded-lg border border-slate-700 flex flex-col md:flex-row justify-between items-center gap-4">
<div class="text-xs text-slate-400">
<span class="text-white font-bold block mb-1">더 강력한 성능이 필요하신가요?</span>
AWS EC2 기반의 고성능(4 vCPU+) 인스턴스는 별도 문의 바랍니다. (VPC Peering 지원)
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white text-xs font-bold rounded transition">
Enterprise 문의 →
</a>
</div>
<!-- Empty State -->
<template x-if="!loading && filteredInstances.length === 0 && !error">
<tr>
<td :colspan="selectedCity.startsWith('gpu-') ? 7 : 6" class="py-12 text-center text-slate-500">
선택한 조건에 맞는 인스턴스가 없습니다.
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- Footer Note -->
<div class="mt-6 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500">
<p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white font-bold rounded transition flex items-center gap-2">
<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>