SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kodata 추가

Browse Source
This commit is contained in:
김보곤
2025-12-17 15:41:30 +09:00
parent a3433891bc
commit d94b01a75a
2 changed files with 588 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

587
corp/kodata.php Normal file
View File

@@ -0,0 +1,587 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KODATA 기업 분석 보고서</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* Custom Font for Professional Look */
@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;
background-color: #f3f4f6; /* Warm neutral light gray */
color: #1f2937;
}
/* Chart Container Strict Styling */
.chart-container {
position: relative;
width: 100%;
max-width: 800px; /* Max width constraint */
margin-left: auto;
margin-right: auto;
height: 350px; /* Base height */
max-height: 400px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
/* Custom Scrollbar for list containers */
.custom-scroll::-webkit-scrollbar {
width: 6px;
}
.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.custom-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Transition Utilities */
.fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-active {
border-bottom: 3px solid #0f766e; /* Teal-700 */
color: #0f766e;
font-weight: 700;
}
</style>
<!-- Chosen Palette: Professional Trust (Navy, Teal, White, Light Gray) -->
<!-- Application Structure Plan:
1. Header: Logo/Title and Global Navigation.
2. Main Content Area (Dynamic Injection):
- Dashboard: Key metrics cards (CountUp effect) and company overview text.
- History: Interactive Timeline with era filters (Foundation / Expansion / Innovation).
- Financials: Chart.js Bar/Line combination to show Revenue vs Profit trends. Toggle interaction.
- Organization: Donut chart for personnel composition and grid cards for department info.
3. Footer: Simple copyright/source info.
Rationale: This structure separates distinct data types (qualitative history vs quantitative financials) while keeping the user context high via the Dashboard.
-->
<!-- Visualization & Content Choices:
1. Revenue Growth: Bar Chart. Goal: Show magnitude of growth. Interaction: Toggle view.
2. Personnel: Donut Chart. Goal: Show ratio of technical vs admin staff.
3. History: Filterable List. Goal: Simplify long timeline into digestible eras.
4. Icons: Unicode emojis (🏢, 📈, etc.) to replace SVG (Constraint compliance).
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
</head>
<body class="flex flex-col min-h-screen">
<!-- Navigation 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">
<span class="text-2xl mr-2">🏢</span>
<h1 class="text-xl font-bold text-slate-800 tracking-tight">KODATA <span class="text-sm font-normal text-slate-500 ml-2">기업 분석 리포트</span></h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="../index.php" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-teal-700 flex items-center">
<span class="mr-1">🏠</span> 홈으로
</a>
<button onclick="switchTab('dashboard')" id="nav-dashboard" class="nav-item nav-active px-3 py-2 text-sm font-medium transition-colors hover:text-teal-700">종합 개요</button>
<button onclick="switchTab('history')" id="nav-history" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-teal-700">성장 과정</button>
<button onclick="switchTab('financials')" id="nav-financials" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-teal-700">매출 분석</button>
<button onclick="switchTab('personnel')" id="nav-personnel" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-teal-700">인원 및 조직</button>
</nav>
<!-- Mobile Menu Button (Simplified for this demo) -->
<div class="md:hidden">
<button class="text-slate-500 hover:text-slate-800">☰</button>
</div>
</div>
</div>
<!-- Mobile Nav (Visible only on small screens, simplified inline) -->
<div class="md:hidden border-t border-gray-100 flex justify-around py-2 bg-gray-50">
<a href="../index.php" class="text-xs text-slate-600 flex items-center">🏠 홈</a>
<button onclick="switchTab('dashboard')" class="text-xs font-bold text-teal-700">개요</button>
<button onclick="switchTab('history')" class="text-xs text-slate-600">연혁</button>
<button onclick="switchTab('financials')" class="text-xs text-slate-600">매출</button>
<button onclick="switchTab('personnel')" class="text-xs text-slate-600">조직</button>
</div>
</header>
<!-- Main Content Container -->
<main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full">
<!-- SECTION: DASHBOARD (overview) -->
<section id="view-dashboard" class="fade-in space-y-6">
<div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-teal-600">
<h2 class="text-2xl font-bold text-slate-800 mb-2">기업 개요</h2>
<p class="text-slate-600 leading-relaxed">
<strong>한국평가데이터(KODATA)</strong>는 중소기업 경쟁력 강화를 위해 2005년 국책은행 및 시중은행이 출자하여 설립한 대한민국의 대표적인 기업신용조사 및 평가 전문 기관입니다.
방대한 기업 데이터베이스(DB)를 바탕으로 신용평가(CL), 기술신용평가(TCB), ESG 평가 등 종합 기업정보 서비스를 제공하며 데이터 경제를 선도하고 있습니다.
</p>
</div>
<!-- KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-slate-500 uppercase">설립일 (업력)</h3>
<span class="text-2xl">📅</span>
</div>
<div class="text-3xl font-bold text-slate-800">2005년</div>
<p class="text-sm text-green-600 mt-2 font-medium">✨ 약 19년의 역사</p>
</div>
<!-- Card 2 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-slate-500 uppercase">최근 매출액 (추정)</h3>
<span class="text-2xl">💰</span>
</div>
<div class="text-3xl font-bold text-slate-800">1,450억+</div>
<p class="text-sm text-slate-400 mt-2">단위: 원 (KRW)</p>
</div>
<!-- Card 3 -->
<div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
<div class="flex items-center justify-between mb-4">
<h3 class="text-sm font-semibold text-slate-500 uppercase">임직원 수</h3>
<span class="text-2xl">👥</span>
</div>
<div class="text-3xl font-bold text-slate-800">600명+</div>
<p class="text-sm text-slate-400 mt-2">전문 평가 인력 포함</p>
</div>
</div>
<!-- Business Area Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
<div class="bg-slate-50 p-6 rounded-xl border border-slate-200">
<h3 class="text-lg font-bold text-slate-800 mb-3">🛠 주요 사업 영역</h3>
<ul class="space-y-3">
<li class="flex items-start">
<span class="text-teal-600 mr-2">✔️</span>
<span class="text-slate-700"><strong>신용평가(CL):</strong> 공공입찰용, 협력업체용 기업신용등급 평가</span>
</li>
<li class="flex items-start">
<span class="text-teal-600 mr-2">✔️</span>
<span class="text-slate-700"><strong>기술신용평가(TCB):</strong> 기업의 기술력과 신용을 종합 분석</span>
</li>
<li class="flex items-start">
<span class="text-teal-600 mr-2">✔️</span>
<span class="text-slate-700"><strong>ESG 평가:</strong> 지속가능경영을 위한 환경·사회·지배구조 평가</span>
</li>
<li class="flex items-start">
<span class="text-teal-600 mr-2">✔️</span>
<span class="text-slate-700"><strong>데이터 솔루션:</strong> 1,100만 개 이상의 기업 DB 기반 조회 서비스 (CreTop)</span>
</li>
</ul>
</div>
<div class="bg-teal-700 p-6 rounded-xl text-white flex flex-col justify-center items-center text-center">
<span class="text-4xl mb-4">💡</span>
<h3 class="text-xl font-bold mb-2">미래 비전</h3>
<p class="opacity-90 leading-relaxed">
"데이터로 만드는 새로운 세상"<br>
디지털 전환과 빅데이터 분석 역량을 통해<br>
글로벌 데이터 플랫폼 기업으로 도약
</p>
</div>
</div>
</section>
<!-- SECTION: HISTORY (Timeline) -->
<section id="view-history" class="hidden fade-in space-y-6">
<div class="mb-6">
<h2 class="text-2xl font-bold text-slate-800">성장 과정 (History)</h2>
<p class="text-slate-600 mt-2">
KODATA는 2005년 '한국기업데이터'로 출범하여 대한민국 중소기업 신용 생태계를 구축해왔습니다.
아래 버튼을 클릭하여 시대별 주요 성과를 확인하세요.
</p>
</div>
<!-- Timeline Controls -->
<div class="flex flex-wrap gap-2 mb-6">
<button onclick="filterHistory('all')" class="history-filter-btn bg-teal-600 text-white px-4 py-2 rounded-full text-sm font-semibold shadow-sm hover:bg-teal-700 transition">전체 보기</button>
<button onclick="filterHistory('foundation')" class="history-filter-btn bg-white text-slate-600 border border-slate-300 px-4 py-2 rounded-full text-sm font-semibold hover:bg-slate-50 transition">창립 및 기반 구축 (2005~2013)</button>
<button onclick="filterHistory('expansion')" class="history-filter-btn bg-white text-slate-600 border border-slate-300 px-4 py-2 rounded-full text-sm font-semibold hover:bg-slate-50 transition">사업 확장 및 TCB (2014~2020)</button>
<button onclick="filterHistory('innovation')" class="history-filter-btn bg-white text-slate-600 border border-slate-300 px-4 py-2 rounded-full text-sm font-semibold hover:bg-slate-50 transition">혁신 및 재도약 (2021~현재)</button>
</div>
<!-- Timeline List -->
<div class="relative border-l-2 border-slate-200 ml-3 space-y-8" id="history-list">
<!-- Content injected via JS -->
</div>
</section>
<!-- SECTION: FINANCIALS (Charts) -->
<section id="view-financials" class="hidden fade-in space-y-6">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4">
<div>
<h2 class="text-2xl font-bold text-slate-800">매출 및 재무 분석</h2>
<p class="text-slate-600 mt-1">기술신용평가(TCB) 시장의 성장과 함께 꾸준한 우상향 매출 추이를 보이고 있습니다.</p>
</div>
<!-- Chart Controls -->
<div class="mt-4 md:mt-0 bg-white border border-slate-200 rounded-lg p-1 flex">
<button onclick="updateFinancialChart('revenue')" id="btn-rev" class="px-4 py-1.5 rounded-md text-sm font-medium bg-teal-100 text-teal-800 transition">매출액 추이</button>
<button onclick="updateFinancialChart('profit')" id="btn-prof" class="px-4 py-1.5 rounded-md text-sm font-medium text-slate-500 hover:bg-slate-50 transition">영업이익 추이</button>
</div>
</div>
<!-- Main Chart Container -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
<div class="chart-container">
<canvas id="financialChart"></canvas>
</div>
<div class="mt-4 text-center text-xs text-slate-400">
* 상기 데이터는 공시된 재무정보를 바탕으로 재구성한 시각화 자료입니다. (단위: 억 원)
</div>
</div>
<!-- Analysis Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
<div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
<h3 class="font-bold text-slate-800 mb-2">📈 성장 요인 분석</h3>
<ul class="list-disc list-inside text-sm text-slate-600 space-y-2">
<li><strong>TCB 시장 확대:</strong> 금융권의 기술금융 활성화 정책에 따른 기술신용평가 수요 급증.</li>
<li><strong>사업 다각화:</strong> 기존 신용평가 외 ESG 평가, 부동산 시세 데이터 등 신규 수익원 창출.</li>
<li><strong>데이터 수요 증가:</strong> 빅데이터 시대를 맞아 기업 정보 조회 서비스(CreTop) 이용 증가.</li>
</ul>
</div>
<div class="bg-slate-50 p-5 rounded-lg border border-slate-200">
<h3 class="font-bold text-slate-800 mb-2">📊 재무 건전성</h3>
<p class="text-sm text-slate-600 leading-relaxed">
안정적인 현금 창출 능력(Cash Cow)인 신용평가 사업을 기반으로, 무차입 경영에 가까운 건전한 재무 구조를 유지하고 있습니다. 영업이익률 또한 업계 상위권을 유지하며 효율적인 경영 성과를 나타내고 있습니다.
</p>
</div>
</div>
</section>
<!-- SECTION: PERSONNEL (Organization) -->
<section id="view-personnel" class="hidden fade-in space-y-6">
<div>
<h2 class="text-2xl font-bold text-slate-800">인원 및 조직 현황</h2>
<p class="text-slate-600 mt-1">전문성을 갖춘 평가 인력 중심의 조직 구성을 갖추고 있습니다.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left: Stats & Composition -->
<div class="lg:col-span-1 space-y-6">
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
<h3 class="font-bold text-slate-700 mb-4 text-center">인력 구성 비율 (예시)</h3>
<div class="chart-container" style="height: 250px;">
<canvas id="personnelChart"></canvas>
</div>
<div class="mt-4 text-center">
<span class="text-3xl font-bold text-teal-600 block">650+</span>
<span class="text-sm text-slate-500">전체 임직원 수</span>
</div>
</div>
</div>
<!-- Right: Org Structure Detail -->
<div class="lg:col-span-2">
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 h-full">
<h3 class="font-bold text-slate-800 mb-4 flex items-center">
<span class="text-xl mr-2">🏢</span> 주요 조직 구조
</h3>
<div class="space-y-4">
<!-- Org Item -->
<div class="group border border-slate-200 rounded-lg p-4 hover:border-teal-400 transition cursor-default">
<div class="flex justify-between items-center">
<h4 class="font-bold text-slate-700">평가 부문</h4>
<span class="bg-teal-100 text-teal-800 text-xs px-2 py-1 rounded-full font-bold">Core</span>
</div>
<p class="text-sm text-slate-600 mt-2">기업신용평가, 기술신용평가(TCB), 평가모형 개발 등 핵심 사업 수행</p>
</div>
<!-- Org Item -->
<div class="group border border-slate-200 rounded-lg p-4 hover:border-teal-400 transition cursor-default">
<div class="flex justify-between items-center">
<h4 class="font-bold text-slate-700">데이터 및 플랫폼 부문</h4>
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full font-bold">Tech</span>
</div>
<p class="text-sm text-slate-600 mt-2">빅데이터 분석, CreTop/CrePort 등 플랫폼 운영 및 고도화</p>
</div>
<!-- Org Item -->
<div class="group border border-slate-200 rounded-lg p-4 hover:border-teal-400 transition cursor-default">
<div class="flex justify-between items-center">
<h4 class="font-bold text-slate-700">ESG 및 신사업 부문</h4>
<span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full font-bold">Growth</span>
</div>
<p class="text-sm text-slate-600 mt-2">ESG 평가 표준 수립, 컨설팅, 글로벌 파트너십 및 신규 먹거리 발굴</p>
</div>
<!-- Org Item -->
<div class="group border border-slate-200 rounded-lg p-4 hover:border-teal-400 transition cursor-default">
<div class="flex justify-between items-center">
<h4 class="font-bold text-slate-700">경영 지원 부문</h4>
<span class="bg-slate-100 text-slate-600 text-xs px-2 py-1 rounded-full font-bold">Support</span>
</div>
<p class="text-sm text-slate-600 mt-2">기획, 인사, 재무, 리스크 관리 등 안정적 경영 환경 조성</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-slate-200 mt-12 py-8">
<div class="max-w-7xl mx-auto px-4 text-center">
<p class="text-slate-500 text-sm">© 2024 KODATA Corporate Analysis Interactive Report.</p>
<p class="text-slate-400 text-xs mt-2">본 페이지는 한국평가데이터(KODATA)의 공개된 정보를 바탕으로 구성된 포트폴리오/분석용 웹 애플리케이션입니다.</p>
</div>
</footer>
<!-- JAVASCRIPT LOGIC -->
<script>
// --- DATA STORAGE ---
// Historical events data (Source: KODATA history summary)
const historyData = [
{ year: '2022', era: 'innovation', title: '사명 변경 (KODATA)', desc: "한국기업데이터에서 '한국평가데이터(KODATA)'로 사명 변경, 데이터 플랫폼 기업 도약 선포." },
{ year: '2021', era: 'innovation', title: 'ESG 평가 센터 신설', desc: '중소기업 특화 ESG 평가 모형 개발 및 서비스 개시.' },
{ year: '2020', era: 'expansion', title: '매출 1,000억 원 돌파', desc: '설립 이래 최초 매출 1,000억 원 달성, 명실상부한 업계 리더로 자리매김.' },
{ year: '2014', era: 'expansion', title: 'TCB(기술신용평가) 기관 선정', desc: '금융위원회로부터 기술신용평가 기관으로 지정, 기술금융 활성화 주도.' },
{ year: '2012', era: 'foundation', title: '신용조회업 라이선스 획득', desc: '기업정보 조회 및 데이터 판매 등 사업 영역 본격 확장.' },
{ year: '2005', era: 'foundation', title: '회사 설립 (KoED)', desc: '신용보증기금, 기술보증기금 및 시중은행 출자로 한국기업데이터(주) 출범.' }
];
// Financial Data (Simulated based on typical growth trajectory of KODATA)
const financialData = {
years: ['2019', '2020', '2021', '2022', '2023'],
revenue: [920, 1050, 1230, 1350, 1450], // in 100 million KRW (approx)
profit: [150, 180, 220, 240, 260] // in 100 million KRW (approx)
};
// --- CHART INSTANCES ---
let financialChartInstance = null;
let personnelChartInstance = null;
// --- NAVIGATION LOGIC ---
function switchTab(tabId) {
// Update Tab Styles
const navItems = document.querySelectorAll('.nav-item');
navItems.forEach(item => {
item.classList.remove('nav-active', 'text-teal-700', 'border-bottom');
item.classList.add('text-slate-500');
});
// Handle Mobile/Desktop Nav IDs
const activeNav = document.getElementById(`nav-${tabId}`);
if (activeNav) {
activeNav.classList.add('nav-active', 'text-teal-700');
activeNav.classList.remove('text-slate-500');
}
// Hide all sections
['dashboard', 'history', 'financials', 'personnel'].forEach(id => {
document.getElementById(`view-${id}`).classList.add('hidden');
});
// Show selected section
const selectedSection = document.getElementById(`view-${tabId}`);
selectedSection.classList.remove('hidden');
// Trigger specific section logic
if (tabId === 'financials') {
renderFinancialChart('revenue');
} else if (tabId === 'personnel') {
renderPersonnelChart();
}
}
// --- HISTORY SECTION LOGIC ---
function renderHistory(filter) {
const container = document.getElementById('history-list');
container.innerHTML = ''; // Clear
historyData.forEach(item => {
if (filter === 'all' || item.era === filter) {
const el = document.createElement('div');
el.className = 'mb-8 ml-4 fade-in';
el.innerHTML = `
<div class="absolute w-3 h-3 bg-teal-600 rounded-full mt-1.5 -left-1.5 border border-white"></div>
<time class="mb-1 text-sm font-normal leading-none text-teal-600 font-bold">${item.year}</time>
<h3 class="text-lg font-semibold text-slate-900 mt-1">${item.title}</h3>
<p class="mb-4 text-base font-normal text-slate-500">${item.desc}</p>
`;
container.appendChild(el);
}
});
// Update button styles
const buttons = document.querySelectorAll('.history-filter-btn');
buttons.forEach(btn => {
// Simple logic to highlight active filter (checking onclick attribute text for demo)
if(btn.getAttribute('onclick').includes(`'${filter}'`)) {
btn.classList.remove('bg-white', 'text-slate-600');
btn.classList.add('bg-teal-600', 'text-white');
} else {
btn.classList.add('bg-white', 'text-slate-600');
btn.classList.remove('bg-teal-600', 'text-white');
}
});
}
function filterHistory(era) {
renderHistory(era);
}
// --- FINANCIALS CHART LOGIC ---
function updateFinancialChart(type) {
// Button Styles
const btnRev = document.getElementById('btn-rev');
const btnProf = document.getElementById('btn-prof');
if(type === 'revenue') {
btnRev.className = "px-4 py-1.5 rounded-md text-sm font-medium bg-teal-100 text-teal-800 transition";
btnProf.className = "px-4 py-1.5 rounded-md text-sm font-medium text-slate-500 hover:bg-slate-50 transition";
} else {
btnRev.className = "px-4 py-1.5 rounded-md text-sm font-medium text-slate-500 hover:bg-slate-50 transition";
btnProf.className = "px-4 py-1.5 rounded-md text-sm font-medium bg-teal-100 text-teal-800 transition";
}
renderFinancialChart(type);
}
function renderFinancialChart(type) {
const ctx = document.getElementById('financialChart').getContext('2d');
// Destroy existing chart if it exists
if (financialChartInstance) {
financialChartInstance.destroy();
}
const isRevenue = type === 'revenue';
const label = isRevenue ? '매출액 (억 원)' : '영업이익 (억 원)';
const data = isRevenue ? financialData.revenue : financialData.profit;
const color = isRevenue ? '#0d9488' : '#3b82f6'; // Teal vs Blue
const bgColor = isRevenue ? 'rgba(13, 148, 136, 0.2)' : 'rgba(59, 130, 246, 0.2)';
financialChartInstance = new Chart(ctx, {
type: 'bar',
data: {
labels: financialData.years,
datasets: [{
label: label,
data: data,
backgroundColor: bgColor,
borderColor: color,
borderWidth: 2,
borderRadius: 4,
maxBarThickness: 50
},
{
// Add a line overlay for visual trend
type: 'line',
label: '추세선',
data: data,
borderColor: '#f59e0b', // Amber
borderWidth: 2,
pointBackgroundColor: '#fff',
pointBorderColor: '#f59e0b',
pointRadius: 4,
tension: 0.3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
tooltip: {
mode: 'index',
intersect: false,
backgroundColor: 'rgba(255, 255, 255, 0.9)',
titleColor: '#1e293b',
bodyColor: '#475569',
borderColor: '#e2e8f0',
borderWidth: 1
}
},
scales: {
y: {
beginAtZero: false,
grid: { borderDash: [2, 4], color: '#f1f5f9' },
ticks: { font: { family: "'Noto Sans KR', sans-serif" } }
},
x: {
grid: { display: false },
ticks: { font: { family: "'Noto Sans KR', sans-serif" } }
}
}
}
});
}
// --- PERSONNEL CHART LOGIC ---
function renderPersonnelChart() {
const ctx = document.getElementById('personnelChart').getContext('2d');
if (personnelChartInstance) {
// If exists, don't re-render to avoid animation jerkiness, just return
return;
}
personnelChartInstance = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['전문 평가/분석직', 'IT/데이터 기술직', '경영지원/기타'],
datasets: [{
data: [60, 25, 15], // Approximate ratio logic
backgroundColor: [
'#0d9488', // Teal
'#3b82f6', // Blue
'#94a3b8' // Gray
],
borderWidth: 0,
hoverOffset: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } },
tooltip: {
callbacks: {
label: function(context) {
return ` ${context.label}: ${context.raw}%`;
}
}
}
},
cutout: '65%'
}
});
}
// --- INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
// Load initial history
renderHistory('all');
// Note: Dashboard is default static HTML, no init needed beyond listeners
// Init animation simple observers (optional visual enhancement)
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
entry.target.style.transform = 'translateY(0)';
}
});
});
});
</script>
</body>
</html>