[UX] #605 make permission wizard safety review actionable

src/main/resources/templates/permissions.html

@@ -20,7 +20,10 @@
 
   <section class="content-band">
     <div class="section-heading">
-      <h2>권한 추가 Wizard</h2>
+      <div>
+        <h2>새 권한 규칙</h2>
+        <p class="section-description">저장 전 적용 대상과 행 범위를 검토한 뒤 VPD 권한을 반영합니다.</p>
+      </div>
       <div class="wizard-progress" aria-label="권한 추가 단계">
         <button class="wizard-step-indicator active" type="button" data-wizard-target="1">1 역할</button>
         <button class="wizard-step-indicator" type="button" data-wizard-target="2">2 객체</button>
@@ -31,6 +34,7 @@
     </div>
     <form method="post" action="/permissions" class="permission-wizard" data-permission-wizard>
       <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
+      <div class="wizard-validation" data-wizard-validation role="alert" hidden></div>
       <aside class="wizard-summary" aria-live="polite">
         <div>
           <span>역할</span>
@@ -48,6 +52,14 @@
           <span>행 규칙</span>
           <strong data-wizard-summary="rules">ALL</strong>
         </div>
+        <div>
+          <span>적용 대상</span>
+          <strong data-wizard-summary="affected">역할 선택 후 확인</strong>
+        </div>
+        <div>
+          <span>저장 상태</span>
+          <strong data-wizard-summary="readiness">역할과 객체를 선택하세요</strong>
+        </div>
       </aside>
 
       <div class="wizard-panel active" data-wizard-step="1">
@@ -61,6 +73,7 @@
         <label>
           역할
           <select class="form-select" name="roleId" required>
+            <option value="" selected disabled>권한을 적용할 역할 선택</option>
             <option th:each="role : ${roles}"
                     th:value="${role.roleId()}"
                     th:text="${role.roleName()}"
@@ -95,6 +108,7 @@
         <label>
           보호 객체
           <select class="form-select" name="objectRef" required>
+            <option value="" selected disabled>권한을 적용할 보호 객체 선택</option>
             <optgroup label="등록된 보호 객체">
               <option th:each="object : ${objects}"
                       th:value="${'protected:' + object.objectId()}"
@@ -142,6 +156,7 @@
         </label>
         <div>
           <div class="field-block-title">행 규칙</div>
+          <p class="rule-safety-note"><strong>주의:</strong> <code>ALL</code>은 전체 행을 뜻합니다. <code>ALL</code>과 다른 조건 규칙은 한 권한에 함께 저장할 수 없습니다.</p>
           <div id="rowRuleList" class="rule-list">
             <div class="rule-row">
               <select class="form-select rule-column-select" name="ruleColumn">
@@ -216,6 +231,8 @@
             <div><dt>VPD predicate 예상</dt><dd data-preview="predicatePreview">-</dd></div>
             <div><dt>권한별 컬럼 마스킹</dt><dd data-preview="columnPolicy">-</dd></div>
             <div><dt>NULL 처리 예상</dt><dd data-preview="nullPolicy">-</dd></div>
+            <div class="policy-preview-emphasis"><dt>저장 영향</dt><dd data-preview="saveGuard">-</dd></div>
+            <div><dt>되돌리기</dt><dd>저장 후 아래 권한 목록에서 삭제할 수 있습니다. 이 객체의 마지막 권한을 삭제하면 보호 객체가 비활성화될 수 있습니다.</dd></div>
           </dl>
         </div>
       </div>