refactor: 위자드를 텔레그램 AI 대화 데모로 교체
- Hero 섹션: 서버 만들기 버튼 → AI와 대화하기 버튼으로 변경 - Hero 섹션: 핑 위젯 제거 - 텔레그램 데모: 위자드 흐름(용도→기술스택→규모→추천)을 자연스러운 대화체로 변경 - 위자드 모달 전체 제거 - 네이버 Search Advisor 인증 파일 추가 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
300
index.html
300
index.html
@@ -211,37 +211,16 @@
|
||||
<span class="text-white font-medium">n8n, Ansible</span> 자동화 파이프라인과 즉시 연동됩니다.
|
||||
</p>
|
||||
|
||||
<!-- CTA & Ping Widget -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 items-center justify-center lg:justify-start animate-fade-in-delay-2">
|
||||
<button @click="openWizard()" :aria-expanded="wizardOpen" aria-haspopup="dialog" aria-label="지금 서버 만들기 - 서버 추천 마법사 열기" class="btn-gradient px-8 py-4 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 group">
|
||||
<span class="text-xl">🚀</span>
|
||||
<span>지금 서버 만들기</span>
|
||||
<!-- CTA -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 items-center justify-center lg:justify-start animate-fade-in-delay-2">
|
||||
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="btn-gradient px-8 py-4 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 group">
|
||||
<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>
|
||||
<span>AI와 대화하기</span>
|
||||
<svg class="w-4 h-4 text-brand-600 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- Ping Widget -->
|
||||
<div id="ping-widget" class="flex flex-col gap-1.5 text-xs font-mono text-slate-400 bg-slate-900/60 p-4 rounded-xl border border-slate-700/50 backdrop-blur-md">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 whitespace-nowrap">🇰🇷 Seoul</span>
|
||||
<div class="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden w-20"><div class="h-full bg-green-400 w-[95%] rounded-full"></div></div>
|
||||
<span class="text-green-400 w-12 text-right font-semibold"><span id="ping-kr">2</span>ms</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 whitespace-nowrap">🇯🇵 Tokyo</span>
|
||||
<div class="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden w-20"><div class="h-full bg-brand-400 w-[80%] rounded-full"></div></div>
|
||||
<span class="text-brand-400 w-12 text-right font-semibold"><span id="ping-jp">35</span>ms</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 whitespace-nowrap">🇭🇰 HongKong</span>
|
||||
<div class="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden w-20"><div class="h-full bg-yellow-400 w-[70%] rounded-full"></div></div>
|
||||
<span class="text-yellow-400 w-12 text-right font-semibold"><span id="ping-hk">45</span>ms</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="w-24 whitespace-nowrap">🇸🇬 Singapore</span>
|
||||
<div class="flex-1 h-1.5 bg-slate-700 rounded-full overflow-hidden w-20"><div class="h-full bg-yellow-400 w-[60%] rounded-full"></div></div>
|
||||
<span class="text-yellow-400 w-12 text-right font-semibold"><span id="ping-sg">65</span>ms</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#pricing" class="px-6 py-4 text-slate-300 hover:text-white font-medium rounded-xl flex items-center gap-2 transition border border-slate-700/50 hover:border-slate-600">
|
||||
<span>요금제 보기</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -263,12 +242,12 @@
|
||||
</div>
|
||||
|
||||
<!-- Chat Messages -->
|
||||
<div class="p-4 space-y-3 text-[14px] bg-[#0e1621] min-h-[320px]" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.02"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');">
|
||||
<div class="p-4 space-y-3 text-[14px] bg-[#0e1621] min-h-[380px]" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.02"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');">
|
||||
<!-- User Message -->
|
||||
<div class="flex justify-end chat-bubble delay-1">
|
||||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[85%] leading-relaxed shadow-sm">
|
||||
도쿄 리전에 데비안 12로 프로 등급 서버 하나 만들어줘
|
||||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
|
||||
서버 필요한데 뭘 써야 할지 모르겠어
|
||||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:41 ✓✓</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -276,31 +255,48 @@
|
||||
<div class="flex justify-start chat-bubble delay-2">
|
||||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||||
🤖 AI가 요청을 분석했습니다.<br><br>
|
||||
다음 구성으로 서버를 준비할까요?<br><br>
|
||||
📍 <span class="text-white/90">위치:</span> 🇯🇵 도쿄<br>
|
||||
💿 <span class="text-white/90">OS:</span> Debian 12<br>
|
||||
⚡ <span class="text-white/90">사양:</span> Pro (2 vCPU / 4GB)
|
||||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:42</div>
|
||||
반가워요! 🙌 어떤 용도로 사용하실 건가요?<br><br>
|
||||
🌐 <span class="text-white/90">웹 서비스</span> - 사이트/앱 운영<br>
|
||||
💻 <span class="text-white/90">개발 환경</span> - 코딩/테스트<br>
|
||||
📊 <span class="text-white/90">데이터 처리</span> - AI/분석
|
||||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:41</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Message -->
|
||||
<div class="flex justify-end chat-bubble delay-3">
|
||||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[80%] shadow-sm">
|
||||
응 바로 생성해줘
|
||||
웹 서비스! Next.js랑 PostgreSQL 쓸 거야
|
||||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bot Response (Success) -->
|
||||
<!-- Bot Response -->
|
||||
<div class="flex justify-start chat-bubble delay-4">
|
||||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||||
✅ <span class="text-green-400 font-medium">서버 생성 완료!</span><br><br>
|
||||
🌐 <span class="text-white/90">IP:</span> <code class="bg-black/30 px-1 rounded text-[13px]">45.12.89.121</code><br>
|
||||
🔑 <span class="text-white/90">Root PW:</span> <span class="text-slate-400">(보안 전송됨)</span><br><br>
|
||||
<span class="text-slate-400 text-[13px]">지금 바로 SSH 접속이 가능합니다.</span>
|
||||
좋은 조합이네요! 👍 예상 트래픽은 어느 정도인가요?
|
||||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:42</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Message -->
|
||||
<div class="flex justify-end chat-bubble delay-5">
|
||||
<div class="bg-[#2b5278] text-white px-3 py-2 rounded-xl rounded-tr-sm max-w-[80%] shadow-sm">
|
||||
하루 1만명 정도?
|
||||
<div class="text-[10px] text-blue-200/60 text-right mt-1">오후 3:42 ✓✓</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bot Response (Recommendation) -->
|
||||
<div class="flex justify-start chat-bubble delay-6">
|
||||
<div class="bg-[#182533] text-[#f5f5f5] px-3 py-2 rounded-xl rounded-tl-sm max-w-[85%] shadow-sm">
|
||||
<div class="text-[#6ab3f3] font-medium text-[13px] mb-1">Anvil Forge Bot</div>
|
||||
🎯 <span class="text-brand-400 font-medium">Pro 등급</span>을 추천드려요!<br><br>
|
||||
⚡ <span class="text-white/90">사양:</span> 2 vCPU / 4GB RAM<br>
|
||||
📍 <span class="text-white/90">추천 리전:</span> 🇯🇵 도쿄 (35ms)<br>
|
||||
💰 <span class="text-white/90">예상 비용:</span> ₩22,000/월<br><br>
|
||||
<span class="text-slate-400 text-[13px]">바로 생성해드릴까요?</span>
|
||||
<div class="text-[10px] text-slate-400 text-right mt-1">오후 3:43</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1042,220 +1038,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Server Recommendation Wizard Modal -->
|
||||
<div x-show="wizardOpen"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@keydown.escape.window="closeWizard()"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-dark-900/90 backdrop-blur-sm"
|
||||
style="display: none;">
|
||||
|
||||
<div @click.away="closeWizard()"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="wizard-title"
|
||||
class="bg-slate-900/95 backdrop-blur-xl border border-white/10 rounded-3xl shadow-2xl shadow-black/50 overflow-hidden w-full max-w-lg">
|
||||
|
||||
<!-- Wizard Header -->
|
||||
<div class="px-6 py-4 border-b border-white/5 flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-brand-500 to-purple-500 flex items-center justify-center text-lg">🧙</div>
|
||||
<div>
|
||||
<h2 id="wizard-title" class="text-lg font-bold text-white">서버 추천 마법사</h2>
|
||||
<p class="text-xs text-slate-400">기술 스택에 맞는 최적의 서버를 찾아드립니다</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="closeWizard()"
|
||||
aria-label="마법사 닫기"
|
||||
class="w-8 h-8 flex items-center justify-center rounded-full bg-white/5 text-slate-400 hover:bg-white/10 hover:text-white transition">
|
||||
<span>×</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div class="px-6 pt-4">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<template x-for="step in 4" :key="step">
|
||||
<div class="flex-1 h-1.5 rounded-full transition-all duration-300"
|
||||
:class="wizardCurrentStep >= step - 1 ? 'bg-brand-500' : 'bg-slate-700'"></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-slate-500">
|
||||
<span :class="wizardCurrentStep === 0 && 'text-brand-400 font-medium'">목적</span>
|
||||
<span :class="wizardCurrentStep === 1 && 'text-brand-400 font-medium'">기술스택</span>
|
||||
<span :class="wizardCurrentStep === 2 && 'text-brand-400 font-medium'">규모</span>
|
||||
<span :class="wizardCurrentStep === 3 && 'text-brand-400 font-medium'">추천</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wizard Content -->
|
||||
<div class="p-6 max-h-[60vh] overflow-y-auto">
|
||||
|
||||
<!-- Step 0: Purpose Selection -->
|
||||
<div x-show="wizardCurrentStep === 0" x-transition>
|
||||
<h3 class="text-base font-semibold text-white mb-4">어떤 용도로 서버를 사용하시나요?</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<template x-for="purpose in Object.keys(WIZARD_CONFIG.purposes)" :key="purpose">
|
||||
<button @click="selectWizardPurpose(purpose)"
|
||||
class="p-4 rounded-xl border-2 transition-all text-left hover:border-brand-500/50 hover:bg-brand-500/5"
|
||||
:class="wizardPurpose === purpose ? 'border-brand-500 bg-brand-500/10' : 'border-slate-700/50 bg-slate-800/50'">
|
||||
<div class="text-2xl mb-2" x-text="WIZARD_CONFIG.purposes[purpose].icon"></div>
|
||||
<div class="font-medium text-white text-sm" x-text="WIZARD_CONFIG.purposes[purpose].name"></div>
|
||||
<div class="text-xs text-slate-400 mt-1" x-text="WIZARD_CONFIG.purposes[purpose].desc"></div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 1: Stack Selection -->
|
||||
<div x-show="wizardCurrentStep === 1" x-transition>
|
||||
<h3 class="text-base font-semibold text-white mb-2">사용할 기술 스택을 선택하세요</h3>
|
||||
<p class="text-xs text-slate-400 mb-4">복수 선택 가능합니다</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<template x-for="(stacks, category) in getWizardStacksByPurpose()" :key="category">
|
||||
<div>
|
||||
<h4 class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-2" x-text="category"></h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template x-for="stack in stacks" :key="stack.id">
|
||||
<button @click="toggleWizardStack(stack.id)"
|
||||
class="px-3 py-2 rounded-lg border transition-all text-sm flex items-center gap-2"
|
||||
:class="wizardStacks.includes(stack.id)
|
||||
? 'border-brand-500 bg-brand-500/20 text-brand-300'
|
||||
: 'border-slate-700 bg-slate-800/50 text-slate-300 hover:border-slate-600'">
|
||||
<span x-text="stack.icon"></span>
|
||||
<span x-text="stack.name"></span>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex gap-3">
|
||||
<button @click="wizardGoBack()" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-xl transition text-sm">
|
||||
← 이전
|
||||
</button>
|
||||
<button @click="confirmWizardStacks()"
|
||||
:disabled="wizardStacks.length === 0"
|
||||
class="flex-1 py-3 bg-brand-500 hover:bg-brand-600 disabled:bg-slate-700 disabled:text-slate-500 text-white font-medium rounded-xl transition text-sm">
|
||||
다음 →
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Scale Selection -->
|
||||
<div x-show="wizardCurrentStep === 2" x-transition>
|
||||
<h3 class="text-base font-semibold text-white mb-4">예상 사용 규모를 선택하세요</h3>
|
||||
<div class="space-y-3">
|
||||
<template x-for="(scale, key) in WIZARD_CONFIG.scales" :key="key">
|
||||
<button @click="selectWizardScale(key)"
|
||||
class="w-full p-4 rounded-xl border-2 transition-all text-left hover:border-brand-500/50"
|
||||
:class="wizardScale === key ? 'border-brand-500 bg-brand-500/10' : 'border-slate-700/50 bg-slate-800/50'">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xl" x-text="scale.icon"></span>
|
||||
<span class="font-medium text-white" x-text="scale.name"></span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-400 mt-1" x-text="scale.desc"></div>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500" x-text="scale.users"></div>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button @click="wizardGoBack()" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-xl transition text-sm">
|
||||
← 이전
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Recommendations -->
|
||||
<div x-show="wizardCurrentStep === 3" x-transition>
|
||||
<h3 class="text-base font-semibold text-white mb-2">추천 서버 사양</h3>
|
||||
<p class="text-xs text-slate-400 mb-4">선택하신 조건에 맞는 최적의 서버입니다</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<!-- Economy -->
|
||||
<div x-show="wizardRecommendations?.economy"
|
||||
class="p-4 rounded-xl border border-slate-700/50 bg-slate-800/50 hover:border-slate-600 transition cursor-pointer"
|
||||
@click="selectWizardPlan('economy')">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs font-medium text-slate-400 uppercase">Economy</span>
|
||||
<span class="text-xs text-slate-500">최소 사양</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-2xl font-bold text-white" x-text="wizardRecommendations?.economy?.cpu + ' vCPU'"></span>
|
||||
<span class="text-slate-400">/</span>
|
||||
<span class="text-lg text-slate-300" x-text="formatWizardRam(wizardRecommendations?.economy?.ram)"></span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500" x-text="'$' + wizardRecommendations?.economy?.price?.toFixed(2) + '/월 ~'"></div>
|
||||
</div>
|
||||
|
||||
<!-- Recommended -->
|
||||
<div x-show="wizardRecommendations?.recommended"
|
||||
class="p-4 rounded-xl border-2 border-brand-500/50 bg-brand-500/5 hover:border-brand-500 transition cursor-pointer relative"
|
||||
@click="selectWizardPlan('recommended')">
|
||||
<div class="absolute -top-2.5 left-4 px-2 py-0.5 bg-brand-500 text-white text-xs font-medium rounded">추천</div>
|
||||
<div class="flex items-center justify-between mb-2 pt-1">
|
||||
<span class="text-xs font-medium text-brand-400 uppercase">Recommended</span>
|
||||
<span class="text-xs text-slate-500">최적 사양</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-2xl font-bold text-white" x-text="wizardRecommendations?.recommended?.cpu + ' vCPU'"></span>
|
||||
<span class="text-slate-400">/</span>
|
||||
<span class="text-lg text-slate-300" x-text="formatWizardRam(wizardRecommendations?.recommended?.ram)"></span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500" x-text="'$' + wizardRecommendations?.recommended?.price?.toFixed(2) + '/월 ~'"></div>
|
||||
</div>
|
||||
|
||||
<!-- Performance -->
|
||||
<div x-show="wizardRecommendations?.performance"
|
||||
class="p-4 rounded-xl border border-purple-500/30 bg-purple-500/5 hover:border-purple-500/50 transition cursor-pointer"
|
||||
@click="selectWizardPlan('performance')">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="text-xs font-medium text-purple-400 uppercase">Performance</span>
|
||||
<span class="text-xs text-slate-500">고성능</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-2xl font-bold text-white" x-text="wizardRecommendations?.performance?.cpu + ' vCPU'"></span>
|
||||
<span class="text-slate-400">/</span>
|
||||
<span class="text-lg text-slate-300" x-text="formatWizardRam(wizardRecommendations?.performance?.ram)"></span>
|
||||
</div>
|
||||
<div class="text-xs text-slate-500" x-text="'$' + wizardRecommendations?.performance?.price?.toFixed(2) + '/월 ~'"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="mt-4 p-3 bg-slate-800/50 rounded-xl">
|
||||
<div class="text-xs text-slate-400 mb-2">선택 요약</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300" x-text="WIZARD_CONFIG.purposes[wizardPurpose]?.name"></span>
|
||||
<template x-for="stackId in wizardStacks" :key="stackId">
|
||||
<span class="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300" x-text="getWizardStackName(stackId)"></span>
|
||||
</template>
|
||||
<span class="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300" x-text="WIZARD_CONFIG.scales[wizardScale]?.name"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<button @click="wizardGoBack()" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-white rounded-xl transition text-sm">
|
||||
← 다시 선택하기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Animation Script -->
|
||||
<script>
|
||||
// Intersection Observer for scroll animations
|
||||
|
||||
14
js/app.js
14
js/app.js
@@ -4,23 +4,19 @@
|
||||
*/
|
||||
|
||||
// 모듈 임포트
|
||||
import { TELEGRAM_BOT_URL, PRICING_DATA, MOCK_SERVERS, MOCK_STATS, MOCK_NOTIFICATIONS, WIZARD_CONFIG } from './config.js';
|
||||
import { TELEGRAM_BOT_URL, PRICING_DATA, MOCK_SERVERS, MOCK_STATS, MOCK_NOTIFICATIONS } from './config.js';
|
||||
import { API_CONFIG, ApiService } from './api.js';
|
||||
import { formatPrice, switchTab, updatePing, startPingUpdates, stopPingUpdates } from './utils.js';
|
||||
import { calculateRecommendation, createWizardMethods } from './wizard.js';
|
||||
import { formatPrice, switchTab } from './utils.js';
|
||||
import { createDashboardMethods } from './dashboard.js';
|
||||
import { pricingTable } from './pricing.js';
|
||||
|
||||
/**
|
||||
* Alpine.js 메인 앱 데이터 - 대화형 위자드 + 대시보드
|
||||
* Alpine.js 메인 앱 데이터 - 대시보드
|
||||
*/
|
||||
function anvilApp() {
|
||||
// 마법사 메서드와 대시보드 메서드 병합
|
||||
const wizardMethods = createWizardMethods();
|
||||
const dashboardMethods = createDashboardMethods();
|
||||
|
||||
return {
|
||||
...wizardMethods,
|
||||
...dashboardMethods
|
||||
};
|
||||
}
|
||||
@@ -43,9 +39,9 @@ window.onTelegramAuth = function(user) {
|
||||
|
||||
// 개발 도구 (콘솔에서 사용 가능)
|
||||
window.AnvilDevTools = {
|
||||
config: { TELEGRAM_BOT_URL, PRICING_DATA, WIZARD_CONFIG },
|
||||
config: { TELEGRAM_BOT_URL, PRICING_DATA },
|
||||
api: ApiService,
|
||||
utils: { formatPrice, switchTab, updatePing }
|
||||
utils: { formatPrice, switchTab }
|
||||
};
|
||||
|
||||
console.log('[Anvil] Application modules loaded');
|
||||
|
||||
1
naverb55fa5f3d2bc645de6aafe7cf52f3248.html
Normal file
1
naverb55fa5f3d2bc645de6aafe7cf52f3248.html
Normal file
@@ -0,0 +1 @@
|
||||
naver-site-verification: naverb55fa5f3d2bc645de6aafe7cf52f3248.html
|
||||
@@ -270,6 +270,8 @@ body {
|
||||
.delay-2 { animation-delay: 1.5s; }
|
||||
.delay-3 { animation-delay: 2.5s; }
|
||||
.delay-4 { animation-delay: 3.5s; }
|
||||
.delay-5 { animation-delay: 4.5s; }
|
||||
.delay-6 { animation-delay: 5.5s; }
|
||||
|
||||
/* Scroll Animations */
|
||||
.animate-on-scroll {
|
||||
|
||||
Reference in New Issue
Block a user