dsyoon/ai_platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 성공 사례 아래 구분선과 대시보드 메뉴
- /dashboard: AI 탐색과 동일한 카드·검색 레이아웃
- 첫 카드 경영성과 대시보드 → /dashboard/business-performance

Made-with: Cursor
This commit is contained in:
dsyoon
2026-04-13 10:38:56 +09:00
parent 6126291257
commit 485bd31798
5 changed files with 151 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
views/dashboard-business-performance.ejs Normal file
View File

@@ -0,0 +1,34 @@
<!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>
<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">
<p class="breadcrumb" style="margin-bottom: 16px">
<a href="/dashboard">← 대시보드 목록으로</a>
</p>
<section class="panel">
<p class="subtitle">
이 화면은 향후 경영·성과 지표 연동 및 위젯 구성을 위한 진입점입니다. 필요한 데이터 소스와 차트
요구사항이 정해지면 이어서 구현할 수 있습니다.
</p>
</section>
</main>
</div>
</div>
</body>
</html>

97
views/dashboard.ejs Normal file
View File

@@ -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>

2
views/partials/nav.ejs
View File

@@ -28,6 +28,8 @@
<a href="/learning" class="nav-item <%= activeMenu === 'learning' ? 'active' : '' %>">학습센터</a>
<a href="/ax-apply" class="nav-item <%= activeMenu === 'ax-apply' ? 'active' : '' %>">과제신청</a>
<a href="/ai-cases" class="nav-item <%= activeMenu === 'ai-cases' ? 'active' : '' %>">성공사례</a>
<div class="nav-separator"></div>
<a href="/dashboard" class="nav-item <%= activeMenu === 'dashboard' ? 'active' : '' %>">대시보드</a>
<div class="nav-footer">
<% var _opsLoggedIn = typeof opsUserEmail !== 'undefined' && opsUserEmail; %>
<% var _admin = typeof adminMode !== 'undefined' && adminMode; %>