@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -1,39 +1,25 @@
 // SVG 아이콘들 (크기는 동적으로 설정)
-export var 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>");
-  }
+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 var FLOATING_ICON_MAP = {
+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 var FULL_WIDTH_ICON_MAP = {
+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 var ICON_MAP = FULL_WIDTH_ICON_MAP;
+export const ICON_MAP = FULL_WIDTH_ICON_MAP;

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

@@ -1,48 +1,40 @@
 // 알림 컴포넌트 사이즈 관련 상수들
 // FeaturedIcon 사이즈
-export var FEATURED_ICON_SIZES = {
+export const FEATURED_ICON_SIZES = {
   MOBILE: 'md',
   DESKTOP: 'sm'
 };
 // SVG 아이콘 픽셀 사이즈
-export var ICON_PIXEL_SIZES = {
+export const ICON_PIXEL_SIZES = {
   MOBILE: '20',
   DESKTOP: '16',
   FULL_WIDTH: '16' // Full-width는 항상 고정
 };
 // 닫기 버튼 사이즈
-export var CLOSE_BUTTON_SIZES = {
+export const CLOSE_BUTTON_SIZES = {
   MOBILE: 'sm',
   DESKTOP: 'xs'
 };
 // 닫기 버튼 SVG 픽셀 사이즈
-export var CLOSE_BUTTON_SVG_SIZES = {
+export const CLOSE_BUTTON_SVG_SIZES = {
   xs: 16,
   sm: 20
 };
 // Full-width 알림 고정 사이즈
-export var FULL_WIDTH_SIZES = {
+export const FULL_WIDTH_SIZES = {
   ICON: '16',
   CLOSE_BUTTON: '20'
 };
 // Message 알림 고정 사이즈
-export var MESSAGE_SIZES = {
+export const MESSAGE_SIZES = {
   FEATURED_ICON: 'lg',
   ICON_PIXEL: '24',
   CLOSE_BUTTON: '20'
 };
 // 사이즈 유틸리티 함수들
-export var 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];
-  }
+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,5 +1,5 @@
 // Message Notification 닫기 버튼 아이콘 색상 맵
-export var MESSAGE_CLOSE_ICON_COLORS = {
+export const MESSAGE_CLOSE_ICON_COLORS = {
   neutral: '#6B7280',
   error: '#EF4444',
   warning: '#F97316',

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

@@ -2,13 +2,13 @@ import { CLASS_NAMES } from './const';
 import { BREAKPOINT } from '../../../src/constant/breakpoint';
 // 공통 유틸리티 함수들
 export function createWrapperElement(baseClass, color, className) {
-  var wrapper = document.createElement('div');
+  const wrapper = document.createElement('div');
   wrapper.className = buildClassName(baseClass, color, className);
   wrapper.setAttribute('role', 'alert');
   return wrapper;
 }
 export function buildClassName(baseClass, color, className) {
-  var classes = [baseClass, "".concat(baseClass, "--").concat(color)];
+  const classes = [baseClass, `${baseClass}--${color}`];
   if (className) {
     classes.push(className);
   }
@@ -17,46 +17,51 @@ export function buildClassName(baseClass, color, className) {
 export 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 `<a href="${supportTextLink}" class="ncua-full-width-notification__link"><span class="${className}">${supportingText}</span></a>`;
   }
-  return "<span class=\"".concat(className, "\">").concat(supportingText, "</span>");
+  return `<span class="${className}">${supportingText}</span>`;
 }
 export function renderActions(actions, wrapperClass) {
   // 액션이 없으면 빈 문자열 반환
   if (!actions || actions.length === 0) {
     return '';
   }
-  var buttonsHtml = actions.map(function (action) {
-    var buttonHtml = "\n      <button \n        class=\"ncua-btn ncua-btn--sm ncua-btn--".concat(action.hierarchy || 'text', "\"\n        data-action=\"").concat(action.label, "-").concat(action.hierarchy, "\"\n      >\n        ").concat(action.label, "\n      </button>");
+  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=\"".concat(wrapperClass, "\">").concat(buttonsHtml, "</div>");
+  return `<div class="${wrapperClass}">${buttonsHtml}</div>`;
 }
 // 공통 이벤트 처리
 export function bindNotificationEvents(element, actions, onClose, onRemove) {
-  element.addEventListener('click', function (event) {
-    var target = event.target;
+  element.addEventListener('click', event => {
+    const target = event.target;
     // 닫기 버튼 클릭 처리
-    if (target.matches(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.FULL_WIDTH.CLOSE_BUTTON, ", .").concat(CLASS_NAMES.FLOATING.CLOSE_BUTTON)) || target.closest(".".concat(CLASS_NAMES.MESSAGE.CLOSE_BUTTON))) {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
-      onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+    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;
     }
     // 액션 버튼 클릭 처리
-    var actionButton = target.closest('.ncua-btn[data-action]');
+    const actionButton = target.closest('.ncua-btn[data-action]');
     if (actionButton && actions) {
-      var actionData = actionButton.getAttribute('data-action');
+      const 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');
+        let matchedAction = null;
+        for (const action of actions) {
+          const expectedDataAction = `${action.label}-${action.hierarchy || 'link'}`;
           if (actionData === expectedDataAction) {
             matchedAction = action;
             break;
           }
         }
-        if (matchedAction === null || matchedAction === void 0 ? void 0 : matchedAction.onClick) {
+        if (matchedAction?.onClick) {
           matchedAction.onClick();
         }
       }
@@ -66,14 +71,14 @@ export function bindNotificationEvents(element, actions, onClose, onRemove) {
 // 자동 닫기 설정
 export 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();
+    return window.setTimeout(() => {
+      onClose?.();
+      onRemove?.();
     }, autoClose);
   }
   return undefined;
 }
 // Mobile detection utility
-export var isMobile = function () {
+export const isMobile = () => {
   return window.innerWidth <= parseInt(BREAKPOINT.mobile);
 };