hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
483 lines
28 KiB
PHP
483 lines
28 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>더존비즈온 (Douzone Bizon) 기업 분석 리포트</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@400;500;700&display=swap" rel="stylesheet">
|
|
<!-- Chosen Palette: Warm Neutrals (Slate) with Blue Accent -->
|
|
<!-- Application Structure Plan:
|
|
디자인 구조: 사용자가 더존비즈온이라는 기업을 쉽게 이해할 수 있도록 4개의 명확한 주제별 섹션(기업 개요, 핵심 솔루션, 성장 스토리, 재무 성과)으로 구성된 단일 페이지 대시보드.
|
|
상호작용:
|
|
1. 상단 고정 내비게이션 바를 통한 부드러운 스크롤링(JS).
|
|
2. '핵심 솔루션' 섹션의 탭 인터페이스(JS)를 통해 사용자가 'Amaranth 10', 'WEHAGO' 등 주요 제품 정보를 클릭하여 동적으로 탐색.
|
|
3. 차트(Chart.js)의 툴팁을 통한 세부 데이터 확인.
|
|
사용자 흐름: 사용자는 '개요'에서 핵심 지표를 확인하고, '솔루션'에서 제품을 탐색하며, '성장'에서 역사를, '재무'에서 성과를 확인. 이 구조는 복잡한 기업 정보를 선형적 보고서가 아닌, 사용자가 주도적으로 탐색할 수 있는 주제별 모듈로 분해하여 사용성을 극대화함.
|
|
-->
|
|
<!-- Visualization & Content Choices:
|
|
1. 정보: 사업 영역 비중 (ERP, 클라우드, 그룹웨어) -> 목표: 비중 정보 제공 -> 시각화: 도넛 차트 (Chart.js) -> 상호작용: 호버 시 툴팁 -> 정당성: 핵심 수익원의 비중을 빠르고 직관적으로 전달.
|
|
2. 정보: 주요 제품 상세 (Amaranth 10, WEHAGO 등) -> 목표: 조직화 및 비교 -> 시각화: HTML/Tailwind 탭 인터페이스 -> 상호작용: 클릭 시 JS로 해당 콘텐츠 표시/숨김 -> 정당성: 여러 제품 정보를 한 공간에 깔끔하게 정리하고, 사용자가 원하는 정보만 선택적으로 탐색 가능.
|
|
3. 정보: 회사 연혁 (1993년 ~ 현재) -> 목표: 시간 흐름에 따른 변화 표시 -> 시각화: HTML/Tailwind 수직 타임라인 -> 상호작용: 스크롤 및 읽기 -> 정당성: 텍스트 목록보다 시각적으로 흥미롭고 시간의 흐름을 명확하게 인지시킴.
|
|
4. 정보: 연도별 매출액 (2020-2023) -> 목표: 추세 변화 표시 -> 시각화: 라인 차트 (Chart.js) -> 상호작용: 호버 시 툴팁 -> 정당성: 시간에 따른 매출 성장을 시각적으로 명확하게 표현.
|
|
5. 정보: 연도별 영업이익 (2020-2023) -> 목표: 추세 비교 -> 시각화: 바 차트 (Chart.js) -> 상호작용: 호버 시 툴팁 -> 정당성: 연도별 수익성을 직관적으로 비교 분석하기 용이함.
|
|
-->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
<style>
|
|
body {
|
|
font-family: 'Noto Sans KR', sans-serif;
|
|
}
|
|
.chart-container {
|
|
position: relative;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.nav-btn {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.active-btn {
|
|
background-color: #2563EB; /* blue-600 */
|
|
color: white;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
}
|
|
.product-content {
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
.timeline-item {
|
|
position: relative;
|
|
padding-bottom: 2rem;
|
|
padding-left: 2rem;
|
|
border-left: 2px solid #D1D5DB; /* gray-300 */
|
|
}
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -0.5rem;
|
|
top: 0;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 9999px;
|
|
background-color: #2563EB; /* blue-600 */
|
|
border: 2px solid white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800">
|
|
<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-slate-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-slate-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-slate-600 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<header class="bg-white shadow-md sticky top-0 z-50 w-full">
|
|
<nav class="container mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center h-16">
|
|
<h1 class="text-2xl font-bold text-blue-600">더존비즈온 (Douzone Bizon)</h1>
|
|
<div class="hidden md:flex space-x-6">
|
|
<a href="#overview" class="text-slate-600 hover:text-blue-600 font-medium">기업 개요</a>
|
|
<a href="#solutions" class="text-slate-600 hover:text-blue-600 font-medium">핵심 솔루션</a>
|
|
<a href="#history" class="text-slate-600 hover:text-blue-600 font-medium">성장 스토리</a>
|
|
<a href="#financials" class="text-slate-600 hover:text-blue-600 font-medium">재무 성과</a>
|
|
</div>
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-btn" class="text-slate-600 hover:text-blue-600">
|
|
<span class="sr-only">메뉴 열기</span>
|
|
<div class="w-6 h-0.5 bg-slate-600 mb-1.5"></div>
|
|
<div class="w-6 h-0.5 bg-slate-600 mb-1.5"></div>
|
|
<div class="w-6 h-0.5 bg-slate-600"></div>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg py-2">
|
|
<a href="#overview" class="block px-4 py-2 text-slate-600 hover:bg-slate-100">기업 개요</a>
|
|
<a href="#solutions" class="block px-4 py-2 text-slate-600 hover:bg-slate-100">핵심 솔루션</a>
|
|
<a href="#history" class="block px-4 py-2 text-slate-600 hover:bg-slate-100">성장 스토리</a>
|
|
<a href="#financials" class="block px-4 py-2 text-slate-600 hover:bg-slate-100">재무 성과</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto p-4 md:p-8 pt-8 md:pt-12">
|
|
|
|
<section id="overview" class="mb-16 scroll-mt-20">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">기업 개요: 대한민국 No.1 ICT 솔루션 기업</h2>
|
|
<p class="text-lg text-slate-600 mb-8">
|
|
더존비즈온은 1993년 설립 이래 대한민국 중소·중견기업(SME) 시장을 중심으로 ERP, 클라우드, 그룹웨어 솔루션을 제공해 온 ICT 분야의 선도 기업입니다. 강력한 시장 지배력과 기술력을 바탕으로 기업의 디지털 전환을 이끌고 있습니다.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-12">
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
|
<h3 class="text-sm font-semibold text-slate-500 uppercase">설립일</h3>
|
|
<p class="text-3xl font-bold text-blue-600 mt-2">1993년</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
|
<h3 class="text-sm font-semibold text-slate-500 uppercase">임직원 수</h3>
|
|
<p class="text-3xl font-bold text-blue-600 mt-2">약 1,550명</p>
|
|
<span class="text-xs text-slate-400">(2023년 기준)</span>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
|
<h3 class="text-sm font-semibold text-slate-500 uppercase">2023년 매출액</h3>
|
|
<p class="text-3xl font-bold text-blue-600 mt-2">3,535 억원</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-lg text-center">
|
|
<h3 class="text-sm font-semibold text-slate-500 uppercase">본사 위치</h3>
|
|
<p class="text-3xl font-bold text-blue-600 mt-2">강원도 춘천</p>
|
|
<span class="text-xs text-slate-400">(더존 ICT 그룹 강촌캠퍼스)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center bg-white p-8 rounded-xl shadow-lg">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-slate-900 mb-4">핵심 사업 영역</h3>
|
|
<p class="text-slate-600 mb-6">
|
|
더존비즈온의 사업은 크게 세 축으로 나뉩니다. 기업 경영의 핵심인 ERP 솔루션, 클라우드 기반의 비즈니스 플랫폼, 그리고 협업을 위한 그룹웨어입니다.
|
|
</p>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center">
|
|
<span class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold">1</span>
|
|
<span class="ml-4 text-lg font-medium text-slate-700">ERP (전사적 자원관리)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<span class="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold">2</span>
|
|
<span class="ml-4 text-lg font-medium text-slate-700">Cloud Platform (WEHAGO)</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<span class="flex-shrink-0 w-8 h-8 bg-blue-400 text-white rounded-full flex items-center justify-center font-bold">3</span>
|
|
<span class="ml-4 text-lg font-medium text-slate-700">Groupware (협업 솔루션)</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="chart-container w-full max-w-sm h-80 md:h-96 max-h-[400px]">
|
|
<canvas id="bizMixChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="solutions" class="mb-16 scroll-mt-20">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">핵심 솔루션 포트폴리오</h2>
|
|
<p class="text-lg text-slate-600 mb-8">
|
|
더존비즈온은 기업의 규모와 필요에 맞는 다양한 솔루션 라인업을 보유하고 있습니다. 아래 탭을 클릭하여 각 솔루션의 특징을 확인해 보세요.
|
|
</p>
|
|
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow active-btn" data-target="content-amaranth">
|
|
Amaranth 10
|
|
</button>
|
|
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-wehago">
|
|
WEHAGO
|
|
</button>
|
|
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-icube">
|
|
iCUBE
|
|
</button>
|
|
<button class="nav-btn font-medium py-3 px-5 rounded-lg bg-white shadow" data-target="content-smarta">
|
|
Smart A
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg min-h-[300px]">
|
|
<div id="content-amaranth" class="product-content">
|
|
<h3 class="text-2xl font-bold text-blue-600 mb-3">Amaranth 10 (아마란스 10)</h3>
|
|
<p class="text-sm font-medium text-slate-500 mb-4">차세대 클라우드 네이티브 ERP & 그룹웨어</p>
|
|
<p class="text-slate-700 mb-4">
|
|
'Amaranth 10'은 더존비즈온의 최신 주력 제품으로, ERP, 그룹웨어, 문서관리 기능이 하나의 플랫폼에서 완벽하게 통합된 클라우드 네이티브 솔루션입니다. AI 비서 기능을 탑재하여 업무 자동화와 지능형 경영 분석을 지원합니다.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
|
<li><strong>특징:</strong> ERP + 그룹웨어 + 문서관리 완전 통합</li>
|
|
<li><strong>기술:</strong> 클라우드 네이티브, 마이크로서비스 아키텍처(MSA)</li>
|
|
<li><strong>핵심 기능:</strong> AI 비서, 실시간 경영 분석, 자동 회계 처리</li>
|
|
<li><strong>대상:</strong> 중견·대기업 (Digital Transformation 추진 기업)</li>
|
|
</ul>
|
|
</div>
|
|
<div id="content-wehago" class="product-content hidden opacity-0">
|
|
<h3 class="text-2xl font-bold text-blue-600 mb-3">WEHAGO (위하고)</h3>
|
|
<p class="text-sm font-medium text-slate-500 mb-4">중소기업을 위한 비즈니스 플랫폼</p>
|
|
<p class="text-slate-700 mb-4">
|
|
'WEHAGO'는 중소기업(SME)이 별도의 시스템 구축 없이도 경영에 필요한 모든 ICT 서비스를 구독형(SaaS)으로 이용할 수 있는 비즈니스 플랫폼입니다. ERP, 협업, 보안, 전자결재 등을 통합 제공합니다.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
|
<li><strong>특징:</strong> 올인원(All-in-One) SaaS 플랫폼</li>
|
|
<li><strong>핵심 기능:</strong> 경영관리(ERP), 협업(메일, 메신저), 전자결재, 웹스토리지</li>
|
|
<li><strong>확장:</strong> 'WEHAGO T' (세무회계사무소용), 'WEHAGO V' (공공용)</li>
|
|
<li><strong>대상:</strong> 중소기업, 스타트업</li>
|
|
</ul>
|
|
</div>
|
|
<div id="content-icube" class="product-content hidden opacity-0">
|
|
<h3 class="text-2xl font-bold text-blue-600 mb-3">iCUBE (아이큐브)</h3>
|
|
<p class="text-sm font-medium text-slate-500 mb-4">중견기업 맞춤형 구축형 ERP</p>
|
|
<p class="text-slate-700 mb-4">
|
|
'iCUBE'는 중견기업의 특화된 업무 프로세스를 반영할 수 있는 구축형(On-premise) ERP 솔루션입니다. 오랜 기간 시장에서 검증된 안정성과 강력한 커스터마이징 기능이 강점입니다.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
|
<li><strong>특징:</strong> 강력한 커스터마이징, 안정적인 온프레미스 방식</li>
|
|
<li><strong>핵심 기능:</strong> 회계, 인사, 물류, 생산 등 전사적 관리</li>
|
|
<li><strong>연동:</strong> 그룹웨어(Bizbox Alpha)와 완벽 연동</li>
|
|
<li><strong>대상:</strong> 중견기업 (제조, 유통, 서비스 등)</li>
|
|
</ul>
|
|
</div>
|
|
<div id="content-smarta" class="product-content hidden opacity-0">
|
|
<h3 class="text-2xl font-bold text-blue-600 mb-3">Smart A (스마트 에이)</h3>
|
|
<p class="text-sm font-medium text-slate-500 mb-4">중소기업 및 세무회계 시장의 표준</p>
|
|
<p class="text-slate-700 mb-4">
|
|
'Smart A'는 국내 중소기업 회계 프로그램 시장에서 압도적인 점유율을 차지하고 있는 표준 소프트웨어입니다. 특히 세무회계사무소와의 강력한 연동을 통해 기업의 회계/세무 업무를 지원합니다.
|
|
</p>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-600">
|
|
<li><strong>특징:</strong> 세무회계 시장 표준, 높은 시장 점유율</li>
|
|
<li><strong>핵심 기능:</strong> 회계관리, 급여관리, 세무신고</li>
|
|
<li><strong>연동:</strong> 세무회계사무소와의 데이터 연동 (Key-Link)</li>
|
|
<li><strong>대상:</strong> 중소기업, 세무회계사무소</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="history" class="mb-16 scroll-mt-20">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">성장 스토리: 도전과 혁신의 역사</h2>
|
|
<p class="text-lg text-slate-600 mb-8">
|
|
1993년 '키컴'으로 시작한 더존비즈온은 대한민국 IT 역사와 함께 성장해왔습니다. 회계 S/W 시장 석권에서 클라우드와 AI를 선도하는 현재까지, 핵심적인 성장 과정을 살펴봅니다.
|
|
</p>
|
|
|
|
<div class="relative">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">1993년</time>
|
|
<h3 class="text-xl font-bold text-slate-800">키컴(KICOM) 설립</h3>
|
|
<p class="text-slate-600">회계 프로그램 '세무사' 출시, 중소기업 회계 S/W 시장 진출</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">2000년대 초반</time>
|
|
<h3 class="text-xl font-bold text-slate-800">시장 지배력 확보</h3>
|
|
<p class="text-slate-600">iPlus(현 Smart A) 출시, 세무회계 시장 점유율 80% 이상 장악</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">2011년</time>
|
|
<h3 class="text-xl font-bold text-slate-800">'더존비즈온' 사명 변경 및 D-Cloud Center 개소</h3>
|
|
<p class="text-slate-600">강촌캠퍼스 이전 및 데이터센터 구축, 본격적인 클라우드 사업 시작</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">2010년대 중반</time>
|
|
<h3 class="text-xl font-bold text-slate-800">클라우드 플랫폼 'WEHAGO' 출시</h3>
|
|
<p class="text-slate-600">SME를 위한 구독형 비즈니스 플랫폼 'WEHAGO'를 출시하며 클라우드 기업으로 전환 가속화</p>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">2021년</time>
|
|
<h3 class="text-xl font-bold text-slate-800">차세대 ERP 'Amaranth 10' 출시</h3>
|
|
<p class="text-slate-600">AI 기반의 클라우드 네이티브 ERP를 출시하며 중견·대기업 시장 공략</p>
|
|
</div>
|
|
<div class="timeline-item border-l-transparent">
|
|
<div class="timeline-dot"></div>
|
|
<time class="text-sm font-semibold text-blue-600 mb-1">현재</time>
|
|
<h3 class="text-xl font-bold text-slate-800">AI 및 데이터 기업으로 진화</h3>
|
|
<p class="text-slate-600">ERP 데이터를 기반으로 한 AI, 핀테크, 빅데이터 등 신사업 영역 확장 중</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="financials" class="scroll-mt-20">
|
|
<h2 class="text-3xl font-bold text-slate-900 mb-4">주요 재무 성과</h2>
|
|
<p class="text-lg text-slate-600 mb-8">
|
|
더존비즈온은 클라우드 사업 전환에 성공하며 꾸준하고 안정적인 성장세를 보여주고 있습니다. 최근 4년간의 매출액과 영업이익 추이를 통해 견고한 재무 성과를 확인해 보세요.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
|
|
<h3 class="text-xl font-bold text-slate-900 mb-4">연도별 매출액 추이 (억원)</h3>
|
|
<div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
|
|
<canvas id="revenueChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white p-6 md:p-8 rounded-xl shadow-lg">
|
|
<h3 class="text-xl font-bold text-slate-900 mb-4">연도별 영업이익 추이 (억원)</h3>
|
|
<div class="chart-container w-full max-w-2xl h-80 md:h-96 max-h-[400px]">
|
|
<canvas id="profitChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-slate-800 text-slate-300 mt-16 py-8">
|
|
<div class="container mx-auto px-4 md:px-8 text-center">
|
|
<p class="text-sm">본 리포트는 더존비즈온에 대한 공개 정보를 기반으로 작성된 인터랙티브 요약입니다.</p>
|
|
<p class="text-xs mt-2 text-slate-400">© 2025 Interactive Report. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const chartData = {
|
|
bizMix: {
|
|
labels: ['ERP', 'Cloud Platform', 'Groupware & 기타'],
|
|
data: [45, 35, 20],
|
|
colors: ['#2563EB', '#3B82F6', '#60A5FA']
|
|
},
|
|
financials: {
|
|
labels: ['2020', '2021', '2022', '2023'],
|
|
revenue: [3065, 3258, 3303, 3535],
|
|
profit: [767, 701, 510, 707]
|
|
}
|
|
};
|
|
|
|
const commonChartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: {
|
|
color: '#475569',
|
|
font: {
|
|
family: "'Noto Sans KR', sans-serif"
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
enabled: true,
|
|
bodyFont: {
|
|
family: "'Noto Sans KR', sans-serif"
|
|
},
|
|
titleFont: {
|
|
family: "'Noto Sans KR', sans-serif"
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
const bizMixCtx = document.getElementById('bizMixChart');
|
|
if (bizMixCtx) {
|
|
new Chart(bizMixCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: chartData.bizMix.labels,
|
|
datasets: [{
|
|
label: '사업 비중',
|
|
data: chartData.bizMix.data,
|
|
backgroundColor: chartData.bizMix.colors,
|
|
borderColor: '#FFFFFF',
|
|
borderWidth: 2
|
|
}]
|
|
},
|
|
options: {
|
|
...commonChartOptions,
|
|
cutout: '60%'
|
|
}
|
|
});
|
|
}
|
|
|
|
const revenueCtx = document.getElementById('revenueChart');
|
|
if (revenueCtx) {
|
|
new Chart(revenueCtx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: chartData.financials.labels,
|
|
datasets: [{
|
|
label: '매출액 (억원)',
|
|
data: chartData.financials.revenue,
|
|
borderColor: '#2563EB',
|
|
backgroundColor: 'rgba(37, 99, 235, 0.1)',
|
|
fill: true,
|
|
tension: 0.3
|
|
}]
|
|
},
|
|
options: {
|
|
...commonChartOptions,
|
|
plugins: { ...commonChartOptions.plugins, legend: { display: false } },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
ticks: { color: '#475569' },
|
|
grid: { color: '#E2E8F0' }
|
|
},
|
|
x: {
|
|
ticks: { color: '#475569' },
|
|
grid: { display: false }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const profitCtx = document.getElementById('profitChart');
|
|
if (profitCtx) {
|
|
new Chart(profitCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: chartData.financials.labels,
|
|
datasets: [{
|
|
label: '영업이익 (억원)',
|
|
data: chartData.financials.profit,
|
|
backgroundColor: '#3B82F6',
|
|
borderRadius: 4
|
|
}]
|
|
},
|
|
options: {
|
|
...commonChartOptions,
|
|
plugins: { ...commonChartOptions.plugins, legend: { display: false } },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { color: '#475569' },
|
|
grid: { color: '#E2E8F0' }
|
|
},
|
|
x: {
|
|
ticks: { color: '#475569' },
|
|
grid: { display: false }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const productNavBtns = document.querySelectorAll('.nav-btn');
|
|
const productContents = document.querySelectorAll('.product-content');
|
|
|
|
productNavBtns.forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const targetId = btn.dataset.target;
|
|
|
|
productNavBtns.forEach(b => b.classList.remove('active-btn'));
|
|
btn.classList.add('active-btn');
|
|
|
|
productContents.forEach(content => {
|
|
if (content.id === targetId) {
|
|
content.classList.remove('hidden', 'opacity-0');
|
|
} else {
|
|
content.classList.add('hidden', 'opacity-0');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
const navLinks = document.querySelectorAll('header a[href^="#"]');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
if (targetElement) {
|
|
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
if (!mobileMenu.classList.contains('hidden')) {
|
|
mobileMenu.classList.add('hidden');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
if (mobileMenuBtn) {
|
|
mobileMenuBtn.addEventListener('click', () => {
|
|
mobileMenu.classList.toggle('hidden');
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |