@ncds/ui-admin 1.8.21-alpha.0 → 1.8.21-alpha.10

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

@@ -1,8 +1,10 @@
 // @vitest-environment jsdom
+import { SearchLg } from '@ncds/ui-admin-icon';
 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;
@@ -66,4 +68,230 @@ describe('InputBase — clearText prop DOM 누출', () => {
     expect(view.container.querySelector('.ncua-input__clear')).toBeNull();
     view.unmount();
   });
+});
+describe('InputBase — 아이콘 사이즈', () => {
+  const iconSizeOf = (container, selector) => {
+    const svg = container.querySelector(selector);
+    return {
+      width: svg?.getAttribute('width'),
+      height: svg?.getAttribute('height')
+    };
+  };
+  // 슬롯 아이콘과 상태 아이콘은 같은 크기를 쓴다 — 과거 상태 아이콘만 sm=16으로 어긋나 있었다
+  it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 슬롯 아이콘과 상태 아이콘이 모두 %spx로 렌더된다', (size, expected) => {
+    // Given/When: 슬롯 아이콘과 clear 버튼, destructive 상태를 함께 렌더하면
+    const view = mountInputBase({
+      size,
+      destructive: true,
+      clearText: true,
+      onClearText: vi.fn(),
+      leadingElement: {
+        type: 'icon',
+        icon: SearchLg
+      }
+    });
+    // Then: 슬롯·clear·destructive 아이콘의 크기가 서로 어긋나지 않는다
+    const expectedSize = {
+      width: expected,
+      height: expected
+    };
+    expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual(expectedSize);
+    expect(iconSizeOf(view.container, '.ncua-input__clear-icon')).toEqual(expectedSize);
+    expect(iconSizeOf(view.container, '.ncua-input__destructive-icon')).toEqual(expectedSize);
+    view.unmount();
+  });
+  it.each([['xs', '14'], ['sm', '20']])('size=%s 일 때 validation 아이콘도 %spx로 렌더된다', (size, expected) => {
+    // Given/When: validation 상태로 렌더하면
+    const view = mountInputBase({
+      size,
+      validation: true
+    });
+    // Then: 다른 아이콘과 같은 크기다
+    expect(iconSizeOf(view.container, '.ncua-input__validation-icon')).toEqual({
+      width: expected,
+      height: expected
+    });
+    view.unmount();
+  });
+  it('slot.size를 직접 주면 기본 사이즈보다 우선한다', () => {
+    // Given/When: 슬롯에 size를 명시해 렌더하면
+    const view = mountInputBase({
+      size: 'xs',
+      leadingElement: {
+        type: 'icon',
+        icon: SearchLg,
+        size: 24
+      }
+    });
+    // Then: 기본값(14)이 아니라 명시한 값이 적용된다
+    expect(iconSizeOf(view.container, '.ncua-input__left-icon')).toEqual({
+      width: '24',
+      height: '24'
+    });
+    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');
+    if (!input) throw new Error('input이 렌더되지 않았습니다');
+    act(() => {
+      input.value = text;
+      input.dispatchEvent(new Event('input', {
+        bubbles: true
+      }));
+    });
+  };
+  it('값이 비어 있으면 has-value가 붙지 않는다', () => {
+    // Given/When: 빈 상태로 렌더하면
+    const view = mountInputBase();
+    // Then: 루트에 has-value가 없다
+    expect(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(false);
+    view.unmount();
+  });
+  // props.value 로 판정하면 uncontrolled 에서 영원히 빈 값으로 보인다 — 자물쇠 아이콘 색상이 반영되지 않던 원인
+  it('uncontrolled Input에 입력하면 has-value가 붙는다', () => {
+    // Given: value를 넘기지 않은 uncontrolled 상태에서
+    const view = mountInputBase();
+    // When: 실제로 입력하면
+    typeInto(view.container, 'hello');
+    // Then: has-value가 붙는다
+    expect(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(true);
+    view.unmount();
+  });
+  it('입력값을 지우면 has-value가 떨어진다', () => {
+    // Given: 값이 있는 상태에서
+    const view = mountInputBase();
+    typeInto(view.container, 'hello');
+    // When: 값을 비우면
+    typeInto(view.container, '');
+    // Then: has-value가 사라진다
+    expect(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(false);
+    view.unmount();
+  });
+  it('controlled Input은 value prop만으로도 has-value가 붙는다', () => {
+    // Given/When: value를 직접 넘겨 렌더하면 (input 이벤트 없이)
+    const view = mountInputBase({
+      value: 'preset',
+      onChange: vi.fn()
+    });
+    // Then: has-value가 붙는다
+    expect(view.container.querySelector('.ncua-input')?.classList.contains('has-value')).toBe(true);
+    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/esm/src/components/forms-and-input/password-input/PasswordInput.js

@@ -26,8 +26,9 @@ export const PasswordInput = /*#__PURE__*/forwardRef((_ref, ref) => {
     type: isVisible ? 'text' : 'password',
     leadingElement: {
       type: 'icon',
-      icon: Lock01,
-      color: props.value ? 'gray600' : 'gray300'
+      icon: Lock01
+      // color 를 넘기지 않아 슬롯 아이콘 공통 규칙(상태별 색)을 그대로 따른다.
+      // 여기서 props.value 로 판정하면 uncontrolled Input 에서 영원히 빈 값 취급된다.
     },
     trailingElement: {
       type: 'custom',

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

@@ -0,0 +1,56 @@
+// @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() {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(/*#__PURE__*/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/esm/src/components/index.js

@@ -39,6 +39,7 @@ export * from './image-and-icons/featured-icon';
 export * from './layout/block-container';
 export * from './layout/block-header';
 export * from './layout/divider';
+export * from './layout/ncua-scope';
 export * from './layout/page-title';
 // Navigation
 export * from './navigation/bread-crumb';
@@ -50,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/esm/src/components/layout/ncua-scope/NcuaScope.js

@@ -0,0 +1,73 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { createContext, forwardRef, version as reactVersion, useContext } from 'react';
+import { NCUA_SCOPED_CSS } from '../../../generated/scoped-css';
+// 조상에 NcuaScope 가 이미 있으면 스타일을 다시 심지 않는다 (중첩 대응).
+const NcuaStyleMountedContext = /*#__PURE__*/createContext(false);
+// React 19 는 <style> 에 href·precedence 가 함께 있으면 <head> 로 올리고 href 로 중복을
+// 제거한다. 18 에는 그 기능도, 두 prop 의 타입 정의도 없어 Context 로 중첩만 막고
+// 타입은 우회한다.
+const STYLE_HOISTING_MIN_REACT_MAJOR = 19;
+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 스타일을 이 엘리먼트 하위로 한정하는 경계.
+ *
+ * 다른 디자인 시스템을 전역 적용한 사용처에서 NCUA 컴포넌트를 이걸로 감싼다.
+ * 스타일을 직접 들고 있으므로 **CSS 파일을 따로 import 하지 않는다.**
+ *
+ * ```tsx
+ * import { NcuaScope, Button } from '@ncds/ui-admin';
+ *
+ * <NcuaScope>
+ *   <Button label="신청하기" hierarchy="primary" size="md" />
+ * </NcuaScope>
+ * ```
+ *
+ * `document.body` 로 portal 되는 컴포넌트(Modal · Tooltip · Dropdown · SelectBox ·
+ * Notification)는 이 경계 밖에 놓이지만, 스코프 스타일시트가 그 루트 클래스들을 함께
+ * 지정하므로 토큰을 받는다 (`base/_scope.scss` 의 `$roots`). portal 목적지는 바뀌지
+ * 않으므로 어드민에서의 기존 동작과 같다.
+ *
+ * 어드민처럼 `style.css` 를 전역 적용하는 사용처는 이 컴포넌트가 필요 없다.
+ *
+ * 중첩해서 써도 스타일은 한 번만 들어간다. React 19 에서는 형제로 여러 개를 써도
+ * href 기준으로 중복이 제거된다. React 18 에서는 형제마다 `<style>` 이 하나씩 생기므로,
+ * 스코프가 여러 곳에 필요하면 공통 조상 한 곳에서 감싸는 편이 낫다.
+ */
+export const NcuaScope = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    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,
+      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/esm/src/components/layout/ncua-scope/index.js

@@ -0,0 +1 @@
+export * from './NcuaScope';

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

@@ -19,7 +19,9 @@ export const Pagination = _ref => {
   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/esm/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 그룹 표시
@@ -56,4 +64,70 @@ describe('#332 Pagination — totalPage 축소 시 start 보정', () => {
     expect(nums[0]).toBe(GROUP_START_50_PAGES);
     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/esm/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,
@@ -28,6 +29,7 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     autoClose = 0,
     supportTextLink,
     onHidePermanently,
+    hidePermanentlyLabel = HIDE_PERMANENTLY_LABEL.fullWidth,
     ...rest
   } = _ref;
   const [shouldRemove, setShouldRemove] = useState(false);
@@ -109,7 +111,7 @@ const FullWidthNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
             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"
+            children: hidePermanentlyLabel
           }), onClose && _jsx("button", {
             type: "button",
             className: "ncua-full-width-notification__close-button",

package/dist/esm/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,
@@ -27,18 +26,11 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
     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),
@@ -48,50 +40,18 @@ const MessageNotification = /*#__PURE__*/forwardRef((_ref, ref) => {
       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
-            })
-          })]
+        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']
         })]
       })
     })