hskwon
27052af3f1
- layouts.presentation → layouts.app 변경 (13개 파일) - 슬라이드 높이: 100vh → calc(100vh - 80px) - 슬라이드 번호 위치 중앙 정렬
520 lines
27 KiB
PHP
520 lines
27 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Confluence vs Notion 심층 분석')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.chart-container {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 300px;
|
|
max-height: 400px;
|
|
}
|
|
@media (min-width: 768px) {
|
|
.chart-container {
|
|
height: 350px;
|
|
}
|
|
}
|
|
.tab-active {
|
|
border-bottom: 2px solid #0052CC;
|
|
color: #0052CC;
|
|
font-weight: 600;
|
|
}
|
|
.tab-inactive {
|
|
color: #78716c;
|
|
}
|
|
.tab-inactive:hover {
|
|
color: #44403c;
|
|
}
|
|
.scroll-mt-20 {
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="bg-stone-50 text-stone-800 min-h-screen">
|
|
<!-- Header -->
|
|
<header class="bg-white border-b border-stone-200 sticky top-0 z-40">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">C</div>
|
|
<span class="text-stone-400 font-light text-xl">vs</span>
|
|
<div class="w-8 h-8 bg-stone-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">N</div>
|
|
<h1 class="ml-3 text-xl font-bold tracking-tight text-stone-900 hidden sm:block">Work Tool Analysis</h1>
|
|
</div>
|
|
<nav class="hidden md:flex space-x-8">
|
|
<a href="#trends" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">트렌드 & 철학</a>
|
|
<a href="#features" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">기능 비교</a>
|
|
<a href="#pricing" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">비용 시뮬레이션</a>
|
|
<a href="#verdict" class="text-stone-600 hover:text-blue-600 px-3 py-2 text-sm font-medium transition">추천 가이드</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
|
<!-- Hero -->
|
|
<div class="text-center mb-16">
|
|
<h2 class="text-4xl font-extrabold text-stone-900 mb-4">구조(Structure)와 유연성(Flexibility)의 대결</h2>
|
|
<p class="text-lg text-stone-600 max-w-3xl mx-auto leading-relaxed">
|
|
전통적인 강자 <strong>Atlassian Confluence</strong>는 체계적인 문서화와 JIRA 통합을 무기로 기업 시장을 지키고 있습니다.
|
|
반면, <strong>Notion</strong>은 올인원(All-in-one) 워크스페이스와 압도적인 자유도로 빠르게 시장을 잠식하고 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Section 1: Trends -->
|
|
<section id="trends" class="mb-20 scroll-mt-20">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
|
<div class="mb-4">
|
|
<h3 class="text-xl font-bold text-stone-900 mb-2">시장 관심도 변화 (Trend Analysis)</h3>
|
|
<p class="text-sm text-stone-500">최근 5년간의 검색량 및 사용자 관심도 추이입니다.</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 bg-blue-50 p-4 rounded-xl border border-blue-100">
|
|
<p class="text-sm text-blue-800">
|
|
<strong>핵심 인사이트:</strong> Notion은 개인 사용자와 스타트업을 중심으로 폭발적인 '팬덤'을 형성하며 성장했습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-sm border border-stone-100 p-6">
|
|
<div class="mb-4">
|
|
<h3 class="text-xl font-bold text-stone-900 mb-2">핵심 철학 비교 (Philosophy Radar)</h3>
|
|
<p class="text-sm text-stone-500">두 도구의 성격을 시각화합니다.</p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="radarChart"></canvas>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 mt-4 text-sm">
|
|
<div class="text-center">
|
|
<span class="block font-bold text-blue-600 mb-1">Confluence</span>
|
|
<span class="text-stone-500">"체계화된 지식 저장소"</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<span class="block font-bold text-stone-900 mb-1">Notion</span>
|
|
<span class="text-stone-500">"유연한 레고 블록"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 2: Features -->
|
|
<section id="features" class="mb-20 scroll-mt-20">
|
|
<div class="mb-8">
|
|
<h3 class="text-2xl font-bold text-stone-900">기능 심층 비교</h3>
|
|
<p class="text-stone-600 mt-2">카테고리별 상세 기능을 확인하세요.</p>
|
|
</div>
|
|
|
|
<div class="flex space-x-6 border-b border-stone-200 mb-8 overflow-x-auto">
|
|
<button onclick="updateFeatureView('doc')" class="tab-btn tab-active pb-3 px-1 transition whitespace-nowrap" id="btn-doc">문서화 & 위키</button>
|
|
<button onclick="updateFeatureView('pm')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-pm">프로젝트 관리</button>
|
|
<button onclick="updateFeatureView('dev')" class="tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap" id="btn-dev">개발 & 통합</button>
|
|
</div>
|
|
|
|
<div id="feature-content" class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- Content injected via JS -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 3: Pricing -->
|
|
<section id="pricing" class="mb-20 scroll-mt-20 bg-stone-100 rounded-3xl p-8 lg:p-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div class="lg:col-span-1">
|
|
<h3 class="text-2xl font-bold text-stone-900 mb-4">비용 시뮬레이션</h3>
|
|
<p class="text-stone-600 mb-8">팀 규모에 따른 월간 예상 비용을 확인해보세요.</p>
|
|
|
|
<div class="mb-8">
|
|
<label for="userRange" class="block text-sm font-medium text-stone-700 mb-2">팀 규모: <span id="userCountDisplay" class="text-blue-600 font-bold text-lg">10</span>명</label>
|
|
<input type="range" id="userRange" min="1" max="200" value="10" class="w-full h-2 bg-stone-300 rounded-lg appearance-none cursor-pointer accent-blue-600">
|
|
<div class="flex justify-between text-xs text-stone-500 mt-2">
|
|
<span>1명</span>
|
|
<span>200명+</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-blue-600">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">Confluence 예상 비용</div>
|
|
<div class="text-2xl font-bold text-stone-900" id="confPrice">$60.00</div>
|
|
<div class="text-xs text-stone-400">월간 / 사용자당 약 $6.05</div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-xl shadow-sm border-l-4 border-stone-800">
|
|
<div class="text-xs text-stone-500 uppercase font-semibold">Notion 예상 비용</div>
|
|
<div class="text-2xl font-bold text-stone-900" id="notionPrice">$80.00</div>
|
|
<div class="text-xs text-stone-400">월간 / 사용자당 $8</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lg:col-span-2 flex flex-col justify-center">
|
|
<div class="chart-container">
|
|
<canvas id="pricingChart"></canvas>
|
|
</div>
|
|
<div class="mt-6 text-sm text-stone-500 bg-white p-4 rounded-lg">
|
|
<p><strong>참고:</strong> Confluence는 10명 이하 무료, 이후 사용자 수 구간별로 가격이 책정됩니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Section 4: Verdict -->
|
|
<section id="verdict" class="mb-20 scroll-mt-20">
|
|
<div class="max-w-4xl mx-auto bg-white border border-stone-200 rounded-2xl shadow-lg overflow-hidden">
|
|
<div class="bg-stone-900 p-6 text-center">
|
|
<h3 class="text-2xl font-bold text-white">어떤 도구가 우리 팀에 맞을까요?</h3>
|
|
<p class="text-stone-400 mt-2">3가지 질문으로 알아보는 추천 가이드</p>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<div id="quiz-container" class="space-y-6">
|
|
<div class="space-y-4">
|
|
<p class="font-semibold text-lg text-stone-800">Q1. 귀하의 팀은 소프트웨어 개발이 주 업무이며, JIRA를 사용하나요?</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
|
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-container" class="hidden text-center fade-in">
|
|
<div class="mb-6 flex justify-center">
|
|
<div id="result-icon" class="text-6xl"></div>
|
|
</div>
|
|
<h4 id="result-title" class="text-3xl font-bold mb-4 text-stone-900"></h4>
|
|
<p id="result-desc" class="text-lg text-stone-600 mb-8 max-w-2xl mx-auto"></p>
|
|
<button onclick="resetQuiz()" class="px-6 py-2 bg-stone-200 text-stone-700 rounded-lg hover:bg-stone-300 transition text-sm font-semibold">다시 하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="text-center text-stone-400 py-10 border-t border-stone-200">
|
|
<p class="text-sm">Source Data based on general market analysis of Atlassian Confluence vs Notion (2024).</p>
|
|
</footer>
|
|
</main>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
const state = {
|
|
users: 10,
|
|
currentTab: 'doc',
|
|
quizScore: 0
|
|
};
|
|
|
|
const featureData = {
|
|
doc: {
|
|
confluence: {
|
|
title: "Confluence: 구조적 문서화",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" /></svg>',
|
|
points: [
|
|
"계층형 페이지 트리 구조 (Space > Parent > Child)",
|
|
"강력한 버전 관리 및 변경 이력 추적",
|
|
"엄격한 권한 관리 (페이지/스페이스 단위)",
|
|
"공식적인 사내 규정, 매뉴얼 관리에 최적"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 유연한 캔버스",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008z" /></svg>',
|
|
points: [
|
|
"무한히 중첩 가능한 페이지 구조",
|
|
"드래그 앤 드롭 블록 시스템",
|
|
"실시간 협업에 강하지만 버전 관리는 상대적으로 약함",
|
|
"브레인스토밍, 아이디어 노트, 개인 위키에 최적"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
pm: {
|
|
confluence: {
|
|
title: "Confluence: JIRA 보조",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /></svg>',
|
|
points: [
|
|
"독자적인 PM 기능보다는 JIRA 데이터 시각화에 집중",
|
|
"JIRA 로드맵, 이슈 리스트 매크로 활용",
|
|
"스프린트 회고 및 요구사항 정의서 템플릿 강점",
|
|
"복잡한 프로젝트의 '문서적' 관리에 적합"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 경량형 PM 도구",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" /></svg>',
|
|
points: [
|
|
"데이터베이스를 활용한 칸반 보드, 간트 차트 내장",
|
|
"별도 도구 없이 하나의 페이지에서 기획+일정 관리 가능",
|
|
"필터와 보기를 통해 다양한 관점 제공",
|
|
"Agile 프로세스가 엄격하지 않은 팀에 적합"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
dev: {
|
|
confluence: {
|
|
title: "Confluence: 개발 생태계",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>',
|
|
points: [
|
|
"JIRA 이슈 양방향 동기화 (가장 강력한 차별점)",
|
|
"코드 스니펫 매크로 제공",
|
|
"DevOps 파이프라인 상태 표시 가능",
|
|
"수천 개의 서드파티 앱 마켓플레이스"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: API & 임베드",
|
|
icon: '<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" /></svg>',
|
|
points: [
|
|
"GitHub, Slack, Figma 등의 링크 미리보기 지원",
|
|
"Notion API를 활용한 커스텀 자동화 가능",
|
|
"Syncd Blocks로 여러 페이지 내용 동시 업데이트",
|
|
"JIRA 연동이 가능하나 Confluence만큼 깊지 않음"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
}
|
|
};
|
|
|
|
const quizQuestions = [
|
|
{ q: "1. 팀이 JIRA를 핵심 프로젝트 관리 도구로 사용합니까?", yesScore: 10, noScore: -5 },
|
|
{ q: "2. 문서의 양식이 엄격하게 정해져 있고, 결재/승인 프로세스가 중요한가요?", yesScore: 5, noScore: -5 },
|
|
{ q: "3. 팀원들이 자유롭게 페이지를 꾸미고 구조를 변경하는 것을 선호하나요?", yesScore: -10, noScore: 5 }
|
|
];
|
|
|
|
let pricingChart;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initCharts();
|
|
updateFeatureView('doc');
|
|
updatePrice();
|
|
});
|
|
|
|
function initCharts() {
|
|
// Trend Chart
|
|
const ctxTrend = document.getElementById('trendChart').getContext('2d');
|
|
new Chart(ctxTrend, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2020', '2021', '2022', '2023', '2024'],
|
|
datasets: [
|
|
{
|
|
label: 'Notion',
|
|
data: [30, 55, 75, 85, 95],
|
|
borderColor: '#333333',
|
|
backgroundColor: 'rgba(51, 51, 51, 0.1)',
|
|
tension: 0.4,
|
|
fill: true
|
|
},
|
|
{
|
|
label: 'Confluence',
|
|
data: [70, 72, 71, 73, 74],
|
|
borderColor: '#0052CC',
|
|
borderDash: [5, 5],
|
|
tension: 0.4,
|
|
fill: false
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { position: 'bottom' } },
|
|
scales: { y: { display: false } }
|
|
}
|
|
});
|
|
|
|
// Radar Chart
|
|
const ctxRadar = document.getElementById('radarChart').getContext('2d');
|
|
new Chart(ctxRadar, {
|
|
type: 'radar',
|
|
data: {
|
|
labels: ['유연성', '구조화', 'JIRA 통합', '학습 곡선', '디자인/UI'],
|
|
datasets: [
|
|
{
|
|
label: 'Notion',
|
|
data: [95, 40, 50, 85, 95],
|
|
backgroundColor: 'rgba(51, 51, 51, 0.2)',
|
|
borderColor: '#333333',
|
|
pointBackgroundColor: '#333333'
|
|
},
|
|
{
|
|
label: 'Confluence',
|
|
data: [40, 95, 100, 50, 60],
|
|
backgroundColor: 'rgba(0, 82, 204, 0.2)',
|
|
borderColor: '#0052CC',
|
|
pointBackgroundColor: '#0052CC'
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: { r: { suggestedMin: 0, suggestedMax: 100 } },
|
|
plugins: { legend: { position: 'bottom' } }
|
|
}
|
|
});
|
|
|
|
// Pricing Chart
|
|
const ctxPrice = document.getElementById('pricingChart').getContext('2d');
|
|
pricingChart = new Chart(ctxPrice, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Confluence', 'Notion'],
|
|
datasets: [{
|
|
label: '월간 예상 비용 (USD)',
|
|
data: [0, 0],
|
|
backgroundColor: ['#0052CC', '#333333'],
|
|
borderRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: { y: { beginAtZero: true, title: { display: true, text: 'USD ($)' } } },
|
|
plugins: { legend: { display: false } }
|
|
}
|
|
});
|
|
}
|
|
|
|
function updateFeatureView(type) {
|
|
state.currentTab = type;
|
|
|
|
['doc', 'pm', 'dev'].forEach(t => {
|
|
const btn = document.getElementById(`btn-${t}`);
|
|
btn.className = t === type
|
|
? "tab-btn tab-active pb-3 px-1 transition whitespace-nowrap text-lg"
|
|
: "tab-btn tab-inactive pb-3 px-1 transition whitespace-nowrap text-lg";
|
|
});
|
|
|
|
const data = featureData[type];
|
|
const contentDiv = document.getElementById('feature-content');
|
|
|
|
contentDiv.innerHTML = `
|
|
<div class="rounded-2xl p-6 border-2 bg-blue-50 border-blue-100 fade-in transform transition hover:-translate-y-1 duration-300">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="text-3xl">${data.confluence.icon}</span>
|
|
<h4 class="text-xl font-bold text-blue-900">${data.confluence.title}</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
${data.confluence.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-blue-500 mt-1">✔</span> ${p}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
<div class="rounded-2xl p-6 border-2 bg-stone-100 border-stone-200 fade-in transform transition hover:-translate-y-1 duration-300">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="text-3xl">${data.notion.icon}</span>
|
|
<h4 class="text-xl font-bold text-stone-900">${data.notion.title}</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
${data.notion.points.map(p => `<li class="flex items-start gap-2 text-stone-700"><span class="text-stone-900 mt-1">✔</span> ${p}</li>`).join('')}
|
|
</ul>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
const userRange = document.getElementById('userRange');
|
|
userRange.addEventListener('input', (e) => {
|
|
state.users = parseInt(e.target.value);
|
|
updatePrice();
|
|
});
|
|
|
|
function updatePrice() {
|
|
const users = state.users;
|
|
document.getElementById('userCountDisplay').innerText = users;
|
|
|
|
let confCost = users <= 10 ? 0 : users * 6.05;
|
|
let notionCost = users === 1 ? 0 : users * 8;
|
|
|
|
document.getElementById('confPrice').innerText = `$${confCost.toFixed(2)}`;
|
|
document.getElementById('notionPrice').innerText = `$${notionCost.toFixed(2)}`;
|
|
|
|
pricingChart.data.datasets[0].data = [confCost, notionCost];
|
|
pricingChart.update();
|
|
}
|
|
|
|
function handleQuiz(step, answerYes) {
|
|
if (step === 1) {
|
|
state.quizScore += answerYes ? 10 : -5;
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[1].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(2, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예</button>
|
|
<button onclick="handleQuiz(2, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (step === 2) {
|
|
state.quizScore += answerYes ? 5 : -5;
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[2].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(3, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">선호함</button>
|
|
<button onclick="handleQuiz(3, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">선호하지 않음</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (step === 3) {
|
|
state.quizScore += answerYes ? -10 : 5;
|
|
showResult();
|
|
}
|
|
}
|
|
|
|
function showResult() {
|
|
document.getElementById('quiz-container').classList.add('hidden');
|
|
const resultDiv = document.getElementById('result-container');
|
|
resultDiv.classList.remove('hidden');
|
|
|
|
const title = document.getElementById('result-title');
|
|
const desc = document.getElementById('result-desc');
|
|
const icon = document.getElementById('result-icon');
|
|
|
|
if (state.quizScore > 0) {
|
|
icon.innerHTML = `<span class="bg-blue-600 text-white rounded-2xl px-4 py-2 text-4xl">Confluence</span>`;
|
|
title.innerText = "추천: Atlassian Confluence";
|
|
title.className = "text-3xl font-bold mb-4 text-blue-700";
|
|
desc.innerHTML = `귀하의 팀은 <strong>체계적인 구조, JIRA와의 긴밀한 통합</strong>이 중요해 보입니다. Confluence가 더 적합합니다.`;
|
|
} else {
|
|
icon.innerHTML = `<span class="bg-stone-900 text-white rounded-2xl px-4 py-2 text-4xl">Notion</span>`;
|
|
title.innerText = "추천: Notion";
|
|
title.className = "text-3xl font-bold mb-4 text-stone-900";
|
|
desc.innerHTML = `귀하의 팀은 <strong>유연성, 빠른 속도, 올인원 워크스페이스</strong>를 필요로 합니다. Notion이 더 적합합니다.`;
|
|
}
|
|
}
|
|
|
|
function resetQuiz() {
|
|
state.quizScore = 0;
|
|
document.getElementById('result-container').classList.add('hidden');
|
|
document.getElementById('quiz-container').classList.remove('hidden');
|
|
document.getElementById('quiz-container').innerHTML = `
|
|
<div class="space-y-4 fade-in">
|
|
<p class="font-semibold text-lg text-stone-800">${quizQuestions[0].q}</p>
|
|
<div class="flex gap-4">
|
|
<button onclick="handleQuiz(1, true)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition font-medium">예 (Yes)</button>
|
|
<button onclick="handleQuiz(1, false)" class="flex-1 py-3 border-2 border-stone-200 rounded-xl hover:border-stone-500 hover:bg-stone-50 transition font-medium">아니오 (No)</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
</script>
|
|
@endpush |