@ncds/ui-admin 1.8.28-alpha.0 → 1.8.28-alpha.2

package/dist/cjs/src/components/overlays/dropdown/__tests__/dropdownTestUtils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configTexts = exports.configItem = exports.applyButtonOf = void 0;
+// React Dropdown 테스트(Dropdown·Dropdown.dnd) 공용 조회 헬퍼.
+// vitest include 가 *.test.ts 만 수집하므로 이 파일은 테스트로 실행되지 않는다.
+// import 만으로 act 환경 플래그가 켜진다 — 두 테스트 파일이 모두 createRoot + act 로 렌더하기 때문이다.
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const configItem = (scope, text) => {
+  const item = Array.from(scope.querySelectorAll('.ncua-dropdown__item--config')).find(element => element.querySelector('.ncua-dropdown__item-text')?.textContent === text);
+  if (!item) throw new Error(`config item 이 없습니다: ${text}`);
+  return item;
+};
+exports.configItem = configItem;
+const configTexts = scope => Array.from(scope.querySelectorAll('.ncua-dropdown__item--config .ncua-dropdown__item-text')).map(element => element.textContent ?? '');
+exports.configTexts = configTexts;
+const applyButtonOf = scope => {
+  const button = scope.querySelector('.ncua-dropdown__footer button');
+  if (!button) throw new Error('적용 버튼이 없습니다');
+  return button;
+};
+exports.applyButtonOf = applyButtonOf;

package/dist/cjs/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -222,4 +222,60 @@ var _utils = require("../utils");
     };
     (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, draft)).toBe(false);
   });
+});
+(0, _vitest.describe)('DDU-01 Dropdown 경유로 닿지 않는 방어 분기', () => {
+  _vitest.it.each([{
+    name: '같은 id',
+    fromId: 'b',
+    toId: 'b'
+  }, {
+    name: '없는 fromId',
+    fromId: 'x',
+    toId: 'b'
+  }, {
+    name: '없는 toId',
+    fromId: 'a',
+    toId: 'x'
+  }])('DDU-01 arrayReorderByEdge 에 $name 이면 원본을 그대로 돌려준다', _ref => {
+    let {
+      fromId,
+      toId
+    } = _ref;
+    const order = ['a', 'b', 'c'];
+    (0, _vitest.expect)((0, _utils.arrayReorderByEdge)(order, fromId, toId, 'bottom')).toBe(order);
+  });
+  (0, _vitest.it)('DDU-01 hasDraftChanged 는 순서 길이가 다르면 true', () => {
+    const original = {
+      order: ['a', 'b'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    const draft = {
+      order: ['a'],
+      visibility: {
+        a: true,
+        b: true
+      }
+    };
+    (0, _vitest.expect)((0, _utils.hasDraftChanged)(original, draft)).toBe(true);
+  });
+});
+(0, _vitest.describe)('DDU-02 required + visible: false', () => {
+  (0, _vitest.it)('DDU-02 initDraftState 는 required 항목의 visible: false 를 그대로 false 로 둔다', () => {
+    // 현재 동작 고정 — 결함 후보: 후속 이슈 (dropdown.mdx "항상 visible 상태" 와 계약 불일치 — vanilla VDD-16 과 같은 식)
+    const groups = [{
+      items: [{
+        id: 'code',
+        text: '코드',
+        required: true,
+        visible: false
+      }]
+    }];
+    (0, _vitest.expect)((0, _utils.initDraftState)(groups).visibility).toEqual({
+      code: false
+    });
+  });
+  _vitest.it.todo('DDU-02 initDraftState 는 required 항목을 visible 값과 관계없이 true 로 두어야 한다');
 });

package/dist/cjs/src/components/overlays/modal/__tests__/Modal.test.js

@@ -0,0 +1,426 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Modal = require("../Modal");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BACKDROP_SELECTOR = '.ncua-modal-backdrop';
+const MODAL_BODY_TEXT = '모달 본문';
+/** afterEach 에서 unmount 할 루트 — 단언 뒤 인라인 unmount 를 두지 않는다 */
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+  document.body.style.overflow = '';
+  _vitest.vi.restoreAllMocks();
+});
+const mount = node => {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  const entry = {
+    root,
+    container
+  };
+  mounted.push(entry);
+  (0, _testUtils.act)(() => root.render(node));
+  return {
+    rerender: next => (0, _testUtils.act)(() => root.render(next)),
+    /** 자기 항목만 정리 목록에서 빼고 unmount 해 afterEach 가 이중 unmount 하지 않게 한다 */
+    unmount: () => {
+      mounted.splice(mounted.indexOf(entry), 1);
+      (0, _testUtils.act)(() => root.unmount());
+      container.remove();
+    }
+  };
+};
+const modal = function () {
+  let {
+    children = MODAL_BODY_TEXT,
+    isOpen = true,
+    onClose = () => undefined,
+    ...rest
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/(0, _react.createElement)(_Modal.Modal, {
+    isOpen,
+    onClose,
+    ...rest
+  }, children);
+};
+/** 요소를 못 찾으면 throw — `?.click()` 뒤 "무시" 단언이 요소 부재로 공허하게 통과하지 않게 한다 */
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const pressKey = key => {
+  (0, _testUtils.act)(() => {
+    document.dispatchEvent(new KeyboardEvent('keydown', {
+      key,
+      bubbles: true
+    }));
+  });
+};
+const click = element => {
+  (0, _testUtils.act)(() => element.click());
+};
+(0, _vitest.describe)('React Modal — 열림 렌더와 스크롤 잠금 (RMO-01)', () => {
+  (0, _vitest.it)('RMO-01 isOpen 이 false 면 백드롭을 렌더하지 않고 body 스크롤도 잠그지 않는다', () => {
+    // Given/When: 닫힌 상태로 렌더하면
+    mount(modal({
+      isOpen: false
+    }));
+    // Then: 백드롭이 없고 overflow 가 비어 있다
+    (0, _vitest.expect)(document.body.querySelector(BACKDROP_SELECTOR)).toBeNull();
+    (0, _vitest.expect)(document.body.style.overflow).toBe('');
+  });
+  (0, _vitest.it)('RMO-01 isOpen 이 true 면 body 포털에 백드롭과 기본 md 크기 모달, children 을 그리고 스크롤을 잠근다', () => {
+    // Given/When: 열린 상태로 렌더하면
+    mount(modal());
+    // Then: 백드롭은 body 의 직계 자식이고 안쪽에 md 모달과 본문이 있다
+    const backdrop = mustQuery(document.body, BACKDROP_SELECTOR);
+    const inner = mustQuery(backdrop, '.ncua-modal');
+    (0, _vitest.expect)(backdrop.parentNode).toBe(document.body);
+    (0, _vitest.expect)(inner.classList.contains('ncua-modal--md')).toBe(true);
+    (0, _vitest.expect)(inner.textContent).toBe(MODAL_BODY_TEXT);
+    (0, _vitest.expect)(document.body.style.overflow).toBe('hidden');
+  });
+  (0, _vitest.it)('RMO-01 열린 모달을 isOpen false 로 닫으면 백드롭이 사라지고 스크롤 잠금이 풀린다', () => {
+    // Given: 열린 모달
+    const view = mount(modal());
+    // When: isOpen 을 false 로 바꾼다
+    view.rerender(modal({
+      isOpen: false
+    }));
+    // Then: 백드롭이 없고 overflow 가 원복된다
+    (0, _vitest.expect)(document.body.querySelector(BACKDROP_SELECTOR)).toBeNull();
+    (0, _vitest.expect)(document.body.style.overflow).toBe('');
+  });
+  (0, _vitest.it)('RMO-01 열린 채 unmount 하면 스크롤 잠금이 풀린다', () => {
+    // Given: 열린 모달
+    const view = mount(modal());
+    // When: unmount 한다
+    view.unmount();
+    // Then: overflow 가 원복된다
+    (0, _vitest.expect)(document.body.style.overflow).toBe('');
+  });
+});
+(0, _vitest.describe)('React Modal — 닫기 입력 (RMO-02)', () => {
+  (0, _vitest.it)('RMO-02 closeOnBackdropClick 이 true 면 백드롭 자신 클릭으로 onClose 를 부른다', () => {
+    // Given: 배경 클릭 닫기를 켠 모달
+    const onClose = _vitest.vi.fn();
+    mount(modal({
+      closeOnBackdropClick: true,
+      onClose
+    }));
+    // When: 백드롭을 클릭한다
+    click(mustQuery(document.body, BACKDROP_SELECTOR));
+    // Then: onClose 가 불린다
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)('RMO-02 closeOnBackdropClick 이 true 여도 안쪽 .ncua-modal 클릭은 무시한다', () => {
+    // Given: 배경 클릭 닫기를 켠 모달
+    const onClose = _vitest.vi.fn();
+    mount(modal({
+      closeOnBackdropClick: true,
+      onClose
+    }));
+    // When: 안쪽 모달 요소를 클릭한다
+    click(mustQuery(document.body, '.ncua-modal'));
+    // Then: onClose 가 불리지 않는다
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RMO-02 closeOnBackdropClick 기본값(false)이면 백드롭 클릭을 무시한다', () => {
+    // Given: 옵션 없이 연 모달
+    const onClose = _vitest.vi.fn();
+    mount(modal({
+      onClose
+    }));
+    // When: 백드롭을 클릭한다
+    click(mustQuery(document.body, BACKDROP_SELECTOR));
+    // Then: onClose 가 불리지 않는다
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RMO-02 closeOnEsc 기본값(true)이면 Escape 로 onClose 를 부른다', () => {
+    // Given: 옵션 없이 연 모달
+    const onClose = _vitest.vi.fn();
+    mount(modal({
+      onClose
+    }));
+    // When: Escape 를 누른다
+    pressKey('Escape');
+    // Then: onClose 가 불린다
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+  });
+  _vitest.it.each([['closeOnEsc false 에서 Escape', {
+    closeOnEsc: false
+  }, 'Escape'], ['기본 설정에서 Escape 가 아닌 키', {}, 'Enter']])('RMO-02 %s 는 무시한다', (_name, options, key) => {
+    // Given: 연 모달
+    const onClose = _vitest.vi.fn();
+    mount(modal({
+      onClose,
+      ...options
+    }));
+    // When: 키를 누른다
+    pressKey(key);
+    // Then: onClose 가 불리지 않는다
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+  (0, _vitest.it)('RMO-02 isOpen 이 false 가 되면 keydown 리스너를 해제해 Escape 에 반응하지 않는다', () => {
+    // Given: 열었다가 isOpen false 로 닫은 모달
+    const onClose = _vitest.vi.fn();
+    const view = mount(modal({
+      onClose
+    }));
+    view.rerender(modal({
+      onClose,
+      isOpen: false
+    }));
+    // When: Escape 를 누른다
+    pressKey('Escape');
+    // Then: onClose 가 불리지 않는다 (양성 대조: 위 "Escape 로 onClose 를 부른다")
+    (0, _vitest.expect)(onClose).not.toHaveBeenCalled();
+  });
+});
+/** 받은 width · height 를 속성으로 남기는 합성 아이콘 — 실제 아이콘의 SVG 반영은 아이콘 패키지 소관 */
+const SyntheticIcon = _ref => {
+  let {
+    width,
+    height
+  } = _ref;
+  return /*#__PURE__*/(0, _react.createElement)('svg', {
+    'data-synthetic-icon': '',
+    width,
+    height
+  });
+};
+/** FeaturedIcon sm 의 아이콘 크기 */
+const FEATURED_ICON_SM_SIZE = 16;
+const TITLE = '제목';
+const SUBTITLE = '부제목';
+const renderInsideModal = node => {
+  mount(modal({
+    children: node
+  }));
+  return mustQuery(document.body, '.ncua-modal');
+};
+(0, _vitest.describe)('React Modal.Header (RMO-03)', () => {
+  (0, _vitest.it)('RMO-03 기본 렌더: title, 기본 left 정렬, 닫기 버튼과 --close-button modifier, subtitle · 아이콘 · 구분선 없음', () => {
+    // Given/When: title 과 onClose 만 넘긴다
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Header, {
+      title: TITLE,
+      onClose: _vitest.vi.fn()
+    }));
+    // Then: 기본 구성이 보인다
+    const header = mustQuery(inner, '.ncua-modal__header');
+    (0, _vitest.expect)(mustQuery(header, '.ncua-modal__title-text').textContent).toBe(TITLE);
+    (0, _vitest.expect)(header.classList.contains('ncua-modal__header--left')).toBe(true);
+    (0, _vitest.expect)(header.classList.contains('ncua-modal__header--close-button')).toBe(true);
+    (0, _vitest.expect)(header.querySelector('.ncua-modal__close-button')).not.toBeNull();
+    (0, _vitest.expect)(header.querySelector('.ncua-modal__title-subtitle')).toBeNull();
+    (0, _vitest.expect)(header.querySelector('.ncua-featured-icon')).toBeNull();
+    (0, _vitest.expect)(inner.querySelector('.ncua-modal__header-divider')).toBeNull();
+  });
+  (0, _vitest.it)('RMO-03 닫기 버튼을 클릭하면 Header 의 onClose 를 부른다', () => {
+    // Given: onClose 를 받은 Header
+    const onClose = _vitest.vi.fn();
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Header, {
+      title: TITLE,
+      onClose
+    }));
+    // When: 닫기 버튼을 클릭한다
+    click(mustQuery(inner, '.ncua-modal__close-button'));
+    // Then: onClose 가 불린다
+    (0, _vitest.expect)(onClose).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)('RMO-03 hideCloseButton 이면 닫기 버튼과 --close-button modifier 가 없다', () => {
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Header, {
+      title: TITLE,
+      onClose: _vitest.vi.fn(),
+      hideCloseButton: true
+    }));
+    const header = mustQuery(inner, '.ncua-modal__header');
+    (0, _vitest.expect)(header.querySelector('.ncua-modal__close-button')).toBeNull();
+    (0, _vitest.expect)(header.classList.contains('ncua-modal__header--close-button')).toBe(false);
+  });
+  (0, _vitest.it)('RMO-03 subtitle · align · showDivider · children 을 그린다', () => {
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Header, {
+      title: TITLE,
+      subtitle: SUBTITLE,
+      align: 'center',
+      showDivider: true,
+      onClose: _vitest.vi.fn()
+    }, /*#__PURE__*/(0, _react.createElement)('span', {
+      className: 'header-extra'
+    })));
+    const header = mustQuery(inner, '.ncua-modal__header');
+    (0, _vitest.expect)(mustQuery(header, '.ncua-modal__title-subtitle').textContent).toBe(SUBTITLE);
+    (0, _vitest.expect)(header.classList.contains('ncua-modal__header--center')).toBe(true);
+    (0, _vitest.expect)(header.querySelector('.header-extra')).not.toBeNull();
+    (0, _vitest.expect)(inner.querySelector('.ncua-modal__header-divider')).not.toBeNull();
+  });
+  (0, _vitest.it)('RMO-03 featuredIcon 은 지정한 icon · color · theme 와 sm 크기로 그린다', () => {
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Header, {
+      title: TITLE,
+      onClose: _vitest.vi.fn(),
+      featuredIcon: {
+        icon: SyntheticIcon,
+        color: 'error',
+        theme: 'dark-circle'
+      }
+    }));
+    const featured = mustQuery(inner, '.ncua-featured-icon');
+    const icon = mustQuery(featured, '[data-synthetic-icon]');
+    (0, _vitest.expect)(Array.from(featured.classList)).toEqual(_vitest.expect.arrayContaining(['ncua-featured-icon--error', 'ncua-featured-icon--dark-circle', 'ncua-featured-icon--sm']));
+    (0, _vitest.expect)(icon.getAttribute('width')).toBe(String(FEATURED_ICON_SM_SIZE));
+  });
+});
+/** children 은 가변 인자로 넘긴다 (Biome noChildrenProp) — props 타입의 필수 children 은 캐스팅으로 채운다 */
+const modalActions = (props, child) => /*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Actions, props, child);
+(0, _vitest.describe)('React Modal.Actions (RMO-04)', () => {
+  (0, _vitest.it)('RMO-04 기본값: vertical · stretch, 구분선과 checkbox 영역 없음', () => {
+    const inner = renderInsideModal(modalActions({}, /*#__PURE__*/(0, _react.createElement)('button', null, '확인')));
+    const actions = mustQuery(inner, '.ncua-modal__actions');
+    (0, _vitest.expect)(Array.from(actions.classList)).toEqual(_vitest.expect.arrayContaining(['ncua-modal__actions--vertical', 'ncua-modal__actions--stretch']));
+    (0, _vitest.expect)(inner.querySelector('.ncua-modal__actions-divider')).toBeNull();
+    (0, _vitest.expect)(inner.querySelector('.ncua-modal__actions-checkbox')).toBeNull();
+    (0, _vitest.expect)(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('ncua-modal__actions-wrapper--checkbox')).toBe(false);
+  });
+  (0, _vitest.it)('RMO-04 showDivider · layout · align · className 을 반영한다', () => {
+    const inner = renderInsideModal(modalActions({
+      showDivider: true,
+      layout: 'horizontal',
+      align: 'right',
+      className: 'custom-actions'
+    }, /*#__PURE__*/(0, _react.createElement)('button', null, '확인')));
+    const actions = mustQuery(inner, '.ncua-modal__actions');
+    (0, _vitest.expect)(inner.querySelector('.ncua-modal__actions-divider')).not.toBeNull();
+    (0, _vitest.expect)(Array.from(actions.classList)).toEqual(_vitest.expect.arrayContaining(['ncua-modal__actions--horizontal', 'ncua-modal__actions--right']));
+    (0, _vitest.expect)(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('custom-actions')).toBe(true);
+  });
+  (0, _vitest.it)('RMO-04 layout="checkbox" 면 checkbox 영역에 checkboxContent 를 그리고 wrapper modifier 를 붙인다', () => {
+    const inner = renderInsideModal(modalActions({
+      layout: 'checkbox',
+      checkboxContent: /*#__PURE__*/(0, _react.createElement)('label', {
+        className: 'never-show'
+      }, '다시 보지 않기')
+    }, /*#__PURE__*/(0, _react.createElement)('button', null, '확인')));
+    const checkboxContent = mustQuery(inner, '.ncua-modal__actions-checkbox-content');
+    (0, _vitest.expect)(checkboxContent.querySelector('.never-show')).not.toBeNull();
+    (0, _vitest.expect)(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('ncua-modal__actions-wrapper--checkbox')).toBe(true);
+  });
+});
+(0, _vitest.describe)('React Modal — zIndex (RMO-05)', () => {
+  /** 기본값(미설정)과 구분되는 zIndex */
+  const Z_INDEX = 1234;
+  (0, _vitest.it)('RMO-05 zIndex 값이 있으면 백드롭 style.zIndex 에 반영한다', () => {
+    mount(modal({
+      zIndex: Z_INDEX
+    }));
+    (0, _vitest.expect)(mustQuery(document.body, BACKDROP_SELECTOR).style.zIndex).toBe(String(Z_INDEX));
+  });
+  (0, _vitest.it)('RMO-05 zIndex 를 생략하면 백드롭에 style 속성이 없다', () => {
+    mount(modal());
+    (0, _vitest.expect)(mustQuery(document.body, BACKDROP_SELECTOR).getAttribute('style')).toBeNull();
+  });
+  (0, _vitest.it)('RMO-05 zIndex={0} 은 무시돼 백드롭에 style 속성이 없다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 RMO-05 (truthy 검사로 0 을 버림 — vanilla 는 0 을 적용, #614 RTP-13 같은 유형)
+    mount(modal({
+      zIndex: 0
+    }));
+    (0, _vitest.expect)(mustQuery(document.body, BACKDROP_SELECTOR).getAttribute('style')).toBeNull();
+  });
+  _vitest.it.todo('RMO-05 기대 동작 (#627): zIndex={0} 도 백드롭 style.zIndex "0" 으로 적용한다 (vanilla 와 일치)');
+});
+(0, _vitest.describe)('React Modal — 중첩 모달 (RMO-06)', () => {
+  (0, _vitest.it)('RMO-06 두 모달이 열린 채 Escape 를 한 번 누르면 두 onClose 가 모두 불린다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 RMO-06 (중첩 모달 — 각 모달이 document keydown 을 따로 들어 Escape 한 번에 모두 닫힘, VMO-07 과 한 행)
+    // Given: 두 모달을 함께 연다
+    const lowerOnClose = _vitest.vi.fn();
+    const upperOnClose = _vitest.vi.fn();
+    mount(/*#__PURE__*/(0, _react.createElement)('div', null, modal({
+      onClose: lowerOnClose
+    }), modal({
+      onClose: upperOnClose
+    })));
+    // When: Escape 를 한 번 누른다
+    pressKey('Escape');
+    // Then: 두 onClose 가 1회씩 불린다
+    (0, _vitest.expect)(lowerOnClose).toHaveBeenCalledTimes(1);
+    (0, _vitest.expect)(upperOnClose).toHaveBeenCalledTimes(1);
+  });
+  (0, _vitest.it)('RMO-06 두 모달 중 하나를 닫으면 다른 모달이 열려 있어도 body 스크롤 잠금이 풀린다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 RMO-06 (중첩 모달 — cleanup 이 overflow 를 무조건 '' 로 되돌림, VMO-07 과 한 행)
+    // Given: 참조가 고정된 onClose 로 두 모달을 함께 연다 (사용처의 useCallback 과 같은 조건 —
+    // onClose 가 매 렌더 바뀌면 아래 모달 effect 가 재실행돼 잠금을 다시 건다)
+    const lowerOnClose = _vitest.vi.fn();
+    const upperOnClose = _vitest.vi.fn();
+    const view = mount(/*#__PURE__*/(0, _react.createElement)('div', null, modal({
+      onClose: lowerOnClose
+    }), modal({
+      onClose: upperOnClose
+    })));
+    // When: 위 모달만 isOpen false 로 닫는다
+    view.rerender(/*#__PURE__*/(0, _react.createElement)('div', null, modal({
+      onClose: lowerOnClose
+    }), modal({
+      onClose: upperOnClose,
+      isOpen: false
+    })));
+    // Then: 아래 모달 백드롭은 남아 있지만 overflow 는 비어 있다
+    (0, _vitest.expect)(document.body.querySelectorAll(BACKDROP_SELECTOR).length).toBe(1);
+    (0, _vitest.expect)(document.body.style.overflow).toBe('');
+  });
+  (0, _vitest.it)('RMO-06 (대조) onClose 를 매 렌더 새로 만들면 아래 모달 effect 가 재실행돼 잠금이 다시 걸린다', () => {
+    // Given: 렌더마다 새 onClose 로 두 모달을 함께 연다
+    const view = mount(/*#__PURE__*/(0, _react.createElement)('div', null, modal({
+      onClose: () => undefined
+    }), modal()));
+    // When: 위 모달만 닫는다 (아래 모달 onClose 도 새 함수)
+    view.rerender(/*#__PURE__*/(0, _react.createElement)('div', null, modal({
+      onClose: () => undefined
+    }), modal({
+      isOpen: false
+    })));
+    // Then: overflow 가 hidden 으로 남는다 — 위 케이스의 '' 단언이 공허하지 않음을 보인다
+    (0, _vitest.expect)(document.body.style.overflow).toBe('hidden');
+  });
+  _vitest.it.todo('RMO-06 기대 동작 (#627): Escape 한 번은 가장 위 모달의 onClose 만 부른다');
+  _vitest.it.todo('RMO-06 기대 동작 (#627): 다른 모달이 열려 있는 동안 body 스크롤 잠금을 유지한다');
+});
+(0, _vitest.describe)('React Modal — 나머지 props · Content (RMO-07)', () => {
+  (0, _vitest.it)('RMO-07 size · className · 나머지 props 를 반영한다', () => {
+    // Given/When: 타입 밖 속성을 캐스팅으로 넘긴다 (...restProps 가 백드롭에 전달되는지 본다)
+    const extra = {
+      'data-modal-id': 'order'
+    };
+    mount(modal({
+      size: 'lg',
+      className: 'custom-backdrop',
+      ...extra
+    }));
+    // Then: 백드롭에 className · data 속성, 안쪽에 크기 클래스
+    const backdrop = mustQuery(document.body, BACKDROP_SELECTOR);
+    (0, _vitest.expect)(backdrop.classList.contains('custom-backdrop')).toBe(true);
+    (0, _vitest.expect)(backdrop.getAttribute('data-modal-id')).toBe('order');
+    (0, _vitest.expect)(mustQuery(backdrop, '.ncua-modal').classList.contains('ncua-modal--lg')).toBe(true);
+  });
+  (0, _vitest.it)('RMO-07 Modal.Content 는 className 을 붙이고 children 을 그린다', () => {
+    const inner = renderInsideModal(/*#__PURE__*/(0, _react.createElement)(_Modal.Modal.Content, {
+      className: 'custom-content'
+    }, '본문'));
+    const content = mustQuery(inner, '.ncua-modal__content');
+    (0, _vitest.expect)(content.classList.contains('custom-content')).toBe(true);
+    (0, _vitest.expect)(content.textContent).toBe('본문');
+  });
+});