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

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

@@ -0,0 +1,359 @@
+// @vitest-environment jsdom
+/**
+ * 소유권 충돌 · 가로 훅 비활성 · 방어 분기 (UTS-01~04).
+ * UTS-03 의 방어 분기는 공개 경로(Table.tsx)가 enabled 일 때 ref 를 항상 붙여 닿지 않는다.
+ * 공개 경로 미사용 — 훅을 직접 렌더하고 ref 를 일부러 빼서 구동한다.
+ */
+import { createElement, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { SCROLLBAR_ATTRS, SCROLLBAR_OWNERS, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT } from '../../../../../assets/scripts/table/scrollbar/const';
+import { useTableHorizontalScrollbar, useTableVerticalScrollbar } from '../useTableScrollbars';
+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 = TABLE_HEADER_HEIGHT + 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 = useRef(null);
+  const scrollAreaRef = useRef(null);
+  const scrollbarRef = useRef(null);
+  const thumbRef = useRef(null);
+  const {
+    handleThumbMouseDown
+  } = useTableVerticalScrollbar({
+    enabled,
+    layoutKey: false,
+    scrollContainerRef,
+    scrollAreaRef,
+    scrollbarRef,
+    thumbRef
+  });
+  return /*#__PURE__*/createElement('div', {
+    className: 'ncua-table ncua-table--fixed-header'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('area'), scrollAreaRef),
+    className: 'ncua-table__scroll-area'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('scroll'), scrollContainerRef),
+    className: 'ncua-table__scroll-container'
+  }, withTable ? /*#__PURE__*/createElement('table', {
+    className: 'ncua-table__table'
+  }, /*#__PURE__*/createElement('tbody', null)) : null), /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('track'), scrollbarRef),
+    className: 'ncua-table__scrollbar'
+  }, /*#__PURE__*/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 = useRef(null);
+  const hScrollbarRef = useRef(null);
+  const hThumbRef = useRef(null);
+  const {
+    handleHThumbMouseDown
+  } = useTableHorizontalScrollbar({
+    enabled,
+    hScrollContainerRef,
+    hScrollbarRef,
+    hThumbRef
+  });
+  const table = withTable ? /*#__PURE__*/createElement('table', {
+    className: 'ncua-table__table'
+  }) : null;
+  return /*#__PURE__*/createElement('div', {
+    className: 'ncua-table'
+  }, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('hScroll'), hScrollContainerRef),
+    className: 'ncua-table__h-scroll-container'
+  }, withInner ? /*#__PURE__*/createElement('div', {
+    className: 'ncua-table__h-scroll-inner'
+  }, table) : table, /*#__PURE__*/createElement('div', {
+    ref: refUnless(refless.includes('hTrack'), hScrollbarRef),
+    className: 'ncua-table__h-scrollbar'
+  }, /*#__PURE__*/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 => {
+  act(() => {
+    root.render(element);
+  });
+  mounted = true;
+};
+const unmount = () => {
+  if (!mounted) return;
+  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) => {
+  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(SCROLLBAR_ATTRS.ready), element.getAttribute(SCROLLBAR_ATTRS.owner)];
+const preoccupy = (element, owner) => {
+  element.setAttribute(SCROLLBAR_ATTRS.ready, '');
+  element.setAttribute(SCROLLBAR_ATTRS.owner, owner);
+};
+beforeEach(() => {
+  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);
+  act(() => {
+    root = createRoot(container);
+  });
+});
+afterEach(() => {
+  while (cleanups.length > 0) cleanups.pop()?.();
+  unmount();
+  container.remove();
+  window.removeEventListener('error', collectError);
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+describe('UTS-01 해제 시 다른 주체의 표식 보존', () => {
+  it.each([{
+    label: '세로',
+    element: () => /*#__PURE__*/createElement(VerticalHarness),
+    selector: '.ncua-table__scroll-container'
+  }, {
+    label: '가로',
+    element: () => /*#__PURE__*/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(SCROLLBAR_ATTRS.owner, SCROLLBAR_OWNERS.cdn);
+    unmount();
+    expect(claimedByReact).toEqual([true, SCROLLBAR_OWNERS.react]);
+    expect(markers(scrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+  });
+  it('UTS-01 enabled 를 false 로 바꿔 해제해도 다른 주체 표식은 남는다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness));
+    const scrollEl = query('.ncua-table__scroll-container');
+    scrollEl.setAttribute(SCROLLBAR_ATTRS.owner, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      enabled: false
+    }));
+    expect(markers(scrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+  });
+});
+describe('UTS-02 가로 컨테이너 선점', () => {
+  it('UTS-02 다른 주체가 선점한 가로 컨테이너에는 표식을 덮지 않고 옵저버도 붙이지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    expect(markers(hScrollEl)).toEqual([true, SCROLLBAR_OWNERS.cdn]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-02 선점된 가로 컨테이너는 scroll 에 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    preoccupy(hScrollEl, SCROLLBAR_OWNERS.cdn);
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});
+describe('UTS-03 방어 분기 (공개 경로 미사용, 직접 호출)', () => {
+  it.each([{
+    part: 'scroll'
+  }, {
+    part: 'thumb'
+  }])('UTS-03 세로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref4 => {
+    let {
+      part
+    } = _ref4;
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: [part]
+    }));
+    expect(markers(query('.ncua-table__scroll-container'))).toEqual([false, null]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-03 세로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['scroll']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    expect([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(SCROLLBAR_ATTRS.dragging))).toEqual([false, false]);
+    expect(windowErrors).toEqual([]);
+  });
+  it('UTS-03 트랙 높이가 0 이고 scroll-area ref 가 없으면 컨테이너 높이로 트랙 길이를 정한다', () => {
+    render(/*#__PURE__*/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);
+    expect(height).toBeCloseTo(thumbHeightFor(VIEWPORT_HEIGHT));
+    expect(height).not.toBeCloseTo(thumbHeightFor(AREA_HEIGHT));
+  });
+  it('UTS-03 scroll-area · 트랙 ref 와 콘텐츠 table 이 없으면 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['area', 'track'],
+      withTable: false
+    }));
+    const scrollEl = query('.ncua-table__scroll-container');
+    expect(observers.map(record => record.targets.map(target => target === scrollEl))).toEqual([[true]]);
+  });
+  it('UTS-03 scroll-area ref 가 없으면 드래그 표식을 스크롤 컨테이너에 단다', () => {
+    render(/*#__PURE__*/createElement(VerticalHarness, {
+      refless: ['area']
+    }));
+    pressThumb(query('.ncua-table__scrollbar-thumb'));
+    expect([query('.ncua-table__scroll-area'), query('.ncua-table__scroll-container')].map(el => el.hasAttribute(SCROLLBAR_ATTRS.dragging))).toEqual([false, true]);
+  });
+  it.each([{
+    part: 'hScroll'
+  }, {
+    part: 'hTrack'
+  }, {
+    part: 'hThumb'
+  }])('UTS-03 가로 $part ref 가 없으면 표식 · 옵저버를 붙이지 않는다', _ref5 => {
+    let {
+      part
+    } = _ref5;
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      refless: [part]
+    }));
+    expect(markers(query('.ncua-table__h-scroll-container'))).toEqual([false, null]);
+    expect(observers).toEqual([]);
+  });
+  it('UTS-03 가로 inner · 콘텐츠 table 이 없으면 가로 스크롤 컨테이너만 관찰한다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      withInner: false,
+      withTable: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    expect(observers.map(record => record.targets.map(target => target === hScrollEl))).toEqual([[true]]);
+  });
+  it('UTS-03 가로 스크롤 컨테이너 ref 가 없으면 썸 mousedown 이 드래그를 시작하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      refless: ['hScroll']
+    }));
+    pressThumb(query('.ncua-table__h-scrollbar-thumb'));
+    expect(query('.ncua-table__h-scroll-container').hasAttribute(SCROLLBAR_ATTRS.dragging)).toBe(false);
+    expect(windowErrors).toEqual([]);
+  });
+});
+describe('UTS-04 가로 훅 비활성', () => {
+  it('UTS-04 대조: enabled 면 같은 치수의 scroll 에 가로 썸 폭이 기록된다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).not.toBe('');
+  });
+  it('UTS-04 enabled false 면 표식 · 옵저버를 붙이지 않고 scroll 에 가로 썸이 반응하지 않는다', () => {
+    render(/*#__PURE__*/createElement(HorizontalHarness, {
+      enabled: false
+    }));
+    const hScrollEl = query('.ncua-table__h-scroll-container');
+    defineMetrics(hScrollEl, H_OVERFLOWING);
+    fire(hScrollEl, new Event('scroll'));
+    expect(markers(hScrollEl)).toEqual([false, null]);
+    expect(observers).toEqual([]);
+    expect(query('.ncua-table__h-scrollbar-thumb').style.width).toBe('');
+  });
+});

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

@@ -4,7 +4,7 @@ import { startThumbDrag } from '../../../../assets/scripts/table/scrollbar/drag'
 import { computeHorizontalTrackBox, computeThumbGeometry } from '../../../../assets/scripts/table/scrollbar/geometry';
 import { useIsomorphicLayoutEffect } from '../../../hooks/useIsomorphicLayoutEffect';
 // CDN 바인딩과 같은 값을 쓰기 위해 재노출한다. 정의는 scrollbar/const.ts 에 있다.
-export { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT };
+export { TABLE_HEADER_HEIGHT };
 /** 타 소유자가 선점한 컨테이너는 덮어쓰지 않는다. CDN 생성자의 소유권 검사와 대칭이다 */
 const claimMarkers = el => {
   const owner = el.getAttribute(SCROLLBAR_ATTRS.owner);

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

@@ -0,0 +1,186 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
+import { Badge } from '../Badge';
+import { sideSlotRender } from '../utils';
+// 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 = [];
+afterEach(() => {
+  for (const {
+    root,
+    container
+  } of mounted.splice(0)) {
+    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 = createRoot(container);
+  mounted.push({
+    root,
+    container
+  });
+  act(() => root.render(/*#__PURE__*/createElement(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__*/createElement('svg', {
+      'data-icon': name,
+      width,
+      height,
+      color
+    });
+  };
+  return Icon;
+};
+const SyntheticIcon = makeIcon('slot');
+describe('Badge — 기본 렌더와 new-badge (BDG-01)', () => {
+  it('BDG-01 기본값: pill-outline · neutral · xs 와 label', () => {
+    const badge = mountBadge();
+    expect(hasClasses(badge, ['ncua-badge--pill-outline', 'ncua-badge--neutral', 'ncua-badge--xs'])).toEqual([true, true, true]);
+    expect(mustQuery(badge, '.ncua-badge__label').textContent).toBe(LABEL);
+  });
+  it('BDG-01 type · color · size · className 을 클래스로 반영한다', () => {
+    const badge = mountBadge({
+      type: 'pill-dark-color',
+      color: 'error',
+      size: 'md',
+      className: 'custom-badge'
+    });
+    expect(hasClasses(badge, ['ncua-badge--pill-dark-color', 'ncua-badge--error', 'ncua-badge--md', 'custom-badge'])).toEqual([true, true, true, true]);
+  });
+  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
+    });
+    expect(badge.classList.contains(expectedClass)).toBe(true);
+    expect(mustQuery(badge, 'svg').getAttribute('width')).toBe(String(iconSize));
+  });
+  it('BDG-01 new-badge 는 label · color · 아이콘 슬롯을 무시한다', () => {
+    const badge = mountBadge({
+      type: 'new-badge',
+      color: 'error',
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      className: 'custom-badge'
+    });
+    expect(badge.querySelector('.ncua-badge__label')).toBeNull();
+    expect(badge.querySelector('[data-icon]')).toBeNull();
+    expect(hasClasses(badge, ['ncua-badge--error', 'custom-badge'])).toEqual([false, true]);
+  });
+});
+describe('Badge — 슬롯 렌더 sideSlotRender (BDG-02)', () => {
+  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]');
+    expect([icon.getAttribute('width'), icon.getAttribute('height')]).toEqual([String(expected), String(expected)]);
+  });
+  it.each([['color 지정 시 COLOR 값', 'gray700', COLOR.gray700], ['color 생략 시 없음', undefined, null]])('BDG-02 icon 슬롯 색: %s', (_name, color, expected) => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'icon',
+        icon: SyntheticIcon,
+        color
+      }
+    });
+    expect(mustQuery(badge, '[data-icon]').getAttribute('color')).toBe(expected);
+  });
+  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
+    });
+    expect(hasClasses(mustQuery(badge, '.ncua-dot'), [...expectedClasses])).toEqual([true, true]);
+  });
+  it('BDG-02 custom 슬롯은 children 을 그리고, leading 은 label 앞 · trailing 은 label 뒤에 놓인다', () => {
+    const badge = mountBadge({
+      leadingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/createElement('i', {
+          className: 'lead'
+        })
+      },
+      trailingIcon: {
+        type: 'custom',
+        children: /*#__PURE__*/createElement('i', {
+          className: 'trail'
+        })
+      }
+    });
+    const children = Array.from(badge.children);
+    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]);
+  });
+  it('BDG-02 sideSlotRender 는 호출자가 준 defaultIconSize 를 기본 크기로 쓴다', () => {
+    // Given: 뱃지 기본(12)과 다른 기본 크기로 직접 렌더
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({
+      root,
+      container
+    });
+    // When
+    act(() => root.render(sideSlotRender({
+      slot: {
+        type: 'icon',
+        icon: SyntheticIcon
+      },
+      defaultIconSize: CUSTOM_ICON_SIZE
+    })));
+    // Then
+    expect(mustQuery(container, '[data-icon]').getAttribute('width')).toBe(String(CUSTOM_ICON_SIZE));
+  });
+});

package/dist/esm/src/components/feedback-and-status/badge-group/__tests__/BadgeGroup.test.js

@@ -0,0 +1,116 @@
+// @vitest-environment jsdom
+//
+// BadgeGroup (src/components/feedback-and-status/badge-group/BadgeGroup.tsx) 위험 경로 — 위험 목록표 BG-xx.
+// Badge·sideSlotRender 는 실구현으로 렌더한다.
+import { ArrowRight } from '@ncds/ui-admin-icon';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { BadgeGroup } from '../BadgeGroup';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const GROUP_LABEL = '새 기능이 추가되었습니다';
+const GROUP_HREF = 'https://example.com/notice';
+const DEFAULT_GROUP_ICON_SIZE = '14';
+let root = null;
+let container = null;
+afterEach(() => {
+  if (root) {
+    act(() => {
+      root?.unmount();
+    });
+  }
+  root = null;
+  container?.remove();
+  container = null;
+  vi.restoreAllMocks();
+});
+const render = props => {
+  if (!container) {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  }
+  act(() => {
+    root?.render(/*#__PURE__*/createElement(BadgeGroup, props));
+  });
+  return container;
+};
+const linkOf = view => view.querySelector('a.ncua-badge-group');
+describe('BadgeGroup — 링크·배지·라벨·아이콘 (BG-01)', () => {
+  it('BG-01 <a href target="_blank"> 안에 pill-dark-color Badge · groupLabel 을 렌더하고 기본은 neutral · sm 이다', () => {
+    const view = render({
+      label: 'NEW',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    expect(link?.getAttribute('href')).toBe(GROUP_HREF);
+    expect(link?.getAttribute('target')).toBe('_blank');
+    expect(link?.classList.contains('ncua-badge-group--neutral')).toBe(true);
+    expect(link?.classList.contains('ncua-badge-group--sm')).toBe(true);
+    expect(['ncua-badge--pill-dark-color', 'ncua-badge--neutral', 'ncua-badge--sm'].map(name => badge?.classList.contains(name))).toEqual([true, true, true]);
+    expect(badge?.textContent).toBe('NEW');
+    expect(link?.querySelector('.ncua-badge-group__label')?.textContent).toBe(GROUP_LABEL);
+    expect(link?.querySelector(':scope > svg')).toBeNull();
+    link?.focus();
+    expect(document.activeElement).toBe(link);
+  });
+  it('BG-01 color·size·target·groupClassName 을 링크와 Badge 에 반영한다', () => {
+    const view = render({
+      label: '오류',
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      color: 'error',
+      size: 'xs',
+      target: '_self',
+      groupClassName: 'my-group'
+    });
+    const link = linkOf(view);
+    const badge = link?.querySelector('.ncua-badge');
+    expect(link?.getAttribute('target')).toBe('_self');
+    expect(link?.classList.contains('ncua-badge-group--error')).toBe(true);
+    expect(link?.classList.contains('ncua-badge-group--xs')).toBe(true);
+    expect(link?.classList.contains('my-group')).toBe(true);
+    expect(badge?.classList.contains('ncua-badge--error')).toBe(true);
+    expect(badge?.classList.contains('ncua-badge--xs')).toBe(true);
+  });
+  it('BG-01 groupIcon 이 있으면 라벨 뒤에 기본 14px 아이콘을 렌더한다', () => {
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF,
+      groupIcon: {
+        type: 'icon',
+        icon: ArrowRight
+      }
+    });
+    const icon = linkOf(view)?.lastElementChild;
+    expect(icon?.tagName.toLowerCase()).toBe('svg');
+    expect(icon?.previousElementSibling?.classList.contains('ncua-badge-group__label')).toBe(true);
+    expect([icon?.getAttribute('width'), icon?.getAttribute('height')]).toEqual([DEFAULT_GROUP_ICON_SIZE, DEFAULT_GROUP_ICON_SIZE]);
+  });
+});
+describe('BadgeGroup — rel·href 누락 (BG-02)', () => {
+  it('BG-02 기본 target _blank 인데 rel 을 붙이지 않는다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (새 창 링크에 rel="noopener noreferrer" 미지정, 구형 브라우저 reverse tabnabbing·referrer 노출)
+    const view = render({
+      groupLabel: GROUP_LABEL,
+      href: GROUP_HREF
+    });
+    expect(linkOf(view)?.getAttribute('target')).toBe('_blank');
+    expect(linkOf(view)?.hasAttribute('rel')).toBe(false);
+  });
+  it('BG-02 href 가 없으면 href 없는 <a> 라 링크·키보드 포커스 대상이 아니다', () => {
+    // 현재 동작 고정 — 결함 후보: #597 (href 없는 <a> 는 tab 순서에서 빠지고 링크 역할도 없음)
+    const view = render({
+      groupLabel: GROUP_LABEL
+    });
+    const link = linkOf(view);
+    link?.focus();
+    expect(link?.hasAttribute('href')).toBe(false);
+    expect(document.activeElement).not.toBe(link);
+  });
+  it.todo('BG-02 target 이 _blank 면 rel="noopener noreferrer" 를 붙인다 (기대, #597)');
+  it.todo('BG-02 href 가 없으면 링크가 아닌 요소로 렌더하거나 href 를 필수로 한다 (기대, #597)');
+});