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

package/dist/temp/src/components/overlays/dropdown/__tests__/dropdownTestUtils.d.ts

@@ -0,0 +1,3 @@
+export declare const configItem: (scope: Element, text: string) => HTMLElement;
+export declare const configTexts: (scope: Element) => string[];
+export declare const applyButtonOf: (scope: Element) => HTMLButtonElement;

package/dist/temp/src/components/overlays/dropdown/__tests__/dropdownTestUtils.js

@@ -0,0 +1,17 @@
+// React Dropdown 테스트(Dropdown·Dropdown.dnd) 공용 조회 헬퍼.
+// vitest include 가 *.test.ts 만 수집하므로 이 파일은 테스트로 실행되지 않는다.
+// import 만으로 act 환경 플래그가 켜진다 — 두 테스트 파일이 모두 createRoot + act 로 렌더하기 때문이다.
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+export const configItem = (scope, text) => {
+    const item = Array.from(scope.querySelectorAll('.ncua-dropdown__item--config')).find((element) => element.querySelector('.ncua-dropdown__item-text')?.textContent === text);
+    if (!item)
+        throw new Error(`config item 이 없습니다: ${text}`);
+    return item;
+};
+export const configTexts = (scope) => Array.from(scope.querySelectorAll('.ncua-dropdown__item--config .ncua-dropdown__item-text')).map((element) => element.textContent ?? '');
+export const applyButtonOf = (scope) => {
+    const button = scope.querySelector('.ncua-dropdown__footer button');
+    if (!button)
+        throw new Error('적용 버튼이 없습니다');
+    return button;
+};

package/dist/temp/src/components/overlays/dropdown/__tests__/utils.test.js

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { applyDraftToItems, arrayMoveById, hasDraftChanged, initDraftState } from '../utils';
+import { applyDraftToItems, arrayMoveById, arrayReorderByEdge, hasDraftChanged, initDraftState } from '../utils';
 describe('arrayMoveById', () => {
     it('fromId를 toId 위치로 이동시킨다', () => {
         const order = ['a', 'b', 'c', 'd'];
@@ -120,3 +120,26 @@ describe('hasDraftChanged', () => {
         expect(hasDraftChanged(original, draft)).toBe(false);
     });
 });
+describe('DDU-01 Dropdown 경유로 닿지 않는 방어 분기', () => {
+    it.each([
+        { name: '같은 id', fromId: 'b', toId: 'b' },
+        { name: '없는 fromId', fromId: 'x', toId: 'b' },
+        { name: '없는 toId', fromId: 'a', toId: 'x' },
+    ])('DDU-01 arrayReorderByEdge 에 $name 이면 원본을 그대로 돌려준다', ({ fromId, toId }) => {
+        const order = ['a', 'b', 'c'];
+        expect(arrayReorderByEdge(order, fromId, toId, 'bottom')).toBe(order);
+    });
+    it('DDU-01 hasDraftChanged 는 순서 길이가 다르면 true', () => {
+        const original = { order: ['a', 'b'], visibility: { a: true, b: true } };
+        const draft = { order: ['a'], visibility: { a: true, b: true } };
+        expect(hasDraftChanged(original, draft)).toBe(true);
+    });
+});
+describe('DDU-02 required + visible: false', () => {
+    it('DDU-02 initDraftState 는 required 항목의 visible: false 를 그대로 false 로 둔다', () => {
+        // 현재 동작 고정 — 결함 후보: 후속 이슈 (dropdown.mdx "항상 visible 상태" 와 계약 불일치 — vanilla VDD-16 과 같은 식)
+        const groups = [{ items: [{ id: 'code', text: '코드', required: true, visible: false }] }];
+        expect(initDraftState(groups).visibility).toEqual({ code: false });
+    });
+    it.todo('DDU-02 initDraftState 는 required 항목을 visible 값과 관계없이 true 로 두어야 한다');
+});

package/dist/temp/src/components/overlays/modal/__tests__/Modal.test.d.ts

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

package/dist/temp/src/components/overlays/modal/__tests__/Modal.test.js

@@ -0,0 +1,307 @@
+// @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 { Modal } from '../Modal';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const BACKDROP_SELECTOR = '.ncua-modal-backdrop';
+const MODAL_BODY_TEXT = '모달 본문';
+/** afterEach 에서 unmount 할 루트 — 단언 뒤 인라인 unmount 를 두지 않는다 */
+const mounted = [];
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => root.unmount());
+        container.remove();
+    }
+    document.body.style.overflow = '';
+    vi.restoreAllMocks();
+});
+const mount = (node) => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const entry = { root, container };
+    mounted.push(entry);
+    act(() => root.render(node));
+    return {
+        rerender: (next) => act(() => root.render(next)),
+        /** 자기 항목만 정리 목록에서 빼고 unmount 해 afterEach 가 이중 unmount 하지 않게 한다 */
+        unmount: () => {
+            mounted.splice(mounted.indexOf(entry), 1);
+            act(() => root.unmount());
+            container.remove();
+        },
+    };
+};
+const modal = ({ children = MODAL_BODY_TEXT, isOpen = true, onClose = () => undefined, ...rest } = {}) => createElement(Modal, { isOpen, onClose, ...rest }, children);
+/** 요소를 못 찾으면 throw — `?.click()` 뒤 "무시" 단언이 요소 부재로 공허하게 통과하지 않게 한다 */
+const mustQuery = (root, selector) => {
+    const found = root.querySelector(selector);
+    if (!found)
+        throw new Error(`요소를 찾을 수 없습니다: ${selector}`);
+    return found;
+};
+const pressKey = (key) => {
+    act(() => {
+        document.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true }));
+    });
+};
+const click = (element) => {
+    act(() => element.click());
+};
+describe('React Modal — 열림 렌더와 스크롤 잠금 (RMO-01)', () => {
+    it('RMO-01 isOpen 이 false 면 백드롭을 렌더하지 않고 body 스크롤도 잠그지 않는다', () => {
+        // Given/When: 닫힌 상태로 렌더하면
+        mount(modal({ isOpen: false }));
+        // Then: 백드롭이 없고 overflow 가 비어 있다
+        expect(document.body.querySelector(BACKDROP_SELECTOR)).toBeNull();
+        expect(document.body.style.overflow).toBe('');
+    });
+    it('RMO-01 isOpen 이 true 면 body 포털에 백드롭과 기본 md 크기 모달, children 을 그리고 스크롤을 잠근다', () => {
+        // Given/When: 열린 상태로 렌더하면
+        mount(modal());
+        // Then: 백드롭은 body 의 직계 자식이고 안쪽에 md 모달과 본문이 있다
+        const backdrop = mustQuery(document.body, BACKDROP_SELECTOR);
+        const inner = mustQuery(backdrop, '.ncua-modal');
+        expect(backdrop.parentNode).toBe(document.body);
+        expect(inner.classList.contains('ncua-modal--md')).toBe(true);
+        expect(inner.textContent).toBe(MODAL_BODY_TEXT);
+        expect(document.body.style.overflow).toBe('hidden');
+    });
+    it('RMO-01 열린 모달을 isOpen false 로 닫으면 백드롭이 사라지고 스크롤 잠금이 풀린다', () => {
+        // Given: 열린 모달
+        const view = mount(modal());
+        // When: isOpen 을 false 로 바꾼다
+        view.rerender(modal({ isOpen: false }));
+        // Then: 백드롭이 없고 overflow 가 원복된다
+        expect(document.body.querySelector(BACKDROP_SELECTOR)).toBeNull();
+        expect(document.body.style.overflow).toBe('');
+    });
+    it('RMO-01 열린 채 unmount 하면 스크롤 잠금이 풀린다', () => {
+        // Given: 열린 모달
+        const view = mount(modal());
+        // When: unmount 한다
+        view.unmount();
+        // Then: overflow 가 원복된다
+        expect(document.body.style.overflow).toBe('');
+    });
+});
+describe('React Modal — 닫기 입력 (RMO-02)', () => {
+    it('RMO-02 closeOnBackdropClick 이 true 면 백드롭 자신 클릭으로 onClose 를 부른다', () => {
+        // Given: 배경 클릭 닫기를 켠 모달
+        const onClose = vi.fn();
+        mount(modal({ closeOnBackdropClick: true, onClose }));
+        // When: 백드롭을 클릭한다
+        click(mustQuery(document.body, BACKDROP_SELECTOR));
+        // Then: onClose 가 불린다
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it('RMO-02 closeOnBackdropClick 이 true 여도 안쪽 .ncua-modal 클릭은 무시한다', () => {
+        // Given: 배경 클릭 닫기를 켠 모달
+        const onClose = vi.fn();
+        mount(modal({ closeOnBackdropClick: true, onClose }));
+        // When: 안쪽 모달 요소를 클릭한다
+        click(mustQuery(document.body, '.ncua-modal'));
+        // Then: onClose 가 불리지 않는다
+        expect(onClose).not.toHaveBeenCalled();
+    });
+    it('RMO-02 closeOnBackdropClick 기본값(false)이면 백드롭 클릭을 무시한다', () => {
+        // Given: 옵션 없이 연 모달
+        const onClose = vi.fn();
+        mount(modal({ onClose }));
+        // When: 백드롭을 클릭한다
+        click(mustQuery(document.body, BACKDROP_SELECTOR));
+        // Then: onClose 가 불리지 않는다
+        expect(onClose).not.toHaveBeenCalled();
+    });
+    it('RMO-02 closeOnEsc 기본값(true)이면 Escape 로 onClose 를 부른다', () => {
+        // Given: 옵션 없이 연 모달
+        const onClose = vi.fn();
+        mount(modal({ onClose }));
+        // When: Escape 를 누른다
+        pressKey('Escape');
+        // Then: onClose 가 불린다
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it.each([
+        ['closeOnEsc false 에서 Escape', { closeOnEsc: false }, 'Escape'],
+        ['기본 설정에서 Escape 가 아닌 키', {}, 'Enter'],
+    ])('RMO-02 %s 는 무시한다', (_name, options, key) => {
+        // Given: 연 모달
+        const onClose = vi.fn();
+        mount(modal({ onClose, ...options }));
+        // When: 키를 누른다
+        pressKey(key);
+        // Then: onClose 가 불리지 않는다
+        expect(onClose).not.toHaveBeenCalled();
+    });
+    it('RMO-02 isOpen 이 false 가 되면 keydown 리스너를 해제해 Escape 에 반응하지 않는다', () => {
+        // Given: 열었다가 isOpen false 로 닫은 모달
+        const onClose = vi.fn();
+        const view = mount(modal({ onClose }));
+        view.rerender(modal({ onClose, isOpen: false }));
+        // When: Escape 를 누른다
+        pressKey('Escape');
+        // Then: onClose 가 불리지 않는다 (양성 대조: 위 "Escape 로 onClose 를 부른다")
+        expect(onClose).not.toHaveBeenCalled();
+    });
+});
+/** 받은 width · height 를 속성으로 남기는 합성 아이콘 — 실제 아이콘의 SVG 반영은 아이콘 패키지 소관 */
+const SyntheticIcon = ({ width, height }) => createElement('svg', { 'data-synthetic-icon': '', width, height });
+/** FeaturedIcon sm 의 아이콘 크기 */
+const FEATURED_ICON_SM_SIZE = 16;
+const TITLE = '제목';
+const SUBTITLE = '부제목';
+const renderInsideModal = (node) => {
+    mount(modal({ children: node }));
+    return mustQuery(document.body, '.ncua-modal');
+};
+describe('React Modal.Header (RMO-03)', () => {
+    it('RMO-03 기본 렌더: title, 기본 left 정렬, 닫기 버튼과 --close-button modifier, subtitle · 아이콘 · 구분선 없음', () => {
+        // Given/When: title 과 onClose 만 넘긴다
+        const inner = renderInsideModal(createElement(Modal.Header, { title: TITLE, onClose: vi.fn() }));
+        // Then: 기본 구성이 보인다
+        const header = mustQuery(inner, '.ncua-modal__header');
+        expect(mustQuery(header, '.ncua-modal__title-text').textContent).toBe(TITLE);
+        expect(header.classList.contains('ncua-modal__header--left')).toBe(true);
+        expect(header.classList.contains('ncua-modal__header--close-button')).toBe(true);
+        expect(header.querySelector('.ncua-modal__close-button')).not.toBeNull();
+        expect(header.querySelector('.ncua-modal__title-subtitle')).toBeNull();
+        expect(header.querySelector('.ncua-featured-icon')).toBeNull();
+        expect(inner.querySelector('.ncua-modal__header-divider')).toBeNull();
+    });
+    it('RMO-03 닫기 버튼을 클릭하면 Header 의 onClose 를 부른다', () => {
+        // Given: onClose 를 받은 Header
+        const onClose = vi.fn();
+        const inner = renderInsideModal(createElement(Modal.Header, { title: TITLE, onClose }));
+        // When: 닫기 버튼을 클릭한다
+        click(mustQuery(inner, '.ncua-modal__close-button'));
+        // Then: onClose 가 불린다
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+    it('RMO-03 hideCloseButton 이면 닫기 버튼과 --close-button modifier 가 없다', () => {
+        const inner = renderInsideModal(createElement(Modal.Header, { title: TITLE, onClose: vi.fn(), hideCloseButton: true }));
+        const header = mustQuery(inner, '.ncua-modal__header');
+        expect(header.querySelector('.ncua-modal__close-button')).toBeNull();
+        expect(header.classList.contains('ncua-modal__header--close-button')).toBe(false);
+    });
+    it('RMO-03 subtitle · align · showDivider · children 을 그린다', () => {
+        const inner = renderInsideModal(createElement(Modal.Header, { title: TITLE, subtitle: SUBTITLE, align: 'center', showDivider: true, onClose: vi.fn() }, createElement('span', { className: 'header-extra' })));
+        const header = mustQuery(inner, '.ncua-modal__header');
+        expect(mustQuery(header, '.ncua-modal__title-subtitle').textContent).toBe(SUBTITLE);
+        expect(header.classList.contains('ncua-modal__header--center')).toBe(true);
+        expect(header.querySelector('.header-extra')).not.toBeNull();
+        expect(inner.querySelector('.ncua-modal__header-divider')).not.toBeNull();
+    });
+    it('RMO-03 featuredIcon 은 지정한 icon · color · theme 와 sm 크기로 그린다', () => {
+        const inner = renderInsideModal(createElement(Modal.Header, {
+            title: TITLE,
+            onClose: vi.fn(),
+            featuredIcon: { icon: SyntheticIcon, color: 'error', theme: 'dark-circle' },
+        }));
+        const featured = mustQuery(inner, '.ncua-featured-icon');
+        const icon = mustQuery(featured, '[data-synthetic-icon]');
+        expect(Array.from(featured.classList)).toEqual(expect.arrayContaining(['ncua-featured-icon--error', 'ncua-featured-icon--dark-circle', 'ncua-featured-icon--sm']));
+        expect(icon.getAttribute('width')).toBe(String(FEATURED_ICON_SM_SIZE));
+    });
+});
+/** children 은 가변 인자로 넘긴다 (Biome noChildrenProp) — props 타입의 필수 children 은 캐스팅으로 채운다 */
+const modalActions = (props, child) => createElement(Modal.Actions, props, child);
+describe('React Modal.Actions (RMO-04)', () => {
+    it('RMO-04 기본값: vertical · stretch, 구분선과 checkbox 영역 없음', () => {
+        const inner = renderInsideModal(modalActions({}, createElement('button', null, '확인')));
+        const actions = mustQuery(inner, '.ncua-modal__actions');
+        expect(Array.from(actions.classList)).toEqual(expect.arrayContaining(['ncua-modal__actions--vertical', 'ncua-modal__actions--stretch']));
+        expect(inner.querySelector('.ncua-modal__actions-divider')).toBeNull();
+        expect(inner.querySelector('.ncua-modal__actions-checkbox')).toBeNull();
+        expect(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('ncua-modal__actions-wrapper--checkbox')).toBe(false);
+    });
+    it('RMO-04 showDivider · layout · align · className 을 반영한다', () => {
+        const inner = renderInsideModal(modalActions({ showDivider: true, layout: 'horizontal', align: 'right', className: 'custom-actions' }, createElement('button', null, '확인')));
+        const actions = mustQuery(inner, '.ncua-modal__actions');
+        expect(inner.querySelector('.ncua-modal__actions-divider')).not.toBeNull();
+        expect(Array.from(actions.classList)).toEqual(expect.arrayContaining(['ncua-modal__actions--horizontal', 'ncua-modal__actions--right']));
+        expect(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('custom-actions')).toBe(true);
+    });
+    it('RMO-04 layout="checkbox" 면 checkbox 영역에 checkboxContent 를 그리고 wrapper modifier 를 붙인다', () => {
+        const inner = renderInsideModal(modalActions({ layout: 'checkbox', checkboxContent: createElement('label', { className: 'never-show' }, '다시 보지 않기') }, createElement('button', null, '확인')));
+        const checkboxContent = mustQuery(inner, '.ncua-modal__actions-checkbox-content');
+        expect(checkboxContent.querySelector('.never-show')).not.toBeNull();
+        expect(mustQuery(inner, '.ncua-modal__actions-wrapper').classList.contains('ncua-modal__actions-wrapper--checkbox')).toBe(true);
+    });
+});
+describe('React Modal — zIndex (RMO-05)', () => {
+    /** 기본값(미설정)과 구분되는 zIndex */
+    const Z_INDEX = 1234;
+    it('RMO-05 zIndex 값이 있으면 백드롭 style.zIndex 에 반영한다', () => {
+        mount(modal({ zIndex: Z_INDEX }));
+        expect(mustQuery(document.body, BACKDROP_SELECTOR).style.zIndex).toBe(String(Z_INDEX));
+    });
+    it('RMO-05 zIndex 를 생략하면 백드롭에 style 속성이 없다', () => {
+        mount(modal());
+        expect(mustQuery(document.body, BACKDROP_SELECTOR).getAttribute('style')).toBeNull();
+    });
+    it('RMO-05 zIndex={0} 은 무시돼 백드롭에 style 속성이 없다', () => {
+        // 현재 동작 고정 — 결함 후보: #627 RMO-05 (truthy 검사로 0 을 버림 — vanilla 는 0 을 적용, #614 RTP-13 같은 유형)
+        mount(modal({ zIndex: 0 }));
+        expect(mustQuery(document.body, BACKDROP_SELECTOR).getAttribute('style')).toBeNull();
+    });
+    it.todo('RMO-05 기대 동작 (#627): zIndex={0} 도 백드롭 style.zIndex "0" 으로 적용한다 (vanilla 와 일치)');
+});
+describe('React Modal — 중첩 모달 (RMO-06)', () => {
+    it('RMO-06 두 모달이 열린 채 Escape 를 한 번 누르면 두 onClose 가 모두 불린다', () => {
+        // 현재 동작 고정 — 결함 후보: #627 RMO-06 (중첩 모달 — 각 모달이 document keydown 을 따로 들어 Escape 한 번에 모두 닫힘, VMO-07 과 한 행)
+        // Given: 두 모달을 함께 연다
+        const lowerOnClose = vi.fn();
+        const upperOnClose = vi.fn();
+        mount(createElement('div', null, modal({ onClose: lowerOnClose }), modal({ onClose: upperOnClose })));
+        // When: Escape 를 한 번 누른다
+        pressKey('Escape');
+        // Then: 두 onClose 가 1회씩 불린다
+        expect(lowerOnClose).toHaveBeenCalledTimes(1);
+        expect(upperOnClose).toHaveBeenCalledTimes(1);
+    });
+    it('RMO-06 두 모달 중 하나를 닫으면 다른 모달이 열려 있어도 body 스크롤 잠금이 풀린다', () => {
+        // 현재 동작 고정 — 결함 후보: #627 RMO-06 (중첩 모달 — cleanup 이 overflow 를 무조건 '' 로 되돌림, VMO-07 과 한 행)
+        // Given: 참조가 고정된 onClose 로 두 모달을 함께 연다 (사용처의 useCallback 과 같은 조건 —
+        // onClose 가 매 렌더 바뀌면 아래 모달 effect 가 재실행돼 잠금을 다시 건다)
+        const lowerOnClose = vi.fn();
+        const upperOnClose = vi.fn();
+        const view = mount(createElement('div', null, modal({ onClose: lowerOnClose }), modal({ onClose: upperOnClose })));
+        // When: 위 모달만 isOpen false 로 닫는다
+        view.rerender(createElement('div', null, modal({ onClose: lowerOnClose }), modal({ onClose: upperOnClose, isOpen: false })));
+        // Then: 아래 모달 백드롭은 남아 있지만 overflow 는 비어 있다
+        expect(document.body.querySelectorAll(BACKDROP_SELECTOR).length).toBe(1);
+        expect(document.body.style.overflow).toBe('');
+    });
+    it('RMO-06 (대조) onClose 를 매 렌더 새로 만들면 아래 모달 effect 가 재실행돼 잠금이 다시 걸린다', () => {
+        // Given: 렌더마다 새 onClose 로 두 모달을 함께 연다
+        const view = mount(createElement('div', null, modal({ onClose: () => undefined }), modal()));
+        // When: 위 모달만 닫는다 (아래 모달 onClose 도 새 함수)
+        view.rerender(createElement('div', null, modal({ onClose: () => undefined }), modal({ isOpen: false })));
+        // Then: overflow 가 hidden 으로 남는다 — 위 케이스의 '' 단언이 공허하지 않음을 보인다
+        expect(document.body.style.overflow).toBe('hidden');
+    });
+    it.todo('RMO-06 기대 동작 (#627): Escape 한 번은 가장 위 모달의 onClose 만 부른다');
+    it.todo('RMO-06 기대 동작 (#627): 다른 모달이 열려 있는 동안 body 스크롤 잠금을 유지한다');
+});
+describe('React Modal — 나머지 props · Content (RMO-07)', () => {
+    it('RMO-07 size · className · 나머지 props 를 반영한다', () => {
+        // Given/When: 타입 밖 속성을 캐스팅으로 넘긴다 (...restProps 가 백드롭에 전달되는지 본다)
+        const extra = { 'data-modal-id': 'order' };
+        mount(modal({ size: 'lg', className: 'custom-backdrop', ...extra }));
+        // Then: 백드롭에 className · data 속성, 안쪽에 크기 클래스
+        const backdrop = mustQuery(document.body, BACKDROP_SELECTOR);
+        expect(backdrop.classList.contains('custom-backdrop')).toBe(true);
+        expect(backdrop.getAttribute('data-modal-id')).toBe('order');
+        expect(mustQuery(backdrop, '.ncua-modal').classList.contains('ncua-modal--lg')).toBe(true);
+    });
+    it('RMO-07 Modal.Content 는 className 을 붙이고 children 을 그린다', () => {
+        const inner = renderInsideModal(createElement(Modal.Content, { className: 'custom-content' }, '본문'));
+        const content = mustQuery(inner, '.ncua-modal__content');
+        expect(content.classList.contains('custom-content')).toBe(true);
+        expect(content.textContent).toBe('본문');
+    });
+});

package/dist/temp/src/components/overlays/notification/MessageNotificationParts.d.ts

@@ -24,5 +24,4 @@ interface MessageNotificationActionsProps {
  * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
  */
 declare const MessageNotificationActions: ({ actions, onClose, hideCloseButton, onHidePermanently, hidePermanentlyLabel, closeIconColor, }: MessageNotificationActionsProps) => import("react/jsx-runtime").JSX.Element | null;
-export type { MessageNotificationActionsProps, MessageNotificationContentProps };
 export { MessageNotificationActions, MessageNotificationContent };

package/dist/temp/src/components/overlays/notification/NotificationActionButtons.d.ts

@@ -8,5 +8,4 @@ interface NotificationActionButtonsProps {
  * 감싸는 래퍼(`__actions`)는 type 마다 클래스가 달라 호출부가 담당한다.
  */
 declare const NotificationActionButtons: ({ actions }: NotificationActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
-export type { NotificationActionButtonsProps };
 export { NotificationActionButtons };

package/dist/temp/src/components/overlays/notification/__tests__/FloatingNotification.test.d.ts

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

package/dist/temp/src/components/overlays/notification/__tests__/FloatingNotification.test.js

@@ -0,0 +1,218 @@
+// @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 { NcuaNotification } from '../../../../../assets/scripts/notification/Notification';
+import { stopPositionSync } from '../../../../../assets/scripts/notification/positionSync';
+import { mustQuery } from '../../../../__tests__/helpers/dom';
+import { installMatchMedia as installFakeMatchMedia, } from '../../../../__tests__/helpers/matchMedia';
+import { FloatingNotification } from '../FloatingNotification';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const HOST_SELECTOR = '.ncua-floating-notification-host';
+const SELECTOR = {
+    CARD: '.ncua-floating-notification',
+    TITLE: '.ncua-floating-notification__title',
+    SUPPORTING_TEXT: '.ncua-floating-notification__supporting-text',
+    ACTIONS: '.ncua-floating-notification__actions',
+    CLOSE: '.ncua-floating-notification__close-button',
+    FEATURED_ICON: '.ncua-featured-icon',
+};
+/** React portal 2개 + vanilla show() 1개. */
+const SHARED_HOST_CARD_COUNT = 3;
+const cleanups = [];
+const mounted = [];
+/** React 이벤트 핸들러 예외는 window error 로만 보고된다 — 클릭 경로는 이 배열이 비었는지 본다. */
+let windowErrors = [];
+function onWindowError(event) {
+    windowErrors.push(event.error);
+}
+beforeEach(() => {
+    windowErrors = [];
+    window.addEventListener('error', onWindowError);
+    cleanups.push(() => window.removeEventListener('error', onWindowError));
+});
+afterEach(() => {
+    for (const { root, container } of mounted.splice(0)) {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    }
+    for (const cleanup of cleanups.splice(0).reverse()) {
+        cleanup();
+    }
+    // portal 이 시작한 위치 동기화(모듈 싱글턴)와 호스트를 걷어 다음 테스트가 새 호스트를 만들게 한다.
+    stopPositionSync();
+    for (const host of Array.from(document.querySelectorAll(HOST_SELECTOR))) {
+        host.remove();
+    }
+});
+function installMatchMedia(initial) {
+    return installFakeMatchMedia(cleanups, initial, (dispatchToListeners) => {
+        act(() => {
+            dispatchToListeners();
+        });
+    });
+}
+function mount(element) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(element);
+    });
+    mounted.push({ root, container });
+    return container;
+}
+function render(props = {}) {
+    return mount(createElement(FloatingNotification, { title: '제목', ...props }));
+}
+describe('FloatingNotification (React) — portal', () => {
+    beforeEach(() => {
+        installMatchMedia(false);
+    });
+    it('RNT-02: portal 기본(false) 이면 부모 트리 안에 인라인으로 렌더하고 호스트를 만들지 않는다', () => {
+        // Given/When: portal 없이 렌더하면
+        const container = render();
+        // Then: 카드는 컨테이너 안에 있고 호스트는 없다
+        expect(container.querySelector(SELECTOR.CARD)).not.toBeNull();
+        expect(document.querySelector(HOST_SELECTOR)).toBeNull();
+    });
+    it('RNT-02: portal 이면 effect 뒤 body 의 호스트에 포털로 렌더한다', () => {
+        // Given/When: portal 로 렌더하면
+        const container = render({ portal: true });
+        // Then: 카드는 컨테이너가 아니라 호스트 아래에 있다
+        const host = mustQuery(document.body, HOST_SELECTOR);
+        expect(container.querySelector(SELECTOR.CARD)).toBeNull();
+        expect(mustQuery(host, SELECTOR.CARD).parentElement).toBe(host);
+    });
+    it('RNT-02: 두 인스턴스와 vanilla show() 가 같은 호스트를 공유하고, 언마운트 뒤에도 호스트는 남는다', () => {
+        // Given: portal 알림 두 개를 렌더하고
+        render({ portal: true, title: '첫째' });
+        render({ portal: true, title: '둘째' });
+        const host = mustQuery(document.body, HOST_SELECTOR);
+        // When: vanilla floating 을 show 하면
+        const vanilla = new NcuaNotification({ title: '바닐라', type: 'floating' });
+        cleanups.push(() => vanilla.destroy());
+        vanilla.show();
+        // Then: 호스트는 하나이고 세 카드가 모두 그 호스트의 자식이다
+        expect(document.querySelectorAll(HOST_SELECTOR)).toHaveLength(1);
+        expect(host.children).toHaveLength(SHARED_HOST_CARD_COUNT);
+        expect(host.querySelectorAll(`:scope > ${SELECTOR.CARD}`)).toHaveLength(SHARED_HOST_CARD_COUNT);
+        expect(vanilla.getElement().parentElement).toBe(host);
+        // When: React 쪽을 모두 언마운트하면
+        for (const { root, container } of mounted.splice(0)) {
+            act(() => {
+                root.unmount();
+            });
+            container.remove();
+        }
+        // Then: 호스트는 문서에 남아 있다
+        expect(host.isConnected).toBe(true);
+    });
+});
+describe('FloatingNotification (React) — a11y · 닫기', () => {
+    beforeEach(() => {
+        installMatchMedia(false);
+    });
+    it.each([
+        { color: 'error', role: 'alert' },
+        { color: 'warning', role: 'alert' },
+        { color: 'success', role: 'status' },
+        { color: 'neutral', role: 'status' },
+    ])('RNT-03: color $color → role="$role"', ({ color, role }) => {
+        // Given/When: 색상을 주어 렌더하면
+        const card = mustQuery(render({ color }), SELECTOR.CARD);
+        // Then: 색상에 맞는 live region role 이다
+        expect(card.getAttribute('role')).toBe(role);
+    });
+    it('RNT-03: aria-labelledby 는 제목 id, aria-describedby 는 supportingText 가 있을 때만 그 id 를 가리킨다', () => {
+        // Given/When: 본문 유무만 다르게 두 개 렌더하면
+        const withText = mustQuery(render({ supportingText: '본문' }), SELECTOR.CARD);
+        const withoutText = mustQuery(render(), SELECTOR.CARD);
+        // Then: 제목 · 본문 id 와 연결되고, 본문이 없으면 describedby 가 없다
+        expect(withText.getAttribute('aria-labelledby')).toBe(mustQuery(withText, SELECTOR.TITLE).id);
+        expect(withText.getAttribute('aria-describedby')).toBe(mustQuery(withText, SELECTOR.SUPPORTING_TEXT).id);
+        expect(withoutText.hasAttribute('aria-describedby')).toBe(false);
+    });
+    it('RNT-10: 닫기 버튼은 클릭하면 onClose 를 부르지만 접근 가능한 이름(aria-label)이 없다', () => {
+        // 현재 동작 고정 — 결함 후보 #597 CA-02 · RTP-18 (공용 ButtonCloseX 가 aria-label 을 받지 않음)
+        // Given: onClose 가 있는 알림을 렌더하고
+        const onClose = vi.fn();
+        const button = mustQuery(render({ onClose }), SELECTOR.CLOSE);
+        // When: 닫기 버튼을 클릭하면
+        act(() => {
+            button.click();
+        });
+        // Then: onClose 는 불리고 예외는 없지만 버튼 이름이 비어 있다
+        expect(onClose).toHaveBeenCalled();
+        expect(windowErrors).toEqual([]);
+        expect(button.getAttribute('aria-label')).toBeNull();
+    });
+    it.todo('RNT-10 floating 닫기 버튼에 "알림 닫기" 접근 가능한 이름이 있다 (vanilla 와 같게)');
+});
+describe('FloatingNotification (React) — 모바일', () => {
+    it.each([
+        { viewport: 'mobile', matches: true, featuredIcon: 'md', closeButton: 'sm' },
+        { viewport: 'desktop', matches: false, featuredIcon: 'sm', closeButton: 'xs' },
+    ])('RNT-04: $viewport 에서 마운트하면 FeaturedIcon $featuredIcon · 닫기 $closeButton 크기다', ({ matches, featuredIcon, closeButton }) => {
+        // Given/When: 매체 조건을 맞추고 닫기 버튼이 있는 알림을 렌더하면
+        installMatchMedia(matches);
+        const container = render({ onClose: vi.fn() });
+        // Then: 첫 effect 뒤 그 화면 크기다
+        const icon = mustQuery(container, SELECTOR.FEATURED_ICON);
+        const close = mustQuery(container, SELECTOR.CLOSE);
+        expect(icon.classList.contains(`ncua-featured-icon--${featuredIcon}`)).toBe(true);
+        expect(close.classList.contains(`ncua-button-close-x--${closeButton}`)).toBe(true);
+    });
+    it('RNT-04 · RNT-09: 데스크톱에서 모바일로 바뀌면 onClose 를 부르지만 카드는 그대로 남는다', () => {
+        // 현재 동작 고정 — 결함 후보 #620 (전환 시 onClose 만 부르고 카드를 남김 — vanilla 는 제거)
+        // Given: 데스크톱에서 렌더된 알림이
+        const media = installMatchMedia(false);
+        const onClose = vi.fn();
+        const container = render({ onClose });
+        // When: 모바일로 전환되면
+        media.fire(true);
+        // Then: onClose 는 불리고 크기는 모바일이 되지만 카드는 소비자가 지울 때까지 남는다
+        const card = mustQuery(container, SELECTOR.CARD);
+        expect(onClose).toHaveBeenCalled();
+        expect(mustQuery(card, SELECTOR.FEATURED_ICON).classList.contains('ncua-featured-icon--md')).toBe(true);
+        expect(card.isConnected).toBe(true);
+    });
+    it('RNT-09: 처음부터 모바일이면 마운트 시 onClose 를 부르지 않는다', () => {
+        // 현재 동작 고정 — 결함 후보 #620 (vanilla 는 생성 시 즉시 onClose — React 는 전환 때만)
+        // Given/When: 모바일 매체 조건에서 렌더하면
+        installMatchMedia(true);
+        const onClose = vi.fn();
+        const container = render({ onClose });
+        // Then: 카드는 표시되고 onClose 는 불리지 않는다
+        expect(container.querySelector(SELECTOR.CARD)).not.toBeNull();
+        expect(onClose).not.toHaveBeenCalled();
+    });
+    it.todo('RNT-09 모바일 진입 시 React · vanilla 가 같은 규칙으로 onClose 와 카드 제거를 처리한다');
+});
+describe('FloatingNotification (React) — 결함 후보: info · 빈 actions', () => {
+    beforeEach(() => {
+        installMatchMedia(false);
+    });
+    it('RNT-08: color info 면 --info 클래스로 아이콘 없이 렌더한다 (vanilla 는 neutral 클래스 + 핀 아이콘)', () => {
+        // 현재 동작 고정 — 결함 후보 #620 (info 가 iconMap 에 없어 아이콘 미렌더 — vanilla 는 neutral 로 대체)
+        // Given/When: info 로 렌더하면
+        const card = mustQuery(render({ color: 'info' }), SELECTOR.CARD);
+        // Then: --info 클래스이고 FeaturedIcon 이 없다
+        expect(card.classList.contains('ncua-floating-notification--info')).toBe(true);
+        expect(card.classList.contains('ncua-floating-notification--neutral')).toBe(false);
+        expect(card.querySelector(SELECTOR.FEATURED_ICON)).toBeNull();
+    });
+    it.todo('RNT-08 floating color info 는 vanilla 와 같게 neutral 클래스와 핀 아이콘으로 렌더한다');
+    it('RNT-11: actions 가 빈 배열이면 버튼 없는 빈 __actions 래퍼를 렌더한다', () => {
+        // 현재 동작 고정 — 결함 후보 #620 (`actions &&` 판정이라 빈 배열도 래퍼를 만듦)
+        // Given/When: actions 를 빈 배열로 렌더하면
+        const wrapper = mustQuery(render({ actions: [] }), SELECTOR.ACTIONS);
+        // Then: 래퍼는 있지만 버튼이 없다
+        expect(wrapper.querySelector('button')).toBeNull();
+    });
+    it.todo('RNT-11 actions 가 빈 배열이면 __actions 래퍼를 렌더하지 않는다');
+});

package/dist/temp/src/components/overlays/notification/__tests__/MessageNotification.test.js

@@ -226,3 +226,13 @@ describe('MessageNotification (React) — 액션 버튼 색상(hierarchy)', () =
         expect(onClick).toHaveBeenCalledTimes(1);
     });
 });
+describe('MessageNotification (React) — 아이콘 폴백', () => {
+    it('RNT-12: 타입 밖 color 로 기본 아이콘 매핑이 비면 핀 아이콘으로 폴백한다', () => {
+        // Given/When: 기본 매개변수가 대체하지 못하는 타입 밖 color 로 렌더하면 (JS 소비자 오입력 재현)
+        const container = renderMessageNotification({ color: 'unknown' });
+        // Then: 아이콘 자리가 비지 않고 Pin02 로 렌더된다
+        const pin = iconPathD(Pin02);
+        expect(pin).not.toBeNull();
+        expect(renderedIconPathD(container)).toBe(pin);
+    });
+});

package/dist/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModalTip.d.ts

@@ -1,8 +1,6 @@
 interface PostcodeSearchModalTipProps {
     className?: string;
 }
-/** Tip 카드 첫 줄 안내 문구 (기획서 TIPS.searchTitle) */
-declare const TIP_TITLE = "\uC544\uB798 \uC870\uD569\uC73C\uB85C \uAC80\uC0C9\uD558\uBA74 \uC6D0\uD558\uB294 \uC8FC\uC18C\uB97C \uB354 \uC27D\uAC8C \uCC3E\uC744 \uC218 \uC788\uC5B4\uC694.";
 /**
  * 검색어 조합을 안내하는 Tip 카드.
  * 결과 목록이 없는 화면(초기·오류·결과 없음)에서만 노출된다.
@@ -12,5 +10,5 @@ declare const Tip: {
     ({ className }: PostcodeSearchModalTipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { Tip, TIP_TITLE };
+export { Tip };
 export type { PostcodeSearchModalTipProps };

package/dist/temp/src/components/overlays/postcode-search-modal/PostcodeSearchModalTip.js

@@ -21,4 +21,4 @@ const Tip = ({ className }) => {
     return (_jsxs("div", { className: classnames('ncua-postcode-search-modal__tip', className), children: [_jsxs("p", { className: "ncua-postcode-search-modal__tip-label", children: [_jsx(AnnotationInfoFill, { className: "ncua-postcode-search-modal__tip-icon", width: TIP_ICON_SIZE, height: TIP_ICON_SIZE }), TIP_LABEL] }), _jsx("p", { className: "ncua-postcode-search-modal__tip-title", children: TIP_TITLE }), _jsx("ul", { className: "ncua-postcode-search-modal__tip-list", children: TIP_ITEMS.map(({ combination, example }) => (_jsxs("li", { className: "ncua-postcode-search-modal__tip-item", children: [_jsx("span", { className: "ncua-postcode-search-modal__tip-combination", children: combination }), _jsx("span", { className: "ncua-postcode-search-modal__tip-example", children: `${TIP_EXAMPLE_PREFIX} ${example}` })] }, combination))) })] }));
 };
 Tip.displayName = 'PostcodeSearchModal.Tip';
-export { Tip, TIP_TITLE };
+export { Tip };

package/dist/temp/src/components/overlays/postcode-search-modal/__tests__/PostcodeSearchModal.viewport.test.d.ts

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