@things-factory/auth-ui 10.1.7 → 10.1.13

package/dist-client/components/role-privilege-picker-state.d.ts

@@ -0,0 +1,11 @@
+/** 검색·선택 상태는 Lit 화면 밖에서도 같은 규칙으로 검증한다. */
+export type PrivilegeModuleRef = {
+    category: string;
+};
+/**
+ * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데
+ * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.
+ */
+export declare function filterPrivilegeModules<T extends PrivilegeModuleRef>(modules: T[], keyword: string, labelOf: (category: string) => string): T[];
+/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */
+export declare function selectedVisibleModule<T extends PrivilegeModuleRef>(modules: T[], selected: string): string;

package/dist-client/components/role-privilege-picker-state.js

@@ -0,0 +1,15 @@
+/**
+ * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데
+ * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.
+ */
+export function filterPrivilegeModules(modules, keyword, labelOf) {
+    const needle = keyword.trim().toLocaleLowerCase();
+    if (!needle)
+        return modules;
+    return modules.filter(module => [module.category, labelOf(module.category)].some(value => value.toLocaleLowerCase().includes(needle)));
+}
+/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */
+export function selectedVisibleModule(modules, selected) {
+    return modules.some(module => module.category === selected) ? selected : modules[0]?.category || '';
+}
+//# sourceMappingURL=role-privilege-picker-state.js.map

package/dist-client/components/role-privilege-picker-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-privilege-picker-state.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker-state.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,MAAM,UAAU,sBAAsB,CACpC,OAAY,EACZ,OAAe,EACf,OAAqC;IAErC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAA;IACjD,IAAI,CAAC,MAAM;QAAE,OAAO,OAAO,CAAA;IAE3B,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAC7B,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CACtG,CAAA;AACH,CAAC;AAED,wCAAwC;AACxC,MAAM,UAAU,qBAAqB,CAA+B,OAAY,EAAE,QAAgB;IAChG,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,EAAE,CAAA;AACrG,CAAC","sourcesContent":["/** 검색·선택 상태는 Lit 화면 밖에서도 같은 규칙으로 검증한다. */\nexport type PrivilegeModuleRef = { category: string }\n\n/**\n * 모듈은 코드(category)와 사람이 보는 이름 모두로 찾는다. 관리자가 「사용자」를 입력했는데\n * 내부 코드 `user`만 비교하면 결과가 없다고 나오는 것은 검색으로서 실패다.\n */\nexport function filterPrivilegeModules<T extends PrivilegeModuleRef>(\n  modules: T[],\n  keyword: string,\n  labelOf: (category: string) => string\n): T[] {\n  const needle = keyword.trim().toLocaleLowerCase()\n  if (!needle) return modules\n\n  return modules.filter(module =>\n    [module.category, labelOf(module.category)].some(value => value.toLocaleLowerCase().includes(needle))\n  )\n}\n\n/** 검색 결과가 바뀌어 선택한 모듈이 사라지면 첫 결과를 연다. */\nexport function selectedVisibleModule<T extends PrivilegeModuleRef>(modules: T[], selected: string): string {\n  return modules.some(module => module.category === selected) ? selected : modules[0]?.category || ''\n}\n"]}

package/dist-client/components/role-privilege-picker-state.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-client/components/role-privilege-picker-state.test.js

@@ -0,0 +1,20 @@
+import { filterPrivilegeModules, selectedVisibleModule } from './role-privilege-picker-state';
+const modules = [{ category: 'user' }, { category: 'board' }, { category: 'worklist' }];
+const labels = { user: '사용자', board: '보드', worklist: '작업지시' };
+const labelOf = (category) => labels[category] || category;
+describe('권한 모듈 검색', () => {
+    it('화면에 보이는 한글 모듈명으로 찾는다', () => {
+        expect(filterPrivilegeModules(modules, '사용자', labelOf)).toEqual([{ category: 'user' }]);
+    });
+    it('코드 모듈명으로도 찾는다', () => {
+        expect(filterPrivilegeModules(modules, 'work', labelOf)).toEqual([{ category: 'worklist' }]);
+    });
+    it('검색 결과에서 사라진 선택은 첫 결과로 옮긴다', () => {
+        const visible = filterPrivilegeModules(modules, '작업', labelOf);
+        expect(selectedVisibleModule(visible, 'user')).toBe('worklist');
+    });
+    it('아직 보이는 선택은 유지한다', () => {
+        expect(selectedVisibleModule(modules, 'board')).toBe('board');
+    });
+});
+//# sourceMappingURL=role-privilege-picker-state.test.js.map

package/dist-client/components/role-privilege-picker-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"role-privilege-picker-state.test.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker-state.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAE7F,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;AACvF,MAAM,MAAM,GAA2B,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAA;AACrF,MAAM,OAAO,GAAG,CAAC,QAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAA;AAElE,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;IACzF,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,eAAe,EAAE,GAAG,EAAE;QACvB,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAA;IAC9F,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,OAAO,GAAG,sBAAsB,CAAC,OAAO,EAAE,IAAI,EAAE,OAAO,CAAC,CAAA;QAC9D,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACjE,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,iBAAiB,EAAE,GAAG,EAAE;QACzB,MAAM,CAAC,qBAAqB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC/D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { filterPrivilegeModules, selectedVisibleModule } from './role-privilege-picker-state'\n\nconst modules = [{ category: 'user' }, { category: 'board' }, { category: 'worklist' }]\nconst labels: Record<string, string> = { user: '사용자', board: '보드', worklist: '작업지시' }\nconst labelOf = (category: string) => labels[category] || category\n\ndescribe('권한 모듈 검색', () => {\n  it('화면에 보이는 한글 모듈명으로 찾는다', () => {\n    expect(filterPrivilegeModules(modules, '사용자', labelOf)).toEqual([{ category: 'user' }])\n  })\n\n  it('코드 모듈명으로도 찾는다', () => {\n    expect(filterPrivilegeModules(modules, 'work', labelOf)).toEqual([{ category: 'worklist' }])\n  })\n\n  it('검색 결과에서 사라진 선택은 첫 결과로 옮긴다', () => {\n    const visible = filterPrivilegeModules(modules, '작업', labelOf)\n    expect(selectedVisibleModule(visible, 'user')).toBe('worklist')\n  })\n\n  it('아직 보이는 선택은 유지한다', () => {\n    expect(selectedVisibleModule(modules, 'board')).toBe('board')\n  })\n})\n"]}

package/dist-client/components/role-privilege-picker.d.ts

@@ -31,7 +31,10 @@ export declare class RolePrivilegePicker extends LitElement {
     static styles: CSSResultGroup;
     /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */
     page?: any;
+    private searchInput?;
+    private readonly onSearchInput;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
+    updated(): void;
 }

package/dist-client/components/role-privilege-picker.js

@@ -30,6 +30,14 @@ import { RolePrivilegePage } from '../pages/role/role-privilege-page.js';
  * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.
  */
 let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.onSearchInput = (event) => {
+            /* ox-input-search 는 값을 확정할 때만 host `change`를 낸다. 모듈을 찾는 일은 입력 중에도
+               결과가 바뀌어야 하므로, 이 팝업의 shadow root 안 native input을 직접 듣는다. */
+            this.page?.updateKeyword?.(event);
+        };
+    }
     static { this.styles = RolePrivilegePage.styles; }
     connectedCallback() {
         super.connectedCallback();
@@ -38,6 +46,8 @@ let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
         }
     }
     disconnectedCallback() {
+        this.searchInput?.removeEventListener('input', this.onSearchInput);
+        this.searchInput = undefined;
         super.disconnectedCallback();
         if (this.page?.picker === this) {
             this.page.picker = undefined;
@@ -46,6 +56,15 @@ let RolePrivilegePicker = class RolePrivilegePicker extends LitElement {
     render() {
         return this.page?.renderPickerBody?.() ?? html ``;
     }
+    updated() {
+        const nextSearchInput = this.renderRoot.querySelector('ox-input-search')?.shadowRoot?.querySelector('input');
+        if (nextSearchInput === this.searchInput) {
+            return;
+        }
+        this.searchInput?.removeEventListener('input', this.onSearchInput);
+        this.searchInput = nextSearchInput;
+        this.searchInput?.addEventListener('input', this.onSearchInput);
+    }
 };
 __decorate([
     property({ type: Object }),

package/dist-client/components/role-privilege-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"role-privilege-picker.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;aAC1C,WAAM,GAAmB,iBAAiB,CAAC,MAAwB,AAA7D,CAA6D;IAK1E,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAA,EAAE,CAAA;IAClD,CAAC;;AAlB2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAW;AAJ3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAuB/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { html, LitElement } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RolePrivilegePage } from '../pages/role/role-privilege-page.js'\n\n/**\n * 「할 수 있는 일 더하기」의 **그릇**.\n *\n * ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────\n * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」\n *\n * 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을\n * 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.\n *\n * ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────\n * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를\n * 본다. 그것을 여기로 옮기면 **상태가 두 벌**이 되고, 그 순간 어느 쪽이 저장 범위인지\n * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.\n *\n * 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신\n * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).\n *\n * ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────\n * 팝업은 페이지의 shadow root **밖**에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면\n * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아\n * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.\n *\n * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.\n */\n@customElement('role-privilege-picker')\nexport class RolePrivilegePicker extends LitElement {\n  static styles: CSSResultGroup = RolePrivilegePage.styles as CSSResultGroup\n\n  /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */\n  @property({ type: Object }) page?: any\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.page) {\n      this.page.picker = this\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    if (this.page?.picker === this) {\n      this.page.picker = undefined\n    }\n  }\n\n  render() {\n    return this.page?.renderPickerBody?.() ?? html``\n  }\n}\n"]}
+{"version":3,"file":"role-privilege-picker.js","sourceRoot":"","sources":["../../client/components/role-privilege-picker.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,oCAAoC,CAAA;AAC3C,OAAO,mCAAmC,CAAA;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAA;AAExE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAA5C;;QAQY,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YAChD;yEAC6D;YAC7D,IAAI,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC,CAAA;IAmCH,CAAC;aA9CQ,WAAM,GAAmB,iBAAiB,CAAC,MAAwB,AAA7D,CAA6D;IAa1E,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;QACzB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAClE,IAAI,CAAC,WAAW,GAAG,SAAS,CAAA;QAC5B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAC5B,IAAI,IAAI,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAA;QAC9B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,IAAI,IAAI,CAAA,EAAE,CAAA;IAClD,CAAC;IAED,OAAO;QACL,MAAM,eAAe,GAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAS,EAAE,UAAU,EAAE,aAAa,CAC1G,OAAO,CACwB,CAAA;QAEjC,IAAI,eAAe,KAAK,IAAI,CAAC,WAAW,EAAE,CAAC;YACzC,OAAM;QACR,CAAC;QAED,IAAI,CAAC,WAAW,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QAClE,IAAI,CAAC,WAAW,GAAG,eAAe,CAAA;QAClC,IAAI,CAAC,WAAW,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;IACjE,CAAC;;AA1C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;iDAAW;AAJ3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA+C/B","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/checkbox/checkbox.js'\nimport '@operato/input/ox-input-search.js'\n\nimport { html, LitElement } from 'lit'\nimport type { CSSResultGroup } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { RolePrivilegePage } from '../pages/role/role-privilege-page.js'\n\n/**\n * 「할 수 있는 일 더하기」의 **그릇**.\n *\n * ── 왜 팝업인가 (사용자, 2026-09-11) ────────────────────────────────────────\n * 「'할 수 있는 일 더하기' 작동을 팝업으로 넓게 할 수 있었으면 어떤가? 지금은 좁아보이고」\n *\n * 페이지 안에 펼치면 본문(할 수 있는 일)이 아래로 밀리고, 남은 폭에서 모듈 46개와 축 목록을\n * 함께 봐야 한다. 고르는 동안은 **고르는 것만** 보는 것이 맞다.\n *\n * ── 이 부품은 아무것도 안 그린다 ────────────────────────────────────────────\n * 모듈 접기·축 줄·유령 규칙이 전부 페이지의 상태(`modules`·`assigned`·`selected`·`keyword`)를\n * 본다. 그것을 여기로 옮기면 **상태가 두 벌**이 되고, 그 순간 어느 쪽이 저장 범위인지\n * 흐려진다 — 옛 편집기가 `querySelectorAll` 로 범위를 만들던 결함이 정확히 그 모양이었다.\n *\n * 그래서 그리기는 페이지가 하고(`renderPickerBody`), 여기는 담아서 띄우기만 한다. 대신\n * 페이지가 토글할 때 이 부품에게 다시 그리라고 알린다(`page.picker`).\n *\n * ── 스타일도 한 벌이다 ──────────────────────────────────────────────────────\n * 팝업은 페이지의 shadow root **밖**에 뜨므로 페이지 스타일이 여기까지 안 온다. 베껴 두면\n * 한쪽만 고쳐지는 날이 오고, 오늘 이 화면에서 그 부류를 이미 만났다 — 칩 시절 CSS 가 남아\n * 새 규칙을 이겼다. 그래서 페이지의 `styles` 를 그대로 가져간다.\n *\n * 페이지가 이 파일을 **동적으로** 들이기 때문에 이 import 가 순환이 되지 않는다.\n */\n@customElement('role-privilege-picker')\nexport class RolePrivilegePicker extends LitElement {\n  static styles: CSSResultGroup = RolePrivilegePage.styles as CSSResultGroup\n\n  /** 담는 페이지. 이 부품은 그것의 `renderPickerBody()` 를 그린다. */\n  @property({ type: Object }) page?: any\n\n  private searchInput?: HTMLInputElement\n\n  private readonly onSearchInput = (event: Event) => {\n    /* ox-input-search 는 값을 확정할 때만 host `change`를 낸다. 모듈을 찾는 일은 입력 중에도\n       결과가 바뀌어야 하므로, 이 팝업의 shadow root 안 native input을 직접 듣는다. */\n    this.page?.updateKeyword?.(event)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    if (this.page) {\n      this.page.picker = this\n    }\n  }\n\n  disconnectedCallback() {\n    this.searchInput?.removeEventListener('input', this.onSearchInput)\n    this.searchInput = undefined\n    super.disconnectedCallback()\n    if (this.page?.picker === this) {\n      this.page.picker = undefined\n    }\n  }\n\n  render() {\n    return this.page?.renderPickerBody?.() ?? html``\n  }\n\n  updated() {\n    const nextSearchInput = (this.renderRoot.querySelector('ox-input-search') as any)?.shadowRoot?.querySelector(\n      'input'\n    ) as HTMLInputElement | undefined\n\n    if (nextSearchInput === this.searchInput) {\n      return\n    }\n\n    this.searchInput?.removeEventListener('input', this.onSearchInput)\n    this.searchInput = nextSearchInput\n    this.searchInput?.addEventListener('input', this.onSearchInput)\n  }\n}\n"]}

package/dist-client/pages/role/role-privilege-page.d.ts

@@ -46,6 +46,7 @@ export declare class RolePrivilegePage extends RolePrivilegePage_base {
     private mySubdomain;
     private fetchState;
     private saving;
+    private dirty;
     /**
      * 부모 도메인의 역할은 여기서 못 고친다 — `updateRole` 의 범위가 `domain.id` 하나다.
      * 목록이 상속으로 보여 주므로 관리자가 여기까지 온다. 읽기 전용으로 두고 어디로 가야 하는지
@@ -54,6 +55,18 @@ export declare class RolePrivilegePage extends RolePrivilegePage_base {
     private get inherited();
     private get savable();
     private get visibleModules();
+    /**
+     * `role-privilege-picker` 는 이 페이지의 상태를 읽어 그린다. 둘은 서로 다른 shadow root 이므로
+     * 여기 state 만 바꾸면 picker 는 다시 그릴 이유를 알지 못한다. 검색·모듈 선택은 그 누락 때문에
+     * 눌러도 화면이 그대로였다.
+     */
+    private refreshPicker;
+    private selectModule;
+    /**
+     * ox-input-search 의 `change` 는 입력을 끝내고 포커스를 옮길 때만 온다. 모듈을 찾는 칸은
+     * 입력하는 즉시 좁혀져야 하므로 shadow 경계를 넘어오는 native input 이벤트도 함께 받는다.
+     */
+    private updateKeyword;
     get context(): {
         title: {
             icon: string;
@@ -62,6 +75,8 @@ export declare class RolePrivilegePage extends RolePrivilegePage_base {
         help: string;
         actions: {
             title: string;
+            disabled: boolean;
+            disabledTitle: string;
             action: () => Promise<void>;
         }[];
     };
@@ -168,6 +183,9 @@ export declare class RolePrivilegePage extends RolePrivilegePage_base {
     /** 평평한 목록을 모듈로 접는다. 축 순서는 아는 것 먼저, 나머지는 이름 순. */
     private build;
     private onToggle;
+    /** 라벨·설명을 포함한 행 전체를 누를 수 있게 한다. checkbox와 키보드 Space는 native change가 맡는다. */
+    private toggleCellFromRow;
+    canDeactivate(): Promise<boolean>;
     /**
      * 저장.
      *

package/dist-client/pages/role/role-privilege-page.js

@@ -8,9 +8,11 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next, localize } from '@operato/i18n';
 import { openPopup } from '@operato/layout';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { PageView } from '@operato/shell';
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles';
 import { getDomain } from '@things-factory/auth-base/dist-client';
+import { filterPrivilegeModules, selectedVisibleModule } from '../../components/role-privilege-picker-state.js';
 /** 아는 축은 사람 말로 쓰고, 그 순서로 세운다. 모르는 축은 자기 이름으로 뒤에 붙는다. */
 const KNOWN_AXES = ['query', 'mutation', 'execute'];
 const AXIS_LABEL = {
@@ -63,6 +65,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         this.mySubdomain = '';
         this.fetchState = 'loading';
         this.saving = false;
+        this.dirty = false;
     }
     static { this.styles = [
         ScrollbarStyles,
@@ -198,6 +201,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         gap: 4px 10px;
         padding: 12px 14px;
         border-bottom: 1px solid var(--md-sys-color-surface-variant);
+        cursor: pointer;
       }
 
       ul[axes] li:last-child {
@@ -214,6 +218,39 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         cursor: default;
       }
 
+      ul[axes] li[ghost],
+      ul[axes] li[readonly] {
+        cursor: default;
+      }
+
+      [picker-footer] {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        color: var(--md-sys-color-on-surface-variant);
+        font-size: 0.85rem;
+      }
+
+      [picker-footer] button {
+        flex: 0 0 auto;
+        padding: 8px 16px;
+        border: 0;
+        border-radius: var(--md-sys-shape-corner-small, 6px);
+        color: var(--md-sys-color-on-primary);
+        background-color: var(--md-sys-color-primary);
+        font: inherit;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      [picker-footer] button:disabled {
+        cursor: default;
+        opacity: 0.45;
+      }
+
       /* 설명은 **본문**이다 — tooltip 이 아니다. 체크박스 아래 칸을 비워 두고 거기 놓는다. */
       ul[axes] [says] {
         grid-column: 2;
@@ -435,8 +472,35 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         return this.fetchState === 'loaded' && !this.saving && !this.inherited;
     }
     get visibleModules() {
-        const keyword = this.keyword.trim().toLowerCase();
-        return keyword ? this.modules.filter(m => m.category.toLowerCase().includes(keyword)) : this.modules;
+        return filterPrivilegeModules(this.modules, this.keyword, moduleLabel);
+    }
+    /**
+     * `role-privilege-picker` 는 이 페이지의 상태를 읽어 그린다. 둘은 서로 다른 shadow root 이므로
+     * 여기 state 만 바꾸면 picker 는 다시 그릴 이유를 알지 못한다. 검색·모듈 선택은 그 누락 때문에
+     * 눌러도 화면이 그대로였다.
+     */
+    refreshPicker() {
+        this.picker?.requestUpdate();
+    }
+    selectModule(category) {
+        if (this.selected === category) {
+            return;
+        }
+        this.selected = category;
+        this.refreshPicker();
+    }
+    /**
+     * ox-input-search 의 `change` 는 입력을 끝내고 포커스를 옮길 때만 온다. 모듈을 찾는 칸은
+     * 입력하는 즉시 좁혀져야 하므로 shadow 경계를 넘어오는 native input 이벤트도 함께 받는다.
+     */
+    updateKeyword(event) {
+        const nativeInput = event.composedPath().find(node => node instanceof HTMLInputElement);
+        const keyword = nativeInput?.value ?? event.target?.value ?? '';
+        this.keyword = keyword;
+        /* 검색 결과에 현재 선택 모듈이 없으면 첫 결과를 바로 연다. 오른쪽에 이전 모듈의 축이
+           남아 있으면 검색이 안 된 것처럼 보이기 때문이다. */
+        this.selected = selectedVisibleModule(this.visibleModules, this.selected);
+        this.refreshPicker();
     }
     /*
      * The page is named after the screen, not after the role it happens to be showing.
@@ -459,6 +523,8 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
                 : [
                     {
                         title: i18next.t('button.save'),
+                        disabled: !this.dirty || !this.savable,
+                        disabledTitle: this.saving ? '권한을 저장하고 있습니다.' : '권한을 바꾼 뒤 저장할 수 있습니다.',
                         action: this.onSave.bind(this)
                     }
                 ]
@@ -639,7 +705,8 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
           <ox-input-search
             .placeholder=${i18next.t('text.filter by module name')}
             .value=${this.keyword}
-            @change=${(e) => (this.keyword = e.target.value ?? '')}
+            @input=${(event) => this.updateKeyword(event)}
+            @change=${(event) => this.updateKeyword(event)}
           ></ox-input-search>
           <div scroll>${this.renderModules()}</div>
         </div>
@@ -652,6 +719,18 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
           <div scroll>${this.renderAxes()}</div>
         </div>
       </div>
+      <div picker-footer>
+        <span>
+          ${this.saving
+            ? '권한을 저장하고 있습니다.'
+            : this.dirty
+                ? '변경 사항이 있습니다. 저장해야 적용됩니다.'
+                : '권한을 바꾼 뒤 저장할 수 있습니다.'}
+        </span>
+        <button ?disabled=${!this.savable || !this.dirty} @click=${() => this.onSave()}>
+          ${this.saving ? '저장 중…' : i18next.t('button.save')}
+        </button>
+      </div>
     `;
     }
     /**
@@ -686,7 +765,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         ${this.visibleModules.map(module => {
             const on = module.cells.filter(cell => this.assigned.has(cell.id)).length;
             return html `
-            <li ?selected=${module.category === this.selected} @click=${() => (this.selected = module.category)}>
+            <li ?selected=${module.category === this.selected} @click=${() => this.selectModule(module.category)}>
               <span>${moduleLabel(module.category)}</span>
               ${on
                 ? html `<span on>${i18next.t('text.x on', { x: on })}</span>`
@@ -711,7 +790,11 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         ${module.cells.map(cell => {
             const on = this.assigned.has(cell.id);
             return html `
-            <li ?ghost=${cell.deprecated}>
+            <li
+              ?ghost=${cell.deprecated}
+              ?readonly=${this.inherited || (cell.deprecated && !on)}
+              @click=${(event) => this.toggleCellFromRow(event, cell, on)}
+            >
               <input
                 type="checkbox"
                 id="cell-${cell.id}"
@@ -719,15 +802,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
                 ?disabled=${this.inherited || (cell.deprecated && !on)}
                 @change=${(e) => this.onToggle(cell.id, e.target.checked)}
               />
-              <label
-                for="cell-${cell.id}"
-                @click=${() => {
-                if (!this.inherited && !(cell.deprecated && !on)) {
-                    this.onToggle(cell.id, !on);
-                }
-            }}
-                >${axisLabel(cell.axis)}</label
-              >
+              <label for="cell-${cell.id}">${axisLabel(cell.axis)}</label>
 
               ${cell.deprecated
                 ? html `<div says>${i18next.t('text.privilege no longer declared')}</div>`
@@ -832,17 +907,43 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
         }
         this.modules = [...byCategory.values()].sort((a, b) => moduleLabel(a.category).localeCompare(moduleLabel(b.category)));
         this.assigned = assigned;
+        this.dirty = false;
         /* 고른 것이 없으면 첫 모듈을 연다 — 빈 오른쪽 판을 처음 화면으로 두지 않는다. */
         if (!this.modules.find(m => m.category === this.selected)) {
             this.selected = this.modules[0]?.category || '';
         }
     }
     onToggle(id, checked) {
+        if (this.assigned.has(id) === checked) {
+            return;
+        }
         const next = new Set(this.assigned);
         checked ? next.add(id) : next.delete(id);
         this.assigned = next;
+        this.dirty = true;
+        this.updateContext();
         /* 팝업은 자기 상태를 안 들고 이 페이지를 본다 — 열려 있으면 다시 그리라고 알린다. */
-        this.picker?.requestUpdate();
+        this.refreshPicker();
+    }
+    /** 라벨·설명을 포함한 행 전체를 누를 수 있게 한다. checkbox와 키보드 Space는 native change가 맡는다. */
+    toggleCellFromRow(event, cell, on) {
+        if (this.inherited || (cell.deprecated && !on) || event.target instanceof HTMLInputElement) {
+            return;
+        }
+        /* label의 기본 동작이 checkbox change를 한 번 더 보내지 않게 막는다. */
+        event.preventDefault();
+        this.onToggle(cell.id, !on);
+    }
+    async canDeactivate() {
+        if (!this.dirty) {
+            return true;
+        }
+        return await OxPrompt.open({
+            title: '저장하지 않은 변경 사항',
+            text: '수정된 권한이 있습니다. 저장하지 않고 이 페이지를 나가시겠습니까?',
+            confirmButton: { text: '저장하지 않고 나가기' },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
     }
     /**
      * 저장.
@@ -857,6 +958,7 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
             return;
         }
         this.saving = true;
+        this.updateContext();
         try {
             const response = await client.mutate({
                 mutation: gql `
@@ -879,9 +981,11 @@ let RolePrivilegePage = class RolePrivilegePage extends localize(i18next)(PageVi
             document.dispatchEvent(new CustomEvent('notify', { detail: { message: i18next.t('text.data_updated_successfully') } }));
             /* 유령을 뗐으면 목록에서 사라져야 하고, 켠 것이 요약에 반영돼야 한다. */
             await this.fetch();
+            this.dirty = false;
         }
         finally {
             this.saving = false;
+            this.updateContext();
         }
     }
 };
@@ -925,6 +1029,10 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], RolePrivilegePage.prototype, "saving", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], RolePrivilegePage.prototype, "dirty", void 0);
 RolePrivilegePage = __decorate([
     customElement('role-privilege-page')
 ], RolePrivilegePage);