From 657282e08090dd9766c0f268fcccf073f2b1c2dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 31 Jan 2026 18:36:42 +0900
Subject: [PATCH] =?UTF-8?q?fix:=EA=B3=B5=EC=82=AC=EC=97=85=EC=B2=B4=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=A0=84=ED=99=98=20=EC=8B=9C=20=EC=83=81=ED=92=88?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EB=8F=99=EC=A0=81=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 price/index.php | 353 +++++++++++++++++++++++++-----------------------
 1 file changed, 183 insertions(+), 170 deletions(-)

diff --git a/price/index.php b/price/index.php
index 78fd17f..8fd0a1b 100644
--- a/price/index.php
+++ b/price/index.php
@@ -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;