@ncds/ui-admin 1.3.0 → 1.4.1

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullWidthNotification = void 0;
+var _const = require("./const");
+var _utils = require("./utils");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var FullWidthNotification = exports.FullWidthNotification = /** @class */function () {
+  function FullWidthNotification(options) {
+    this.options = __assign({
+      color: 'neutral',
+      className: '',
+      actions: [],
+      autoClose: 0,
+      supportingText: undefined
+    }, options);
+    this.element = this.createElement();
+    this.bindEvents();
+    this.setupAutoClose();
+  }
+  FullWidthNotification.prototype.createElement = function () {
+    var _a = this.options,
+      title = _a.title,
+      supportingText = _a.supportingText,
+      color = _a.color,
+      className = _a.className,
+      actions = _a.actions,
+      onClose = _a.onClose,
+      supportTextLink = _a.supportTextLink,
+      onHidePermanently = _a.onHidePermanently;
+    var wrapper = (0, _utils.createWrapperElement)(_const.CLASS_NAMES.FULL_WIDTH.BASE, color, className);
+    var iconHtml = _const.FULL_WIDTH_ICON_MAP[color](_const.FULL_WIDTH_SIZES.ICON);
+    wrapper.innerHTML = this.buildTemplate({
+      iconHtml: iconHtml,
+      title: title,
+      supportingText: supportingText,
+      actions: actions,
+      onClose: onClose,
+      supportTextLink: supportTextLink,
+      onHidePermanently: onHidePermanently
+    });
+    return wrapper;
+  };
+  FullWidthNotification.prototype.buildTemplate = function (params) {
+    var iconHtml = params.iconHtml,
+      title = params.title,
+      supportingText = params.supportingText,
+      actions = params.actions,
+      onClose = params.onClose,
+      supportTextLink = params.supportTextLink,
+      onHidePermanently = params.onHidePermanently;
+    return "\n      <div class=\"".concat(_const.CLASS_NAMES.FULL_WIDTH.CONTAINER, "\">\n        <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.CONTENT, "\">\n          <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.CONTENT_WRAPPER, "\">\n            <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.ICON, "\">").concat(iconHtml, "</div>\n            <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.TEXT_CONTAINER, "\">\n              <span class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.TITLE, "\">").concat(title, "</span>\n              ").concat((0, _utils.renderSupportingText)(supportingText, _const.CLASS_NAMES.FULL_WIDTH.SUPPORTING_TEXT, supportTextLink), "\n            </div>\n          </div>\n          <div class=\"").concat(_const.CLASS_NAMES.FULL_WIDTH.ACTIONS_CONTAINER, "\">\n            ").concat(actions && actions.length > 0 ? (0, _utils.renderActions)(actions, _const.CLASS_NAMES.FULL_WIDTH.ACTIONS) : '', "\n            ").concat(this.renderHidePermanentlyButton(onHidePermanently), "\n            ").concat(this.renderCloseButton(onClose), "\n          </div>\n        </div>\n      </div>\n    ");
+  };
+  FullWidthNotification.prototype.renderHidePermanentlyButton = function (onHidePermanently) {
+    if (!onHidePermanently) return '';
+    return "\n      <button type=\"button\" class=\"ncua-notification__action-button ncua-notification__action-button--text ncua-full-width-notification__link\" data-hide-permanently=\"true\">\n        \uB2E4\uC2DC\uBCF4\uC9C0 \uC54A\uAE30\n      </button>\n    ";
+  };
+  FullWidthNotification.prototype.renderCloseButton = function (onClose) {
+    if (!onClose) return '';
+    return "\n      <button type=\"button\" class=\"".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, "\" aria-label=\"\uC54C\uB9BC \uB2EB\uAE30\">\n        ").concat(_const.SVG_ICONS['x-close'](_const.FULL_WIDTH_SIZES.CLOSE_BUTTON), "\n      </button>\n    ");
+  };
+  FullWidthNotification.prototype.bindEvents = function () {
+    var _this = this;
+    (0, _utils.bindNotificationEvents)(this.element, this.options.actions, this.options.onClose, function () {
+      return _this.remove();
+    });
+    // 다시보지 않기 버튼 이벤트 바인딩
+    if (this.options.onHidePermanently) {
+      var hidePermanentlyButton = this.element.querySelector('[data-hide-permanently="true"]');
+      if (hidePermanentlyButton) {
+        hidePermanentlyButton.addEventListener('click', function () {
+          var _a, _b;
+          (_b = (_a = _this.options).onHidePermanently) === null || _b === void 0 ? void 0 : _b.call(_a);
+          _this.remove();
+        });
+      }
+    }
+  };
+  FullWidthNotification.prototype.setupAutoClose = function () {
+    var _this = this;
+    this.autoCloseTimer = (0, _utils.setupAutoClose)(this.options.autoClose, this.options.onClose, function () {
+      return _this.remove();
+    });
+  };
+  // Public methods
+  FullWidthNotification.prototype.getElement = function () {
+    return this.element;
+  };
+  FullWidthNotification.prototype.appendTo = function (parent) {
+    parent.appendChild(this.element);
+  };
+  FullWidthNotification.prototype.remove = function () {
+    if (this.autoCloseTimer) {
+      clearTimeout(this.autoCloseTimer);
+      this.autoCloseTimer = undefined;
+    }
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  };
+  FullWidthNotification.prototype.destroy = function () {
+    this.remove();
+  };
+  // Static factory methods
+  FullWidthNotification.create = function (options) {
+    return new FullWidthNotification(options);
+  };
+  return FullWidthNotification;
+}();

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Notification = void 0;
+var _FullWidthNotification = require("./FullWidthNotification");
+var _FloatingNotification = require("./FloatingNotification");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+// 통합 Notification 클래스
+var Notification = exports.Notification = /** @class */function () {
+  function Notification(options) {
+    var _a = options.type,
+      type = _a === void 0 ? 'floating' : _a,
+      baseOptions = __rest(options, ["type"]);
+    if (type === 'floating') {
+      this.instance = new _FloatingNotification.FloatingNotification(baseOptions);
+    } else {
+      this.instance = new _FullWidthNotification.FullWidthNotification(baseOptions);
+    }
+  }
+  // 모든 메서드를 instance에 위임
+  Notification.prototype.getElement = function () {
+    return this.instance.getElement();
+  };
+  Notification.prototype.appendTo = function (parent) {
+    return this.instance.appendTo(parent);
+  };
+  Notification.prototype.remove = function () {
+    return this.instance.remove();
+  };
+  Notification.prototype.destroy = function () {
+    return this.instance.destroy();
+  };
+  Notification.prototype.show = function (parent) {
+    if (parent) {
+      this.instance.appendTo(parent);
+    } else {
+      this.instance.appendTo(document.body);
+    }
+  };
+  // Static factory methods
+  Notification.create = function (options) {
+    return new Notification(options);
+  };
+  // Convenience method for creating notifications with specific color
+  Notification.createWithColor = function (color, title, supportingText, options) {
+    var autoCloseMap = {
+      success: 3000,
+      error: 5000,
+      warning: 3000,
+      info: 3000,
+      neutral: 0
+    };
+    return new Notification(__assign({
+      title: title,
+      supportingText: supportingText,
+      color: color,
+      type: 'floating',
+      autoClose: autoCloseMap[color]
+    }, options));
+  };
+  // 클래스를 생성하지 않고도 기본 floating 알림 생성을 하기 위한 함수들
+  Notification.success = function (title, supportingText, options) {
+    var notification = this.createWithColor('success', title, supportingText, options);
+    notification.show();
+    return notification;
+  };
+  Notification.error = function (title, supportingText, options) {
+    var notification = this.createWithColor('error', title, supportingText, options);
+    notification.show();
+    return notification;
+  };
+  Notification.warning = function (title, supportingText, options) {
+    var notification = this.createWithColor('warning', title, supportingText, options);
+    notification.show();
+    return notification;
+  };
+  Notification.info = function (title, supportingText, options) {
+    var notification = this.createWithColor('info', title, supportingText, options);
+    notification.show();
+    return notification;
+  };
+  Notification.neutral = function (title, supportingText, options) {
+    var notification = this.createWithColor('neutral', title, supportingText, options);
+    notification.show();
+    return notification;
+  };
+  // showFullWidth method for backward compatibility
+  Notification.showFullWidth = function (options) {
+    return new Notification(__assign(__assign({}, options), {
+      type: 'full-width'
+    }));
+  };
+  return Notification;
+}();

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CLASS_NAMES = void 0;
+// CSS class names
+var CLASS_NAMES = exports.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'
+  },
+  COMMON: {
+    ACTION_BUTTON: 'ncua-notification__action-button'
+  }
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SVG_ICONS = exports.ICON_MAP = exports.FULL_WIDTH_ICON_MAP = exports.FLOATING_ICON_MAP = void 0;
+// SVG 아이콘들 (크기는 동적으로 설정)
+var SVG_ICONS = exports.SVG_ICONS = {
+  'pin-02': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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': function (size) {
+    return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(size, "\" height=\"").concat(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>");
+  }
+};
+var FLOATING_ICON_MAP = exports.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에서는 지원하지 않음
+};
+var FULL_WIDTH_ICON_MAP = exports.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']
+};
+var ICON_MAP = exports.ICON_MAP = FULL_WIDTH_ICON_MAP;

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _classNames.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "CLOSE_BUTTON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.CLOSE_BUTTON_SIZES;
+  }
+});
+Object.defineProperty(exports, "CLOSE_BUTTON_SVG_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.CLOSE_BUTTON_SVG_SIZES;
+  }
+});
+Object.defineProperty(exports, "FEATURED_ICON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.FEATURED_ICON_SIZES;
+  }
+});
+Object.defineProperty(exports, "FLOATING_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.FLOATING_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.FULL_WIDTH_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.FULL_WIDTH_SIZES;
+  }
+});
+Object.defineProperty(exports, "ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _icons.ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "ICON_PIXEL_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _sizes.ICON_PIXEL_SIZES;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _icons.SVG_ICONS;
+  }
+});
+Object.defineProperty(exports, "getSizes", {
+  enumerable: true,
+  get: function () {
+    return _sizes.getSizes;
+  }
+});
+var _icons = require("./icons");
+var _classNames = require("./classNames");
+var _sizes = require("./sizes");

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSizes = exports.ICON_PIXEL_SIZES = exports.FULL_WIDTH_SIZES = exports.FEATURED_ICON_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SIZES = void 0;
+// 알림 컴포넌트 사이즈 관련 상수들
+// FeaturedIcon 사이즈
+var FEATURED_ICON_SIZES = exports.FEATURED_ICON_SIZES = {
+  MOBILE: 'md',
+  DESKTOP: 'sm'
+};
+// SVG 아이콘 픽셀 사이즈
+var ICON_PIXEL_SIZES = exports.ICON_PIXEL_SIZES = {
+  MOBILE: '20',
+  DESKTOP: '16',
+  FULL_WIDTH: '16' // Full-width는 항상 고정
+};
+// 닫기 버튼 사이즈
+var CLOSE_BUTTON_SIZES = exports.CLOSE_BUTTON_SIZES = {
+  MOBILE: 'sm',
+  DESKTOP: 'xs'
+};
+// 닫기 버튼 SVG 픽셀 사이즈
+var CLOSE_BUTTON_SVG_SIZES = exports.CLOSE_BUTTON_SVG_SIZES = {
+  xs: 16,
+  sm: 20
+};
+// Full-width 알림 고정 사이즈
+var FULL_WIDTH_SIZES = exports.FULL_WIDTH_SIZES = {
+  ICON: '16',
+  CLOSE_BUTTON: '20'
+};
+// 사이즈 유틸리티 함수들
+var getSizes = exports.getSizes = {
+  featuredIcon: function (isMobile) {
+    return isMobile ? FEATURED_ICON_SIZES.MOBILE : FEATURED_ICON_SIZES.DESKTOP;
+  },
+  iconPixel: function (isMobile) {
+    return isMobile ? ICON_PIXEL_SIZES.MOBILE : ICON_PIXEL_SIZES.DESKTOP;
+  },
+  closeButton: function (isMobile) {
+    return isMobile ? CLOSE_BUTTON_SIZES.MOBILE : CLOSE_BUTTON_SIZES.DESKTOP;
+  },
+  closeButtonSvg: function (size) {
+    return CLOSE_BUTTON_SVG_SIZES[size];
+  }
+};

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Notification: true,
+  FullWidthNotification: true,
+  FloatingNotification: true,
+  SVG_ICONS: true,
+  CLASS_NAMES: true,
+  ICON_MAP: true,
+  FLOATING_ICON_MAP: true,
+  FULL_WIDTH_ICON_MAP: true
+};
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _const.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "FLOATING_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.FLOATING_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FULL_WIDTH_ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.FULL_WIDTH_ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "FloatingNotification", {
+  enumerable: true,
+  get: function () {
+    return _FloatingNotification.FloatingNotification;
+  }
+});
+Object.defineProperty(exports, "FullWidthNotification", {
+  enumerable: true,
+  get: function () {
+    return _FullWidthNotification.FullWidthNotification;
+  }
+});
+Object.defineProperty(exports, "ICON_MAP", {
+  enumerable: true,
+  get: function () {
+    return _const.ICON_MAP;
+  }
+});
+Object.defineProperty(exports, "Notification", {
+  enumerable: true,
+  get: function () {
+    return _Notification.Notification;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _const.SVG_ICONS;
+  }
+});
+var _Notification = require("./Notification");
+var _FullWidthNotification = require("./FullWidthNotification");
+var _FloatingNotification = require("./FloatingNotification");
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+var _const = require("./const");
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Notification = Notification;
+}

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bindNotificationEvents = bindNotificationEvents;
+exports.buildClassName = buildClassName;
+exports.createWrapperElement = createWrapperElement;
+exports.isMobile = void 0;
+exports.renderActions = renderActions;
+exports.renderSupportingText = renderSupportingText;
+exports.setupAutoClose = setupAutoClose;
+var _const = require("./const");
+var _breakpoint = require("../../../src/constant/breakpoint");
+// 공통 유틸리티 함수들
+function createWrapperElement(baseClass, color, className) {
+  var wrapper = document.createElement('div');
+  wrapper.className = buildClassName(baseClass, color, className);
+  wrapper.setAttribute('role', 'alert');
+  return wrapper;
+}
+function buildClassName(baseClass, color, className) {
+  var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+  if (className) {
+    classes.push(className);
+  }
+  return classes.join(' ');
+}
+function renderSupportingText(supportingText, className, supportTextLink) {
+  if (!supportingText) return '';
+  if (supportTextLink) {
+    return "<a href=\"".concat(supportTextLink, "\" class=\"ncua-full-width-notification__link\"><span class=\"").concat(className, "\">").concat(supportingText, "</span></a>");
+  }
+  return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
+}
+function renderActions(actions, wrapperClass) {
+  // 액션이 없으면 빈 문자열 반환
+  if (!actions || actions.length === 0) {
+    return '';
+  }
+  var buttonsHtml = actions.map(function (action) {
+    var buttonHtml = "\n      <button \n        class=\"ncua-notification__action-button ncua-notification__action-button--".concat(action.hierarchy || 'link', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+    return buttonHtml;
+  }).join('');
+  return "<div class=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+}
+// 공통 이벤트 처리
+function bindNotificationEvents(element, actions, onClose, onRemove) {
+  element.addEventListener('click', function (event) {
+    var target = event.target;
+    // 닫기 버튼 클릭 처리
+    if (target.matches(".".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(_const.CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(_const.CLASS_NAMES.FLOATING.CLOSE_BUTTON))) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+      return;
+    }
+    // 액션 버튼 클릭 처리
+    var actionButton = target.closest('.ncua-notification__action-button[data-action]');
+    if (actionButton && actions) {
+      var actionData = actionButton.getAttribute('data-action');
+      if (actionData) {
+        var matchedAction = null;
+        for (var _i = 0, actions_1 = actions; _i < actions_1.length; _i++) {
+          var action = actions_1[_i];
+          var expectedDataAction = "".concat(action.label, "-").concat(action.hierarchy || 'link');
+          if (actionData === expectedDataAction) {
+            matchedAction = action;
+            break;
+          }
+        }
+        if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+          matchedAction.onClick();
+        }
+      }
+    }
+  });
+}
+// 자동 닫기 설정
+function setupAutoClose(autoClose, onClose, onRemove) {
+  if (autoClose > 0) {
+    return window.setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    }, autoClose);
+  }
+  return undefined;
+}
+// Mobile detection utility
+var isMobile = function () {
+  return window.innerWidth <= parseInt(_breakpoint.BREAKPOINT.mobile);
+};
+exports.isMobile = isMobile;