From 766f9fa1bf3ebcff2abd2eaa83a2f9cd93b2a1ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Fri, 20 Mar 2026 08:52:12 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[rd]=20=EC=BF=A0=EC=BD=98(COOCON)=20?=
 =?UTF-8?q?=EA=B8=B0=EC=97=85=EB=B6=84=EC=84=9D=20=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/rd/coocon-credit/index.blade.php    | 443 ++++++++++++++++++
 1 file changed, 443 insertions(+)
 create mode 100644 resources/views/rd/coocon-credit/index.blade.php

diff --git a/resources/views/rd/coocon-credit/index.blade.php b/resources/views/rd/coocon-credit/index.blade.php
new file mode 100644
index 00000000..276596c7
--- /dev/null
+++ b/resources/views/rd/coocon-credit/index.blade.php
@@ -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