SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a5ac30fd4827956491805f194069467ea22ee946
sam-sales/price/index.php
김보곤 a5ac30fd48 feat:SAM 솔루션 상품 선택 페이지 전면 개편 
- 새로운 가격 정책 반영
- 제조업체/공사업체 탭 구조 추가
- 상품 목록 업데이트:
  * 기본 패키지 (필수) - ₩20,000,000
  * 품질관리 - ₩20,000,000
  * 생산 공정 추가 - ₩5,000,000
  * SAM 봇/AI기능 - ₩5,000,000
  * 사진등록기능 - ₩2,500,000
  * 계산서+카드 관리 - ₩2,500,000
  * 설비 관리(QR) - ₩2,500,000
- 예상 수당 명세서 UI 개선

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 18:26:14 +09:00

404 lines
25 KiB
PHP
Raw Blame History

<?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">
<!-- Product 1: 기본 패키지 (필수) -->
<div class="product-card product-selected p-5 rounded-xl border-2 border-blue-300 bg-blue-50/50 cursor-pointer" onclick="toggleProduct(this, 'basic', true)">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-basic" checked disabled class="w-5 h-5 text-blue-600 border-slate-300 rounded">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">기본 / PC + 모바일 사용 겸용</span>
<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">일정관리+근태+재고+견적+발주+생산공정 1개+출고+회계+신용조회+대표자 화면 (보고서+전자결재 음성알림)</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩80,000,000</span> <span class="price-current">₩20,000,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩500,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 2: 품질관리 -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'quality')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-quality" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">품질관리</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">로트관리 + 사진등록기능 + 설비 관리(QR)</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩80,000,000</span> <span class="price-current">₩20,000,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩500,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 3: 생산 공정 추가 -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'process')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-process" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">생산 공정 1개 추가시</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">별도의 작업지시서</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩20,000,000</span> <span class="price-current">₩5,000,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩100,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 4: SAM 봇 / AI기능 -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'ai')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-ai" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">SAM 봇 / AI기능</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">음성녹음-->텍스트 변환 (회의록+업무일지) + 프로그램 내 검색 기능</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩20,000,000</span> <span class="price-current">₩5,000,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩100,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 5: 사진등록기능 -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'photo')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-photo" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">사진등록기능</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">현장 또는 원하는 포인트에 촬영 --> 프로그램에 바로 등록 (맞춤형)</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩10,000,000</span> <span class="price-current">₩2,500,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩100,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 6: 계산서 + 카드 관리 -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'invoice')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-invoice" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">계산서 + 카드 관리</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">계산서 발행 (월 100건 기준 / 초과시 추가 5만원) + 법인카드 (접대비+복리후생비+가지급금 관리)</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩10,000,000</span> <span class="price-current">₩2,500,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩100,000</span></span>
</div>
</div>
</div>
</div>
<!-- Product 7: 설비 관리 (QR) -->
<div class="product-card p-5 rounded-xl border-2 border-slate-200 bg-white cursor-pointer hover:border-blue-200" onclick="toggleProduct(this, 'equipment')">
<div class="flex items-start gap-4">
<div class="flex items-center h-6 mt-0.5">
<input type="checkbox" id="prod-equipment" class="w-5 h-5 text-blue-600 border-slate-300 rounded pointer-events-none">
</div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="font-bold text-slate-900">설비 관리 (QR)</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">관리 프로그램</p>
<div class="flex items-center gap-4 text-sm">
<span class="text-slate-500">가입비: <span class="price-original">₩10,000,000</span> <span class="price-current">₩2,500,000</span></span>
<span class="text-slate-500">월 구독료: <span class="font-semibold text-slate-900">₩50,000</span></span>
</div>
</div>
</div>
</div>
</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 products = {
basic: { joinFee: 20000000, monthlyFee: 500000, required: true },
quality: { joinFee: 20000000, monthlyFee: 500000, required: false },
process: { joinFee: 5000000, monthlyFee: 100000, required: false },
ai: { joinFee: 5000000, monthlyFee: 100000, required: false },
photo: { joinFee: 2500000, monthlyFee: 100000, required: false },
invoice: { joinFee: 2500000, monthlyFee: 100000, required: false },
equipment: { joinFee: 2500000, monthlyFee: 50000, required: false }
};
// 선택된 상품
let selectedProducts = ['basic']; // 기본 패키지는 필수
document.addEventListener('DOMContentLoaded', () => {
lucide.createIcons();
calculate();
});
function switchTab(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';
}
// 향후 탭별 다른 상품 표시 가능
}
function toggleProduct(card, productId, isRequired = false) {
if (isRequired) return; // 필수 상품은 토글 불가
const checkbox = card.querySelector('input[type="checkbox"]');
const isSelected = selectedProducts.includes(productId);
if (isSelected) {
selectedProducts = selectedProducts.filter(p => p !== productId);
checkbox.checked = false;
card.classList.remove('product-selected');
card.classList.remove('border-blue-300', 'bg-blue-50/50');
card.classList.add('border-slate-200', 'bg-white');
} else {
selectedProducts.push(productId);
checkbox.checked = true;
card.classList.add('product-selected');
card.classList.add('border-blue-300', 'bg-blue-50/50');
card.classList.remove('border-slate-200', 'bg-white');
}
calculate();
}
function calculate() {
let totalJoinFee = 0;
let totalMonthlyFee = 0;
selectedProducts.forEach(productId => {
const product = products[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>
Reference in New Issue View Git Blame Copy Permalink