@wipco/sdui-editor 0.5.0 → 0.7.0

package/dist/index.js

@@ -2991,17 +2991,48 @@ var CSS = `
  * \uBAA8\uB2EC\uC744 \uD750\uB984 \uC548\uC73C\uB85C \uB418\uB3CC\uB9B0\uB2E4.
  * \uCE94\uBC84\uC2A4 \uB808\uC9C0\uC2A4\uD2B8\uB9AC\uB294 SduiDialog(\uC778\uB77C\uC778 position:fixed) \uB300\uC2E0 \uC54C\uB9F9\uC774 Dialog\uB97C \uC4F0\uBBC0\uB85C
  * \uB0A8\uB294 \uAC83\uC740 \uD074\uB798\uC2A4\uBFD0\uC774\uACE0, \uADF8\uB7EC\uBA74 \uC5EC\uAE30\uC11C \uB36E\uC744 \uC218 \uC788\uB2E4.
+ *
+ * ## z-index: auto \uAC00 \uC774 \uADDC\uCE59\uC758 \uB098\uBA38\uC9C0 \uC808\uBC18\uC774\uB2E4
+ *
+ * "position: static\uC774\uBA74 z-index\uB294 \uBB34\uC2DC\uB41C\uB2E4"\uC5D0\uB294 \uC608\uC678\uAC00 \uC788\uB2E4 \u2014 **\uD50C\uB809\uC2A4\xB7\uADF8\uB9AC\uB4DC \uC544\uC774\uD15C\uC740
+ * static\uC774\uC5B4\uB3C4 z-index\uAC00 \uBA39\uACE0, \uADF8 \uAC12\uC73C\uB85C \uC313\uC784 \uB9E5\uB77D\uC744 \uB9CC\uB4E0\uB2E4.** \uADF8\uB9AC\uACE0 \uCE94\uBC84\uC2A4\uC5D0\uC11C
+ * \uB418\uB3CC\uB824\uC9C4 .wp-overlay \uB294 \uAC70\uC758 \uC5B8\uC81C\uB098 \uD50C\uB809\uC2A4 \uC544\uC774\uD15C\uC774\uB2E4: \uB17C\uB9AC \uB798\uD37C
+ * .sdui-editor-cv-chrome \uB3C4, \uC2A4\uD399 \uB8E8\uD2B8 .sdui-editor-canvas__page .sdui-root \uB3C4
+ * display: flex \uB77C\uC11C\uB2E4(\uB458 \uB2E4 \uC774 \uD30C\uC77C\uC774 \uADF8\uB807\uAC8C \uB9CC\uB4E0\uB2E4).
+ *
+ * \uB77C\uC774\uBE0C\uB7EC\uB9AC \uC2DC\uD2B8\uC758 .wp-overlay \uC5D0\uB294 z-index\uAC00 \uC5C6\uC5B4 \uC5EC\uAE30\uAE4C\uC9C0\uB294 \uB4DC\uB7EC\uB098\uC9C0 \uC54A\uB294\uB2E4.
+ * \uB4DC\uB7EC\uB098\uB294 \uAC74 **\uC18C\uBE44 \uD504\uB85C\uC81D\uD2B8\uAC00 \uC790\uAE30 \uC2DC\uD2B8\uB85C \uAC19\uC740 \uD074\uB798\uC2A4\uC5D0 z-index\uB97C \uC5B9\uC5C8\uC744 \uB54C**\uB2E4
+ * (ERP\uB294 --wp-z-dialog). \uADF8\uB7EC\uBA74 \uC704\uCE58\uB9CC \uBE8F\uAE30\uACE0 \uC313\uC784 \uC21C\uC11C\uB294 \uADF8\uB300\uB85C\uB77C, \uD3B8\uC9D1 \uB808\uC774\uC5B4
+ * (--wp-z-sticky)\uAC00 \uADF8 \uC544\uB798\uB85C \uAE54\uB9B0\uB2E4. \uACB0\uACFC\uB294 "\uD14C\uB450\uB9AC\uAC00 \uB2E4\uC774\uC5BC\uB85C\uADF8\uB97C \uAC00\uB9B0\uB2E4"\uAC00 \uC544\uB2C8\uB77C
+ * \uADF8 \uBC18\uB300 \u2014 **\uB2E4\uC774\uC5BC\uB85C\uADF8 \uC548 \uB178\uB4DC\uC758 \uC120\uD0DD \uD14C\uB450\uB9AC\uAC00 \uD1B5\uC9F8\uB85C \uC0AC\uB77C\uC9C4\uB2E4.**
+ * \uC2E4\uCE21(ERP fi/products, KeyValueList): \uD14C\uB450\uB9AC 4\uBCC0 \uC911 **0\uBCC0**\uB9CC \uCE60\uD588\uACE0, \uC774 \uC120\uC5B8\uC744
+ * \uB123\uC740 \uB4A4 **4\uBCC0** \uC804\uBD80 \uCE60\uD588\uB2E4. \uC704\uCE58\uB97C \uBE8F\uC5C8\uC73C\uBA74 \uC313\uC784 \uC21C\uC11C\uB3C4 \uAC19\uC774 \uBE8F\uC5B4\uC57C \uD55C\uB2E4.
+ *
+ * \uBC84\uB9B0 \uB300\uC548(\uC804\uBD80 \uC9C4\uC9DC \uBE0C\uB77C\uC6B0\uC800\uC5D0\uC11C \uC7AC \uBD24\uB2E4):
+ * - *\uCE94\uBC84\uC2A4 Dialog\uC5D0 position: relative* \u2014 z-index\uB97C \uB418\uC0B4\uB9AC\uB294 \uBC29\uD5A5\uC774\uB77C \uB354 \uB098\uBE60\uC9C4\uB2E4(0/4).
+ * - *\uD3B8\uC9D1 \uB808\uC774\uC5B4\uC758 z-index\uB97C \uB0AE\uCD98\uB2E4* \u2014 \uAC00\uB9AC\uB294 \uCABD\uC744 \uBC14\uAFB8\uB294 \uAC83\uC77C \uBFD0, \uC548\uCABD \uD14C\uB450\uB9AC\uB294 \uACC4\uC18D
+ *   \uC548 \uBCF4\uC778\uB2E4(0/4).
+ * - *\uCE94\uBC84\uC2A4\uC5D0 isolation: isolate* \u2014 \uB2E4\uC774\uC5BC\uB85C\uADF8\uC640 \uD3B8\uC9D1 \uB808\uC774\uC5B4\uAC00 **\uAC19\uC740** \uB9E5\uB77D \uC548\uC5D0 \uC788\uC5B4
+ *   \uB458\uC758 \uC0C1\uB300 \uC21C\uC11C\uB294 \uADF8\uB300\uB85C\uB2E4(0/4). \uCE94\uBC84\uC2A4 \uBC16\uC73C\uB85C z-index\uAC00 \uC0C8\uB294 \uAC83\uC744 \uB9C9\uC744 \uBFD0\uC774\uB2E4.
+ * - *\uD3B8\uC9D1 \uB808\uC774\uC5B4\uB97C \uD1A0\uD070 \uCC99\uB3C4 \uC704\uB85C \uC62C\uB9B0\uB2E4* \u2014 4/4\uB85C \uACE0\uCCD0\uC9C0\uAE34 \uD558\uB098 \uC6D0\uC778\uC744 \uB0A8\uAE34 \uCC44
+ *   \uC22B\uC790 \uACBD\uC7C1\uC744 \uC2DC\uC791\uD558\uB294 \uAC83\uC774\uB77C, \uC18C\uBE44 \uD504\uB85C\uC81D\uD2B8\uAC00 \uCC99\uB3C4\uB97C \uC62C\uB9AC\uBA74 \uB2E4\uC2DC \uAE68\uC9C4\uB2E4.
  */
 .sdui-editor-canvas .wp-overlay {
   position: static; inset: auto; background: none;
   display: block; padding: 0; overflow: visible;
+  z-index: auto;
 }
 .sdui-editor-canvas .wp-dialog {
   max-height: none; animation: none; margin: 0 auto;
   box-shadow: var(--wp-shadow-sm);
 }
-/* \uD1A0\uC2A4\uD2B8\uB3C4 \uBDF0\uD3EC\uD2B8 \uACE0\uC815\uC744 \uD480\uC5B4 \uCE94\uBC84\uC2A4 \uC548\uC5D0 \uBA38\uBB3C\uAC8C \uD55C\uB2E4. */
-.sdui-editor-canvas .wp-toast-region { position: static; }
+/*
+ * \uD1A0\uC2A4\uD2B8\uB3C4 \uBDF0\uD3EC\uD2B8 \uACE0\uC815\uC744 \uD480\uC5B4 \uCE94\uBC84\uC2A4 \uC548\uC5D0 \uBA38\uBB3C\uAC8C \uD55C\uB2E4.
+ * z-index\uB97C \uD568\uAED8 \uB0B4\uB9AC\uB294 \uADFC\uAC70\uB294 \uC704\uC640 \uAC19\uB2E4(--wp-z-toast \uB294 \uCC99\uB3C4\uC758 \uAC70\uC758 \uAF2D\uB300\uAE30\uB2E4).
+ * \uC9C0\uAE08 \uCE94\uBC84\uC2A4\uC5D0\uC11C \uD1A0\uC2A4\uD2B8\uAC00 \uB728\uB294 \uACBD\uB85C\uB294 \uC5C6\uC5B4\uC11C(\uBD80\uC791\uC6A9\uC774 \uB9C9\uD600 \uC788\uB2E4) \uB208\uC73C\uB85C \uC7AC\uD604\uD558\uC9C0\uB294
+ * \uBABB\uD588\uB2E4 \u2014 \uAC19\uC740 \uD568\uC815\uC744 \uD55C \uC904 \uC544\uB798 \uB0A8\uACA8 \uB450\uC9C0 \uC54A\uC73C\uB824\uB294 \uC608\uBC29\uC774\uB2E4.
+ */
+.sdui-editor-canvas .wp-toast-region { position: static; z-index: auto; }
 
 /* \u2550\u2550 \uD3B8\uC9D1 \uB808\uC774\uC5B4 \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
 
@@ -3703,6 +3734,18 @@ var GROUP_LABELS = {
   validation: "\uAC80\uC99D",
   other: "\uAE30\uD0C0"
 };
+function slotTextTarget(node, name) {
+  const list = node.slots[name];
+  if (!list || list.length !== 1) return null;
+  const only = list[0];
+  if (!only || only.kind !== "text") return null;
+  return { id: only.id, text: only.text };
+}
+function canBind(entry, kind) {
+  if (entry.binding) return false;
+  if (entry.slotted) return false;
+  return kind !== "action";
+}
 function groupKeyOf(meta) {
   return meta?.group ?? "other";
 }
@@ -3716,6 +3759,11 @@ function entryOf(node, name, meta) {
     value,
     present,
     slotted,
+    // 프롭에 이미 값이 있으면 슬롯 텍스트 입력을 주지 않는다. 그 자리는 프롭 편집기가
+    // 이미 그려지고 있어서(둘 다 찬 자리는 원문을 고칠 수 있어야 한다) 입력이 두 칸이
+    // 되는데, 어느 칸이 화면을 정하는지는 컴포넌트마다 달라 답을 줄 수 없다.
+    // 실측 0건이지만 스펙은 편집기 밖에서도 만들어진다.
+    slotText: present ? null : slotTextTarget(node, name),
     binding: bindingOf(value),
     filled: present || slotted
   };
@@ -5134,23 +5182,38 @@ function NodePanel({
       select: "keep"
     });
   };
+  const applySlotText = (entry, target, text) => {
+    onApply({
+      result: setText(doc, target.id, text),
+      label: changeLabel(entry.meta, entry.name),
+      // 합치기 키를 프롭이 아니라 **텍스트 노드** 기준으로 잡는다. 고치는 대상이 그
+      // 노드이고, 트리에서 같은 노드를 골라 고치는 `TextChildPanel`과 키가 같아야
+      // 패널을 오가며 친 글자가 되돌리기 한 칸으로 이어진다.
+      coalesce: coalesceKey(target.id, "$text"),
+      select: "keep"
+    });
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     inspection.groups.map((group) => /* @__PURE__ */ jsx(
       GroupSection,
       {
         group,
         defaultOpen: open.has(group.key),
-        children: (entry) => /* @__PURE__ */ jsx(
-          PropRow,
-          {
-            entry,
-            ctx,
-            slotCount: node.slots[entry.name]?.length ?? 0,
-            onChange: (next) => apply(entry.name, next, entry.meta),
-            onBind: onRequestBinding ? () => onRequestBinding(entry.name) : void 0
-          },
-          entry.name
-        )
+        children: (entry) => {
+          const slotText = entry.slotText;
+          return /* @__PURE__ */ jsx(
+            PropRow,
+            {
+              entry,
+              ctx,
+              slotCount: node.slots[entry.name]?.length ?? 0,
+              onChange: (next) => apply(entry.name, next, entry.meta),
+              onSlotText: slotText ? (text) => applySlotText(entry, slotText, text) : void 0,
+              onBind: onRequestBinding ? () => onRequestBinding(entry.name) : void 0
+            },
+            entry.name
+          );
+        }
       },
       `${node.id}:${group.key}`
     )),
@@ -5199,11 +5262,13 @@ function PropRow({
   ctx,
   slotCount,
   onChange,
+  onSlotText,
   onBind
 }) {
   const meta = entry.meta;
   const label = meta?.label ?? entry.name;
   const missing = meta?.required === true && !entry.filled;
+  const slotText = onSlotText ? entry.slotText : null;
   return /* @__PURE__ */ jsxs("div", { className: `sdui-insp-row${meta?.legacy ? " sdui-insp-row--legacy" : ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "sdui-insp-row__head", children: [
       /* @__PURE__ */ jsx("span", { className: "sdui-insp-row__label", children: label }),
@@ -5211,7 +5276,7 @@ function PropRow({
       missing ? /* @__PURE__ */ jsx("span", { className: "sdui-insp-flag sdui-insp-flag--req", children: "\uD544\uC218" }) : null,
       meta?.legacy ? /* @__PURE__ */ jsx("span", { className: "sdui-insp-flag sdui-insp-flag--legacy", children: "\uC61B \uD504\uB86D" }) : null,
       /* @__PURE__ */ jsxs("span", { className: "sdui-insp-row__tools", children: [
-        onBind && !entry.binding && meta?.kind !== "action" ? /* @__PURE__ */ jsx(
+        onBind && canBind(entry, meta?.kind) ? /* @__PURE__ */ jsx(
           ToolButton,
           {
             icon: "link",
@@ -5231,10 +5296,11 @@ function PropRow({
         )
       ] })
     ] }),
-    entry.slotted ? /* @__PURE__ */ jsxs("p", { className: "sdui-insp-row__warn", children: [
+    entry.slotted && !slotText ? /* @__PURE__ */ jsxs("p", { className: "sdui-insp-row__warn", children: [
       `\uC2AC\uB86F\uC5D0 \uB178\uB4DC ${slotCount}\uAC1C\uAC00 \uB4E4\uC5B4 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uB0B4\uC6A9\uC740 \uD2B8\uB9AC\uC5D0\uC11C \uD3B8\uC9D1\uD558\uC138\uC694.`,
-      entry.present ? " \uD504\uB86D \uAC12\uB3C4 \uD568\uAED8 \uC788\uC5B4 \uCEF4\uD3EC\uB10C\uD2B8\uC5D0 \uB530\uB77C \uD55C\uCABD\uC774 \uBB34\uC2DC\uB429\uB2C8\uB2E4." : ""
+      entry.present ? " \uD504\uB86D \uAC12\uB3C4 \uD568\uAED8 \uC788\uC9C0\uB9CC \uD654\uBA74\uC5D0\uB294 \uC2AC\uB86F\uC774 \uC774\uAE41\uB2C8\uB2E4 \u2014 \uD504\uB86D\uC740 \uBB34\uC2DC\uB429\uB2C8\uB2E4." : ""
     ] }) : null,
+    slotText && onSlotText ? /* @__PURE__ */ jsx(SlotTextField, { target: slotText, onChange: onSlotText }) : null,
     !entry.slotted || entry.present ? /* @__PURE__ */ jsx(
       ValueEditor,
       {
@@ -5250,6 +5316,15 @@ function PropRow({
     meta?.legacy ? /* @__PURE__ */ jsx("p", { className: "sdui-insp-row__warn", children: "\uB354 \uC774\uC0C1 \uC4F0\uC774\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4. \uAC12\uC740 \uADF8\uB300\uB85C \uB450\uACE0 \uC800\uC7A5\uB429\uB2C8\uB2E4." }) : null
   ] });
 }
+function SlotTextField({
+  target,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Input, { size: "sm", value: target.text, onChange: (e) => onChange(e.target.value) }),
+    /* @__PURE__ */ jsx("p", { className: "sdui-insp-row__desc", children: "\uC2AC\uB86F\uC5D0 \uB4E0 \uD14D\uC2A4\uD2B8 \uB178\uB4DC\uC785\uB2C8\uB2E4. \uD2B8\uB9AC\uC5D0\uC11C \uADF8 \uB178\uB4DC\uB97C \uACE8\uB77C \uACE0\uCE58\uB294 \uAC83\uACFC \uAC19\uC2B5\uB2C8\uB2E4." })
+  ] });
+}
 function fallbackMeta(entry) {
   const action = looksLikeAction(entry.name) || isActionShaped(entry.value);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui-editor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
   "keywords": [
     "sdui",
@@ -58,14 +58,14 @@
     "codemirror": "^6.0.1"
   },
   "peerDependencies": {
-    "@wipco/sdui": "^0.5.0",
+    "@wipco/sdui": "^0.7.0",
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "@wipco/sdui": "^0.5.0",
+    "@wipco/sdui": "^0.7.0",
     "tsup": "^8.5.0",
     "tsx": "^4.20.0",
     "typescript": "^5.7.0"