From 62cabd5622bbfa6d8a2301de90f67dd7b0a4d6eb Mon Sep 17 00:00:00 2001
From: dsyoon <dsyoon@ncue.net>
Date: Mon, 13 Apr 2026 13:24:26 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EA=B2=BD=EC=98=81=EC=84=B1=EA=B3=BC=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20iframe=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=C2=B7=EC=9D=B8=EB=9D=BC=EC=9D=B8=20=EB=A0=8C=EB=8D=94?=
 =?UTF-8?q?,=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- embed 404/검은 화면 방지: 한 페이지에서 페이로드+차트 로드
- fetch 비JSON 응답 시 상태코드 표시, 성공 시 새로고침
- 전역 .container grid와 충돌 시 .mgmt-perf-embed 스코프 CSS

Made-with: Cursor
---
 README.md                                |  2 +-
 public/mgmt-perf/dashboard.css           | 24 +++++++++-
 server.js                                |  6 +++
 views/dashboard-business-performance.ejs | 58 ++++++++++++++----------
 views/mgmt_perf_embed.ejs                |  2 +
 5 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 97099ce..d0ea74d 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@
 - 학습센터 UI (좌측 메뉴 + 상단 헤더 + 강의 카드 레이아웃)
 - **AI 탐색** (`/ai-explore`): 전체 너비 레이아웃, AI 서비스 카드(프롬프트·회의록 등). 검색창에 **「프롬프트」**가 포함된 채 검색(Enter) 시 프롬프트 라이브러리로 이동
 - **대시보드** (`/dashboard`): AI 탐색과 유사한 카드 그리드·검색으로 대시보드를 모아 표시. 첫 카드 **경영성과 대시보드**는 `/dashboard/business-performance`로 연결
-- **경영성과 대시보드** (`/dashboard/business-performance`): 상단 **엑셀 업로드**(`.xlsx`, 매출일보 시트) → DB(`mgmt_perf_uploads` / `mgmt_perf_snapshots`) 또는 DB 미연결 시 `data/mgmt-perf-last-state.json`에 스냅샷 저장. 하단 **대시보드 조회**는 기존 HTML 템플릿(Chart.js, 매출·수주·예상실적 탭)을 iframe(`/dashboard/business-performance/embed`)으로 표시. 엑셀에서 수치 집계를 치환하려면 `npm install`로 `xlsx` 패키지를 설치한 뒤 서버를 재시작하세요.
+- **경영성과 대시보드** (`/dashboard/business-performance`): 상단 **엑셀 업로드**(`.xlsx`, 매출일보 시트) → DB(`mgmt_perf_uploads` / `mgmt_perf_snapshots`) 또는 DB 미연결 시 `data/mgmt-perf-last-state.json`에 스냅샷 저장. 하단 **대시보드 조회**는 동일 페이지에 Chart.js 템플릿을 인라인으로 렌더(iframe 제거, 별도 `/dashboard/business-performance/embed`는 직접 열람용으로 유지). 리버스 프록시 사용 시 업로드 실패하면 **`client_max_body_size`**(예: 64m)와 **`/api/` → Node** 전달 여부를 확인. 엑셀 집계 치환은 `npm install`로 `xlsx` 설치 후 서버 재시작.
 - **프롬프트 라이브러리** (`/ai-explore/prompts`): 업무별 기본 프롬프트 카드 선택·미리보기·클립보드 복사 (`data/company-prompts.json`). **좌측 메뉴(채팅·AI·AI 성공 사례·학습센터·AX 과제 신청)는 관리자 여부와 관계없이 접근 가능**(강의 삭제·관리자 대시보드 등 일부 기능은 관리자 모드에서만)
 - 검색/필터/페이지네이션
   - 검색어(`q`) 기반 제목/설명/태그 필터
diff --git a/public/mgmt-perf/dashboard.css b/public/mgmt-perf/dashboard.css
index 6f844bf..c795b15 100644
--- a/public/mgmt-perf/dashboard.css
+++ b/public/mgmt-perf/dashboard.css
@@ -396,4 +396,26 @@
                 page-break-inside: avoid;
             }
         }
-    
\ No newline at end of file
+
+/* 앱 셸 안에 인라인 삽입 시 전역 .container(grid)와 충돌 방지 */
+.mgmt-perf-embed .container {
+            display: block !important;
+            max-width: 1600px !important;
+            width: auto !important;
+            margin: 0 auto !important;
+            padding: 0 !important;
+            gap: unset !important;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            overflow: hidden;
+        }
+.mgmt-perf-embed {
+            font-family: '맑은 고딕', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: linear-gradient(135deg, var(--blk) 0%, var(--blk2) 100%);
+            color: var(--blk);
+            line-height: 1.6;
+            padding: 16px;
+            border-radius: 10px;
+            overflow-x: auto;
+        }
diff --git a/server.js b/server.js
index d153258..11d71b0 100644
--- a/server.js
+++ b/server.js
@@ -1230,6 +1230,9 @@ pageRouter.get("/dashboard/business-performance", async (req, res, next) => {
     const uploadHistory = await mgmtPerf.listUploads(pgPool, 12);
     const y = latest.fiscal_year || new Date().getFullYear();
     const q = latest.quarter || 1;
+    const payloadJson = JSON.stringify(latest.payload).replace(/</g, "\\u003c");
+    const dashboardTitle = `${y} Q${q} 경영성과 대시보드`;
+    const quarterLabel = `Q${q}`;
     res.render("dashboard-business-performance", {
       activeMenu: "dashboard",
       adminMode: res.locals.adminMode,
@@ -1237,6 +1240,9 @@ pageRouter.get("/dashboard/business-performance", async (req, res, next) => {
       defaultYear: y,
       selectedQuarter: q,
       uploadHistory,
+      payloadJson,
+      dashboardTitle,
+      quarterLabel,
     });
   } catch (err) {
     next(err);
diff --git a/views/dashboard-business-performance.ejs b/views/dashboard-business-performance.ejs
index a6fd94e..3403e7d 100644
--- a/views/dashboard-business-performance.ejs
+++ b/views/dashboard-business-performance.ejs
@@ -6,6 +6,7 @@
     <%- include('partials/favicon') %>
     <title>경영성과 대시보드 - XAVIS</title>
     <link rel="stylesheet" href="/public/styles.css" />
+    <link rel="stylesheet" href="/mgmt-perf/dashboard.css" />
     <style>
       .mgmt-perf-page main.container {
         max-width: 1200px;
@@ -80,18 +81,11 @@
         font-size: 1.05rem;
         margin: 0 0 10px;
       }
-      .mgmt-dash-embed-wrap {
+      .mgmt-dash-inline-wrap {
         border: 1px solid var(--border, #e0e0e0);
         border-radius: 10px;
         overflow: hidden;
-        background: #1a1a1a;
-        min-height: 820px;
-      }
-      .mgmt-dash-embed-wrap iframe {
-        display: block;
-        width: 100%;
-        min-height: 820px;
-        border: 0;
+        min-height: 400px;
       }
       .mgmt-upload-history {
         margin-top: 16px;
@@ -173,7 +167,7 @@
                     <tr>
                       <td><%= u.created_at ? new Date(u.created_at).toLocaleString('ko-KR') : '-' %></td>
                       <td><%= u.original_filename || '-' %></td>
-                      <td><%= u.fiscal_year %>년 Q<%= u.quarter %></td>
+                      <td><%= u.fiscal_year != null && u.fiscal_year !== '' ? u.fiscal_year + '년 Q' + u.quarter : '-' %></td>
                     </tr>
                     <% }); %>
                   </tbody>
@@ -184,13 +178,17 @@
 
             <section class="mgmt-dash-panel" aria-labelledby="mgmt-dash-heading">
               <h2 id="mgmt-dash-heading">대시보드 조회</h2>
-              <div class="mgmt-dash-embed-wrap">
-                <iframe
-                  id="mgmtPerfDashFrame"
-                  title="경영성과 차트"
-                  src="/dashboard/business-performance/embed"
-                ></iframe>
+              <div class="mgmt-dash-inline-wrap">
+                <div class="mgmt-perf-embed" id="mgmtPerfDashRoot">
+                  <%- include('partials/mgmt_perf_dashboard_container', {
+                    dashboardTitle: typeof dashboardTitle !== 'undefined' ? dashboardTitle : '경영성과 대시보드',
+                    quarterLabel: typeof quarterLabel !== 'undefined' ? quarterLabel : 'Q1',
+                  }) %>
+                </div>
               </div>
+              <script type="application/json" id="mgmt-perf-payload-json"><%- typeof payloadJson !== 'undefined' ? payloadJson : '{}' %></script>
+              <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
+              <script src="/mgmt-perf/dashboard-app.js"></script>
             </section>
           </div>
         </main>
@@ -201,7 +199,6 @@
         var form = document.getElementById("mgmtPerfUploadForm");
         var btn = document.getElementById("mgmtPerfUploadBtn");
         var msg = document.getElementById("mgmtPerfUploadMsg");
-        var frame = document.getElementById("mgmtPerfDashFrame");
         if (!form || !btn || !msg) return;
 
         form.addEventListener("submit", function (e) {
@@ -212,24 +209,37 @@
           btn.disabled = true;
           fetch("/api/mgmt-perf/upload", { method: "POST", body: fd, credentials: "same-origin" })
             .then(function (r) {
-              return r.json().then(function (j) {
-                return { ok: r.ok, body: j };
+              return r.text().then(function (text) {
+                var j = {};
+                if (text) {
+                  try {
+                    j = JSON.parse(text);
+                  } catch (parseErr) {
+                    j = { error: "서버 응답을 해석할 수 없습니다. (" + r.status + ")" };
+                  }
+                }
+                return { ok: r.ok, body: j, status: r.status };
               });
             })
             .then(function (_ref) {
               var ok = _ref.ok;
               var body = _ref.body;
               if (ok) {
-                msg.textContent = body.message || "저장되었습니다.";
+                msg.textContent = body.message || "저장되었습니다. 화면을 새로고침합니다.";
                 msg.className = "mgmt-upload-msg ok";
-                if (frame) frame.src = "/dashboard/business-performance/embed?t=" + Date.now();
+                window.setTimeout(function () {
+                  window.location.reload();
+                }, 600);
               } else {
-                msg.textContent = body.error || "업로드에 실패했습니다.";
+                msg.textContent =
+                  (body && body.error) ||
+                  "업로드에 실패했습니다. (" + (_ref.status || "") + ")";
                 msg.className = "mgmt-upload-msg err";
               }
             })
-            .catch(function () {
-              msg.textContent = "네트워크 오류입니다.";
+            .catch(function (err) {
+              msg.textContent =
+                (err && err.message) || "요청에 실패했습니다. 서버가 최신 코드인지·프록시에서 /api 경로가 Node로 전달되는지 확인하세요.";
               msg.className = "mgmt-upload-msg err";
             })
             .finally(function () {
diff --git a/views/mgmt_perf_embed.ejs b/views/mgmt_perf_embed.ejs
index c574a69..f91db26 100644
--- a/views/mgmt_perf_embed.ejs
+++ b/views/mgmt_perf_embed.ejs
@@ -8,7 +8,9 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
   </head>
   <body>
+    <div class="mgmt-perf-embed">
     <%- include('partials/mgmt_perf_dashboard_container', { dashboardTitle, quarterLabel }) %>
+    </div>
     <script type="application/json" id="mgmt-perf-payload-json"><%- payloadJson %></script>
     <script src="/mgmt-perf/dashboard-app.js"></script>
   </body>