@wipco/sdui 0.50.0 → 1.0.0

package/dist/{chunk-TUOG7EEI.js → chunk-RNOUXUBO.js}

@@ -1,7 +1,405 @@
-import { mergeStyle, containerLayoutStyle, joinClass } from './chunk-YQOMSWW5.js';
+import { mergeStyle, containerLayoutStyle, joinClass } from './chunk-5WW4MBRO.js';
 import React from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
+// src/warn-once.ts
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message, level = "error") {
+  if (warned.has(key)) return;
+  warned.add(key);
+  if (level === "warn") console.warn(message);
+  else console.error(message);
+}
+
+// src/plain-object.ts
+function isPlainObject(v) {
+  return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+
+// src/calc.ts
+function toNumber(v) {
+  if (typeof v === "number") return v;
+  if (typeof v === "string") {
+    const n = Number(v.replace(/,/g, ""));
+    return Number.isFinite(n) ? n : 0;
+  }
+  return 0;
+}
+function isNumericText(v) {
+  if (typeof v === "number") return true;
+  if (typeof v !== "string" || v === "") return false;
+  return Number.isFinite(Number(v.replace(/,/g, "")));
+}
+function orderingCompare(a, b) {
+  if (typeof a === "string" && typeof b === "string" && !isNumericText(a) && !isNumericText(b)) {
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+  const x = toNumber(a);
+  const y = toNumber(b);
+  return x < y ? -1 : x > y ? 1 : 0;
+}
+function looseEquals(a, b) {
+  return String(a ?? "") === String(b ?? "");
+}
+function isBlank(v) {
+  return v === null || v === void 0 || v === "";
+}
+function isEmptyValue(v) {
+  if (isBlank(v)) return true;
+  if (Array.isArray(v)) return v.length === 0;
+  if (isPlainObject(v)) return Object.keys(v).length === 0;
+  return false;
+}
+function fieldOf(row, field) {
+  if (!field) return row;
+  if (!isPlainObject(row)) return void 0;
+  if (Object.hasOwn(row, field)) return row[field];
+  if (!field.includes(".")) return void 0;
+  let current = row;
+  for (const segment of field.split(".")) {
+    if (!isPlainObject(current) || !Object.hasOwn(current, segment)) return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+var FIELD_OPS = /* @__PURE__ */ new Set([
+  "eq",
+  "ne",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "in",
+  "notIn",
+  "contains",
+  "startsWith",
+  "endsWith",
+  "isNull",
+  "isEmpty",
+  "intersects"
+]);
+function isFieldOpObject(v) {
+  return isPlainObject(v) && Object.keys(v).some((key) => FIELD_OPS.has(key));
+}
+function matchesFieldOps(actual, ops, resolve) {
+  return Object.entries(ops).every(([op, rawExpected]) => {
+    if (!FIELD_OPS.has(op)) return true;
+    const expected = resolve(rawExpected);
+    switch (op) {
+      case "eq":
+        return looseEquals(actual, expected);
+      case "ne":
+        return !looseEquals(actual, expected);
+      case "gt":
+        return orderingCompare(actual, expected) > 0;
+      case "gte":
+        return orderingCompare(actual, expected) >= 0;
+      case "lt":
+        return orderingCompare(actual, expected) < 0;
+      case "lte":
+        return orderingCompare(actual, expected) <= 0;
+      case "in":
+        return Array.isArray(expected) && expected.some((item) => looseEquals(actual, item));
+      case "notIn":
+        return !Array.isArray(expected) || !expected.some((item) => looseEquals(actual, item));
+      case "contains":
+        return String(actual ?? "").includes(String(expected ?? ""));
+      case "startsWith":
+        return String(actual ?? "").startsWith(String(expected ?? ""));
+      case "endsWith":
+        return String(actual ?? "").endsWith(String(expected ?? ""));
+      case "isNull":
+        return isBlank(actual) === Boolean(expected);
+      case "intersects": {
+        const mine = Array.isArray(actual) ? actual : [];
+        const theirs = Array.isArray(expected) ? expected : [];
+        if (mine.length === 0 || theirs.length === 0) return false;
+        const set = new Set(theirs.map((item) => String(item ?? "")));
+        return mine.some((item) => set.has(String(item ?? "")));
+      }
+      case "isEmpty":
+        return isEmptyValue(actual) === Boolean(expected);
+      default:
+        return true;
+    }
+  });
+}
+function matchesWhere(row, where, resolve) {
+  if (!isPlainObject(where)) return true;
+  return Object.entries(where).every(([key, condition]) => {
+    if (key === "AND") {
+      return Array.isArray(condition) && condition.every((sub) => matchesWhere(row, sub, resolve));
+    }
+    if (key === "OR") {
+      return Array.isArray(condition) && condition.some((sub) => matchesWhere(row, sub, resolve));
+    }
+    if (key === "NOT") {
+      return !matchesWhere(row, condition, resolve);
+    }
+    const actual = fieldOf(row, key);
+    if (isFieldOpObject(condition)) return matchesFieldOps(actual, condition, resolve);
+    return looseEquals(actual, resolve(condition));
+  });
+}
+var CALC_OPS = /* @__PURE__ */ new Set([
+  // 산술 (기존)
+  "sum",
+  "sub",
+  "mul",
+  "div",
+  "percent",
+  "count",
+  // 문자 (기존)
+  "concat",
+  "encode",
+  // 비교·논리 (기존)
+  "eq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "not",
+  // 논리 (신규) — 예전에는 스펙이 eq(concat(eq(a),eq(b)),"falsefalse")로 우회했다
+  "and",
+  "or",
+  // 값 고르기 (신규)
+  "if",
+  "match",
+  "coalesce",
+  // 목록·객체 (신규)
+  "get",
+  "pluck",
+  "filter",
+  "some",
+  "every",
+  "includes",
+  "distinct",
+  "except",
+  "groupBy",
+  "groupCount",
+  "entries",
+  "fromEntries",
+  "length",
+  "join",
+  "split",
+  "sortBy",
+  "map"
+]);
+function isFieldRef(value) {
+  return isPlainObject(value) && "$field" in value;
+}
+function substituteFields(template, row) {
+  if (isFieldRef(template)) {
+    return template.$field === true ? row : fieldOf(row, String(template.$field)) ?? null;
+  }
+  if (Array.isArray(template)) return template.map((item) => substituteFields(item, row));
+  if (isPlainObject(template)) {
+    const nested = isPlainObject(template.$calc) ? template.$calc : null;
+    if (nested && nested.op === "map") {
+      const inner = {};
+      for (const [key, value] of Object.entries(nested)) {
+        inner[key] = key === "select" ? value : substituteFields(value, row);
+      }
+      return { ...template, $calc: inner };
+    }
+    const out = {};
+    for (const [key, value] of Object.entries(template)) out[key] = substituteFields(value, row);
+    return out;
+  }
+  return template;
+}
+function evaluateCalc(calc, resolved, resolve) {
+  const op = typeof calc.op === "string" ? calc.op : "";
+  const field = typeof calc.field === "string" ? calc.field : void 0;
+  const first = resolved[0];
+  const list = Array.isArray(first) ? first : void 0;
+  const listOrEmpty = () => {
+    if (list) return list;
+    if (first !== void 0 && first !== null) {
+      warnOnce(
+        `calc:${op}:list`,
+        `[sdui] $calc(${op}): \uCCAB \uC778\uC790\uAC00 \uBC30\uC5F4\uC774 \uC544\uB2D9\uB2C8\uB2E4 \u2014 \uBE48 \uBAA9\uB85D\uC73C\uB85C \uCC98\uB9AC\uD569\uB2C8\uB2E4`
+      );
+    }
+    return [];
+  };
+  const nums = (v) => {
+    if (Array.isArray(v)) return v.map((row) => toNumber(fieldOf(row, field)));
+    return [toNumber(v)];
+  };
+  switch (op) {
+    /* ── 산술 ── */
+    case "sum":
+      return resolved.flatMap(nums).reduce((a, b) => a + b, 0);
+    case "count":
+      return resolved.reduce(
+        (a, v) => a + (Array.isArray(v) ? v.length : v == null ? 0 : 1),
+        0
+      );
+    case "sub": {
+      const items = resolved.map((v) => toNumber(v));
+      return items.length === 0 ? 0 : items.reduce((a, b) => a - b);
+    }
+    case "mul":
+      return resolved.map((v) => toNumber(v)).reduce((a, b) => a * b, 1);
+    case "div": {
+      const [a, b] = resolved.map((v) => toNumber(v));
+      return b === 0 ? 0 : a / b;
+    }
+    case "percent": {
+      const [a, b] = resolved.map((v) => toNumber(v));
+      return b === 0 ? 0 : Math.round(a / b * 1e3) / 10;
+    }
+    /* ── 문자 ── */
+    case "concat":
+      return resolved.map((v) => v == null ? "" : String(v)).join("");
+    case "encode":
+      return encodeURIComponent(resolved.map((v) => v == null ? "" : String(v)).join(""));
+    /* ── 비교·논리 ── */
+    case "eq":
+      return looseEquals(resolved[0], resolved[1]);
+    case "gt":
+      return orderingCompare(resolved[0], resolved[1]) > 0;
+    case "gte":
+      return orderingCompare(resolved[0], resolved[1]) >= 0;
+    case "lt":
+      return orderingCompare(resolved[0], resolved[1]) < 0;
+    case "lte":
+      return orderingCompare(resolved[0], resolved[1]) <= 0;
+    case "not":
+      return !resolved[0];
+    case "and":
+      return resolved.every(Boolean);
+    case "or":
+      return resolved.some(Boolean);
+    /* ── 값 고르기 ── */
+    case "if":
+      return resolved[0] ? resolve(calc.then ?? null) : resolve(calc.else ?? null);
+    case "match": {
+      const key = String(resolved[0] ?? "");
+      const cases = isPlainObject(calc.cases) ? calc.cases : {};
+      if (Object.hasOwn(cases, key)) return resolve(cases[key]);
+      return resolve(calc.default ?? null);
+    }
+    case "coalesce":
+      return resolved.find((v) => !isBlank(v)) ?? null;
+    /* ── 목록·객체 ── */
+    case "get": {
+      const [container, rawKey] = resolved;
+      if (Array.isArray(container)) {
+        if (typeof rawKey !== "number" && (typeof rawKey !== "string" || rawKey.trim() === "")) {
+          return null;
+        }
+        const index = Number(rawKey);
+        if (!Number.isInteger(index) || index < 0 || index >= container.length) return null;
+        return container[index] ?? null;
+      }
+      if (isPlainObject(container)) {
+        const key = rawKey == null ? "" : String(rawKey);
+        return Object.hasOwn(container, key) ? container[key] ?? null : null;
+      }
+      return null;
+    }
+    case "pluck":
+      return listOrEmpty().map((row) => fieldOf(row, field)).filter((v) => v !== null && v !== void 0);
+    case "filter":
+      return listOrEmpty().filter((row) => matchesWhere(row, calc.where, resolve));
+    case "some":
+      return listOrEmpty().some((row) => matchesWhere(row, calc.where, resolve));
+    case "every":
+      return listOrEmpty().every((row) => matchesWhere(row, calc.where, resolve));
+    case "includes": {
+      const needle = resolved[1];
+      if (typeof first === "string") return first.includes(String(needle ?? ""));
+      return listOrEmpty().some((row) => looseEquals(fieldOf(row, field), needle));
+    }
+    case "distinct": {
+      const seen = /* @__PURE__ */ new Set();
+      return listOrEmpty().filter((row) => {
+        const key = String(fieldOf(row, field) ?? "");
+        if (seen.has(key)) return false;
+        seen.add(key);
+        return true;
+      });
+    }
+    case "except": {
+      const remove = new Set(
+        (Array.isArray(resolved[1]) ? resolved[1] : []).map(
+          (row) => String(fieldOf(row, field) ?? "")
+        )
+      );
+      return listOrEmpty().filter(
+        (row) => !remove.has(String(fieldOf(row, field) ?? ""))
+      );
+    }
+    case "groupBy":
+    case "groupCount": {
+      const groups = /* @__PURE__ */ new Map();
+      for (const row of listOrEmpty()) {
+        const key = String(fieldOf(row, field) ?? "");
+        const bucket = groups.get(key);
+        if (bucket) bucket.push(row);
+        else groups.set(key, [row]);
+      }
+      const out = [...groups.entries()].map(
+        ([key, items]) => op === "groupCount" ? { key, count: items.length } : { key, items }
+      );
+      return out;
+    }
+    case "entries": {
+      if (!isPlainObject(first)) return [];
+      return Object.entries(first).map(([key, value]) => ({
+        key,
+        value
+      }));
+    }
+    case "fromEntries": {
+      const out = /* @__PURE__ */ Object.create(null);
+      for (const row of listOrEmpty()) {
+        if (!isPlainObject(row)) continue;
+        const key = row.key;
+        if (key === null || key === void 0 || key === "") continue;
+        out[String(key)] = row.value ?? null;
+      }
+      return { ...out };
+    }
+    case "length":
+      if (Array.isArray(first)) return first.length;
+      if (typeof first === "string") return first.length;
+      return 0;
+    case "join": {
+      const sep = typeof calc.sep === "string" ? calc.sep : ",";
+      return listOrEmpty().map((row) => {
+        const value = fieldOf(row, field);
+        return value == null ? "" : String(value);
+      }).join(sep);
+    }
+    case "split": {
+      const sep = typeof calc.sep === "string" ? calc.sep : ",";
+      let parts = String(first ?? "").split(sep);
+      if (calc.trim === true) parts = parts.map((part) => part.trim());
+      if (calc.take === void 0) return parts;
+      const index = toNumber(calc.take);
+      const at = index < 0 ? parts.length + index : index;
+      return parts[at] ?? null;
+    }
+    case "map": {
+      const template = calc.select;
+      if (template === void 0) return listOrEmpty();
+      return listOrEmpty().map((row) => resolve(substituteFields(template, row)));
+    }
+    case "sortBy": {
+      const desc = Boolean(calc.desc);
+      return [...listOrEmpty()].sort((a, b) => {
+        const order = orderingCompare(fieldOf(a, field), fieldOf(b, field));
+        return desc ? -order : order;
+      });
+    }
+    default:
+      return null;
+  }
+}
+
 // src/icons.ts
 var ICON_NODES = {
   "activity": [
@@ -687,14 +1085,8 @@ var ICON_NODES = {
     { t: "line", x1: "8", x2: "14", y1: "11", y2: "11" }
   ]
 };
-
-// src/warn-once.ts
-var warned = /* @__PURE__ */ new Set();
-function warnOnce(key, message, level = "error") {
-  if (warned.has(key)) return;
-  warned.add(key);
-  if (level === "warn") console.warn(message);
-  else console.error(message);
+function asArray(value) {
+  return Array.isArray(value) ? value : [];
 }
 function Icon({ name, size = 18, strokeWidth = 1.5, className = "", style, title, ...rest }) {
   const nodes = Object.hasOwn(ICON_NODES, name) ? ICON_NODES[name] : void 0;
@@ -1000,7 +1392,7 @@ function Tabs({ items = [], value, onChange, size = "md", onChrome = false, clas
       className: joinClass("wp-tabs", size === "lg" && "wp-tabs--lg", onChrome && "wp-tabs--onchrome", className),
       role: "tablist",
       ...rest,
-      children: items.map((item) => /* @__PURE__ */ jsxs(
+      children: asArray(items).map((item) => /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
@@ -1039,9 +1431,12 @@ function Table({
   if (hover) classes.push("wp-table--hover");
   if (sticky) classes.push("wp-table--sticky");
   if (className) classes.push(className);
-  if (!rows.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
+  const columnList = asArray(columns);
+  const rowList = asArray(rows);
+  const selectedList = asArray(selectedIds);
+  if (!rowList.length && empty) return /* @__PURE__ */ jsx(Fragment, { children: empty });
   return /* @__PURE__ */ jsxs("table", { className: classes.join(" "), ...rest, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx("th", { style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 }, children: column.sortable && onSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "wp-table__sort", onClick: () => onSort(column.key), children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columnList.map((column) => /* @__PURE__ */ jsx("th", { style: { width: column.width, textAlign: column.align === "right" ? "right" : void 0 }, children: column.sortable && onSort ? /* @__PURE__ */ jsxs("button", { type: "button", className: "wp-table__sort", onClick: () => onSort(column.key), children: [
       column.header,
       /* @__PURE__ */ jsx(
         Icon,
@@ -1051,18 +1446,18 @@ function Table({
         }
       )
     ] }) : column.header }, column.key)) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("tbody", { children: rowList.map((row, index) => /* @__PURE__ */ jsx(
       "tr",
       {
-        "aria-selected": selectedIds.indexOf(row?.[rowKey]) > -1 || void 0,
+        "aria-selected": selectedList.indexOf(row?.[rowKey]) > -1 || void 0,
         onClick: onRowClick ? () => onRowClick(row) : void 0,
         style: onRowClick ? { cursor: "pointer" } : void 0,
-        children: columns.map((column) => {
+        children: columnList.map((column) => {
           const cls = [];
           if (column.align === "right") cls.push("wp-table__num");
           if (column.mono) cls.push("wp-table__mono");
           if (column.strong) cls.push("wp-table__strong");
-          const raw = row?.[column.key];
+          const raw = column.key ? fieldOf(row, column.key) : void 0;
           let content;
           if (column.render) {
             content = column.render(row, index);
@@ -1224,7 +1619,7 @@ function SegmentedControl({ items = [], value, onChange, size = "md", className
   const classes = ["wp-seg"];
   if (size === "lg") classes.push("wp-seg--lg");
   if (className) classes.push(className);
-  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), role: "tablist", ...rest, children: items.map((it) => /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: classes.join(" "), role: "tablist", ...rest, children: asArray(items).map((it) => /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -1249,8 +1644,9 @@ function Avatar({ name = "", src, shape = "hex", size = "md", tone = "brand", cl
   return /* @__PURE__ */ jsx("span", { className: classes.join(" "), title: name || void 0, ...rest, children: src ? /* @__PURE__ */ jsx("img", { src, alt: name }) : initials });
 }
 function Breadcrumb({ items = [], className = "", ...rest }) {
-  return /* @__PURE__ */ jsx("nav", { className: ("wp-crumbs " + className).trim(), "aria-label": "\uC704\uCE58", ...rest, children: items.map((it, i) => {
-    const last = i === items.length - 1;
+  const list = asArray(items);
+  return /* @__PURE__ */ jsx("nav", { className: ("wp-crumbs " + className).trim(), "aria-label": "\uC704\uCE58", ...rest, children: list.map((it, i) => {
+    const last = i === list.length - 1;
     return /* @__PURE__ */ jsxs(React.Fragment, { children: [
       last ? /* @__PURE__ */ jsx("span", { className: "wp-crumbs__current", "aria-current": "page", children: it.label }) : /* @__PURE__ */ jsxs("a", { className: "wp-crumbs__item", href: it.href || "#", onClick: (e) => {
         if (!it.href) e.preventDefault();
@@ -1281,9 +1677,9 @@ function SidebarNav({ sections = [], value, onSelect, collapsed = false, light =
   if (collapsed) classes.push("wp-nav--collapsed");
   if (light) classes.push("wp-nav--light");
   if (className) classes.push(className);
-  return /* @__PURE__ */ jsx("nav", { className: classes.join(" "), ...rest, children: sections.map((s, si) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: classes.join(" "), ...rest, children: asArray(sections).map((s, si) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
     s.label ? /* @__PURE__ */ jsx("div", { className: "wp-nav__section", children: s.label }) : null,
-    (s.items || []).map((it) => /* @__PURE__ */ jsxs(
+    asArray(s.items).map((it) => /* @__PURE__ */ jsxs(
       "a",
       {
         href: it.href || "#",
@@ -1334,4 +1730,4 @@ function Tooltip({ label, shortcut, placement = "top", wrap = false, children, c
   );
 }
 
-export { Alert, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, EmptyState, Field, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, warnOnce };
+export { Alert, Avatar, Badge, Breadcrumb, Button, CALC_OPS, Card, Checkbox, Dialog, EmptyState, Field, ICON_NODES, Icon, IconButton, Input, Pagination, ProgressBar, Radio, SegmentedControl, Select, SidebarNav, Spinner, StatCard, Switch, Table, Tabs, Tag, Textarea, Toast, Tooltip, evaluateCalc, fieldOf, isPlainObject, toNumber, warnOnce };

package/dist/{chunk-4VZI3PLI.js → chunk-RYHEV5E3.js}

@@ -1,41 +1,15 @@
-import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-UMANGYRD.js';
-import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-DKPNFEVU.js';
-import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-TUOG7EEI.js';
-import { boxed } from './chunk-YQOMSWW5.js';
+import { fetchAllJobPositions } from './chunk-Z4PYMTTS.js';
+import { useSduiDispatch, useSduiCan, SduiDialog } from './chunk-TFGNKFL2.js';
+import { useSduiAdapter, hostFetchOf, defaultAdapter } from './chunk-KO6OEY3G.js';
+import { Card, Input, Button, Icon, Badge, IconButton } from './chunk-RNOUXUBO.js';
+import { boxed } from './chunk-5WW4MBRO.js';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-var PAGE_LIMIT = 500;
-var MAX_PAGES = 10;
-function toJobPosition(row) {
-  if (typeof row !== "object" || row === null) return [];
-  const record = row;
-  const { id, name } = record;
-  if (typeof id !== "string" || typeof name !== "string") return [];
-  const num = (a, b) => typeof a === "number" ? a : typeof b === "number" ? b : 0;
-  const active = record.is_active ?? record.isActive;
-  return [
-    {
-      id,
-      name,
-      rankOrder: num(record.rank_order, record.rankOrder),
-      sortOrder: num(record.sort_order, record.sortOrder),
-      isActive: typeof active === "boolean" ? active : true
-    }
-  ];
-}
+var DELETE_CONFIRM_DEFAULT = "'{name}' \uC9C1\uC704\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C?";
 async function fetchAllPositions(api, endpoint) {
-  const all = [];
-  for (let page = 0; page < MAX_PAGES; page += 1) {
-    const body = await api(`${endpoint}?limit=${PAGE_LIMIT}&offset=${page * PAGE_LIMIT}`, {
-      method: "GET"
-    });
-    const rows = Array.isArray(body?.data) ? body.data : [];
-    all.push(...rows.flatMap(toJobPosition));
-    const total = typeof body?.total === "number" ? body.total : null;
-    if (rows.length === 0 || total === null || all.length >= total) break;
-  }
-  return all;
+  const rows = await fetchAllJobPositions(api, endpoint);
+  return rows.flatMap((row) => row.id ? [{ ...row, id: row.id }] : []);
 }
 function groupByRank(positions) {
   const map = /* @__PURE__ */ new Map();
@@ -112,7 +86,8 @@ function RankBoardImpl({
   entity = "job_position",
   canCreate: canCreateProp,
   canUpdate: canUpdateProp,
-  canDelete: canDeleteProp
+  canDelete: canDeleteProp,
+  deleteConfirmMessage
 }) {
   const dispatch = useSduiDispatch();
   const can = useSduiCan();
@@ -377,10 +352,11 @@ function RankBoardImpl({
     );
   };
   const handleDelete = (position) => {
-    if (!window.confirm(
-      `'${position.name}' \uC9C1\uC704\uB97C \uC0AD\uC81C\uD558\uC2DC\uACA0\uC2B5\uB2C8\uAE4C? \uC0AD\uC81C\uB41C \uC9C1\uC704\uB294 \uC124\uC815 > \uD734\uC9C0\uD1B5\uC5D0\uC11C \uBCF5\uAD6C\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.`
-    ))
-      return;
+    const message = (deleteConfirmMessage || DELETE_CONFIRM_DEFAULT).replaceAll(
+      "{name}",
+      position.name
+    );
+    if (!window.confirm(message)) return;
     void runMutation(
       () => api(`${endpoint}/${encodeURIComponent(position.id)}`, {
         method: "DELETE"

package/dist/{chunk-AVRNQOB5.js → chunk-SAPBDJJQ.js}

@@ -1,5 +1,6 @@
-import { IconButton } from './chunk-TUOG7EEI.js';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useOverlayLayer, OverlayContainerContext, getOverlayRoot } from './chunk-XQPTSEJC.js';
+import { IconButton } from './chunk-RNOUXUBO.js';
+import { useState, useRef, useCallback, useEffect, useContext } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,6 +15,7 @@ function clamp(value, min, max) {
 function ImageViewer({ src, alt, open, onClose }) {
   const [view, setView] = useState(INITIAL_VIEW);
   const [dragging, setDragging] = useState(false);
+  const rootRef = useRef(null);
   const stageRef = useRef(null);
   const imgRef = useRef(null);
   const viewRef = useRef(view);
@@ -69,22 +71,15 @@ function ImageViewer({ src, alt, open, onClose }) {
   useEffect(() => {
     if (open) setView(INITIAL_VIEW);
   }, [open]);
+  useOverlayLayer(open, close, rootRef);
   useEffect(() => {
     if (!open) return;
-    const onKeyDown = (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        close();
-      }
-    };
-    document.addEventListener("keydown", onKeyDown);
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
-      document.removeEventListener("keydown", onKeyDown);
       document.body.style.overflow = previousOverflow;
     };
-  }, [open, close]);
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const stage = stageRef.current;
@@ -140,13 +135,17 @@ function ImageViewer({ src, alt, open, onClose }) {
     if (dragRef.current?.moved) return;
     if (event.target === event.currentTarget) close();
   };
+  const container = useContext(OverlayContainerContext);
   const zoomPercent = Math.round(view.scale * 100);
   const isInitial = view.scale === 1 && view.x === 0 && view.y === 0;
   if (!open || typeof document === "undefined") return null;
+  const portalRoot = container ?? getOverlayRoot();
+  if (!portalRoot) return null;
   return createPortal(
     /* @__PURE__ */ jsxs(
       "div",
       {
+        ref: rootRef,
         role: "dialog",
         "aria-modal": "true",
         "aria-label": alt ?? "\uC774\uBBF8\uC9C0 \uBCF4\uAE30",
@@ -154,7 +153,9 @@ function ImageViewer({ src, alt, open, onClose }) {
           position: "fixed",
           inset: 0,
           zIndex: "var(--wp-z-dialog)",
-          background: "var(--wp-surface-scrim)"
+          background: "var(--wp-surface-scrim)",
+          // 오버레이 루트가 pointer-events:none이다(styles.css) — 겹이 스스로 살린다
+          pointerEvents: "auto"
         },
         onClick: (event) => event.stopPropagation(),
         onPointerDown: (event) => event.stopPropagation(),
@@ -268,7 +269,7 @@ function ImageViewer({ src, alt, open, onClose }) {
         ]
       }
     ),
-    document.body
+    portalRoot
   );
 }