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>
This commit is contained in:
kappa
133
MODULARIZATION.md
Normal file
133
MODULARIZATION.md
Normal file
@@ -0,0 +1,133 @@
|
||||
# App.js Modularization
|
||||
|
||||
## Overview
|
||||
|
||||
Original `app.js` (1370 lines) has been split into 7 ES6 modules totaling 1427 lines.
|
||||
|
||||
## Module Structure
|
||||
|
||||
```
|
||||
js/
|
||||
├── config.js (136 lines) - Constants and configuration
|
||||
├── api.js (56 lines) - API service layer
|
||||
├── utils.js (132 lines) - Utility functions
|
||||
├── wizard.js (199 lines) - Server recommendation wizard
|
||||
├── pricing.js (502 lines) - Pricing table component
|
||||
├── dashboard.js (350 lines) - Dashboard and Telegram integration
|
||||
└── app.js (52 lines) - Main entry point
|
||||
```
|
||||
|
||||
## Module Responsibilities
|
||||
|
||||
### config.js
|
||||
- `TELEGRAM_BOT_URL` - Telegram bot URL constant
|
||||
- `PRICING_DATA` - Legacy pricing data (VAT included, monthly basis)
|
||||
- `MOCK_SERVERS`, `MOCK_STATS`, `MOCK_NOTIFICATIONS` - Mock data for UI testing
|
||||
- `WIZARD_CONFIG` - Server recommendation wizard configuration
|
||||
|
||||
### api.js
|
||||
- `API_CONFIG` - API configuration (base URL, timeout, etc.)
|
||||
- `ApiService` - API request helper with error handling
|
||||
|
||||
### utils.js
|
||||
- `formatPrice()` - KRW price formatting
|
||||
- `switchTab()` - Tab switching (n8n/Terraform)
|
||||
- `updatePing()`, `startPingUpdates()`, `stopPingUpdates()` - Ping simulation
|
||||
- DOM event listeners for visibility change and keyboard navigation
|
||||
|
||||
### wizard.js
|
||||
- `calculateRecommendation()` - Rule-based server recommendation logic
|
||||
- `createWizardMethods()` - Wizard state and methods for Alpine.js
|
||||
|
||||
### pricing.js
|
||||
- `pricingTable()` - Pricing table component with API integration
|
||||
- Caching, filtering, sorting, and modal interactions
|
||||
- Supports Global (Tokyo/Osaka/Singapore) and Seoul regions
|
||||
- Subtabs for instance types (Standard/Dedicated/Premium/High Memory)
|
||||
|
||||
### dashboard.js
|
||||
- `createDashboardMethods()` - Dashboard state and methods
|
||||
- Telegram Mini App integration
|
||||
- Web login widget support (Telegram Login Widget)
|
||||
- Server management (start/stop/delete)
|
||||
- Stats and notifications
|
||||
|
||||
### app.js
|
||||
- Module imports and integration
|
||||
- `anvilApp()` - Main Alpine.js data function (merges wizard + dashboard)
|
||||
- Global function exposure (`window.anvilApp`, `window.pricingTable`)
|
||||
- `window.onTelegramAuth()` - Telegram web login callback
|
||||
- `window.AnvilDevTools` - Development tools
|
||||
|
||||
## Usage in HTML
|
||||
|
||||
```html
|
||||
<!-- ES6 Module -->
|
||||
<script type="module" src="js/app.js"></script>
|
||||
|
||||
<!-- Alpine.js (loaded after modules) -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"></script>
|
||||
```
|
||||
|
||||
## Alpine.js Integration
|
||||
|
||||
All modules expose functions to `window` for Alpine.js `x-data`:
|
||||
|
||||
```html
|
||||
<body x-data="anvilApp()" x-init="init()">
|
||||
<!-- Wizard and dashboard UI -->
|
||||
</body>
|
||||
|
||||
<div x-data="pricingTable()" x-init="init()">
|
||||
<!-- Pricing table UI -->
|
||||
</div>
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
1. **Separation of Concerns**: Each module has a single responsibility
|
||||
2. **Maintainability**: Easier to find and modify specific functionality
|
||||
3. **Testability**: Individual modules can be tested independently
|
||||
4. **Code Reuse**: Modules can be imported as needed
|
||||
5. **ES6 Features**: Modern JavaScript syntax (import/export)
|
||||
6. **Alpine.js Compatible**: All functions exposed to `window` for x-data usage
|
||||
|
||||
## Cloudflare Pages Compatibility
|
||||
|
||||
ES6 modules work natively in modern browsers. Cloudflare Pages serves them with correct MIME types:
|
||||
|
||||
- `.js` files → `application/javascript`
|
||||
- No build step required
|
||||
- Works with CSP (Content Security Policy)
|
||||
|
||||
## Deployment
|
||||
|
||||
```bash
|
||||
wrangler pages deploy . --project-name anvil-hosting
|
||||
```
|
||||
|
||||
No build step required - deploy directly.
|
||||
|
||||
## Testing
|
||||
|
||||
1. Open browser console at https://hosting.anvil.it.com
|
||||
2. Check for `[Anvil] Application modules loaded` message
|
||||
3. Test `window.AnvilDevTools` object
|
||||
4. Verify wizard modal opens correctly
|
||||
5. Verify pricing table loads and filters work
|
||||
6. Test Telegram Mini App integration (if in Telegram environment)
|
||||
|
||||
## Migration Notes
|
||||
|
||||
- Original `app.js` backed up as `app.js.backup`
|
||||
- All functionality preserved
|
||||
- No breaking changes to HTML templates
|
||||
- Alpine.js integration unchanged
|
||||
|
||||
## Future Improvements
|
||||
|
||||
1. Add unit tests for each module
|
||||
2. Implement TypeScript for type safety
|
||||
3. Consider bundling for production (Vite, Rollup)
|
||||
4. Add module documentation (JSDoc)
|
||||
5. Implement code splitting for lazy loading
|
||||
Reference in New Issue
Block a user