@wipco/sdui-editor 0.17.0 → 0.18.0

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);
@@ -10118,8 +10123,10 @@ function EditorView2({
       alive = false;
     };
   }, [store]);
+  const docIdRef = useRef(null);
   useEffect(() => {
     if (!id) return;
+    docIdRef.current = null;
     setLoaded(null);
     setLoadError(null);
     setConflict(false);
@@ -10147,6 +10154,7 @@ function EditorView2({
         setDraftRestored(false);
         setBaseVersion(record.version);
       }
+      docIdRef.current = id;
       let openedSpec;
       try {
         openedSpec = JSON.parse(opened);
@@ -10373,7 +10381,9 @@ function EditorView2({
   const parsedRef = useRef(parsed);
   parsedRef.current = parsed;
   const overrideSpec = useCallback(
-    (specId) => specId === id ? parsedRef.current.spec ?? void 0 : void 0,
+    // docIdRef 가드 — 문서 전환 1프레임의 "새 id + 이전 파싱본"을 조각으로 내보내지
+    // 않는다(위 docIdRef 주석). 그동안은 스토어 read가 맡는다.
+    (specId) => specId === id && docIdRef.current === id ? parsedRef.current.spec ?? void 0 : void 0,
     [id]
   );
   const useSpec = useMemo(() => createEditorUseSpec(store, overrideSpec), [store, overrideSpec]);
@@ -10572,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,
@@ -10589,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
     ] })
@@ -10627,12 +10637,14 @@ function ViewerView({
     error: null,
     seq: 0
   });
+  const loadedForRef = useRef(null);
   const load = useCallback(() => {
-    store.read(id).then(
-      (record) => setState(
+    store.read(id).then((record) => {
+      loadedForRef.current = record ? id : null;
+      setState(
         (prev) => record ? { spec: record.spec, error: null, seq: prev.seq + 1 } : { spec: null, error: "\uD398\uC774\uC9C0\uB97C \uCC3E\uC744 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4", seq: prev.seq + 1 }
-      )
-    ).catch(
+      );
+    }).catch(
       (err) => setState((prev) => ({ spec: null, error: messageOf(err, "\uD398\uC774\uC9C0\uB97C \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4"), seq: prev.seq + 1 }))
     );
   }, [store, id]);
@@ -10641,10 +10653,16 @@ function ViewerView({
       setState((prev) => ({ spec: null, error: "\uD398\uC774\uC9C0 id\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.", seq: prev.seq + 1 }));
       return;
     }
+    loadedForRef.current = null;
     setState((prev) => ({ spec: null, error: null, seq: prev.seq + 1 }));
     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`);
@@ -10678,7 +10696,8 @@ function ViewerView({
   const specRef = useRef(state.spec);
   specRef.current = state.spec;
   const overrideSpec = useCallback(
-    (specId) => specId === id ? specRef.current ?? void 0 : void 0,
+    // loadedForRef 가드 — id 전환 1프레임의 "새 id + 이전 스펙"을 조각으로 내보내지 않는다.
+    (specId) => specId === id && loadedForRef.current === id ? specRef.current ?? void 0 : void 0,
     [id]
   );
   const useSpec = useMemo(() => createEditorUseSpec(store, overrideSpec), [store, overrideSpec]);
@@ -10732,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}`,
@@ -10765,7 +10784,7 @@ function ViewerView({
           `${id}#${state.seq}:${seedSignature(seeds)}`
         )
       }
-    ) })
+    ) }) })
   ] });
 }
 function SduiEditor({

package/dist/styles.css

@@ -122,7 +122,11 @@
   background: var(--wp-slate-25);
 }
 .sdui-editor-preview__notice { font-size: 12px; color: var(--wp-text-info); }
-.sdui-editor-preview__body { flex: 1; overflow-y: auto; padding: 24px; position: relative; }
+/* contain: paint — 미리본 다이얼로그의 오버레이(SduiDialog 래퍼가 position:fixed로
+   뷰포트에 고정)를 이 상자의 컨테이닝 블록에 가둔다. 없으면 오버레이가 편집기
+   전체를 덮어 시딩 버튼·패널이 마우스로 조작 불가였다(0.17.1 검수 실측:
+   elementFromPoint=wp-overlay, 클릭 타임아웃). */
+.sdui-editor-preview__body { flex: 1; overflow-y: auto; padding: 24px; position: relative; contain: paint; }
 .sdui-editor-preview__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
 
 /* ---------- 도움말 패널 ---------- */
@@ -164,7 +168,9 @@
   border-bottom: 1px solid var(--wp-border-subtle);
 }
 .sdui-editor-viewer__id { color: var(--wp-text-subtle); }
-.sdui-editor-viewer__body { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; }
+/* contain: paint — 위 .sdui-editor-preview__body와 같은 이유. 뷰어도 다이얼로그
+   스펙을 열린 채 그리므로 오버레이가 상단 바·시딩 패널을 덮으면 안 된다. */
+.sdui-editor-viewer__body { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 24px 48px; contain: paint; }
 .sdui-editor-viewer__body .sdui-root { display: flex; flex-direction: column; gap: var(--wp-space-4); }
 
 @media (max-width: 900px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui-editor",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
   "keywords": [
     "sdui",
@@ -58,14 +58,14 @@
     "codemirror": "^6.0.1"
   },
   "peerDependencies": {
-    "@wipco/sdui": "^0.17.0",
+    "@wipco/sdui": "^0.18.0",
     "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.0",
     "tsup": "^8.5.0",
     "tsx": "^4.20.0",
     "typescript": "^5.7.0"