anvil-hosting/app.js

/**
 * Anvil Hosting - Main Application JavaScript
 * 가격 데이터 및 Alpine.js 컴포넌트 정의
 */

// 단일 가격 데이터 소스 (VAT 포함, 월간 기준)
const PRICING_DATA = {
  global: [
    { plan: 'Micro', vcpu: '1 Core', ram: '1 GB', ssd: '25 GB', transfer: '1 TB', price: 8500 },
    { plan: 'Starter', vcpu: '1 Core', ram: '2 GB', ssd: '50 GB', transfer: '2 TB', price: 20400 },
    { plan: 'Pro', vcpu: '2 Cores', ram: '4 GB', ssd: '80 GB', transfer: '4 TB', price: 40700, featured: true },
    { plan: 'Business', vcpu: '4 Cores', ram: '8 GB', ssd: '160 GB', transfer: '5 TB', price: 67800 }
  ],
  seoul: [
    { plan: 'Nano', vcpu: '1 Core', ram: '512 MB', ssd: '20 GB', transfer: '1 TB', price: 6000 },
    { plan: 'Micro', vcpu: '1 Core', ram: '1 GB', ssd: '40 GB', transfer: '2 TB', price: 8500 },
    { plan: 'Starter', vcpu: '1 Core', ram: '2 GB', ssd: '60 GB', transfer: '3 TB', price: 17000 },
    { plan: 'Pro', vcpu: '2 Cores', ram: '4 GB', ssd: '80 GB', transfer: '4 TB', price: 33900, featured: true },
    { plan: 'Business', vcpu: '2 Cores', ram: '8 GB', ssd: '160 GB', transfer: '5 TB', price: 67800 }
  ]
};

// 런처 모달용 가격 (plan명 기준)
const LAUNCHER_PRICES = {
  'Micro': { base: 8500, seoul: 8500 },
  'Starter': { base: 20400, seoul: 17000 },
  'Pro': { base: 40700, seoul: 33900 },
  'Business': { base: 67800, seoul: 67800 }
};

// 플랜별 스펙 정보
const PLAN_SPECS = {
  'Micro': '1vCPU / 1GB RAM',
  'Starter': '1vCPU / 2GB RAM',
  'Pro': '2vCPU / 4GB RAM',
  'Business': '4vCPU / 8GB RAM'
};

/**
 * 가격 포맷팅 (한국 원화)
 */
function formatPrice(price) {
  return '₩' + price.toLocaleString('ko-KR');
}

/**
 * Alpine.js 메인 앱 데이터
 */
function anvilApp() {
  return {
    // 모달 상태
    launcherOpen: false,
    launching: false,
    step: 0,

    // 서버 구성
    config: {
      region: 'Tokyo',
      os: 'Debian 12',
      plan: 'Pro'
    },

    // 배포 로그
    logs: [],

    // 가격 조회
    getPrice(plan) {
      const prices = LAUNCHER_PRICES[plan];
      if (!prices) return '0';
      const price = this.config.region === 'Seoul' ? prices.seoul : prices.base;
      return price.toLocaleString('ko-KR');
    },

    // 플랜 스펙 조회
    getPlanSpec(plan) {
      return PLAN_SPECS[plan] || '';
    },

    // 서버 배포 시작
    startLaunch() {
      this.launching = true;
      this.step = 1;
      this.logs = [
        '[INFO] Initializing deployment...',
        '[INFO] Selecting node in ' + this.config.region + '...',
        '[INFO] Pulling ' + this.config.os + ' image...'
      ];

      setTimeout(() => {
        this.logs.push('[SUCCESS] Image pulled.');
        this.logs.push('[INFO] Creating container instance...');
        this.step = 2;
      }, 1500);

      setTimeout(() => {
        this.logs.push('[SUCCESS] Container created.');
        this.logs.push('[INFO] Configuring network & firewall...');
        this.step = 3;
      }, 3000);

      setTimeout(() => {
        const randomIP = Math.floor(Math.random() * 254 + 1);
        this.logs.push('[SUCCESS] Network ready. IP: 45.12.89.' + randomIP);
        this.logs.push('[INFO] Starting system services...');
        this.step = 4;
      }, 4500);

      setTimeout(() => {
        this.launching = false;
        this.step = 5;
        this.logs.push('[COMPLETE] Server is now live!');
      }, 6000);
    },

    // 런처 초기화
    resetLauncher() {
      this.launcherOpen = false;
      this.launching = false;
      this.step = 0;
      this.logs = [];
    },

    // ESC 키로 모달 닫기
    handleKeydown(event) {
      if (event.key === 'Escape' && this.launcherOpen && !this.launching) {
        this.resetLauncher();
      }
    }
  };
}

/**
 * 가격표 컴포넌트
 */
function pricingTable() {
  return {
    region: 'global',

    get plans() {
      return PRICING_DATA[this.region] || [];
    },

    formatPrice(price) {
      return formatPrice(price);
    },

    isSeoul() {
      return this.region === 'seoul';
    }
  };
}

/**
 * 탭 전환 (n8n/Terraform)
 */
function switchTab(tab) {
  const btnN8n = document.getElementById('btn-n8n');
  const btnTf = document.getElementById('btn-tf');
  const panelN8n = document.getElementById('panel-n8n');
  const panelTf = document.getElementById('panel-tf');

  if (tab === 'n8n') {
    btnN8n.className = 'px-4 py-2 rounded-lg bg-purple-600 text-white text-sm font-bold transition shadow-lg shadow-purple-500/20';
    btnTf.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
    panelN8n.classList.remove('hidden');
    panelTf.classList.add('hidden');
  } else {
    btnN8n.className = 'px-4 py-2 rounded-lg bg-slate-800 text-slate-400 text-sm font-bold border border-slate-700 hover:text-white transition';
    btnTf.className = 'px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-bold transition shadow-lg shadow-blue-500/20';
    panelN8n.classList.add('hidden');
    panelTf.classList.remove('hidden');
  }
}

/**
 * 실시간 Ping 시뮬레이션
 */
function updatePing() {
  const regions = [
    { id: 'ping-kr', base: 2, variance: 2 },
    { id: 'ping-jp', base: 35, variance: 5 },
    { id: 'ping-hk', base: 45, variance: 8 },
    { id: 'ping-sg', base: 65, variance: 10 }
  ];

  regions.forEach(region => {
    const el = document.getElementById(region.id);
    if (el) {
      const jitter = Math.floor(Math.random() * region.variance) - (region.variance / 2);
      let val = Math.max(1, Math.floor(region.base + jitter));
      el.innerText = val;
    }
  });
}

// Ping 업데이트 시작
setInterval(updatePing, 2000);