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

feat: [rd] 쿠콘(COOCON) 기업분석 대시보드 페이지 추가

Browse Source
This commit is contained in:
김보곤
2026-03-20 08:52:12 +09:00
parent 72741a77ff
commit 766f9fa1bf
1 changed files with 443 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
resources/views/rd/coocon-credit/index.blade.php Normal file
View File

@@ -0,0 +1,443 @@
@extends('layouts.app')
@section('title', '기업신용 쿠콘 - 기업분석')
@section('content')
<!-- 뒤로가기 + 신용보고서 링크 -->
<div class="flex items-center justify-between mb-4">
<a href="{{ route('rd.company-analysis.index') }}" class="inline-flex items-center text-sm text-gray-500 hover:text-blue-600 transition-colors">
<i class="ri-arrow-left-line mr-1"></i> 기업 분석 라이브러리로 돌아가기
</a>
<a href="{{ route('rd.coocon-credit.report') }}" class="inline-flex items-center gap-1.5 text-sm font-medium text-blue-600 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded-lg transition-colors">
<i class="ri-file-chart-line"></i> 기업 신용보고서 보기
</a>
</div>
<!-- 페이지 헤더 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-teal-100 rounded-lg flex items-center justify-center text-teal-600 shrink-0">
<i class="ri-database-2-line text-3xl"></i>
</div>
<div>
<h1 class="text-2xl font-bold text-gray-900">비즈니스 데이터 플랫폼, 쿠콘 (COOCON)</h1>
<p class="text-gray-500 text-sm mt-1">코스닥 상장 | 데이터 API 전문 기업</p>
<p class="text-gray-600 text-sm mt-2 leading-relaxed">
쿠콘은 금융·공공·기업 데이터를 API로 연결하는 데이터 플랫폼 기업입니다.
은행, 카드사, 보험사 등 200여 개 이상의 금융기관과 연결하여 스크래핑 및 API 기반 데이터 서비스를 제공합니다.
마이데이터 사업의 핵심 인프라를 담당하며, 금융 데이터 시장에서 독보적 입지를 확보하고 있습니다.
</p>
</div>
</div>
</div>
<!-- ==================== SECTION 1: 재무 현황 ==================== -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
<i class="ri-funds-line text-blue-500"></i> 재무 현황 및 핵심 지표
</h2>
<!-- 핵심 지표 카드 3개 -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
<!-- 연간 매출액 -->
<div class="bg-white rounded-lg shadow-sm border-l-4 border-blue-500 p-5">
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
<i class="ri-money-dollar-circle-line text-xl"></i>
</div>
<span class="text-sm text-gray-500">연간 매출액 (2023)</span>
</div>
<p class="text-2xl font-bold text-gray-900" id="kpi-revenue">
<span class="inline-block w-20 h-6 bg-gray-200 rounded animate-pulse"></span>
</p>
</div>
<!-- 영업이익률 -->
<div class="bg-white rounded-lg shadow-sm border-l-4 border-teal-500 p-5">
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center text-teal-600">
<i class="ri-percent-line text-xl"></i>
</div>
<span class="text-sm text-gray-500">영업이익률 (2023)</span>
</div>
<p class="text-2xl font-bold text-gray-900" id="kpi-profit-rate">
<span class="inline-block w-20 h-6 bg-gray-200 rounded animate-pulse"></span>
</p>
</div>
<!-- 제공 API 수 -->
<div class="bg-white rounded-lg shadow-sm border-l-4 border-indigo-500 p-5">
<div class="flex items-center gap-3 mb-2">
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center text-indigo-600">
<i class="ri-plug-line text-xl"></i>
</div>
<span class="text-sm text-gray-500">제공 API 수</span>
</div>
<p class="text-2xl font-bold text-gray-900">250+</p>
<p class="text-xs text-gray-400 mt-1">금융·공공·기업 데이터</p>
</div>
</div>
<!-- 매출 & 영업이익 차트 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-bar-chart-2-line text-blue-500"></i> 매출액 & 영업이익 추이 (2019~2023)
</h3>
<div style="max-width: 700px; margin: 0 auto;">
<canvas id="financialChart"></canvas>
</div>
</div>
</div>
<!-- ==================== SECTION 2: API 사업 성장 ==================== -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
<i class="ri-line-chart-line text-teal-500"></i> API 사업 성장 분석
</h2>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<!-- 매출 구성 도넛 차트 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-pie-chart-line text-teal-500"></i> 매출 구성 비율
</h3>
<div style="max-width: 320px; margin: 0 auto;">
<canvas id="mixChart"></canvas>
</div>
</div>
<!-- API 사업 진화 단계 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-rocket-line text-teal-500"></i> API 사업 진화 단계
</h3>
<div class="space-y-4">
<!-- 초기 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-blue-300 transition-colors">
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded-full text-sm font-bold">1</span>
<div>
<p class="font-semibold text-gray-800">초기 (2006~2015)</p>
<p class="text-xs text-gray-400">인프라 구축기</p>
</div>
</div>
<p class="text-sm text-gray-600 ml-11">인프라 구축 및 스크래핑 기술 개발. 금융기관 데이터 연동 기반 확보.</p>
</div>
<!-- 성장기 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-teal-300 transition-colors">
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center justify-center w-8 h-8 bg-teal-100 text-teal-700 rounded-full text-sm font-bold">2</span>
<div>
<p class="font-semibold text-gray-800">성장기 (2016~2020)</p>
<p class="text-xs text-gray-400">플랫폼 전환기</p>
</div>
</div>
<p class="text-sm text-gray-600 ml-11">API 스토어 '쿠콘닷넷' 오픈. 연결 플랫폼화 및 고객 확대.</p>
</div>
<!-- 도약기 -->
<div class="border border-gray-200 rounded-lg p-4 hover:border-indigo-300 transition-colors">
<div class="flex items-center gap-3 mb-2">
<span class="inline-flex items-center justify-center w-8 h-8 bg-indigo-100 text-indigo-700 rounded-full text-sm font-bold">3</span>
<div>
<p class="font-semibold text-gray-800">도약기 (2021~현재)</p>
<p class="text-xs text-gray-400">데이터 허브</p>
</div>
</div>
<p class="text-sm text-gray-600 ml-11">마이데이터 사업 본격화 및 데이터 허브 역할 수행. 코스닥 상장.</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== SECTION 3: 임직원 현황 ==================== -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
<i class="ri-team-line text-purple-500"></i> 임직원 현황
</h2>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 임직원 차트 -->
<div class="lg:col-span-2 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-bar-chart-grouped-line text-purple-500"></i> 임직원 수 변화 (2019~2023)
</h3>
<div style="max-width: 600px; margin: 0 auto;">
<canvas id="empChart"></canvas>
</div>
</div>
<!-- 임직원 통계 -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
<i class="ri-user-star-line text-purple-500"></i> 인력 통계
</h3>
<div class="space-y-4">
<div class="border-b border-gray-100 pb-3">
<p class="text-sm text-gray-500 mb-1">전체 임직원 수 (2023)</p>
<p class="text-xl font-bold text-gray-900">310명</p>
</div>
<div class="border-b border-gray-100 pb-3">
<p class="text-sm text-gray-500 mb-1">5년간 증가율</p>
<p class="text-xl font-bold text-green-600">+72%</p>
<p class="text-xs text-gray-400">180명 → 310명</p>
</div>
<div>
<p class="text-sm text-gray-500 mb-1">평균 근속연수</p>
<p class="text-xl font-bold text-gray-900">약 5~6년</p>
<p class="text-xs text-gray-400">IT 업계 평균 대비 양호</p>
</div>
</div>
</div>
</div>
</div>
<!-- ==================== SECTION 4: 연혁 타임라인 ==================== -->
<div class="mb-8">
<h2 class="text-lg font-semibold text-gray-800 flex items-center gap-2 mb-4">
<i class="ri-time-line text-orange-500"></i> 주요 연혁
</h2>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<div class="relative">
<!-- 세로선 -->
<div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
<div class="space-y-6">
<!-- 2021 -->
<div class="relative flex items-start gap-4 pl-10">
<div class="absolute left-2 w-5 h-5 bg-blue-500 rounded-full border-2 border-white shadow"></div>
<div>
<span class="inline-block text-xs font-bold text-blue-600 bg-blue-50 px-2 py-0.5 rounded mb-1">2021</span>
<p class="text-sm font-semibold text-gray-800">코스닥 상장</p>
<p class="text-xs text-gray-500">데이터 플랫폼 기업으로서 자본시장 진입</p>
</div>
</div>
<!-- 2019 -->
<div class="relative flex items-start gap-4 pl-10">
<div class="absolute left-2 w-5 h-5 bg-teal-500 rounded-full border-2 border-white shadow"></div>
<div>
<span class="inline-block text-xs font-bold text-teal-600 bg-teal-50 px-2 py-0.5 rounded mb-1">2019</span>
<p class="text-sm font-semibold text-gray-800">금융위원회 혁신금융서비스 지정</p>
<p class="text-xs text-gray-500">마이데이터 사업 기반 확보 및 규제 샌드박스 통과</p>
</div>
</div>
<!-- 2016 -->
<div class="relative flex items-start gap-4 pl-10">
<div class="absolute left-2 w-5 h-5 bg-indigo-500 rounded-full border-2 border-white shadow"></div>
<div>
<span class="inline-block text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded mb-1">2016</span>
<p class="text-sm font-semibold text-gray-800">API 스토어 '쿠콘닷넷' 오픈</p>
<p class="text-xs text-gray-500">데이터 API 마켓플레이스 런칭, 플랫폼 사업 전환</p>
</div>
</div>
<!-- 2006 -->
<div class="relative flex items-start gap-4 pl-10">
<div class="absolute left-2 w-5 h-5 bg-gray-400 rounded-full border-2 border-white shadow"></div>
<div>
<span class="inline-block text-xs font-bold text-gray-600 bg-gray-100 px-2 py-0.5 rounded mb-1">2006</span>
<p class="text-sm font-semibold text-gray-800">회사 설립</p>
<p class="text-xs text-gray-500">금융 데이터 스크래핑 기술 기반으로 사업 시작</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 하단 안내 -->
<div class="text-center text-xs text-gray-400 py-4">
&copy; 2024 Coocon Corporate Analysis. 본 자료는 공개된 재무 데이터를 기반으로 작성되었으며, 투자 지표로 활용 시 추가 검증이 필요합니다.
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
@verbatim
<script>
document.addEventListener('DOMContentLoaded', function() {
// ========== 데이터 ==========
const cooconData = {
financials: {
years: ['2019', '2020', '2021', '2022', '2023'],
revenue: [412, 514, 613, 658, 685],
profit: [62, 112, 168, 195, 188]
},
revenueMix: {
labels: ['데이터(API)', '페이먼트', '기타'],
values: [48, 45, 7],
colors: ['#3B82F6', '#14B8A6', '#A78BFA']
},
employees: {
years: ['2019', '2020', '2021', '2022', '2023'],
count: [180, 210, 260, 295, 310]
}
};
// ========== 헬퍼 ==========
function formatCurrency(value) {
return `${value}억원`;
}
// ========== KPI 업데이트 ==========
const lastRevenue = cooconData.financials.revenue[cooconData.financials.revenue.length - 1];
const lastProfit = cooconData.financials.profit[cooconData.financials.profit.length - 1];
const profitRate = ((lastProfit / lastRevenue) * 100).toFixed(1);
document.getElementById('kpi-revenue').textContent = formatCurrency(lastRevenue);
document.getElementById('kpi-profit-rate').textContent = `${profitRate}%`;
// ========== 매출 & 영업이익 차트 ==========
function renderFinancialChart() {
const ctx = document.getElementById('financialChart');
if (!ctx) return;
new Chart(ctx, {
type: 'bar',
data: {
labels: cooconData.financials.years,
datasets: [
{
label: '매출액 (억원)',
data: cooconData.financials.revenue,
backgroundColor: 'rgba(59, 130, 246, 0.7)',
borderColor: '#3B82F6',
borderWidth: 1,
borderRadius: 4,
order: 2
},
{
label: '영업이익 (억원)',
data: cooconData.financials.profit,
type: 'line',
borderColor: '#14B8A6',
backgroundColor: 'rgba(20, 184, 166, 0.1)',
borderWidth: 2,
pointBackgroundColor: '#14B8A6',
pointRadius: 4,
fill: true,
tension: 0.3,
order: 1
}
]
},
options: {
responsive: true,
interaction: { intersect: false, mode: 'index' },
plugins: {
legend: { position: 'top' },
tooltip: {
callbacks: {
label: function(context) {
return `${context.dataset.label}: ${context.parsed.y}억원`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return `${value}억`;
}
}
}
}
}
});
}
// ========== 매출 구성 도넛 차트 ==========
function renderMixChart() {
const ctx = document.getElementById('mixChart');
if (!ctx) return;
new Chart(ctx, {
type: 'doughnut',
data: {
labels: cooconData.revenueMix.labels,
datasets: [{
data: cooconData.revenueMix.values,
backgroundColor: cooconData.revenueMix.colors,
borderWidth: 2,
borderColor: '#fff'
}]
},
options: {
responsive: true,
cutout: '55%',
plugins: {
legend: {
position: 'bottom',
labels: { padding: 16 }
},
tooltip: {
callbacks: {
label: function(context) {
return `${context.label}: ${context.parsed}%`;
}
}
}
}
}
});
}
// ========== 임직원 차트 ==========
function renderEmpChart() {
const ctx = document.getElementById('empChart');
if (!ctx) return;
new Chart(ctx, {
type: 'bar',
data: {
labels: cooconData.employees.years,
datasets: [{
label: '임직원 수 (명)',
data: cooconData.employees.count,
backgroundColor: 'rgba(168, 85, 247, 0.7)',
borderColor: '#A855F7',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false },
tooltip: {
callbacks: {
label: function(context) {
return `${context.parsed.y}명`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
return `${value}명`;
}
}
}
}
}
});
}
// ========== 차트 렌더링 ==========
renderFinancialChart();
renderMixChart();
renderEmpChart();
});
</script>
@endverbatim
@endpush