@wipco/sdui-editor 0.17.0 → 0.17.1

package/dist/index.js

@@ -10118,8 +10118,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 +10149,7 @@ function EditorView2({
         setDraftRestored(false);
         setBaseVersion(record.version);
       }
+      docIdRef.current = id;
       let openedSpec;
       try {
         openedSpec = JSON.parse(opened);
@@ -10373,7 +10376,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]);
@@ -10627,12 +10632,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,6 +10648,7 @@ 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]);
@@ -10678,7 +10686,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]);

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.17.1",
   "description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
   "keywords": [
     "sdui",