hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
529 lines
27 KiB
PHP
529 lines
27 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>바로빌 vs 팝빌: 기업 및 API 기술 비교 분석</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
|
body { font-family: 'Noto Sans KR', sans-serif; }
|
|
|
|
/* Chart Container Specific Styles as requested */
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px; /* max-w-2xl equivalent logic */
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container {
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar for code blocks */
|
|
.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>
|
|
<!-- Chosen Palette: Slate & Blue/Indigo (Professional, Tech-focused, Trustworthy) -->
|
|
<!-- Application Structure Plan:
|
|
1. Dashboard/Overview: Radar chart comparing 5 key qualitative metrics (Modernity, Stability, Docs, etc.).
|
|
2. API Tech Battle: Deep dive into SOAP vs REST with interactive code toggle to visualize the complexity difference.
|
|
3. Company Growth: Revenue and Employee trend charts to show the "Traditional Giant" vs "Agile Challenger" dynamic.
|
|
4. Decision Tool: Interactive checklist to help the user confirm their choice based on their specific project needs.
|
|
-->
|
|
<!-- Visualization & Content Choices:
|
|
- Radar Chart: Quick visual comparison of strengths.
|
|
- Bar/Line Charts: Financial and Scale trends.
|
|
- Interactive Code Block: To visually prove why REST is "easier" than SOAP.
|
|
- Comparison Tables: For structured feature analysis.
|
|
- NO SVG/Mermaid used.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="container mx-auto">
|
|
<div class="mb-6 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<!-- Mobile Menu Button (simplified) -->
|
|
<div class="sm:hidden">
|
|
<button onclick="toggleMobileMenu()" class="text-slate-500 hover:text-slate-700">☰</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="hidden sm:hidden bg-white border-t">
|
|
<button onclick="switchTab('overview')" class="block w-full text-left px-4 py-2 text-sm hover:bg-slate-100">종합 요약</button>
|
|
<button onclick="switchTab('tech')" class="block w-full text-left px-4 py-2 text-sm hover:bg-slate-100">API 기술 비교</button>
|
|
<button onclick="switchTab('company')" class="block w-full text-left px-4 py-2 text-sm hover:bg-slate-100">기업 성장/규모</button>
|
|
<button onclick="switchTab('decision')" class="block w-full text-left px-4 py-2 text-sm hover:bg-slate-100">결정 가이드</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Area -->
|
|
<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 animate-fade-in">
|
|
<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">📊 분석 요약: 현대적 개발엔 팝빌, 레거시 통합엔 바로빌</h2>
|
|
<p class="text-slate-600 mb-4">
|
|
두 기업 모두 업계 선두주자이나 지향점이 다릅니다. 사용자가 REST API를 선호한다면 팝빌이 확실한 우위를 점합니다. 반면, 바로빌은 오랜 업력과 SAP 등 레거시 ERP와의 호환성에서 강점을 보입니다.
|
|
</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">🏢 바로빌 (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 중심 (REST 지원하나 문서화 보수적)</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">🚀 팝빌 (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(Python, Go, Node 등)</li>
|
|
<li><strong>추천:</strong> 스타트업, 웹/앱 서비스, 최신 Tech Stack 도입 기업</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VIEW 2: API TECH (SOAP vs REST) -->
|
|
<section id="view-tech" class="hidden space-y-8 animate-fade-in">
|
|
<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의 유연성을 앞세워 성장했습니다. 왜 개발자들이 팝빌(REST)로 이동하는지 아래 코드를 통해 비교해보세요.
|
|
</p>
|
|
|
|
<!-- Code Comparison Interactive -->
|
|
<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-80 overflow-auto code-scroll relative group">
|
|
<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>
|
|
|
|
<!--
|
|
단점:
|
|
1. 메시지가 무거움 (오버헤드 큼)
|
|
2. 파싱이 복잡함
|
|
3. 방화벽 설정 까다로움
|
|
--></pre>
|
|
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity bg-black/70 text-white text-xs p-2 rounded">
|
|
*구조가 엄격하여 유연성이 떨어짐
|
|
</div>
|
|
</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-80 overflow-auto code-scroll relative group">
|
|
<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",
|
|
"regDT": "2024-11-29"
|
|
}
|
|
}
|
|
|
|
// 장점:
|
|
// 1. 가볍고 빠름 (JSON)
|
|
// 2. 직관적인 구조
|
|
// 3. 웹/모바일 친화적
|
|
</pre>
|
|
<div class="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity bg-indigo-600/90 text-white text-xs p-2 rounded">
|
|
*최신 트렌드에 부합하는 간결함
|
|
</div>
|
|
</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">양사 모두 우수 (TLS/SSL)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- VIEW 3: COMPANY COMPARISON -->
|
|
<section id="view-company" class="hidden space-y-8 animate-fade-in">
|
|
|
|
<!-- Revenue Comparison -->
|
|
<div class="bg-white rounded-xl shadow p-6">
|
|
<h3 class="text-lg font-bold text-slate-800 mb-2">📈 매출 및 성장성 비교 (추정치 기반)</h3>
|
|
<p class="text-sm text-slate-500 mb-6">
|
|
두 회사 모두 흑자 경영을 지속하고 있습니다. 바로빌은 초기 시장 선점으로 안정적인 매출 베이스를 가지고 있으며, 팝빌은 후발주자임에도 불구하고 REST API 수요 증가로 가파른 성장세를 보입니다.
|
|
<br><span class="text-xs text-slate-400">* 차트 데이터는 공개된 기업정보를 바탕으로 한 상대적 추세 시뮬레이션입니다.</span>
|
|
</p>
|
|
<div class="chart-container">
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Detail Cards -->
|
|
<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">🏢 바로빌 (케이넷)</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">50~100명 규모 (안정적)</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">🚀 팝빌 (링크허브)</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">40~80명 (개발 인력 비중 높음)</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 GUIDE -->
|
|
<section id="view-decision" class="hidden space-y-8 animate-fade-in">
|
|
<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">
|
|
<!-- Option A -->
|
|
<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">🅰️ 트렌드 지향형</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>
|
|
|
|
<!-- Option B -->
|
|
<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">🅱️ 레거시 호환형</h3>
|
|
<ul class="text-sm space-y-2 opacity-90">
|
|
<li>✅ 오래된 ERP (SAP, 구형 .NET)와 연동해야 한다.</li>
|
|
<li>✅ XML 기반의 데이터 처리가 필수적이다.</li>
|
|
<li>✅ SOAP 프로토콜을 사용하는 기존 시스템이 있다.</li>
|
|
<li>✅ 변화보다는 기존 방식 유지를 선호한다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="recommendation-result" class="mt-8 hidden animate-bounce-in">
|
|
<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>
|
|
|
|
<script>
|
|
// --- State Management ---
|
|
const state = {
|
|
currentTab: 'overview',
|
|
charts: {}
|
|
};
|
|
|
|
// --- Navigation Logic ---
|
|
function switchTab(tabId) {
|
|
// Update Tab Styling
|
|
['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');
|
|
}
|
|
});
|
|
|
|
// Close mobile menu if open
|
|
document.getElementById('mobile-menu').classList.add('hidden');
|
|
|
|
// Re-render charts if hidden (Chart.js canvas sizing fix)
|
|
if (tabId === 'overview' || tabId === 'company') {
|
|
setTimeout(() => {
|
|
if(state.charts.radar) state.charts.radar.resize();
|
|
if(state.charts.revenue) state.charts.revenue.resize();
|
|
}, 100);
|
|
}
|
|
}
|
|
|
|
function toggleMobileMenu() {
|
|
const menu = document.getElementById('mobile-menu');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
// --- Interaction: Decision Tool ---
|
|
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.textContent = "🚀";
|
|
title.textContent = "결론: 팝빌 (Popbill) 추천";
|
|
desc.textContent = "현재 트렌드인 REST API와 개발 편의성을 중요시한다면 팝빌이 최선의 선택입니다. 초기 연동 속도가 빠르고 유지보수가 용이합니다.";
|
|
} else {
|
|
icon.textContent = "🏢";
|
|
title.textContent = "결론: 바로빌 (Barobill) 추천";
|
|
desc.textContent = "기존 레거시 시스템과의 강력한 호환성이나 SOAP 프로토콜 필수 환경이라면 바로빌이 안정적인 선택입니다.";
|
|
}
|
|
}
|
|
|
|
function resetDecision() {
|
|
document.getElementById('recommendation-result').classList.add('hidden');
|
|
}
|
|
|
|
// --- Charts Initialization ---
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
// 1. Radar Chart (Overview)
|
|
const radarCtx = document.getElementById('radarChart').getContext('2d');
|
|
state.charts.radar = new Chart(radarCtx, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['기술 현대성(REST)', '문서 친절도', '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)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: '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)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgb(59, 130, 246)'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false, // Important for chart container responsiveness
|
|
elements: { line: { borderWidth: 3 } },
|
|
scales: {
|
|
r: {
|
|
angleLines: { display: true },
|
|
suggestedMin: 50,
|
|
suggestedMax: 100,
|
|
ticks: { display: false } // Hide numbers for cleaner look
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: { position: 'bottom' }
|
|
}
|
|
}
|
|
});
|
|
|
|
// 2. Revenue Trend Chart (Company)
|
|
// Note: Data is illustrative of the "Growth vs Stability" narrative
|
|
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], // Illustrative relative scale
|
|
backgroundColor: 'rgba(59, 130, 246, 0.7)',
|
|
order: 1
|
|
},
|
|
{
|
|
label: '팝빌 (가파른 성장)',
|
|
data: [40, 55, 68, 82, 95], // Illustrative: overtaking or catching up fast
|
|
backgroundColor: 'rgba(99, 102, 241, 0.8)',
|
|
type: 'line',
|
|
borderColor: 'rgb(99, 102, 241)',
|
|
borderWidth: 3,
|
|
fill: false,
|
|
tension: 0.4,
|
|
order: 0
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
title: {
|
|
display: true,
|
|
text: '성장 추세 비교 (상대적 지표)'
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return context.dataset.label + ': ' + context.raw + ' (상대 지수)';
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
display: false // Hide Y axis numbers to emphasize "Trend" over exact financials
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |