@ncds/ui-admin 1.8.27 → 1.8.28-alpha.1

package/dist/cjs/src/components/forms-and-input/textarea/__tests__/Textarea.unmount.test.js

@@ -0,0 +1,158 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Textarea = require("../Textarea");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const mounted = [];
+/** 네이티브 리스너 예외는 dispatchEvent 밖으로 던져지지 않고 window error 로만 보고된다 */
+let windowErrors = [];
+const collectWindowError = event => {
+  windowErrors.push(event.error);
+  event.preventDefault();
+};
+(0, _vitest.beforeEach)(() => {
+  windowErrors = [];
+  window.addEventListener('error', collectWindowError);
+});
+(0, _vitest.afterEach)(() => {
+  window.removeEventListener('error', collectWindowError);
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+  _vitest.vi.restoreAllMocks();
+});
+/** 글자 수를 켠 Textarea 를 마운트하고, 자기 항목만 정리 목록에서 빼는 unmount 를 함께 돌려준다 */
+const mountTextarea = () => {
+  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(/*#__PURE__*/(0, _react.createElement)(_Textarea.Textarea, {
+    characterCount: true,
+    defaultValue: 'ab'
+  })));
+  const textarea = container.querySelector('textarea');
+  if (!textarea) throw new Error('textarea 를 찾을 수 없습니다');
+  const unmount = () => {
+    mounted.splice(mounted.indexOf(entry), 1);
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  };
+  return {
+    root,
+    textarea,
+    unmount
+  };
+};
+/** textarea 의 input 리스너 등록 · 해제를 기록하며 마운트한다 */
+const mountTracked = () => {
+  const addSpy = _vitest.vi.spyOn(HTMLTextAreaElement.prototype, 'addEventListener');
+  const removeSpy = _vitest.vi.spyOn(HTMLTextAreaElement.prototype, 'removeEventListener');
+  const view = mountTextarea();
+  const inputHandler = addSpy.mock.calls.find(_ref => {
+    let [type] = _ref;
+    return type === 'input';
+  })?.[1];
+  const removedInputHandlers = () => removeSpy.mock.calls.filter(_ref2 => {
+    let [type] = _ref2;
+    return type === 'input';
+  }).map(_ref3 => {
+    let [, h] = _ref3;
+    return h;
+  });
+  return {
+    ...view,
+    inputHandler,
+    removedInputHandlers
+  };
+};
+/**
+ * textarea 에 등록되는 input 리스너를 호출 기록 래퍼로 감싸 마운트한다.
+ * 남은 리스너가 unmount 뒤에도 실제로 실행되는지를 관찰하기 위해서다 (원래 핸들러는 그대로 호출).
+ */
+const mountWithInputLog = () => {
+  const invocations = [];
+  const originalAdd = EventTarget.prototype.addEventListener;
+  _vitest.vi.spyOn(HTMLTextAreaElement.prototype, 'addEventListener').mockImplementation(function (type, listener, options) {
+    if (type === 'input' && typeof listener === 'function') {
+      const logged = event => {
+        invocations.push(event.type);
+        listener.call(this, event);
+      };
+      originalAdd.call(this, type, logged, options);
+      return;
+    }
+    originalAdd.call(this, type, listener, options);
+  });
+  const {
+    textarea,
+    unmount
+  } = mountTextarea();
+  return {
+    textarea,
+    invocations,
+    unmount
+  };
+};
+(0, _vitest.describe)('Textarea — characterCount 리스너 정리 (RSD-07)', () => {
+  (0, _vitest.it)('RSD-07 unmount 하면 input 리스너를 해제하지 않는다 — 정리 시점에 ref 가 이미 null', () => {
+    // 현재 동작 고정 — 결함 후보: #627 RSD-07 (cleanup 이 textareaRef.current 를 읽는데 unmount 때는 callback ref 가 먼저 null 을 넣어 remove 가 호출되지 않음)
+    // Given: 글자 수를 켠 Textarea
+    const view = mountTracked();
+    // When: unmount 한다
+    view.unmount();
+    // Then: 등록한 input 핸들러가 해제되지 않았다
+    (0, _vitest.expect)(view.inputHandler).toBeTypeOf('function');
+    (0, _vitest.expect)(view.removedInputHandlers()).not.toContain(view.inputHandler);
+  });
+  (0, _vitest.it)('RSD-07 (대조) 마운트 중 characterCount 를 끄면 cleanup 이 ref 를 읽을 수 있어 같은 핸들러를 해제한다', () => {
+    // Given: 글자 수를 켠 Textarea
+    const view = mountTracked();
+    // When: characterCount 를 false 로 바꾼다 (effect 재실행 → 이전 cleanup)
+    (0, _testUtils.act)(() => view.root.render(/*#__PURE__*/(0, _react.createElement)(_Textarea.Textarea, {
+      characterCount: false,
+      defaultValue: 'ab'
+    })));
+    // Then: 등록한 핸들러가 해제됐다 — 위 케이스의 "해제 안 됨" 이 기록 착시가 아님을 보인다
+    (0, _vitest.expect)(view.removedInputHandlers()).toContain(view.inputHandler);
+  });
+  (0, _vitest.it)('RSD-07 unmount 뒤 떼어 낸 textarea 에 input 이 오면 남은 핸들러가 실행되고, ref null 폴백(0)으로 예외 없이 끝난다', () => {
+    // 현재 동작 고정 — 결함 후보: #627 RSD-07 (위와 같은 뿌리 — 남은 리스너가 unmount 뒤에도 실행되는 결함 경로)
+    // Given: unmount 한 Textarea 의 떼어 낸 요소 (마운트 중 등록한 input 리스너는 호출 기록 래퍼로 감쌌다)
+    const view = mountWithInputLog();
+    view.unmount();
+    // When: 그 요소에 input 을 보낸다
+    (0, _testUtils.act)(() => {
+      view.textarea.dispatchEvent(new Event('input'));
+    });
+    // Then: 남은 핸들러가 한 번 실행됐고 window error 는 없다
+    (0, _vitest.expect)(view.invocations).toEqual(['input']);
+    (0, _vitest.expect)(windowErrors).toEqual([]);
+  });
+  (0, _vitest.it)('RSD-07 (대조) 떼어 낸 textarea 의 리스너가 던지면 window error 로 수집된다 — 위 [] 단언이 공허하지 않음', () => {
+    // Given: 던지는 input 리스너를 단 떼어 낸 textarea
+    const detached = document.createElement('textarea');
+    detached.addEventListener('input', () => {
+      throw new Error('의도한 예외');
+    });
+    // When: input 을 보낸다
+    detached.dispatchEvent(new Event('input'));
+    // Then: 예외가 수집된다
+    (0, _vitest.expect)(windowErrors).toHaveLength(1);
+  });
+  _vitest.it.todo('RSD-07 기대 동작 (#627): unmount 하면 등록한 input 리스너를 해제한다 (cleanup 이 등록 시점의 요소를 붙잡아 쓴다)');
+});

package/dist/cjs/src/components/forms-and-input/toggle/__tests__/Toggle.test.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _Toggle = require("../Toggle");
+// @vitest-environment jsdom
+//
+// Toggle (React) 위험 경로 — 위험 목록표 TO-xx.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+const renderElement = element => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(element);
+  });
+  return container;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return renderElement(/*#__PURE__*/(0, _react.createElement)(_Toggle.Toggle, props));
+};
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  container?.remove();
+  root = null;
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+  const element = scope.querySelector(selector);
+  if (!element) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return element;
+};
+const inputOf = view => requireElement(view, 'input');
+const toggleOf = view => requireElement(view, '.ncua-toggle');
+const click = element => {
+  (0, _testUtils.act)(() => {
+    element.click();
+  });
+};
+// ── P0 ─────────────────────────────────────────────────
+(0, _vitest.describe)('Toggle — 토글 (TO-01)', () => {
+  (0, _vitest.it)('TO-01 uncontrolled: click 하면 onChange(event) 를 부르고 checked 가 토글된다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      onChange
+    });
+    click(inputOf(view));
+    (0, _vitest.expect)(onChange.mock.calls[0][0].target.checked).toBe(true);
+    (0, _vitest.expect)(inputOf(view).checked).toBe(true);
+  });
+  (0, _vitest.it)('TO-01 controlled: checked prop 을 반영하고 부모가 바꿔야 상태가 바뀐다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      checked: true,
+      onChange
+    });
+    click(inputOf(view));
+    (0, _vitest.expect)(onChange).toHaveBeenCalled();
+    (0, _vitest.expect)(inputOf(view).checked).toBe(true);
+    render({
+      checked: false,
+      onChange
+    });
+    (0, _vitest.expect)(inputOf(view).checked).toBe(false);
+  });
+  (0, _vitest.it)('TO-01 label 영역(스위치) click 으로도 토글된다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      onChange
+    });
+    click(requireElement(view, '.ncua-toggle__switch'));
+    (0, _vitest.expect)(inputOf(view).checked).toBe(true);
+    (0, _vitest.expect)(onChange).toHaveBeenCalled();
+  });
+});
+(0, _vitest.describe)('Toggle — disabled (TO-02)', () => {
+  (0, _vitest.it)('TO-02 disabled 면 ncua-toggle--disabled 이고 click 해도 onChange·상태 변화가 없다', () => {
+    const onChange = _vitest.vi.fn();
+    const view = render({
+      disabled: true,
+      onChange
+    });
+    click(inputOf(view));
+    (0, _vitest.expect)(toggleOf(view).classList.contains('ncua-toggle--disabled')).toBe(true);
+    (0, _vitest.expect)(onChange).not.toHaveBeenCalled();
+    (0, _vitest.expect)(inputOf(view).checked).toBe(false);
+  });
+});
+// ── P2 ~ P3 ────────────────────────────────────────────
+(0, _vitest.describe)('Toggle — 텍스트 영역 (TO-03)', () => {
+  const textsOf = view => [view.querySelector('.ncua-toggle__text-wrapper') !== null, view.querySelector('.ncua-toggle__text')?.textContent ?? null, view.querySelector('.ncua-toggle__support-text')?.textContent ?? null];
+  _vitest.it.each([['text 만', {
+    text: '알림'
+  }, [true, '알림', null]], ['text + supportText', {
+    text: '알림',
+    supportText: '푸시 알림을 받습니다'
+  }, [true, '알림', '푸시 알림을 받습니다']], ['둘 다 없음', {}, [false, null, null]]])('TO-03 %s → [텍스트 영역, text, supportText]', (_label, props, expected) => {
+    const view = render(props);
+    (0, _vitest.expect)(textsOf(view)).toEqual(expected);
+  });
+  (0, _vitest.it)('TO-03 text 없이 supportText 만 주면 텍스트 영역을 만들지 않아 supportText 가 보이지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (텍스트 영역이 text 에만 의존 — Checkbox 는 같은 입력에서 supportText 를 표시)
+    const view = render({
+      supportText: '푸시 알림을 받습니다'
+    });
+    (0, _vitest.expect)(textsOf(view)).toEqual([false, null, null]);
+  });
+  _vitest.it.todo('TO-03 text 없이 supportText 만 주어도 supportText 를 표시한다 (기대, #597)');
+});
+(0, _vitest.describe)('Toggle — size·className·rest (TO-04)', () => {
+  (0, _vitest.it)('TO-04 size 기본값은 sm', () => {
+    const view = render();
+    (0, _vitest.expect)(toggleOf(view).classList.contains('ncua-toggle--sm')).toBe(true);
+  });
+  (0, _vitest.it)('TO-04 size md·className 을 label 에, name·aria-label 을 input 에 전달한다', () => {
+    const view = render({
+      size: 'md',
+      className: 'my-toggle',
+      name: 'notify',
+      'aria-label': '알림'
+    });
+    (0, _vitest.expect)([toggleOf(view).classList.contains('ncua-toggle--md'), toggleOf(view).classList.contains('my-toggle'), inputOf(view).name, inputOf(view).getAttribute('aria-label')]).toEqual([true, true, 'notify', '알림']);
+  });
+});

package/dist/cjs/src/components/image-and-icons/featured-icon/__tests__/FeaturedIcon.test.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _FeaturedIcon = require("../FeaturedIcon");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+/** sm 아이콘 크기 */
+const ICON_SIZE_SM = 16;
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+});
+/** 받은 width · height 를 속성으로 남기는 합성 아이콘 */
+const SyntheticIcon = _ref => {
+  let {
+    width,
+    height
+  } = _ref;
+  return /*#__PURE__*/(0, _react.createElement)('svg', {
+    'data-icon': '',
+    width,
+    height
+  });
+};
+const mountIcon = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = (0, _client.createRoot)(container);
+  mounted.push({
+    root,
+    container
+  });
+  (0, _testUtils.act)(() => root.render(/*#__PURE__*/(0, _react.createElement)(_FeaturedIcon.FeaturedIcon, {
+    icon: SyntheticIcon,
+    ...props
+  })));
+  const element = container.querySelector('.ncua-featured-icon');
+  if (!element) throw new Error('FeaturedIcon 을 찾을 수 없습니다');
+  return element;
+};
+(0, _vitest.describe)('FeaturedIcon (React) — outline-circle 외곽선 (RSD-06)', () => {
+  (0, _vitest.it)('RSD-06 outline-circle 이면 inner · outer 외곽선 2개를 아이콘 앞에 그린다', () => {
+    const element = mountIcon({
+      theme: 'outline-circle'
+    });
+    const [inner, outer, icon] = Array.from(element.children);
+    (0, _vitest.expect)([inner.classList.contains('ncua-featured-icon__outline--inner'), outer.classList.contains('ncua-featured-icon__outline--outer'), icon.hasAttribute('data-icon')]).toEqual([true, true, true]);
+  });
+  (0, _vitest.it)('RSD-06 (대조) 기본 light-circle 은 외곽선 없이 sm 크기 아이콘만 그린다', () => {
+    const element = mountIcon();
+    (0, _vitest.expect)(element.querySelector('.ncua-featured-icon__outline')).toBeNull();
+    (0, _vitest.expect)(element.classList.contains('ncua-featured-icon--light-circle')).toBe(true);
+    (0, _vitest.expect)(element.querySelector('[data-icon]')?.getAttribute('width')).toBe(String(ICON_SIZE_SM));
+  });
+});

package/dist/cjs/src/components/layout/block-container/__tests__/BlockContainer.test.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _BlockContainer = require("../BlockContainer");
+// @vitest-environment jsdom
+//
+// BlockContainer (src/components/layout/block-container/BlockContainer.tsx) 위험 경로 — 위험 목록표 BC-xx.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  _vitest.vi.restoreAllMocks();
+});
+const render = node => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(node);
+  });
+  return container;
+};
+(0, _vitest.describe)('BlockContainer — section·Body (BC-01)', () => {
+  (0, _vitest.it)('BC-01 section 과 Body div 에 children·className·나머지 속성을 전달한다', () => {
+    const view = render(/*#__PURE__*/(0, _react.createElement)(_BlockContainer.BlockContainer,
+    // children 은 세 번째 인자로 넘긴다 (props 타입에서 필수라 단언)
+    {
+      className: 'my-block',
+      id: 'block-order'
+    }, /*#__PURE__*/(0, _react.createElement)(_BlockContainer.BlockContainer.Body, {
+      className: 'my-body',
+      'aria-label': '주문 정보'
+    }, '본문')));
+    const section = view.querySelector('section.ncua-block-container');
+    const body = section?.querySelector('div.ncua-block-container__body');
+    (0, _vitest.expect)(section?.classList.contains('my-block')).toBe(true);
+    (0, _vitest.expect)(section?.id).toBe('block-order');
+    (0, _vitest.expect)(body?.classList.contains('my-body')).toBe(true);
+    (0, _vitest.expect)(body?.getAttribute('aria-label')).toBe('주문 정보');
+    (0, _vitest.expect)(body?.textContent).toBe('본문');
+  });
+  (0, _vitest.it)('BC-01 compound 이름은 BlockContainer · BlockContainer.Body 이다', () => {
+    (0, _vitest.expect)([_BlockContainer.BlockContainer.displayName, _BlockContainer.BlockContainer.Body.displayName]).toEqual(['BlockContainer', 'BlockContainer.Body']);
+  });
+});

package/dist/cjs/src/components/layout/block-header/__tests__/BlockHeader.test.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _react = require("react");
+var _client = require("react-dom/client");
+var _server = require("react-dom/server");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _BlockHeader = require("../BlockHeader");
+// @vitest-environment jsdom
+//
+// BlockHeader (src/components/layout/block-header/BlockHeader.tsx) 위험 경로 — 위험 목록표 BH-xx.
+// Tooltip 은 실구현으로 렌더한다. 접힘 아이콘(Up/Down)은 아이콘 컴포넌트가 그리는 path 로 구분한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '기본 정보';
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  document.body.innerHTML = '';
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_BlockHeader.BlockHeader, props));
+  });
+  return container;
+};
+/** 아이콘 컴포넌트가 그리는 path 의 d — DOM 의 svg 와 비교해 어떤 아이콘인지 판별한다 */
+const iconPathOf = Icon => {
+  const holder = document.createElement('div');
+  holder.innerHTML = (0, _server.renderToStaticMarkup)(/*#__PURE__*/(0, _react.createElement)(Icon));
+  return holder.querySelector('path')?.getAttribute('d') ?? null;
+};
+const headerOf = view => view.querySelector('header.ncua-block-header');
+const hasModifier = (view, modifier) => headerOf(view)?.classList.contains(`ncua-block-header--${modifier}`) ?? false;
+const toggleOf = view => view.querySelector('.ncua-block-header__collapsible-btn');
+const tabs = /*#__PURE__*/(0, _react.createElement)('div', {
+  className: 'my-tabs'
+}, '탭');
+(0, _vitest.describe)('BlockHeader — 접기 버튼 (BH-01)', () => {
+  (0, _vitest.it)('BH-01 펼친 상태: aria-expanded true · Up 아이콘, click 하면 onToggle, children(탭) 을 렌더한다', () => {
+    const onToggle = _vitest.vi.fn();
+    const view = render({
+      title: TITLE,
+      collapsible: {
+        expanded: true,
+        onToggle
+      },
+      children: tabs
+    });
+    const toggle = toggleOf(view);
+    (0, _testUtils.act)(() => {
+      toggle?.click();
+    });
+    (0, _vitest.expect)(toggle?.getAttribute('type')).toBe('button');
+    (0, _vitest.expect)(toggle?.getAttribute('aria-expanded')).toBe('true');
+    (0, _vitest.expect)(toggle?.querySelector('path')?.getAttribute('d')).toBe(iconPathOf(_uiAdminIcon.ChevronUp));
+    (0, _vitest.expect)(onToggle).toHaveBeenCalled();
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__tabs .my-tabs')).not.toBeNull();
+    (0, _vitest.expect)(hasModifier(view, 'has-tab')).toBe(true);
+  });
+  (0, _vitest.it)('BH-01 접힌 상태: aria-expanded false · Down 아이콘, 탭을 숨기고 no-divider · has-tab 없음', () => {
+    const view = render({
+      title: TITLE,
+      collapsible: {
+        expanded: false,
+        onToggle: _vitest.vi.fn()
+      },
+      children: tabs
+    });
+    const toggle = toggleOf(view);
+    (0, _vitest.expect)(toggle?.getAttribute('aria-expanded')).toBe('false');
+    (0, _vitest.expect)(toggle?.querySelector('path')?.getAttribute('d')).toBe(iconPathOf(_uiAdminIcon.ChevronDown));
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__tabs')).toBeNull();
+    (0, _vitest.expect)(hasModifier(view, 'no-divider')).toBe(true);
+    (0, _vitest.expect)(hasModifier(view, 'has-tab')).toBe(false);
+  });
+  (0, _vitest.it)('BH-01 collapsible 이 없으면 접기 버튼이 없다', () => {
+    const view = render({
+      title: TITLE
+    });
+    (0, _vitest.expect)(toggleOf(view)).toBeNull();
+  });
+});
+(0, _vitest.describe)('BlockHeader — 클래스 조합 (BH-02)', () => {
+  (0, _vitest.it)('BH-02 기본은 구분선 있음 — no-divider·column·has-tab·control-strip·is-required 모두 없음', () => {
+    const view = render({
+      title: TITLE
+    });
+    (0, _vitest.expect)(['no-divider', 'column', 'has-tab', 'has-control-strip', 'is-required'].map(m => hasModifier(view, m))).toEqual([false, false, false, false, false]);
+  });
+  _vitest.it.each([['showDivider false', {
+    showDivider: false
+  }], ['children(탭) 있음', {
+    children: tabs
+  }]])('BH-02 %s 면 no-divider', (_label, props) => {
+    const view = render({
+      title: TITLE,
+      ...props
+    });
+    (0, _vitest.expect)(hasModifier(view, 'no-divider')).toBe(true);
+  });
+  (0, _vitest.it)('BH-02 description 이 있으면 column 레이아웃과 설명 문단을 렌더한다', () => {
+    const view = render({
+      title: TITLE,
+      description: '필수 항목을 입력하세요'
+    });
+    (0, _vitest.expect)(hasModifier(view, 'column')).toBe(true);
+    (0, _vitest.expect)(view.querySelector('p.ncua-block-header__description')?.textContent).toBe('필수 항목을 입력하세요');
+  });
+  (0, _vitest.it)('BH-02 controlStrip 이 있으면 has-control-strip 과 control-strip 영역을 렌더한다', () => {
+    const view = render({
+      title: TITLE,
+      controlStrip: /*#__PURE__*/(0, _react.createElement)('span', null, '필터')
+    });
+    (0, _vitest.expect)(hasModifier(view, 'has-control-strip')).toBe(true);
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__control-strip')?.textContent).toBe('필터');
+  });
+  (0, _vitest.it)('BH-02 showRequiredNotice 면 is-required 와 필수 입력 안내 문구를 렌더한다', () => {
+    const view = render({
+      title: TITLE,
+      showRequiredNotice: true
+    });
+    (0, _vitest.expect)(hasModifier(view, 'is-required')).toBe(true);
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__required-notice')?.textContent).toBe('* 는 필수 입력 항목입니다.');
+  });
+});
+(0, _vitest.describe)('BlockHeader — 제목·툴팁·배지·액션 (BH-03)', () => {
+  (0, _vitest.it)('BH-03 title·badge·action 을 각 영역에 렌더하고 tooltip 이 있으면 fill 아이콘 Tooltip 을 둔다', () => {
+    const view = render({
+      title: TITLE,
+      tooltip: '도움말',
+      badge: /*#__PURE__*/(0, _react.createElement)('em', null, 'NEW'),
+      action: /*#__PURE__*/(0, _react.createElement)('button', {
+        type: 'button'
+      }, '추가')
+    });
+    const titleArea = view.querySelector('.ncua-block-header__title-area');
+    (0, _vitest.expect)(titleArea?.querySelector('.ncua-block-header__title')?.textContent).toBe(TITLE);
+    (0, _vitest.expect)(titleArea?.querySelector('.ncua-tooltip')?.classList.contains('ncua-tooltip--stroke')).toBe(false);
+    (0, _vitest.expect)(titleArea?.querySelector('.ncua-block-header__badge em')?.textContent).toBe('NEW');
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__action-area button')?.textContent).toBe('추가');
+  });
+  (0, _vitest.it)('BH-03 tooltip·badge 가 없으면 렌더하지 않고 className·나머지 header 속성을 전달한다', () => {
+    const view = render({
+      title: TITLE,
+      className: 'my-block',
+      id: 'block-basic'
+    });
+    (0, _vitest.expect)(view.querySelector('.ncua-tooltip')).toBeNull();
+    (0, _vitest.expect)(view.querySelector('.ncua-block-header__badge')).toBeNull();
+    (0, _vitest.expect)(headerOf(view)?.classList.contains('my-block')).toBe(true);
+    (0, _vitest.expect)(headerOf(view)?.id).toBe('block-basic');
+  });
+});

package/dist/cjs/src/components/layout/block-header/__tests__/SubTitle.test.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _SubTitle = require("../SubTitle");
+// @vitest-environment jsdom
+//
+// BlockHeader.SubTitle (src/components/layout/block-header/SubTitle.tsx) 위험 경로 — 위험 목록표 ST-xx.
+// Tooltip 은 실구현으로 렌더한다.
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '배송지';
+let root = null;
+let container = null;
+(0, _vitest.afterEach)(() => {
+  if (root) {
+    (0, _testUtils.act)(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  document.body.innerHTML = '';
+  _vitest.vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = (0, _client.createRoot)(container);
+  }
+  (0, _testUtils.act)(() => {
+    root?.render(/*#__PURE__*/(0, _react.createElement)(_SubTitle.SubTitle, props));
+  });
+  return container;
+};
+const rootOf = view => view.querySelector('.ncua-sub-title');
+(0, _vitest.describe)('SubTitle — 조합 (ST-01)', () => {
+  (0, _vitest.it)('ST-01 기본은 sm 크기이고 title 만 렌더한다 — 필수 마커·툴팁·액션·설명·에러 없음', () => {
+    const view = render({
+      title: TITLE
+    });
+    (0, _vitest.expect)(rootOf(view)?.classList.contains('ncua-sub-title--sm')).toBe(true);
+    (0, _vitest.expect)(view.querySelector('.ncua-sub-title__title')?.textContent).toBe(TITLE);
+    (0, _vitest.expect)(['.ncua-sub-title__required-marker', '.ncua-tooltip', '.ncua-sub-title__action', '.ncua-sub-title__description', '.ncua-sub-title__error'].map(selector => view.querySelector(selector))).toEqual([null, null, null, null, null]);
+  });
+  (0, _vitest.it)('ST-01 required·tooltip·action·description·error 를 모두 넘기면 각 영역을 렌더한다', () => {
+    const view = render({
+      title: TITLE,
+      size: 'middle',
+      required: true,
+      tooltip: '도움말',
+      action: /*#__PURE__*/(0, _react.createElement)('button', {
+        type: 'button'
+      }, '변경'),
+      description: '기본 배송지로 저장됩니다',
+      error: '배송지를 입력하세요',
+      className: 'my-sub-title',
+      id: 'sub-title-address'
+    });
+    const titleArea = view.querySelector('.ncua-sub-title__title-area');
+    (0, _vitest.expect)(rootOf(view)?.classList.contains('ncua-sub-title--middle')).toBe(true);
+    (0, _vitest.expect)(rootOf(view)?.classList.contains('my-sub-title')).toBe(true);
+    (0, _vitest.expect)(rootOf(view)?.id).toBe('sub-title-address');
+    (0, _vitest.expect)(titleArea?.firstElementChild?.textContent).toBe('*');
+    (0, _vitest.expect)(titleArea?.querySelector('.ncua-tooltip')).not.toBeNull();
+    (0, _vitest.expect)(view.querySelector('.ncua-sub-title__action button')?.textContent).toBe('변경');
+    (0, _vitest.expect)(view.querySelector('p.ncua-sub-title__description')?.textContent).toBe('기본 배송지로 저장됩니다');
+    (0, _vitest.expect)(view.querySelector('p.ncua-sub-title__error')?.textContent).toBe('배송지를 입력하세요');
+  });
+  (0, _vitest.it)('ST-01 compound 이름은 BlockHeader.SubTitle 이다', () => {
+    (0, _vitest.expect)(_SubTitle.SubTitle.displayName).toBe('BlockHeader.SubTitle');
+  });
+});