hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
544 lines
29 KiB
PHP
544 lines
29 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TestSprite: 기업 상세 분석 보고서</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
@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: #f8fafc; /* Slate 50 */
|
|
color: #334155; /* Slate 700 */
|
|
}
|
|
|
|
/* Chart Container Styling - Mandatory per requirements */
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 320px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
/* Custom Scrollbar for text areas */
|
|
.custom-scroll::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-thumb:hover {
|
|
background: #94a3b8;
|
|
}
|
|
|
|
.active-tab {
|
|
border-bottom: 2px solid #3b82f6;
|
|
color: #1d4ed8;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
<!-- Chosen Palette: Corporate Clean (Slate & Blue) -->
|
|
<!-- Application Structure Plan: The app uses a dashboard layout divided into logical sections: Overview, History, HR Analysis, and Tech. This structure allows users to process quantitative data (charts) alongside qualitative data (mission/tech) without scrolling explicitly linearly. The interaction model relies on 'click-to-reveal' for the timeline and 'hover-for-detail' for tech features to reduce cognitive load. -->
|
|
<!-- Visualization & Content Choices:
|
|
1. Overview: Static metrics for instant context.
|
|
2. History: Interactive HTML Timeline (Goal: Change/Inform) to show rapid evolution.
|
|
3. HR Analysis: Chart.js Line Chart for growth trends & Doughnut Chart for resource allocation (Goal: Compare).
|
|
4. Tech: Interactive cards (Goal: Inform) to simplify complex AI concepts.
|
|
CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
</head>
|
|
<body class="antialiased selection:bg-blue-100 selection:text-blue-900">
|
|
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-stone-200 sticky top-0 z-50">
|
|
<div class="container mx-auto">
|
|
<div class="mb-6 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-slate-200 sticky top-0 z-50">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<div class="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center mr-3 text-white font-bold text-xl">T</div>
|
|
<span class="font-bold text-xl text-slate-900">TestSprite Analysis</span>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<button onclick="scrollToSection('overview')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">기업 개요</button>
|
|
<button onclick="scrollToSection('growth')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">성장 과정</button>
|
|
<button onclick="scrollToSection('workforce')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">인력/조직 분석</button>
|
|
<button onclick="scrollToSection('tech')" class="text-slate-500 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">핵심 기술</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-12">
|
|
|
|
<!-- Introduction Context -->
|
|
<section>
|
|
<div class="bg-blue-50 border border-blue-100 rounded-xl p-6 mb-8">
|
|
<h2 class="text-lg font-bold text-blue-900 mb-2">보고서 개요</h2>
|
|
<p class="text-blue-800 text-sm leading-relaxed">
|
|
본 인터랙티브 보고서는 AI 기반 자율 소프트웨어 테스팅 솔루션 기업인 <strong>TestSprite</strong>에 대한 심층 분석 자료입니다.
|
|
기업의 기본 정보부터 Y Combinator 선정 이후의 급격한 성장 과정, 엔지니어 중심의 인력 구조, 그리고 핵심 기술력을 시각적으로 분석합니다.
|
|
아래의 데이터 대시보드와 타임라인을 통해 기업의 현재 위치와 미래 잠재력을 탐색할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 1: Overview & Key Metrics -->
|
|
<section id="overview" class="scroll-mt-20">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<!-- Metric Card 1 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
|
<p class="text-sm font-medium text-slate-500">설립 연도</p>
|
|
<p class="text-3xl font-bold text-slate-900 mt-2">2024</p>
|
|
<p class="text-xs text-green-600 mt-1 flex items-center">
|
|
<span>● Y Combinator (S24)</span>
|
|
</p>
|
|
</div>
|
|
<!-- Metric Card 2 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
|
<p class="text-sm font-medium text-slate-500">주요 분야</p>
|
|
<p class="text-xl font-bold text-slate-900 mt-2">AI Software Testing</p>
|
|
<p class="text-xs text-slate-400 mt-1">Autonomous QA Agent</p>
|
|
</div>
|
|
<!-- Metric Card 3 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
|
<p class="text-sm font-medium text-slate-500">본사 위치</p>
|
|
<p class="text-xl font-bold text-slate-900 mt-2">San Francisco</p>
|
|
<p class="text-xs text-slate-400 mt-1">California, USA</p>
|
|
</div>
|
|
<!-- Metric Card 4 -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:shadow-md transition-shadow">
|
|
<p class="text-sm font-medium text-slate-500">투자 단계</p>
|
|
<p class="text-2xl font-bold text-slate-900 mt-2">Seed / Series A</p>
|
|
<p class="text-xs text-slate-400 mt-1">High Growth Potential</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
|
|
<div class="p-6 border-b border-slate-100">
|
|
<h3 class="text-lg font-bold text-slate-800">기업 비전 및 미션 (Corporate Profile)</h3>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h4 class="font-semibold text-slate-700 mb-2">What is TestSprite?</h4>
|
|
<p class="text-slate-600 leading-relaxed mb-4">
|
|
TestSprite는 개발자가 코드를 작성하는 동안 AI가 자동으로 테스트 케이스를 생성하고, 버그를 찾아내며, 심지어 수정 제안까지 수행하는 <strong>자율 AI 테스팅 에이전트</strong>입니다. 기존의 수동 QA 프로세스를 혁신하여 소프트웨어 배포 속도를 획기적으로 단축시키는 것을 목표로 합니다.
|
|
</p>
|
|
<ul class="space-y-2">
|
|
<li class="flex items-start">
|
|
<span class="text-blue-500 mr-2">✓</span>
|
|
<span class="text-sm text-slate-600"><strong>효율성 극대화:</strong> 테스트 코드 작성 시간 90% 이상 절감</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-500 mr-2">✓</span>
|
|
<span class="text-sm text-slate-600"><strong>지속적 통합:</strong> GitHub 등 기존 CI/CD 파이프라인과 완벽 연동</span>
|
|
</li>
|
|
<li class="flex items-start">
|
|
<span class="text-blue-500 mr-2">✓</span>
|
|
<span class="text-sm text-slate-600"><strong>End-to-End 커버리지:</strong> 단위 테스트부터 통합 테스트까지 자동화</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-slate-50 rounded-lg p-5 border border-slate-100">
|
|
<h4 class="font-semibold text-slate-700 mb-3">핵심 가치 제안 (Value Proposition)</h4>
|
|
<div class="space-y-3" id="value-prop-container">
|
|
<!-- Populated by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Growth Trajectory (Timeline) -->
|
|
<section id="growth" class="scroll-mt-20">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-slate-800">성장 과정 분석 (Growth Trajectory)</h3>
|
|
<p class="text-slate-500 mt-2">설립 초기부터 현재까지의 주요 마일스톤을 통해 TestSprite의 빠른 실행력과 시장 진입 속도를 분석합니다.</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
<!-- Left: Interactive List -->
|
|
<div class="lg:col-span-1 space-y-2" id="timeline-list">
|
|
<!-- JS Generated -->
|
|
</div>
|
|
|
|
<!-- Right: Detail View -->
|
|
<div class="lg:col-span-2 bg-slate-50 rounded-xl border border-slate-200 p-8 flex flex-col justify-center min-h-[300px]">
|
|
<div id="timeline-detail-content" class="transition-all duration-300">
|
|
<span class="inline-block px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full mb-4" id="detail-date">2024 Q1</span>
|
|
<h4 class="text-2xl font-bold text-slate-800 mb-4" id="detail-title">TestSprite 설립</h4>
|
|
<p class="text-slate-600 text-lg leading-relaxed mb-6" id="detail-desc">
|
|
AI가 소프트웨어 개발의 병목인 '테스팅'을 해결할 수 있다는 확신을 바탕으로 샌프란시스코에서 설립되었습니다. 초기 프로토타입 개발에 집중하며 핵심 기술을 검증했습니다.
|
|
</p>
|
|
<div class="border-t border-slate-200 pt-4">
|
|
<p class="text-sm text-slate-500 font-semibold">Key Impact:</p>
|
|
<p class="text-sm text-slate-700 mt-1" id="detail-impact">Founding Team 결성 및 초기 비전 수립</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Workforce & Org Analysis (Charts) -->
|
|
<section id="workforce" class="scroll-mt-20">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-slate-800">인력 및 조직 구조 분석 (Workforce Analysis)</h3>
|
|
<p class="text-slate-500 mt-2">초기 스타트업의 전형적인 'Engineering-Heavy' 구조와 급격한 인원 증가 추세를 시각화했습니다.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Chart 1: Headcount Growth -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-1">임직원 수 성장 추이 (추정)</h4>
|
|
<p class="text-xs text-slate-400 mb-6">분기별 인원 증가 (단위: 명)</p>
|
|
|
|
<!-- Chart Container -->
|
|
<div class="chart-container">
|
|
<canvas id="headcountChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-slate-50 rounded text-xs text-slate-600">
|
|
<strong>Insight:</strong> Y Combinator 배치 선정(S24) 이후, 투자 유치와 함께 개발 인력을 공격적으로 채용하며 J커브 성장을 그리고 있습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 2: Department Breakdown -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200">
|
|
<h4 class="text-lg font-bold text-slate-800 mb-1">부서별 인력 구성 비율</h4>
|
|
<p class="text-xs text-slate-400 mb-6">전체 인원 대비 직무별 비중</p>
|
|
|
|
<!-- Chart Container -->
|
|
<div class="chart-container">
|
|
<canvas id="deptChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-slate-50 rounded text-xs text-slate-600">
|
|
<strong>Insight:</strong> 전체 인력의 약 70%가 R&D 및 엔지니어링에 집중되어 있으며, 이는 기술 중심 AI 스타트업의 전형적인 특징입니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Technology & Analysis -->
|
|
<section id="tech" class="scroll-mt-20 pb-12">
|
|
<div class="mb-6">
|
|
<h3 class="text-2xl font-bold text-slate-800">핵심 기술 분석 (Key Technology)</h3>
|
|
<p class="text-slate-500 mt-2">TestSprite가 경쟁 우위를 점할 수 있는 기술적 차별점을 분석합니다. 각 카드를 클릭하여 상세 내용을 확인하세요.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6" id="tech-cards">
|
|
<!-- Cards generated by JS -->
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="bg-slate-900 text-slate-400 py-8 border-t border-slate-800">
|
|
<div class="max-w-7xl mx-auto px-4 text-center">
|
|
<p class="mb-2">TestSprite Corporate Analysis Interactive Report</p>
|
|
<p class="text-xs text-slate-600">Data Source: Public Corporate Profiles, YC Directory, TechCrunch (Simulated for Demo)</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// --- Data Store ---
|
|
const reportData = {
|
|
timeline: [
|
|
{
|
|
id: 1,
|
|
date: "2024 Q1",
|
|
title: "TestSprite 설립",
|
|
desc: "AI 기반 테스팅 자동화라는 비전을 가지고 설립되었습니다. 초기 창업 팀은 전 구글, 메타 출신의 엔지니어들로 구성되어 기술적 기반을 마련했습니다.",
|
|
impact: "Core Tech Stack 선정 및 프로토타입 개발 착수"
|
|
},
|
|
{
|
|
id: 2,
|
|
date: "2024 Q2",
|
|
title: "Beta Product 런칭",
|
|
desc: "초기 클로즈드 베타 서비스를 런칭하여 소수의 테크 기업들을 대상으로 PoC(개념 증명)를 진행했습니다. 이 과정에서 버그 검출 정확도 95%를 달성했습니다.",
|
|
impact: "첫 유료 고객 확보 및 Product-Market Fit 검증"
|
|
},
|
|
{
|
|
id: 3,
|
|
date: "2024 Q3 (S24)",
|
|
title: "Y Combinator 선정",
|
|
desc: "세계 최고의 스타트업 액셀러레이터 Y Combinator의 S24 배치에 선정되었습니다. 이는 기술력과 사업성을 글로벌 수준에서 인정받았음을 의미합니다.",
|
|
impact: "글로벌 네트워크 확보 및 시드 투자 유치 가속화"
|
|
},
|
|
{
|
|
id: 4,
|
|
date: "2024 Q4",
|
|
title: "시드 투자 유치 완료",
|
|
desc: "주요 실리콘밸리 VC들로부터 시드 투자를 성공적으로 유치했습니다. 이를 바탕으로 엔지니어링 팀을 2배로 확충하고 마케팅을 시작했습니다.",
|
|
impact: "기업 가치 상승 및 공격적 인재 영입 기반 마련"
|
|
},
|
|
{
|
|
id: 5,
|
|
date: "2025 (Current)",
|
|
title: "Enterprise 솔루션 확장",
|
|
desc: "스타트업을 넘어 중견/대기업을 위한 엔터프라이즈급 보안 기능과 통합 기능을 강화한 버전을 출시하고 있습니다.",
|
|
impact: "시장 점유율 확대 및 수익 모델 다각화"
|
|
}
|
|
],
|
|
valueProps: [
|
|
{ title: "Autonomous QA", text: "사람의 개입 없이 스스로 테스트 시나리오 설계 및 수행" },
|
|
{ title: "Self-Healing Tests", text: "UI 변경 시 테스트 스크립트가 자동으로 적응하여 유지보수 비용 절감" },
|
|
{ title: "Instant Feedback", text: "코드 커밋과 동시에 분석 결과를 제공하여 개발 속도 저하 방지" }
|
|
],
|
|
techFeatures: [
|
|
{
|
|
title: "LLM 기반 코드 분석",
|
|
icon: "🧠",
|
|
short: "Context-aware Code Understanding",
|
|
detail: "단순 구문 분석이 아닌, 대형 언어 모델(LLM)을 활용하여 코드의 의도(Intent)를 파악하고 엣지 케이스를 예측하여 테스트를 생성합니다."
|
|
},
|
|
{
|
|
title: "시각적 회귀 테스트",
|
|
icon: "👁️",
|
|
short: "Visual Regression Testing",
|
|
detail: "픽셀 단위의 변화를 감지하는 동시에, 의도된 UI 변경과 의도치 않은 레이아웃 깨짐을 AI가 구분하여 불필요한 알람을 줄입니다."
|
|
},
|
|
{
|
|
title: "CICD 파이프라인 통합",
|
|
icon: "⚙️",
|
|
short: "Seamless Integration",
|
|
detail: "GitHub Actions, Jenkins, GitLab CI 등 기존 도구와 단 몇 줄의 설정으로 연동되어, 개발자의 워크플로우를 방해하지 않고 백그라운드에서 동작합니다."
|
|
}
|
|
],
|
|
charts: {
|
|
headcount: {
|
|
labels: ['2024 Q1', '2024 Q2', '2024 Q3', '2024 Q4', '2025 Q1 (Est)'],
|
|
data: [4, 8, 15, 25, 40]
|
|
},
|
|
dept: {
|
|
labels: ['Engineering (R&D)', 'Product/Design', 'Sales/Marketing', 'Operations'],
|
|
data: [65, 15, 12, 8]
|
|
}
|
|
}
|
|
};
|
|
|
|
// --- Interaction Logic ---
|
|
|
|
// 1. Initialize Value Props
|
|
function initValueProps() {
|
|
const container = document.getElementById('value-prop-container');
|
|
reportData.valueProps.forEach(prop => {
|
|
const div = document.createElement('div');
|
|
div.className = "flex items-center p-3 bg-white rounded shadow-sm border border-slate-100 hover:bg-blue-50 transition-colors cursor-default";
|
|
div.innerHTML = `
|
|
<div class="h-2 w-2 rounded-full bg-blue-500 mr-3"></div>
|
|
<div>
|
|
<p class="text-sm font-bold text-slate-700">${prop.title}</p>
|
|
<p class="text-xs text-slate-500">${prop.text}</p>
|
|
</div>
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
}
|
|
|
|
// 2. Timeline Logic
|
|
let currentTimelineId = 1;
|
|
|
|
function renderTimeline() {
|
|
const listContainer = document.getElementById('timeline-list');
|
|
listContainer.innerHTML = '';
|
|
|
|
reportData.timeline.forEach(item => {
|
|
const btn = document.createElement('button');
|
|
const isActive = item.id === currentTimelineId;
|
|
|
|
btn.className = `w-full text-left p-4 rounded-lg border transition-all duration-200 flex items-center justify-between group ${
|
|
isActive
|
|
? 'bg-blue-600 border-blue-600 text-white shadow-md'
|
|
: 'bg-white border-slate-200 text-slate-600 hover:border-blue-300 hover:bg-slate-50'
|
|
}`;
|
|
|
|
btn.onclick = () => updateTimelineDetail(item.id);
|
|
|
|
btn.innerHTML = `
|
|
<div>
|
|
<span class="text-xs font-semibold ${isActive ? 'text-blue-100' : 'text-slate-400'} block mb-1">${item.date}</span>
|
|
<span class="font-bold block">${item.title}</span>
|
|
</div>
|
|
<span class="${isActive ? 'text-white' : 'text-slate-300 group-hover:text-blue-400'}">→</span>
|
|
`;
|
|
listContainer.appendChild(btn);
|
|
});
|
|
}
|
|
|
|
function updateTimelineDetail(id) {
|
|
currentTimelineId = id;
|
|
const item = reportData.timeline.find(t => t.id === id);
|
|
|
|
// Re-render list to update active states
|
|
renderTimeline();
|
|
|
|
// Update Detail Content with simplistic animation
|
|
const content = document.getElementById('timeline-detail-content');
|
|
content.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('detail-date').textContent = item.date;
|
|
document.getElementById('detail-title').textContent = item.title;
|
|
document.getElementById('detail-desc').textContent = item.desc;
|
|
document.getElementById('detail-impact').textContent = item.impact;
|
|
content.style.opacity = '1';
|
|
}, 150);
|
|
}
|
|
|
|
// 3. Tech Cards Logic
|
|
function initTechCards() {
|
|
const container = document.getElementById('tech-cards');
|
|
reportData.techFeatures.forEach(tech => {
|
|
const card = document.createElement('div');
|
|
card.className = "bg-white p-6 rounded-xl shadow-sm border border-slate-200 hover:border-blue-400 hover:shadow-lg transition-all cursor-pointer group h-full flex flex-col";
|
|
card.innerHTML = `
|
|
<div class="text-4xl mb-4 group-hover:scale-110 transition-transform duration-300">${tech.icon}</div>
|
|
<h4 class="text-lg font-bold text-slate-800 mb-2">${tech.title}</h4>
|
|
<p class="text-sm text-blue-600 font-medium mb-3">${tech.short}</p>
|
|
<p class="text-sm text-slate-600 leading-relaxed flex-grow">${tech.detail}</p>
|
|
<div class="mt-4 pt-4 border-t border-slate-100 text-xs text-slate-400 flex items-center">
|
|
<span class="group-hover:text-blue-500 transition-colors">상세 분석 보기 +</span>
|
|
</div>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
// 4. Charts Logic
|
|
function initCharts() {
|
|
// Font setting for Chart.js
|
|
Chart.defaults.font.family = "'Noto Sans KR', sans-serif";
|
|
Chart.defaults.color = '#64748b';
|
|
|
|
// Headcount Chart (Line)
|
|
const ctxHeadcount = document.getElementById('headcountChart').getContext('2d');
|
|
new Chart(ctxHeadcount, {
|
|
type: 'line',
|
|
data: {
|
|
labels: reportData.charts.headcount.labels,
|
|
datasets: [{
|
|
label: '임직원 수 (명)',
|
|
data: reportData.charts.headcount.data,
|
|
borderColor: '#2563eb', // Blue 600
|
|
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
|
borderWidth: 3,
|
|
pointBackgroundColor: '#ffffff',
|
|
pointBorderColor: '#2563eb',
|
|
pointRadius: 6,
|
|
pointHoverRadius: 8,
|
|
fill: true,
|
|
tension: 0.3
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false, // Vital for container responsiveness
|
|
plugins: {
|
|
legend: { display: false },
|
|
tooltip: {
|
|
backgroundColor: '#1e293b',
|
|
padding: 12,
|
|
titleFont: { size: 14 },
|
|
bodyFont: { size: 13 },
|
|
cornerRadius: 8,
|
|
displayColors: false
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { borderDash: [4, 4], color: '#e2e8f0' },
|
|
ticks: { padding: 10 }
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { padding: 10 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Department Chart (Doughnut)
|
|
const ctxDept = document.getElementById('deptChart').getContext('2d');
|
|
new Chart(ctxDept, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: reportData.charts.dept.labels,
|
|
datasets: [{
|
|
data: reportData.charts.dept.data,
|
|
backgroundColor: [
|
|
'#3b82f6', // Blue 500 (Eng)
|
|
'#60a5fa', // Blue 400
|
|
'#93c5fd', // Blue 300
|
|
'#cbd5e1' // Slate 300
|
|
],
|
|
borderWidth: 0,
|
|
hoverOffset: 10
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
layout: { padding: 20 },
|
|
plugins: {
|
|
legend: {
|
|
position: 'right',
|
|
labels: { usePointStyle: true, padding: 20, font: { size: 12 } }
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return ` ${context.label}: ${context.raw}%`;
|
|
}
|
|
},
|
|
backgroundColor: '#1e293b',
|
|
padding: 12,
|
|
cornerRadius: 8
|
|
}
|
|
},
|
|
cutout: '70%'
|
|
}
|
|
});
|
|
}
|
|
|
|
// Navigation Scroll
|
|
function scrollToSection(id) {
|
|
const element = document.getElementById(id);
|
|
if(element) {
|
|
element.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
|
|
// Init
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initValueProps();
|
|
renderTimeline();
|
|
initTechCards();
|
|
initCharts();
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |