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

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

functions/README.md

@@ -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

functions/_shared/proxy.ts

@@ -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}` : '';
+}

functions/api/health.ts

@@ -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();
+};

functions/api/instances.ts

@@ -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();
+};

functions/api/pricing.ts

@@ -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();
+};

functions/api/recommend.ts

@@ -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();
+};