@ncds/ui-admin 1.8.4 → 1.8.6

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

@@ -0,0 +1,171 @@
+import { MEDIA_QUERY } from '../../../src/constant/breakpoint';
+import { FeaturedIcon } from '../featuredIcon';
+import { ButtonCloseX } from '../shared/ButtonCloseX';
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FLOATING_ICON_MAP, getSizes } from './const';
+import { bindNotificationEvents, createWrapperElement, isMobile, renderActions, renderSupportingText, setupAutoClose } from './utils';
+export class FloatingNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+    this.setupMobileListener();
+  }
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose
+    } = this.options;
+    // 플로팅 알림에서 info 색상 사용 시 neutral로 대체
+    let actualColor = color;
+    if (color === 'info') {
+      actualColor = 'neutral';
+    }
+    const wrapper = createWrapperElement(CLASS_NAMES.FLOATING.BASE, actualColor, className);
+    const iconFunction = FLOATING_ICON_MAP[actualColor];
+    const mobile = isMobile();
+    // FeaturedIcon 생성
+    let featuredIconElement = null;
+    if (iconFunction) {
+      const size = getSizes.featuredIcon(mobile);
+      const iconSize = getSizes.iconPixel(mobile);
+      const iconSvg = iconFunction(iconSize);
+      this.featuredIcon = FeaturedIcon.create({
+        svgString: iconSvg,
+        theme: 'dark-circle',
+        color: actualColor,
+        size: size
+      });
+      featuredIconElement = this.featuredIcon.getElement();
+    }
+    wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
+      title,
+      supportingText,
+      actions,
+      onClose,
+      isMobile: mobile
+    }));
+    // FeaturedIcon을 container에 추가
+    if (featuredIconElement) {
+      const container = wrapper.querySelector(`.${CLASS_NAMES.FLOATING.CONTAINER}`);
+      if (container) {
+        container.insertBefore(featuredIconElement, container.firstChild);
+      }
+    }
+    return wrapper;
+  }
+  buildTemplate(params) {
+    const {
+      title,
+      supportingText,
+      actions,
+      onClose,
+      isMobile
+    } = params;
+    return `
+      <div class="${CLASS_NAMES.FLOATING.CONTENT}">
+        <div class="${CLASS_NAMES.FLOATING.CONTAINER}">
+          <div class="${CLASS_NAMES.FLOATING.TEXT_CONTAINER}">
+            <div class="${CLASS_NAMES.FLOATING.TITLE_WRAPPER}">
+              <span class="${CLASS_NAMES.FLOATING.TITLE}">${title}</span>
+            </div>
+            ${renderSupportingText(supportingText, CLASS_NAMES.FLOATING.SUPPORTING_TEXT)}
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FLOATING.ACTIONS) : ''}
+          </div>
+        </div>
+      </div>
+      ${this.renderCloseButton(onClose, isMobile)}
+    `;
+  }
+  renderCloseButton(onClose) {
+    let isMobile = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!onClose) return '';
+    const size = getSizes.closeButton(isMobile);
+    return ButtonCloseX(size, 'light', CLASS_NAMES.FLOATING.CLOSE_BUTTON, '알림 닫기', onClose);
+  }
+  setupMobileListener() {
+    const mediaQuery = window.matchMedia(MEDIA_QUERY.mobile);
+    const handleChange = e => {
+      this.updateMobileStyles(e.matches);
+      if (e.matches && this.options.onClose) {
+        this.options.onClose();
+        this.remove();
+      }
+    };
+    handleChange({
+      matches: mediaQuery.matches
+    });
+    mediaQuery.addEventListener('change', handleChange);
+    this.mobileCleanup = () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }
+  updateMobileStyles(mobile) {
+    if (this.featuredIcon) {
+      const newSize = getSizes.featuredIcon(mobile);
+      this.featuredIcon.updateSize(newSize);
+    }
+    const closeButton = this.element.querySelector('.ncua-button-close-x');
+    if (closeButton) {
+      const newSize = getSizes.closeButton(mobile);
+      const newSvgSize = getSizes.closeButtonSvg(newSize);
+      closeButton.className = closeButton.className.replace(/ncua-button-close-x--(xs|sm)/, `ncua-button-close-x--${newSize}`);
+      const svg = closeButton.querySelector('svg');
+      if (svg) {
+        svg.setAttribute('width', newSvgSize.toString());
+        svg.setAttribute('height', newSvgSize.toString());
+      }
+    }
+  }
+  bindEvents() {
+    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    // FeaturedIcon 정리
+    if (this.featuredIcon) {
+      this.featuredIcon.destroy();
+      this.featuredIcon = undefined;
+    }
+    // 모바일 리스너 정리
+    if (this.mobileCleanup) {
+      this.mobileCleanup();
+      this.mobileCleanup = undefined;
+    }
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new FloatingNotification(options);
+  }
+}

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

@@ -0,0 +1,126 @@
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES, SVG_ICONS } from './const';
+import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose } from './utils';
+export class FullWidthNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    } = this.options;
+    const wrapper = createWrapperElement(CLASS_NAMES.FULL_WIDTH.BASE, color, className);
+    const iconHtml = FULL_WIDTH_ICON_MAP[color](FULL_WIDTH_SIZES.ICON);
+    wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
+      iconHtml,
+      title,
+      supportingText,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    }));
+    return wrapper;
+  }
+  buildTemplate(params) {
+    const {
+      iconHtml,
+      title,
+      supportingText,
+      actions,
+      onClose,
+      supportTextLink,
+      onHidePermanently
+    } = params;
+    return `
+      <div class="${CLASS_NAMES.FULL_WIDTH.CONTAINER}">
+        <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT}">
+          <div class="${CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.FULL_WIDTH.ICON}">${iconHtml}</div>
+            <div class="${CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.FULL_WIDTH.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.FULL_WIDTH.ACTIONS) : ''}
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderHidePermanentlyButton(onHidePermanently) {
+    if (!onHidePermanently) return '';
+    return `
+      <button type="button" class="ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link" data-hide-permanently="true">
+        다시보지 않기
+      </button>
+    `;
+  }
+  renderCloseButton(onClose) {
+    if (!onClose) return '';
+    return `
+      <button type="button" class="${CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](FULL_WIDTH_SIZES.CLOSE_BUTTON)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
+    // 다시보지 않기 버튼 이벤트 바인딩
+    if (this.options.onHidePermanently) {
+      const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', () => {
+          this.options.onHidePermanently?.();
+          this.remove();
+        });
+      }
+    }
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new FullWidthNotification(options);
+  }
+}

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

@@ -0,0 +1,152 @@
+import { FeaturedIcon } from '../featuredIcon';
+import { sanitizeHtml } from '../utils/sanitize';
+import { CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES, SVG_ICONS } from './const';
+import { bindNotificationEvents, createWrapperElement, renderActions, renderSupportingText, setupAutoClose } from './utils';
+export class MessageNotification {
+  constructor(options) {
+    this.options = {
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined,
+      ...options
+    };
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  createElement() {
+    const {
+      title,
+      supportingText,
+      color,
+      className,
+      actions,
+      onClose,
+      onHidePermanently
+    } = this.options;
+    // message 타입은 neutral, error, warning, success 4가지 색상만 지원
+    let actualColor = color;
+    if (color === 'info') {
+      actualColor = 'neutral';
+    }
+    const wrapper = createWrapperElement(CLASS_NAMES.MESSAGE.BASE, actualColor, className);
+    const iconFunction = FLOATING_ICON_MAP[actualColor];
+    // FeaturedIcon 생성
+    let featuredIconElement = null;
+    if (iconFunction) {
+      const iconSvg = iconFunction(MESSAGE_SIZES.ICON_PIXEL);
+      this.featuredIcon = FeaturedIcon.create({
+        svgString: iconSvg,
+        theme: 'light-circle',
+        color: actualColor,
+        size: MESSAGE_SIZES.FEATURED_ICON
+      });
+      featuredIconElement = this.featuredIcon.getElement();
+    }
+    wrapper.innerHTML = sanitizeHtml(this.buildTemplate({
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
+    }));
+    // FeaturedIcon을 content-wrapper에 추가
+    if (featuredIconElement) {
+      const contentWrapper = wrapper.querySelector(`.${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}`);
+      if (contentWrapper) {
+        contentWrapper.insertBefore(featuredIconElement, contentWrapper.firstChild);
+      }
+    }
+    return wrapper;
+  }
+  buildTemplate(params) {
+    const {
+      title,
+      supportingText,
+      actions,
+      onClose,
+      onHidePermanently
+    } = params;
+    return `
+      <div class="${CLASS_NAMES.MESSAGE.CONTAINER}">
+        <div class="${CLASS_NAMES.MESSAGE.CONTENT}">
+          <div class="${CLASS_NAMES.MESSAGE.CONTENT_WRAPPER}">
+            <div class="${CLASS_NAMES.MESSAGE.TEXT_CONTAINER}">
+              <span class="${CLASS_NAMES.MESSAGE.TITLE}">${title}</span>
+              ${renderSupportingText(supportingText, CLASS_NAMES.MESSAGE.SUPPORTING_TEXT)}
+            </div>
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${actions && actions.length > 0 ? renderActions(actions, CLASS_NAMES.MESSAGE.ACTIONS) : ''}
+          </div>
+          <div class="${CLASS_NAMES.MESSAGE.ACTIONS_CONTAINER}">
+            ${this.renderHidePermanentlyButton(onHidePermanently)}
+            ${this.renderCloseButton(onClose)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderHidePermanentlyButton(onHidePermanently) {
+    if (!onHidePermanently) return '';
+    return `
+      <button type="button" class="${CLASS_NAMES.COMMON.ACTION_BUTTON} ${CLASS_NAMES.COMMON.ACTION_BUTTON}--text ${CLASS_NAMES.MESSAGE.HIDE_LINK}" data-hide-permanently="true">
+        다시 보지 않기
+      </button>
+    `;
+  }
+  renderCloseButton(onClose) {
+    if (!onClose) return '';
+    return `
+      <button type="button" class="${CLASS_NAMES.MESSAGE.CLOSE_BUTTON}" aria-label="알림 닫기">
+        ${SVG_ICONS['x-close'](MESSAGE_SIZES.CLOSE_BUTTON).replace('stroke="currentColor"', `stroke="#2F2F30"`)}
+      </button>
+    `;
+  }
+  bindEvents() {
+    bindNotificationEvents(this.element, this.options.actions, this.options.onClose, () => this.remove());
+    // 다시보지 않기 버튼 이벤트 바인딩
+    if (this.options.onHidePermanently) {
+      const hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', () => {
+          this.options.onHidePermanently?.();
+          this.remove();
+        });
+      }
+    }
+  }
+  setupAutoClose() {
+    this.autoCloseTimer = setupAutoClose(this.options.autoClose, this.options.onClose, () => this.remove());
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  appendTo(parent) {
+    parent.appendChild(this.element);
+  }
+  remove() {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element?.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  destroy() {
+    // FeaturedIcon 정리
+    if (this.featuredIcon) {
+      this.featuredIcon.destroy();
+      this.featuredIcon = undefined;
+    }
+    this.remove();
+  }
+  // Static factory methods
+  static create(options) {
+    return new MessageNotification(options);
+  }
+}

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]
+};