@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/esm/assets/scripts/notification/Notification.js

@@ -0,0 +1,113 @@
+import { FloatingNotification } from './FloatingNotification';
+import { FullWidthNotification } from './FullWidthNotification';
+import { MessageNotification } from './MessageNotification';
+import { mountFloatingNotificationHost } from './positionSync';
+// 통합 Notification 클래스 (글로벌 Web Notifications API와의 식별자 충돌을 피하기 위해 NcuaNotification 으로 명명)
+export class NcuaNotification {
+  constructor(options) {
+    const {
+      type = 'floating',
+      ...baseOptions
+    } = options;
+    this.resolvedType = type;
+    if (type === 'message') {
+      this.instance = new MessageNotification(baseOptions);
+    } else if (type === 'full-width') {
+      this.instance = new FullWidthNotification(baseOptions);
+    } else {
+      this.instance = new FloatingNotification(baseOptions);
+    }
+  }
+  // 모든 메서드를 instance에 위임
+  getElement() {
+    return this.instance.getElement();
+  }
+  appendTo(parent) {
+    return this.instance.appendTo(parent);
+  }
+  remove() {
+    return this.instance.remove();
+  }
+  destroy() {
+    return this.instance.destroy();
+  }
+  show(parent) {
+    // 사용자가 부모를 명시한 경우 기존 동작 유지 (legacy 호환).
+    if (parent) {
+      this.instance.appendTo(parent);
+      return;
+    }
+    // §5.1 — floating 은 자동으로 우측 상단 호스트에 append.
+    // 시각적으로는 최신 토스트가 상단에 노출되고, 이전 토스트들은 그 아래로 12px 씩 겹쳐 쌓인다
+    // (LIFO, §5.4 "최신 상단" 준수. godomall5 등 기존 admin wrapper 와 동일 정책.
+    // 겹침 너비는 --ncua-floating-notification-stack-overlap CSS 변수로 오버라이드 가능).
+    //
+    // SSR 가드는 mountFloatingNotificationHost 내부의 isBrowserEnv() 로 위임 — null 이면
+    // 토스트가 표시될 환경이 아니라는 의미이므로 silently return 한다 (document.body 에 append
+    // 시도하는 fallthrough 는 SSR 에서 ReferenceError 를 일으키므로 금지).
+    if (this.resolvedType === 'floating') {
+      const host = mountFloatingNotificationHost();
+      if (host) {
+        this.instance.appendTo(host);
+      }
+      return;
+    }
+    // full-width / message는 기존대로 body에 append.
+    this.instance.appendTo(document.body);
+  }
+  // Static factory methods
+  static create(options) {
+    return new NcuaNotification(options);
+  }
+  // Convenience method for creating notifications with specific color
+  static createWithColor(color, title, supportingText, options) {
+    const autoCloseMap = {
+      success: 3000,
+      error: 5000,
+      warning: 3000,
+      info: 3000,
+      neutral: 0
+    };
+    return new NcuaNotification({
+      title,
+      supportingText,
+      color,
+      type: 'floating',
+      autoClose: autoCloseMap[color],
+      ...options
+    });
+  }
+  // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
+  static success(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('success', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static error(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('error', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static warning(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('warning', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static info(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('info', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  static neutral(title, supportingText, options) {
+    const notification = NcuaNotification.createWithColor('neutral', title, supportingText, options);
+    notification.show();
+    return notification;
+  }
+  // showFullWidth method for backward compatibility
+  static showFullWidth(options) {
+    return new NcuaNotification({
+      ...options,
+      type: 'full-width'
+    });
+  }
+}

package/dist/esm/assets/scripts/notification/const/classNames.js

@@ -0,0 +1,44 @@
+// CSS class names
+export const CLASS_NAMES = {
+  FULL_WIDTH: {
+    BASE: 'ncua-full-width-notification',
+    CONTAINER: 'ncua-full-width-notification__container',
+    CONTENT: 'ncua-full-width-notification__content',
+    CONTENT_WRAPPER: 'ncua-full-width-notification__content-wrapper',
+    ICON: 'ncua-full-width-notification__icon',
+    TEXT_CONTAINER: 'ncua-full-width-notification__text-container',
+    TITLE: 'ncua-full-width-notification__title',
+    SUPPORTING_TEXT: 'ncua-full-width-notification__supporting-text',
+    ACTIONS_CONTAINER: 'ncua-full-width-notification__actions-container',
+    ACTIONS: 'ncua-full-width-notification__actions',
+    CLOSE_BUTTON: 'ncua-full-width-notification__close-button'
+  },
+  FLOATING: {
+    BASE: 'ncua-floating-notification',
+    CONTAINER: 'ncua-floating-notification__container',
+    CONTENT: 'ncua-floating-notification__content',
+    TEXT_CONTAINER: 'ncua-floating-notification__text-container',
+    TITLE_WRAPPER: 'ncua-floating-notification__title-wrapper',
+    TITLE: 'ncua-floating-notification__title',
+    SUPPORTING_TEXT: 'ncua-floating-notification__supporting-text',
+    ACTIONS: 'ncua-floating-notification__actions',
+    CLOSE_BUTTON: 'ncua-floating-notification__close-button'
+  },
+  MESSAGE: {
+    BASE: 'ncua-message-notification',
+    CONTAINER: 'ncua-message-notification__container',
+    CONTENT: 'ncua-message-notification__content',
+    CONTENT_WRAPPER: 'ncua-message-notification__content-wrapper',
+    ICON: 'ncua-message-notification__icon',
+    TEXT_CONTAINER: 'ncua-message-notification__text-container',
+    TITLE: 'ncua-message-notification__title',
+    SUPPORTING_TEXT: 'ncua-message-notification__supporting-text',
+    ACTIONS_CONTAINER: 'ncua-message-notification__actions-container',
+    ACTIONS: 'ncua-message-notification__actions',
+    HIDE_LINK: 'ncua-message-notification__hide-link',
+    CLOSE_BUTTON: 'ncua-message-notification__close-button'
+  },
+  COMMON: {
+    ACTION_BUTTON: 'ncua-notification__action-button'
+  }
+};

package/dist/esm/assets/scripts/notification/const/icons.js

@@ -0,0 +1,25 @@
+// SVG 아이콘들 (크기는 동적으로 설정)
+export const SVG_ICONS = {
+  'pin-02': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.377 15.616 2.72 21.273m8.974-14.631-1.56 1.56a2 2 0 0 1-.264.242 1 1 0 0 1-.207.111c-.082.032-.17.05-.347.085l-3.665.733c-.952.19-1.428.286-1.65.537a1 1 0 0 0-.243.8c.046.333.39.677 1.076 1.363l7.086 7.086c.686.687 1.03 1.03 1.362 1.076a1 1 0 0 0 .801-.242c.251-.223.346-.7.537-1.651l.733-3.665c.035-.176.053-.265.085-.347a1 1 0 0 1 .11-.207c.051-.072.115-.136.242-.263l1.561-1.561c.082-.082.122-.122.167-.158q.06-.047.126-.085c.05-.029.103-.051.208-.097l2.495-1.069c.727-.312 1.091-.467 1.256-.72a1 1 0 0 0 .144-.747c-.06-.295-.34-.575-.9-1.135l-5.142-5.143c-.56-.56-.84-.84-1.135-.9a1 1 0 0 0-.748.145c-.252.165-.407.529-.72 1.256l-1.068 2.495a2 2 0 0 1-.097.208 1 1 0 0 1-.085.126 2 2 0 0 1-.158.167"></path></svg>`,
+  'alert-triangle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v4m0 4h.01M10.615 3.892 2.39 18.098c-.456.788-.684 1.182-.65 1.506a1 1 0 0 0 .406.705c.263.191.718.191 1.629.191h16.45c.91 0 1.365 0 1.628-.191a1 1 0 0 0 .407-.705c.034-.324-.195-.718-.65-1.506L13.383 3.892c-.454-.785-.681-1.178-.978-1.31a1 1 0 0 0-.812 0c-.297.132-.524.525-.979 1.31"></path></svg>`,
+  'alert-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'check-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'info-circle': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#5720B7" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-4m0-4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10"></path></svg>`,
+  'message-chat-square': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none" color="#0C111D" class="ncua-full-width-notification__icon"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10 15-3.075 3.114c-.43.434-.644.651-.828.666a.5.5 0 0 1-.421-.172c-.12-.14-.12-.446-.12-1.056v-1.56c0-.548-.449-.944-.99-1.024v0a3 3 0 0 1-2.534-2.533C2 12.219 2 11.96 2 11.445V6.8c0-1.68 0-2.52.327-3.162a3 3 0 0 1 1.311-1.311C4.28 2 5.12 2 6.8 2h7.4c1.68 0 2.52 0 3.162.327a3 3 0 0 1 1.311 1.311C19 4.28 19 5.12 19 6.8V11m0 11-2.176-1.513c-.306-.213-.46-.32-.626-.395a2 2 0 0 0-.462-.145c-.18-.033-.367-.033-.74-.033H13.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C10 18.394 10 17.834 10 16.714V14.2c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.874C11.52 11 12.08 11 13.2 11h5.6c1.12 0 1.68 0 2.108.218a2 2 0 0 1 .874.874C22 12.52 22 13.08 22 14.2v2.714c0 .932 0 1.398-.152 1.766a2 2 0 0 1-1.083 1.082c-.367.152-.833.152-1.765.152z"></path></svg>`,
+  'x-close': size => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12"></path></svg>`
+};
+export const FLOATING_ICON_MAP = {
+  neutral: SVG_ICONS['pin-02'],
+  error: SVG_ICONS['alert-triangle'],
+  warning: SVG_ICONS['alert-circle'],
+  success: SVG_ICONS['check-circle']
+  // info는 floating에서는 지원하지 않음
+};
+export const FULL_WIDTH_ICON_MAP = {
+  neutral: SVG_ICONS['message-chat-square'],
+  error: SVG_ICONS['alert-triangle'],
+  warning: SVG_ICONS['alert-triangle'],
+  success: SVG_ICONS['check-circle'],
+  info: SVG_ICONS['info-circle']
+};
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;

package/dist/esm/assets/scripts/notification/const/index.js

@@ -0,0 +1,4 @@
+export { SVG_ICONS, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP } from './icons';
+export { CLASS_NAMES } from './classNames';
+export { FEATURED_ICON_SIZES, ICON_PIXEL_SIZES, CLOSE_BUTTON_SIZES, CLOSE_BUTTON_SVG_SIZES, FULL_WIDTH_SIZES, MESSAGE_SIZES, getSizes } from './sizes';
+export { MESSAGE_CLOSE_ICON_COLORS } from './types';

package/dist/esm/assets/scripts/notification/const/sizes.js

@@ -0,0 +1,40 @@
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+export const FEATURED_ICON_SIZES = {
+  MOBILE: 'md',
+  DESKTOP: 'sm'
+};
+// SVG 아이콘 픽셀 사이즈
+export const ICON_PIXEL_SIZES = {
+  MOBILE: '20',
+  DESKTOP: '16',
+  FULL_WIDTH: '16' // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+export const CLOSE_BUTTON_SIZES = {
+  MOBILE: 'sm',
+  DESKTOP: 'xs'
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+export const CLOSE_BUTTON_SVG_SIZES = {
+  xs: 16,
+  sm: 20
+};
+// Full-width 알림 고정 사이즈
+export const FULL_WIDTH_SIZES = {
+  ICON: '16',
+  CLOSE_BUTTON: '20'
+};
+// Message 알림 고정 사이즈
+export const MESSAGE_SIZES = {
+  FEATURED_ICON: 'lg',
+  ICON_PIXEL: '24',
+  CLOSE_BUTTON: '20'
+};
+// 사이즈 유틸리티 함수들
+export const getSizes = {
+  featuredIcon: isMobile => isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP,
+  iconPixel: isMobile => isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP,
+  closeButton: isMobile => isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP,
+  closeButtonSvg: size => CLOSE_BUTTON_SVG_SIZES[size]
+};

package/dist/esm/assets/scripts/notification/const/types.js

@@ -0,0 +1,8 @@
+// Message Notification 닫기 버튼 아이콘 색상 맵
+export const MESSAGE_CLOSE_ICON_COLORS = {
+  neutral: '#6B7280',
+  error: '#EF4444',
+  warning: '#F97316',
+  success: '#16A34A',
+  info: '#6B7280' // info는 message 타입에서 지원하지 않지만 fallback용
+};

package/dist/esm/assets/scripts/notification/index.js

@@ -0,0 +1,10 @@
+export { CLASS_NAMES, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP, ICON_MAP, SVG_ICONS } from './const';
+export { FloatingNotification } from './FloatingNotification';
+export { FullWidthNotification } from './FullWidthNotification';
+export { MessageNotification } from './MessageNotification';
+export { NcuaNotification as Notification } from './Notification';
+// DES-SPEC-027 §5.1 — Floating notification 호스트 + 위치 동기화 (vanilla/React 공유 진입점).
+// mountFloatingNotificationHost 가 자동으로 startPositionSync 를 호출하므로 일반 사용자는
+// start/stop/syncNow 를 직접 부를 일이 없다 — HMR/SSR/테스트 정리용으로만 노출.
+export { mountFloatingNotificationHost, startPositionSync, stopPositionSync, syncNow } from './positionSync';
+export * from './utils';

package/dist/esm/assets/scripts/notification/positionSync.js

@@ -0,0 +1,171 @@
+/**
+ * Floating Notification 호스트 싱글톤 + 위치 동기화
+ *
+ * 본 모듈은 다음 두 가지 책임을 가진다:
+ *   1. `.ncua-floating-notification-host` 싱글톤을 document.body 에 생성·재사용 (mountFloatingNotificationHost).
+ *   2. `.ncua-page-title` 의 rect.bottom 을 추적해 `--ncua-page-title-bottom` CSS 변수로 갱신.
+ *
+ * 두 책임을 한 파일에 두는 이유: 호스트가 처음 생성될 때 positionSync 가 함께 시작되며,
+ * React 측 훅과 vanilla 측 `NcuaNotification.show()` 가 동일 함수를 공유해 호스트 생성 로직이
+ * 한 곳에서만 유지되도록 한다.
+ *
+ * NCDS DES-SPEC-027 §5.1
+ *   · Toast top 좌표 = PageTitle.bottom + 16px (viewport 기준).
+ *   · PageTitle 이 sticky 로 Default/Fixed 변형 사이 높이가 변동(120/56px)하므로 단순 height
+ *     가 아닌 getBoundingClientRect().bottom 을 기준으로 동적 계산해야 한다.
+ *
+ * 동작 특성:
+ *   - 다중 호출 idempotent. ensure/start 가 여러 번 호출되어도 호스트와 리스너는 한 벌만.
+ *   - scroll/resize 는 rAF 로 throttle.
+ *   - PageTitle 추가/제거를 MutationObserver 로 감지해 재바인딩 — body subtree 변경마다
+ *     호출되므로 콜백 자체도 rAF 로 한 프레임당 한 번만 querySelector 가 돌도록 보호.
+ *   - SSR 가드: window/document 미정의 환경에서 ensure/start 는 no-op.
+ *
+ * 내부 상태는 모듈 최상단에 흩어진 `let` 대신 한 객체로 묶어 테스트/HMR 에서 일괄 초기화·검사하기
+ * 쉽도록 한다. 외부에는 함수만 노출되므로 캡슐화는 유지된다.
+ */
+const CSS_VAR = '--ncua-page-title-bottom';
+const PAGE_TITLE_SELECTOR = '.ncua-page-title';
+const HOST_CLASS_NAME = 'ncua-floating-notification-host';
+// add/remove EventListener 의 옵션 객체를 동일 참조로 사용해 capture/passive 미스매치를 차단.
+const SCROLL_OPTIONS = {
+  passive: true,
+  capture: true
+};
+const RESIZE_OPTIONS = {
+  passive: true
+};
+const state = {
+  started: false,
+  rafId: null,
+  rebindRafId: null,
+  pageTitle: null,
+  resizeObserver: null,
+  mutationObserver: null
+};
+/** window/document 가 사용 가능한 브라우저 환경인지 — SSR/Node 가드. */
+function isBrowserEnv() {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function readBottomPx() {
+  if (!state.pageTitle) state.pageTitle = document.querySelector(PAGE_TITLE_SELECTOR);
+  if (!state.pageTitle) return 0;
+  const rect = state.pageTitle.getBoundingClientRect();
+  // viewport 기준 음수는 0으로 클램프 (PageTitle이 스크롤되어 시야에서 벗어난 경우)
+  return Math.max(0, Math.round(rect.bottom));
+}
+function flush() {
+  document.documentElement.style.setProperty(CSS_VAR, `${readBottomPx()}px`);
+  state.rafId = null;
+}
+function schedule() {
+  if (state.rafId !== null) return;
+  state.rafId = window.requestAnimationFrame(flush);
+}
+/** 현재 cached pageTitle 이 여전히 DOM 에 연결되어 있는지 — body subtree 변경 시 빠른 early-return. */
+function pageTitleStillInDom() {
+  return state.pageTitle?.isConnected ?? false;
+}
+function rebindPageTitle() {
+  state.rebindRafId = null;
+  if (pageTitleStillInDom()) return;
+  const next = document.querySelector(PAGE_TITLE_SELECTOR);
+  if (next === state.pageTitle) return;
+  state.pageTitle = next;
+  if (state.resizeObserver) {
+    state.resizeObserver.disconnect();
+    // box: 'content-box' 일관성 — startPositionSync 의 첫 observe 와 동일 옵션.
+    if (state.pageTitle) state.resizeObserver.observe(state.pageTitle, {
+      box: 'content-box'
+    });
+  }
+  schedule();
+}
+/**
+ * MutationObserver 콜백 — body subtree 의 모든 변경마다 즉시 querySelector 를 돌리면 비싸므로
+ * 프레임당 한 번으로 throttle. 캐시된 pageTitle 이 아직 DOM 에 있으면 rebindPageTitle 안에서
+ * 추가 비용 없이 early-return 한다.
+ */
+function scheduleRebind() {
+  if (state.rebindRafId !== null) return;
+  state.rebindRafId = window.requestAnimationFrame(rebindPageTitle);
+}
+/**
+ * `.ncua-floating-notification-host` 싱글톤을 보장한다.
+ * **side-effect 함수** — 단순 조회가 아니라 다음을 모두 수행:
+ *   · document.body 에 `<div class="ncua-floating-notification-host">` 를 (필요 시) append
+ *   · 첫 호출 시 startPositionSync() 로 window scroll/resize/MutationObserver/ResizeObserver 부착
+ *   · 한 번 만든 호스트는 페이지 lifetime 동안 유지 — 컴포넌트 언마운트 시에도 제거하지 않는다
+ *     (다음 토스트의 mount 비용을 줄이기 위해 의도된 설계)
+ *
+ * React 측 hook 과 vanilla 측 `NcuaNotification.show()` 가 모두 이 함수를 사용해 호스트 생성
+ * 진입점이 한 곳만 존재한다.
+ *
+ * @returns 생성되었거나 이미 존재하는 호스트 엘리먼트. SSR 환경에서는 null.
+ */
+export function mountFloatingNotificationHost() {
+  if (!isBrowserEnv()) return null;
+  let host = document.querySelector(`.${HOST_CLASS_NAME}`);
+  if (!host) {
+    host = document.createElement('div');
+    host.className = HOST_CLASS_NAME;
+    // 호스트는 layout container 일 뿐 — live region 책임은 각 토스트 카드의 role 에 위임.
+    document.body.appendChild(host);
+    startPositionSync();
+  }
+  return host;
+}
+/**
+ * PageTitle ↔ Floating Host 위치 동기화 시작 (idempotent).
+ * `mountFloatingNotificationHost()` 가 자동 호출하므로 일반 사용자는 직접 부를 필요 없음.
+ * SSR/테스트에서 수동 제어가 필요할 때만 export 됨.
+ */
+export function startPositionSync() {
+  if (state.started || !isBrowserEnv()) return;
+  state.started = true;
+  state.pageTitle = document.querySelector(PAGE_TITLE_SELECTOR);
+  window.addEventListener('scroll', schedule, SCROLL_OPTIONS);
+  window.addEventListener('resize', schedule, RESIZE_OPTIONS);
+  if (typeof ResizeObserver !== 'undefined') {
+    state.resizeObserver = new ResizeObserver(schedule);
+    // box: 'content-box' 명시 — border/padding 변경으로 인한 콜백 재호출 회피 (DOM mutation 무한 루프 방지).
+    if (state.pageTitle) state.resizeObserver.observe(state.pageTitle, {
+      box: 'content-box'
+    });
+  }
+  if (typeof MutationObserver !== 'undefined') {
+    state.mutationObserver = new MutationObserver(scheduleRebind);
+    state.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
+  // 첫 동기화
+  flush();
+}
+/** 동기화 중단 + 리소스 해제. 테스트 종료/HMR 정리 등에 사용. */
+export function stopPositionSync() {
+  if (!state.started) return;
+  state.started = false;
+  window.removeEventListener('scroll', schedule, SCROLL_OPTIONS);
+  window.removeEventListener('resize', schedule, RESIZE_OPTIONS);
+  state.resizeObserver?.disconnect();
+  state.resizeObserver = null;
+  state.mutationObserver?.disconnect();
+  state.mutationObserver = null;
+  if (state.rafId !== null) {
+    window.cancelAnimationFrame(state.rafId);
+    state.rafId = null;
+  }
+  if (state.rebindRafId !== null) {
+    window.cancelAnimationFrame(state.rebindRafId);
+    state.rebindRafId = null;
+  }
+  state.pageTitle = null;
+  // 정리 시 CSS 변수도 초기 상태로 되돌림
+  document.documentElement.style.removeProperty(CSS_VAR);
+}
+/** 외부에서 PageTitle.bottom 값을 강제로 다시 측정해 반영하고 싶을 때. */
+export function syncNow() {
+  flush();
+}

package/dist/esm/assets/scripts/notification/utils.js

@@ -0,0 +1,109 @@
+import { BREAKPOINT } from '../../../src/constant/breakpoint';
+import { CLASS_NAMES } from './const';
+// 공통 유틸리티 함수들
+export function createWrapperElement(baseClass, color, className) {
+  const wrapper = document.createElement('div');
+  wrapper.className = buildClassName(baseClass, color, className);
+  wrapper.setAttribute('role', 'alert');
+  return wrapper;
+}
+export function buildClassName(baseClass, color, className) {
+  const classes = [baseClass, `${baseClass}--${color}`];
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(' ');
+}
+/**
+ * http/https 프로토콜만 허용한다.
+ * javascript:, data:, file: 등 위험 프로토콜로 인한 XSS / 외부 페이로드 로딩을 차단.
+ */
+function isSafeUrl(url) {
+  try {
+    const parsed = new URL(url, window.location.origin);
+    return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+  } catch {
+    return false;
+  }
+}
+/**
+ * HTML 속성 값에 안전하게 삽입하기 위한 최소 이스케이프.
+ * 본문(body)이 아닌 속성 컨텍스트에서의 따옴표 탈출(`" onclick="..."`)을 방지.
+ */
+function escapeHtmlAttr(str) {
+  return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
+}
+export function renderSupportingText(supportingText, className, supportTextLink) {
+  if (!supportingText) return '';
+  // 본문(supportingText) 자체는 이 함수의 호출 결과가 wrapper.innerHTML에
+  // 들어가기 전에 DOMPurify로 sanitize되므로 별도 이스케이프하지 않는다.
+  // 이렇게 해야 <br>, <strong> 등 서식용 태그가 그대로 동작한다.
+  if (supportTextLink && isSafeUrl(supportTextLink)) {
+    const safeLink = escapeHtmlAttr(supportTextLink);
+    return `<a href="${safeLink}" class="ncua-full-width-notification__link" rel="noopener noreferrer" target="_blank"><span class="${className}">${supportingText}</span></a>`;
+  }
+  // unsafe URL이거나 link가 없으면 링크 없이 텍스트만 렌더링
+  return `<span class="${className}">${supportingText}</span>`;
+}
+export function renderActions(actions, wrapperClass) {
+  // 액션이 없으면 빈 문자열 반환
+  if (!actions || actions.length === 0) {
+    return '';
+  }
+  const buttonsHtml = actions.map(action => {
+    const buttonHtml = `
+      <button 
+        class="ncua-btn ncua-btn--sm ncua-btn--${action.hierarchy || 'text'}"
+        data-action="${action.label}-${action.hierarchy}"
+      >
+        ${action.label}
+      </button>`;
+    return buttonHtml;
+  }).join('');
+  return `<div class="${wrapperClass}">${buttonsHtml}</div>`;
+}
+// 공통 이벤트 처리
+export function bindNotificationEvents(element, actions, onClose, onRemove) {
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 닫기/액션 버튼 분기를 한 핸들러에 묶는 기존 구조를 유지. 분리 리팩토링은 별도 작업 범위.
+  element.addEventListener('click', event => {
+    const target = event.target;
+    // 닫기 버튼 클릭 처리
+    if (target.matches(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}, .${CLASS_NAMES.FLOATING.CLOSE_BUTTON}`) || target.closest(`.${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}`)) {
+      onClose?.();
+      onRemove?.();
+      return;
+    }
+    // 액션 버튼 클릭 처리
+    const actionButton = target.closest('.ncua-btn[data-action]');
+    if (actionButton && actions) {
+      const actionData = actionButton.getAttribute('data-action');
+      if (actionData) {
+        let matchedAction = null;
+        for (const action of actions) {
+          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
+          if (actionData === expectedDataAction) {
+            matchedAction = action;
+            break;
+          }
+        }
+        if (matchedAction?.onClick) {
+          matchedAction.onClick();
+        }
+      }
+    }
+  });
+}
+// 자동 닫기 설정
+export function setupAutoClose(autoClose, onClose, onRemove) {
+  if (autoClose > 0) {
+    return window.setTimeout(() => {
+      onClose?.();
+      onRemove?.();
+    }, autoClose);
+  }
+  return undefined;
+}
+// Mobile detection utility
+export const isMobile = () => {
+  return window.innerWidth <= Number.parseInt(BREAKPOINT.mobile, 10);
+};

package/dist/esm/assets/scripts/shared/ButtonCloseX.js

@@ -0,0 +1,37 @@
+// 공통 X버튼 로직 (React ButtonCloseX 컴포넌트와 동일한 구조)
+// React ButtonCloseX와 동일한 SVG 사이즈 매핑
+export const SVG_SIZE = {
+  xs: 16,
+  sm: 20,
+  md: 20,
+  lg: 24
+};
+// X버튼 SVG 아이콘
+export const X_CLOSE_SVG = size => `<svg width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+  </svg>`;
+// X버튼 렌더링 유틸리티 (React ButtonCloseX와 동일한 인터페이스)
+export function ButtonCloseX(size) {
+  let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'light';
+  let additionalClasses = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  let ariaLabel = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '닫기';
+  let onClick = arguments.length > 4 ? arguments[4] : undefined;
+  const svgSize = SVG_SIZE[size];
+  const buttonId = `close-btn-${Math.random().toString(36).substr(2, 9)}`;
+  const buttonHTML = `
+    <button type="button" id="${buttonId}" class="ncua-button-close-x ncua-button-close-x--${size} ncua-button-close-x--${theme} ${additionalClasses}" aria-label="${ariaLabel}">
+      ${X_CLOSE_SVG(svgSize.toString())}
+    </button>
+  `;
+  // onClick이 제공된 경우 이벤트 바인딩
+  if (onClick) {
+    // DOM에 추가된 후 이벤트 바인딩을 위해 setTimeout 사용
+    setTimeout(() => {
+      const button = document.getElementById(buttonId);
+      if (button) {
+        button.addEventListener('click', onClick);
+      }
+    }, 0);
+  }
+  return buttonHTML;
+}

package/dist/esm/assets/scripts/utils/sanitize.js

@@ -0,0 +1,31 @@
+import DOMPurify from 'dompurify';
+/**
+ * HTML 문자열을 DOMPurify 기본 설정으로 sanitize한다.
+ *
+ * 제거되는 항목 (기본 설정):
+ * - `<script>`, `<iframe>`, `<object>` 등 실행 위험 태그
+ * - `onclick`, `onerror` 등 inline 이벤트 핸들러 속성
+ * - `href="javascript:..."` 같은 javascript: URL
+ *
+ * 유지되는 항목:
+ * - `<svg>`, `<button>`, `<div>`, `<span>`, `<input>` 등 일반 HTML/SVG 태그
+ * - `class`, `style`, `role`, `aria-*`, `data-*` 등 표현용 속성
+ * - SVG 표현 속성 (`viewBox`, `stroke`, `fill` 등)
+ *
+ * 이벤트 바인딩은 addEventListener로 별도 처리할 것.
+ */
+export function sanitizeHtml(dirty) {
+  return DOMPurify.sanitize(dirty);
+}
+/**
+ * 엘리먼트에 콘텐츠를 안전하게 설정한다.
+ * - string: sanitize 후 innerHTML 교체
+ * - HTMLElement: 기존 자식 제거 후 appendChild
+ */
+export function setSafeInnerHTML(element, content) {
+  if (content instanceof HTMLElement) {
+    element.replaceChildren(content);
+    return;
+  }
+  element.innerHTML = sanitizeHtml(content);
+}

package/dist/esm/src/components/data-display/data-grid/DataGrid.js

@@ -73,7 +73,9 @@ const DataGridTable = /*#__PURE__*/forwardRef((_ref5, ref) => {
     fixedHeader,
     maxHeight,
     hoverable,
-    selectable
+    selectable,
+    horizontalScroll,
+    minWidth
   } = _ref5;
   return _jsx("div", {
     ref: ref,
@@ -85,6 +87,8 @@ const DataGridTable = /*#__PURE__*/forwardRef((_ref5, ref) => {
       maxHeight: maxHeight,
       hoverable: hoverable,
       selectable: selectable,
+      horizontalScroll: horizontalScroll,
+      minWidth: minWidth,
       children: children
     })
   });