Update index.html

index.html

@@ -1330,20 +1330,36 @@
             };
 
             // 초기 비용 계산 및 구성 요소 목록 생성
-            Object.values(selectedComponents).forEach(component => {
-                if (component.category === 'support') {
-                    monthlySupport += component.cost;
+            Object.entries(selectedComponents).forEach(([category, value]) => {
+                if (typeof value === 'object' && value.id) {
+                    // 단일 선택 항목
+                    if (category === 'support') {
+                        monthlySupport += value.cost;
+                    } else {
+                        initialCost += value.cost;
+                    }
+                    maxTime = Math.max(maxTime, value.time);
+                    
+                    componentListHTML += `
+                        <div class="component-list-item">
+                            <span><strong>${categoryNames[category]}</strong>: ${value.name}</span>
+                            <span>${category === 'support' ? '월 ' : ''}₩${value.cost}M</span>
+                        </div>
+                    `;
                 } else {
-                    initialCost += component.cost;
+                    // 복수 선택 항목
+                    Object.values(value).forEach(item => {
+                        initialCost += item.cost;
+                        maxTime = Math.max(maxTime, item.time);
+                        
+                        componentListHTML += `
+                            <div class="component-list-item">
+                                <span><strong>${categoryNames[category]}</strong>: ${item.name}</span>
+                                <span>₩${item.cost}M</span>
+                            </div>
+                        `;
+                    });
                 }
-                maxTime = Math.max(maxTime, component.time);
-                
-                componentListHTML += `
-                    <div class="component-list-item">
-                        <span><strong>${categoryNames[component.category]}</strong>: ${component.name}</span>
-                        <span>${component.category === 'support' ? '월 ' : ''}₩${component.cost}M</span>
-                    </div>
-                `;
             });
 
             // 월별 운영 비용 계산
@@ -1359,112 +1375,6 @@
             const adjustedTime = Math.max(3, Math.ceil(maxTime));
 
             // 결과 표시
-            document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
-            document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
-            document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;
-            document.getElementById('results').style.display = 'block';
-
-            // 차트 그리기
-            drawChart(duration, baseCosts[scale], multiplier);
-        }
-
-        function drawChart(duration, costs, multiplier) {
-            const ctx = document.getElementById('costChart').getContext('2d');
-            
-            if (costChart) {
-                costChart.destroy();
-            }
-
-            const months = Array.from({length: duration}, (_, i) => i + 1);
-            
-            costChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: months.map(m => `${m}개월`),
-                    datasets: [
-                        {
-                            label: '외주 용역',
-                            data: months.map(m => costs.outsource.initial + (costs.outsource.monthly * m * multiplier)),
-                            borderColor: '#764ba2',
-                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
-                            tension: 0.4
-                        },
-                        {
-                            label: '자체 인력',
-                            data: months.map(m => costs.inhouse.initial + (costs.inhouse.monthly * m * multiplier)),
-                            borderColor: '#f5576c',
-                            backgroundColor: 'rgba(245, 87, 108, 0.1)',
-                            tension: 0.4
-                        },
-                        {
-                            label: '플랫폼 대여',
-                            data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
-                            borderColor: '#00f2fe',
-                            backgroundColor: 'rgba(0, 242, 254, 0.1)',
-                            tension: 0.4
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: '시간에 따른 누적 비용 추이',
-                            color: '#ffffff',
-                            font: {
-                                size: 16
-                            }
-                        },
-                        legend: {
-                            labels: {
-                                color: '#ffffff'
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#ffffff'
-                            }
-                        },
-                        y: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#ffffff',
-                                callback: function(value) {
-                                    return '₩' + value + 'M';
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        }
-
-        // 애니메이션 효과를 위한 Intersection Observer
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.animation = 'fadeInUp 0.8s ease-out forwards';
-                }
-            });
-        });
-
-        document.querySelectorAll('.method-card').forEach(card => {
-            observer.observe(card);
-        });
-    </script>
-</body>
-</html>
-</body>
-</html> 표시
             document.getElementById('initialCost').textContent = `₩${initialCost}M`;
             document.getElementById('devTime').textContent = `${adjustedTime}개월`;
             document.getElementById('totalCost').textContent = `₩${totalCost}M`;
@@ -1613,95 +1523,6 @@
                 }
             });
         }
-    </script> 표시
-            document.getElementById('outsourceCost').textContent = `₩${Math.round(outsourceCost)}M`;
-            document.getElementById('inhouseCost').textContent = `₩${Math.round(inhouseCost)}M`;
-            document.getElementById('platformCost').textContent = `₩${Math.round(platformCost)}M`;
-            document.getElementById('results').style.display = 'block';
-
-            // 차트 그리기
-            drawChart(duration, baseCosts[scale], multiplier);
-        }
-
-        function drawChart(duration, costs, multiplier) {
-            const ctx = document.getElementById('costChart').getContext('2d');
-            
-            if (costChart) {
-                costChart.destroy();
-            }
-
-            const months = Array.from({length: duration}, (_, i) => i + 1);
-            
-            costChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: months.map(m => `${m}개월`),
-                    datasets: [
-                        {
-                            label: '외주 용역',
-                            data: months.map(m => costs.outsource.initial + (costs.outsource.monthly * m * multiplier)),
-                            borderColor: '#764ba2',
-                            backgroundColor: 'rgba(118, 75, 162, 0.1)',
-                            tension: 0.4
-                        },
-                        {
-                            label: '자체 인력',
-                            data: months.map(m => costs.inhouse.initial + (costs.inhouse.monthly * m * multiplier)),
-                            borderColor: '#f5576c',
-                            backgroundColor: 'rgba(245, 87, 108, 0.1)',
-                            tension: 0.4
-                        },
-                        {
-                            label: '플랫폼 대여',
-                            data: months.map(m => costs.platform.initial + (costs.platform.monthly * m * multiplier)),
-                            borderColor: '#00f2fe',
-                            backgroundColor: 'rgba(0, 242, 254, 0.1)',
-                            tension: 0.4
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: '시간에 따른 누적 비용 추이',
-                            color: '#ffffff',
-                            font: {
-                                size: 16
-                            }
-                        },
-                        legend: {
-                            labels: {
-                                color: '#ffffff'
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#ffffff'
-                            }
-                        },
-                        y: {
-                            grid: {
-                                color: 'rgba(255, 255, 255, 0.1)'
-                            },
-                            ticks: {
-                                color: '#ffffff',
-                                callback: function(value) {
-                                    return '₩' + value + 'M';
-                                }
-                            }
-                        }
-                    }
-                }
-            });
-        }
 
         // 애니메이션 효과를 위한 Intersection Observer
         const observer = new IntersectionObserver((entries) => {