Update index.html

index.html

@@ -395,6 +395,7 @@
             transition: all 0.3s ease;
             position: relative;
             overflow: hidden;
+            user-select: none;
         }
 
         .option-card.selected {
@@ -420,7 +421,7 @@
             font-weight: bold;
         }
 
-        .option-card:hover {
+        .option-card:hover:not(.selected) {
             border-color: #00d2ff;
             background: rgba(255, 255, 255, 0.1);
             transform: translateY(-2px);
@@ -1392,333 +1393,339 @@
                                 </div>
                             </div>
 
-```html
-                        </div>
-                    </div>
-
-                    <!-- 기간별 비용 차트 -->
-                    <div class="chart-container">
-                        <canvas id="customChart"></canvas>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script>
-        // 전역 변수
-        let selectedComponents = {
-            service: [],
-            db: null,
-            auth: null,
-            credit: null,
-            payment: null,
-            marketing: null,
-            support: null,
-            monitoring: null,
-            additional: []
-        };
-
-        let customChart = null;
-        let currentPeriod = 3;
-
-        // 옵션 카드 클릭 이벤트
-        document.querySelectorAll('.option-card').forEach(card => {
-            card.addEventListener('click', function() {
-                const category = this.dataset.category;
-                const id = this.dataset.id;
-                
-                if (category === 'service' || category === 'additional') {
-                    // 복수 선택 가능
-                    this.classList.toggle('selected');
-                    
-                    if (this.classList.contains('selected')) {
-                        if (!selectedComponents[category].includes(id)) {
-                            selectedComponents[category].push(id);
-                        }
-                    } else {
-                        const index = selectedComponents[category].indexOf(id);
-                        if (index > -1) {
-                            selectedComponents[category].splice(index, 1);
-                        }
-                    }
-                } else {
-                    // 단일 선택
-                    document.querySelectorAll(`[data-category="${category}"]`).forEach(c => {
-                        c.classList.remove('selected');
-                    });
-                    
-                    this.classList.add('selected');
-                    selectedComponents[category] = id;
-                }
-            });
-        });
-
-        // 탭 전환 함수
-        function switchTab(tabId) {
-            document.querySelectorAll('.tab').forEach(tab => {
-                tab.classList.remove('active');
-            });
-            document.querySelectorAll('.tab-content').forEach(content => {
-                content.classList.remove('active');
-            });
-            
-            event.target.classList.add('active');
-            document.getElementById(tabId).classList.add('active');
-        }
-
-        // 커스텀 비용 계산 함수
-        function calculateCustomCost() {
-            let totalInitialCost = 0;
-            let totalResourceCost = 0;
-            let maxTime = 0;
-            let componentDetails = [];
-            
-            // 서비스 비용 계산
-            selectedComponents.service.forEach(serviceId => {
-                const card = document.querySelector(`[data-id="${serviceId}"]`);
-                const cost = parseFloat(card.dataset.cost);
-                const time = parseFloat(card.dataset.time);
-                const resource = parseFloat(card.dataset.resource) || 0;
-                const name = card.querySelector('.option-name').textContent;
-                
-                totalInitialCost += cost;
-                totalResourceCost += resource;
-                maxTime = Math.max(maxTime, time);
-                
-                componentDetails.push({
-                    name: name,
-                    cost: cost,
-                    type: 'service'
-                });
-            });
-            
-            // 기타 구성 요소 비용 계산
-            ['db', 'auth', 'credit', 'payment', 'marketing', 'monitoring'].forEach(category => {
-                if (selectedComponents[category]) {
-                    const card = document.querySelector(`[data-category="${category}"][data-id="${selectedComponents[category]}"]`);
-                    const cost = parseFloat(card.dataset.cost);
-                    const time = parseFloat(card.dataset.time);
-                    const name = card.querySelector('.option-name').textContent;
-                    
-                    totalInitialCost += cost;
-                    maxTime = Math.max(maxTime, time);
-                    
-                    componentDetails.push({
-                        name: name,
-                        cost: cost,
-                        type: category
-                    });
-                }
-            });
-            
-            // 지원 서비스 (월간 비용)
-            let monthlySupport = 0;
-            if (selectedComponents.support) {
-                const card = document.querySelector(`[data-category="support"][data-id="${selectedComponents.support]}"]`);
-                monthlySupport = parseFloat(card.dataset.cost);
-                const name = card.querySelector('.option-name').textContent;
-                
-                componentDetails.push({
-                    name: name,
-                    cost: monthlySupport,
-                    type: 'monthly'
-                });
-            }
-            
-            // 추가 기능 비용 계산
-            selectedComponents.additional.forEach(additionalId => {
-                const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
-                const cost = parseFloat(card.dataset.cost);
-                const time = parseFloat(card.dataset.time);
-                const name = card.querySelector('.option-name').textContent;
-                
-                totalInitialCost += cost;
-                maxTime = Math.max(maxTime, time);
-                
-                componentDetails.push({
-                    name: name,
-                    cost: cost,
-                    type: 'additional'
-                });
-            });
-            
-            // 월간 운영 비용 계산
-            const serverCost = totalInitialCost > 100 ? 5 : totalInitialCost > 50 ? 3 : totalInitialCost > 20 ? 2 : 1;
-            const resourceCost = totalResourceCost;
-            const maintenanceCost = totalInitialCost * 0.05; // 초기 비용의 5%
-            const totalMonthlyCost = serverCost + resourceCost + maintenanceCost + monthlySupport;
-            
-            // 결과 표시
-            document.getElementById('initialCost').textContent = `$${totalInitialCost}K`;
-            document.getElementById('devTime').textContent = `${maxTime}개월`;
-            document.getElementById('serverCost').textContent = `$${serverCost}K`;
-            document.getElementById('resourceCost').textContent = `$${resourceCost.toFixed(1)}K`;
-            document.getElementById('maintenanceCost').textContent = `$${maintenanceCost.toFixed(1)}K`;
-            document.getElementById('totalMonthlyCost').textContent = `$${totalMonthlyCost.toFixed(1)}K`;
-            
-            // 총 비용 계산 (기간별)
-            updateTotalCost(totalInitialCost, totalMonthlyCost);
-            
-            // 선택한 구성 요소 목록 표시
-            displayComponentList(componentDetails);
-            
-            // 구축 방식별 비교
-            compareBuilderMethods(totalInitialCost, totalMonthlyCost, maxTime);
-            
-            // 차트 업데이트
-            updateCustomChart(totalInitialCost, totalMonthlyCost);
-            
-            // 결과 섹션 표시
-            document.getElementById('customResult').style.display = 'block';
-        }
 
-        // 총 비용 업데이트
-        function updateTotalCost(initialCost, monthlyCost) {
-            const totalCost = initialCost + (monthlyCost * currentPeriod);
-            document.getElementById('totalCost').textContent = `$${totalCost.toFixed(1)}K`;
-        }
 
-        // 구성 요소 목록 표시
-        function displayComponentList(components) {
-            const listContainer = document.getElementById('componentList');
-            listContainer.innerHTML = '';
-            
-            components.forEach(component => {
-                const item = document.createElement('div');
-                item.className = 'component-list-item';
-                
-                let costDisplay = component.type === 'monthly' 
-                    ? `월 $${component.cost}K` 
-                    : `$${component.cost}K`;
-                
-                item.innerHTML = `
-                    <span>${component.name}</span>
-                    <span style="color: #00d2ff;">${costDisplay}</span>
-                `;
-                
-                listContainer.appendChild(item);
-            });
-        }
-
-        // 구축 방식별 비교
-        function compareBuilderMethods(initialCost, monthlyCost, devTime) {
-            // 외주 용역 개발
-            const outsourceInitial = initialCost;
-            const outsourceMonthly = monthlyCost;
-            const outsourceTotal = outsourceInitial + (outsourceMonthly * currentPeriod);
-            
-            // 자체 인력 개발
-            const developerSalary = 10; // 월 $10K
-            const teamSize = Math.ceil(initialCost / 50); // $50K당 1명
-            const inhouseDevTime = Math.max(devTime * 1.5, 3); // 최소 3개월
-            const inhouseInitial = developerSalary * teamSize * inhouseDevTime;
-            const inhouseMonthly = monthlyCost + (developerSalary * Math.ceil(teamSize / 2)); // 유지보수 인력
-            const inhouseTotal = inhouseInitial + (inhouseMonthly * currentPeriod);
-            
-            // 플랫폼 대여
-            const platformInitial = 1; // 설정 비용
-            const platformMonthly = monthlyCost * 2 + 5; // 플랫폼 수수료 포함
-            const platformTotal = platformInitial + (platformMonthly * currentPeriod);
-            
-            // 결과 표시
-            document.getElementById('outsourceInitial').textContent = `$${outsourceInitial}K`;
-            document.getElementById('outsourceMonthly').textContent = `$${outsourceMonthly.toFixed(1)}K`;
-            document.getElementById('outsourceTotal').textContent = `$${outsourceTotal.toFixed(1)}K`;
-            
-            document.getElementById('inhouseInitial').textContent = `$${inhouseInitial}K`;
-            document.getElementById('inhouseMonthly').textContent = `$${inhouseMonthly.toFixed(1)}K`;
-            document.getElementById('inhouseTotal').textContent = `$${inhouseTotal.toFixed(1)}K`;
-            
-            document.getElementById('platformInitial').textContent = `$${platformInitial}K`;
-            document.getElementById('platformMonthly').textContent = `$${platformMonthly.toFixed(1)}K`;
-            document.getElementById('platformTotal').textContent = `$${platformTotal.toFixed(1)}K`;
-        }
-
-        // 차트 업데이트
-        function updateCustomChart(initialCost, monthlyCost) {
-            const ctx = document.getElementById('customChart').getContext('2d');
-            
-            if (customChart) {
-                customChart.destroy();
-            }
-            
-            const months = Array.from({length: 12}, (_, i) => `${i + 1}개월`);
-            const outsourceData = months.map((_, i) => initialCost + (monthlyCost * (i + 1)));
-            const inhouseData = months.map((_, i) => {
-                const teamSize = Math.ceil(initialCost / 50);
-                const inhouseInitial = 10 * teamSize * 3;
-                const inhouseMonthly = monthlyCost + (10 * Math.ceil(teamSize / 2));
-                return inhouseInitial + (inhouseMonthly * (i + 1));
-            });
-            const platformData = months.map((_, i) => 1 + ((monthlyCost * 2 + 5) * (i + 1)));
-            
-            customChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: months,
-                    datasets: [{
-                        label: '외주 용역 개발',
-                        data: outsourceData,
-                        borderColor: '#764ba2',
-                        backgroundColor: 'rgba(118, 75, 162, 0.1)',
-                        tension: 0.4
-                    }, {
-                        label: '자체 인력 개발',
-                        data: inhouseData,
-                        borderColor: '#f5576c',
-                        backgroundColor: 'rgba(245, 87, 108, 0.1)',
-                        tension: 0.4
-                    }, {
-                        label: '플랫폼 대여',
-                        data: platformData,
-                        borderColor: '#4facfe',
-                        backgroundColor: 'rgba(79, 172, 254, 0.1)',
-                        tension: 0.4
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            labels: {
-                                color: '#ffffff'
-                            }
-                        },
-                        tooltip: {
-                            callbacks: {
-                                label: function(context) {
-                                    return context.dataset.label + ': $' + context.parsed.y.toFixed(1) + 'K';
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#a8a8b3'
-                            }
-                        },
-                        y: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#a8a8b3',
-                                callback: function(value) {
-                                    return '$' + value + 'K';
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        }
-    </script>
+</div>
+                   </div>
+
+                   <!-- 기간별 비용 차트 -->
+                   <div class="chart-container">
+                       <canvas id="customChart"></canvas>
+                   </div>
+               </div>
+           </div>
+       </div>
+   </div>
+
+   <script>
+       // 전역 변수
+       let selectedComponents = {
+           service: [],
+           db: null,
+           auth: null,
+           credit: null,
+           payment: null,
+           marketing: null,
+           support: null,
+           monitoring: null,
+           additional: []
+       };
+
+       let customChart = null;
+       let currentPeriod = 3;
+
+       // 페이지 로드 시 이벤트 리스너 등록
+       document.addEventListener('DOMContentLoaded', function() {
+           // 옵션 카드 클릭 이벤트
+           document.querySelectorAll('.option-card').forEach(card => {
+               card.addEventListener('click', function(e) {
+                   e.preventDefault();
+                   const category = this.dataset.category;
+                   const id = this.dataset.id;
+                   
+                   if (category === 'service' || category === 'additional') {
+                       // 복수 선택 가능
+                       this.classList.toggle('selected');
+                       
+                       if (this.classList.contains('selected')) {
+                           if (!selectedComponents[category].includes(id)) {
+                               selectedComponents[category].push(id);
+                           }
+                       } else {
+                           const index = selectedComponents[category].indexOf(id);
+                           if (index > -1) {
+                               selectedComponents[category].splice(index, 1);
+                           }
+                       }
+                   } else {
+                       // 단일 선택
+                       document.querySelectorAll(`[data-category="${category}"]`).forEach(c => {
+                           c.classList.remove('selected');
+                       });
+                       
+                       this.classList.add('selected');
+                       selectedComponents[category] = id;
+                   }
+                   
+                   console.log('Selected:', selectedComponents); // 디버깅용
+               });
+           });
+       });
+
+       // 탭 전환 함수
+       function switchTab(tabId) {
+           document.querySelectorAll('.tab').forEach(tab => {
+               tab.classList.remove('active');
+           });
+           document.querySelectorAll('.tab-content').forEach(content => {
+               content.classList.remove('active');
+           });
+           
+           event.target.classList.add('active');
+           document.getElementById(tabId).classList.add('active');
+       }
+
+       // 커스텀 비용 계산 함수
+       function calculateCustomCost() {
+           let totalInitialCost = 0;
+           let totalResourceCost = 0;
+           let maxTime = 0;
+           let componentDetails = [];
+           
+           // 서비스 비용 계산
+           selectedComponents.service.forEach(serviceId => {
+               const card = document.querySelector(`[data-id="${serviceId}"]`);
+               const cost = parseFloat(card.dataset.cost);
+               const time = parseFloat(card.dataset.time);
+               const resource = parseFloat(card.dataset.resource) || 0;
+               const name = card.querySelector('.option-name').textContent;
+               
+               totalInitialCost += cost;
+               totalResourceCost += resource;
+               maxTime = Math.max(maxTime, time);
+               
+               componentDetails.push({
+                   name: name,
+                   cost: cost,
+                   type: 'service'
+               });
+           });
+           
+           // 기타 구성 요소 비용 계산
+           ['db', 'auth', 'credit', 'payment', 'marketing', 'monitoring'].forEach(category => {
+               if (selectedComponents[category]) {
+                   const card = document.querySelector(`[data-category="${category}"][data-id="${selectedComponents[category]}"]`);
+                   const cost = parseFloat(card.dataset.cost);
+                   const time = parseFloat(card.dataset.time);
+                   const name = card.querySelector('.option-name').textContent;
+                   
+                   totalInitialCost += cost;
+                   maxTime = Math.max(maxTime, time);
+                   
+                   componentDetails.push({
+                       name: name,
+                       cost: cost,
+                       type: category
+                   });
+               }
+           });
+           
+           // 지원 서비스 (월간 비용)
+           let monthlySupport = 0;
+           if (selectedComponents.support) {
+               const card = document.querySelector(`[data-category="support"][data-id="${selectedComponents.support]}"]`);
+               monthlySupport = parseFloat(card.dataset.cost);
+               const name = card.querySelector('.option-name').textContent;
+               
+               componentDetails.push({
+                   name: name,
+                   cost: monthlySupport,
+                   type: 'monthly'
+               });
+           }
+           
+           // 추가 기능 비용 계산
+           selectedComponents.additional.forEach(additionalId => {
+               const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
+               const cost = parseFloat(card.dataset.cost);
+               const time = parseFloat(card.dataset.time);
+               const name = card.querySelector('.option-name').textContent;
+               
+               totalInitialCost += cost;
+               maxTime = Math.max(maxTime, time);
+               
+               componentDetails.push({
+                   name: name,
+                   cost: cost,
+                   type: 'additional'
+               });
+           });
+           
+           // 월간 운영 비용 계산
+           const serverCost = totalInitialCost > 100 ? 5 : totalInitialCost > 50 ? 3 : totalInitialCost > 20 ? 2 : 1;
+           const resourceCost = totalResourceCost;
+           const maintenanceCost = totalInitialCost * 0.05; // 초기 비용의 5%
+           const totalMonthlyCost = serverCost + resourceCost + maintenanceCost + monthlySupport;
+           
+           // 결과 표시
+           document.getElementById('initialCost').textContent = `$${totalInitialCost}K`;
+           document.getElementById('devTime').textContent = `${maxTime}개월`;
+           document.getElementById('serverCost').textContent = `$${serverCost}K`;
+           document.getElementById('resourceCost').textContent = `$${resourceCost.toFixed(1)}K`;
+           document.getElementById('maintenanceCost').textContent = `$${maintenanceCost.toFixed(1)}K`;
+           document.getElementById('totalMonthlyCost').textContent = `$${totalMonthlyCost.toFixed(1)}K`;
+           
+           // 총 비용 계산 (기간별)
+           updateTotalCost(totalInitialCost, totalMonthlyCost);
+           
+           // 선택한 구성 요소 목록 표시
+           displayComponentList(componentDetails);
+           
+           // 구축 방식별 비교
+           compareBuilderMethods(totalInitialCost, totalMonthlyCost, maxTime);
+           
+           // 차트 업데이트
+           updateCustomChart(totalInitialCost, totalMonthlyCost);
+           
+           // 결과 섹션 표시
+           document.getElementById('customResult').style.display = 'block';
+       }
+
+       // 총 비용 업데이트
+       function updateTotalCost(initialCost, monthlyCost) {
+           const totalCost = initialCost + (monthlyCost * currentPeriod);
+           document.getElementById('totalCost').textContent = `$${totalCost.toFixed(1)}K`;
+       }
+
+       // 구성 요소 목록 표시
+       function displayComponentList(components) {
+           const listContainer = document.getElementById('componentList');
+           listContainer.innerHTML = '';
+           
+           components.forEach(component => {
+               const item = document.createElement('div');
+               item.className = 'component-list-item';
+               
+               let costDisplay = component.type === 'monthly' 
+                   ? `월 $${component.cost}K` 
+                   : `$${component.cost}K`;
+               
+               item.innerHTML = `
+                   <span>${component.name}</span>
+                   <span style="color: #00d2ff;">${costDisplay}</span>
+               `;
+               
+               listContainer.appendChild(item);
+           });
+       }
+
+       // 구축 방식별 비교
+       function compareBuilderMethods(initialCost, monthlyCost, devTime) {
+           // 외주 용역 개발
+           const outsourceInitial = initialCost;
+           const outsourceMonthly = monthlyCost;
+           const outsourceTotal = outsourceInitial + (outsourceMonthly * currentPeriod);
+           
+           // 자체 인력 개발
+           const developerSalary = 10; // 월 $10K
+           const teamSize = Math.ceil(initialCost / 50); // $50K당 1명
+           const inhouseDevTime = Math.max(devTime * 1.5, 3); // 최소 3개월
+           const inhouseInitial = developerSalary * teamSize * inhouseDevTime;
+           const inhouseMonthly = monthlyCost + (developerSalary * Math.ceil(teamSize / 2)); // 유지보수 인력
+           const inhouseTotal = inhouseInitial + (inhouseMonthly * currentPeriod);
+           
+           // 플랫폼 대여
+           const platformInitial = 1; // 설정 비용
+           const platformMonthly = monthlyCost * 2 + 5; // 플랫폼 수수료 포함
+           const platformTotal = platformInitial + (platformMonthly * currentPeriod);
+           
+           // 결과 표시
+           document.getElementById('outsourceInitial').textContent = `$${outsourceInitial}K`;
+           document.getElementById('outsourceMonthly').textContent = `$${outsourceMonthly.toFixed(1)}K`;
+           document.getElementById('outsourceTotal').textContent = `$${outsourceTotal.toFixed(1)}K`;
+           
+           document.getElementById('inhouseInitial').textContent = `$${inhouseInitial}K`;
+           document.getElementById('inhouseMonthly').textContent = `$${inhouseMonthly.toFixed(1)}K`;
+           document.getElementById('inhouseTotal').textContent = `$${inhouseTotal.toFixed(1)}K`;
+           
+           document.getElementById('platformInitial').textContent = `$${platformInitial}K`;
+           document.getElementById('platformMonthly').textContent = `$${platformMonthly.toFixed(1)}K`;
+           document.getElementById('platformTotal').textContent = `$${platformTotal.toFixed(1)}K`;
+       }
+
+       // 차트 업데이트
+       function updateCustomChart(initialCost, monthlyCost) {
+           const ctx = document.getElementById('customChart').getContext('2d');
+           
+           if (customChart) {
+               customChart.destroy();
+           }
+           
+           const months = Array.from({length: 12}, (_, i) => `${i + 1}개월`);
+           const outsourceData = months.map((_, i) => initialCost + (monthlyCost * (i + 1)));
+           const inhouseData = months.map((_, i) => {
+               const teamSize = Math.ceil(initialCost / 50);
+               const inhouseInitial = 10 * teamSize * 3;
+               const inhouseMonthly = monthlyCost + (10 * Math.ceil(teamSize / 2));
+               return inhouseInitial + (inhouseMonthly * (i + 1));
+           });
+           const platformData = months.map((_, i) => 1 + ((monthlyCost * 2 + 5) * (i + 1)));
+           
+           customChart = new Chart(ctx, {
+               type: 'line',
+               data: {
+                   labels: months,
+                   datasets: [{
+                       label: '외주 용역 개발',
+                       data: outsourceData,
+                       borderColor: '#764ba2',
+                       backgroundColor: 'rgba(118, 75, 162, 0.1)',
+                       tension: 0.4
+                   }, {
+                       label: '자체 인력 개발',
+                       data: inhouseData,
+                       borderColor: '#f5576c',
+                       backgroundColor: 'rgba(245, 87, 108, 0.1)',
+                       tension: 0.4
+                   }, {
+                       label: '플랫폼 대여',
+                       data: platformData,
+                       borderColor: '#4facfe',
+                       backgroundColor: 'rgba(79, 172, 254, 0.1)',
+                       tension: 0.4
+                   }]
+               },
+               options: {
+                   responsive: true,
+                   maintainAspectRatio: false,
+                   plugins: {
+                       legend: {
+                           labels: {
+                               color: '#ffffff'
+                           }
+                       },
+                       tooltip: {
+                           callbacks: {
+                               label: function(context) {
+                                   return context.dataset.label + ': $' + context.parsed.y.toFixed(1) + 'K';
+                               }
+                           }
+                       }
+                   },
+                   scales: {
+                       x: {
+                           grid: {
+                               color: 'rgba(255, 255, 255, 0.1)'
+                           },
+                           ticks: {
+                               color: '#a8a8b3'
+                           }
+                       },
+                       y: {
+                           grid: {
+                               color: 'rgba(255, 255, 255, 0.1)'
+                           },
+                           ticks: {
+                               color: '#a8a8b3',
+                               callback: function(value) {
+                                   return '$' + value + 'K';
+                               }
+                           }
+                       }
+                   }
+               }
+           });
+       }
+   </script>
 </body>
-</html>
-                  
+</html>