coocon 내용 추가

DB_SYNC_GUIDE.md

@@ -0,0 +1,207 @@
+# 데이터베이스 동기화 가이드
+
+## 개요
+
+이 가이드는 서버와 로컬 개발 환경 간 데이터베이스를 동기화하는 방법을 설명합니다.
+
+- 서버 내 계정 pro에서 가져오는 방법 : scp pro@114.203.209.83:/home/pro/chandj_backup.sql .\chandj_backup.sql 
+- 서버에 백업을 받은 상태로 추정한 후 처리한다.
+
+- **로컬 → 서버**: `mysql_sync.sh` 사용 (테이블 단위 동기화)
+- **서버 → 로컬**: 이 문서의 방법 사용 (전체 DB 다운로드)
+
+---
+
+## 서버에서 로컬로 DB 다운로드
+
+### 방법 1: 서버에서 덤프 생성 후 SFTP로 다운로드 (권장)
+
+#### 1단계: 서버에서 덤프 파일 생성
+
+서버에 SSH 접속 후:
+
+```bash
+# 서버의 .env 파일 확인
+cat /var/www/sales/.env
+# 또는
+cat /home/webservice/sales/.env
+
+# .env에서 확인한 DB 사용자로 덤프 생성
+# 예시 1: root 사용자 (비밀번호 입력 필요)
+mysqldump -u root -p chandj > /tmp/chandj_backup.sql
+
+# 예시 2: codebridge 사용자
+mysqldump -u codebridge -p chandj > /tmp/chandj_backup.sql
+
+# 예시 3: 127.0.0.1 사용 (소켓 문제 해결)
+mysqldump -h 127.0.0.1 -u root -p chandj > /tmp/chandj_backup.sql
+
+# 예시 4: 비밀번호를 환경 변수로 사용 (.env에 비밀번호가 있을 경우)
+MYSQL_PWD='[비밀번호]' mysqldump -u root chandj > /tmp/chandj_backup.sql
+```
+
+#### 2단계: VSCode SFTP로 다운로드
+
+1. VSCode에서 `Ctrl+Shift+P` → `SFTP: Download` 실행
+2. 경로 입력: `/tmp/chandj_backup.sql`
+3. 다운로드 위치 선택
+
+또는 PowerShell에서:
+
+```powershell
+scp pro@114.203.209.83:/tmp/chandj_backup.sql .\chandj_backup.sql
+```
+
+#### 3단계: 로컬 Docker DB에 적용
+
+```bash
+# Docker 컨테이너에 SQL 파일 복사
+docker cp chandj_backup.sql sam-mysql-1:/tmp/
+
+# Docker 컨테이너에서 SQL 파일 실행
+docker exec -i sam-mysql-1 mysql -uroot -proot chandj < /tmp/chandj_backup.sql
+
+# 또는 직접 파이프 사용
+cat chandj_backup.sql | docker exec -i sam-mysql-1 mysql -uroot -proot chandj
+```
+
+### 방법 2: PHP 스크립트 사용
+
+#### 1단계: `dump_db.php` 업로드
+
+VSCode SFTP로 `dump_db.php`를 서버에 업로드:
+- 업로드 위치: `/var/www/sales/` 또는 `/home/webservice/sales/`
+
+#### 2단계: 서버에서 스크립트 실행
+
+```bash
+cd /var/www/sales
+php dump_db.php
+```
+
+스크립트가 `.env` 파일을 읽어서 자동으로 덤프를 생성합니다.
+
+#### 3단계: 덤프 파일 다운로드 및 적용
+
+방법 1의 2-3단계와 동일합니다.
+
+### 방법 3: PowerShell 스크립트 사용 (Windows)
+
+#### 1단계: `download_db.ps1` 실행
+
+```powershell
+.\download_db.ps1
+```
+
+**주의**: 비밀번호 입력이 필요한 경우 수동으로 서버에서 실행해야 합니다.
+
+---
+
+## 로컬에서 서버로 DB 업로드
+
+### `mysql_sync.sh` 사용
+
+```bash
+# 단일 테이블 동기화
+./mysql_sync.sh table_name
+
+# 여러 테이블 동기화
+./mysql_sync.sh table1,table2,table3
+```
+
+**동작 방식**:
+1. 로컬 Docker에서 테이블 덤프 생성
+2. 서버로 SQL 파일 전송 (SCP)
+3. 서버 DB에 적용
+
+---
+
+## 문제 해결
+
+### 문제 1: "Access denied for user 'root'@'dev-codebridgex'"
+
+**원인**: MySQL root 사용자가 해당 호스트에서 접근 권한이 없거나, MySQL 설정 파일의 호스트 바인딩 문제
+
+**해결**:
+1. 서버의 `.env` 파일에서 실제 DB 사용자 확인
+2. 해당 사용자로 mysqldump 실행
+3. 또는 `127.0.0.1` 사용: `mysqldump -h 127.0.0.1 -u root -p chandj`
+4. **근본 해결**: `my.cnf` 파일에서 `bind-address = localhost` 설정 (문제 4 참조)
+
+### 문제 2: "No such file or directory" (PHP 연결 시)
+
+**원인**: MySQL 소켓 파일 경로 문제
+
+**해결**:
+- `mysqldump`는 PHP 연결과 무관하게 작동하므로 직접 실행
+- 또는 `-h 127.0.0.1` 옵션 사용
+
+### 문제 3: 비밀번호 입력 프롬프트
+
+**해결**:
+- `.env` 파일에서 `DB_PASS` 확인
+- 환경 변수 사용: `MYSQL_PWD='비밀번호' mysqldump -u root chandj`
+
+### 문제 4: "Access denied" 오류가 계속 발생하는 경우
+
+**원인**: MySQL 설정 파일(`my.cnf`)에서 호스트 바인딩 문제
+
+**해결**: 서버의 `my.cnf` 파일에서 `bind-address`를 `localhost`로 설정
+
+```bash
+# my.cnf 파일 위치 확인 (일반적으로 다음 중 하나)
+# /etc/mysql/my.cnf
+# /etc/my.cnf
+# ~/.my.cnf
+
+# my.cnf 파일 편집
+sudo nano /etc/mysql/my.cnf
+# 또는
+sudo nano /etc/my.cnf
+
+# 다음 설정 추가 또는 수정
+[mysqld]
+bind-address = 127.0.0.1
+# 또는
+bind-address = localhost
+
+# MySQL 서비스 재시작
+sudo systemctl restart mysql
+# 또는
+sudo service mysql restart
+```
+
+**참고**: `bind-address = 127.0.0.1` 또는 `bind-address = localhost`로 설정하면 로컬 호스트에서만 연결을 허용합니다. 이 설정 후 `mysqldump -u root -p chandj` 명령이 정상 작동합니다.
+
+---
+
+## 서버 정보
+
+- **서버 주소**: `114.203.209.83`
+- **SSH 사용자**: `pro`
+- **DB 이름**: `chandj`
+- **서버 DB 경로**: `/var/www/sales/.env` 또는 `/home/webservice/sales/.env`
+
+---
+
+## 빠른 참조
+
+### 서버에서 덤프 생성
+```bash
+mysqldump -h 127.0.0.1 -u root -p chandj > /tmp/chandj_backup.sql
+```
+
+### 로컬로 다운로드 (PowerShell)
+```powershell
+scp pro@114.203.209.83:/tmp/chandj_backup.sql .\chandj_backup.sql
+```
+
+### 로컬 Docker에 적용
+```bash
+cat chandj_backup.sql | docker exec -i sam-mysql-1 mysql -uroot -proot chandj
+```
+
+---
+
+**마지막 업데이트**: 2025-01-06
+

coocon/index.php

@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>쿠콘 (COOCON) 기업 분석 보고서</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.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; color: #1e293b; }
+        .chart-container { 
+            position: relative; 
+            width: 100%; 
+            max-width: 800px; 
+            margin: 0 auto; 
+            height: 300px; 
+            max-height: 400px; 
+        }
+        @media (min-width: 768px) {
+            .chart-container { height: 350px; }
+        }
+        .nav-item.active { border-bottom: 2px solid #2563eb; color: #2563eb; font-weight: 700; }
+        .timeline-line { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
+        .timeline-dot { position: absolute; left: 6px; width: 20px; height: 20px; border-radius: 50%; border: 4px solid #fff; z-index: 10; cursor: pointer; transition: all 0.3s; }
+        .timeline-dot:hover { transform: scale(1.2); }
+        .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+        .fade-in { animation: fadeIn 0.5s ease-in; }
+        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    </style>
+    <!-- Chosen Palette: Modern Fintech Blue (Trust & Data) - Slate backgrounds, Blue accents, Teal for growth indicators -->
+    <!-- Application Structure Plan: 
+         1. Hero Dashboard: High-level snapshot (Revenue, Profit, API Count) to grab attention.
+         2. Financial Growth (Main Engine): Interactive combo chart showing Revenue & Operating Profit trends.
+         3. The API Core (Deep Dive): Dedicated section for the user's specific request on "API Business Growth".
+            Uses a donut chart for revenue mix and a stepped text interaction to explain the evolution (Scraping -> API -> MyData).
+         4. Human Capital: Employee growth analysis to show R&D investment.
+         5. Corporate Timeline: Vertical interactive list to explore key milestones.
+         Rationale: This structure moves from the "What" (Numbers) to the "How" (API Strategy) and "Who" (Employees), ending with "When" (History).
+    -->
+    <!-- Visualization & Content Choices:
+         - Financials: Bar (Revenue) + Line (Profit) Combo Chart. Best for correlating scale with efficiency.
+         - API Mix: Doughnut Chart. Shows the dominance/growth of the Data Service sector.
+         - Employee: Bar Chart. Simple trend visualization.
+         - Timeline: CSS/HTML Interactive List. No SVG required.
+         - Logic: Vanilla JS for tab switching and chart rendering/updates.
+    -->
+    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
+</head>
+<body class="bg-slate-50">
+
+    <!-- Navigation -->
+    <nav class="sticky top-0 z-50 bg-white border-b border-slate-200 shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-2xl font-bold text-blue-700 tracking-tighter">COOCON<span class="text-slate-500 text-sm ml-2 font-normal">기업 분석 리포트</span></span>
+                </div>
+                <div class="hidden sm:flex space-x-8 items-center">
+                    <a href="../index.php" class="nav-item px-3 py-2 text-sm font-medium text-slate-500 transition-colors hover:text-blue-600 flex items-center">
+                        <span class="mr-1">🏠</span> 홈으로
+                    </a>
+                    <button onclick="scrollToSection('overview')" class="nav-item active text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">개요 & 실적</button>
+                    <button onclick="scrollToSection('api-growth')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">API 사업 성장</button>
+                    <button onclick="scrollToSection('employees')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">인적 자원</button>
+                    <button onclick="scrollToSection('history')" class="nav-item text-slate-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">연혁</button>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
+
+        <!-- Section 1: Hero & Financial Overview -->
+        <section id="overview" class="scroll-mt-24 fade-in">
+            <div class="mb-6">
+                <h1 class="text-3xl font-bold text-slate-900">비즈니스 데이터 플랫폼, 쿠콘</h1>
+                <p class="mt-2 text-lg text-slate-600">
+                    쿠콘은 금융, 공공, 의료, 물류 등 다양한 데이터를 수집, 연결하여 표준화된 <strong>API 형태</strong>로 제공하는 국내 선두 데이터 기업입니다.
+                    아래 대시보드에서 최근 기업의 성장 추이를 확인할 수 있습니다.
+                </p>
+            </div>
+
+            <!-- Key Metrics Cards -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+                <div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-blue-500">
+                    <h3 class="text-sm font-medium text-slate-500">연간 매출액 (최근)</h3>
+                    <p class="text-3xl font-bold text-slate-800 mt-2" id="metric-revenue">Loading...</p>
+                    <p class="text-xs text-green-600 mt-1 font-medium">↑ 꾸준한 우상향 성장</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-teal-500">
+                    <h3 class="text-sm font-medium text-slate-500">영업이익률</h3>
+                    <p class="text-3xl font-bold text-slate-800 mt-2" id="metric-profit">Loading...</p>
+                    <p class="text-xs text-slate-400 mt-1">고부가가치 데이터 사업</p>
+                </div>
+                <div class="bg-white p-6 rounded-xl card-shadow border-l-4 border-indigo-500">
+                    <h3 class="text-sm font-medium text-slate-500">제공 API 수</h3>
+                    <p class="text-3xl font-bold text-slate-800 mt-2">250+</p>
+                    <p class="text-xs text-slate-400 mt-1">국내외 금융기관 연결</p>
+                </div>
+            </div>
+
+            <!-- Financial Chart Section -->
+            <div class="bg-white p-6 rounded-xl card-shadow">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-xl font-bold text-slate-800">📊 연도별 실적 추이 (성장성 분석)</h2>
+                    <div class="bg-slate-100 p-1 rounded-lg flex space-x-1">
+                        <button class="px-3 py-1 text-xs font-bold rounded shadow-sm bg-white text-blue-600" disabled>연간 (Annual)</button>
+                    </div>
+                </div>
+                <div class="chart-container">
+                    <canvas id="financialChart"></canvas>
+                </div>
+                <p class="mt-4 text-sm text-slate-500 text-center">
+                    *매출액과 영업이익 모두 안정적인 성장세를 보이며, 특히 데이터 부문의 마진율이 이익 성장을 견인하고 있습니다.
+                </p>
+            </div>
+        </section>
+
+        <!-- Section 2: API Business Deep Dive -->
+        <section id="api-growth" class="scroll-mt-24 fade-in">
+            <div class="border-b border-slate-200 pb-4 mb-6">
+                <h2 class="text-2xl font-bold text-slate-900 flex items-center">
+                    <span class="bg-blue-100 text-blue-700 p-2 rounded-lg mr-3 text-lg">🚀</span>
+                    API 사업 성장 과정 및 구조
+                </h2>
+                <p class="mt-2 text-slate-600">
+                    쿠콘 성장의 핵심은 <strong>데이터 서비스(API)</strong> 부문입니다. 단순 중계가 아닌 데이터를 표준화하여 제공하는 '데이터 허브' 전략이 주효했습니다.
+                </p>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <!-- Left: Revenue Mix Chart -->
+                <div class="bg-white p-6 rounded-xl card-shadow">
+                    <h3 class="text-lg font-bold text-slate-800 mb-4">사업 부문별 매출 비중</h3>
+                    <p class="text-sm text-slate-500 mb-4">페이먼트(결제) 사업에서 고마진의 데이터(API) 사업으로 중심축이 이동하고 있습니다.</p>
+                    <div class="chart-container" style="max-height: 300px;">
+                        <canvas id="revenueMixChart"></canvas>
+                    </div>
+                    <div class="mt-4 grid grid-cols-2 gap-4 text-center">
+                        <div class="p-3 bg-blue-50 rounded-lg">
+                            <span class="block text-xs text-slate-500">데이터(API) 부문</span>
+                            <span class="block text-lg font-bold text-blue-700">고성장/고마진</span>
+                        </div>
+                        <div class="p-3 bg-slate-50 rounded-lg">
+                            <span class="block text-xs text-slate-500">페이먼트 부문</span>
+                            <span class="block text-lg font-bold text-slate-600">안정적 캐시카우</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right: Growth Process Timeline/Tabs -->
+                <div class="bg-white p-6 rounded-xl card-shadow flex flex-col">
+                    <h3 class="text-lg font-bold text-slate-800 mb-4">API 비즈니스 진화 3단계</h3>
+                    <div class="flex-1 space-y-4">
+                        <!-- Stage 1 -->
+                        <div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(1)">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs font-bold text-slate-400 bg-slate-100 px-2 py-1 rounded">초기 (2006~2015)</span>
+                                <span class="text-xl">🕸️</span>
+                            </div>
+                            <h4 class="font-bold text-slate-800">인프라 구축 및 스크래핑 기술</h4>
+                            <p class="text-sm text-slate-600 mt-1">
+                                국내 전 금융기관과 연결하는 물리적 네트워크를 구축하고, 화면 정보를 데이터로 변환하는 스크래핑 기술을 고도화하여 데이터 수집의 기반을 마련했습니다.
+                            </p>
+                        </div>
+
+                        <!-- Stage 2 -->
+                        <div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(2)">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs font-bold text-blue-600 bg-blue-100 px-2 py-1 rounded">성장기 (2016~2020)</span>
+                                <span class="text-xl">🔌</span>
+                            </div>
+                            <h4 class="font-bold text-slate-800">API 스토어 & 연결 플랫폼화</h4>
+                            <p class="text-sm text-slate-600 mt-1">
+                                '쿠콘닷넷'을 통해 데이터를 API 상품처럼 판매하기 시작했습니다. 핀테크 붐과 함께 간편결제, 자산관리 앱들이 쿠콘의 API를 필수재로 채택하며 폭발적 성장을 이뤘습니다.
+                            </p>
+                        </div>
+
+                        <!-- Stage 3 -->
+                        <div class="group cursor-pointer p-4 rounded-lg border border-slate-200 hover:border-blue-300 hover:bg-blue-50 transition-all" onclick="highlightStage(3)">
+                            <div class="flex items-center justify-between mb-2">
+                                <span class="text-xs font-bold text-indigo-600 bg-indigo-100 px-2 py-1 rounded">도약기 (2021~현재)</span>
+                                <span class="text-xl">💎</span>
+                            </div>
+                            <h4 class="font-bold text-slate-800">마이데이터 & 데이터 허브</h4>
+                            <p class="text-sm text-slate-600 mt-1">
+                                마이데이터 사업자로서의 지위 확보와 빅데이터 융합. 단순 금융 정보를 넘어 의료, 공공, 유통 물류 데이터로 범위를 확장하며 '데이터 허브'로서의 독점적 지위를 공고히 했습니다.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Section 3: Employees & HR -->
+        <section id="employees" class="scroll-mt-24 fade-in">
+            <div class="bg-white p-8 rounded-xl card-shadow">
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
+                    <div class="md:col-span-1">
+                        <h2 class="text-2xl font-bold text-slate-900 mb-4">인적 자원 현황</h2>
+                        <p class="text-slate-600 mb-6">
+                            쿠콘은 기술 중심 회사입니다. 전체 임직원의 상당수가 <strong>개발 및 전문 기술 인력</strong>으로 구성되어 있으며, 지속적인 채용을 통해 R&D 역량을 강화하고 있습니다.
+                        </p>
+                        <div class="space-y-4">
+                            <div class="flex items-center justify-between p-3 bg-slate-50 rounded">
+                                <span class="text-sm font-medium text-slate-600">전체 임직원 수</span>
+                                <span class="text-lg font-bold text-blue-700" id="total-employees">Loading...</span>
+                            </div>
+                            <div class="flex items-center justify-between p-3 bg-slate-50 rounded">
+                                <span class="text-sm font-medium text-slate-600">평균 근속연수</span>
+                                <span class="text-lg font-bold text-slate-700">약 5~6년</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="md:col-span-2">
+                        <div class="chart-container">
+                            <canvas id="employeeChart"></canvas>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Section 4: History & Milestones -->
+        <section id="history" class="scroll-mt-24 mb-12 fade-in">
+            <h2 class="text-2xl font-bold text-slate-900 mb-6 border-l-4 border-blue-600 pl-3">주요 연혁 (Milestones)</h2>
+            
+            <div class="relative bg-white p-6 rounded-xl card-shadow">
+                <div class="timeline-line ml-6"></div>
+                
+                <div class="space-y-8 pl-12">
+                    <!-- Item 2021 -->
+                    <div class="relative group">
+                        <div class="timeline-dot bg-blue-500 border-white shadow-sm ml-6 top-1"></div>
+                        <div class="bg-slate-50 hover:bg-blue-50 p-4 rounded-lg transition-colors border border-transparent hover:border-blue-200">
+                            <span class="text-blue-600 font-bold text-sm block mb-1">2021</span>
+                            <h4 class="text-lg font-bold text-slate-800">코스닥(KOSDAQ) 상장</h4>
+                            <p class="text-sm text-slate-600">성공적인 기업공개(IPO)를 통해 대규모 자금을 확보하고, 마이데이터 사업 본격화를 알렸습니다.</p>
+                        </div>
+                    </div>
+
+                    <!-- Item 2019 -->
+                    <div class="relative group">
+                        <div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
+                        <div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
+                            <span class="text-slate-500 font-bold text-sm block mb-1">2019</span>
+                            <h4 class="text-lg font-bold text-slate-800">금융위원회 혁신금융서비스 지정</h4>
+                            <p class="text-sm text-slate-600">데이터 수집 및 연결 기술의 혁신성을 인정받아 핀테크 리딩 기업으로 도약.</p>
+                        </div>
+                    </div>
+
+                    <!-- Item 2016 -->
+                    <div class="relative group">
+                        <div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
+                        <div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
+                            <span class="text-slate-500 font-bold text-sm block mb-1">2016</span>
+                            <h4 class="text-lg font-bold text-slate-800">API 스토어 '쿠콘닷넷' 오픈</h4>
+                            <p class="text-sm text-slate-600">국내 최대 비즈니스 정보 API 스토어 런칭. B2B 데이터 유통 시장을 개척했습니다.</p>
+                        </div>
+                    </div>
+
+                    <!-- Item 2006 -->
+                    <div class="relative group">
+                        <div class="timeline-dot bg-slate-400 border-white shadow-sm ml-6 top-1"></div>
+                        <div class="bg-slate-50 hover:bg-slate-100 p-4 rounded-lg transition-colors">
+                            <span class="text-slate-500 font-bold text-sm block mb-1">2006</span>
+                            <h4 class="text-lg font-bold text-slate-800">회사 설립</h4>
+                            <p class="text-sm text-slate-600">데이터 정보 수집 기술을 기반으로 비즈니스 시작.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+    </main>
+
+    <footer class="bg-slate-800 text-slate-300 py-8">
+        <div class="max-w-7xl mx-auto px-4 text-center">
+            <p class="text-sm">© 2024 Coocon Corporate Analysis SPA. Based on Publicly Available Data.</p>
+            <p class="text-xs text-slate-500 mt-2">본 페이지는 기업 분석 목적의 시각화 자료이며, 실제 투자 지표로 활용되기 위해서는 최신 공시 자료를 확인하시기 바랍니다.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Data Store (Simulated based on historical trends of Coocon)
+        const cooconData = {
+            financials: {
+                years: ['2019', '2020', '2021', '2022', '2023'],
+                revenue: [412, 514, 613, 658, 685], // Unit: 억 원 (Approximate)
+                profit: [62, 112, 168, 195, 188]     // Unit: 억 원 (Approximate)
+            },
+            revenueMix: {
+                labels: ['데이터 부문 (API)', '페이먼트 부문', '기타'],
+                data: [48, 45, 7], // 2020-21 era split roughly
+                colors: ['#2563eb', '#94a3b8', '#e2e8f0']
+            },
+            employees: {
+                years: ['2019', '2020', '2021', '2022', '2023'],
+                count: [180, 210, 260, 295, 310] // Approximate growth
+            }
+        };
+
+        // DOM Elements
+        const metricRev = document.getElementById('metric-revenue');
+        const metricProf = document.getElementById('metric-profit');
+        const totalEmp = document.getElementById('total-employees');
+
+        // Init State
+        let currentSection = 'overview';
+
+        // Helper: Format Currency
+        const formatCurrency = (num) => `₩${num}억`;
+
+        // Interaction: Scroll
+        function scrollToSection(id) {
+            const el = document.getElementById(id);
+            if (el) {
+                el.scrollIntoView({ behavior: 'smooth' });
+                updateNav(id);
+            }
+        }
+
+        // Interaction: Update Nav Active State
+        function updateNav(id) {
+            document.querySelectorAll('.nav-item').forEach(btn => {
+                btn.classList.remove('active', 'text-blue-600');
+                btn.classList.add('text-slate-600');
+                if (btn.getAttribute('onclick').includes(id)) {
+                    btn.classList.add('active', 'text-blue-600');
+                    btn.classList.remove('text-slate-600');
+                }
+            });
+        }
+
+        // Interaction: Highlight API Stage
+        window.highlightStage = function(stageNum) {
+            // Visual feedback could be added here, e.g., filtering the chart to show only that era's data
+            // For now, we utilize the hover CSS effects in Tailwind
+            console.log("Exploring Stage: " + stageNum);
+        }
+
+        // Chart 1: Financials (Bar + Line)
+        function renderFinancialChart() {
+            const ctx = document.getElementById('financialChart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: cooconData.financials.years,
+                    datasets: [
+                        {
+                            label: '영업이익 (억 원)',
+                            data: cooconData.financials.profit,
+                            type: 'line',
+                            borderColor: '#0d9488', // Teal
+                            backgroundColor: '#0d9488',
+                            borderWidth: 3,
+                            yAxisID: 'y1',
+                            tension: 0.3
+                        },
+                        {
+                            label: '매출액 (억 원)',
+                            data: cooconData.financials.revenue,
+                            backgroundColor: 'rgba(37, 99, 235, 0.7)', // Blue
+                            yAxisID: 'y',
+                            borderRadius: 4
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: { mode: 'index', intersect: false },
+                    plugins: {
+                        legend: { position: 'top' },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return context.dataset.label + ': ' + context.raw + '억';
+                                }
+                            }
+                        }
+                    },
+                    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: { drawOnChartArea: true, color: '#f1f5f9' }
+                        }
+                    }
+                }
+            });
+
+            // Update Metrics Counters
+            const lastIdx = cooconData.financials.revenue.length - 1;
+            metricRev.innerText = formatCurrency(cooconData.financials.revenue[lastIdx]);
+            
+            // Calc Margin
+            const margin = ((cooconData.financials.profit[lastIdx] / cooconData.financials.revenue[lastIdx]) * 100).toFixed(1);
+            metricProf.innerText = margin + '%';
+        }
+
+        // Chart 2: Revenue Mix (Doughnut)
+        function renderMixChart() {
+            const ctx = document.getElementById('revenueMixChart').getContext('2d');
+            new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: cooconData.revenueMix.labels,
+                    datasets: [{
+                        data: cooconData.revenueMix.data,
+                        backgroundColor: cooconData.revenueMix.colors,
+                        hoverOffset: 10,
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { position: 'right', labels: { boxWidth: 15, padding: 20 } },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return ' ' + context.label + ': ' + context.raw + '%';
+                                }
+                            }
+                        }
+                    },
+                    cutout: '65%'
+                }
+            });
+        }
+
+        // Chart 3: Employees (Bar)
+        function renderEmpChart() {
+            const ctx = document.getElementById('employeeChart').getContext('2d');
+            new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: cooconData.employees.years,
+                    datasets: [{
+                        label: '임직원 수 (명)',
+                        data: cooconData.employees.count,
+                        backgroundColor: 'rgba(71, 85, 105, 0.6)', // Slate
+                        hoverBackgroundColor: '#2563eb',
+                        borderRadius: 4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: { beginAtZero: false, min: 100 }
+                    },
+                    plugins: {
+                        legend: { display: false }
+                    }
+                }
+            });
+            totalEmp.innerText = cooconData.employees.count[cooconData.employees.count.length - 1] + '명';
+        }
+
+        // Initialization
+        window.addEventListener('DOMContentLoaded', () => {
+            renderFinancialChart();
+            renderMixChart();
+            renderEmpChart();
+
+            // Scroll Spy
+            window.addEventListener('scroll', () => {
+                const sections = ['overview', 'api-growth', 'employees', 'history'];
+                let current = '';
+                sections.forEach(id => {
+                    const el = document.getElementById(id);
+                    const rect = el.getBoundingClientRect();
+                    if (rect.top <= 150) {
+                        current = id;
+                    }
+                });
+                if (current) updateNav(current);
+            });
+        });
+
+    </script>
+</body>
+</html>

index.php

@@ -195,7 +195,10 @@
                         </button>
                         <div class="absolute right-0 top-full mt-1 w-48 bg-white rounded-xl shadow-xl border border-slate-100 py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform origin-top-right z-50">
                              <a href="corp/kodata.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
-                                 기업분석
+                                 기업분석 (kodata)
+                             </a>
+                             <a href="coocon/index.php" class="block px-4 py-2 text-sm text-slate-700 hover:bg-brand-50 hover:text-brand-600 font-medium">
+                                 기업신용조회 쿠콘닷컴 (coocon) 
                              </a>
                         </div>
                     </div>