227cb79d16
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
340 lines
20 KiB
PHP
340 lines
20 KiB
PHP
<?php
|
|
// session.php가 상위 폴더에 있을 것으로 예상됨 (sales/index.php 참고)
|
|
if (file_exists('../session.php')) {
|
|
require_once '../session.php';
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>수당 계산기 | SAM</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Noto Sans KR', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
900: '#0c4a6e',
|
|
}
|
|
},
|
|
animation: {
|
|
blob: "blob 7s infinite",
|
|
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
|
|
},
|
|
keyframes: {
|
|
blob: {
|
|
"0%": { transform: "translate(0px, 0px) scale(1)" },
|
|
"33%": { transform: "translate(30px, -50px) scale(1.1)" },
|
|
"66%": { transform: "translate(-20px, 20px) scale(0.9)" },
|
|
"100%": { transform: "translate(0px, 0px) scale(1)" },
|
|
},
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.delay-100 { animation-delay: 100ms; }
|
|
.delay-200 { animation-delay: 200ms; }
|
|
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900 overflow-x-hidden">
|
|
|
|
<!-- Navigation (Simplified version of sales/index.php) -->
|
|
<nav class="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-slate-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
<div class="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-brand-200">S</div>
|
|
<span class="text-xl font-bold tracking-tight text-slate-900">CodeBridgeX <span class="text-brand-600">SAM</span></span>
|
|
</a>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="../salesmanagement/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">영업관리</a>
|
|
<a href="수당지급체계.md" class="px-4 py-2 bg-slate-100 text-slate-600 text-xs font-bold rounded-lg hover:bg-slate-200 transition-colors border border-slate-200">체계 문서 보기</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header Section -->
|
|
<header class="relative bg-white pt-12 pb-16 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold uppercase tracking-wider mb-4 animate-fade-in-up">
|
|
<i data-lucide="calculator" class="w-4 h-4"></i>
|
|
Commission Calculator
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4 animate-fade-in-up delay-100">
|
|
수당 및 가격 <span class="text-brand-600">동적 계산기</span>
|
|
</h1>
|
|
<p class="text-slate-500 max-w-2xl mx-auto animate-fade-in-up delay-200">
|
|
개정된 수당 지급 체계에 따라 상품을 선택하시면 실시간으로 가입비, 구독료 및 영업 수당을 계산해 드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Background Decorations -->
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
|
|
<div class="absolute top-0 left-10 w-64 h-64 bg-brand-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
|
<div class="absolute top-0 right-10 w-64 h-64 bg-indigo-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Left: Options Column -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<section class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden animate-fade-in-up delay-100">
|
|
<div class="p-6 border-b border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center text-brand-600">
|
|
<i data-lucide="package" class="w-6 h-6"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-slate-900">상품 패키지 선택</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<!-- Package Item 1 -->
|
|
<label class="group relative flex items-start p-4 bg-slate-50 hover:bg-brand-50/50 rounded-xl border border-slate-100 hover:border-brand-200 transition-all cursor-pointer">
|
|
<div class="flex items-center h-5">
|
|
<input id="item-basic" type="checkbox" checked disabled class="h-5 w-5 text-brand-600 focus:ring-brand-500 border-slate-300 rounded cursor-not-allowed">
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<span class="block text-base font-bold text-slate-900">제조업 기본 패키지</span>
|
|
<span class="text-brand-600 font-bold">2,000만원</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 mt-1">품목관리, 견적, 수주, 생산, 출하 (**ERP(인사/회계) 무료 포함**)</p>
|
|
<div class="mt-2 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Package Item 2 -->
|
|
<label class="group relative flex items-start p-4 hover:bg-brand-50/50 rounded-xl border border-slate-100 hover:border-brand-200 transition-all cursor-pointer bg-white">
|
|
<div class="flex items-center h-5">
|
|
<input id="item-quality" type="checkbox" onchange="calculate()" class="h-5 w-5 text-brand-600 focus:ring-brand-500 border-slate-300 rounded transition-all">
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<span class="block text-base font-bold text-slate-900 group-hover:text-brand-700 transition-colors">품질관리(인정검사)</span>
|
|
<span class="text-brand-600 font-bold">2,000만원</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 mt-1">강화된 공정 검사 및 품질 데이터 분석 도구</p>
|
|
<div class="mt-2 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden animate-fade-in-up delay-200">
|
|
<div class="p-6 border-b border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
|
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-slate-900">추가 옵션</h2>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Option 1: 생산공정 추가 (수량 입력형) -->
|
|
<div class="group flex flex-col p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all">
|
|
<div class="flex items-start cursor-pointer" onclick="document.getElementById('item-line').click()">
|
|
<input type="checkbox" id="item-line" onchange="calculate()" data-join="5000000" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all" onclick="event.stopPropagation()">
|
|
<div class="ml-3 flex-1">
|
|
<span class="block text-sm font-bold text-slate-800">생산공정 추가</span>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">1개당 가입: 500만원 / 월: 10만원</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-3 pl-8">
|
|
<span class="text-xs text-slate-500 font-medium">추가 수량:</span>
|
|
<div class="flex items-center">
|
|
<button onclick="changeQty(-1)" class="w-8 h-8 rounded-l-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">-</button>
|
|
<input type="number" id="line-qty" value="1" min="1" onchange="calculate()" class="w-12 h-8 border-y border-slate-200 text-center text-sm font-bold focus:outline-none focus:ring-0">
|
|
<button onclick="changeQty(1)" class="w-8 h-8 rounded-r-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">+</button>
|
|
</div>
|
|
<span class="text-xs text-slate-400">개</span>
|
|
</div>
|
|
</div>
|
|
<!-- Option 2 -->
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-photo" onchange="calculate()" data-join="0" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<span class="block text-sm font-bold text-slate-800">사진 등록 기능</span>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 10만원</span>
|
|
</div>
|
|
</label>
|
|
<!-- Option 3 -->
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-chatbot" onchange="calculate()" data-join="0" data-monthly="200000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<span class="block text-sm font-bold text-slate-800">챗봇/녹음/업무일지</span>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 20만원</span>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right: Summary Dashboard Column -->
|
|
<div class="lg:col-span-1">
|
|
<div class="sticky top-24 space-y-6">
|
|
<!-- Summary Card -->
|
|
<section class="bg-slate-900 rounded-3xl p-8 text-white shadow-2xl shadow-slate-200 relative overflow-hidden animate-fade-in-up">
|
|
<!-- Decorative background light -->
|
|
<div class="absolute -top-10 -right-10 w-40 h-40 bg-brand-500/20 rounded-full blur-3xl"></div>
|
|
|
|
<h2 class="text-xl font-bold mb-8 flex items-center justify-between">
|
|
최종 견적 요약
|
|
<i data-lucide="pie-chart" class="w-5 h-5 text-brand-400"></i>
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Totals Table -->
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center text-slate-400 text-sm">
|
|
<span>총 가입비 (Join Fee)</span>
|
|
<span id="display-total-join" class="text-white font-bold text-lg">2,000만원</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-slate-400 text-sm">
|
|
<span>총 월 구독료 (Monthly)</span>
|
|
<span id="display-total-monthly" class="text-white font-bold text-lg">50만원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-slate-800">
|
|
|
|
<!-- Commission Section -->
|
|
<div class="space-y-4">
|
|
<div class="p-4 bg-brand-600/10 rounded-2xl border border-brand-500/20">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-brand-400 text-xs font-bold uppercase tracking-widest">판매자 수당 (20%)</span>
|
|
<span id="display-seller-commission" class="text-brand-500 font-extrabold text-xl">400만원</span>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500">계약 성사 시 직접 수령 수당</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-800/50 rounded-2xl border border-slate-700/50">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-slate-400 text-xs font-bold uppercase tracking-widest">관리자 수당 (5%)</span>
|
|
<span id="display-manager-commission" class="text-slate-300 font-bold text-lg">100만원</span>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500">직속 상위 관리자 지급 수당</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="window.print()" class="w-full py-4 bg-white text-slate-900 rounded-xl font-bold hover:bg-slate-100 transition-colors shadow-lg flex items-center justify-center gap-2 mt-4">
|
|
<i data-lucide="download" class="w-5 h-5"></i>
|
|
견적서 다운로드
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Info Box -->
|
|
<div class="p-6 bg-white rounded-2xl border border-slate-200 shadow-sm animate-fade-in-up delay-100">
|
|
<h4 class="text-sm font-bold text-slate-900 mb-3 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 text-brand-600"></i>
|
|
가격 정책 안내
|
|
</h4>
|
|
<ul class="text-xs text-slate-500 space-y-2 leading-relaxed">
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 수당은 입금된 가입비 총액을 기준으로 계산됩니다.</li>
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 월 구독료는 플랫폼 인프라 비용으로 수당 제외 대상입니다.</li>
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 부가세(VAT)는 별도입니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
calculate();
|
|
});
|
|
|
|
function calculate() {
|
|
// 원단위 기본값
|
|
let totalJoin = 20000000; // 제조업 기본 패키지 20M
|
|
let totalMonthly = 500000; // 제조업 기본 패키지 500k
|
|
|
|
// 품질관리(인정검사) 체크 확인
|
|
if (document.getElementById('item-quality').checked) {
|
|
totalJoin += 20000000;
|
|
totalMonthly += 500000;
|
|
}
|
|
|
|
// 생산공정 체크 확인 (수량 반영)
|
|
const itemLine = document.getElementById('item-line');
|
|
if (itemLine.checked) {
|
|
const qty = parseInt(document.getElementById('line-qty').value || 1);
|
|
totalJoin += parseInt(itemLine.dataset.join || 0) * qty;
|
|
totalMonthly += parseInt(itemLine.dataset.monthly || 0) * qty;
|
|
}
|
|
|
|
// 나머지 추가 옵션들
|
|
const otherOptions = ['item-photo', 'item-chatbot'];
|
|
otherOptions.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el.checked) {
|
|
totalJoin += parseInt(el.dataset.join || 0);
|
|
totalMonthly += parseInt(el.dataset.monthly || 0);
|
|
}
|
|
});
|
|
|
|
// 수당 계산
|
|
const sellerCommission = totalJoin * 0.20;
|
|
const managerCommission = totalJoin * 0.05;
|
|
|
|
// 표시 업데이트
|
|
document.getElementById('display-total-join').innerText = formatKRW(totalJoin);
|
|
document.getElementById('display-total-monthly').innerText = formatKRW(totalMonthly);
|
|
document.getElementById('display-seller-commission').innerText = formatKRW(sellerCommission);
|
|
document.getElementById('display-manager-commission').innerText = formatKRW(managerCommission);
|
|
|
|
// 숫자 강조 효과
|
|
const outputs = ['display-total-join', 'display-total-monthly', 'display-seller-commission', 'display-manager-commission'];
|
|
outputs.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
el.classList.add('scale-105', 'text-brand-400');
|
|
setTimeout(() => el.classList.remove('scale-105', 'text-brand-400'), 200);
|
|
});
|
|
}
|
|
|
|
function changeQty(delta) {
|
|
const el = document.getElementById('line-qty');
|
|
let val = parseInt(el.value || 1) + delta;
|
|
if (val < 1) val = 1;
|
|
el.value = val;
|
|
calculate();
|
|
}
|
|
|
|
function formatKRW(num) {
|
|
if (num === 0) return "0원";
|
|
const man = num / 10000;
|
|
if (man >= 10000) {
|
|
const eok = Math.floor(man / 10000);
|
|
const restMan = man % 10000;
|
|
return eok + "억" + (restMan > 0 ? " " + restMan.toLocaleString() + "만원" : "원");
|
|
}
|
|
return man.toLocaleString() + "만원";
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|