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

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

@@ -0,0 +1,103 @@
+// @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(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)');
+});

package/dist/temp/src/components/feedback-and-status/carousel-arrow/__tests__/CarouselArrow.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/feedback-and-status/carousel-arrow/__tests__/CarouselArrow.test.js

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+//
+// CarouselArrow (src/components/feedback-and-status/carousel-arrow/CarouselArrow.tsx) 위험 경로 — 위험 목록표 CA-xx.
+// 좌우 아이콘은 아이콘 컴포넌트가 그리는 path 로 구분한다.
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { CarouselArrow } from '../CarouselArrow';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+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(createElement(CarouselArrow, props));
+    });
+    return container;
+};
+/** 아이콘 컴포넌트가 그리는 path 의 d — DOM 의 svg 와 비교해 어떤 아이콘인지 판별한다 */
+const iconPathOf = (Icon) => {
+    const holder = document.createElement('div');
+    holder.innerHTML = renderToStaticMarkup(createElement(Icon));
+    return holder.querySelector('path')?.getAttribute('d') ?? null;
+};
+const buttonOf = (view) => view.querySelector('button.ncua-carousel-arrow');
+describe('CarouselArrow — click·방향·클래스 (CA-01)', () => {
+    it('CA-01 click 하면 onClick 을 호출한다', () => {
+        const onClick = vi.fn();
+        const view = render({ chevron: 'right', onClick });
+        act(() => {
+            buttonOf(view)?.click();
+        });
+        expect(buttonOf(view)?.getAttribute('type')).toBe('button');
+        expect(onClick).toHaveBeenCalled();
+    });
+    it.each([
+        ['left', ChevronLeft],
+        ['right', ChevronRight],
+    ])('CA-01 chevron %s 면 그 방향 아이콘과 방향 클래스를 쓴다', (chevron, Icon) => {
+        const view = render({ chevron });
+        const button = buttonOf(view);
+        expect(button?.querySelector('svg.ncua-carousel-arrow__icon path')?.getAttribute('d')).toBe(iconPathOf(Icon));
+        expect(button?.classList.contains(`ncua-carousel-arrow--${chevron}`)).toBe(true);
+    });
+    it('CA-01 기본은 default · md 클래스이고 type·className 을 넘기면 반영한다', () => {
+        const view = render({ chevron: 'left' });
+        expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--default')).toBe(true);
+        expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--md')).toBe(true);
+        render({ chevron: 'left', type: 'line', className: 'my-arrow' });
+        expect(buttonOf(view)?.classList.contains('ncua-carousel-arrow--line')).toBe(true);
+        expect(buttonOf(view)?.classList.contains('my-arrow')).toBe(true);
+    });
+});
+describe('CarouselArrow — 접근 가능한 이름 (CA-02)', () => {
+    it('CA-02 아이콘만 있는 버튼에 aria-label·텍스트가 없어 접근 가능한 이름이 비어 있다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (아이콘 전용 버튼에 aria-label 이 없어 스크린리더가 용도를 읽지 못함)
+        const view = render({ chevron: 'left' });
+        const button = buttonOf(view);
+        expect(button?.hasAttribute('aria-label')).toBe(false);
+        expect(button?.textContent).toBe('');
+    });
+    it.todo('CA-02 좌우 방향에 맞는 aria-label(예: 이전·다음)을 가진다 (기대, #597)');
+});

package/dist/temp/src/components/feedback-and-status/carousel-number-group/__tests__/CarouselNumberGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/feedback-and-status/carousel-number-group/__tests__/CarouselNumberGroup.test.js

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+//
+// CarouselNumberGroup (src/components/feedback-and-status/carousel-number-group/CarouselNumberGroup.tsx)
+// 위험 경로 — 위험 목록표 CN-xx.
+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 { CarouselNumberGroup } from '../CarouselNumberGroup';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const CURRENT_PAGE = 3;
+const TOTAL_PAGE = 10;
+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(createElement(CarouselNumberGroup, props));
+    });
+    return container;
+};
+const groupOf = (view) => view.querySelector('.ncua-carousel-number-group');
+describe('CarouselNumberGroup — 표시와 클래스 (CN-01)', () => {
+    it('CN-01 현재 페이지와 "/전체" 를 표시하고 기본은 framed · light · sm 이다', () => {
+        const view = render({ currentPage: CURRENT_PAGE, totalPage: TOTAL_PAGE });
+        const group = groupOf(view);
+        expect(view.querySelector('.ncua-carousel-number-group__number')?.textContent).toBe(String(CURRENT_PAGE));
+        expect(view.querySelector('.ncua-carousel-number-group__total')?.textContent).toBe(`/${TOTAL_PAGE}`);
+        expect(['framed', 'ncua-carousel-number-group--light', 'ncua-carousel-number-group--sm'].map((name) => group?.classList.contains(name))).toEqual([true, true, true]);
+    });
+    it('CN-01 framed false · dark 면 framed 를 빼고 dark 클래스를 붙인다', () => {
+        const view = render({ currentPage: CURRENT_PAGE, totalPage: TOTAL_PAGE, framed: false, color: 'dark' });
+        const group = groupOf(view);
+        expect(group?.classList.contains('framed')).toBe(false);
+        expect(group?.classList.contains('ncua-carousel-number-group--dark')).toBe(true);
+        expect(group?.classList.contains('ncua-carousel-number-group--light')).toBe(false);
+    });
+});

package/dist/temp/src/components/feedback-and-status/empty-state/__tests__/EmptyState.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/feedback-and-status/empty-state/__tests__/EmptyState.test.js

@@ -0,0 +1,86 @@
+// @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, vi } from 'vitest';
+import { EmptyState } from '../EmptyState';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '결과가 없습니다';
+const DESCRIPTION = '조건을 바꿔 보세요';
+/** afterEach 에서 unmount 할 루트 */
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+});
+const mount = (node) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    mounted.push({ root, container });
+    act(() => root.render(node));
+    return { container };
+};
+const emptyState = (props = {}) => createElement(EmptyState, { title: TITLE, description: DESCRIPTION, ...props });
+const mustQuery = (root, selector) => {
+    const found = root.querySelector(selector);
+    if (!found)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return found;
+};
+const buttons = (root) => Array.from(root.querySelectorAll('.ncua-empty-state__button-group button'));
+describe('EmptyState — 버튼 영역 (EMS-01)', () => {
+    it('EMS-01 buttons 가 없으면 title · description 만 그리고 버튼 영역이 없다', () => {
+        const view = mount(emptyState());
+        expect(mustQuery(view.container, '.ncua-empty-state__title').textContent).toBe(TITLE);
+        expect(mustQuery(view.container, '.ncua-empty-state__description').textContent).toBe(DESCRIPTION);
+        expect(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+    });
+    it('EMS-01 빈 배열이면 버튼 영역이 없다', () => {
+        const view = mount(emptyState({ buttons: [] }));
+        expect(view.container.querySelector('.ncua-empty-state__button-group')).toBeNull();
+    });
+    it('EMS-01 단일 객체면 버튼 1개를 그리고 size 기본값 xs 를 쓴다', () => {
+        const view = mount(emptyState({ buttons: { label: '등록' } }));
+        const rendered = buttons(view.container);
+        expect(rendered.map((button) => button.textContent)).toEqual(['등록']);
+        expect(rendered[0].classList.contains('ncua-btn--xs')).toBe(true);
+    });
+    it('EMS-01 배열이면 순서대로 그리고 지정한 size · hierarchy · disabled 를 전달한다', () => {
+        const view = mount(emptyState({
+            buttons: [
+                { label: '취소', size: 'sm', hierarchy: 'secondary-gray' },
+                { label: '등록', size: 'sm', hierarchy: 'primary', disabled: true },
+            ],
+        }));
+        const rendered = buttons(view.container);
+        expect(rendered.map((button) => button.textContent)).toEqual(['취소', '등록']);
+        expect(rendered.map((button) => button.classList.contains('ncua-btn--sm'))).toEqual([true, true]);
+        expect(rendered.map((button) => button.disabled)).toEqual([false, true]);
+        expect(rendered[1].classList.contains('ncua-btn--primary')).toBe(true);
+    });
+    it('EMS-01 버튼 클릭은 그 버튼의 onClick 을 부른다', () => {
+        const onRegister = vi.fn();
+        const view = mount(emptyState({ buttons: [{ label: '취소' }, { label: '등록', onClick: onRegister }] }));
+        act(() => buttons(view.container)[1].click());
+        expect(onRegister).toHaveBeenCalled();
+    });
+});
+describe('EmptyState — 폼 안 버튼 (EMS-02)', () => {
+    it('EMS-02 폼 안의 EmptyState 버튼을 클릭하면 폼을 제출한다 (BTN-04 영향 사용처)', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (#620 VNT-12 · BTN-04 같은 뿌리 — 공용 Button 에 type 기본값 없음)
+        const submits = [];
+        const view = mount(createElement('form', {
+            onSubmit: (event) => {
+                event.preventDefault();
+                submits.push(event.nativeEvent);
+            },
+        }, emptyState({ buttons: { label: '등록' } })));
+        act(() => buttons(view.container)[0].click());
+        expect(submits).toHaveLength(1);
+    });
+    it.todo('EMS-02 기대 동작: 폼 안의 EmptyState 버튼 클릭은 폼을 제출하지 않는다 (BTN-04 수정 시 함께 해소)');
+});

package/dist/temp/src/components/feedback-and-status/progress-bar/__tests__/ProgressBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/temp/src/components/feedback-and-status/progress-bar/__tests__/ProgressBar.test.js

@@ -0,0 +1,221 @@
+// @vitest-environment jsdom
+//
+// ProgressBar (React) 위험 경로 — 위험 목록표 RPB-xx. SegmentBar·SegmentLabels 는 렌더 결과로 함께 덮는다.
+// vanilla ProgressBar.ts(PB-xx)와 같은 계약 — 같은 입력에 다른 결과면 결함 후보로 적는다.
+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 { ProgressBar } from '../ProgressBar';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const VALUE = 40;
+const SEG_A = 30;
+const SEG_B = 10;
+/** 30 : 10 → 75 : 25 로 정규화 */
+const NORMALIZED_A = 75;
+const NORMALIZED_B = 25;
+/** 라벨 위치 — 앞 폭 합 + 자기 폭 / 2 : 75 / 2 = 37.5, 75 + 25 / 2 = 87.5 */
+const CENTER_DIVISOR = 2;
+const FIRST_LABEL_LEFT = NORMALIZED_A / CENTER_DIVISOR;
+const SECOND_LABEL_LEFT = NORMALIZED_A + NORMALIZED_B / CENTER_DIVISOR;
+/** 세그먼트 1개 float 라벨 값 */
+const FLOAT_VALUE = 15;
+/** 0 세그먼트 라벨 시작점 — 앞 폭 합 − 1 (최소 0) */
+const ZERO_LABEL_OFFSET = 1;
+let root = null;
+let container = null;
+const renderElement = (element) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(element);
+    });
+    return container;
+};
+const render = (props = {}) => renderElement(createElement(ProgressBar, props));
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const fillsOf = (view) => Array.from(view.querySelectorAll('.ncua-progress-bar__fill'));
+const segmentLabelsOf = (view) => Array.from(view.querySelectorAll('.ncua-progress-bar__label--segment'));
+// ── P0 ─────────────────────────────────────────────────
+describe('ProgressBar — 단일 value (RPB-01)', () => {
+    it('RPB-01 fill 하나의 width 와 aria-valuenow 가 같은 값이고 aria 범위는 0~100', () => {
+        const view = render({ value: VALUE });
+        const [fill] = fillsOf(view);
+        expect(fillsOf(view)).toHaveLength(1);
+        expect([
+            fill.style.width,
+            fill.getAttribute('aria-valuenow'),
+            fill.getAttribute('aria-valuemin'),
+            fill.getAttribute('aria-valuemax'),
+        ]).toEqual([`${VALUE}%`, String(VALUE), '0', '100']);
+    });
+});
+describe('ProgressBar — 다중 세그먼트 (RPB-02)', () => {
+    it('RPB-02 SegmentBar 가 세그먼트마다 정규화 width·first/last·색 클래스로 fill 을 만든다', () => {
+        const view = render({
+            segments: [
+                { value: SEG_A, color: 'blue' },
+                { value: SEG_B, color: 'red' },
+            ],
+        });
+        const [first, last] = fillsOf(view);
+        expect(fillsOf(view).map((fill) => fill.style.width)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+        expect([
+            first.classList.contains('ncua-progress-bar__fill--first'),
+            first.classList.contains('ncua-progress-bar__fill--last'),
+            first.classList.contains('ncua-progress-bar__fill--color-blue'),
+            last.classList.contains('ncua-progress-bar__fill--last'),
+            last.classList.contains('ncua-progress-bar__fill--color-red'),
+        ]).toEqual([true, false, true, true, true]);
+        expect(requireElement(view, '.ncua-progress-bar__bar').classList.contains('ncua-progress-bar__bar--segments')).toBe(true);
+    });
+    it('RPB-02 SegmentLabels 가 세그먼트마다 정규화 값 라벨과 색 클래스를 렌더한다', () => {
+        const view = render({
+            segments: [
+                { value: SEG_A, color: 'blue' },
+                { value: SEG_B, color: 'red' },
+            ],
+        });
+        const labels = segmentLabelsOf(view);
+        expect(labels.map((label) => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+        expect([
+            labels[0].classList.contains('ncua-progress-bar__label--color-blue'),
+            labels[1].classList.contains('ncua-progress-bar__label--color-red'),
+        ]).toEqual([true, true]);
+        expect(requireElement(view, '.ncua-progress-bar').classList.contains('ncua-progress-bar-bottom')).toBe(true);
+    });
+});
+describe('ProgressBar — 세그먼트 1개 (RPB-03)', () => {
+    it('RPB-03 색 fill 하나에 width·aria-valuenow 를 넣고 right 라벨에 값을 표시한다', () => {
+        const view = render({ label: 'right', segments: [{ value: SEG_A, color: 'green' }] });
+        const [fill] = fillsOf(view);
+        expect(fillsOf(view)).toHaveLength(1);
+        expect([fill.style.width, fill.getAttribute('aria-valuenow')]).toEqual([`${SEG_A}%`, String(SEG_A)]);
+        expect(fill.classList.contains('ncua-progress-bar__fill--color-green')).toBe(true);
+        expect(requireElement(view, '.ncua-progress-bar__label-right').textContent).toBe(`${SEG_A}%`);
+    });
+    it.each([
+        ['bottom', '.ncua-progress-bar__label-bottom'],
+        ['top-float', '.ncua-progress-bar__label-top-float'],
+        ['bottom-float', '.ncua-progress-bar__label-bottom-float'],
+    ])('RPB-03 label %s 이면 SingleLabel 을 그 위치에 렌더한다', (label, selector) => {
+        const view = render({ label, segments: [{ value: SEG_A, color: 'green' }] });
+        expect(requireElement(view, selector).textContent).toBe(`${SEG_A}%`);
+        expect(view.querySelectorAll('.ncua-progress-bar__label')).toHaveLength(1);
+    });
+    it('RPB-03 세그먼트 1개 + float 라벨이면 컨테이너에 --progress-value 스타일을 준다', () => {
+        const view = render({ label: 'top-float', segments: [{ value: FLOAT_VALUE }] });
+        expect(requireElement(view, '.ncua-progress-bar').style.getPropertyValue('--progress-value')).toBe(`${FLOAT_VALUE}%`);
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+const containerOf = (view) => requireElement(view, '.ncua-progress-bar');
+/** 컨테이너 직계 자식의 마지막 클래스(위치 modifier) — 라벨이 content 안/밖·앞/뒤 어디 있는지 본다 */
+const childOrderOf = (view) => Array.from(containerOf(view).children).map((child) => child.classList[child.classList.length - 1] ?? '');
+describe('ProgressBar — 라벨 배치 (RPB-04)', () => {
+    it('RPB-04 right 라벨은 content 안 막대 뒤에 있고 컨테이너 클래스는 ncua-progress-bar-right', () => {
+        const view = render({ label: 'right', value: VALUE });
+        const content = requireElement(view, '.ncua-progress-bar__content');
+        expect(containerOf(view).classList.contains('ncua-progress-bar-right')).toBe(true);
+        expect(Array.from(content.children).map((child) => child.classList[0])).toEqual([
+            'ncua-progress-bar__bar',
+            'ncua-progress-bar__label',
+        ]);
+        expect(requireElement(content, '.ncua-progress-bar__label-right').textContent).toBe(`${VALUE}%`);
+    });
+    it.each([
+        ['bottom', ['ncua-progress-bar__content', 'ncua-progress-bar__label-bottom']],
+        ['top-float', ['ncua-progress-bar__label-top-float', 'ncua-progress-bar__content']],
+        ['bottom-float', ['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']],
+    ])('RPB-04 %s 라벨은 content 밖 순서 %j', (label, order) => {
+        const view = render({ label, value: VALUE });
+        expect(childOrderOf(view)).toEqual(order);
+        expect(containerOf(view).classList.contains(`ncua-progress-bar-${label}`)).toBe(true);
+    });
+    it('RPB-04 float 라벨이면 컨테이너에 --progress-value 를 준다', () => {
+        const view = render({ label: 'bottom-float', value: VALUE });
+        expect(containerOf(view).style.getPropertyValue('--progress-value')).toBe(`${VALUE}%`);
+    });
+    it('RPB-04 세그먼트 1개 + bottom-float 도 라벨이 content 앞에 온다', () => {
+        const view = render({ label: 'bottom-float', segments: [{ value: SEG_A }] });
+        expect(childOrderOf(view)).toEqual(['ncua-progress-bar__label-bottom-float', 'ncua-progress-bar__content']);
+    });
+});
+describe('ProgressBar — 0% 라벨 (RPB-05)', () => {
+    it.each([
+        ['기본(숨김)', undefined, null],
+        ['showZeroLabel true', true, '0%'],
+    ])('RPB-05 value 0 + %s → 라벨 %s', (_label, showZeroLabel, expected) => {
+        const view = render({ label: 'right', value: 0, showZeroLabel });
+        expect(view.querySelector('.ncua-progress-bar__label')?.textContent ?? null).toBe(expected);
+    });
+    it('RPB-05 세그먼트 1개 값 0 도 기본은 라벨을 숨긴다', () => {
+        const view = render({ label: 'bottom', segments: [{ value: 0 }] });
+        expect(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+    });
+    it('RPB-05 0 세그먼트 라벨은 기본 숨김, showZeroLabel 이면 앞 폭 합 − 1 위치에 translateX(0) 로 둔다', () => {
+        const segments = [{ value: SEG_A }, { value: 0 }, { value: SEG_B }];
+        const hidden = render({ segments });
+        expect(segmentLabelsOf(hidden).map((label) => label.textContent)).toEqual([`${NORMALIZED_A}%`, `${NORMALIZED_B}%`]);
+        const shown = render({ segments, showZeroLabel: true });
+        const zero = segmentLabelsOf(shown)[1];
+        expect([zero.textContent, zero.style.left, zero.style.transform]).toEqual([
+            '0%',
+            `${NORMALIZED_A - ZERO_LABEL_OFFSET}%`,
+            'translateX(0)',
+        ]);
+    });
+    it('RPB-05 첫 세그먼트가 0 이면 시작점은 0 아래로 내려가지 않는다', () => {
+        const view = render({ segments: [{ value: 0 }, { value: SEG_A }], showZeroLabel: true });
+        expect(segmentLabelsOf(view)[0].style.left).toBe('0%');
+    });
+});
+describe('ProgressBar — 세그먼트 라벨 위치 (RPB-06)', () => {
+    it('RPB-06 라벨 left = 앞 세그먼트 폭 합 + 자기 폭 / 2, transform translateX(-50%)', () => {
+        const view = render({ segments: [{ value: SEG_A }, { value: SEG_B }] });
+        const labels = segmentLabelsOf(view);
+        expect(labels.map((label) => [label.style.left, label.style.transform])).toEqual([
+            [`${FIRST_LABEL_LEFT}%`, 'translateX(-50%)'],
+            [`${SECOND_LABEL_LEFT}%`, 'translateX(-50%)'],
+        ]);
+    });
+    it('RPB-06 색이 없으면 색 클래스를 붙이지 않는다', () => {
+        const view = render({ segments: [{ value: SEG_A }, { value: SEG_B }] });
+        expect(fillsOf(view).some((fill) => Array.from(fill.classList).some((name) => name.includes('--color-')))).toBe(false);
+    });
+});
+describe('ProgressBar — 다중 세그먼트 aria (RPB-07)', () => {
+    it('RPB-07 세그먼트 2개 이상이면 aria-valuenow 가 어디에도 없다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (다중 세그먼트에 진행 값 aria 가 없음 — vanilla ProgressBar.ts 와 같은 동작, 접근성)
+        const view = render({ segments: [{ value: SEG_A }, { value: SEG_B }] });
+        expect(view.querySelector('[aria-valuenow]')).toBeNull();
+    });
+    it.todo('RPB-07 세그먼트 2개 이상이면 role="progressbar" 와 합계 aria-valuenow 를 노출한다 (기대, #597)');
+});
+describe('ProgressBar — label 미지정 (RPB-08)', () => {
+    it('RPB-08 label 을 생략하면 컨테이너 클래스가 빈 modifier ncua-progress-bar- 를 갖고 라벨이 없다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (label 생략 시 빈 modifier "ncua-progress-bar-" 클래스가 붙음)
+        const view = render({ value: VALUE });
+        expect(containerOf(view).classList.contains('ncua-progress-bar-')).toBe(true);
+        expect(view.querySelector('.ncua-progress-bar__label')).toBeNull();
+    });
+    it.todo('RPB-08 label 을 생략하면 빈 modifier 클래스 ncua-progress-bar- 를 붙이지 않는다 (기대, #597)');
+});

package/dist/temp/src/components/feedback-and-status/progress-bar/__tests__/useProgressBar.test.d.ts

@@ -0,0 +1 @@
+export {};