refactor: app.js를 ES6 모듈로 분리

## 변경사항 - app.js (1370줄) → 7개 모듈 (1427줄) - ES6 import/export 문법 사용 - Alpine.js 호환성 유지 (window 전역 노출) ## 모듈 구조 - js/config.js: 상수/설정 (WIZARD_CONFIG, PRICING_DATA, MOCK_*) - js/api.js: ApiService - js/utils.js: formatPrice, switchTab, ping 시뮬레이션 - js/wizard.js: 서버 추천 마법사 로직 - js/pricing.js: 가격표 컴포넌트 - js/dashboard.js: 대시보드 및 텔레그램 연동 - js/app.js: 메인 통합 (모든 모듈 import) ## HTML 변경 - <script type="module" src="js/app.js">로 변경 - 기존 기능 모두 정상 작동 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-23 12:59:54 +09:00
parent 347a5cc598
commit 758266d8cb
21 changed files with 2193 additions and 194 deletions
--- a/design-system/README.md
+++ b/design-system/README.md
@@ -0,0 +1,230 @@
+# Anvil Hosting Design System
+
+Figma 라이브러리 구축을 위한 디자인 토큰 및 가이드입니다.
+
+## 📦 파일 구조
+
+```
+design-system/
+├── tokens.json          # 전체 디자인 토큰 (개발용)
+├── figma-tokens.json    # Figma Tokens 플러그인 호환 형식
+└── README.md            # 이 파일
+```
+
+## 🎨 색상 시스템
+
+### Brand Colors (Sky Blue)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `brand-400` | `#38bdf8` | Hover, 강조, 아이콘 |
+| `brand-500` | `#0ea5e9` | **Primary** - 버튼, 링크 |
+| `brand-600` | `#0284c7` | Pressed 상태 |
+
+### Purple (Secondary)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `purple-400` | `#c084fc` | 밝은 악센트 |
+| `purple-500` | `#a855f7` | 그라디언트 종점 |
+| `purple-600` | `#9333ea` | 어두운 악센트 |
+
+### Dark (Backgrounds)
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `dark-900` | `#0b1120` | **페이지 배경** |
+| `dark-800` | `#1e293b` | 카드/패널 배경 |
+| `dark-700` | `#334155` | 테두리, 구분선 |
+
+### Semantic Colors
+| Token | HEX | 용도 |
+|-------|-----|------|
+| `success` | `#22c55e` | 성공, 활성 상태 |
+| `warning` | `#eab308` | 경고 |
+| `error` | `#ef4444` | 에러, 삭제 |
+| `info` | `#3b82f6` | 정보 |
+
+## 📝 타이포그래피
+
+### 폰트 패밀리
+```css
+/* 본문 (한글 최적화) */
+font-family: -apple-system, BlinkMacSystemFont,
+             'Apple SD Gothic Neo', 'Malgun Gothic',
+             'Noto Sans KR', system-ui, sans-serif;
+
+/* 코드 */
+font-family: 'JetBrains Mono', monospace;
+```
+
+### 폰트 크기 스케일
+| Token | Size | Line Height | 용도 |
+|-------|------|-------------|------|
+| `xs` | 12px | 16px | 라벨, 캡션 |
+| `sm` | 14px | 20px | 보조 텍스트 |
+| `base` | 16px | 24px | **본문** |
+| `lg` | 18px | 28px | 강조 본문 |
+| `xl` | 20px | 28px | 부제목 |
+| `2xl` | 24px | 32px | 카드 제목 |
+| `3xl` | 30px | 36px | 섹션 제목 |
+| `4xl` | 36px | 40px | 페이지 제목 |
+| `5xl` | 48px | 48px | Hero 제목 |
+
+## ✨ 글래스모피즘 효과
+
+### Glass Panel (네비게이션, 모달)
+```css
+background: rgba(30, 41, 59, 0.4);
+backdrop-filter: blur(12px);
+border: 1px solid rgba(255, 255, 255, 0.05);
+```
+
+### Glass Card (피처 카드, 가격표)
+```css
+/* 기본 상태 */
+background: linear-gradient(135deg,
+  rgba(30, 41, 59, 0.6) 0%,
+  rgba(30, 41, 59, 0.3) 100%);
+backdrop-filter: blur(20px);
+border: 1px solid rgba(255, 255, 255, 0.08);
+
+/* Hover 상태 */
+background: linear-gradient(135deg,
+  rgba(30, 41, 59, 0.8) 0%,
+  rgba(30, 41, 59, 0.5) 100%);
+border-color: rgba(255, 255, 255, 0.15);
+box-shadow:
+  0 20px 40px rgba(0, 0, 0, 0.3),
+  0 0 40px rgba(56, 189, 248, 0.1);
+transform: translateY(-4px);
+```
+
+## 🌈 그라디언트
+
+### Brand Gradient (CTA, Hero)
+```css
+background: linear-gradient(135deg, #38bdf8 0%, #a855f7 100%);
+```
+
+### Text Gradient
+```css
+background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%);
+background-size: 200% 100%;
+-webkit-background-clip: text;
+color: transparent;
+```
+
+### Soft Gradient (배경)
+```css
+background: linear-gradient(135deg,
+  rgba(56, 189, 248, 0.15) 0%,
+  rgba(168, 85, 247, 0.1) 100%);
+```
+
+## 💫 Glow 효과
+
+### Brand Glow
+```css
+box-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
+```
+
+### Purple Glow
+```css
+box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
+```
+
+## 📐 간격 시스템
+
+| Token | Value | 용도 |
+|-------|-------|------|
+| `1` | 4px | 아이콘 갭 |
+| `2` | 8px | 인라인 요소 |
+| `3` | 12px | 밀집 UI |
+| `4` | 16px | **기본 갭** |
+| `6` | 24px | 카드 패딩 |
+| `8` | 32px | 섹션 내부 |
+| `16` | 64px | 섹션 간 |
+| `24` | 96px | 대형 섹션 |
+
+## 🔘 Border Radius
+
+| Token | Value | 용도 |
+|-------|-------|------|
+| `sm` | 4px | 작은 버튼, 태그 |
+| `lg` | 8px | 입력 필드 |
+| `xl` | 12px | 카드 |
+| `2xl` | 16px | 대형 카드 |
+| `3xl` | 24px | 모달, 패널 |
+| `full` | 9999px | 원형 버튼, 아바타 |
+
+---
+
+## 🛠 Figma 설정 가이드
+
+### 1. Figma Tokens 플러그인 사용 (권장)
+
+1. Figma에서 **Figma Tokens** 플러그인 설치
+2. `figma-tokens.json` 파일 내용을 플러그인에 Import
+3. 토큰이 자동으로 스타일 생성
+
+### 2. 수동 설정
+
+**Color Styles 생성:**
+1. Figma → Local Styles → + 버튼
+2. 위 색상표 참고하여 스타일 생성
+3. 명명 규칙: `brand/500`, `dark/900`, `semantic/success`
+
+**Text Styles 생성:**
+1. 텍스트 작성 → 스타일 패널 → +
+2. 명명 규칙: `heading/5xl`, `body/base`, `code/sm`
+
+**Effect Styles 생성:**
+1. 요소에 효과 적용 → 스타일 패널 → +
+2. 명명 규칙: `glass-panel`, `glass-card`, `glow-brand`
+
+---
+
+## 📱 컴포넌트 목록
+
+WireFramer 라이브러리와 연계하여 구축할 컴포넌트:
+
+### Navigation
+- [ ] Header
+- [ ] Footer
+- [ ] Tab Bar (가격표용)
+- [ ] Mobile Menu
+
+### Content
+- [ ] Hero Section
+- [ ] Feature Card
+- [ ] Pricing Card
+- [ ] Info Card
+
+### Inputs
+- [ ] Text Input
+- [ ] Select/Dropdown
+- [ ] Slider (리소스 선택)
+- [ ] Toggle
+- [ ] Radio Group (OS/리전 선택)
+
+### Buttons
+- [ ] Primary Button (Gradient)
+- [ ] Secondary Button (Glass)
+- [ ] Icon Button
+- [ ] Link Button
+
+### Feedback
+- [ ] Badge/Tag
+- [ ] Toast/Alert
+- [ ] Loading Spinner
+- [ ] Skeleton
+
+---
+
+## 🔗 관련 파일
+
+- `/src/input.css` - Tailwind CSS 소스
+- `/style.css` - 빌드된 CSS
+- `/index.html` - 메인 페이지
+
+## 📅 버전
+
+- **v1.0** (2026-01-23): 초기 디자인 토큰 추출
--- a/design-system/figma-tokens.json
+++ b/design-system/figma-tokens.json
@@ -0,0 +1,112 @@
+{
+  "global": {
+    "colors": {
+      "brand": {
+        "400": { "value": "#38bdf8" },
+        "500": { "value": "#0ea5e9" },
+        "600": { "value": "#0284c7" }
+      },
+      "purple": {
+        "400": { "value": "#c084fc" },
+        "500": { "value": "#a855f7" },
+        "600": { "value": "#9333ea" }
+      },
+      "dark": {
+        "700": { "value": "#334155" },
+        "800": { "value": "#1e293b" },
+        "900": { "value": "#0b1120" }
+      },
+      "slate": {
+        "200": { "value": "#e2e8f0" },
+        "300": { "value": "#cbd5e1" },
+        "400": { "value": "#94a3b8" },
+        "500": { "value": "#64748b" },
+        "700": { "value": "#334155" }
+      },
+      "success": { "value": "#22c55e" },
+      "warning": { "value": "#eab308" },
+      "error": { "value": "#ef4444" },
+      "info": { "value": "#3b82f6" }
+    },
+    "fontFamilies": {
+      "sans": { "value": "Apple SD Gothic Neo, Malgun Gothic, Noto Sans KR" },
+      "mono": { "value": "JetBrains Mono" }
+    },
+    "fontSizes": {
+      "xs": { "value": "12" },
+      "sm": { "value": "14" },
+      "base": { "value": "16" },
+      "lg": { "value": "18" },
+      "xl": { "value": "20" },
+      "2xl": { "value": "24" },
+      "3xl": { "value": "30" },
+      "4xl": { "value": "36" },
+      "5xl": { "value": "48" }
+    },
+    "fontWeights": {
+      "normal": { "value": "400" },
+      "medium": { "value": "500" },
+      "semibold": { "value": "600" },
+      "bold": { "value": "700" }
+    },
+    "lineHeights": {
+      "tight": { "value": "1.25" },
+      "normal": { "value": "1.5" },
+      "relaxed": { "value": "1.625" }
+    },
+    "spacing": {
+      "1": { "value": "4" },
+      "2": { "value": "8" },
+      "3": { "value": "12" },
+      "4": { "value": "16" },
+      "6": { "value": "24" },
+      "8": { "value": "32" },
+      "12": { "value": "48" },
+      "16": { "value": "64" },
+      "24": { "value": "96" }
+    },
+    "borderRadius": {
+      "sm": { "value": "4" },
+      "md": { "value": "6" },
+      "lg": { "value": "8" },
+      "xl": { "value": "12" },
+      "2xl": { "value": "16" },
+      "3xl": { "value": "24" }
+    },
+    "opacity": {
+      "5": { "value": "5%" },
+      "10": { "value": "10%" },
+      "20": { "value": "20%" },
+      "30": { "value": "30%" },
+      "50": { "value": "50%" },
+      "80": { "value": "80%" }
+    }
+  },
+  "semantic": {
+    "bg": {
+      "primary": { "value": "{colors.dark.900}" },
+      "secondary": { "value": "{colors.dark.800}" },
+      "card": { "value": "{colors.dark.800}" }
+    },
+    "text": {
+      "primary": { "value": "{colors.slate.200}" },
+      "secondary": { "value": "{colors.slate.300}" },
+      "muted": { "value": "{colors.slate.400}" },
+      "brand": { "value": "{colors.brand.400}" }
+    },
+    "border": {
+      "default": { "value": "{colors.slate.700}" },
+      "subtle": { "value": "rgba(255,255,255,0.05)" },
+      "brand": { "value": "{colors.brand.500}" }
+    },
+    "interactive": {
+      "primary": { "value": "{colors.brand.500}" },
+      "primaryHover": { "value": "{colors.brand.400}" },
+      "secondary": { "value": "{colors.purple.500}" }
+    }
+  },
+  "$themes": [],
+  "$metadata": {
+    "tokenSetOrder": ["global", "semantic"]
+  }
+}
--- a/design-system/tokens.json
+++ b/design-system/tokens.json
@@ -0,0 +1,149 @@
+{
+  "colors": {
+    "brand": {
+      "400": { "value": "#38bdf8", "type": "color", "description": "Sky blue light - hover states, accents" },
+      "500": { "value": "#0ea5e9", "type": "color", "description": "Primary brand color - buttons, links" },
+      "600": { "value": "#0284c7", "type": "color", "description": "Brand dark - pressed states" },
+      "900": { "value": "#0c4a6e", "type": "color", "description": "Brand darkest - subtle backgrounds" }
+    },
+    "purple": {
+      "400": { "value": "#c084fc", "type": "color", "description": "Purple light - accents" },
+      "500": { "value": "#a855f7", "type": "color", "description": "Purple primary - secondary accent" },
+      "600": { "value": "#9333ea", "type": "color", "description": "Purple dark" }
+    },
+    "dark": {
+      "700": { "value": "#334155", "type": "color", "description": "Dark light - borders, dividers" },
+      "800": { "value": "#1e293b", "type": "color", "description": "Dark medium - cards, panels" },
+      "900": { "value": "#0b1120", "type": "color", "description": "Dark deepest - page background" }
+    },
+    "slate": {
+      "100": { "value": "#f1f5f9", "type": "color" },
+      "200": { "value": "#e2e8f0", "type": "color", "description": "Primary text color" },
+      "300": { "value": "#cbd5e1", "type": "color", "description": "Secondary text" },
+      "400": { "value": "#94a3b8", "type": "color", "description": "Muted text" },
+      "500": { "value": "#64748b", "type": "color", "description": "Disabled text" },
+      "700": { "value": "#334155", "type": "color", "description": "Borders" }
+    },
+    "semantic": {
+      "success": { "value": "#22c55e", "type": "color", "description": "Green - success states" },
+      "warning": { "value": "#eab308", "type": "color", "description": "Yellow - warning states" },
+      "error": { "value": "#ef4444", "type": "color", "description": "Red - error states" },
+      "info": { "value": "#3b82f6", "type": "color", "description": "Blue - info states" }
+    }
+  },
+  "typography": {
+    "fontFamily": {
+      "sans": { "value": "-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', system-ui, sans-serif", "type": "fontFamily" },
+      "mono": { "value": "'JetBrains Mono', monospace", "type": "fontFamily" }
+    },
+    "fontSize": {
+      "xs": { "value": "12px", "lineHeight": "16px" },
+      "sm": { "value": "14px", "lineHeight": "20px" },
+      "base": { "value": "16px", "lineHeight": "24px" },
+      "lg": { "value": "18px", "lineHeight": "28px" },
+      "xl": { "value": "20px", "lineHeight": "28px" },
+      "2xl": { "value": "24px", "lineHeight": "32px" },
+      "3xl": { "value": "30px", "lineHeight": "36px" },
+      "4xl": { "value": "36px", "lineHeight": "40px" },
+      "5xl": { "value": "48px", "lineHeight": "48px" },
+      "6xl": { "value": "60px", "lineHeight": "60px" }
+    },
+    "fontWeight": {
+      "normal": { "value": "400" },
+      "medium": { "value": "500" },
+      "semibold": { "value": "600" },
+      "bold": { "value": "700" }
+    },
+    "letterSpacing": {
+      "tight": { "value": "-0.025em" },
+      "normal": { "value": "0" },
+      "wide": { "value": "0.025em" }
+    }
+  },
+  "spacing": {
+    "0": { "value": "0px" },
+    "1": { "value": "4px" },
+    "2": { "value": "8px" },
+    "3": { "value": "12px" },
+    "4": { "value": "16px" },
+    "5": { "value": "20px" },
+    "6": { "value": "24px" },
+    "8": { "value": "32px" },
+    "10": { "value": "40px" },
+    "12": { "value": "48px" },
+    "16": { "value": "64px" },
+    "20": { "value": "80px" },
+    "24": { "value": "96px" }
+  },
+  "borderRadius": {
+    "sm": { "value": "4px" },
+    "md": { "value": "6px" },
+    "lg": { "value": "8px" },
+    "xl": { "value": "12px" },
+    "2xl": { "value": "16px" },
+    "3xl": { "value": "24px" },
+    "full": { "value": "9999px" }
+  },
+  "effects": {
+    "blur": {
+      "sm": { "value": "8px" },
+      "md": { "value": "12px" },
+      "lg": { "value": "16px" },
+      "xl": { "value": "24px" },
+      "3xl": { "value": "64px" }
+    },
+    "shadow": {
+      "sm": { "value": "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)" },
+      "md": { "value": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)" },
+      "lg": { "value": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)" },
+      "xl": { "value": "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)" },
+      "2xl": { "value": "0 25px 50px -12px rgba(0,0,0,0.25)" },
+      "glow-brand": { "value": "0 0 40px rgba(56, 189, 248, 0.3)" },
+      "glow-purple": { "value": "0 0 40px rgba(168, 85, 247, 0.3)" }
+    }
+  },
+  "components": {
+    "glassPanel": {
+      "background": "rgba(30, 41, 59, 0.4)",
+      "backdropBlur": "12px",
+      "border": "1px solid rgba(255, 255, 255, 0.05)"
+    },
+    "glassCard": {
+      "background": "linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%)",
+      "backdropBlur": "20px",
+      "border": "1px solid rgba(255, 255, 255, 0.08)",
+      "hoverBackground": "linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%)",
+      "hoverBorder": "1px solid rgba(255, 255, 255, 0.15)",
+      "hoverShadow": "0 20px 40px rgba(0, 0, 0, 0.3), 0 0 40px rgba(56, 189, 248, 0.1)"
+    },
+    "gradientText": {
+      "background": "linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #38bdf8 100%)",
+      "backgroundSize": "200% 100%"
+    },
+    "button": {
+      "primary": {
+        "background": "linear-gradient(135deg, #0ea5e9, #38bdf8)",
+        "hoverBackground": "linear-gradient(135deg, #38bdf8, #0ea5e9)",
+        "shadow": "0 0 30px rgba(56, 189, 248, 0.5)"
+      },
+      "secondary": {
+        "background": "rgba(30, 41, 59, 0.6)",
+        "border": "1px solid rgba(255, 255, 255, 0.1)"
+      }
+    }
+  },
+  "gradients": {
+    "brandPurple": {
+      "value": "linear-gradient(135deg, #38bdf8 0%, #a855f7 100%)",
+      "description": "Primary gradient - hero, CTAs"
+    },
+    "brandPurpleSoft": {
+      "value": "linear-gradient(135deg, rgba(56, 189, 248, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%)",
+      "description": "Soft gradient - backgrounds"
+    },
+    "darkGlass": {
+      "value": "linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(30, 41, 59, 0.3) 100%)",
+      "description": "Glass card background"
+    }
+  }
+}