From cd7860e2533b535547e9c5a1ebab0438a15a6fd2 Mon Sep 17 00:00:00 2001
From: devmrko <devmrko@gmail.com>
Date: Fri, 26 Jun 2026 13:32:39 +0900
Subject: [PATCH] fix #491: add permission effective preview

---
 .../README.md                                 |  48 ++++++++
 .../web/PermissionController.java             |  72 ++++++++++-
 src/main/resources/static/css/app.css         |  27 ++++
 src/main/resources/static/js/app.js           | 116 ++++++++++++++++--
 src/main/resources/templates/permissions.html |  28 ++++-
 5 files changed, 277 insertions(+), 14 deletions(-)
 create mode 100644 docs/design/491-permission-effective-preview/README.md

diff --git a/docs/design/491-permission-effective-preview/README.md b/docs/design/491-permission-effective-preview/README.md
new file mode 100644
index 0000000..9161733
--- /dev/null
+++ b/docs/design/491-permission-effective-preview/README.md
@@ -0,0 +1,48 @@
+# Redmine #491 - 권한 추가 Wizard 유효 권한 Preview 설계
+
+## 프로젝트 개요
+
+VPD Backoffice는 Oracle Database VPD/ORDS 기능을 백오피스 권한 테이블로 제어하기 위한 Spring Boot 관리 도구다. 권한 관리 화면은 VPD policy function이 참조할 사용자, 그룹, 역할, 행 규칙, 컬럼 원문 허용 규칙을 저장한다.
+
+## 목표
+
+권한 추가 Wizard에서 저장 전 선택한 역할/객체/행 규칙/컬럼 규칙이 실제로 누구에게 어떤 권한 효과를 주는지 운영자가 확인할 수 있게 한다.
+
+## 문제
+
+현재 preview는 역할, 객체, 행 규칙, 컬럼 정책을 짧게만 보여준다. 그룹 기반 역할 부여가 들어간 상태에서 다음 내용을 저장 전 파악하기 어렵다.
+
+- 선택한 역할이 직접 사용자에게 붙었는지
+- 그룹을 통해 어떤 사용자에게 상속되는지
+- 선택한 TABLE/VIEW의 컬럼과 행 규칙 대상 컬럼이 무엇인지
+- 저장될 VPD filter 조건이 어떤 predicate 모양이 되는지
+- 민감 컬럼 중 원문 표시 허용 컬럼과 NULL 처리 대상이 어떻게 갈리는지
+
+## 설계
+
+- `PermissionController`가 사용자-역할, 그룹-역할, 그룹-사용자 데이터를 권한 화면에 추가로 내려준다.
+- 역할 `<option>`에 직접 사용자, 역할 보유 그룹, 그룹 상속 사용자 요약을 `data-*`로 넣는다.
+- 보호 객체 `<option>`에 전체 컬럼과 마스킹 대상 컬럼 metadata를 유지하고 preview에서 사용한다.
+- Wizard 저장 전 검토에 다음 항목을 추가한다.
+  - 적용 대상 사용자/그룹 요약
+  - 선택 객체 컬럼 목록
+  - 행 규칙 predicate preview
+  - 컬럼 원문 허용/NULL 처리 preview
+- DB 스키마 객체처럼 저장 전 컬럼 metadata가 비동기로 조회되는 경우, 기존 `/permissions/object-columns` 응답을 preview에도 반영한다.
+
+## 완료 기준
+
+- 역할 선택 시 직접 사용자, 그룹, 그룹 상속 사용자 요약이 표시된다.
+- 객체 선택 시 컬럼 목록과 마스킹 대상 컬럼 목록이 표시된다.
+- 행 규칙 추가/수정 시 저장될 predicate preview가 갱신된다.
+- 원문 표시 허용 컬럼 입력/버튼 선택 시 NULL 처리 대상 preview가 갱신된다.
+- 기존 권한 저장 동작과 검증 로직은 유지된다.
+
+## 검증
+
+- `mvn test`
+- Playwright:
+  - `/permissions`에서 역할 영향도 preview 확인
+  - 객체 컬럼 preview 확인
+  - 행 규칙/컬럼 입력 변경 시 preview 갱신 확인
+  - 390px 모바일 body overflow 없음
diff --git a/src/main/java/com/cloudhandson/vpdbackoffice/web/PermissionController.java b/src/main/java/com/cloudhandson/vpdbackoffice/web/PermissionController.java
index d955ca0..f2e56db 100644
--- a/src/main/java/com/cloudhandson/vpdbackoffice/web/PermissionController.java
+++ b/src/main/java/com/cloudhandson/vpdbackoffice/web/PermissionController.java
@@ -1,12 +1,20 @@
 package com.cloudhandson.vpdbackoffice.web;
 
+import com.cloudhandson.vpdbackoffice.domain.permission.AppRole;
 import com.cloudhandson.vpdbackoffice.domain.permission.PermissionSetCommand;
 import com.cloudhandson.vpdbackoffice.domain.permission.RuleCommand;
 import com.cloudhandson.vpdbackoffice.domain.protectedobject.ProtectedColumn;
+import com.cloudhandson.vpdbackoffice.service.GroupService;
 import com.cloudhandson.vpdbackoffice.service.PermissionService;
 import com.cloudhandson.vpdbackoffice.service.ProtectedObjectService;
+import com.cloudhandson.vpdbackoffice.service.UserService;
+import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
 import java.util.List;
+import java.util.Map;
+import java.util.Set;
 import java.util.stream.Collectors;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
@@ -24,13 +32,19 @@ public class PermissionController {
   private static final Logger log = LoggerFactory.getLogger(PermissionController.class);
   private final PermissionService permissionService;
   private final ProtectedObjectService protectedObjectService;
+  private final UserService userService;
+  private final GroupService groupService;
 
   public PermissionController(
       PermissionService permissionService,
-      ProtectedObjectService protectedObjectService
+      ProtectedObjectService protectedObjectService,
+      UserService userService,
+      GroupService groupService
   ) {
     this.permissionService = permissionService;
     this.protectedObjectService = protectedObjectService;
+    this.userService = userService;
+    this.groupService = groupService;
   }
 
   @GetMapping("/permissions/object-columns")
@@ -68,6 +82,8 @@ public class PermissionController {
     long objectsAt = System.nanoTime();
     var roles = permissionService.findRoles();
     long rolesAt = System.nanoTime();
+    var roleImpact = buildRoleImpact(roles);
+    long roleImpactAt = System.nanoTime();
     var columnsByObject = objects.stream()
         .collect(Collectors.toMap(
             object -> object.objectId(),
@@ -96,10 +112,11 @@ public class PermissionController {
     long dbObjectsAt = System.nanoTime();
     var permissions = permissionService.findPermissionViews();
     long permissionsAt = System.nanoTime();
-    log.info("permissions page timings: objects={}ms roles={}ms columns={}ms dbObjects={}ms permissions={}ms total={}ms",
+    log.info("permissions page timings: objects={}ms roles={}ms roleImpact={}ms columns={}ms dbObjects={}ms permissions={}ms total={}ms",
         elapsedMillis(started, objectsAt),
         elapsedMillis(objectsAt, rolesAt),
-        elapsedMillis(rolesAt, columnsAt),
+        elapsedMillis(rolesAt, roleImpactAt),
+        elapsedMillis(roleImpactAt, columnsAt),
         elapsedMillis(columnsAt, dbObjectsAt),
         elapsedMillis(dbObjectsAt, permissionsAt),
         elapsedMillis(started, permissionsAt));
@@ -108,11 +125,60 @@ public class PermissionController {
     model.addAttribute("columnsByObject", columnsByObject);
     model.addAttribute("maskableColumnsByObject", maskableColumnsByObject);
     model.addAttribute("maskableColumnLabelsByObject", maskableColumnLabelsByObject);
+    model.addAttribute("directUsersByRole", roleImpact.directUsersByRole());
+    model.addAttribute("groupsByRole", roleImpact.groupsByRole());
+    model.addAttribute("groupUsersByRole", roleImpact.groupUsersByRole());
     model.addAttribute("dbObjects", dbObjects);
     model.addAttribute("permissions", permissions);
     return "permissions";
   }
 
+  private RoleImpact buildRoleImpact(List<AppRole> roles) {
+    Map<Long, Set<String>> directUsersByRole = emptyRoleSetMap(roles);
+    userService.findUserRoles().forEach(row ->
+        directUsersByRole.computeIfAbsent(row.roleId(), ignored -> new LinkedHashSet<>()).add(row.username()));
+
+    Map<Long, Set<String>> groupsByRole = emptyRoleSetMap(roles);
+    Map<Long, List<String>> usersByGroup = groupService.findGroupUsers().stream()
+        .collect(Collectors.groupingBy(
+            row -> row.groupId(),
+            LinkedHashMap::new,
+            Collectors.mapping(row -> row.username(), Collectors.toList())
+        ));
+    Map<Long, Set<String>> groupUsersByRole = emptyRoleSetMap(roles);
+    groupService.findGroupRoles().forEach(row -> {
+      groupsByRole.computeIfAbsent(row.roleId(), ignored -> new LinkedHashSet<>())
+          .add(row.groupCode() + " / " + row.groupName());
+      groupUsersByRole.computeIfAbsent(row.roleId(), ignored -> new LinkedHashSet<>())
+          .addAll(usersByGroup.getOrDefault(row.groupId(), List.of()));
+    });
+
+    return new RoleImpact(
+        toListMap(directUsersByRole),
+        toListMap(groupsByRole),
+        toListMap(groupUsersByRole)
+    );
+  }
+
+  private Map<Long, Set<String>> emptyRoleSetMap(List<AppRole> roles) {
+    Map<Long, Set<String>> map = new LinkedHashMap<>();
+    roles.forEach(role -> map.put(role.roleId(), new LinkedHashSet<>()));
+    return map;
+  }
+
+  private Map<Long, List<String>> toListMap(Map<Long, Set<String>> source) {
+    Map<Long, List<String>> map = new LinkedHashMap<>();
+    source.forEach((key, values) -> map.put(key, new ArrayList<>(values)));
+    return map;
+  }
+
+  private record RoleImpact(
+      Map<Long, List<String>> directUsersByRole,
+      Map<Long, List<String>> groupsByRole,
+      Map<Long, List<String>> groupUsersByRole
+  ) {
+  }
+
   private long elapsedMillis(long from, long to) {
     return (to - from) / 1_000_000;
   }
diff --git a/src/main/resources/static/css/app.css b/src/main/resources/static/css/app.css
index 464527d..66f7c24 100644
--- a/src/main/resources/static/css/app.css
+++ b/src/main/resources/static/css/app.css
@@ -520,6 +520,33 @@ body {
   margin: 0;
 }
 
+.effective-preview dl {
+  display: grid;
+  gap: .75rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
+  margin: 0;
+}
+
+.effective-preview dl > div {
+  background: var(--rw-surface-muted);
+  border: 1px solid var(--rw-border);
+  border-radius: 8px;
+  min-width: 0;
+  padding: .7rem;
+}
+
+.effective-preview dt {
+  color: var(--rw-muted);
+  font-size: .74rem;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
+.effective-preview dd {
+  margin: .25rem 0 0;
+  overflow-wrap: anywhere;
+}
+
 .policy-apply-flow {
   align-items: center;
   display: flex;
diff --git a/src/main/resources/static/js/app.js b/src/main/resources/static/js/app.js
index 3ccb841..74db992 100644
--- a/src/main/resources/static/js/app.js
+++ b/src/main/resources/static/js/app.js
@@ -363,17 +363,24 @@ async function syncRuleColumnOptions() {
   }
   const selectedOption = objectSelect.options[objectSelect.selectedIndex];
   const fallbackColumns = (selectedOption?.dataset.columns || '').split(',').filter(Boolean);
+  const applyColumns = (columns) => {
+    if (selectedOption) {
+      selectedOption.dataset.columns = columns.join(',');
+    }
+    renderRuleColumnOptions(columns);
+    updatePermissionWizardPreview(document);
+  };
   renderMaskableColumnOptions(selectedOption);
-  renderRuleColumnOptions(fallbackColumns);
+  applyColumns(fallbackColumns);
   try {
     const response = await fetch(`/permissions/object-columns?objectRef=${encodeURIComponent(objectSelect.value)}`);
     if (!response.ok) {
       return;
     }
     const columns = await response.json();
-    renderRuleColumnOptions(Array.isArray(columns) ? columns : fallbackColumns);
+    applyColumns(Array.isArray(columns) ? columns : fallbackColumns);
   } catch (error) {
-    renderRuleColumnOptions(fallbackColumns);
+    applyColumns(fallbackColumns);
   }
 }
 
@@ -406,6 +413,38 @@ function selectedText(select) {
   return select.options[select.selectedIndex].textContent.trim();
 }
 
+function selectedOption(select) {
+  if (!select || select.selectedIndex < 0) {
+    return null;
+  }
+  return select.options[select.selectedIndex];
+}
+
+function splitList(value, separator = '|') {
+  return (value || '')
+      .split(separator)
+      .map((item) => item.trim())
+      .filter(Boolean);
+}
+
+function formatList(values, emptyText) {
+  if (!values.length) {
+    return emptyText;
+  }
+  const shown = values.slice(0, 4).join(', ');
+  return values.length > 4 ? `${shown} 외 ${values.length - 4}` : shown;
+}
+
+function setWizardPreview(wizard, name, value) {
+  wizard.querySelectorAll(`[data-preview="${name}"]`).forEach((target) => {
+    target.textContent = value;
+  });
+}
+
+function sqlLiteral(value) {
+  return `'${String(value || '').replaceAll("'", "''")}'`;
+}
+
 function collectWizardRules(root) {
   return Array.from(root.querySelectorAll('.rule-row')).map((row) => {
     const column = row.querySelector('[name="ruleColumn"]')?.value || '';
@@ -428,6 +467,40 @@ function collectWizardRules(root) {
   }).filter(Boolean);
 }
 
+function collectWizardPredicates(root) {
+  return Array.from(root.querySelectorAll('.rule-row')).map((row) => {
+    const column = row.querySelector('[name="ruleColumn"]')?.value || '';
+    const type = row.querySelector('[name="ruleType"]')?.value || '';
+    const value = row.querySelector('[name="ruleValue"]')?.value || '';
+    const displayColumn = column || {
+      MY_DEPT: 'DEPT_CODE',
+      SELF: 'OWNER_EMP_NO',
+      DEPT: 'DEPT_CODE',
+      EMP_NO: 'OWNER_EMP_NO',
+      ALL: ''
+    }[type] || '';
+    if (type === 'ALL') {
+      return '1 = 1';
+    }
+    if (type === 'MY_DEPT') {
+      return `${displayColumn} = SYS_CONTEXT('CB_AGENT_CTX', 'DEPT_CODE')`;
+    }
+    if (type === 'SELF') {
+      return `${displayColumn} = SYS_CONTEXT('CB_AGENT_CTX', 'EMP_NO')`;
+    }
+    if (type === 'DEPT' || type === 'EMP_NO') {
+      return `${displayColumn} = ${sqlLiteral(value)}`;
+    }
+    if (type === '=') {
+      return `TO_CHAR(${displayColumn}) = ${sqlLiteral(value)}`;
+    }
+    if (type === '!=') {
+      return `TO_CHAR(${displayColumn}) <> ${sqlLiteral(value)}`;
+    }
+    return '';
+  }).filter(Boolean);
+}
+
 function updatePermissionWizardPreview(root = document) {
   const wizard = root.querySelector('[data-permission-wizard]');
   if (!wizard) {
@@ -437,27 +510,52 @@ function updatePermissionWizardPreview(root = document) {
   const objectSelect = wizard.querySelector('[name="objectRef"]');
   const effectSelect = wizard.querySelector('[name="permissionEffect"]');
   const visibleColumns = wizard.querySelector('[name="visibleColumns"]')?.value.trim() || '';
-  const roleOption = roleSelect?.options[roleSelect.selectedIndex];
+  const roleOption = selectedOption(roleSelect);
+  const objectOption = selectedOption(objectSelect);
   const effect = effectSelect?.value || 'ALLOW';
   const rules = collectWizardRules(wizard);
+  const predicates = collectWizardPredicates(wizard);
   const ruleText = rules.length ? rules.join(', ') : '행 규칙 없음';
+  const directUsers = splitList(roleOption?.dataset.directUsers || '');
+  const groups = splitList(roleOption?.dataset.groups || '');
+  const groupUsers = splitList(roleOption?.dataset.groupUsers || '');
+  const objectColumns = splitList(objectOption?.dataset.columns || '', ',');
+  const maskableColumns = splitList(objectOption?.dataset.maskableColumns || '', ',');
+  const visibleColumnList = splitList(visibleColumns, ',').map((column) => column.toUpperCase());
+  const nullColumns = maskableColumns.filter((column) => !visibleColumnList.includes(column.toUpperCase()));
   const rowPolicy = effect === 'DENY'
       ? `거부 규칙: ${ruleText}`
       : `허용 규칙: ${ruleText}`;
+  const predicateText = effect === 'DENY'
+      ? (rules.includes('ALL') ? 'DENY ALL: 1 = 0' : `DENY 후보: NOT (${predicates.join(' OR ') || '조건 없음'})`)
+      : `ALLOW 후보: ${predicates.join(' OR ') || '조건 없음'}`;
   const columnPolicy = visibleColumns
       ? `이 권한에서 원문 표시 허용: ${visibleColumns}`
       : '마스킹 대상 컬럼은 기본 정책대로 NULL/마스킹 처리';
+  const nullPolicy = !maskableColumns.length
+      ? '마스킹 대상 컬럼 없음'
+      : (nullColumns.length ? `NULL 처리: ${nullColumns.join(', ')}` : '선택한 마스킹 컬럼 모두 원문 표시 허용');
+  const affectedPrincipals = `직접 사용자 ${directUsers.length}명 / 그룹 ${groups.length}개 / 그룹 상속 사용자 ${groupUsers.length}명`;
 
   wizard.querySelector('[data-wizard-summary="role"]').textContent = selectedText(roleSelect);
   wizard.querySelector('[data-wizard-summary="object"]').textContent = selectedText(objectSelect);
   wizard.querySelector('[data-wizard-summary="effect"]').textContent = effect;
   wizard.querySelector('[data-wizard-summary="rules"]').textContent = ruleText;
 
-  wizard.querySelector('[data-preview="role"]').textContent = selectedText(roleSelect);
-  wizard.querySelector('[data-preview="sensitivity"]').textContent = roleOption?.dataset.maxSensitivity || 'PUBLIC';
-  wizard.querySelector('[data-preview="object"]').textContent = selectedText(objectSelect);
-  wizard.querySelector('[data-preview="rowPolicy"]').textContent = rowPolicy;
-  wizard.querySelector('[data-preview="columnPolicy"]').textContent = columnPolicy;
+  setWizardPreview(wizard, 'role', selectedText(roleSelect));
+  setWizardPreview(wizard, 'sensitivity', roleOption?.dataset.maxSensitivity || 'PUBLIC');
+  setWizardPreview(wizard, 'object', objectOption?.dataset.objectDisplay || selectedText(objectSelect));
+  setWizardPreview(wizard, 'directUsers', formatList(directUsers, '직접 부여 사용자 없음'));
+  setWizardPreview(wizard, 'roleGroups', formatList(groups, '역할이 부여된 그룹 없음'));
+  setWizardPreview(wizard, 'groupUsers', formatList(groupUsers, '그룹 상속 사용자 없음'));
+  setWizardPreview(wizard, 'affectedPrincipals', affectedPrincipals);
+  setWizardPreview(wizard, 'objectColumns', formatList(objectColumns, '컬럼 조회 전'));
+  setWizardPreview(wizard, 'objectColumnsFinal', formatList(objectColumns, '컬럼 조회 전'));
+  setWizardPreview(wizard, 'maskableColumns', formatList(maskableColumns, '마스킹 대상 컬럼 없음'));
+  setWizardPreview(wizard, 'rowPolicy', rowPolicy);
+  setWizardPreview(wizard, 'predicatePreview', predicateText);
+  setWizardPreview(wizard, 'columnPolicy', columnPolicy);
+  setWizardPreview(wizard, 'nullPolicy', nullPolicy);
 }
 
 function activatePermissionWizardStep(wizard, step) {
diff --git a/src/main/resources/templates/permissions.html b/src/main/resources/templates/permissions.html
index b48c2ad..caf1b07 100644
--- a/src/main/resources/templates/permissions.html
+++ b/src/main/resources/templates/permissions.html
@@ -59,10 +59,21 @@
             <option th:each="role : ${roles}"
                     th:value="${role.roleId()}"
                     th:text="${role.roleName()}"
-                    th:attr="data-max-sensitivity=${role.maxSensitivityLevel()}"></option>
+                    th:attr="data-max-sensitivity=${role.maxSensitivityLevel()},
+                             data-direct-users=${#strings.listJoin(directUsersByRole[role.roleId()], '|')},
+                             data-groups=${#strings.listJoin(groupsByRole[role.roleId()], '|')},
+                             data-group-users=${#strings.listJoin(groupUsersByRole[role.roleId()], '|')}"></option>
           </select>
         </label>
         <p class="wizard-hint">선택한 역할의 민감도 허용 상한도 preview에 반영됩니다.</p>
+        <div class="effective-preview">
+          <div class="field-block-title">선택 역할 영향도</div>
+          <dl>
+            <div><dt>직접 사용자</dt><dd data-preview="directUsers">-</dd></div>
+            <div><dt>역할 보유 그룹</dt><dd data-preview="roleGroups">-</dd></div>
+            <div><dt>그룹 상속 사용자</dt><dd data-preview="groupUsers">-</dd></div>
+          </dl>
+        </div>
       </div>
 
       <div class="wizard-panel" data-wizard-step="2">
@@ -79,7 +90,8 @@
             <optgroup label="등록된 보호 객체">
               <option th:each="object : ${objects}"
                       th:value="${'protected:' + object.objectId()}"
-                      th:attr="data-columns=${#strings.listJoin(columnsByObject[object.objectId()], ',')},
+                      th:attr="data-object-display=${object.displayName()},
+                               data-columns=${#strings.listJoin(columnsByObject[object.objectId()], ',')},
                                data-maskable-columns=${#strings.listJoin(maskableColumnsByObject[object.objectId()], ',')},
                                data-maskable-labels=${#strings.listJoin(maskableColumnLabelsByObject[object.objectId()], '|')}"
                       th:text="${object.displayName()}"></option>
@@ -87,11 +99,19 @@
             <optgroup label="DB 스키마 객체">
               <option th:each="dbObject : ${dbObjects}"
                       th:value="${'db:' + dbObject.value()}"
+                      th:attr="data-object-display=${dbObject.value()}"
                       th:text="${dbObject.label()}"></option>
             </optgroup>
           </select>
         </label>
         <p class="wizard-hint">DB 스키마 객체를 선택하면 저장 시 보호 객체가 자동 등록됩니다.</p>
+        <div class="effective-preview">
+          <div class="field-block-title">선택 객체 컬럼</div>
+          <dl>
+            <div><dt>전체 컬럼</dt><dd data-preview="objectColumns">-</dd></div>
+            <div><dt>마스킹 대상</dt><dd data-preview="maskableColumns">-</dd></div>
+          </dl>
+        </div>
       </div>
 
       <div class="wizard-panel" data-wizard-step="3">
@@ -170,8 +190,12 @@
             <div><dt>역할</dt><dd data-preview="role">-</dd></div>
             <div><dt>민감도 상한</dt><dd data-preview="sensitivity">-</dd></div>
             <div><dt>보호 객체</dt><dd data-preview="object">-</dd></div>
+            <div><dt>적용 대상</dt><dd data-preview="affectedPrincipals">-</dd></div>
+            <div><dt>객체 컬럼</dt><dd data-preview="objectColumnsFinal">-</dd></div>
             <div><dt>행 접근</dt><dd data-preview="rowPolicy">-</dd></div>
+            <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>
           </dl>
         </div>
       </div>