dsyoon
485bd31798
- 성공 사례 아래 구분선과 대시보드 메뉴 - /dashboard: AI 탐색과 동일한 카드·검색 레이아웃 - 첫 카드 경영성과 대시보드 → /dashboard/business-performance Made-with: Cursor
98 lines
3.5 KiB
Plaintext
98 lines
3.5 KiB
Plaintext
<!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>
|