fix: 경영성과 차트가 빈 화면이 되던 문제(숨겨진 탭에 Chart 생성)

- 매출/수주/예상 탭이 보일 때만 해당 차트 렌더
- 탭 전환 시 renderDivisionView로 재그리기
- GET /api/mgmt-perf/status로 스냅샷 메타 확인

Made-with: Cursor

public/mgmt-perf/dashboard-app.js

@@ -39,12 +39,26 @@ let state = {
             return days[month - 1];
         }
 
+        function isSectionActive(sectionId) {
+            const el = document.getElementById(sectionId);
+            return !!(el && el.classList.contains("active"));
+        }
+
         // Initialize (iframe에서도 DOMContentLoaded가 이미 지난 경우 대비)
         function bootMgmtPerfDashboard() {
-            setupEventListeners();
-            renderOverviewMode();
-            renderOrderSection();
-            renderForecastSection();
+            try {
+                setupEventListeners();
+                // 숨겨진 탭(display:none)에 Chart를 그리면 캔버스 크기 0 → 매출현황만 먼저 그림. 수주/예상은 해당 탭이 보일 때만 렌더.
+                renderDivisionView();
+            } catch (err) {
+                console.error("mgmt-perf dashboard boot:", err);
+                var banner = document.createElement("div");
+                banner.setAttribute("role", "alert");
+                banner.style.cssText = "background:#ffebee;color:#b71c1c;padding:12px;margin:8px;border-radius:8px;font-size:13px;";
+                banner.textContent = "대시보드 스크립트 오류: " + (err && err.message ? err.message : String(err));
+                var root = document.querySelector(".mgmt-perf-embed") || document.body;
+                root.insertBefore(banner, root.firstChild);
+            }
         }
         if (document.readyState === "loading") {
             document.addEventListener("DOMContentLoaded", bootMgmtPerfDashboard);
@@ -82,6 +96,10 @@ let state = {
                     const sectionName = e.target.dataset.section;
                     state.currentSection = sectionName;
                     document.getElementById(sectionName).classList.add('active');
+                    // 탭 전환 후 레이아웃이 잡힌 뒤 차트 재생성 (숨겨진 패널 문제 방지)
+                    requestAnimationFrame(function () {
+                        renderDivisionView();
+                    });
                 });
             });
         }
@@ -105,34 +123,39 @@ let state = {
 
         function renderDivisionView() {
             const isOverviewMode = state.currentDivision === 'all';
-            document.getElementById('overviewMode').style.display = isOverviewMode ? 'block' : 'none';
-            document.getElementById('divisionDetailMode').style.display = isOverviewMode ? 'none' : 'block';
-
-            if (isOverviewMode) {
-                renderOverviewMode();
-            } else {
-                renderDivisionDetailMode();
-            }
-            // Hide FSCAN/XSCAN model charts when 배터리 or 신사업 is selected
-            const showModels = !(['battery','newbiz'].includes(state.currentDivision));
-            const modelDisplay = showModels ? 'grid' : 'none';
-            const smr = document.getElementById('salesModelRow');
-            const omr = document.getElementById('orderModelRow');
-            if(smr) smr.style.display = modelDisplay;
-            if(omr) omr.style.display = modelDisplay;
-
-            // Update model charts and category charts for current division/month
+            const showModels = !["battery", "newbiz"].includes(state.currentDivision);
+            const modelDisplay = showModels ? "grid" : "none";
             const mon = state.currentMonth;
-            const monthIdx = mon === 'all' ? [0,1,2] : [parseInt(mon)-1];
-            if (showModels) {
-                renderSalesModelCharts(monthIdx);
-            }
-            // Always update category breakdown
-            renderSalesCategoryCharts(monthIdx);
+            const monthIdx = mon === "all" ? [0, 1, 2] : [parseInt(mon, 10) - 1];
 
-            // Also update 수주현황 and 예상전망
-            renderOrderSection();
-            renderForecastSection();
+            // 매출현황 탭이 보일 때만 KPI·매출 차트 렌더 (숨겨진 영역에 그리면 Chart.js 높이 0)
+            if (isSectionActive("매출현황")) {
+                document.getElementById("overviewMode").style.display = isOverviewMode ? "block" : "none";
+                document.getElementById("divisionDetailMode").style.display = isOverviewMode ? "none" : "block";
+                if (isOverviewMode) {
+                    renderOverviewMode();
+                } else {
+                    renderDivisionDetailMode();
+                }
+                const smr = document.getElementById("salesModelRow");
+                if (smr) smr.style.display = modelDisplay;
+                if (showModels) {
+                    renderSalesModelCharts(monthIdx);
+                }
+                renderSalesCategoryCharts(monthIdx);
+            }
+
+            const omr = document.getElementById("orderModelRow");
+            if (omr && isSectionActive("수주현황")) {
+                omr.style.display = modelDisplay;
+            }
+
+            if (isSectionActive("수주현황")) {
+                renderOrderSection();
+            }
+            if (isSectionActive("예상전망")) {
+                renderForecastSection();
+            }
         }
 
         // Helper: get total sales for a division for given month indices

public/mgmt-perf/dashboard.css

@@ -419,3 +419,8 @@
             border-radius: 10px;
             overflow-x: auto;
         }
+
+.mgmt-perf-embed .chart-wrapper {
+            min-height: 280px;
+            position: relative;
+        }