@ncds/ui-admin 1.8.3 → 1.8.5

package/dist/cjs/src/hooks/usePortalState.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortalState = void 0;
+var _FloatingContext = require("../contexts/FloatingContext");
+const usePortalState = usePortalProp => {
+  const floatingContext = (0, _FloatingContext.useFloatingContext)();
+  const shouldPortal = usePortalProp ?? floatingContext?.preferPortal ?? false;
+  const portalContainer = floatingContext?.portalContainer ?? (typeof document !== 'undefined' ? document.body : null);
+  return {
+    shouldPortal,
+    portalContainer
+  };
+};
+exports.usePortalState = usePortalState;

package/dist/cjs/src/utils/dropdown/maxSelection.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMaxSelectionReached = exports.isMaxSelectionLimitActive = void 0;
+/**
+ * SelectBox / ComboBox 공통 — 최대 선택 개수 제한 활성 여부 판정.
+ *
+ * React 훅(`useMultiSelect`)과 vanilla 드롭다운(`DropdownModel`)가 동일 로직을 공유하므로
+ * 두 곳에 정의가 갈라지지 않도록 단일 source-of-truth로 둔다.
+ *
+ * **계약**
+ * - `0` 이상의 정수 → 활성 (단, `0`은 모든 새 선택을 차단하는 의미)
+ * - 음수 / 비정수 / `undefined` / `null` → 비활성 (제한 없는 것과 동일)
+ *
+ * `0`을 활성으로 보는 이유: 호출자가 `maxSelection={0}`을 명시적으로 전달했을 때
+ * "선택 자체를 막겠다"는 의도로 해석하기 위함. 음수는 일반적으로 "값 없음"의 sentinel이므로 비활성.
+ */
+const isMaxSelectionLimitActive = maxSelection => typeof maxSelection === 'number' && Number.isInteger(maxSelection) && maxSelection >= 0;
+/**
+ * 현재 선택 길이가 최대치에 도달했는지 단일 함수로 판정.
+ *
+ * 호출 측에서 `>=`을 직접 작성하지 않도록 의미를 노출하고, type predicate가 내부에서 적용되어
+ * `maxSelection`의 narrowing이 보장된다 (외부 predicate 호출로 인한 narrowing 누락 방지).
+ *
+ * - 제한 비활성(음수 / null / undefined / 비정수): 항상 `false`.
+ * - 활성: `currentLength >= maxSelection`.
+ */
+exports.isMaxSelectionLimitActive = isMaxSelectionLimitActive;
+const isMaxSelectionReached = (currentLength, maxSelection) => {
+  if (!isMaxSelectionLimitActive(maxSelection)) return false;
+  return currentLength >= maxSelection;
+};
+exports.isMaxSelectionReached = isMaxSelectionReached;

package/dist/cjs/src/utils/dropdown/multiSelect.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMultiSelect = exports.removeTagFromSelected = exports.isAllItemsSelected = exports.handleSelectAllItems = exports.getSelectedTags = exports.getSelectAllButtonText = void 0;
+exports.useMultiSelect = exports.useMaxSelection = exports.removeTagFromSelected = exports.isAllItemsSelected = exports.handleSelectAllItems = exports.getSelectedTags = exports.getSelectAllButtonText = void 0;
+var _react = require("react");
+var _maxSelection = require("./maxSelection");
 /**
  * 전체 선택 상태를 확인하는 유틸 함수
  */
@@ -54,27 +56,82 @@ const removeTagFromSelected = (selectedValues, tagIdToRemove) => {
   return selectedValues.filter(id => id !== tagIdToRemove);
 };
 /**
- * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ * 최대 선택 개수 관련 응집을 별도 훅으로 분리.
+ *
+ * - `isMaxSelectionActive`: 제한 활성 여부.
+ * - `isMaxReached`: 현재 선택 길이가 최대치에 도달했는지.
+ * - `canAdd(currentLength)`: 새 항목 추가가 허용되는지 (도달 시 `false`).
+ *
+ * 도메인 규칙(`>=` 비교 등)을 외부로 노출하지 않고 헬퍼를 통해 의미만 반환한다.
+ * `useMultiSelect`가 내부에서 사용하지만, 단독으로도 필요한 호출자가 쓸 수 있게 export한다.
  */
 exports.removeTagFromSelected = removeTagFromSelected;
-const useMultiSelect = (selectedValues, options, selectText, deselectText) => {
+const useMaxSelection = (selectedValues, maxSelection) => {
+  const isMaxSelectionActive = (0, _maxSelection.isMaxSelectionLimitActive)(maxSelection);
+  const isMaxReached = (0, _maxSelection.isMaxSelectionReached)(selectedValues.length, maxSelection);
+  const canAdd = (0, _react.useCallback)(currentLength => !(0, _maxSelection.isMaxSelectionReached)(currentLength, maxSelection), [maxSelection]);
+  return {
+    isMaxSelectionActive,
+    isMaxReached,
+    canAdd
+  };
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅.
+ *
+ * 시그니처는 호출자가 maxSelection만 지정하더라도 텍스트 라벨을 건너뛰지 않도록 옵션 객체로 받는다.
+ *
+ * **반환의 `tryToggle`**: multiple 토글 결과를 직접 돌려준다.
+ *  - 새 배열 반환: 정상 토글 (추가 또는 해제).
+ *  - `null` 반환: 최대 개수 도달로 추가가 차단됨 (호출자는 변경 없이 종료해야 함).
+ *
+ * 호출자가 `>= maxSelection` 같은 도메인 규칙을 직접 검사하지 않도록 결과만 노출한다.
+ */
+exports.useMaxSelection = useMaxSelection;
+const useMultiSelect = function (selectedValues, options) {
+  let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    selectText,
+    deselectText,
+    maxSelection
+  } = config;
   const isAllSelected = isAllItemsSelected(selectedValues, options);
   const buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
-  const toggleSelectAll = () => {
-    return handleSelectAllItems(selectedValues, options);
-  };
-  const getSelectedTagsData = () => {
-    return getSelectedTags(selectedValues, options);
-  };
-  const removeTag = tagId => {
-    return removeTagFromSelected(selectedValues, tagId);
-  };
-  return {
+  const {
+    isMaxSelectionActive,
+    isMaxReached,
+    canAdd
+  } = useMaxSelection(selectedValues, maxSelection);
+  const toggleSelectAll = (0, _react.useCallback)(() => handleSelectAllItems(selectedValues, options), [selectedValues, options]);
+  const getSelectedTagsData = (0, _react.useCallback)(() => getSelectedTags(selectedValues, options), [selectedValues, options]);
+  const removeTag = (0, _react.useCallback)(tagId => removeTagFromSelected(selectedValues, tagId), [selectedValues]);
+  /**
+   * multiple 선택 토글을 한 번에 처리한다.
+   * - 이미 포함된 항목: 해제 (배열에서 제거하여 반환).
+   * - 미포함 항목: 추가 시도. 최대치 도달이면 `null` 반환(차단).
+   *
+   * 호출 측은 `null` 여부만 확인하면 되며 maxSelection 도메인 규칙을 알 필요가 없다.
+   */
+  const tryToggle = (0, _react.useCallback)((optionId, currentArray) => {
+    const base = Array.isArray(currentArray) ? currentArray : [];
+    const idx = base.indexOf(optionId);
+    if (idx > -1) {
+      const next = [...base];
+      next.splice(idx, 1);
+      return next;
+    }
+    if (!canAdd(base.length)) return null;
+    return [...base, optionId];
+  }, [canAdd]);
+  return (0, _react.useMemo)(() => ({
     isAllSelected,
     buttonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  };
+    removeTag,
+    isMaxSelectionActive,
+    isMaxReached,
+    tryToggle
+  }), [isAllSelected, buttonText, toggleSelectAll, getSelectedTagsData, removeTag, isMaxSelectionActive, isMaxReached, tryToggle]);
 };
 exports.useMultiSelect = useMultiSelect;

package/dist/esm/assets/scripts/featuredIcon.js

@@ -0,0 +1,80 @@
+// React 컴포넌트와 동일하게 구성
+const iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+export class FeaturedIcon {
+  constructor(options) {
+    this.options = {
+      theme: 'light-circle',
+      color: 'neutral',
+      size: 'sm',
+      className: '',
+      ...options
+    };
+    this.element = this.createElement();
+  }
+  // svgString ( ICON SVG ) 을 받아서 요소를 생성
+  createElement() {
+    const {
+      theme,
+      color,
+      size,
+      className,
+      svgString
+    } = this.options;
+    // React FeaturedIcon과 동일한 클래스 구조
+    const classes = ['ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`];
+    if (className) {
+      classes.push(className);
+    }
+    const div = document.createElement('div');
+    div.className = classes.join(' ');
+    // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
+    if (theme === 'outline-circle') {
+      const innerOutline = document.createElement('div');
+      innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
+      div.appendChild(innerOutline);
+      const outerOutline = document.createElement('div');
+      outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
+      div.appendChild(outerOutline);
+    }
+    // SVG 아이콘 추가
+    const iconSize = iconSizeMap[size];
+    const svgWithSize = this.addSizeToSvg(svgString, iconSize);
+    div.innerHTML += svgWithSize;
+    return div;
+  }
+  addSizeToSvg(svgString, size) {
+    return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  updateColor(color) {
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
+    this.options.color = color;
+  }
+  updateSize(size) {
+    const iconSize = iconSizeMap[size];
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
+    const svgIcon = this.element.querySelector('svg');
+    if (svgIcon) {
+      svgIcon.setAttribute('width', String(iconSize));
+      svgIcon.setAttribute('height', String(iconSize));
+    }
+    this.options.size = size;
+  }
+  destroy() {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  // Static factory method
+  static create(options) {
+    return new FeaturedIcon(options);
+  }
+}

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