2025-12-17 15:41:30 +09:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="ko">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>KODATA 기업 분석 보고서</title>
|
2026-01-31 19:11:10 +09:00
|
|
|
<!-- Favicon -->
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
|
|
|
|
<link rel="shortcut icon" href="../img/favicon.png">
|
2025-12-17 15:41:30 +09:00
|
|
|
<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">
|
2026-01-31 19:11:10 +09:00
|
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
|
|
|
<img src="../img/favicon-32x32.png" alt="SAM" class="w-10 h-10 rounded-xl">
|
|
|
|
|
<div class="flex flex-col">
|
|
|
|
|
<span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
|
|
|
|
|
<span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
2025-12-17 15:41:30 +09:00
|
|
|
<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>
|
