@ncds/ui-admin 1.8.1 → 1.8.2

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

@@ -1,125 +0,0 @@
-import { SVG_ICONS, CLASS_NAMES, FULL_WIDTH_ICON_MAP, FULL_WIDTH_SIZES } from './const';
-import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, 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 = 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 && 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

@@ -1,152 +0,0 @@
-import { SVG_ICONS, CLASS_NAMES, FLOATING_ICON_MAP, MESSAGE_SIZES } from './const';
-import { FeaturedIcon } from '../featuredIcon';
-import { createWrapperElement, renderSupportingText, renderActions, bindNotificationEvents, 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') {
-      console.warn('Message notification does not support "info" color. Using "neutral" instead.');
-      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 = 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 && 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

@@ -1,94 +0,0 @@
-import { FullWidthNotification } from './FullWidthNotification';
-import { FloatingNotification } from './FloatingNotification';
-import { MessageNotification } from './MessageNotification';
-// 통합 Notification 클래스
-export class Notification {
-  constructor(options) {
-    const {
-      type = 'floating',
-      ...baseOptions
-    } = options;
-    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) {
-    if (parent) {
-      this.instance.appendTo(parent);
-    } else {
-      this.instance.appendTo(document.body);
-    }
-  }
-  // Static factory methods
-  static create(options) {
-    return new Notification(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 Notification({
-      title,
-      supportingText,
-      color,
-      type: 'floating',
-      autoClose: autoCloseMap[color],
-      ...options
-    });
-  }
-  // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
-  static success(title, supportingText, options) {
-    const notification = this.createWithColor('success', title, supportingText, options);
-    notification.show();
-    return notification;
-  }
-  static error(title, supportingText, options) {
-    const notification = this.createWithColor('error', title, supportingText, options);
-    notification.show();
-    return notification;
-  }
-  static warning(title, supportingText, options) {
-    const notification = this.createWithColor('warning', title, supportingText, options);
-    notification.show();
-    return notification;
-  }
-  static info(title, supportingText, options) {
-    const notification = this.createWithColor('info', title, supportingText, options);
-    notification.show();
-    return notification;
-  }
-  static neutral(title, supportingText, options) {
-    const notification = this.createWithColor('neutral', title, supportingText, options);
-    notification.show();
-    return notification;
-  }
-  // showFullWidth method for backward compatibility
-  static showFullWidth(options) {
-    return new Notification({
-      ...options,
-      type: 'full-width'
-    });
-  }
-}

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

@@ -1,44 +0,0 @@
-// 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

@@ -1,25 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-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

@@ -1,40 +0,0 @@
-// 알림 컴포넌트 사이즈 관련 상수들
-// 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

@@ -1,8 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-export { Notification } from './Notification';
-export { FullWidthNotification } from './FullWidthNotification';
-export { FloatingNotification } from './FloatingNotification';
-export { MessageNotification } from './MessageNotification';
-export * from './utils';
-export { SVG_ICONS, CLASS_NAMES, ICON_MAP, FLOATING_ICON_MAP, FULL_WIDTH_ICON_MAP } from './const';
-// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
-if (typeof window !== 'undefined') {
-  window.ncua = window.ncua || {};
-  window.ncua.Notification = Notification;
-}

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

@@ -1,84 +0,0 @@
-import { CLASS_NAMES } from './const';
-import { BREAKPOINT } from '../../../src/constant/breakpoint';
-// 공통 유틸리티 함수들
-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(' ');
-}
-export function renderSupportingText(supportingText, className, supportTextLink) {
-  if (!supportingText) return '';
-  if (supportTextLink) {
-    return `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
-  }
-  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) {
-  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 <= parseInt(BREAKPOINT.mobile);
-};