@wipco/sdui-editor 0.17.1 → 0.18.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useState, useCallback, useEffect, useMemo, useRef, useLayoutEffect, useDeferredValue, useReducer, useId } from 'react';
-import { defaultRegistry, createRegistry, Tooltip, SidebarNav, SegmentedControl, Radio, Breadcrumb, Avatar, Alert, Icon, IconButton, Spinner, Button, Card, Tabs, Input, Badge, EmptyState, Table, SduiDialog, Field, Select, validateSpec, SduiRenderer, Checkbox, Switch, Dialog, Textarea } from '@wipco/sdui';
+import { defaultRegistry, createRegistry, Tooltip, SidebarNav, SegmentedControl, Radio, Breadcrumb, Avatar, Alert, Icon, IconButton, Spinner, Button, Card, Tabs, Input, Badge, EmptyState, Table, SduiDialog, Field, Select, validateSpec, SduiRenderer, Checkbox, Switch, OverlayContainerContext, Dialog, Textarea } from '@wipco/sdui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { EditorView, basicSetup } from 'codemirror';
 import { EditorState } from '@codemirror/state';
@@ -10091,6 +10091,11 @@ function EditorView2({
   const [corrupt, setCorrupt] = useState(false);
   const [draftRestored, setDraftRestored] = useState(false);
   const [helpOpen, setHelpOpen] = useState(false);
+  const previewBodyRef = useRef(null);
+  const [previewBody, setPreviewBody] = useState(null);
+  useEffect(() => {
+    setPreviewBody(previewBodyRef.current);
+  }, []);
   const [previewKey, setPreviewKey] = useState(0);
   const [previewNotice, setPreviewNotice] = useState(null);
   const noticeTimer = useRef(null);
@@ -10577,7 +10582,7 @@ function EditorView2({
             onClose: () => setSeedPanelOpen(false)
           }
         ) : null,
-        /* @__PURE__ */ jsx("div", { className: "sdui-editor-preview__body", children: previewPage ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "sdui-editor-preview__body", ref: previewBodyRef, children: /* @__PURE__ */ jsx(OverlayContainerContext.Provider, { value: previewBody, children: previewPage ? /* @__PURE__ */ jsx(
           PreviewBoundary,
           {
             resetKey: previewKey,
@@ -10594,7 +10599,7 @@ function EditorView2({
               `${previewKey}:${seedSignature(seeds)}`
             )
           }
-        ) : /* @__PURE__ */ jsx(Alert, { tone: parsed.error ? "warning" : "neutral", children: parsed.error ? "JSON\uC744 \uACE0\uCE58\uBA74 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uB2E4\uC2DC \uADF8\uB824\uC9D1\uB2C8\uB2E4." : "\uC2A4\uD399\uC744 \uC785\uB825\uD558\uC138\uC694." }) })
+        ) : /* @__PURE__ */ jsx(Alert, { tone: parsed.error ? "warning" : "neutral", children: parsed.error ? "JSON\uC744 \uACE0\uCE58\uBA74 \uBBF8\uB9AC\uBCF4\uAE30\uAC00 \uB2E4\uC2DC \uADF8\uB824\uC9D1\uB2C8\uB2E4." : "\uC2A4\uD399\uC744 \uC785\uB825\uD558\uC138\uC694." }) }) })
       ] }),
       helpOpen ? /* @__PURE__ */ jsx(HelpPanel, { onClose: () => setHelpOpen(false) }) : null
     ] })
@@ -10653,6 +10658,11 @@ function ViewerView({
     load();
   }, [id, load]);
   const [blocked, setBlocked] = useState(null);
+  const viewerBodyRef = useRef(null);
+  const [viewerBody, setViewerBody] = useState(null);
+  useEffect(() => {
+    setViewerBody(viewerBodyRef.current);
+  }, []);
   const blockedTimer = useRef(null);
   const notifyBlocked = useCallback((what) => {
     setBlocked(`${what} \u2014 \uBCF4\uAE30\uC5D0\uC11C\uB294 \uC2E4\uD589\uB418\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4`);
@@ -10741,7 +10751,7 @@ function ViewerView({
         onClose: () => setSeedPanelOpen(false)
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "sdui-editor-viewer__body", children: state.error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: "\uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", children: state.error }) : !state.spec ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-center", style: { padding: 64 }, children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "\uBD88\uB7EC\uC624\uB294 \uC911" }) }) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "sdui-editor-viewer__body", ref: viewerBodyRef, children: /* @__PURE__ */ jsx(OverlayContainerContext.Provider, { value: viewerBody, children: state.error ? /* @__PURE__ */ jsx(Alert, { tone: "danger", title: "\uD398\uC774\uC9C0\uB97C \uD45C\uC2DC\uD560 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", children: state.error }) : !state.spec ? /* @__PURE__ */ jsx("div", { className: "sdui-editor-center", style: { padding: 64 }, children: /* @__PURE__ */ jsx(Spinner, { size: "lg", label: "\uBD88\uB7EC\uC624\uB294 \uC911" }) }) : /* @__PURE__ */ jsx(
       ViewerBoundary,
       {
         resetKey: `${id}#${state.seq}`,
@@ -10774,7 +10784,7 @@ function ViewerView({
           `${id}#${state.seq}:${seedSignature(seeds)}`
         )
       }
-    ) })
+    ) }) })
   ] });
 }
 function SduiEditor({

package/package.json

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