SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:공사업체 탭 전환 시 상품 목록 동적 렌더링

Browse Source 
- 제조업체/공사업체별 별도 상품 데이터 정의
- 탭 전환 시 해당 업종의 상품 목록 렌더링
- 탭별 선택 상태 독립적 유지

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
김보곤
2026-01-31 18:36:42 +09:00
parent a5ac30fd48
commit 657282e080
1 changed files with 183 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
price/index.php
View File

@@ -96,148 +96,7 @@ $mngUrl = (strpos($currentHost, 'sam.kr') !== false)
</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>
<!-- 상품이 JavaScript로 동적 렌더링됩니다 -->
</div>
</section>
</div>
@@ -318,26 +177,143 @@ $mngUrl = (strpos($currentHost, 'sam.kr') !== false)
</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 }
};
// 제조업체 상품 데이터
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
}
];
// 선택된 상품
let selectedProducts = ['basic']; // 기본 패키지는 필수
// 공사업체 상품 데이터
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');
@@ -348,38 +324,75 @@ $mngUrl = (strpos($currentHost, 'sam.kr') !== false)
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 toggleProduct(card, productId, isRequired = false) {
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 checkbox = card.querySelector('input[type="checkbox"]');
const isSelected = selectedProducts.includes(productId);
const selected = selectedProducts[currentTab];
const isSelected = selected.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');
selectedProducts[currentTab] = selected.filter(p => p !== productId);
} 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');
selectedProducts[currentTab].push(productId);
}
renderProducts();
calculate();
}
function calculate() {
const products = currentTab === 'manufacturing' ? manufacturingProducts : constructionProducts;
const selected = selectedProducts[currentTab];
let totalJoinFee = 0;
let totalMonthlyFee = 0;
selectedProducts.forEach(productId => {
const product = products[productId];
selected.forEach(productId => {
const product = products.find(p => p.id === productId);
if (product) {
totalJoinFee += product.joinFee;
totalMonthlyFee += product.monthlyFee;