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

package/dist/cjs/src/components/data-display/table/__tests__/useTableScrollbars.ownership.test.js

@@ -0,0 +1,362 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _const = require("../../../../../assets/scripts/table/scrollbar/const");
+var _useTableScrollbars = require("../useTableScrollbars");
+// @vitest-environment jsdom
+/**
+ * 소유권 충돌 · 가로 훅 비활성 · 방어 분기 (UTS-01~04).
+ * UTS-03 의 방어 분기는 공개 경로(Table.tsx)가 enabled 일 때 ref 를 항상 붙여 닿지 않는다.
+ * 공개 경로 미사용 — 훅을 직접 렌더하고 ref 를 일부러 빼서 구동한다.
+ */
+
+const observers = [];
+class ResizeObserverStub {
+  constructor() {
+    this.record = {
+      targets: []
+    };
+    observers.push(this.record);
+  }
+  observe(target) {
+    this.record.targets.push(target);
+  }
+  unobserve() {
+    // 관찰 대상 기록만 검증한다.
+  }
+  disconnect() {
+    // 관찰 대상 기록만 검증한다.
+  }
+}
+/** jsdom 은 레이아웃을 계산하지 않으므로 측정 속성을 직접 정의한다. */
+const defineMetrics = (element, metrics) => {
+  for (const [key, value] of Object.entries(metrics)) {
+    Object.defineProperty(element, key, {
+      configurable: true,
+      writable: true,
+      value
+    });
+  }
+};
+/**
+ * 세로 폴백 판별용 치수. 트랙 높이 0 이면 `scrollArea ?? 컨테이너` 높이에서 `TABLE_HEADER_HEIGHT` · `SCROLLBAR_TRACK_OFFSET` 을 뺀다.
+ * 컨테이너(200)와 scroll-area(240)를 다르게 두어 어느 쪽을 썼는지 썸 높이로 갈린다 — 최소 높이 40 보다 크게.
+ */
+const VIEWPORT_HEIGHT = 200;
+const CONTENT_HEIGHT = 400;
+const AREA_HEIGHT = 240;
+const HEADER_AND_OFFSET = _const.TABLE_HEADER_HEIGHT + _const.SCROLLBAR_TRACK_OFFSET;
+const thumbHeightFor = basisHeight => VIEWPORT_HEIGHT / CONTENT_HEIGHT * (basisHeight - HEADER_AND_OFFSET);
+const H_OVERFLOWING = {
+  scrollWidth: 1000,
+  clientWidth: 400,
+  scrollLeft: 100
+};
+const POINTER_Y = 30;
+const refUnless = (skip, ref) => skip ? undefined : ref;
+const VerticalHarness = _ref => {
+  let {
+    enabled = true,
+    refless = [],
+    withTable = true
+  } = _ref;
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const scrollAreaRef = (0, _react.useRef)(null);
+  const scrollbarRef = (0, _react.useRef)(null);
+  const thumbRef = (0, _react.useRef)(null);
+  const {
+    handleThumbMouseDown
+  } = (0, _useTableScrollbars.useTableVerticalScrollbar)({
+    enabled,
+    layoutKey: false,
+    scrollContainerRef,
+    scrollAreaRef,
+    scrollbarRef,
+    thumbRef
+  });
+  return /*#__PURE__*/(0, _react.createElement)('div', {
+    className: 'ncua-table ncua-table--fixed-header'
+  }, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('area'), scrollAreaRef),
+    className: 'ncua-table__scroll-area'
+  }, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('scroll'), scrollContainerRef),
+    className: 'ncua-table__scroll-container'
+  }, withTable ? /*#__PURE__*/(0, _react.createElement)('table', {
+    className: 'ncua-table__table'
+  }, /*#__PURE__*/(0, _react.createElement)('tbody', null)) : null), /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('track'), scrollbarRef),
+    className: 'ncua-table__scrollbar'
+  }, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('thumb'), thumbRef),
+    className: 'ncua-table__scrollbar-thumb',
+    onMouseDown: handleThumbMouseDown
+  }))));
+};
+const HorizontalHarness = _ref2 => {
+  let {
+    enabled = true,
+    refless = [],
+    withInner = true,
+    withTable = true
+  } = _ref2;
+  const hScrollContainerRef = (0, _react.useRef)(null);
+  const hScrollbarRef = (0, _react.useRef)(null);
+  const hThumbRef = (0, _react.useRef)(null);
+  const {
+    handleHThumbMouseDown
+  } = (0, _useTableScrollbars.useTableHorizontalScrollbar)({
+    enabled,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  });
+  const table = withTable ? /*#__PURE__*/(0, _react.createElement)('table', {
+    className: 'ncua-table__table'
+  }) : null;
+  return /*#__PURE__*/(0, _react.createElement)('div', {
+    className: 'ncua-table'
+  }, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('hScroll'), hScrollContainerRef),
+    className: 'ncua-table__h-scroll-container'
+  }, withInner ? /*#__PURE__*/(0, _react.createElement)('div', {
+    className: 'ncua-table__h-scroll-inner'
+  }, table) : table, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('hTrack'), hScrollbarRef),
+    className: 'ncua-table__h-scrollbar'
+  }, /*#__PURE__*/(0, _react.createElement)('div', {
+    ref: refUnless(refless.includes('hThumb'), hThumbRef),
+    className: 'ncua-table__h-scrollbar-thumb',
+    onMouseDown: handleHThumbMouseDown
+  }))));
+};
+let container;
+let root;
+let mounted = false;
+const windowErrors = [];
+const collectError = event => {
+  windowErrors.push(event.error);
+};
+const cleanups = [];
+const render = element => {
+  (0, _testUtils.act)(() => {
+    root.render(element);
+  });
+  mounted = true;
+};
+const unmount = () => {
+  if (!mounted) return;
+  (0, _testUtils.act)(() => {
+    root.unmount();
+  });
+  mounted = false;
+};
+const query = selector => {
+  const found = container.querySelector(selector);
+  if (!found) throw new Error(`선택자에 해당하는 요소가 없습니다: ${selector}`);
+  return found;
+};
+const fire = (element, event) => {
+  (0, _testUtils.act)(() => {
+    element.dispatchEvent(event);
+  });
+};
+const pressThumb = thumb => {
+  fire(thumb, new MouseEvent('mousedown', {
+    bubbles: true,
+    cancelable: true,
+    clientY: POINTER_Y
+  }));
+  cleanups.push(() => document.dispatchEvent(new MouseEvent('mouseup')));
+};
+const markers = element => [element.hasAttribute(_const.SCROLLBAR_ATTRS.ready), element.getAttribute(_const.SCROLLBAR_ATTRS.owner)];
+const preoccupy = (element, owner) => {
+  element.setAttribute(_const.SCROLLBAR_ATTRS.ready, '');
+  element.setAttribute(_const.SCROLLBAR_ATTRS.owner, owner);
+};
+(0, _vitest.beforeEach)(() => {
+  _vitest.vi.stubGlobal('ResizeObserver', ResizeObserverStub);
+  observers.length = 0;
+  windowErrors.length = 0;
+  window.addEventListener('error', collectError);
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  (0, _testUtils.act)(() => {
+    root = (0, _client.createRoot)(container);
+  });
+});
+(0, _vitest.afterEach)(() => {
+  while (cleanups.length > 0) cleanups.pop()?.();
+  unmount();
+  container.remove();
+  window.removeEventListener('error', collectError);
+  _vitest.vi.unstubAllGlobals();
+  _vitest.vi.restoreAllMocks();
+});
+(0, _vitest.describe)('UTS-01 해제 시 다른 주체의 표식 보존', () => {
+  _vitest.it.each([{
+    label: '세로',
+    element: () => /*#__PURE__*/(0, _react.createElement)(VerticalHarness),
+    selector: '.ncua-table__scroll-container'
+  }, {
+    label: '가로',
+    element: () => /*#__PURE__*/(0, _react.createElement)(HorizontalHarness),
+    selector: '.ncua-table__h-scroll-container'
+  }])('UTS-01 $label — 마운트 뒤 다른 주체가 owner 를 바꾸면 언마운트해도 ready · owner 를 떼지 않는다', _ref3 => {
+    let {
+      element,
+      selector
+    } = _ref3;
+    render(element());
+    const scrollEl = query(selector);
+    const claimedByReact = markers(scrollEl);
+    scrollEl.setAttribute(_const.SCROLLBAR_ATTRS.owner, _const.SCROLLBAR_OWNERS.cdn);
+    unmount();
+    (0, _vitest.expect)(claimedByReact).toEqual([true, _const.SCROLLBAR_OWNERS.react]);
+    (0, _vitest.expect)(markers(scrollEl)).toEqual([true, _const.SCROLLBAR_OWNERS.cdn]);
+  });
+  (0, _vitest.it)('UTS-01 enabled 를 false 로 바꿔 해제해도 다른 주체 표식은 남는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness));
+    const scrollEl = query('.ncua-table__scroll-container');
+    scrollEl.setAttribute(_const.SCROLLBAR_ATTRS.owner, _const.SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      enabled: false
+    }));
+    (0, _vitest.expect)(markers(scrollEl)).toEqual([true, _const.SCROLLBAR_OWNERS.cdn]);
+  });
+});
+(0, _vitest.describe)('UTS-02 가로 컨테이너 선점', () => {
+  (0, _vitest.it)('UTS-02 다른 주체가 선점한 가로 컨테이너에는 표식을 덮지 않고 옵저버도 붙이지 않는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, _const.SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness));
+    (0, _vitest.expect)(markers(hScrollEl)).toEqual([true, _const.SCROLLBAR_OWNERS.cdn]);
+    (0, _vitest.expect)(observers).toEqual([]);
+  });
+  (0, _vitest.it)('UTS-02 선점된 가로 컨테이너는 scroll 에 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, _const.SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness));
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    (0, _vitest.expect)(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});
+(0, _vitest.describe)('UTS-03 방어 분기 (공개 경로 미사용, 직접 호출)', () => {
+  _vitest.it.each([{
+    part: 'scroll'
+  }, {
+    part: 'thumb'
+  }])('UTS-03 세로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref4 => {
+    let {
+      part
+    } = _ref4;
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      refless: [part]
+    }));
+    (0, _vitest.expect)(markers(query('.ncua-table__scroll-container'))).toEqual([false, null]);
+    (0, _vitest.expect)(observers).toEqual([]);
+  });
+  (0, _vitest.it)('UTS-03 세로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      refless: ['scroll']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    (0, _vitest.expect)([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(_const.SCROLLBAR_ATTRS.dragging))).toEqual([false, false]);
+    (0, _vitest.expect)(windowErrors).toEqual([]);
+  });
+  (0, _vitest.it)('UTS-03 트랙 높이가 0 이고 scroll-area ref 가 없으면 컨테이너 높이로 트랙 길이를 정한다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      refless: ['area', 'track']
+    }));
+    defineMetrics(query('.ncua-table__scroll-area'), {
+      clientHeight: AREA_HEIGHT
+    });
+    defineMetrics(query('.ncua-table__scroll-container'), {
+      clientHeight: VIEWPORT_HEIGHT,
+      scrollHeight: CONTENT_HEIGHT,
+      scrollTop: 0
+    });
+    fire(query('.ncua-table__scroll-container'), new Event('scroll'));
+    const height = Number.parseFloat(query('.ncua-table__scrollbar-thumb').style.height);
+    (0, _vitest.expect)(height).toBeCloseTo(thumbHeightFor(VIEWPORT_HEIGHT));
+    (0, _vitest.expect)(height).not.toBeCloseTo(thumbHeightFor(AREA_HEIGHT));
+  });
+  (0, _vitest.it)('UTS-03 scroll-area · 트랙 ref 와 콘텐츠 table 이 없으면 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      refless: ['area', 'track'],
+      withTable: false
+    }));
+    const scrollEl = query('.ncua-table__scroll-container');
+    (0, _vitest.expect)(observers.map(record => record.targets.map(target => target === scrollEl))).toEqual([[true]]);
+  });
+  (0, _vitest.it)('UTS-03 scroll-area ref 가 없으면 드래그 표식을 스크롤 컨테이너에 단다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(VerticalHarness, {
+      refless: ['area']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    (0, _vitest.expect)([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(_const.SCROLLBAR_ATTRS.dragging))).toEqual([false, true]);
+  });
+  _vitest.it.each([{
+    part: 'hScroll'
+  }, {
+    part: 'hTrack'
+  }, {
+    part: 'hThumb'
+  }])('UTS-03 가로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref5 => {
+    let {
+      part
+    } = _ref5;
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      refless: [part]
+    }));
+    (0, _vitest.expect)(markers(query('.ncua-table__h-scroll-container'))).toEqual([false, null]);
+    (0, _vitest.expect)(observers).toEqual([]);
+  });
+  (0, _vitest.it)('UTS-03 가로 inner · 콘텐츠 table 이 없으면 가로 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      withInner: false,
+      withTable: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    (0, _vitest.expect)(observers.map(record => record.targets.map(target => target === hScrollEl))).toEqual([[true]]);
+  });
+  (0, _vitest.it)('UTS-03 가로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      refless: ['hScroll']
+    }));
+    pressThumb(query('.ncua-table__h-scrollbar-thumb'));
+    (0, _vitest.expect)(query('.ncua-table__h-scroll-container').hasAttribute(_const.SCROLLBAR_ATTRS.dragging)).toBe(false);
+    (0, _vitest.expect)(windowErrors).toEqual([]);
+  });
+});
+(0, _vitest.describe)('UTS-04 가로 훅 비활성', () => {
+  (0, _vitest.it)('UTS-04 대조: enabled 면 같은 치수의 scroll 에 가로 썸 폭이 기록된다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    (0, _vitest.expect)(query('.ncua-table__h-scrollbar-thumb').style.width).not.toBe('');
+  });
+  (0, _vitest.it)('UTS-04 enabled false 면 표식 · 옵저버를 붙이지 않고 scroll 에 가로 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/(0, _react.createElement)(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    (0, _vitest.expect)(markers(hScrollEl)).toEqual([false, null]);
+    (0, _vitest.expect)(observers).toEqual([]);
+    (0, _vitest.expect)(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});

package/dist/cjs/src/components/data-display/table/useTableScrollbars.js

@@ -3,30 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "H_SCROLLBAR_SIDE_GAP", {
-  enumerable: true,
-  get: function () {
-    return _const.H_SCROLLBAR_SIDE_GAP;
-  }
-});
-Object.defineProperty(exports, "H_SCROLLBAR_THUMB_MIN_WIDTH", {
-  enumerable: true,
-  get: function () {
-    return _const.H_SCROLLBAR_THUMB_MIN_WIDTH;
-  }
-});
-Object.defineProperty(exports, "SCROLLBAR_THUMB_MIN_HEIGHT", {
-  enumerable: true,
-  get: function () {
-    return _const.SCROLLBAR_THUMB_MIN_HEIGHT;
-  }
-});
-Object.defineProperty(exports, "SCROLLBAR_TRACK_OFFSET", {
-  enumerable: true,
-  get: function () {
-    return _const.SCROLLBAR_TRACK_OFFSET;
-  }
-});
 Object.defineProperty(exports, "TABLE_HEADER_HEIGHT", {
   enumerable: true,
   get: function () {

package/dist/cjs/src/components/feedback-and-status/badge/__tests__/Badge.test.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _react = require("react");
+var _client = require("react-dom/client");
+var _testUtils = require("react-dom/test-utils");
+var _vitest = require("vitest");
+var _color = require("../../../../../constant/color");
+var _Badge = require("../Badge");
+var _utils = require("../utils");
+// @vitest-environment jsdom
+
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const LABEL = '진행중';
+/** 뱃지 아이콘 기본 크기 */
+const BADGE_ICON_SIZE = 12;
+/** 기본 크기(12)와 겹치지 않는 지정 크기 */
+const CUSTOM_ICON_SIZE = 18;
+/** new-badge 'N' 아이콘 크기 — sm 12 · md 14 */
+const NEW_BADGE_ICON_SM = 12;
+const NEW_BADGE_ICON_MD = 14;
+/** leading · label · trailing */
+const EXPECTED_SLOT_CHILDREN = 3;
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+(0, _vitest.afterEach)(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    (0, _testUtils.act)(() => root.unmount());
+    container.remove();
+  }
+});
+const mountBadge = 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)(_Badge.Badge, {
+    label: LABEL,
+    ...props
+  })));
+  const badge = container.querySelector('.ncua-badge');
+  if (!badge) throw new Error('뱃지를 찾을 수 없습니다');
+  return badge;
+};
+const mustQuery = (root, selector) => {
+  const found = root.querySelector(selector);
+  if (!found) throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+  return found;
+};
+const hasClasses = (element, names) => names.map(name => element.classList.contains(name));
+/** 받은 width · height · color 를 속성으로 남기는 합성 아이콘 */
+const makeIcon = name => {
+  const Icon = _ref => {
+    let {
+      width,
+      height,
+      color
+    } = _ref;
+    return /*#__PURE__*/(0, _react.createElement)('svg', {
+      'data-icon': name,
+      width,
+      height,
+      color
+    });
+  };
+  return Icon;
+};
+const SyntheticIcon = makeIcon('slot');
+(0, _vitest.describe)('Badge — 기본 렌더와 new-badge (BDG-01)', () => {
+  (0, _vitest.it)('BDG-01 기본값: pill-outline · neutral · xs 와 label', () => {
+    const badge = mountBadge();
+    (0, _vitest.expect)(hasClasses(badge, ['ncua-badge--pill-outline', 'ncua-badge--neutral', 'ncua-badge--xs'])).toEqual([true, true, true]);
+    (0, _vitest.expect)(mustQuery(badge, '.ncua-badge__label').textContent).toBe(LABEL);
+  });
+  (0, _vitest.it)('BDG-01 type · color · size · className 을 클래스로 반영한다', () => {
+    const badge = mountBadge({
+      type: 'pill-dark-color',
+      color: 'error',
+      size: 'md',
+      className: 'custom-badge'
+    });
+    (0, _vitest.expect)(hasClasses(badge, ['ncua-badge--pill-dark-color', 'ncua-badge--error', 'ncua-badge--md', 'custom-badge'])).toEqual([true, true, true, true]);
+  });
+  _vitest.it.each([['md', 'md', 'ncua-badge--new-badge-md', NEW_BADGE_ICON_MD], ['sm', 'sm', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM], ['xs(→ sm)', 'xs', 'ncua-badge--new-badge-sm', NEW_BADGE_ICON_SM]])('BDG-01 new-badge size %s 는 %s 클래스와 아이콘 %s px', (_name, size, expectedClass, iconSize) => {
+    const badge = mountBadge({
+      type: 'new-badge',
+      size
+    });
+    (0, _vitest.expect)(badge.classList.contains(expectedClass)).toBe(true);
+    (0, _vitest.expect)(mustQuery(badge, 'svg').getAttribute('width')).toBe(String(iconSize));
+  });
+  (0, _vitest.it)('BDG-01 new-badge 는 label · color · 아이콘 슬롯을 무시한다', () => {
+    const badge = mountBadge({
+      type: 'new-badge',
+      color: 'error',
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      className: 'custom-badge'
+    });
+    (0, _vitest.expect)(badge.querySelector('.ncua-badge__label')).toBeNull();
+    (0, _vitest.expect)(badge.querySelector('[data-icon]')).toBeNull();
+    (0, _vitest.expect)(hasClasses(badge, ['ncua-badge--error', 'custom-badge'])).toEqual([false, true]);
+  });
+});
+(0, _vitest.describe)('Badge — 슬롯 렌더 sideSlotRender (BDG-02)', () => {
+  _vitest.it.each([['지정 size 가 우선', {
+    size: CUSTOM_ICON_SIZE
+  }, CUSTOM_ICON_SIZE], ['생략 시 뱃지 기본 크기', {}, BADGE_ICON_SIZE]])('BDG-02 icon 슬롯 크기: %s', (_name, slotExtra, expected) => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon,
+        ...slotExtra
+      }
+    });
+    const icon = mustQuery(badge, '[data-icon]');
+    (0, _vitest.expect)([icon.getAttribute('width'), icon.getAttribute('height')]).toEqual([String(expected), String(expected)]);
+  });
+  _vitest.it.each([['color 지정 시 COLOR 값', 'gray700', _color.COLOR.gray700], ['color 생략 시 없음', undefined, null]])('BDG-02 icon 슬롯 색: %s', (_name, color, expected) => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon,
+        color
+      }
+    });
+    (0, _vitest.expect)(mustQuery(badge, '[data-icon]').getAttribute('color')).toBe(expected);
+  });
+  _vitest.it.each([['지정 color · size', {
+    type: 'dot',
+    color: 'error',
+    size: 'lg'
+  }, ['ncua-dot--error', 'ncua-dot--lg']], ['생략 시 neutral · sm', {
+    type: 'dot'
+  }, ['ncua-dot--neutral', 'ncua-dot--sm']]])('BDG-02 dot 슬롯: %s', (_name, slot, expectedClasses) => {
+    // 생략은 타입 밖이라 캐스팅한다 — color · size 폴백 경로
+    const badge = mountBadge({
+      leadingIcon: slot
+    });
+    (0, _vitest.expect)(hasClasses(mustQuery(badge, '.ncua-dot'), [...expectedClasses])).toEqual([true, true]);
+  });
+  (0, _vitest.it)('BDG-02 custom 슬롯은 children 을 그리고, leading 은 label 앞 · trailing 은 label 뒤에 놓인다', () => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/(0, _react.createElement)('i', {
+          className: 'lead'
+        })
+      },
+      trailingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/(0, _react.createElement)('i', {
+          className: 'trail'
+        })
+      }
+    });
+    const children = Array.from(badge.children);
+    (0, _vitest.expect)([children[0].classList.contains('lead'), children[1].classList.contains('ncua-badge__label'), children[2].classList.contains('trail'), children.length]).toEqual([true, true, true, EXPECTED_SLOT_CHILDREN]);
+  });
+  (0, _vitest.it)('BDG-02 sideSlotRender 는 호출자가 준 defaultIconSize 를 기본 크기로 쓴다', () => {
+    // Given: 뱃지 기본(12)과 다른 기본 크기로 직접 렌더
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = (0, _client.createRoot)(container);
+    mounted.push({
+      root,
+      container
+    });
+    // When
+    (0, _testUtils.act)(() => root.render((0, _utils.sideSlotRender)({
+      slot: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      defaultIconSize: CUSTOM_ICON_SIZE
+    })));
+    // Then
+    (0, _vitest.expect)(mustQuery(container, '[data-icon]').getAttribute('width')).toBe(String(CUSTOM_ICON_SIZE));
+  });
+});