|
|
|
|
@@ -1,347 +0,0 @@
|
|
|
|
|
@extends('layouts.app')
|
|
|
|
|
|
|
|
|
|
@section('title', '바로빌 vs 팝빌 비교 분석')
|
|
|
|
|
|
|
|
|
|
@push('styles')
|
|
|
|
|
<style>
|
|
|
|
|
body { font-family: 'Noto Sans KR', sans-serif; }
|
|
|
|
|
.chart-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
height: 300px;
|
|
|
|
|
max-height: 400px;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
|
.chart-container { height: 350px; }
|
|
|
|
|
}
|
|
|
|
|
.code-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
|
|
|
.code-scroll::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
|
|
|
|
|
.active-tab { border-bottom: 2px solid #3b82f6; color: #1d4ed8; font-weight: 600; }
|
|
|
|
|
.inactive-tab { color: #64748b; }
|
|
|
|
|
.inactive-tab:hover { color: #334155; }
|
|
|
|
|
</style>
|
|
|
|
|
@endpush
|
|
|
|
|
|
|
|
|
|
@section('content')
|
|
|
|
|
<div class="bg-slate-50 text-slate-800 min-h-screen">
|
|
|
|
|
<!-- Navigation -->
|
|
|
|
|
<nav class="bg-white shadow-sm sticky top-0 z-40">
|
|
|
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
|
<div class="flex justify-between h-16 items-center">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<span class="text-xl font-bold text-slate-800">API 연동 파트너 분석</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="hidden sm:flex space-x-8" id="nav-container">
|
|
|
|
|
<button onclick="switchTab('overview')" id="nav-overview" class="active-tab px-1 pt-1 text-sm font-medium transition-colors">종합 요약</button>
|
|
|
|
|
<button onclick="switchTab('tech')" id="nav-tech" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">API 기술 비교</button>
|
|
|
|
|
<button onclick="switchTab('company')" id="nav-company" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">기업 성장/규모</button>
|
|
|
|
|
<button onclick="switchTab('decision')" id="nav-decision" class="inactive-tab px-1 pt-1 text-sm font-medium transition-colors">결정 가이드</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
|
<!-- Header Section -->
|
|
|
|
|
<div class="mb-10 text-center">
|
|
|
|
|
<h1 class="text-3xl font-extrabold text-slate-900 tracking-tight sm:text-4xl">바로빌 vs 팝빌</h1>
|
|
|
|
|
<p class="mt-4 max-w-2xl mx-auto text-xl text-slate-500">
|
|
|
|
|
SOAP(안정성)와 REST(확장성)의 대결.<br>
|
|
|
|
|
귀사의 개발 환경에 최적화된 전자세금계산서/API 연동 파트너는 어디일까요?
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- VIEW 1: OVERVIEW -->
|
|
|
|
|
<section id="view-overview" class="space-y-8">
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6 border-l-4 border-blue-500">
|
|
|
|
|
<h2 class="text-lg font-semibold text-slate-800 mb-2 flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" /></svg> 분석 요약: 현대적 개발엔 팝빌, 레거시 통합엔 바로빌</h2>
|
|
|
|
|
<p class="text-slate-600 mb-4">
|
|
|
|
|
두 기업 모두 업계 선두주자이나 지향점이 다릅니다. REST API를 선호한다면 팝빌이 우위입니다.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="radarChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<div class="p-4 bg-slate-50 rounded-lg">
|
|
|
|
|
<h3 class="font-bold text-blue-800 flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" /></svg> 바로빌 (Barobill)</h3>
|
|
|
|
|
<ul class="mt-2 text-sm text-slate-700 space-y-1 list-disc list-inside">
|
|
|
|
|
<li><strong>핵심:</strong> 전통적 강자, 높은 안정성</li>
|
|
|
|
|
<li><strong>기술:</strong> SOAP API 중심</li>
|
|
|
|
|
<li><strong>추천:</strong> .NET 구버전, SAP 연동, 내부망 프로젝트</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-4 bg-indigo-50 rounded-lg">
|
|
|
|
|
<h3 class="font-bold text-indigo-800 flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg> 팝빌 (Popbill)</h3>
|
|
|
|
|
<ul class="mt-2 text-sm text-slate-700 space-y-1 list-disc list-inside">
|
|
|
|
|
<li><strong>핵심:</strong> 개발자 친화적, 빠른 기술 도입</li>
|
|
|
|
|
<li><strong>기술:</strong> REST API 최적화, 다양한 SDK</li>
|
|
|
|
|
<li><strong>추천:</strong> 스타트업, 웹/앱 서비스, 최신 Tech Stack</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- VIEW 2: API TECH -->
|
|
|
|
|
<section id="view-tech" class="hidden space-y-8">
|
|
|
|
|
<div class="bg-white rounded-xl shadow p-6">
|
|
|
|
|
<h2 class="text-2xl font-bold text-slate-800 mb-4">API 기술 심층 비교: SOAP vs REST</h2>
|
|
|
|
|
<p class="text-slate-600 mb-6">
|
|
|
|
|
바로빌은 SOAP 기반으로 성장했고, 팝빌은 REST API의 유연성을 앞세워 성장했습니다.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
|
<!-- SOAP Column -->
|
|
|
|
|
<div class="border rounded-lg overflow-hidden">
|
|
|
|
|
<div class="bg-slate-200 px-4 py-2 font-mono text-xs font-bold text-slate-700 flex justify-between items-center">
|
|
|
|
|
<span>바로빌 스타일 (SOAP/XML)</span>
|
|
|
|
|
<span class="bg-slate-400 text-white px-2 py-0.5 rounded text-[10px]">Strict</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-slate-800 p-4 h-64 overflow-auto code-scroll">
|
|
|
|
|
<pre class="text-green-400 font-mono text-xs leading-5"><soapenv:Envelope xmlns:soapenv="...">
|
|
|
|
|
<soapenv:Header/>
|
|
|
|
|
<soapenv:Body>
|
|
|
|
|
<bar:GetTaxInvoiceState>
|
|
|
|
|
<bar:CorpNum>1234567890</bar:CorpNum>
|
|
|
|
|
<bar:MgtKey>20241129-001</bar:MgtKey>
|
|
|
|
|
<bar:UserID>test_user</bar:UserID>
|
|
|
|
|
</bar:GetTaxInvoiceState>
|
|
|
|
|
</soapenv:Body>
|
|
|
|
|
</soapenv:Envelope>
|
|
|
|
|
|
|
|
|
|
<!-- 단점: 메시지가 무거움, 파싱이 복잡함 --></pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- REST Column -->
|
|
|
|
|
<div class="border rounded-lg overflow-hidden ring-2 ring-indigo-500 ring-opacity-50">
|
|
|
|
|
<div class="bg-indigo-100 px-4 py-2 font-mono text-xs font-bold text-indigo-700 flex justify-between items-center">
|
|
|
|
|
<span>팝빌 스타일 (REST/JSON)</span>
|
|
|
|
|
<span class="bg-indigo-500 text-white px-2 py-0.5 rounded text-[10px]">Modern</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-slate-900 p-4 h-64 overflow-auto code-scroll">
|
|
|
|
|
<pre class="text-blue-300 font-mono text-xs leading-5">// GET /Taxinvoice/Status
|
|
|
|
|
// Header: Authorization: Bearer {Token}
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
"CorpNum": "1234567890",
|
|
|
|
|
"MgtKey": "20241129-001"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 응답 (JSON)
|
|
|
|
|
{
|
|
|
|
|
"code": 1,
|
|
|
|
|
"message": "전송 성공",
|
|
|
|
|
"data": { "state": "Issue" }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 장점: 가볍고 빠름, 직관적인 구조</pre>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4 text-center">
|
|
|
|
|
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
|
|
|
|
<div class="text-sm text-slate-500">연동 난이도</div>
|
|
|
|
|
<div class="font-bold text-slate-800">REST (팝빌) 유리 👍</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
|
|
|
|
<div class="text-sm text-slate-500">언어 지원 (SDK)</div>
|
|
|
|
|
<div class="font-bold text-slate-800">팝빌 (다양함) > 바로빌</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="p-3 bg-slate-50 rounded border border-slate-200">
|
|
|
|
|
<div class="text-sm text-slate-500">보안 프로토콜</div>
|
|
|
|
|
<div class="font-bold text-slate-800">양사 모두 우수</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- VIEW 3: COMPANY -->
|
|
|
|
|
<section id="view-company" class="hidden space-y-8">
|
|
|
|
|
<div class="bg-white rounded-xl shadow p-6">
|
|
|
|
|
<h3 class="text-lg font-bold text-slate-800 mb-2 flex items-center gap-2"><svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" /></svg> 매출 및 성장성 비교</h3>
|
|
|
|
|
<p class="text-sm text-slate-500 mb-6">
|
|
|
|
|
바로빌은 초기 시장 선점으로 안정적인 매출 베이스를 가지고 있으며, 팝빌은 REST API 수요 증가로 가파른 성장세를 보입니다.
|
|
|
|
|
</p>
|
|
|
|
|
<div class="chart-container">
|
|
|
|
|
<canvas id="revenueChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
|
<div class="bg-white rounded-xl shadow p-6">
|
|
|
|
|
<h4 class="font-bold text-slate-800 mb-4 border-b pb-2 flex items-center gap-2"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" /></svg> 바로빌 (케이넷)</h4>
|
|
|
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
|
|
|
<li class="flex justify-between"><span>설립 연도:</span><span class="font-semibold text-slate-900">2000년대 초반</span></li>
|
|
|
|
|
<li class="flex justify-between"><span>기업 문화:</span><span class="font-semibold text-slate-900">보수적, 안정 지향</span></li>
|
|
|
|
|
<li class="flex justify-between"><span>주요 고객:</span><span class="font-semibold text-slate-900">중견기업, ERP 개발사</span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bg-white rounded-xl shadow p-6">
|
|
|
|
|
<h4 class="font-bold text-slate-800 mb-4 border-b pb-2 flex items-center gap-2"><svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg> 팝빌 (링크허브)</h4>
|
|
|
|
|
<ul class="space-y-3 text-sm text-slate-600">
|
|
|
|
|
<li class="flex justify-between"><span>브랜드 런칭:</span><span class="font-semibold text-slate-900">2010년대</span></li>
|
|
|
|
|
<li class="flex justify-between"><span>기업 문화:</span><span class="font-semibold text-slate-900">Tech 중심, 유연함</span></li>
|
|
|
|
|
<li class="flex justify-between"><span>주요 고객:</span><span class="font-semibold text-slate-900">스타트업, SI</span></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
<!-- VIEW 4: DECISION -->
|
|
|
|
|
<section id="view-decision" class="hidden space-y-8">
|
|
|
|
|
<div class="bg-indigo-600 rounded-xl shadow-lg p-8 text-white text-center">
|
|
|
|
|
<h2 class="text-2xl font-bold mb-4">어떤 서비스를 선택해야 할까요?</h2>
|
|
|
|
|
<p class="text-indigo-100 max-w-2xl mx-auto mb-8">
|
|
|
|
|
아래 체크리스트를 클릭하여 현재 귀사의 프로젝트 성격을 확인해보세요.
|
|
|
|
|
</p>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-4xl mx-auto text-left">
|
|
|
|
|
<div id="choice-popbill" class="cursor-pointer bg-white/10 hover:bg-white/20 p-6 rounded-lg transition border border-transparent hover:border-white" onclick="selectChoice('popbill')">
|
|
|
|
|
<h3 class="font-bold text-lg mb-2 flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg> 트렌드 지향형</h3>
|
|
|
|
|
<ul class="text-sm space-y-2 opacity-90">
|
|
|
|
|
<li>✅ RESTful API에 익숙하다</li>
|
|
|
|
|
<li>✅ Python, Node.js, Go 등 사용</li>
|
|
|
|
|
<li>✅ JSON 포맷 선호</li>
|
|
|
|
|
<li>✅ 빠른 개발/배포 중요</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="choice-barobill" class="cursor-pointer bg-white/10 hover:bg-white/20 p-6 rounded-lg transition border border-transparent hover:border-white" onclick="selectChoice('barobill')">
|
|
|
|
|
<h3 class="font-bold text-lg mb-2 flex items-center gap-2"><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z" /></svg> 레거시 호환형</h3>
|
|
|
|
|
<ul class="text-sm space-y-2 opacity-90">
|
|
|
|
|
<li>✅ SAP, 구형 .NET과 연동 필요</li>
|
|
|
|
|
<li>✅ XML 기반 데이터 처리 필수</li>
|
|
|
|
|
<li>✅ SOAP 프로토콜 기존 시스템</li>
|
|
|
|
|
<li>✅ 기존 방식 유지 선호</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="recommendation-result" class="mt-8 hidden">
|
|
|
|
|
<div class="bg-white text-slate-800 p-6 rounded-lg inline-block shadow-2xl max-w-lg">
|
|
|
|
|
<div class="text-4xl mb-2" id="result-icon"></div>
|
|
|
|
|
<h3 class="text-xl font-bold mb-2" id="result-title"></h3>
|
|
|
|
|
<p class="text-slate-600" id="result-desc"></p>
|
|
|
|
|
<button onclick="resetDecision()" class="mt-4 text-sm text-blue-500 underline">다시 선택하기</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
</div>
|
|
|
|
|
@endsection
|
|
|
|
|
|
|
|
|
|
@push('scripts')
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
const state = { charts: {} };
|
|
|
|
|
|
|
|
|
|
function switchTab(tabId) {
|
|
|
|
|
['overview', 'tech', 'company', 'decision'].forEach(tab => {
|
|
|
|
|
const btn = document.getElementById(`nav-${tab}`);
|
|
|
|
|
const view = document.getElementById(`view-${tab}`);
|
|
|
|
|
if (tab === tabId) {
|
|
|
|
|
btn.classList.remove('inactive-tab');
|
|
|
|
|
btn.classList.add('active-tab');
|
|
|
|
|
view.classList.remove('hidden');
|
|
|
|
|
} else {
|
|
|
|
|
btn.classList.add('inactive-tab');
|
|
|
|
|
btn.classList.remove('active-tab');
|
|
|
|
|
view.classList.add('hidden');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function selectChoice(choice) {
|
|
|
|
|
const resultDiv = document.getElementById('recommendation-result');
|
|
|
|
|
const title = document.getElementById('result-title');
|
|
|
|
|
const desc = document.getElementById('result-desc');
|
|
|
|
|
const icon = document.getElementById('result-icon');
|
|
|
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
|
|
|
|
|
|
if (choice === 'popbill') {
|
|
|
|
|
icon.innerHTML = '<svg class="w-12 h-12 mx-auto text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.59 14.37a6 6 0 01-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 006.16-12.12A14.98 14.98 0 009.631 8.41m5.96 5.96a14.926 14.926 0 01-5.841 2.58m-.119-8.54a6 6 0 00-7.381 5.84h4.8m2.581-5.84a14.927 14.927 0 00-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 01-2.448-2.448 14.9 14.9 0 01.06-.312m-2.24 2.39a4.493 4.493 0 00-1.757 4.306 4.493 4.493 0 004.306-1.758M16.5 9a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z" /></svg>';
|
|
|
|
|
title.textContent = "결론: 팝빌 (Popbill) 추천";
|
|
|
|
|
desc.textContent = "REST API와 개발 편의성을 중요시한다면 팝빌이 최선의 선택입니다.";
|
|
|
|
|
} else {
|
|
|
|
|
icon.innerHTML = '<svg class="w-12 h-12 mx-auto text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" /></svg>';
|
|
|
|
|
title.textContent = "결론: 바로빌 (Barobill) 추천";
|
|
|
|
|
desc.textContent = "레거시 시스템과의 호환성이나 SOAP 필수 환경이라면 바로빌이 안정적입니다.";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function resetDecision() {
|
|
|
|
|
document.getElementById('recommendation-result').classList.add('hidden');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
|
// Radar Chart
|
|
|
|
|
const radarCtx = document.getElementById('radarChart').getContext('2d');
|
|
|
|
|
state.charts.radar = new Chart(radarCtx, {
|
|
|
|
|
type: 'radar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['기술 현대성', '문서 친절도', 'SDK 지원', '브랜드 인지도', '가격 경쟁력'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: '팝빌 (Popbill)',
|
|
|
|
|
data: [95, 90, 95, 70, 85],
|
|
|
|
|
fill: true,
|
|
|
|
|
backgroundColor: 'rgba(99, 102, 241, 0.2)',
|
|
|
|
|
borderColor: 'rgb(99, 102, 241)',
|
|
|
|
|
pointBackgroundColor: 'rgb(99, 102, 241)'
|
|
|
|
|
}, {
|
|
|
|
|
label: '바로빌 (Barobill)',
|
|
|
|
|
data: [60, 70, 75, 95, 85],
|
|
|
|
|
fill: true,
|
|
|
|
|
backgroundColor: 'rgba(59, 130, 246, 0.2)',
|
|
|
|
|
borderColor: 'rgb(59, 130, 246)',
|
|
|
|
|
pointBackgroundColor: 'rgb(59, 130, 246)'
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
scales: { r: { suggestedMin: 50, suggestedMax: 100, ticks: { display: false } } },
|
|
|
|
|
plugins: { legend: { position: 'bottom' } }
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Revenue Chart
|
|
|
|
|
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
|
|
|
|
|
state.charts.revenue = new Chart(revenueCtx, {
|
|
|
|
|
type: 'bar',
|
|
|
|
|
data: {
|
|
|
|
|
labels: ['2019', '2020', '2021', '2022', '2023'],
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: '바로빌 (안정적)',
|
|
|
|
|
data: [70, 72, 75, 78, 80],
|
|
|
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)'
|
|
|
|
|
}, {
|
|
|
|
|
label: '팝빌 (가파른 성장)',
|
|
|
|
|
data: [40, 55, 68, 82, 95],
|
|
|
|
|
backgroundColor: 'rgba(99, 102, 241, 0.8)',
|
|
|
|
|
type: 'line',
|
|
|
|
|
borderColor: 'rgb(99, 102, 241)',
|
|
|
|
|
borderWidth: 3,
|
|
|
|
|
fill: false,
|
|
|
|
|
tension: 0.4
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
plugins: { title: { display: true, text: '성장 추세 비교' } },
|
|
|
|
|
scales: { y: { beginAtZero: true, display: false } }
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
@endpush
|
pro