@ncds/ui-admin 1.8.21-alpha.1 → 1.8.21-alpha.11

package/dist/temp/src/components/forms-and-input/input-base/__tests__/InputBase.test.js

@@ -4,6 +4,7 @@ import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
 import { act } from 'react-dom/test-utils';
 import { describe, expect, it, vi } from 'vitest';
+import { COLOR } from '../../../../../constant/color';
 import { InputBase } from '../InputBase';
 // React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
@@ -107,6 +108,42 @@ describe('InputBase — 아이콘 사이즈', () => {
         view.unmount();
     });
 });
+describe('InputBase — 슬롯 아이콘 상태 색상', () => {
+    // 상태별 색은 CSS 가 결정한다. jsdom 에서는 스타일시트를 로드하지 않으므로
+    // "상태 규칙을 타는 클래스가 붙었는지" 와 "지정 색이 인라인으로 남았는지" 로 검증한다.
+    const leftIconOf = (container) => container.querySelector('.ncua-input__left-icon');
+    it('color 를 지정하지 않으면 상태 색상 클래스가 붙는다', () => {
+        // Given/When: color 없이 슬롯 아이콘을 렌더하면
+        const view = mountInputBase({ leadingElement: { type: 'icon', icon: SearchLg } });
+        // Then: 상태 규칙을 타는 클래스가 붙고, 인라인 색은 지정되지 않는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(icon?.hasAttribute('color')).toBe(false);
+        view.unmount();
+    });
+    it('color 를 지정하면 상태 색상 클래스가 붙지 않고 지정 색이 유지된다', () => {
+        // Given/When: color 를 지정해 렌더하면
+        const view = mountInputBase({
+            leadingElement: { type: 'icon', icon: SearchLg, color: 'blue500' },
+        });
+        // Then: 상태 규칙에서 제외되고 지정한 색이 그대로 남는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(false);
+        expect(icon?.getAttribute('color')).toBe(COLOR.blue500);
+        view.unmount();
+    });
+    it('slot.className 을 함께 주어도 상태 색상 클래스가 유지된다', () => {
+        // Given/When: className 을 추가로 넘기면
+        const view = mountInputBase({
+            leadingElement: { type: 'icon', icon: SearchLg, className: 'my-icon' },
+        });
+        // Then: 두 클래스가 모두 붙는다
+        const icon = leftIconOf(view.container);
+        expect(icon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(icon?.classList.contains('my-icon')).toBe(true);
+        view.unmount();
+    });
+});
 describe('InputBase — has-value 상태 클래스', () => {
     const typeInto = (container, text) => {
         const input = container.querySelector('input');
@@ -152,3 +189,45 @@ describe('InputBase — has-value 상태 클래스', () => {
         view.unmount();
     });
 });
+describe('InputBase — 텍스트 슬롯', () => {
+    it('leadingElement 텍스트는 leading 클래스와 wrap 클래스가 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            leadingElement: { type: 'text', text: 'https://' },
+        });
+        const text = container.querySelector('.ncua-input__leading-text');
+        expect(text?.textContent).toBe('https://');
+        expect(container.querySelector('.ncua-input__leading-text-wrap')).not.toBeNull();
+        unmount();
+    });
+    it('trailingElement 텍스트는 trailing 클래스와 wrap 클래스가 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        const text = container.querySelector('.ncua-input__trailing-text');
+        expect(text?.textContent).toBe('px');
+        expect(container.querySelector('.ncua-input__trailing-text-wrap')).not.toBeNull();
+        // leading 클래스가 섞이면 모서리·테두리 방향이 반대가 된다
+        expect(container.querySelector('.ncua-input__leading-text')).toBeNull();
+        unmount();
+    });
+    it('trailingElement 텍스트는 입력 필드 뒤에 온다', () => {
+        const { container, unmount } = mountInputBase({
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        const content = container.querySelector('.ncua-input__content');
+        const children = Array.from(content?.children ?? []);
+        const fieldIndex = children.findIndex((el) => el.classList.contains('ncua-input__field'));
+        const textIndex = children.findIndex((el) => el.classList.contains('ncua-input__trailing-text'));
+        expect(fieldIndex).toBeGreaterThanOrEqual(0);
+        expect(textIndex).toBeGreaterThan(fieldIndex);
+        unmount();
+    });
+    it('사이즈 modifier 가 함께 붙는다', () => {
+        const { container, unmount } = mountInputBase({
+            size: 'sm',
+            trailingElement: { type: 'text', text: 'px' },
+        });
+        expect(container.querySelector('.ncua-input__trailing-text--sm')).not.toBeNull();
+        unmount();
+    });
+});

package/dist/temp/src/components/forms-and-input/password-input/PasswordInput.js

@@ -19,8 +19,8 @@ export const PasswordInput = forwardRef(({ size = 'xs', ...props }, ref) => {
     return (_jsx(InputBase, { ref: ref, size: size, type: isVisible ? 'text' : 'password', leadingElement: {
             type: 'icon',
             icon: Lock01,
-            // 색은 CSS가 결정한다 — 여기서 props.value로 판정하면 uncontrolled Input에서 영원히 빈 값 취급된다
-            className: 'ncua-input__password-lock-icon',
+            // color 를 넘기지 않아 슬롯 아이콘 공통 규칙(상태별 색)을 그대로 따른다.
+            // 여기서 props.value 로 판정하면 uncontrolled Input 에서 영원히 빈 값 취급된다.
         }, trailingElement: {
             type: 'custom',
             placement: 'inside',

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.d.ts

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

package/dist/temp/src/components/forms-and-input/password-input/__tests__/PasswordInput.test.js

@@ -0,0 +1,48 @@
+// @vitest-environment jsdom
+import { createElement } from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import { PasswordInput } from '../PasswordInput';
+// React 18에서 act() 사용 시 필요한 플래그 (미설정 시 console.error 경고 발생)
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+function mountPasswordInput(props = {}) {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(createElement(PasswordInput, props));
+    });
+    const unmount = () => {
+        act(() => {
+            root.unmount();
+        });
+        container.remove();
+    };
+    return { container, unmount };
+}
+describe('PasswordInput — 자물쇠 아이콘 색상', () => {
+    // 자물쇠 색은 CSS 가 결정한다. 인라인 color 를 넘기면 상태 규칙이 무시되므로,
+    // "인라인 색이 없고 슬롯 아이콘 공통 클래스를 탄다" 는 것이 색상 반영의 전제다.
+    it('자물쇠에 인라인 색을 넘기지 않고 슬롯 아이콘 공통 클래스를 탄다', () => {
+        // Given/When: 기본 상태로 렌더하면
+        const view = mountPasswordInput();
+        // Then: 상태 규칙을 타는 클래스가 붙고 인라인 색은 없다
+        const lockIcon = view.container.querySelector('.ncua-input__left-icon');
+        expect(lockIcon).not.toBeNull();
+        expect(lockIcon?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        expect(lockIcon?.hasAttribute('color')).toBe(false);
+        view.unmount();
+    });
+    // 값이 있는 채로 비활성화되면 has-value 가 살아 있어 자물쇠가 진하게 남던 문제
+    it('값이 있는 채로 disabled 여도 자물쇠가 상태 규칙 대상으로 남는다', () => {
+        // Given/When: 값이 있는 비활성화 상태로 렌더하면
+        const view = mountPasswordInput({ value: 'secret', disabled: true, onChange: vi.fn() });
+        // Then: 루트에 is-disabled 와 has-value 가 함께 붙고, 자물쇠는 공통 클래스를 유지한다
+        const root = view.container.querySelector('.ncua-input');
+        expect(root?.classList.contains('is-disabled')).toBe(true);
+        expect(root?.classList.contains('has-value')).toBe(true);
+        expect(view.container.querySelector('.ncua-input__left-icon')?.classList.contains('ncua-input__slot-icon')).toBe(true);
+        view.unmount();
+    });
+});

package/dist/temp/src/components/index.d.ts

@@ -44,6 +44,7 @@ export * from './navigation/vertical-tab';
 export * from './overlays/dropdown';
 export * from './overlays/modal';
 export * from './overlays/notification';
+export * from './overlays/postcode-search-modal';
 export * from './overlays/tooltip';
 export * from './select-dropdown';
 export * from './shared';

package/dist/temp/src/components/index.js

@@ -51,6 +51,7 @@ export * from './navigation/vertical-tab';
 export * from './overlays/dropdown';
 export * from './overlays/modal';
 export * from './overlays/notification';
+export * from './overlays/postcode-search-modal';
 export * from './overlays/tooltip';
 // Shared
 export * from './select-dropdown';

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

@@ -13,6 +13,10 @@ const DECIMAL_RADIX = 10;
 const SUPPORTS_STYLE_HOISTING = Number.parseInt(reactVersion, DECIMAL_RADIX) >= STYLE_HOISTING_MIN_REACT_MAJOR;
 const STYLE_KEY = 'ncua-scoped';
 const STYLE_HOISTING_PROPS = { href: STYLE_KEY, precedence: 'default' };
+// SSR 은 <style> 의 자식 텍스트를 HTML 이스케이프하지만(' -> &#x27;), 브라우저는 <style>
+// 안을 raw text 로 읽어 되돌리지 않는다. 그러면 CSS 가 깨지고 하이드레이션도 불일치한다.
+// innerHTML 로 넣으면 서버가 원문 그대로 내보낸다.
+const STYLE_CONTENT = { __html: NCUA_SCOPED_CSS };
 /**
  * NCUA 스타일을 이 엘리먼트 하위로 한정하는 경계.
  *
@@ -42,6 +46,6 @@ export const NcuaScope = forwardRef(({ className, children }, ref) => {
     const styleAlreadyMounted = useContext(NcuaStyleMountedContext);
     const shouldRenderStyle = SUPPORTS_STYLE_HOISTING || !styleAlreadyMounted;
     return (_jsxs(NcuaStyleMountedContext.Provider, { value: true, children: [shouldRenderStyle &&
-                (SUPPORTS_STYLE_HOISTING ? (_jsx("style", { ...STYLE_HOISTING_PROPS, children: NCUA_SCOPED_CSS })) : (_jsx("style", { "data-ncua-scope": STYLE_KEY, children: NCUA_SCOPED_CSS }))), _jsx("div", { ref: ref, className: classnames('ncua-scope', className), children: children })] }));
+                (SUPPORTS_STYLE_HOISTING ? (_jsx("style", { ...STYLE_HOISTING_PROPS, dangerouslySetInnerHTML: STYLE_CONTENT })) : (_jsx("style", { "data-ncua-scope": STYLE_KEY, dangerouslySetInnerHTML: STYLE_CONTENT }))), _jsx("div", { ref: ref, className: classnames('ncua-scope', className), children: children })] }));
 });
 NcuaScope.displayName = 'NcuaScope';

package/dist/temp/src/components/navigation/pagination/Pagination.js

@@ -9,7 +9,9 @@ export const Pagination = ({ className = '', totalCount, itemCountPerPage = 10,
     const [start, setStart] = useState(1);
     const noPrev = breakPoint === 'mo' ? currentPage === 1 : start === 1;
     const noNext = breakPoint === 'mo' ? currentPage >= totalPage : start + pageCount - 1 >= totalPage;
-    const showJumpPageButton = totalPage > pageCount;
+    // mo 는 CSS 가 페이지 번호 목록과 first/last 를 숨겨 prev/next 만 남는다.
+    // pc 기준(totalPage > pageCount)을 그대로 쓰면 페이지가 적을 때 이동 수단이 하나도 없다.
+    const showJumpPageButton = breakPoint === 'mo' ? totalPage > 1 : totalPage > pageCount;
     const handleClickButton = (pageNum) => {
         if (isFunction(onPageChange)) {
             onPageChange(pageNum);

package/dist/temp/src/components/navigation/pagination/__tests__/Pagination.test.js

@@ -12,6 +12,12 @@ const CURRENT_PAGE = 91; // 100페이지 기준 마지막 그룹(91~100)을 보
 const GROUP_START_100_PAGES = 91; // currentPage=91 일 때의 그룹 시작
 const GROUP_START_50_PAGES = 41; // totalPage=50 으로 줄었을 때의 마지막 그룹 시작
 const LAST_PAGE_50 = 50;
+/** 페이지 그룹 크기(10) 이하로 나뉘는 건수 — 3페이지 */
+const TOTAL_COUNT_3_PAGES = 30;
+/** TOTAL_COUNT_3_PAGES 기준 총 페이지 수 = 마지막 페이지 번호 */
+const LAST_PAGE_3 = 3;
+/** 페이지가 하나뿐인 건수 */
+const TOTAL_COUNT_1_PAGE = 8;
 let root = null;
 let container = null;
 function render(props) {
@@ -34,6 +40,8 @@ afterEach(() => {
     container = null;
 });
 const pageNums = (el) => Array.from(el.querySelectorAll('.ncua-pagination__page-num')).map((b) => Number(b.textContent));
+const prevOf = (el) => el.querySelector('.ncua-pagination__before');
+const nextOf = (el) => el.querySelector('.ncua-pagination__next');
 describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
     it('totalPage 가 줄면 start 를 마지막 그룹으로 보정하고 범위 밖 페이지 버튼을 표시하지 않는다', () => {
         // 1) 100 페이지에서 91 페이지 보는 중 → 91~100 그룹 표시
@@ -57,3 +65,69 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
         expect(Math.max(...nums)).toBeLessThanOrEqual(LAST_PAGE_50);
     });
 });
+describe('Pagination — mo 모드 이전/다음 버튼 노출', () => {
+    it('페이지가 그룹 크기 이하여도 mo 에서는 이전·다음 버튼이 노출된다', () => {
+        // Given/When: 3페이지(그룹 크기 10 이하) 분량을 mo 로 렌더하면
+        const el = render({
+            totalCount: TOTAL_COUNT_3_PAGES,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: 1,
+            breakPoint: 'mo',
+        });
+        // Then: mo 는 페이지 번호 목록이 CSS 로 숨겨지므로 이전·다음 버튼이 있어야 이동할 수 있다
+        expect(prevOf(el)).not.toBeNull();
+        expect(nextOf(el)).not.toBeNull();
+    });
+    it('첫 페이지에서는 이전 버튼이, 마지막 페이지에서는 다음 버튼이 비활성이다', () => {
+        // Given/When: 3페이지 중 첫 페이지를 mo 로 렌더하면
+        const first = render({
+            totalCount: TOTAL_COUNT_3_PAGES,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: 1,
+            breakPoint: 'mo',
+        });
+        // Then: 이전만 막히고 다음은 누를 수 있다
+        expect(prevOf(first)?.disabled).toBe(true);
+        expect(nextOf(first)?.disabled).toBe(false);
+        // When: 마지막 페이지로 이동하면
+        const last = render({
+            totalCount: TOTAL_COUNT_3_PAGES,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: LAST_PAGE_3,
+            breakPoint: 'mo',
+        });
+        // Then: 반대로 다음이 막힌다
+        expect(prevOf(last)?.disabled).toBe(false);
+        expect(nextOf(last)?.disabled).toBe(true);
+    });
+    it('페이지가 하나뿐이면 mo 에서도 이전·다음 버튼을 내보내지 않는다', () => {
+        // Given/When: 1페이지 분량을 mo 로 렌더하면
+        const el = render({
+            totalCount: TOTAL_COUNT_1_PAGE,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: 1,
+            breakPoint: 'mo',
+        });
+        // Then: 이동할 곳이 없으므로 버튼도 없다
+        expect(prevOf(el)).toBeNull();
+        expect(nextOf(el)).toBeNull();
+    });
+    it('pc 는 기존대로 페이지 그룹을 넘길 때만 점프 버튼을 노출한다', () => {
+        // Given/When: 3페이지 분량을 pc 로 렌더하면
+        const el = render({
+            totalCount: TOTAL_COUNT_3_PAGES,
+            itemCountPerPage: ITEM_COUNT_PER_PAGE,
+            pageCount: PAGE_GROUP_SIZE,
+            currentPage: 1,
+            breakPoint: 'pc',
+        });
+        // Then: 페이지 번호로 직접 이동하므로 점프 버튼은 나오지 않는다
+        expect(prevOf(el)).toBeNull();
+        expect(nextOf(el)).toBeNull();
+        expect(pageNums(el)).toHaveLength(LAST_PAGE_3);
+    });
+});

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

@@ -40,6 +40,12 @@ interface FullWidthNotificationProps extends Omit<ComponentPropsWithoutRef<'div'
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const FullWidthNotification: import("react").ForwardRefExoticComponent<FullWidthNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { FullWidthNotificationProps };

package/dist/temp/src/components/overlays/notification/FullWidthNotification.js

@@ -3,6 +3,7 @@ import { AlertTriangle, CheckCircle, InfoCircle, MessageChatSquare, XClose } fro
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { COLOR } from '../../../../constant/color';
+import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
 const iconMap = {
     neutral: MessageChatSquare,
     error: AlertTriangle,
@@ -17,7 +18,7 @@ const iconColorMap = {
     success: 'green600',
     info: 'violet600',
 };
-const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, ...rest }, ref) => {
+const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neutral', onClose, className, actions, autoClose = 0, supportTextLink, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth, ...rest }, ref) => {
     const [shouldRemove, setShouldRemove] = useState(false);
     const closeIconSize = {
         width: 20,
@@ -51,6 +52,6 @@ const FullWidthNotification = forwardRef(({ title, supportingText, color = 'neut
     return (_jsx("div", { ref: ref, className: classNames('ncua-full-width-notification', `ncua-full-width-notification--${color}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-full-width-notification__container", children: _jsxs("div", { className: "ncua-full-width-notification__content", children: [_jsxs("div", { className: "ncua-full-width-notification__content-wrapper", children: [(() => {
                                 const IconComponent = iconMap[color];
                                 return (_jsx(IconComponent, { width: 16, height: 16, color: COLOR[iconColorMap[color]], className: "ncua-full-width-notification__icon" }));
-                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", children: actions.map((action) => (_jsx("button", { onClick: action.onClick, className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`), children: action.label }, `${action.label}-${action.hierarchy}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: "\uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
+                            })(), _jsxs("div", { className: "ncua-full-width-notification__text-container", children: [_jsx("span", { className: "ncua-full-width-notification__title", children: title }), !supportTextLink && supportingText && (_jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText })), supportTextLink && supportingText && (_jsx("a", { href: supportTextLink, className: "ncua-full-width-notification__link", children: _jsx("span", { className: "ncua-full-width-notification__supporting-text", children: supportingText }) }))] })] }), _jsxs("div", { className: "ncua-full-width-notification__actions-container", children: [actions && (_jsx("div", { className: "ncua-full-width-notification__actions", children: actions.map((action) => (_jsx("button", { onClick: action.onClick, className: classNames('ncua-notification__action-button', `ncua-notification__action-button--${action.hierarchy || 'text'}`), children: action.label }, `${action.label}-${action.hierarchy}`))) })), onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--text', 'ncua-full-width-notification__link'), onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-full-width-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { ...closeIconSize, color: COLOR[iconColorMap[color]] }) }))] })] }) }) }));
 });
 export { FullWidthNotification };

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

@@ -35,6 +35,12 @@ interface MessageNotificationProps extends Omit<ComponentPropsWithoutRef<'div'>,
      * 다시보지 않기 이벤트 핸들러 (선택사항)
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * `onHidePermanently`를 지정했을 때만 렌더된다.
+     * @default '다시 보지 않기'
+     */
+    hidePermanentlyLabel?: ReactNode;
 }
 declare const MessageNotification: import("react").ForwardRefExoticComponent<MessageNotificationProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { MessageNotificationProps };

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

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AlertCircle, AlertTriangle, CheckCircle, Pin02, XClose } from '@ncds/ui-admin-icon';
+import { AlertCircle, AlertTriangle, CheckCircle, Pin02 } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { COLOR } from '../../../../constant/color';
-import { Button } from '../../action/button';
-import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
+import { MessageNotificationActions, MessageNotificationContent } from './MessageNotificationParts';
 const iconMap = {
     neutral: Pin02,
     error: AlertTriangle,
@@ -17,18 +16,10 @@ const iconColorMap = {
     warning: 'orange500',
     success: 'green600',
 };
-const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, ...rest }, ref) => {
+const MessageNotification = forwardRef(({ title, supportingText, icon: Icon, color = 'neutral', onClose, className, actions, onHidePermanently, hidePermanentlyLabel, ...rest }, ref) => {
     // message 타입은 neutral, error, warning, success 4가지 색상만 지원
     const validColor = color === 'info' ? 'neutral' : color;
-    const iconColor = validColor;
-    const featuredIconProps = {
-        icon: Icon || iconMap[validColor] || Pin02,
-        size: 'lg',
-        color: iconColor,
-        theme: 'light-circle',
-    };
-    const closeIconColor = COLOR[iconColorMap[validColor] || 'gray700'];
-    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsxs("div", { className: "ncua-message-notification__content-wrapper", children: [iconMap[validColor] && (_jsx(FeaturedIcon, { ...featuredIconProps, className: "ncua-message-notification__icon" })), _jsxs("div", { className: "ncua-message-notification__text-container", children: [_jsx("span", { className: "ncua-message-notification__title", children: title }), supportingText && _jsx("span", { className: "ncua-message-notification__supporting-text", children: supportingText })] })] }), _jsx("div", { className: "ncua-message-notification__actions-container", children: actions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })) }), _jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: classNames('ncua-notification__action-button', 'ncua-notification__action-button--link', 'ncua-message-notification__hide-link'), onClick: onHidePermanently, children: "\uB2E4\uC2DC \uBCF4\uC9C0 \uC54A\uAE30" })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] })] }) }) }));
+    return (_jsx("div", { ref: ref, className: classNames('ncua-message-notification', `ncua-message-notification--${validColor}`, className), role: "alert", ...rest, children: _jsx("div", { className: "ncua-message-notification__container", children: _jsxs("div", { className: "ncua-message-notification__content", children: [_jsx(MessageNotificationContent, { title: title, supportingText: supportingText, icon: Icon || iconMap[validColor], iconColor: validColor, showIcon: Boolean(iconMap[validColor]) }), _jsx(MessageNotificationActions, { actions: actions, onClose: onClose, onHidePermanently: onHidePermanently, hidePermanentlyLabel: hidePermanentlyLabel, closeIconColor: COLOR[iconColorMap[validColor] || 'gray700'] })] }) }) }));
 });
 MessageNotification.displayName = 'MessageNotification';
 export { MessageNotification };

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+import { type FeaturedIconColor } from '../../image-and-icons/featured-icon/FeaturedIcon';
+import type { NotificationAction } from './Notification';
+interface MessageNotificationContentProps {
+    title: ReactNode;
+    supportingText?: ReactNode;
+    icon?: SlotIconComponent;
+    iconColor: FeaturedIconColor;
+    showIcon: boolean;
+}
+/** 아이콘 + 제목/서포팅 텍스트 영역. */
+declare const MessageNotificationContent: ({ title, supportingText, icon, iconColor, showIcon, }: MessageNotificationContentProps) => import("react/jsx-runtime").JSX.Element;
+interface MessageNotificationActionsProps {
+    actions?: NotificationAction[];
+    onClose?: () => void;
+    onHidePermanently?: () => void;
+    hidePermanentlyLabel?: ReactNode;
+    closeIconColor: string;
+}
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+declare const MessageNotificationActions: ({ actions, onClose, 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/MessageNotificationParts.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pin02, XClose } from '@ncds/ui-admin-icon';
+import { HIDE_PERMANENTLY_LABEL } from '../../../../constant/notification';
+import { Button } from '../../action/button';
+import { FeaturedIcon, } from '../../image-and-icons/featured-icon/FeaturedIcon';
+/** 아이콘 + 제목/서포팅 텍스트 영역. */
+const MessageNotificationContent = ({ title, supportingText, icon, iconColor, showIcon, }) => {
+    const featuredIconProps = {
+        icon: icon || Pin02,
+        size: 'md',
+        color: iconColor,
+        theme: 'light-circle',
+    };
+    return (_jsxs("div", { className: "ncua-message-notification__content-wrapper", children: [showIcon && _jsx(FeaturedIcon, { ...featuredIconProps, className: "ncua-message-notification__icon" }), _jsxs("div", { className: "ncua-message-notification__text-container", children: [_jsx("span", { className: "ncua-message-notification__title", children: title }), supportingText && _jsx("span", { className: "ncua-message-notification__supporting-text", children: supportingText })] })] }));
+};
+/**
+ * 액션 버튼 그룹 + 닫기 그룹을 감싸는 우측 영역.
+ * 이 컨테이너의 gap(12px)이 두 그룹 사이 간격을 만든다.
+ * 표시할 요소가 하나도 없으면 빈 컨테이너를 남기지 않는다.
+ */
+const MessageNotificationActions = ({ actions, onClose, onHidePermanently, hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.message, closeIconColor, }) => {
+    const hasActions = Boolean(actions?.length);
+    const hasFooter = Boolean(onHidePermanently || onClose);
+    if (!hasActions && !hasFooter)
+        return null;
+    return (_jsxs("div", { className: "ncua-message-notification__actions-container", children: [hasActions && (_jsx("div", { className: "ncua-message-notification__actions", children: actions?.map((action) => (_jsx(Button, { size: "xs", hierarchy: action.hierarchy || 'text', label: action.label, onClick: action?.onClick }, `${action.label}-${action.hierarchy}`))) })), hasFooter && (_jsxs("div", { className: "ncua-message-notification__footer-container", children: [onHidePermanently && (_jsx("button", { type: "button", className: "ncua-notification__action-button ncua-message-notification__hide-link", onClick: onHidePermanently, children: hidePermanentlyLabel })), onClose && (_jsx("button", { type: "button", className: "ncua-message-notification__close-button", onClick: onClose, "aria-label": "\uC54C\uB9BC \uB2EB\uAE30", children: _jsx(XClose, { width: 20, height: 20, color: closeIconColor }) }))] }))] }));
+};
+export { MessageNotificationActions, MessageNotificationContent };

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

@@ -16,9 +16,10 @@ interface NotificationAction {
      */
     onClick?: () => void;
     /**
-     * 액션 버튼 색상 (3가지만 지원)
+     * 액션 버튼 색상. `ButtonTheme` 중 알림에서 허용하는 4가지만 지원한다.
+     * @default 'text'
      */
-    hierarchy?: Extract<ButtonTheme, 'text' | 'text-gray'>;
+    hierarchy?: Extract<ButtonTheme, 'secondary' | 'secondary-gray' | 'text' | 'text-gray'>;
 }
 interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
     /**
@@ -67,6 +68,14 @@ interface NotificationProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title
      * message, full-width 타입에서 사용 가능
      */
     onHidePermanently?: () => void;
+    /**
+     * 다시보지 않기 버튼의 라벨 (선택사항)
+     * message, full-width 타입에서 사용 가능하며 `onHidePermanently`를 지정했을 때만 렌더된다.
+     *
+     * 기본값은 타입별로 다르다 — message는 `'다시 보지 않기'`, full-width는 `'다시보지 않기'`.
+     * 표기가 통일되어 있지 않은 것은 현행 유지이며, 통일은 별도 결정 사항이다.
+     */
+    hidePermanentlyLabel?: ReactNode;
     /**
      * Portal 마운트 여부. `floating` 타입에서만 동작한다.
      *

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

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