Update index.html

index.html

@@ -1476,84 +1476,119 @@
        }
 
        // 커스텀 비용 계산 함수
-       function calculateCustomCost() {
-           let totalInitialCost = 0;
-           let totalResourceCost = 0;
-           let maxTime = 0;
-           let componentDetails = [];
-           
-           // 서비스 비용 계산
-// 서비스 비용 계산 부분을 다음과 같이 수정
-selectedComponents.service.forEach(serviceId => {
-    const card = document.querySelector(`[data-category="service"][data-id="${serviceId}"]`);
-    if (!card) return; // 카드가 없으면 건너뛰기
+// 커스텀 비용 계산 함수
+function calculateCustomCost() {
+    let totalInitialCost = 0;
+    let totalResourceCost = 0;
+    let maxTime = 0;
+    let componentDetails = [];
+    
+    // 서비스 비용 계산
+    selectedComponents.service.forEach(serviceId => {
+        const card = document.querySelector(`[data-category="service"][data-id="${serviceId}"]`);
+        if (!card) return;
+        
+        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'
+        });
+    });
     
-    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;
+    // 기타 구성 요소 비용 계산
+    ['db', 'auth', 'credit', 'payment', 'marketing', 'monitoring'].forEach(category => {
+        if (selectedComponents[category]) {
+            const card = document.querySelector(`[data-category="${category}"][data-id="${selectedComponents[category]}"]`);
+            if (!card) return;
+            
+            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
+            });
+        }
+    });
     
-    totalInitialCost += cost;
-    totalResourceCost += resource;
-    maxTime = Math.max(maxTime, time);
+    // 지원 서비스 (월간 비용)
+    let monthlySupport = 0;
+    if (selectedComponents.support) {
+        const card = document.querySelector(`[data-category="support"][data-id="${selectedComponents.support]}"]`);
+        if (card) {
+            monthlySupport = parseFloat(card.dataset.cost);
+            const name = card.querySelector('.option-name').textContent;
+            
+            componentDetails.push({
+                name: name,
+                cost: monthlySupport,
+                type: 'monthly'
+            });
+        }
+    }
     
-    componentDetails.push({
-        name: name,
-        cost: cost,
-        type: 'service'
+    // 추가 기능 비용 계산
+    selectedComponents.additional.forEach(additionalId => {
+        const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
+        if (!card) return;
+        
+        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'
+        });
     });
-});
-
-// 추가 기능 비용 계산 부분도 동일하게 수정
-selectedComponents.additional.forEach(additionalId => {
-    const card = document.querySelector(`[data-category="additional"][data-id="${additionalId}"]`);
-    if (!card) return; // 카드가 없으면 건너뛰기
     
-    const cost = parseFloat(card.dataset.cost);
-    const time = parseFloat(card.dataset.time);
-    const name = card.querySelector('.option-name').textContent;
+    // 월간 운영 비용 계산
+    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;
     
-    totalInitialCost += cost;
-    maxTime = Math.max(maxTime, time);
+    // 결과 표시
+    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`;
     
-    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';
-       }
+    // 총 비용 계산 (기간별)
+    updateTotalCost(totalInitialCost, totalMonthlyCost);
+    
+    // 선택한 구성 요소 목록 표시
+    displayComponentList(componentDetails);
+    
+    // 구축 방식별 비교
+    compareBuilderMethods(totalInitialCost, totalMonthlyCost, maxTime);
+    
+    // 차트 업데이트
+    updateCustomChart(totalInitialCost, totalMonthlyCost);
+    
+    // 결과 섹션 표시
+    document.getElementById('customResult').style.display = 'block';
+}
 
        // 총 비용 업데이트
        function updateTotalCost(initialCost, monthlyCost) {