kent
b200947ebc
- StrategyController 생성 (15개 메소드) - presentation.blade.php 레이아웃 추가 - 전략 문서 템플릿 15개 생성: - tax, labor, debt, chatbot (슬라이드 프레젠테이션) - rag-startups, douzone (Chart.js 통합) - confluence-vs-notion (비교 분석 + 퀴즈) - sales-strategy (8 슬라이드 + 채팅 UI) - kodata-vs-nice, barobill-vs-popbill (API 비교) - knowledge-search, chatbot-compare (탭 기반) - stablecoin, mrp-overseas, qa-solution (placeholder) - 라우트 및 사이드바 메뉴 연결 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
520 lines
24 KiB
PHP
520 lines
24 KiB
PHP
@extends('layouts.presentation')
|
|
|
|
@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: "📚",
|
|
points: [
|
|
"계층형 페이지 트리 구조 (Space > Parent > Child)",
|
|
"강력한 버전 관리 및 변경 이력 추적",
|
|
"엄격한 권한 관리 (페이지/스페이스 단위)",
|
|
"공식적인 사내 규정, 매뉴얼 관리에 최적"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 유연한 캔버스",
|
|
icon: "🎨",
|
|
points: [
|
|
"무한히 중첩 가능한 페이지 구조",
|
|
"드래그 앤 드롭 블록 시스템",
|
|
"실시간 협업에 강하지만 버전 관리는 상대적으로 약함",
|
|
"브레인스토밍, 아이디어 노트, 개인 위키에 최적"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
pm: {
|
|
confluence: {
|
|
title: "Confluence: JIRA 보조",
|
|
icon: "🤝",
|
|
points: [
|
|
"독자적인 PM 기능보다는 JIRA 데이터 시각화에 집중",
|
|
"JIRA 로드맵, 이슈 리스트 매크로 활용",
|
|
"스프린트 회고 및 요구사항 정의서 템플릿 강점",
|
|
"복잡한 프로젝트의 '문서적' 관리에 적합"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: 경량형 PM 도구",
|
|
icon: "📅",
|
|
points: [
|
|
"데이터베이스를 활용한 칸반 보드, 간트 차트 내장",
|
|
"별도 도구 없이 하나의 페이지에서 기획+일정 관리 가능",
|
|
"필터와 보기를 통해 다양한 관점 제공",
|
|
"Agile 프로세스가 엄격하지 않은 팀에 적합"
|
|
],
|
|
color: "bg-stone-100 border-stone-200 text-stone-900"
|
|
}
|
|
},
|
|
dev: {
|
|
confluence: {
|
|
title: "Confluence: 개발 생태계",
|
|
icon: "⚙️",
|
|
points: [
|
|
"JIRA 이슈 양방향 동기화 (가장 강력한 차별점)",
|
|
"코드 스니펫 매크로 제공",
|
|
"DevOps 파이프라인 상태 표시 가능",
|
|
"수천 개의 서드파티 앱 마켓플레이스"
|
|
],
|
|
color: "bg-blue-50 border-blue-200 text-blue-900"
|
|
},
|
|
notion: {
|
|
title: "Notion: API & 임베드",
|
|
icon: "🔌",
|
|
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 |