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

4
.env.example
View File

@@ -6,3 +6,7 @@ VAULT_NAMESPACE=admin # (옵션) 기업용/클라우드 사용 시 필요
# API Path Example (KV Engine v2)
# 예: secret/data/anvil-hosting -> VAULT_SECRET_PATH=secret/data/anvil-hosting
VAULT_SECRET_PATH=secret/data/production
# Cloudflare Pages Functions (API Proxy)
# API Key for Worker authentication
WORKER_API_KEY=your-api-key-here

24
CLAUDE.md
View File

@@ -19,12 +19,23 @@ No build step required - deploy directly.
## Architecture
Multi-file static website:
Multi-file static website with serverless API proxy:
- `index.html` - 메인 랜딩 페이지 (~1000줄)
- `style.css` - Tailwind CSS 빌드 결과
- `fonts.css` - 시스템 폰트 정의
- `app.js` - Alpine.js 앱 로직 (Server Launcher, Pricing Table 등)
- `terms.html`, `privacy.html`, `sla.html` - 법적 페이지
- `functions/` - Cloudflare Pages Functions (API proxy)
### API Endpoints (Pages Functions)
| Method | Path | Description |
|--------|------|-------------|
| GET | `/api/health` | Health check |
| GET | `/api/instances` | Query VM instances |
| POST | `/api/recommend` | Tech stack recommendations |
**Proxy Target**: https://cloud-instances-api.kappa-d8e.workers.dev
### Tech Stack
- Tailwind CSS v4 (로컬 빌드, `style.css`)
@@ -48,5 +59,16 @@ Navigation → Hero (Telegram Bot Demo) → Features (`#features`) → Automatio
## External Integrations
- **Telegram Bot**: @AnvilForgeBot (서버 생성, 도메인 등록)
- **Worker API**: cloud-instances-api (VM pricing aggregator)
- **Credentials**: Stored in Vault at https://vault.anvil.it.com
- **Registrant Info Source**: npm-linode-1 server (`/home/admin/namecheap_api/.env`)
## Environment Configuration
### Secrets (set via Cloudflare Dashboard or CLI)
```bash
wrangler pages secret put WORKER_API_KEY
```
### Variables (wrangler.toml)
- `WORKER_API_URL` - Worker API base URL

45
README.md
View File

@@ -1,19 +1,50 @@
# Anvil Hosting - Cloudflare Pages
# Anvil Hosting
공식 웹사이트: https://hosting.anvil.it.com
Static HTML 마케팅 웹사이트 - Cloudflare Pages 배포
**URL**: https://hosting.anvil.it.com
## 배포
```bash
cd /Users/kaffa/anvil-hosting
wrangler pages deploy . --project-name anvil-hosting
```
## 구성
빌드 단계 없이 바로 배포.
- **로고**: 3D 메탈릭 모루 + 대장간 망치 + 불꽃 (SVG)
- **서비스 순서**: 도메인 → DDoS → 해외서버 → 웹호스팅
- **푸터 사업자 정보**: namecheap-api 등록자 정보와 동일
## 아키텍처
### 파일 구조
- `index.html` - 메인 랜딩 페이지
- `style.css` - Tailwind CSS v4 빌드 결과
- `fonts.css` - 시스템 폰트 정의
- `app.js` - Alpine.js 앱 로직 (Server Launcher, Pricing Table 등)
- `terms.html`, `privacy.html`, `sla.html` - 법적 페이지
### Tech Stack
- Tailwind CSS v4 (로컬 빌드)
- Alpine.js 3.14.3 (CDN with SRI)
- 시스템 폰트 (-apple-system, Apple SD Gothic Neo, Malgun Gothic)
### 디자인 시스템
- 다크 테마 (배경: #0a0f1a)
- 글래스모피즘 효과 (glass-card, glass-panel)
- 메시 그라디언트 배경
- Color palette: brand-* (sky blue 계열), purple, green, red
## 페이지 섹션
Navigation → Hero (Telegram Bot Demo) → Features → Automation → Infrastructure → Domain → Pricing → Footer
## 주요 컴포넌트
- **Server Launcher Modal**: Alpine.js 기반 서버 생성 마법사
- **Pricing Table**: 리전별 (Global/Seoul) 동적 요금표
- **Telegram Bot Demo**: Hero 섹션 대화형 데모
## 외부 연동
- **Telegram Bot**: @AnvilForgeBot (서버 생성, 도메인 등록)
## 등록자 정보 소스

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>

88
functions/README.md Normal file
View File

@@ -0,0 +1,88 @@
# Cloudflare Pages Functions
API proxy endpoints for cloud-instances-api Worker.
## Endpoints
| Method | Path | Description |
|--------|------|-------------|
| GET | `/api/health` | Health check |
| GET | `/api/instances` | Query VM instances with filters |
| POST | `/api/recommend` | Tech stack recommendations |
## Configuration
### Environment Variables
Set in Cloudflare Pages dashboard or via CLI:
```bash
wrangler pages secret put WORKER_API_KEY
```
**Required Secrets:**
- `WORKER_API_KEY` - API key for Worker authentication
**Configured Variables (wrangler.toml):**
- `WORKER_API_URL` - Worker API base URL
## Local Development
1. Install dependencies:
```bash
npm install
```
2. Create `.env` file:
```bash
WORKER_API_KEY=your-api-key-here
```
3. Run local dev server:
```bash
npx wrangler pages dev . --port 8788
```
## Deployment
```bash
wrangler pages deploy . --project-name anvil-hosting
```
## CORS Configuration
All endpoints allow requests from:
- Origin: `https://hosting.anvil.it.com`
- Methods: `GET, POST, OPTIONS`
- Headers: `Content-Type`
## Architecture
```
Client Request
↓
/api/{endpoint} (Pages Function)
↓
functions/_shared/proxy.ts (CORS + Auth)
↓
cloud-instances-api.kappa-d8e.workers.dev (Worker)
↓
Response with CORS headers
```
## Error Handling
All errors return JSON with CORS headers:
```json
{
"success": false,
"error": "Error message",
"details": "Optional error details"
}
```
Status codes:
- `400` - Invalid request
- `500` - Internal error
- `503` - Worker API unavailable

102
functions/_shared/proxy.ts Normal file
View File

@@ -0,0 +1,102 @@
/**
* Shared proxy utilities for Cloudflare Pages Functions
* Handles CORS, error responses, and Worker API forwarding
*/
export interface Env {
WORKER_API_KEY: string;
WORKER_API_URL: string;
DB: D1Database;
}
export interface ErrorResponse {
success: false;
error: string;
details?: any;
}
const CORS_HEADERS = {
'Access-Control-Allow-Origin': 'https://hosting.anvil.it.com',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
} as const;
/**
* Create CORS preflight response
*/
export function createCorsPreflightResponse(): Response {
return new Response(null, {
status: 204,
headers: CORS_HEADERS,
});
}
/**
* Create error response with CORS headers
*/
export function createErrorResponse(
error: string,
status: number = 500,
details?: any
): Response {
const body: ErrorResponse = {
success: false,
error,
...(details && { details }),
};
return new Response(JSON.stringify(body), {
status,
headers: {
...CORS_HEADERS,
'Content-Type': 'application/json',
},
});
}
/**
* Proxy request to Worker API with authentication
*/
export async function proxyToWorker(
env: Env,
path: string,
options: RequestInit = {}
): Promise<Response> {
const workerUrl = `${env.WORKER_API_URL}${path}`;
try {
const response = await fetch(workerUrl, {
...options,
headers: {
...options.headers,
'X-API-Key': env.WORKER_API_KEY,
},
});
// Clone response to add CORS headers
const body = await response.text();
return new Response(body, {
status: response.status,
statusText: response.statusText,
headers: {
...CORS_HEADERS,
'Content-Type': response.headers.get('Content-Type') || 'application/json',
},
});
} catch (error) {
console.error(`[Proxy] Failed to fetch ${workerUrl}:`, error);
return createErrorResponse(
'Failed to connect to API server',
503,
error instanceof Error ? error.message : String(error)
);
}
}
/**
* Build query string from URL search params
*/
export function buildQueryString(searchParams: URLSearchParams): string {
const params = searchParams.toString();
return params ? `?${params}` : '';
}

17
functions/api/health.ts Normal file
View File

@@ -0,0 +1,17 @@
/**
* Health check endpoint
* GET /api/health → Worker GET /health
*/
import { type PagesFunction } from '@cloudflare/workers-types';
import { Env, createCorsPreflightResponse, proxyToWorker } from '../_shared/proxy';
export const onRequestGet: PagesFunction<Env> = async ({ env }) => {
return proxyToWorker(env, '/health', {
method: 'GET',
});
};
export const onRequestOptions: PagesFunction<Env> = async () => {
return createCorsPreflightResponse();
};

25
functions/api/instances.ts Normal file
View File

@@ -0,0 +1,25 @@
/**
* Instances query endpoint
* GET /api/instances → Worker GET /instances
*/
import { type PagesFunction } from '@cloudflare/workers-types';
import {
Env,
createCorsPreflightResponse,
proxyToWorker,
buildQueryString,
} from '../_shared/proxy';
export const onRequestGet: PagesFunction<Env> = async ({ request, env }) => {
const url = new URL(request.url);
const queryString = buildQueryString(url.searchParams);
return proxyToWorker(env, `/instances${queryString}`, {
method: 'GET',
});
};
export const onRequestOptions: PagesFunction<Env> = async () => {
return createCorsPreflightResponse();
};

205
functions/api/pricing.ts Normal file
View File

@@ -0,0 +1,205 @@
/**
* Pricing endpoint - Direct D1 query (no rate limiting)
* GET /api/pricing → D1 cloud-instances-db
*
* Supported regions:
* - Tokyo, Osaka, Singapore: Linode
* - Seoul: Vultr
*/
import { type PagesFunction } from '@cloudflare/workers-types';
import { Env, createCorsPreflightResponse } from '../_shared/proxy';
interface InstanceRow {
instance_id: string;
instance_name: string;
vcpu: number;
memory_mb: number;
storage_gb: number | null;
transfer_tb: number | null;
provider_name: string;
region_name: string;
region_code: string;
monthly_price: number;
hourly_price: number | null;
monthly_price_krw: number | null;
hourly_price_krw: number | null;
// GPU fields
has_gpu?: number;
gpu_count?: number;
gpu_type?: string;
}
const CORS_HEADERS = {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type',
};
export const onRequestGet: PagesFunction<Env> = async ({ env }) => {
try {
// 1. 일반 인스턴스 쿼리 - Linode(Tokyo, Osaka, Singapore) + Vultr(Seoul)
const regularSql = `
SELECT
it.instance_id,
it.instance_name,
it.vcpu,
it.memory_mb,
it.storage_gb,
it.transfer_tb,
p.name as provider_name,
r.region_name,
r.region_code,
pr.monthly_price,
pr.hourly_price,
pr.monthly_price_krw,
pr.hourly_price_krw,
0 as has_gpu,
0 as gpu_count,
NULL as gpu_type
FROM instance_types it
JOIN providers p ON it.provider_id = p.id
JOIN pricing pr ON it.id = pr.instance_type_id
JOIN regions r ON pr.region_id = r.id
WHERE pr.available = 1
AND it.instance_id NOT LIKE '%-sc1'
AND (
(p.name = 'linode' AND (
r.region_name LIKE '%Tokyo%' OR
r.region_name LIKE '%Osaka%' OR
r.region_code LIKE '%jp-osa%' OR
r.region_name LIKE '%Singapore%'
))
OR
(p.name = 'vultr' AND (
r.region_name LIKE '%Seoul%' OR
r.region_code LIKE '%icn%'
))
)
ORDER BY pr.monthly_price ASC
`;
// 2. GPU 인스턴스 쿼리 - Linode(Tokyo) + Vultr(Seoul)
const gpuSql = `
SELECT
gi.instance_id,
gi.instance_name,
gi.vcpu,
gi.memory_mb,
gi.storage_gb,
gi.transfer_tb,
p.name as provider_name,
r.region_name,
r.region_code,
gp.monthly_price,
gp.hourly_price,
gp.monthly_price_krw,
gp.hourly_price_krw,
1 as has_gpu,
gi.gpu_count,
gi.gpu_type
FROM gpu_instances gi
JOIN providers p ON gi.provider_id = p.id
JOIN gpu_pricing gp ON gi.id = gp.gpu_instance_id
JOIN regions r ON gp.region_id = r.id
WHERE gp.available = 1
AND (
(p.name = 'linode' AND (
r.region_name LIKE '%Tokyo%' OR
r.region_name LIKE '%Osaka%' OR
r.region_code LIKE '%jp-osa%'
))
OR
(p.name = 'vultr' AND (
r.region_name LIKE '%Seoul%' OR
r.region_code LIKE '%icn%'
))
)
ORDER BY gp.monthly_price ASC
`;
const [regularResult, gpuResult] = await Promise.all([
env.DB.prepare(regularSql).all<InstanceRow>(),
env.DB.prepare(gpuSql).all<InstanceRow>(),
]);
// Transform to frontend format
const transformRow = (row: InstanceRow) => ({
id: row.instance_id,
instance_name: row.instance_name,
vcpu: row.vcpu,
memory_mb: row.memory_mb,
storage_gb: row.storage_gb,
transfer_tb: row.transfer_tb,
provider: { name: row.provider_name },
region: {
region_name: row.region_name,
region_code: row.region_code
},
pricing: {
monthly_price: row.monthly_price,
hourly_price: row.hourly_price,
monthly_price_krw: row.monthly_price_krw,
hourly_price_krw: row.hourly_price_krw,
},
has_gpu: row.has_gpu === 1,
gpu_count: row.gpu_count || 0,
gpu_type: row.gpu_type || null,
});
const regularInstances = regularResult.results.map(transformRow);
const gpuInstances = gpuResult.results.map(transformRow);
const instances = [...regularInstances, ...gpuInstances];
// Count by region
const regionCounts: Record<string, number> = {};
for (const inst of instances) {
const name = inst.region.region_name.toLowerCase();
if (name.includes('tokyo')) regionCounts['tokyo'] = (regionCounts['tokyo'] || 0) + 1;
else if (name.includes('osaka')) regionCounts['osaka'] = (regionCounts['osaka'] || 0) + 1;
else if (name.includes('singapore')) regionCounts['singapore'] = (regionCounts['singapore'] || 0) + 1;
else if (name.includes('seoul')) regionCounts['seoul'] = (regionCounts['seoul'] || 0) + 1;
}
// GPU counts
const gpuCounts = {
'gpu-japan': gpuInstances.filter(i =>
i.region.region_name.toLowerCase().includes('tokyo') ||
i.region.region_name.toLowerCase().includes('osaka')
).length,
'gpu-korea': gpuInstances.filter(i =>
i.region.region_name.toLowerCase().includes('seoul')
).length,
};
return new Response(JSON.stringify({
success: true,
total: instances.length,
region_counts: regionCounts,
gpu_counts: gpuCounts,
instances,
}), {
headers: {
...CORS_HEADERS,
'Content-Type': 'application/json',
'Cache-Control': 'public, max-age=300', // 5분 캐시
},
});
} catch (error) {
console.error('[Pricing] D1 query error:', error);
return new Response(JSON.stringify({
success: false,
error: error instanceof Error ? error.message : 'Database query failed',
}), {
status: 500,
headers: {
...CORS_HEADERS,
'Content-Type': 'application/json',
},
});
}
};
export const onRequestOptions: PagesFunction<Env> = async () => {
return createCorsPreflightResponse();
};

47
functions/api/recommend.ts Normal file
View File

@@ -0,0 +1,47 @@
/**
* Recommendation endpoint
* POST /api/recommend → Worker POST /recommend
*/
import { type PagesFunction } from '@cloudflare/workers-types';
import {
Env,
createCorsPreflightResponse,
createErrorResponse,
proxyToWorker,
} from '../_shared/proxy';
export const onRequestPost: PagesFunction<Env> = async ({ request, env }) => {
try {
// Read request body
const body = await request.text();
// Validate JSON
if (body) {
try {
JSON.parse(body);
} catch {
return createErrorResponse('Invalid JSON in request body', 400);
}
}
return proxyToWorker(env, '/recommend', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body,
});
} catch (error) {
console.error('[Recommend] Failed to process request:', error);
return createErrorResponse(
'Failed to process recommendation request',
500,
error instanceof Error ? error.message : String(error)
);
}
};
export const onRequestOptions: PagesFunction<Env> = async () => {
return createCorsPreflightResponse();
};

528
index.html
View File

@@ -243,6 +243,268 @@
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="pt-12 pb-24 relative overflow-hidden">
<!-- Background Effects -->
<div class="absolute inset-0 gradient-bg opacity-50"></div>
<div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<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-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>
투명한 가격 정책
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
<p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
</div>
<!-- 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="flex flex-wrap gap-2">
<template x-for="type in seoulTypes" :key="type.id">
<button
@click="selectedSeoulType = type.id; onFilterChange()"
:class="selectedSeoulType === type.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="type.desc">
<span x-text="type.name"></span>
<span class="text-xs opacity-70" x-text="'(' + getSeoulTypeCount(type.id) + ')'"></span>
</button>
</template>
</div>
</div>
<!-- Global Subtabs (도쿄/오사카/싱가폴 선택 시 인스턴스 타입 필터) -->
<div x-show="selectedCity === 'global'" x-transition class="mb-4">
<div class="flex flex-wrap gap-2">
<template x-for="type in globalTypes" :key="type.id">
<button
@click="selectedGlobalType = type.id; onFilterChange()"
:class="selectedGlobalType === type.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="type.desc">
<span x-text="type.name"></span>
<span class="text-xs opacity-70" 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>
</template>
<!-- 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>
<!-- 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 text-xs text-slate-500">
<p>* 실시간 API 데이터 기준. 실제 요금은 변동될 수 있습니다.</p>
</div>
</div>
<!-- Feature Highlight -->
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
<div>
<h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
</div>
</div>
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
<div>
<h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
</div>
</div>
</div>
<!-- Bare Metal Section -->
<div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
<!-- Background Glow Effects -->
<div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
<div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
<div>
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
EXTREME PERFORMANCE
</div>
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
<p class="text-slate-400 max-w-xl leading-relaxed">
가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
<span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
</p>
<div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
</div>
</div>
<div class="flex flex-col items-center md:items-end gap-4">
<div class="text-center md:text-right glass-panel p-6 rounded-2xl">
<span class="text-sm text-slate-400">Live Inventory Pricing</span>
<div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
<p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
<p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 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-3">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><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>
실시간 재고/가격 조회 (Bot)
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Technical Features -->
<section id="features" class="py-24 bg-dark-800 relative overflow-hidden">
<!-- Background accent -->
@@ -576,272 +838,6 @@
</div>
</section>
<!-- Pricing -->
<section id="pricing" class="py-24 relative overflow-hidden">
<!-- Background Effects -->
<div class="absolute inset-0 gradient-bg opacity-50"></div>
<div class="absolute top-1/4 -right-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
<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-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>
투명한 가격 정책
</div>
<h2 class="text-3xl md:text-4xl font-bold mb-4">합리적인 <span class="gradient-text">요금제</span></h2>
<p class="text-slate-400 text-lg">전 세계 4개 리전에서 제공되는 최적의 인프라 요금</p>
<p class="text-slate-500 text-sm mt-2">(월간 기준, VAT 포함)</p>
</div>
<!-- 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>
<!-- 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>
</template>
<!-- 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>
<!-- 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>
<!-- Feature Highlight -->
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto animate-on-scroll">
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
<div>
<h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
</div>
</div>
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
<div>
<h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
</div>
</div>
</div>
<!-- Bare Metal Section -->
<div class="mt-16 glass-card p-8 md:p-10 rounded-3xl relative overflow-hidden animate-on-scroll pricing-featured">
<!-- Background Glow Effects -->
<div class="absolute inset-0 bg-gradient-to-br from-red-500/5 via-transparent to-purple-500/5 z-0"></div>
<div class="absolute -top-20 -right-20 w-60 h-60 bg-red-500/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-20 -left-20 w-60 h-60 bg-brand-500/10 rounded-full blur-3xl"></div>
<div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8">
<div>
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-gradient-to-r from-red-500/20 to-orange-500/20 border border-red-500/30 text-xs font-bold text-red-400 mb-4">
<span class="w-1.5 h-1.5 rounded-full bg-red-400 animate-pulse"></span>
EXTREME PERFORMANCE
</div>
<h3 class="text-3xl md:text-4xl font-bold text-white mb-3">Bare Metal <span class="gradient-text">Dedicated</span></h3>
<p class="text-slate-400 max-w-xl leading-relaxed">
가상화가 없는 100% 물리 서버를 단독으로 사용하세요. <br>
<span class="text-white font-mono">AMD EPYC 9004</span> 프로세서와 <span class="text-white font-mono">DDR5 ECC RAM</span>의 압도적인 성능을 경험할 수 있습니다.
</p>
<div class="flex flex-wrap gap-4 mt-6 text-sm font-mono text-slate-300">
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Full IPMI Access</span>
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> Custom Hardware</span>
<span class="flex items-center gap-2 glass-panel px-3 py-1.5 rounded-lg"><span class="text-brand-400">✓</span> 25Gbps Private Network</span>
</div>
</div>
<div class="flex flex-col items-center md:items-end gap-4">
<div class="text-center md:text-right glass-panel p-6 rounded-2xl">
<span class="text-sm text-slate-400">Live Inventory Pricing</span>
<div class="text-4xl md:text-5xl font-bold text-white mt-1">₩169,000<span class="text-lg text-slate-500 font-normal">~</span></div>
<p class="text-xs text-brand-400 mt-2">🇸🇬 싱가포르 최저가 재고 보유 중</p>
<p class="text-[10px] text-slate-400 mt-1">※ 서울/도쿄 리전 재고 및 가격은 봇으로 확인하세요.</p>
</div>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-glow px-8 py-4 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-3">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><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>
실시간 재고/가격 조회 (Bot)
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- End Main Content -->

25
package-lock.json generated
View File

@@ -9,10 +9,19 @@
"version": "1.0.0",
"license": "ISC",
"devDependencies": {
"@cloudflare/workers-types": "^4.20250110.0",
"@tailwindcss/cli": "^4.1.18",
"tailwindcss": "^4.1.18"
"tailwindcss": "^4.1.18",
"typescript": "^5.7.3"
}
},
"node_modules/@cloudflare/workers-types": {
"version": "4.20260122.0",
"resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-4.20260122.0.tgz",
"integrity": "sha512-ktjHXwjsjxFqsnCb9YQj9l12i6yfK5klBggKddogQ4KT3GCaU3Kq6IAkd4bGZSZrgwwbCkhAuhTzz4a3llA97g==",
"dev": true,
"license": "MIT OR Apache-2.0"
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.13",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -1050,6 +1059,20 @@
"type": "opencollective",
"url": "https://opencollective.com/webpack"
}
},
"node_modules/typescript": {
"version": "5.9.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
},
"engines": {
"node": ">=14.17"
}
}
}
}

4
package.json
View File

@@ -17,7 +17,9 @@
"author": "",
"license": "ISC",
"devDependencies": {
"@cloudflare/workers-types": "^4.20250110.0",
"@tailwindcss/cli": "^4.1.18",
"tailwindcss": "^4.1.18"
"tailwindcss": "^4.1.18",
"typescript": "^5.7.3"
}
}

18
tsconfig.json Normal file
View File

@@ -0,0 +1,18 @@
{
"compilerOptions": {
"target": "ES2022",
"module": "ES2022",
"lib": ["ES2022"],
"types": ["@cloudflare/workers-types"],
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true
},
"include": ["functions/**/*"],
"exclude": ["node_modules"]
}

16
wrangler.toml Normal file
View File

@@ -0,0 +1,16 @@
name = "anvil-hosting"
compatibility_date = "2024-01-01"
pages_build_output_dir = "."
[vars]
WORKER_API_URL = "https://cloud-instances-api.kappa-d8e.workers.dev"
# D1 Database binding (cloud-instances-db)
[[d1_databases]]
binding = "DB"
database_name = "cloud-instances-db"
database_id = "bbcb472d-b25e-4e48-b6ea-112f9fffb4a8"
# Environment variables for local development
# Production secrets should be set via:
# wrangler pages secret put WORKER_API_KEY