[UX] #577 keep VPD primary menu on the first row

docs/design/577-persona-ux-audit/README.md

@@ -104,6 +104,6 @@ UX-1부터 시작한다. 기존 데이터 모델과 VPD 로직은 바꾸지 않
 | 별도 Filter 관리 | 고급 접근 조건 | 예외 정책 기능 |
 | 운영 상태 / 연결 설정 | 운영 현황 / 시스템 설정 | 운영성·연동 설정 기능 |
 
-상단 메뉴는 DDS와 같은 네 업무 영역인 `권한 관리 · 보호 정책 관리 · 지식자료 관리 · 접근 검증`으로 구성한다. ORDS·MCP·Filter·시스템 설정은 기본 제품 메뉴에서 빼고 관련 화면의 고급 링크에서만 연다. 첫 줄에는 제품명과 로그아웃만 둔다. 둘째 줄의 1차 메뉴를 누르면 하위 메뉴가 팝업으로 뜨지 않고 셋째 줄 전폭에 표시된다. 현재 페이지가 속한 메뉴는 처음부터 셋째 줄을 열어 둔다. 절차나 구현 방식이 아니라 사용자가 하려는 일을 메뉴명으로 쓴다. 메뉴와 기본 화면에는 `1.`, `2.`, 단계 레일, `01/02` 배지를 두지 않는다. 순서가 실제 입력 제약인 wizard에서만 단계 번호를 사용한다.
+상단 메뉴는 DDS와 같은 네 업무 영역인 `권한 관리 · 보호 정책 관리 · 지식자료 관리 · 접근 검증`으로 구성한다. ORDS·MCP·Filter·시스템 설정은 기본 제품 메뉴에서 빼고 관련 화면의 고급 링크에서만 연다. 첫 줄에는 제품명·1차 메뉴·로그아웃을 함께 둔다. 1차 메뉴를 누르면 하위 메뉴가 팝업으로 뜨지 않고 바로 아래 전폭 줄에 표시된다. 현재 페이지가 속한 메뉴는 처음부터 아래 줄을 열어 둔다. 절차나 구현 방식이 아니라 사용자가 하려는 일을 메뉴명으로 쓴다. 메뉴와 기본 화면에는 `1.`, `2.`, 단계 레일, `01/02` 배지를 두지 않는다. 순서가 실제 입력 제약인 wizard에서만 단계 번호를 사용한다.
 
 기본 페이지는 제목과 현재 설정·주요 행동만 노출한다. VPD/ORDS 처리 원리, 배경 설명, 주의사항은 상단의 공통 `도움말` 버튼을 눌렀을 때만 펼친다. 이 규칙으로 제품 화면이 관리 매뉴얼처럼 보이는 문제를 줄이고, 설정 자체를 전면에 둔다.

src/main/resources/static/css/app.css

@@ -104,8 +104,7 @@ body {
   font-weight: 700;
 }
 
-.rw-nav-top,
+.rw-nav-top {
-.rw-primary-menu-bar .container {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -113,24 +112,15 @@ body {
 }
 
 .rw-nav-top {
-  justify-content: space-between;
   min-height: 3.5rem;
 }
 
-.rw-primary-menu-bar {
-  border-top: 1px solid var(--rw-border);
-}
-
-.rw-primary-menu-bar .container {
-  min-height: 3.1rem;
-}
-
 .rw-menu {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: .35rem;
-  width: 100%;
+  margin-right: auto;
 }
 
 .rw-menu-trigger {

src/main/resources/templates/fragments/layout.html

@@ -14,20 +14,16 @@
 <nav th:fragment="nav" class="navbar rw-nav navbar-expand-lg" data-product-nav>
   <div class="container rw-nav-top">
     <a class="navbar-brand" href="/">VPD 권한 운영</a>
-    <form method="post" action="/logout">
-      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
-      <button class="btn btn-sm btn-outline-secondary" type="submit">로그아웃</button>
-    </form>
-  </div>
-  <div class="rw-primary-menu-bar">
-    <div class="container">
     <div class="rw-menu" aria-label="주요 메뉴">
       <button class="rw-menu-trigger" type="button" data-submenu-trigger="access" aria-controls="submenu-access" aria-expanded="false">권한 관리</button>
       <button class="rw-menu-trigger" type="button" data-submenu-trigger="protection" aria-controls="submenu-protection" aria-expanded="false">보호 정책 관리</button>
       <button class="rw-menu-trigger" type="button" data-submenu-trigger="knowledge" aria-controls="submenu-knowledge" aria-expanded="false">지식자료 관리</button>
       <button class="rw-menu-trigger" type="button" data-submenu-trigger="verification" aria-controls="submenu-verification" aria-expanded="false">접근 검증</button>
     </div>
-    </div>
+    <form method="post" action="/logout" class="ms-auto">
+      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
+      <button class="btn btn-sm btn-outline-secondary" type="submit">로그아웃</button>
+    </form>
   </div>
   <div class="rw-submenu-bar" data-submenu-bar hidden>
     <div class="container">