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

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

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

package/dist/temp/src/components/layout/block-header/__tests__/SubTitle.test.d.ts

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

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

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

package/dist/temp/src/components/layout/divider/__tests__/Divider.test.d.ts

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

package/dist/temp/src/components/layout/divider/__tests__/Divider.test.js

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+//
+// Divider (src/components/layout/divider/Divider.tsx) 위험 경로 — 위험 목록표 DV-xx.
+import { createElement, createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Divider } from '../Divider';
+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(Divider, props));
+    });
+    return container;
+};
+/** 루트 자식의 클래스 순서 — line · content · line 배치를 본다 */
+const layoutOf = (view) => Array.from(view.querySelector('.ncua-divider')?.children ?? []).map((child) => child.className);
+describe('Divider — 스타일별 배치 (DV-01)', () => {
+    it('DV-01 기본(single-line)은 content 양쪽에 line 을 두고 type·style·className 클래스와 ref 를 연결한다', () => {
+        const ref = createRef();
+        const view = render({ type: 'text', className: 'my-divider', children: '또는', ref });
+        const divider = view.querySelector('.ncua-divider');
+        expect(layoutOf(view)).toEqual(['ncua-divider__line', 'ncua-divider__content', 'ncua-divider__line']);
+        expect(view.querySelector('.ncua-divider__content')?.textContent).toBe('또는');
+        expect(divider?.classList.contains('ncua-divider--text')).toBe(true);
+        expect(divider?.classList.contains('ncua-divider--single-line')).toBe(true);
+        expect(divider?.classList.contains('my-divider')).toBe(true);
+        expect(ref.current).toBe(divider);
+    });
+    it('DV-01 background-fill 이면 line 없이 content 만 둔다', () => {
+        const view = render({ type: 'heading', style: 'background-fill', children: '제목' });
+        expect(layoutOf(view)).toEqual(['ncua-divider__content']);
+        expect(view.querySelector('.ncua-divider')?.classList.contains('ncua-divider--background-fill')).toBe(true);
+    });
+});

package/dist/temp/src/components/layout/ncua-scope/__tests__/NcuaScope.test.d.ts

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

package/dist/temp/src/components/layout/ncua-scope/__tests__/NcuaScope.test.js

@@ -0,0 +1,136 @@
+// @vitest-environment jsdom
+//
+// NcuaScope (src/components/layout/ncua-scope/NcuaScope.tsx) 위험 경로 — 위험 목록표 NS-xx.
+// generated/scoped-css 는 pretest·pretest:coverage 가 만드는 빌드 산출물(gitignore)이다. vite 는 mock 과
+// 무관하게 import 경로를 해석하므로 파일 자체는 있어야 하고, 내용만 고정 문자열로 mock 한다.
+// 테스트 환경 React 는 18.2 — React 19 분기는 react 의 version 만 바꿔 다시 import 해 판단만 덮는다.
+import { createElement, createRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToString } from 'react-dom/server';
+import { act } from 'react-dom/test-utils';
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest';
+/** 이스케이프되면 깨지는 문자(따옴표·꺾쇠·앰퍼샌드)를 일부러 넣는다 */
+const SCOPED_CSS = ".ncua-scope > .ncua-btn::after { content: 'A & B'; }";
+const loadNcuaScope = async () => {
+    vi.doMock('../../../../generated/scoped-css', () => ({ NCUA_SCOPED_CSS: SCOPED_CSS }));
+    return (await import('../NcuaScope')).NcuaScope;
+};
+/**
+ * react 의 version 만 바꾼 채 NcuaScope 를 새로 평가한다. 나머지 export 는 원본 그대로라
+ * react-dom 과 같은 React 인스턴스로 렌더된다 (react 는 외부 모듈이라 resetModules 대상이 아니다).
+ */
+const loadNcuaScopeWithReactVersion = (version) => {
+    vi.doMock('react', async (importOriginal) => ({ ...(await importOriginal()), version }));
+    vi.resetModules();
+    return loadNcuaScope();
+};
+const restoreReactVersion = () => {
+    vi.doUnmock('react');
+    vi.resetModules();
+};
+const styles = (view) => Array.from(view.querySelectorAll('style'));
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const STYLE_KEY = 'ncua-scoped';
+let root = null;
+let container = null;
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    root = null;
+    container?.remove();
+    container = null;
+    document.head.innerHTML = '';
+    vi.restoreAllMocks();
+});
+const render = (node) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(node);
+    });
+    return container;
+};
+describe('NcuaScope — React 18 스타일 주입 (NS-01)', () => {
+    let NcuaScope;
+    beforeAll(async () => {
+        NcuaScope = await loadNcuaScope();
+    });
+    it('NS-01 SSR(renderToString) 결과의 style 안에 scoped CSS 원문을 이스케이프 없이 내보낸다', () => {
+        const html = renderToString(createElement(NcuaScope, null));
+        expect(html).toContain(`<style data-ncua-scope="${STYLE_KEY}">${SCOPED_CSS}</style>`);
+    });
+    it('NS-01 클라이언트 렌더는 data-ncua-scope style 에 scoped CSS 를 넣고 href·precedence 는 없다', () => {
+        const view = render(createElement(NcuaScope, null));
+        const style = view.querySelector('style');
+        expect(style?.getAttribute('data-ncua-scope')).toBe(STYLE_KEY);
+        expect(style?.innerHTML).toBe(SCOPED_CSS);
+        expect(style?.hasAttribute('href')).toBe(false);
+        expect(style?.hasAttribute('precedence')).toBe(false);
+    });
+    it('NS-01 style 다음 .ncua-scope div 에 children·className 을 넣고 ref 를 그 div 로 연결한다', () => {
+        const ref = createRef();
+        const view = render(createElement(NcuaScope, { ref, className: 'page-scope' }, createElement('button', null, '신청하기')));
+        const scope = view.querySelector('.ncua-scope');
+        expect(scope?.previousElementSibling?.tagName).toBe('STYLE');
+        expect(scope?.classList.contains('page-scope')).toBe(true);
+        expect(scope?.querySelector('button')?.textContent).toBe('신청하기');
+        expect(ref.current).toBe(scope);
+    });
+});
+describe('NcuaScope — React 18 중첩·형제 (NS-02)', () => {
+    let NcuaScope;
+    beforeAll(async () => {
+        NcuaScope = await loadNcuaScope();
+    });
+    it('NS-02 중첩하면 바깥 NcuaScope 만 style 을 심고 안쪽은 생략한다', () => {
+        const view = render(createElement(NcuaScope, { className: 'outer' }, createElement(NcuaScope, { className: 'inner' }, '본문')));
+        expect(styles(view)).toHaveLength(1);
+        expect(view.querySelector('.outer > .inner')?.textContent).toBe('본문');
+        expect(view.querySelector('.inner style')).toBeNull();
+    });
+    it('NS-02 형제로 두면 각자 style 을 심는다', () => {
+        const view = render(createElement('div', null, createElement(NcuaScope, null), createElement(NcuaScope, null)));
+        expect(styles(view)).toHaveLength(2);
+    });
+});
+describe('NcuaScope — React 19 이상 스타일 호이스팅 분기 (NS-03)', () => {
+    let NcuaScope;
+    beforeAll(async () => {
+        NcuaScope = await loadNcuaScopeWithReactVersion('19.0.0');
+    });
+    afterAll(() => {
+        restoreReactVersion();
+    });
+    it('NS-03 style 에 href·precedence 를 붙이고 data-ncua-scope 는 없다', () => {
+        const view = render(createElement(NcuaScope, null));
+        const style = view.querySelector('style');
+        expect(style?.getAttribute('href')).toBe(STYLE_KEY);
+        expect(style?.getAttribute('precedence')).toBe('default');
+        expect(style?.hasAttribute('data-ncua-scope')).toBe(false);
+        expect(style?.textContent).toBe(SCOPED_CSS);
+    });
+    it('NS-03 중첩·형제 모두 style 을 렌더해 중복 제거를 React 에 맡긴다', () => {
+        const view = render(createElement('div', null, createElement(NcuaScope, null, createElement(NcuaScope, null)), createElement(NcuaScope, null)));
+        expect(styles(view).map((style) => style.getAttribute('href'))).toEqual([STYLE_KEY, STYLE_KEY, STYLE_KEY]);
+    });
+});
+describe('NcuaScope — React 버전 문자열 해석 (NS-04)', () => {
+    afterEach(() => {
+        restoreReactVersion();
+    });
+    it.each([
+        ['18.3.1', false],
+        ['19.0.0-rc.1', true],
+        ['20.1.0', true],
+    ])('NS-04 React %s 면 호이스팅 분기 여부가 %s 다', async (version, hoisted) => {
+        const NcuaScope = await loadNcuaScopeWithReactVersion(version);
+        const view = render(createElement(NcuaScope, null));
+        expect(view.querySelector('style')?.hasAttribute('precedence')).toBe(hoisted);
+    });
+});

package/dist/temp/src/components/layout/page-title/__tests__/PageTitle.test.d.ts

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

package/dist/temp/src/components/layout/page-title/__tests__/PageTitle.test.js

@@ -0,0 +1,119 @@
+// @vitest-environment jsdom
+//
+// PageTitle (src/components/layout/page-title/PageTitle.tsx) 위험 경로 — 위험 목록표 PT-xx.
+// 뒤로가기 버튼은 Button 실구현으로 렌더한다.
+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 { PageTitle } from '../PageTitle';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const TITLE = '주문 상세';
+const BACK_LABEL = '이전 페이지로 돌아가기';
+const BREADCRUMB = [{ label: '홈', href: '/' }, { label: '주문' }, { label: '주문 상세' }];
+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(PageTitle, props));
+    });
+    return container;
+};
+const backButtonOf = (view) => view.querySelector(`button[aria-label="${BACK_LABEL}"]`);
+const headerRowOf = (view) => view.querySelector('.ncua-page-title__header');
+describe('PageTitle — 뒤로가기 (PT-01)', () => {
+    it.each(['detail', 'fixed-detail'])('PT-01 %s + onBack 이면 뒤로가기 버튼을 두고 click 하면 onBack 을 호출한다', (variant) => {
+        const onBack = vi.fn();
+        const view = render({ title: TITLE, variant, onBack });
+        const backButton = backButtonOf(view);
+        act(() => {
+            backButton?.click();
+        });
+        expect(backButton?.classList.contains('ncua-page-title__back-btn')).toBe(true);
+        expect(backButton?.nextElementSibling?.tagName).toBe('H1');
+        expect(onBack).toHaveBeenCalled();
+    });
+    it.each(['default', 'fixed'])('PT-01 %s 면 onBack 이 있어도 뒤로가기 버튼이 없다', (variant) => {
+        const view = render({ title: TITLE, variant, onBack: vi.fn() });
+        expect(backButtonOf(view)).toBeNull();
+    });
+    it('PT-01 detail 이어도 onBack 이 없으면 뒤로가기 버튼이 없다', () => {
+        const view = render({ title: TITLE, variant: 'detail' });
+        expect(backButtonOf(view)).toBeNull();
+    });
+});
+describe('PageTitle — breadcrumb (PT-02)', () => {
+    it('PT-02 마지막 항목은 current span, 나머지는 href 가 있으면 링크·없으면 텍스트이고 구분 아이콘이 붙는다', () => {
+        const view = render({ title: TITLE, breadcrumbItems: BREADCRUMB });
+        const nav = view.querySelector('nav.ncua-page-title__breadcrumb');
+        const items = Array.from(view.querySelectorAll('.ncua-page-title__breadcrumb-item'));
+        expect(nav?.getAttribute('aria-label')).toBe('breadcrumb');
+        expect(items.map((item) => item.querySelector('a')?.getAttribute('href') ?? null)).toEqual(['/', null]);
+        expect(items.map((item) => item.textContent)).toEqual(['홈', '주문']);
+        expect(view.querySelectorAll('.ncua-page-title__breadcrumb-separator')).toHaveLength(items.length);
+        expect(view.querySelector('.ncua-page-title__breadcrumb-current')?.textContent).toBe('주문 상세');
+        expect(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(true);
+    });
+    it.each(['fixed', 'fixed-detail'])('PT-02 %s 면 breadcrumb 을 숨기고 has-breadcrumb 도 없다', (variant) => {
+        const view = render({ title: TITLE, variant, breadcrumbItems: BREADCRUMB });
+        expect(view.querySelector('.ncua-page-title__breadcrumb')).toBeNull();
+        expect(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(false);
+    });
+    it('PT-02 breadcrumbItems 가 빈 배열이면 breadcrumb 을 렌더하지 않는다', () => {
+        const view = render({ title: TITLE, breadcrumbItems: [] });
+        expect(view.querySelector('.ncua-page-title__breadcrumb')).toBeNull();
+        expect(headerRowOf(view)?.classList.contains('ncua-page-title__header--has-breadcrumb')).toBe(false);
+    });
+});
+describe('PageTitle — 제목·가이드·액션·클래스 (PT-03)', () => {
+    it('PT-03 title 을 h1 로, guideButton 을 가이드 영역에, secondary → primary 순서로 액션을 렌더한다', () => {
+        const view = render({
+            title: TITLE,
+            guideButton: createElement('button', { type: 'button' }, '가이드'),
+            primaryAction: createElement('button', { type: 'button' }, '저장'),
+            secondaryAction: createElement('button', { type: 'button' }, '취소'),
+        });
+        expect(view.querySelector('h1.ncua-page-title__title')?.textContent).toBe(TITLE);
+        expect(view.querySelector('.ncua-page-title__guide-btn')?.textContent).toBe('가이드');
+        expect(Array.from(view.querySelectorAll('.ncua-page-title__actions button')).map((b) => b.textContent)).toEqual([
+            '취소',
+            '저장',
+        ]);
+    });
+    it.each([
+        ['primaryAction', { primaryAction: createElement('span', null, '저장') }],
+        ['secondaryAction', { secondaryAction: createElement('span', null, '취소') }],
+    ])('PT-03 %s 하나만 있어도 액션 영역을 렌더한다', (_label, actions) => {
+        const view = render({ title: TITLE, ...actions });
+        expect(view.querySelector('.ncua-page-title__actions')).not.toBeNull();
+    });
+    it('PT-03 액션·가이드가 없으면 두 영역을 렌더하지 않고 fixed 클래스도 없다', () => {
+        const view = render({ title: TITLE });
+        expect(view.querySelector('.ncua-page-title__actions')).toBeNull();
+        expect(view.querySelector('.ncua-page-title__guide-btn')).toBeNull();
+        expect(view.querySelector('header')?.classList.contains('ncua-page-title--fixed')).toBe(false);
+    });
+    it('PT-03 fixed 계열이면 ncua-page-title--fixed, className·나머지 header 속성을 전달한다', () => {
+        const view = render({ title: TITLE, variant: 'fixed', className: 'my-title', id: 'page-title' });
+        const header = view.querySelector('header');
+        expect(header?.classList.contains('ncua-page-title--fixed')).toBe(true);
+        expect(header?.classList.contains('my-title')).toBe(true);
+        expect(header?.id).toBe('page-title');
+    });
+});

package/dist/temp/src/components/navigation/context-tab/__tests__/ContextTab.test.d.ts

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