From 8bc89ee3dc47c345d67c320a5cc8a80096343a2c Mon Sep 17 00:00:00 2001
From: devmrko <devmrko@gmail.com>
Date: Thu, 25 Jun 2026 15:31:34 +0900
Subject: [PATCH] [Designer] #424 group navigation and document MCP SSE
 contexts

---
 src/main/resources/static/css/app.css         | 107 ++++++++++++++++++
 .../resources/templates/fragments/layout.html |  44 +++++--
 src/main/resources/templates/mcp-sse.html     |  60 ++++++++++
 3 files changed, 199 insertions(+), 12 deletions(-)

diff --git a/src/main/resources/static/css/app.css b/src/main/resources/static/css/app.css
index 8e7b894..4388c2a 100644
--- a/src/main/resources/static/css/app.css
+++ b/src/main/resources/static/css/app.css
@@ -99,6 +99,70 @@ body {
   font-weight: 700;
 }
 
+.rw-nav .container {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: .75rem;
+}
+
+.rw-menu {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: .35rem;
+}
+
+.rw-menu-group {
+  position: relative;
+}
+
+.rw-menu-trigger {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  color: var(--rw-muted);
+  font-size: .9rem;
+  font-weight: 700;
+  min-height: 2.25rem;
+  padding: .45rem .85rem;
+}
+
+.rw-menu-trigger:hover,
+.rw-menu-trigger:focus {
+  background: var(--rw-surface-muted);
+  border-color: var(--rw-border);
+  color: var(--rw-text);
+}
+
+.rw-menu-panel {
+  background: var(--rw-surface);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  box-shadow: var(--rw-shadow);
+  display: none;
+  left: 0;
+  min-width: 190px;
+  padding: .35rem;
+  position: absolute;
+  top: calc(100% + .35rem);
+  z-index: 30;
+}
+
+.rw-menu-group:hover .rw-menu-panel,
+.rw-menu-group:focus-within .rw-menu-panel {
+  display: grid;
+  gap: .15rem;
+}
+
+.rw-menu-panel .nav-link {
+  border-radius: 8px;
+  color: var(--rw-text);
+  display: block;
+  padding: .55rem .65rem !important;
+  white-space: nowrap;
+}
+
 .nav-link {
   border-radius: 999px;
   color: var(--rw-muted);
@@ -112,6 +176,16 @@ body {
   color: var(--rw-text);
 }
 
+@media (max-width: 920px) {
+  .rw-menu-panel {
+    position: static;
+  }
+
+  .rw-menu-group:focus-within .rw-menu-panel {
+    display: grid;
+  }
+}
+
 .page-title {
   margin-bottom: 1.5rem;
 }
@@ -396,6 +470,39 @@ body {
   margin: 1rem 0;
 }
 
+.mcp-service-grid {
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.mcp-service-item {
+  background: var(--rw-surface-muted);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  display: grid;
+  gap: .35rem;
+  min-height: 124px;
+  padding: .85rem;
+}
+
+.mcp-service-item span {
+  color: var(--rw-muted);
+  font-size: .78rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.mcp-service-item strong {
+  font-size: .95rem;
+  overflow-wrap: anywhere;
+}
+
+.mcp-service-item small {
+  color: var(--rw-muted);
+  line-height: 1.45;
+}
+
 .probe-exchange {
   border: 1px solid var(--rw-border);
   border-radius: 8px;
diff --git a/src/main/resources/templates/fragments/layout.html b/src/main/resources/templates/fragments/layout.html
index 9c6f4c6..0655371 100644
--- a/src/main/resources/templates/fragments/layout.html
+++ b/src/main/resources/templates/fragments/layout.html
@@ -14,18 +14,38 @@
 <nav th:fragment="nav" class="navbar rw-nav navbar-expand-lg">
   <div class="container">
     <a class="navbar-brand" href="/">VPD Backoffice</a>
-    <div class="navbar-nav">
-      <a class="nav-link" href="/users">사용자</a>
-      <a class="nav-link" href="/roles">역할</a>
-      <a class="nav-link" href="/permissions">권한</a>
-      <a class="nav-link" href="/objects">ORDS 조회 Handler</a>
-      <a class="nav-link" href="/tokens">토큰</a>
-      <a class="nav-link" href="/probe">ORDS 검증</a>
-      <a class="nav-link" href="/mcp-reasoning">MCP Reasoning</a>
-      <a class="nav-link" href="/mcp-sse">MCP SSE</a>
-      <a class="nav-link" href="/vpd-policies">VPD 설정</a>
-      <a class="nav-link" href="/ords-handlers">ORDS 핸들러</a>
-      <a class="nav-link" href="/settings">설정</a>
+    <div class="rw-menu">
+      <div class="rw-menu-group">
+        <button class="rw-menu-trigger" type="button">권한 관리</button>
+        <div class="rw-menu-panel">
+          <a class="nav-link" href="/users">사용자</a>
+          <a class="nav-link" href="/roles">역할</a>
+          <a class="nav-link" href="/permissions">권한</a>
+          <a class="nav-link" href="/tokens">토큰</a>
+        </div>
+      </div>
+      <div class="rw-menu-group">
+        <button class="rw-menu-trigger" type="button">ORDS</button>
+        <div class="rw-menu-panel">
+          <a class="nav-link" href="/objects">조회 Handler 생성</a>
+          <a class="nav-link" href="/probe">ORDS 검증</a>
+          <a class="nav-link" href="/ords-handlers">ORDS 핸들러</a>
+        </div>
+      </div>
+      <div class="rw-menu-group">
+        <button class="rw-menu-trigger" type="button">MCP</button>
+        <div class="rw-menu-panel">
+          <a class="nav-link" href="/mcp-reasoning">Reasoning</a>
+          <a class="nav-link" href="/mcp-sse">SSE 서비스</a>
+        </div>
+      </div>
+      <div class="rw-menu-group">
+        <button class="rw-menu-trigger" type="button">운영</button>
+        <div class="rw-menu-panel">
+          <a class="nav-link" href="/vpd-policies">VPD 설정</a>
+          <a class="nav-link" href="/settings">설정</a>
+        </div>
+      </div>
     </div>
     <form method="post" action="/logout" class="ms-auto">
       <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
diff --git a/src/main/resources/templates/mcp-sse.html b/src/main/resources/templates/mcp-sse.html
index 1da355a..c4b1c49 100644
--- a/src/main/resources/templates/mcp-sse.html
+++ b/src/main/resources/templates/mcp-sse.html
@@ -14,6 +14,27 @@
     <div th:text="${runtimeError.message()}">DB 연결을 확인할 수 없습니다.</div>
   </section>
 
+  <section class="content-band">
+    <h2>서비스 구성</h2>
+    <div class="mcp-service-grid">
+      <div class="mcp-service-item">
+        <span>기본 서비스</span>
+        <strong><code>/mcp/sse</code></strong>
+        <small>기존 MCP client 설정과 호환됩니다.</small>
+      </div>
+      <div class="mcp-service-item">
+        <span>Context 서비스</span>
+        <strong><code>/mcp/{contextPath}/sse</code></strong>
+        <small>업무/환경별 이름으로 같은 ORDS tool set을 분리 노출합니다.</small>
+      </div>
+      <div class="mcp-service-item">
+        <span>예시</span>
+        <strong><code>/mcp/vpd-live/sse</code></strong>
+        <small>SSE 연결 시 message endpoint가 같은 context로 반환됩니다.</small>
+      </div>
+    </div>
+  </section>
+
   <section class="content-band">
     <h2>Endpoint</h2>
     <div class="table-responsive">
@@ -84,6 +105,45 @@
   "limit": 50
 }</pre>
   </section>
+
+  <section class="content-band">
+    <h2>JSON-RPC 예시</h2>
+    <div class="probe-exchange-grid">
+      <div class="probe-exchange">
+        <h3>initialize</h3>
+        <pre>{
+  "jsonrpc": "2.0",
+  "id": 1,
+  "method": "initialize",
+  "params": {}
+}</pre>
+      </div>
+      <div class="probe-exchange">
+        <h3>tools/list</h3>
+        <pre>{
+  "jsonrpc": "2.0",
+  "id": 2,
+  "method": "tools/list",
+  "params": {}
+}</pre>
+      </div>
+      <div class="probe-exchange">
+        <h3>tools/call</h3>
+        <pre>{
+  "jsonrpc": "2.0",
+  "id": 3,
+  "method": "tools/call",
+  "params": {
+    "name": "ords.query.admin.board_posts",
+    "arguments": {
+      "bearerToken": "vpd_live_xxx",
+      "limit": 50
+    }
+  }
+}</pre>
+      </div>
+    </div>
+  </section>
 </main>
 </body>
 </html>