feat: 대시보드 메뉴 및 경영성과 대시보드 카드 페이지 추가

- 성공 사례 아래 구분선과 대시보드 메뉴 - /dashboard: AI 탐색과 동일한 카드·검색 레이아웃 - 첫 카드 경영성과 대시보드 → /dashboard/business-performance Made-with: Cursor
2026-04-13 10:38:56 +09:00
parent 6126291257
commit 485bd31798
5 changed files with 151 additions and 1 deletions
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -0,0 +1,97 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <%- include('partials/favicon') %>
+    <title>대시보드 - XAVIS</title>
+    <link rel="stylesheet" href="/public/styles.css" />
+  </head>
+  <body class="ai-explore-page dashboard-page">
+    <div class="app-shell">
+      <%- include('partials/nav', {
+        activeMenu: 'dashboard',
+        adminMode: typeof adminMode !== 'undefined' ? adminMode : false,
+      }) %>
+      <div class="content-area">
+        <header class="topbar">
+          <h1>대시보드</h1>
+        </header>
+        <main class="container container-ai-full">
+          <section class="panel">
+            <p class="subtitle">
+              경영·업무 지표를 한눈에 보고, 필요한 대시보드를 선택해 활용하세요.
+            </p>
+            <form class="search-bar-wrap" id="dashboardSearchForm" role="search">
+              <input
+                type="search"
+                id="dashboardSearch"
+                placeholder="제목, 설명으로 검색하세요"
+                class="search-input"
+                autocomplete="off"
+                aria-label="대시보드 제목·설명 검색"
+              />
+            </form>
+          </section>
+          <section class="panel">
+            <h2>대시보드</h2>
+            <div class="ai-card-grid">
+              <a href="/dashboard/business-performance" class="ai-card ai-card-link">
+                <div class="ai-card-header">
+                  <span class="status-chip public">공개중</span>
+                </div>
+                <h3>경영성과 대시보드</h3>
+                <p>
+                  조직·팀 단위 성과와 핵심 지표를 시각화하고, 의사결정에 활용할 수 있는 경영 성과 화면입니다.
+                </p>
+                <div class="tag-row">
+                  <span class="tag-chip">#경영</span>
+                  <span class="tag-chip">#성과</span>
+                  <span class="tag-chip">#KPI</span>
+                </div>
+              </a>
+            </div>
+          </section>
+        </main>
+      </div>
+    </div>
+    <script>
+      (function () {
+        var form = document.getElementById("dashboardSearchForm");
+        var input = document.getElementById("dashboardSearch");
+        var grid = document.querySelector(".ai-card-grid");
+        if (!form || !input || !grid) return;
+
+        var cards = grid.querySelectorAll(".ai-card");
+
+        function cardTitleDescriptionText(el) {
+          var parts = [];
+          var h3 = el.querySelector("h3");
+          if (h3) parts.push(h3.textContent || "");
+          el.querySelectorAll("p").forEach(function (p) {
+            if (!p.closest(".tag-row")) parts.push(p.textContent || "");
+          });
+          return parts.join(" ").replace(/\s+/g, " ").trim().toLowerCase();
+        }
+
+        function applyFilter() {
+          var q = (input.value || "").trim().toLowerCase();
+          cards.forEach(function (el) {
+            var text = cardTitleDescriptionText(el);
+            var show = !q || text.indexOf(q) !== -1;
+            el.hidden = !show;
+            el.setAttribute("aria-hidden", show ? "false" : "true");
+          });
+        }
+
+        input.addEventListener("input", applyFilter);
+        input.addEventListener("search", applyFilter);
+
+        form.addEventListener("submit", function (e) {
+          e.preventDefault();
+          applyFilter();
+        });
+      })();
+    </script>
+  </body>
+</html>