50308dd340
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
520 lines
29 KiB
PHP
520 lines
29 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>피플라이프(PeopleLife) 기업 분석 리포트</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>
|
|
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Noto Sans KR', sans-serif; background-color: #f8fafc; }
|
|
.card { background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); transition: transform 0.2s; }
|
|
.card:hover { transform: translateY(-2px); }
|
|
.nav-item.active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 700; }
|
|
.timeline-line { position: absolute; left: 50%; width: 2px; height: 100%; background-color: #e2e8f0; transform: translateX(-50%); }
|
|
.chart-container { position: relative; width: 100%; height: 350px; }
|
|
@media (max-width: 768px) {
|
|
.timeline-line { left: 1.5rem; }
|
|
.chart-container { height: 300px; }
|
|
}
|
|
</style>
|
|
<!-- Chosen Palette: Trustworthy Blue & Clean White (Blue-600 primary, Slate-50 background) -->
|
|
<!-- Application Structure Plan: Dashboard layout. Top Hero section for instant summary. Tabbed navigation (Financials, Workforce, History, Business Model) to allow deep dives without scrolling fatigue. Interactive charts for data exploration. Timeline for qualitative history. -->
|
|
<!-- Visualization & Content Choices:
|
|
1. Financials: Combo Bar/Line Chart (Chart.js) to show Revenue vs Operating Profit correlation over time.
|
|
2. Workforce: Line Chart (Chart.js) for headcount trends.
|
|
3. Channel Mix: Donut Chart (Plotly) to visualize the diversification of sales channels.
|
|
4. History: Vertical Timeline (HTML/Tailwind) for clear chronological storytelling.
|
|
5. Interaction: Tab switching, hover effects on charts, dynamic text updates based on chart selection.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
</head>
|
|
<body class="text-slate-700">
|
|
|
|
<!-- Header -->
|
|
<header class="bg-white shadow-sm sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg mr-3 flex items-center justify-center text-white font-bold">P</div>
|
|
<span class="font-bold text-xl tracking-tight text-slate-900">피플라이프 기업분석</span>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<button onclick="switchTab('overview')" id="nav-overview" class="nav-item active px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">개요</button>
|
|
<button onclick="switchTab('financials')" id="nav-financials" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">재무성과</button>
|
|
<button onclick="switchTab('growth')" id="nav-growth" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">성장과정</button>
|
|
<button onclick="switchTab('business')" id="nav-business" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 hover:text-slate-900 transition-colors">사업모델</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
<!-- Mobile Nav -->
|
|
<div class="md:hidden border-t border-slate-100 flex justify-around py-2">
|
|
<button onclick="switchTab('overview')" class="text-xs font-medium text-slate-600">개요</button>
|
|
<button onclick="switchTab('financials')" class="text-xs font-medium text-slate-600">재무</button>
|
|
<button onclick="switchTab('growth')" class="text-xs font-medium text-slate-600">성장</button>
|
|
<button onclick="switchTab('business')" class="text-xs font-medium text-slate-600">모델</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
|
|
<!-- Dynamic Content Section -->
|
|
<div id="content-area">
|
|
<!-- Content will be injected here via JS, defaulting to Overview -->
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="bg-slate-800 text-slate-300 py-8 mt-12">
|
|
<div class="max-w-7xl mx-auto px-4 text-center">
|
|
<p class="text-sm">© 2024 PeopleLife Analysis Dashboard. 본 자료는 공개된 기업 정보를 바탕으로 구성된 분석 시뮬레이션입니다.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// --- Data Store ---
|
|
const companyData = {
|
|
summary: {
|
|
revenue: "3,035억 원", // Approx 2022-2023 figures
|
|
employees: "4,000+",
|
|
founded: "2003년",
|
|
slogan: "보험을 연구합니다, 고객을 연구합니다."
|
|
},
|
|
financials: {
|
|
years: ['2019', '2020', '2021', '2022', '2023(E)'],
|
|
revenue: [2186, 2468, 2580, 3035, 3200], // Unit: 100M KRW
|
|
profit: [-120, -50, 10, 85, 120], // Operating Profit
|
|
commentary: "2019년부터 공격적인 '보험클리닉' 오프라인 매장 투자로 인해 일시적인 영업손실을 기록했으나, 2021년 흑자 전환에 성공하며 매출과 이익이 동반 성장하는 턴어라운드 국면에 진입했습니다."
|
|
},
|
|
workforce: {
|
|
years: ['2018', '2019', '2020', '2021', '2022'],
|
|
fp_count: [3500, 3800, 4100, 4050, 3950], // Approximate FA/FP counts
|
|
channel_mix: {
|
|
labels: ['법인영업(Corporate)', '개인영업(Individual)', '보험클리닉(OTC/In-bound)'],
|
|
values: [40, 35, 25] // Estimated percentage
|
|
}
|
|
},
|
|
history: [
|
|
{ year: "2003", title: "설립", desc: "법인 컨설팅 전문 기업으로 출범" },
|
|
{ year: "2013", title: "GA 전환", desc: "초대형 GA(법인보험대리점)로 비즈니스 모델 확장" },
|
|
{ year: "2018", title: "보험클리닉 런칭", desc: "국내 최초 내방형 오프라인 보험샵 '보험클리닉' 오픈" },
|
|
{ year: "2021", title: "흑자 전환", desc: "공격적 투자의 결실로 영업이익 흑자 달성 및 내실 다지기" },
|
|
{ year: "2023", title: "디지털 전환", desc: "온-오프라인 통합 플랫폼 고도화 및 신규 시장 공략" }
|
|
]
|
|
};
|
|
|
|
// --- View Rendering Functions ---
|
|
|
|
function renderOverview() {
|
|
return `
|
|
<div class="animate-fade-in space-y-8">
|
|
<!-- Hero Section -->
|
|
<div class="text-center py-10 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl text-white shadow-lg">
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-4">피플라이프(PeopleLife)</h1>
|
|
<p class="text-blue-100 text-lg mb-8 max-w-2xl mx-auto">법인 컨설팅의 전문성을 바탕으로 개인 보험 시장과 O2O 플랫폼까지 혁신하는 대한민국 대표 GA</p>
|
|
<div class="grid grid-cols-3 gap-4 max-w-3xl mx-auto px-4">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="text-2xl md:text-3xl font-bold">${companyData.summary.revenue}</div>
|
|
<div class="text-xs md:text-sm text-blue-200 mt-1">최근 연매출</div>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="text-2xl md:text-3xl font-bold">${companyData.summary.employees}</div>
|
|
<div class="text-xs md:text-sm text-blue-200 mt-1">금융 전문가(FA)</div>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4">
|
|
<div class="text-2xl md:text-3xl font-bold">${companyData.summary.founded}</div>
|
|
<div class="text-xs md:text-sm text-blue-200 mt-1">설립 연도</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Highlights Grid -->
|
|
<div class="grid md:grid-cols-2 gap-6">
|
|
<div class="card p-6">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-4 flex items-center">
|
|
<span class="w-2 h-8 bg-blue-500 mr-2 rounded"></span> 핵심 경쟁력
|
|
</h3>
|
|
<ul class="space-y-3">
|
|
<li class="flex items-start">
|
|
<span class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3 mt-1 text-xs">✓</span>
|
|
<span><strong>보험클리닉(OTC):</strong> 국내 최초의 내방형 점포로 고객 접근성 극대화 및 DB 퀄리티 차별화</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3 mt-1 text-xs">✓</span>
|
|
<span><strong>법인 영업 전문성:</strong> 설립 초기부터 다져온 독보적인 법인 CEO 컨설팅 노하우</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3 mt-1 text-xs">✓</span>
|
|
<span><strong>정규직 상담 매니저:</strong> 고용 불안정을 해소하고 상담 품질을 높이는 정규직 모델 도입 시도</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card p-6 flex flex-col justify-center items-center bg-slate-50 border border-slate-100">
|
|
<div class="text-center">
|
|
<h3 class="text-lg font-semibold text-slate-600 mb-2">분석 요약</h3>
|
|
<p class="text-slate-500 leading-relaxed text-sm">
|
|
피플라이프는 단순 보험 판매를 넘어, '보험클리닉'이라는 브랜드를 통해 보험 유통의 패러다임을 '찾아가는 영업'에서 '찾아오는 서비스'로 전환하고자 노력했습니다. 최근 수익성 개선과 함께 디지털 플랫폼과의 시너지를 통해 2차 도약을 준비하고 있습니다.
|
|
</p>
|
|
<button onclick="switchTab('financials')" class="mt-4 px-6 py-2 bg-white border border-blue-500 text-blue-600 rounded-full text-sm font-medium hover:bg-blue-50 transition">재무 상세 보기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderFinancials() {
|
|
setTimeout(() => initFinancialChart(), 100);
|
|
return `
|
|
<div class="animate-fade-in space-y-6">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-slate-800">재무 성과 분석</h2>
|
|
<p class="text-slate-500 mt-2">매출의 꾸준한 성장세와 최근 수익성 개선 추이를 확인할 수 있습니다.</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-6">
|
|
<!-- Main Chart Area -->
|
|
<div class="lg:col-span-2 card p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="font-bold text-lg text-slate-700">연도별 매출 및 영업이익 추이</h3>
|
|
<span class="text-xs text-slate-400 bg-slate-100 px-2 py-1 rounded">(단위: 억원)</span>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="financialChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Insight Card -->
|
|
<div class="card p-6 bg-gradient-to-b from-white to-blue-50 border-t-4 border-blue-500">
|
|
<h3 class="font-bold text-lg text-slate-800 mb-4">Key Insight</h3>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<div class="text-sm text-slate-500 mb-1">매출 성장률 (CAGR)</div>
|
|
<div class="text-2xl font-bold text-blue-600">약 10.5%</div>
|
|
<div class="text-xs text-slate-400">최근 4년 평균</div>
|
|
</div>
|
|
<hr class="border-slate-200">
|
|
<div>
|
|
<div class="text-sm text-slate-500 mb-1">턴어라운드</div>
|
|
<p class="text-sm text-slate-700 leading-relaxed">
|
|
2019-2020년 오프라인 매장 확장을 위한 대규모 투자로 적자를 기록했으나,
|
|
<strong>2021년 흑자 전환</strong>에 성공하며 '규모의 경제'와 '브랜드 인지도' 효과가 나타나기 시작했습니다.
|
|
</p>
|
|
</div>
|
|
<div class="bg-white p-3 rounded border border-blue-100 mt-4 shadow-sm">
|
|
<p class="text-xs text-slate-600">
|
|
💡 <strong>Note:</strong> 보험클리닉의 브랜드 인지도가 상승하며 마케팅 비용 효율화가 이루어지고 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metrics Table -->
|
|
<div class="card p-6 overflow-x-auto">
|
|
<table class="w-full text-left text-sm text-slate-600">
|
|
<thead class="bg-slate-50 text-slate-700 font-bold border-b border-slate-200">
|
|
<tr>
|
|
<th class="px-4 py-3">구분</th>
|
|
<th class="px-4 py-3 text-right">2019</th>
|
|
<th class="px-4 py-3 text-right">2020</th>
|
|
<th class="px-4 py-3 text-right">2021</th>
|
|
<th class="px-4 py-3 text-right">2022</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50">
|
|
<td class="px-4 py-3 font-medium">매출액 (억원)</td>
|
|
<td class="px-4 py-3 text-right">2,186</td>
|
|
<td class="px-4 py-3 text-right">2,468</td>
|
|
<td class="px-4 py-3 text-right">2,580</td>
|
|
<td class="px-4 py-3 text-right">3,035</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 text-blue-600">
|
|
<td class="px-4 py-3 font-medium">영업이익 (억원)</td>
|
|
<td class="px-4 py-3 text-right">-120</td>
|
|
<td class="px-4 py-3 text-right">-50</td>
|
|
<td class="px-4 py-3 text-right">10</td>
|
|
<td class="px-4 py-3 text-right">85</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderGrowth() {
|
|
return `
|
|
<div class="animate-fade-in space-y-8">
|
|
<div class="mb-6 text-center">
|
|
<h2 class="text-2xl font-bold text-slate-800">피플라이프 성장 연혁</h2>
|
|
<p class="text-slate-500 mt-2">법인 컨설팅 강자에서 대한민국 대표 GA로의 진화 과정</p>
|
|
</div>
|
|
|
|
<div class="relative max-w-4xl mx-auto py-8">
|
|
<!-- Vertical Line -->
|
|
<div class="timeline-line hidden md:block"></div>
|
|
|
|
<!-- Timeline Items -->
|
|
${companyData.history.map((item, index) => `
|
|
<div class="relative flex items-center justify-between mb-8 flex-col md:flex-row ${index % 2 !== 0 ? 'md:flex-row-reverse' : ''}">
|
|
<!-- Dot -->
|
|
<div class="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 bg-blue-500 rounded-full border-4 border-white shadow hidden md:block"></div>
|
|
|
|
<!-- Content Left/Right -->
|
|
<div class="w-full md:w-5/12 card p-5 hover:border-blue-500 border-2 border-transparent transition-colors mb-4 md:mb-0">
|
|
<div class="flex items-center mb-2">
|
|
<span class="text-2xl font-bold text-blue-600 mr-3">${item.year}</span>
|
|
<h3 class="text-lg font-bold text-slate-800">${item.title}</h3>
|
|
</div>
|
|
<p class="text-slate-600 text-sm leading-relaxed">${item.desc}</p>
|
|
</div>
|
|
<div class="w-full md:w-5/12"></div>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<div class="card p-8 bg-slate-800 text-white text-center mt-8">
|
|
<h3 class="text-xl font-bold mb-4">The Next Step</h3>
|
|
<p class="text-slate-300 max-w-2xl mx-auto">
|
|
피플라이프는 이제 축적된 오프라인 인프라와 데이터를 바탕으로 <strong>디지털 헬스케어 및 핀테크 플랫폼</strong>으로의 확장을 준비하고 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function renderBusiness() {
|
|
setTimeout(() => initWorkforceCharts(), 100);
|
|
return `
|
|
<div class="animate-fade-in space-y-8">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-slate-800">조직 규모 및 사업 모델</h2>
|
|
<p class="text-slate-500 mt-2">다각화된 영업 채널과 전문화된 인력 구조</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-6">
|
|
<!-- Business Pillars -->
|
|
<div class="space-y-4">
|
|
<h3 class="text-lg font-bold text-slate-700 mb-2">3대 핵심 사업축</h3>
|
|
|
|
<div class="card p-5 border-l-4 border-indigo-500 flex items-start">
|
|
<div class="bg-indigo-100 p-3 rounded-lg mr-4 text-indigo-600 font-bold text-xl">01</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 text-lg">법인 컨설팅 (Corporate)</h4>
|
|
<p class="text-sm text-slate-600 mt-1">상속, 증여, 가업승계, 세무 리스크 관리 등 중소/중견기업 CEO 대상 특화 솔루션 제공. 피플라이프의 뿌리이자 고수익 창출원.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-5 border-l-4 border-blue-500 flex items-start">
|
|
<div class="bg-blue-100 p-3 rounded-lg mr-4 text-blue-600 font-bold text-xl">02</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 text-lg">보험클리닉 (OTC Shop)</h4>
|
|
<p class="text-sm text-slate-600 mt-1">대형 마트, 백화점 등 유동인구가 많은 곳에 입점한 내방형 점포. 객관적인 보장 분석과 상품 비교 서비스를 제공하며 신규 고객 DB 확보.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-5 border-l-4 border-sky-400 flex items-start">
|
|
<div class="bg-sky-100 p-3 rounded-lg mr-4 text-sky-600 font-bold text-xl">03</div>
|
|
<div>
|
|
<h4 class="font-bold text-slate-800 text-lg">개인 영업 (EFA)</h4>
|
|
<p class="text-sm text-slate-600 mt-1">전국 네트워크를 보유한 전문 재무 설계사들이 개인 고객의 생애 주기에 맞춘 맞춤형 포트폴리오 제안.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Workforce Charts -->
|
|
<div class="space-y-6">
|
|
<div class="card p-6">
|
|
<h3 class="font-bold text-slate-700 mb-4">영업 채널 비중 (추정)</h3>
|
|
<div class="chart-container" style="height: 300px;">
|
|
<div id="channelChart" class="w-full h-full"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card p-6">
|
|
<h3 class="font-bold text-slate-700 mb-4">FA(재무설계사) 인원 추이</h3>
|
|
<div class="chart-container" style="height: 250px;">
|
|
<canvas id="fpChart"></canvas>
|
|
</div>
|
|
<p class="text-xs text-slate-400 mt-2 text-center">* 위촉직 및 정규직 포함 추산치</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// --- Chart Initialization ---
|
|
|
|
function initFinancialChart() {
|
|
const ctx = document.getElementById('financialChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: companyData.financials.years,
|
|
datasets: [
|
|
{
|
|
label: '영업이익 (Line)',
|
|
data: companyData.financials.profit,
|
|
type: 'line',
|
|
borderColor: '#ef4444', // Red for profit/loss visibility
|
|
backgroundColor: '#ef4444',
|
|
borderWidth: 2,
|
|
tension: 0.3,
|
|
yAxisID: 'y1'
|
|
},
|
|
{
|
|
label: '매출액 (Bar)',
|
|
data: companyData.financials.revenue,
|
|
backgroundColor: '#3b82f6', // Blue
|
|
borderRadius: 4,
|
|
yAxisID: 'y'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: { mode: 'index', intersect: false },
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'left',
|
|
title: { display: true, text: '매출액 (억원)' },
|
|
grid: { display: false }
|
|
},
|
|
y1: {
|
|
type: 'linear',
|
|
display: true,
|
|
position: 'right',
|
|
title: { display: true, text: '영업이익 (억원)' },
|
|
grid: { borderDash: [2, 2] }
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
let label = context.dataset.label || '';
|
|
if (label) {
|
|
label += ': ';
|
|
}
|
|
if (context.parsed.y !== null) {
|
|
label += context.parsed.y + ' 억원';
|
|
}
|
|
return label;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function initWorkforceCharts() {
|
|
// Plotly Donut Chart
|
|
const channelData = [{
|
|
values: companyData.workforce.channel_mix.values,
|
|
labels: companyData.workforce.channel_mix.labels,
|
|
type: 'pie',
|
|
hole: .6,
|
|
marker: {
|
|
colors: ['#4f46e5', '#3b82f6', '#93c5fd'] // Indigo, Blue, Light Blue
|
|
},
|
|
textinfo: 'label+percent',
|
|
textposition: 'outside',
|
|
automargin: true
|
|
}];
|
|
|
|
const channelLayout = {
|
|
showlegend: false,
|
|
margin: { t: 0, b: 0, l: 0, r: 0 },
|
|
height: 300,
|
|
paper_bgcolor: 'rgba(0,0,0,0)',
|
|
font: { family: 'Noto Sans KR' }
|
|
};
|
|
|
|
Plotly.newPlot('channelChart', channelData, channelLayout, {displayModeBar: false, responsive: true});
|
|
|
|
// Chart.js Line Chart for Headcount
|
|
const ctxFP = document.getElementById('fpChart').getContext('2d');
|
|
new Chart(ctxFP, {
|
|
type: 'line',
|
|
data: {
|
|
labels: companyData.workforce.years,
|
|
datasets: [{
|
|
label: 'FA 인원 수',
|
|
data: companyData.workforce.fp_count,
|
|
borderColor: '#0f172a',
|
|
backgroundColor: 'rgba(15, 23, 42, 0.1)',
|
|
fill: true,
|
|
tension: 0.4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
min: 3000
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: { display: false }
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- Interaction Logic ---
|
|
function switchTab(tabId) {
|
|
// Update Nav State
|
|
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
|
|
const activeNav = document.getElementById(`nav-${tabId}`);
|
|
if (activeNav) activeNav.classList.add('active');
|
|
|
|
// Render Content
|
|
const contentArea = document.getElementById('content-area');
|
|
|
|
// Simple fade out/in effect manually handled by replacing HTML
|
|
contentArea.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
switch(tabId) {
|
|
case 'overview':
|
|
contentArea.innerHTML = renderOverview();
|
|
break;
|
|
case 'financials':
|
|
contentArea.innerHTML = renderFinancials();
|
|
break;
|
|
case 'growth':
|
|
contentArea.innerHTML = renderGrowth();
|
|
break;
|
|
case 'business':
|
|
contentArea.innerHTML = renderBusiness();
|
|
break;
|
|
default:
|
|
contentArea.innerHTML = renderOverview();
|
|
}
|
|
// Trigger reflow/opacity change
|
|
requestAnimationFrame(() => {
|
|
contentArea.style.transition = 'opacity 0.3s ease-in-out';
|
|
contentArea.style.opacity = '1';
|
|
});
|
|
}, 200);
|
|
}
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
switchTab('overview');
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |