[UX] #577 focus effective access on selected user

src/main/resources/static/js/app.js

@@ -630,6 +630,54 @@ function filterEffectiveMatrixTable(select) {
     row.innerHTML = `<td colspan="${columnCount}" class="text-muted">${table.dataset.emptyMessage || '선택한 항목이 없습니다.'}</td>`;
     body?.appendChild(row);
   }
+  if (select.matches('[data-effective-user-select]')) {
+    updateEffectiveUserFocus(table, value);
+  }
+}
+
+function updateEffectiveUserFocus(table, userId) {
+  const focus = document.querySelector('[data-effective-user-focus]');
+  if (!focus || !table) {
+    return;
+  }
+  const row = Array.from(table.querySelectorAll('tbody tr[data-effective-id]'))
+      .find((item) => item.dataset.effectiveId === (userId || ''));
+  const values = {
+    username: row?.dataset.username || '사용자 선택',
+    profile: row?.dataset.profile || '사번 / 부서',
+    directRoles: row?.dataset.directRoles || '-',
+    inheritance: row?.dataset.inheritance || '-',
+    effectiveRoles: row?.dataset.effectiveRoles || '-',
+    objects: row?.dataset.objects || '-',
+    permissionCount: row?.dataset.permissionCount || '0'
+  };
+  Object.entries(values).forEach(([field, value]) => {
+    const target = focus.querySelector(`[data-effective-user-field="${field}"]`);
+    if (target) {
+      target.textContent = value;
+    }
+  });
+}
+
+function initEffectiveMatrixTabs() {
+  const tabs = document.querySelectorAll('[data-effective-tab]');
+  const panes = document.querySelectorAll('[data-effective-pane]');
+  if (!tabs.length || !panes.length) {
+    return;
+  }
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      const target = tab.dataset.effectiveTab;
+      tabs.forEach((item) => {
+        const active = item === tab;
+        item.classList.toggle('is-active', active);
+        item.setAttribute('aria-selected', String(active));
+      });
+      panes.forEach((pane) => {
+        pane.hidden = pane.dataset.effectivePane !== target;
+      });
+    });
+  });
 }
 
 function initEffectiveMatrixFilters() {
@@ -955,6 +1003,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
   initTokenContextPreviews();
   initEffectiveMatrixFilters();
+  initEffectiveMatrixTabs();
   const objectSelect = document.querySelector('select[name="objectRef"]');
   if (objectSelect) {
     objectSelect.addEventListener('change', () => {