657282e080
- 제조업체/공사업체별 별도 상품 데이터 정의 - 탭 전환 시 해당 업종의 상품 목록 렌더링 - 탭별 선택 상태 독립적 유지 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
417 lines
20 KiB
PHP
417 lines
20 KiB
PHP
<?php
|
|
// session.php가 상위 폴더에 있을 것으로 예상됨 (sales/index.php 참고)
|
|
if (file_exists('../session.php')) {
|
|
require_once '../session.php';
|
|
}
|
|
|
|
// 환경에 따른 MNG URL 설정
|
|
$currentHost = $_SERVER['HTTP_HOST'] ?? '';
|
|
$mngUrl = (strpos($currentHost, 'sam.kr') !== false)
|
|
? 'https://mng.sam.kr'
|
|
: 'https://mng.codebridge-x.com';
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SAM 솔루션 상품 선택 | 가격 정책</title>
|
|
|
|
<?php require_once __DIR__ . '/../lib/meta_common.php'; ?>
|
|
<style>
|
|
.tab-active { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: white; }
|
|
.tab-inactive { background: #f1f5f9; color: #64748b; }
|
|
.product-card { transition: all 0.2s ease; }
|
|
.product-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1); }
|
|
.product-selected { border-color: #3b82f6 !important; background: #eff6ff !important; }
|
|
.badge-required { background: #fee2e2; color: #dc2626; }
|
|
.badge-flexible { background: #dcfce7; color: #16a34a; }
|
|
.price-original { text-decoration: line-through; color: #94a3b8; }
|
|
.price-current { color: #2563eb; font-weight: 700; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900 font-sans">
|
|
|
|
<!-- Navigation -->
|
|
<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-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-200">S</div>
|
|
<span class="text-xl font-bold tracking-tight text-slate-900">CodeBridgeX <span class="text-blue-600">SAM</span></span>
|
|
</a>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="<?= $mngUrl ?>" target="_blank" class="text-sm font-medium text-slate-600 hover:text-blue-600 transition-colors">영업관리</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header -->
|
|
<header class="bg-gradient-to-br from-blue-600 to-indigo-700 text-white py-12">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/20 text-white/90 text-xs font-semibold uppercase tracking-wider mb-4">
|
|
<i data-lucide="package" class="w-4 h-4"></i>
|
|
SAM Solution Products
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold tracking-tight mb-4">
|
|
SAM 솔루션 상품 선택
|
|
</h1>
|
|
<p class="text-blue-100 max-w-2xl mx-auto">
|
|
고객사에 제공할 솔루션 패키지를 선택하세요
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Left: Product Selection -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
<!-- Business Type Tabs -->
|
|
<div class="bg-white rounded-2xl p-2 shadow-sm border border-slate-200">
|
|
<div class="flex gap-2">
|
|
<button id="tab-manufacturing" onclick="switchTab('manufacturing')" class="tab-active flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all">
|
|
제조 업체
|
|
</button>
|
|
<button id="tab-construction" onclick="switchTab('construction')" class="tab-inactive flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all">
|
|
공사 업체
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Products List -->
|
|
<section class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div class="p-6 border-b border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
|
|
<i data-lucide="box" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-900">SAM 솔루션 상품 선택</h2>
|
|
<p class="text-sm text-slate-500">고객사에 제공할 솔루션 패키지를 선택하세요</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-4" id="products-container">
|
|
<!-- 상품이 JavaScript로 동적 렌더링됩니다 -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right: Summary -->
|
|
<div class="lg:col-span-1">
|
|
<div class="sticky top-24 space-y-6">
|
|
|
|
<!-- Summary Card -->
|
|
<section class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl p-6 text-white shadow-2xl">
|
|
<h2 class="text-lg font-bold mb-6 flex items-center gap-2">
|
|
<i data-lucide="receipt" class="w-5 h-5 text-blue-400"></i>
|
|
예상 수당 명세서
|
|
</h2>
|
|
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-700">
|
|
<span class="text-slate-400">총 가입비</span>
|
|
<span id="display-total-join" class="text-xl font-bold">₩0</span>
|
|
</div>
|
|
|
|
<div class="p-4 bg-blue-600/20 rounded-xl border border-blue-500/30">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-blue-300 text-sm flex items-center gap-1">
|
|
<span class="w-2 h-2 rounded-full bg-blue-400"></span>
|
|
판매자 수당 (20%)
|
|
</span>
|
|
<span id="display-seller-commission" class="text-blue-400 font-bold text-lg">₩0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-3 border-b border-slate-700">
|
|
<span class="text-slate-400">메뉴제작 협업수당</span>
|
|
<span class="text-slate-300 font-medium">운영팀 별도 산정</span>
|
|
</div>
|
|
|
|
<hr class="border-slate-700">
|
|
|
|
<div class="pt-4">
|
|
<div class="flex justify-between items-end">
|
|
<div>
|
|
<span class="text-slate-400 text-sm">총 예상 수당</span>
|
|
<p class="text-[10px] text-slate-500 mt-1">* 세전 금액 기준입니다.</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<span id="display-total-commission" class="text-2xl font-extrabold text-blue-400">₩0</span>
|
|
<p id="display-commission-rate" class="text-xs text-slate-500 mt-1">총 매출의 0%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Info Box -->
|
|
<div class="p-5 bg-white rounded-2xl border border-slate-200 shadow-sm">
|
|
<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-blue-600"></i>
|
|
수당 계산 안내
|
|
</h4>
|
|
<ul class="text-xs text-slate-500 space-y-2 leading-relaxed">
|
|
<li class="flex gap-2">
|
|
<span class="text-blue-400">•</span>
|
|
<span>판매자 수당은 총 가입비의 <strong>20%</strong>입니다.</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<span class="text-blue-400">•</span>
|
|
<span>메뉴제작 협업수당은 운영팀에서 별도 산정합니다.</span>
|
|
</li>
|
|
<li class="flex gap-2">
|
|
<span class="text-blue-400">•</span>
|
|
<span>월 구독료는 수당 계산에 포함되지 않습니다.</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// 제조업체 상품 데이터
|
|
const manufacturingProducts = [
|
|
{
|
|
id: 'basic',
|
|
name: '기본 / PC + 모바일 사용 겸용',
|
|
description: '일정관리+근태+재고+견적+발주+생산공정 1개+출고+회계+신용조회+대표자 화면 (보고서+전자결재 음성알림)',
|
|
originalJoinFee: 80000000,
|
|
joinFee: 20000000,
|
|
monthlyFee: 500000,
|
|
required: true
|
|
},
|
|
{
|
|
id: 'quality',
|
|
name: '품질관리',
|
|
description: '로트관리 + 사진등록기능 + 설비 관리(QR)',
|
|
originalJoinFee: 80000000,
|
|
joinFee: 20000000,
|
|
monthlyFee: 500000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'process',
|
|
name: '생산 공정 1개 추가시',
|
|
description: '별도의 작업지시서',
|
|
originalJoinFee: 20000000,
|
|
joinFee: 5000000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'ai',
|
|
name: 'SAM 봇 / AI기능',
|
|
description: '음성녹음-->텍스트 변환 (회의록+업무일지) + 프로그램 내 검색 기능',
|
|
originalJoinFee: 20000000,
|
|
joinFee: 5000000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'photo',
|
|
name: '사진등록기능',
|
|
description: '현장 또는 원하는 포인트에 촬영 --> 프로그램에 바로 등록 (맞춤형)',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'invoice',
|
|
name: '계산서 + 카드 관리',
|
|
description: '계산서 발행 (월 100건 기준 / 초과시 추가 5만원) + 법인카드 (접대비+복리후생비+가지급금 관리)',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'equipment',
|
|
name: '설비 관리 (QR)',
|
|
description: '관리 프로그램',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 50000,
|
|
required: false
|
|
}
|
|
];
|
|
|
|
// 공사업체 상품 데이터
|
|
const constructionProducts = [
|
|
{
|
|
id: 'basic',
|
|
name: '기본 / PC + 모바일 사용 겸용',
|
|
description: '일정관리+근태+재고+견적+발주+시공현장 1개+출고+회계+신용조회+대표자 화면 (보고서+전자결재 음성알림)',
|
|
originalJoinFee: 80000000,
|
|
joinFee: 20000000,
|
|
monthlyFee: 500000,
|
|
required: true
|
|
},
|
|
{
|
|
id: 'site',
|
|
name: '시공현장 1개 추가시',
|
|
description: '별도의 공사 진행 관리',
|
|
originalJoinFee: 20000000,
|
|
joinFee: 5000000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'ai',
|
|
name: 'SAM 봇 / AI기능',
|
|
description: '음성녹음-->텍스트 변환 (회의록+업무일지) + 프로그램 내 검색 기능',
|
|
originalJoinFee: 20000000,
|
|
joinFee: 5000000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'photo',
|
|
name: '현장사진관리',
|
|
description: '시공 현장 또는 원하는 포인트에 촬영 --> 프로그램에 바로 등록 (맞춤형)',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'invoice',
|
|
name: '계산서 + 카드 관리',
|
|
description: '계산서 발행 (월 100건 기준 / 초과시 추가 5만원) + 법인카드 (접대비+복리후생비+가지급금 관리)',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 100000,
|
|
required: false
|
|
},
|
|
{
|
|
id: 'equipment',
|
|
name: '장비 관리 (QR)',
|
|
description: '공사 장비 관리 프로그램',
|
|
originalJoinFee: 10000000,
|
|
joinFee: 2500000,
|
|
monthlyFee: 50000,
|
|
required: false
|
|
}
|
|
];
|
|
|
|
// 현재 탭과 선택된 상품
|
|
let currentTab = 'manufacturing';
|
|
let selectedProducts = { manufacturing: ['basic'], construction: ['basic'] };
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
renderProducts();
|
|
calculate();
|
|
});
|
|
|
|
function switchTab(tab) {
|
|
currentTab = tab;
|
|
const tabManufacturing = document.getElementById('tab-manufacturing');
|
|
const tabConstruction = document.getElementById('tab-construction');
|
|
|
|
if (tab === 'manufacturing') {
|
|
tabManufacturing.className = 'tab-active flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all';
|
|
tabConstruction.className = 'tab-inactive flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all';
|
|
} else {
|
|
tabManufacturing.className = 'tab-inactive flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all';
|
|
tabConstruction.className = 'tab-active flex-1 py-3 px-6 rounded-xl font-bold text-sm transition-all';
|
|
}
|
|
|
|
renderProducts();
|
|
calculate();
|
|
}
|
|
|
|
function renderProducts() {
|
|
const container = document.getElementById('products-container');
|
|
const products = currentTab === 'manufacturing' ? manufacturingProducts : constructionProducts;
|
|
const selected = selectedProducts[currentTab];
|
|
|
|
let html = '';
|
|
products.forEach(product => {
|
|
const isSelected = selected.includes(product.id);
|
|
const cardClass = isSelected
|
|
? 'product-card product-selected p-5 rounded-xl border-2 border-blue-300 bg-blue-50/50 cursor-pointer'
|
|
: 'product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200';
|
|
|
|
html += `
|
|
<div class="${cardClass}" onclick="toggleProduct('${product.id}', ${product.required})">
|
|
<div class="flex items-start gap-4">
|
|
<div class="flex items-center h-6 mt-0.5">
|
|
<input type="checkbox" ${isSelected ? 'checked' : ''} ${product.required ? 'disabled' : ''}
|
|
class="w-5 h-5 text-blue-600 border-slate-300 rounded ${product.required ? '' : 'pointer-events-none'}">
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="flex items-center gap-2 mb-2">
|
|
<span class="font-bold text-slate-900">${product.name}</span>
|
|
${product.required ? '<span class="px-2 py-0.5 text-[10px] font-bold rounded badge-required">필수</span>' : ''}
|
|
<span class="px-2 py-0.5 text-[10px] font-bold rounded badge-flexible">재량권</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 mb-3">${product.description}</p>
|
|
<div class="flex items-center gap-4 text-sm">
|
|
<span class="text-slate-500">가입비: <span class="price-original">₩${product.originalJoinFee.toLocaleString()}</span> <span class="price-current">₩${product.joinFee.toLocaleString()}</span></span>
|
|
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩${product.monthlyFee.toLocaleString()}</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
}
|
|
|
|
function toggleProduct(productId, isRequired = false) {
|
|
if (isRequired) return; // 필수 상품은 토글 불가
|
|
|
|
const selected = selectedProducts[currentTab];
|
|
const isSelected = selected.includes(productId);
|
|
|
|
if (isSelected) {
|
|
selectedProducts[currentTab] = selected.filter(p => p !== productId);
|
|
} else {
|
|
selectedProducts[currentTab].push(productId);
|
|
}
|
|
|
|
renderProducts();
|
|
calculate();
|
|
}
|
|
|
|
function calculate() {
|
|
const products = currentTab === 'manufacturing' ? manufacturingProducts : constructionProducts;
|
|
const selected = selectedProducts[currentTab];
|
|
|
|
let totalJoinFee = 0;
|
|
let totalMonthlyFee = 0;
|
|
|
|
selected.forEach(productId => {
|
|
const product = products.find(p => p.id === productId);
|
|
if (product) {
|
|
totalJoinFee += product.joinFee;
|
|
totalMonthlyFee += product.monthlyFee;
|
|
}
|
|
});
|
|
|
|
const sellerCommission = totalJoinFee * 0.20; // 20%
|
|
const commissionRate = totalJoinFee > 0 ? ((sellerCommission / totalJoinFee) * 100).toFixed(0) : 0;
|
|
|
|
document.getElementById('display-total-join').innerText = formatCurrency(totalJoinFee);
|
|
document.getElementById('display-seller-commission').innerText = formatCurrency(sellerCommission);
|
|
document.getElementById('display-total-commission').innerText = formatCurrency(sellerCommission);
|
|
document.getElementById('display-commission-rate').innerText = `총 매출의 ${commissionRate}%`;
|
|
}
|
|
|
|
function formatCurrency(num) {
|
|
return '₩' + num.toLocaleString('ko-KR');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|