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

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

@@ -0,0 +1,207 @@
+// @vitest-environment jsdom
+//
+// Textarea (React) 위험 경로 — 위험 목록표 TA-xx.
+// 입력은 React 가 감지하도록 네이티브 value setter 로 값을 넣은 뒤 bubbling input 을 보낸다.
+// 글자 수(characterCount)는 textarea 에 직접 붙인 네이티브 input 리스너가 갱신한다.
+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 { Textarea } from '../Textarea';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const MAX_LENGTH = 100;
+const INITIAL_TEXT = '안녕';
+const TYPED_TEXT = '안녕하세요';
+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;
+};
+/** 같은 root 에 다시 render 하면 props 변경(재렌더)이 된다 */
+const render = (props = {}) => renderElement(createElement(Textarea, props));
+afterEach(() => {
+    if (root) {
+        act(() => {
+            root?.unmount();
+        });
+    }
+    container?.remove();
+    root = null;
+    container = null;
+    vi.restoreAllMocks();
+});
+const requireElement = (scope, selector) => {
+    const element = scope.querySelector(selector);
+    if (!element)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return element;
+};
+const textareaOf = (view) => requireElement(view, 'textarea');
+const countTextOf = (view) => requireElement(view, '.ncua-input__text-count-text').textContent ?? '';
+const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set;
+const typeInto = (textarea, value) => {
+    act(() => {
+        nativeValueSetter?.call(textarea, value);
+        textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+};
+// ── P0 ─────────────────────────────────────────────────
+describe('Textarea — 입력 전달 (TA-01)', () => {
+    it('TA-01 입력하면 onChange 가 input 이벤트를 받고 textarea 값이 바뀐다', () => {
+        const onChange = vi.fn();
+        const view = render({ onChange });
+        typeInto(textareaOf(view), TYPED_TEXT);
+        expect(onChange.mock.calls[0][0].target.value).toBe(TYPED_TEXT);
+        expect(textareaOf(view).value).toBe(TYPED_TEXT);
+    });
+    it('TA-01 name·defaultValue·placeholder·maxLength 등 나머지 props 가 textarea 에 전달된다', () => {
+        const view = render({ name: 'memo', defaultValue: INITIAL_TEXT, placeholder: '메모', maxLength: MAX_LENGTH });
+        const textarea = textareaOf(view);
+        expect([textarea.name, textarea.value, textarea.placeholder, textarea.maxLength]).toEqual([
+            'memo',
+            INITIAL_TEXT,
+            '메모',
+            MAX_LENGTH,
+        ]);
+    });
+});
+describe('Textarea — 글자 수 (TA-02)', () => {
+    it('TA-02 마운트 시 초기 값 길이를 `길이/maxLength` 로 표시한다', () => {
+        const view = render({ characterCount: true, defaultValue: INITIAL_TEXT, maxLength: MAX_LENGTH });
+        expect(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+    });
+    it('TA-02 input 이벤트마다 글자 수를 갱신한다', () => {
+        const view = render({ characterCount: true, maxLength: MAX_LENGTH });
+        typeInto(textareaOf(view), TYPED_TEXT);
+        expect(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+        typeInto(textareaOf(view), '');
+        expect(countTextOf(view)).toBe(`0/${MAX_LENGTH}`);
+    });
+});
+// ── P1 ~ P3 ────────────────────────────────────────────
+describe('Textarea — controlled 값 변경 (TA-03)', () => {
+    it('TA-03 characterCount + controlled value 를 부모가 코드로 바꾸면 글자 수가 갱신되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (글자 수를 네이티브 input 이벤트로만 세어 value prop 변경을 놓침 — 화면 미갱신)
+        const onChange = vi.fn();
+        const view = render({ characterCount: true, maxLength: MAX_LENGTH, value: INITIAL_TEXT, onChange });
+        render({ characterCount: true, maxLength: MAX_LENGTH, value: TYPED_TEXT, onChange });
+        expect(textareaOf(view).value).toBe(TYPED_TEXT);
+        expect(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+    });
+    it.todo('TA-03 controlled value 가 바뀌면 입력 이벤트 없이도 글자 수가 새 값 길이로 갱신된다 (기대, #597)');
+});
+describe('Textarea — ref (TA-04)', () => {
+    it('TA-04 객체 ref 에 textarea 노드를 넣는다', () => {
+        const ref = createRef();
+        const view = render({ ref });
+        expect(ref.current).toBe(textareaOf(view));
+    });
+    it('TA-04 함수 ref 를 textarea 노드로 호출한다', () => {
+        const ref = vi.fn();
+        const view = render({ ref });
+        expect(ref).toHaveBeenCalledWith(textareaOf(view));
+    });
+});
+describe('Textarea — disabled·destructive (TA-05)', () => {
+    const rootOf = (view) => requireElement(view, '.ncua-input--textarea');
+    it('TA-05 disabled 면 textarea 가 disabled 이고 루트에 is-disabled 가 붙는다', () => {
+        const view = render({ disabled: true });
+        expect([textareaOf(view).disabled, rootOf(view).classList.contains('is-disabled')]).toEqual([true, true]);
+    });
+    it('TA-05 destructive 면 루트와 HintText 에 destructive 가 붙는다', () => {
+        const view = render({ destructive: true, hintText: '확인해 주세요' });
+        expect([
+            rootOf(view).classList.contains('destructive'),
+            requireElement(view, '.ncua-hint-text').classList.contains('destructive'),
+        ]).toEqual([true, true]);
+    });
+});
+describe('Textarea — label (TA-06)', () => {
+    it('TA-06 label·required·id 를 주면 Label 이 htmlFor=id 로 textarea 와 연결되고 필수 표시가 붙는다', () => {
+        const view = render({ label: '메모', required: true, id: 'memo-field' });
+        const label = requireElement(view, 'label');
+        expect([label.textContent, label.htmlFor, label.classList.contains('is-required')]).toEqual([
+            '메모',
+            'memo-field',
+            true,
+        ]);
+        expect(textareaOf(view).labels?.[0]).toBe(label);
+    });
+    it('TA-06 id 없이 label 만 주면 Label 이 textarea 와 연결되지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (htmlFor 가 props.id 에만 의존, id 생략 시 label 미연결 — 접근성)
+        const view = render({ label: '메모' });
+        expect(requireElement(view, 'label').htmlFor).toBe('');
+        expect(textareaOf(view).labels).toHaveLength(0);
+    });
+    it.todo('TA-06 id 를 생략해도 내부 생성 id(useId)로 label 과 textarea 를 연결한다 (기대, #597)');
+    it('TA-06 label 이 없으면 Label 을 렌더하지 않는다', () => {
+        const view = render();
+        expect(view.querySelector('label')).toBeNull();
+    });
+});
+describe('Textarea — hint 영역 (TA-07)', () => {
+    it.each([
+        ['둘 다 없음', {}, [false, false, false]],
+        ['hintText 만', { hintText: '도움말' }, [true, true, false]],
+        ['characterCount 만', { characterCount: true }, [true, false, true]],
+        ['둘 다', { hintText: '도움말', characterCount: true }, [true, true, true]],
+    ])('TA-07 %s → [hint 영역, HintText, 글자 수]', (_label, props, expected) => {
+        const view = render(props);
+        expect([
+            view.querySelector('.ncua-input__text-count-wrap') !== null,
+            view.querySelector('.ncua-hint-text') !== null,
+            view.querySelector('.ncua-input__text-count') !== null,
+        ]).toEqual(expected);
+    });
+});
+describe('Textarea — maxLength 없음 (TA-08)', () => {
+    it('TA-08 characterCount 인데 maxLength 가 없으면 분모를 0 으로 표시한다', () => {
+        // 현재 동작 고정 — 결함 후보: #597 (maxLength 생략 시 "/0" 표시 — 제한 없음이면 분모를 숨겨야 함)
+        const view = render({ characterCount: true, defaultValue: INITIAL_TEXT });
+        expect(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/0`);
+    });
+    it.todo('TA-08 maxLength 가 없으면 글자 수만 표시하고 "/0" 을 붙이지 않는다 (기대, #597)');
+});
+describe('Textarea — characterCount 전환 (TA-09)', () => {
+    it('TA-09 false → true 로 바뀌면 그 시점 값 길이로 시작하고 이후 입력을 센다', () => {
+        const view = render({ maxLength: MAX_LENGTH });
+        typeInto(textareaOf(view), INITIAL_TEXT);
+        render({ maxLength: MAX_LENGTH, characterCount: true });
+        expect(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+        typeInto(textareaOf(view), TYPED_TEXT);
+        expect(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+    });
+    it('TA-09 true → false 로 바뀌면 글자 수를 숨기고, 다시 true 로 바꾸면 숨긴 동안의 입력까지 센다', () => {
+        const view = render({ maxLength: MAX_LENGTH, characterCount: true });
+        render({ maxLength: MAX_LENGTH, characterCount: false });
+        expect(view.querySelector('.ncua-input__text-count')).toBeNull();
+        typeInto(textareaOf(view), INITIAL_TEXT);
+        render({ maxLength: MAX_LENGTH, characterCount: true });
+        expect(countTextOf(view)).toBe(`${INITIAL_TEXT.length}/${MAX_LENGTH}`);
+        typeInto(textareaOf(view), TYPED_TEXT);
+        expect(countTextOf(view)).toBe(`${TYPED_TEXT.length}/${MAX_LENGTH}`);
+    });
+});
+describe('Textarea — size·className (TA-10)', () => {
+    const rootOf = (view) => requireElement(view, '.ncua-input--textarea');
+    it('TA-10 size 기본값은 xs', () => {
+        const view = render();
+        expect(rootOf(view).classList.contains('ncua-input--textarea--xs')).toBe(true);
+    });
+    it('TA-10 size sm·className 을 루트 클래스로 반영하고 textarea 에는 붙이지 않는다', () => {
+        const view = render({ size: 'sm', className: 'my-textarea' });
+        expect([
+            rootOf(view).classList.contains('ncua-input--textarea--sm'),
+            rootOf(view).classList.contains('my-textarea'),
+            textareaOf(view).classList.contains('my-textarea'),
+        ]).toEqual([true, true, false]);
+    });
+});

package/dist/temp/src/components/forms-and-input/textarea/__tests__/Textarea.unmount.test.d.ts

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

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

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

package/dist/temp/src/components/forms-and-input/toggle/__tests__/Toggle.test.d.ts

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

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

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

package/dist/temp/src/components/image-and-icons/featured-icon/__tests__/FeaturedIcon.test.d.ts

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

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

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

package/dist/temp/src/components/layout/block-container/__tests__/BlockContainer.test.d.ts

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

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

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+//
+// BlockContainer (src/components/layout/block-container/BlockContainer.tsx) 위험 경로 — 위험 목록표 BC-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 { BlockContainer } from '../BlockContainer';
+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 = (node) => {
+    if (!container) {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        root = createRoot(container);
+    }
+    act(() => {
+        root?.render(node);
+    });
+    return container;
+};
+describe('BlockContainer — section·Body (BC-01)', () => {
+    it('BC-01 section 과 Body div 에 children·className·나머지 속성을 전달한다', () => {
+        const view = render(createElement(BlockContainer, 
+        // children 은 세 번째 인자로 넘긴다 (props 타입에서 필수라 단언)
+        { className: 'my-block', id: 'block-order' }, createElement(BlockContainer.Body, { className: 'my-body', 'aria-label': '주문 정보' }, '본문')));
+        const section = view.querySelector('section.ncua-block-container');
+        const body = section?.querySelector('div.ncua-block-container__body');
+        expect(section?.classList.contains('my-block')).toBe(true);
+        expect(section?.id).toBe('block-order');
+        expect(body?.classList.contains('my-body')).toBe(true);
+        expect(body?.getAttribute('aria-label')).toBe('주문 정보');
+        expect(body?.textContent).toBe('본문');
+    });
+    it('BC-01 compound 이름은 BlockContainer · BlockContainer.Body 이다', () => {
+        expect([BlockContainer.displayName, BlockContainer.Body.displayName]).toEqual([
+            'BlockContainer',
+            'BlockContainer.Body',
+        ]);
+    });
+});

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

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