@ncds/ui-admin 1.3.0 → 1.4.1

package/dist/cjs/assets/scripts/tooltip/Tooltip.js

@@ -0,0 +1,380 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tooltip = void 0;
+var _const = require("./const");
+var _ButtonCloseX = require("../shared/ButtonCloseX");
+var _breakpoint = require("../../../src/constant/breakpoint");
+var _TooltipLayerManager = require("./TooltipLayerManager");
+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);
+};
+/**
+ * Tooltip 클래스
+ * 툴팁 패널 패턴을 사용하여 툴팁을 생성합니다.
+ * 툴팁 패널 패턴은 바깥 컨테이너(항상 pointer-events:none) + 실제 패널(클릭 허용) 패턴을 사용합니다.
+ * 레이어 1개 아래에 여러개의 패널과 툴팁이 생성되어 화면에 삽입됩니다.
+ * 자동 위치조정 ( 공간이 부족하다면 상하좌우를 조절하는 기능 - 기본값: top )을 사용합니다.
+ * Shadow DOM 지원
+ */
+var Tooltip = exports.Tooltip = /** @class */function () {
+  function Tooltip(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var _this = this;
+    this.iconElement = null;
+    // 전역 레이어 매니저 사용
+    this.layerManager = _TooltipLayerManager.TooltipLayerManager.getInstance();
+    this.panelId = null;
+    this.panel = null;
+    this.calculatedPosition = 'top';
+    this.isVisible = false;
+    this.isMeasuring = false;
+    this.isForceHidden = false;
+    // 이벤트 핸들러
+    this.boundMouseEnter = function () {
+      return _this.handleMouseEnter();
+    };
+    this.boundMouseLeave = function () {
+      return _this.handleMouseLeave();
+    };
+    this.boundResizeScroll = function () {
+      return _this.handleResizeScroll();
+    };
+    this.boundPanelClick = function (e) {
+      return _this.handlePanelClick(e);
+    };
+    /* ========== 핸들러 ========== */
+    this.handleMouseEnter = function () {
+      _this.showTooltip();
+      if (_this.options.type === 'long') {
+        // long은 X로 닫을 때까지 유지 → 재호버 방지
+        _this.disableMouseEvents();
+      }
+    };
+    this.handleMouseLeave = function () {
+      if (_this.options.type === 'short') {
+        _this.hideTooltip();
+      }
+    };
+    this.handleResizeScroll = function () {
+      if (_this.isVisible) _this.updateTooltipPosition();
+    };
+    this.handlePanelClick = function (e) {
+      var t = e.target;
+      if (t.closest(".".concat(_const.CLASS_NAMES.TOOLTIP_CLOSE_BUTTON))) {
+        e.stopPropagation();
+        e.preventDefault();
+        _this.isForceHidden = true;
+        _this.hideTooltip();
+        // long 타입에서 닫았으면 다시 hover 가능
+        if (_this.options.type === 'long') _this.enableMouseEvents();
+      }
+    };
+    this.options = __assign(__assign({}, _const.TOOLTIP_DEFAULT_VALUE), options);
+    this.element = this.createElement();
+    this.bindEvents();
+  }
+  /* ========== DOM 생성 ========== */
+  Tooltip.prototype.createElement = function () {
+    var _a, _b, _c;
+    var iconSize = _const.ICON_SIZES[(_a = this.options.size) !== null && _a !== void 0 ? _a : 'sm'];
+    var key = this.options.iconType === 'stroke' ? 'help-circle-stroke' : 'help-circle-fill';
+    var iconSvg = (_c = (_b = _const.SVG_ICONS[key]) === null || _b === void 0 ? void 0 : _b.call(_const.SVG_ICONS, iconSize)) !== null && _c !== void 0 ? _c : (0, _const.FALLBACK_ICON_SVG)(iconSize);
+    var wrapper = document.createElement('span');
+    wrapper.className = this.buildAnchorClassName();
+    wrapper.style.cssText = _const.CSS_TEMPLATES.ANCHOR_WRAPPER;
+    wrapper.innerHTML = _const.HTML_TEMPLATES.ICON_WRAPPER(_const.CLASS_NAMES.TOOLTIP_ICON, iconSvg);
+    this.iconElement = wrapper.querySelector(".".concat(_const.CLASS_NAMES.TOOLTIP_ICON));
+    // body에 레이어/패널 생성(패널 패턴)
+    this.createLayerAndPanel();
+    return wrapper;
+  };
+  // 앵커(아이콘 래퍼) 클래스
+  Tooltip.prototype.buildAnchorClassName = function () {
+    var classes = [_const.CLASS_NAMES.TOOLTIP, "".concat(_const.CLASS_NAMES.TOOLTIP, "--").concat(this.options.size), "".concat(_const.CLASS_NAMES.TOOLTIP, "--").concat(this.options.type)];
+    if (this.options.hideArrow) classes.push(_const.CLASS_NAMES.TOOLTIP_HIDDEN_ARROW);
+    if (this.options.iconType === 'stroke') classes.push(_const.CLASS_NAMES.TOOLTIP_STROKE);
+    if (this.options.position === 'auto') classes.push(_const.CLASS_NAMES.TOOLTIP_AUTO);
+    if (this.options.className) classes.push(this.options.className);
+    return classes.join(' ');
+  };
+  // 패널 클래스 (방향/테마 가짐)
+  Tooltip.prototype.buildPanelClassName = function () {
+    var finalPosition = this.options.position === 'auto' ? this.calculatedPosition : this.options.position;
+    var classes = [_const.CLASS_NAMES.TOOLTIP_PANEL, _const.CLASS_NAMES.TOOLTIP_BG, "".concat(_const.CLASS_NAMES.TOOLTIP_BG, "--").concat(this.options.tooltipType), "".concat(_const.CLASS_NAMES.TOOLTIP_BG, "--").concat(finalPosition)];
+    if (this.isVisible) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_VISIBLE);
+    if (this.isMeasuring) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_MEASURING);
+    if (this.isForceHidden) classes.push(_const.CLASS_NAMES.TOOLTIP_BG_FORCE_HIDDEN);
+    return classes.join(' ');
+  };
+  Tooltip.prototype.renderContentHTML = function () {
+    if (!this.options.content) return '';
+    if (this.options.useShadowDOM) {
+      return _const.HTML_TEMPLATES.TOOLTIP_CONTENT_SHADOW(_const.CLASS_NAMES.TOOLTIP_CONTENT);
+    }
+    return _const.HTML_TEMPLATES.TOOLTIP_CONTENT(_const.CLASS_NAMES.TOOLTIP_CONTENT, this.options.content);
+  };
+  Tooltip.prototype.renderCloseButtonHTML = function () {
+    if (this.options.type !== 'long') return '';
+    var theme = this.options.tooltipType === 'white' ? 'dark' : 'light';
+    var isMobile = window.matchMedia(_breakpoint.MEDIA_QUERY.mobile).matches;
+    var size = isMobile ? 'sm' : 'xs';
+    return (0, _ButtonCloseX.ButtonCloseX)(size, theme, _const.CLASS_NAMES.TOOLTIP_CLOSE_BUTTON, '툴팁 닫기');
+  };
+  /** 전역 레이어에 패널 생성 */
+  Tooltip.prototype.createLayerAndPanel = function () {
+    var _a;
+    // 기존 패널 제거
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    // 새 패널 생성 (zIndex 전달)
+    var zIndex = (_a = this.options.zIndex) !== null && _a !== void 0 ? _a : _const.Z_INDEX.TOOLTIP_LAYER;
+    var _b = this.layerManager.createPanel(zIndex),
+      id = _b.id,
+      panel = _b.panel;
+    this.panelId = id;
+    this.panel = panel;
+    // 패널 설정
+    this.panel.className = this.buildPanelClassName();
+    // 패널 내용 구성
+    var titleHTML = this.options.title ? _const.HTML_TEMPLATES.TOOLTIP_TITLE(_const.CLASS_NAMES.TOOLTIP_TITLE, this.options.title) : '';
+    var contentHTML = this.renderContentHTML();
+    var closeButtonHTML = this.renderCloseButtonHTML();
+    this.panel.innerHTML = "".concat(titleHTML).concat(contentHTML).concat(closeButtonHTML);
+    if (this.options.useShadowDOM && this.options.content) {
+      this.setupShadowContent();
+    }
+    // 패널 클릭(닫기 버튼) 위임
+    this.panel.addEventListener('click', this.boundPanelClick);
+  };
+  Tooltip.prototype.setupShadowContent = function () {
+    if (!this.panel || !this.options.content) return;
+    var container = this.panel.querySelector('[data-shadow-content]');
+    if (!container) return;
+    var shadowRoot = container.attachShadow({
+      mode: 'open'
+    });
+    var style = document.createElement('style');
+    style.textContent = _const.CSS_TEMPLATES.SHADOW_DOM_HOST;
+    shadowRoot.appendChild(style);
+    var temp = document.createElement('div');
+    temp.innerHTML = this.options.content;
+    while (temp.firstChild) shadowRoot.appendChild(temp.firstChild);
+  };
+  /* ========== 이벤트 바인딩/해제 ========== */
+  Tooltip.prototype.bindEvents = function () {
+    this.enableMouseEvents();
+    window.addEventListener('resize', this.boundResizeScroll, _const.EVENT_OPTIONS.PASSIVE);
+    window.addEventListener('scroll', this.boundResizeScroll, _const.EVENT_OPTIONS.PASSIVE);
+  };
+  // tooltip icon위에 마우스 올리면 툴팁 보이기
+  Tooltip.prototype.enableMouseEvents = function () {
+    var _a, _b;
+    (_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.boundMouseEnter);
+    (_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.boundMouseLeave);
+  };
+  Tooltip.prototype.disableMouseEvents = function () {
+    var _a, _b;
+    (_a = this.iconElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.boundMouseEnter);
+    (_b = this.iconElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.boundMouseLeave);
+  };
+  /* ========== 표시/숨김/위치 ========== */
+  Tooltip.prototype.showTooltip = function () {
+    if (!this.panel) return;
+    this.isVisible = true;
+    this.isForceHidden = false; // 강제 숨김 상태 리셋
+    this.updateTooltipPosition();
+    // 보이기
+    this.panel.style.opacity = _const.OPACITY.VISIBLE;
+    this.updatePanelClass();
+  };
+  Tooltip.prototype.hideTooltip = function () {
+    if (!this.panel) return;
+    this.isVisible = false;
+    this.isForceHidden = false; // 강제 숨김 상태 리셋 (다시 표시 가능하도록)
+    this.panel.style.opacity = _const.OPACITY.HIDDEN;
+    this.updatePanelClass();
+    // long 타입에서 hideTooltip()을 호출한 경우 마우스 이벤트 다시 활성화
+    if (this.options.type === 'long') {
+      this.enableMouseEvents();
+    }
+    // 전환 종료 후 완전히 오프스크린 이동 → 히트 테스트 0
+    var el = this.panel;
+    var onEnd = function () {
+      el.style.left = _const.OFFSCREEN_POSITION;
+      el.style.top = _const.OFFSCREEN_POSITION;
+      el.removeEventListener('transitionend', onEnd);
+    };
+    el.addEventListener('transitionend', onEnd, {
+      once: true
+    });
+  };
+  Tooltip.prototype.updateTooltipPosition = function () {
+    var _a;
+    if (!this.panel) return;
+    this.isMeasuring = true;
+    this.updatePanelClass();
+    // 먼저 눈에 보이도록 화면 안쪽으로 잠깐 이동해 사이즈 측정
+    // (opacity는 showTooltip에서만 1로)
+    if (this.panel.style.left === _const.OFFSCREEN_POSITION) {
+      this.panel.style.left = _const.POSITION.INITIAL;
+      this.panel.style.top = _const.POSITION.INITIAL;
+    }
+    var tipRect = this.panel.getBoundingClientRect();
+    var anchor = (_a = this.iconElement) !== null && _a !== void 0 ? _a : this.element;
+    var rect = anchor.getBoundingClientRect();
+    var left = 0;
+    var top = 0;
+    var prefer = this.options.position;
+    if (prefer === 'auto') {
+      var enoughTop = rect.top - _const.TOOLTIP_OFFSET - tipRect.height >= _const.VIEWPORT_MARGIN;
+      prefer = enoughTop ? 'top' : 'bottom';
+    }
+    if (prefer === 'bottom') {
+      top = rect.bottom + _const.TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'bottom';
+    } else if (prefer === 'top') {
+      top = rect.top - tipRect.height - _const.TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'top';
+    } else if (prefer === 'left') {
+      top = rect.top + rect.height / 2 - tipRect.height / 2;
+      left = rect.left - tipRect.width - _const.TOOLTIP_OFFSET;
+      this.calculatedPosition = 'left';
+    } else if (prefer === 'right') {
+      top = rect.top + rect.height / 2 - tipRect.height / 2;
+      left = rect.right + _const.TOOLTIP_OFFSET;
+      this.calculatedPosition = 'right';
+    } else {
+      // fallback: top
+      top = rect.top - tipRect.height - _const.TOOLTIP_OFFSET;
+      left = rect.left + rect.width / 2 - tipRect.width / 2;
+      this.calculatedPosition = 'top';
+    }
+    // 화면 경계 보정
+    left = Math.max(_const.VIEWPORT_MARGIN, Math.min(left, window.innerWidth - tipRect.width - _const.VIEWPORT_MARGIN));
+    top = Math.max(_const.VIEWPORT_MARGIN, Math.min(top, window.innerHeight - tipRect.height - _const.VIEWPORT_MARGIN));
+    this.panel.style.left = "".concat(Math.round(left), "px");
+    this.panel.style.top = "".concat(Math.round(top), "px");
+    this.isMeasuring = false;
+    this.updatePanelClass();
+  };
+  Tooltip.prototype.updatePanelClass = function () {
+    if (!this.panel) return;
+    var newClassName = this.buildPanelClassName();
+    if (this.panel.className !== newClassName) {
+      this.panel.className = newClassName;
+    }
+  };
+  /* ========== Public API ========== */
+  Tooltip.prototype.getElement = function () {
+    return this.element;
+  };
+  /* 기존 옵션 업데이트 ( i18n 적용, 속성 변경 등 옵션 변경 시 사용 ) */
+  Tooltip.prototype.updateOptions = function (newOptions) {
+    var _a;
+    // 기존 리스너/DOM 정리
+    this.disableMouseEvents();
+    window.removeEventListener('resize', this.boundResizeScroll);
+    window.removeEventListener('scroll', this.boundResizeScroll);
+    (_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    // 옵션 병합
+    this.options = __assign(__assign({}, this.options), newOptions);
+    // 앵커 재구성
+    var parent = this.element.parentNode;
+    var newEl = this.createElement();
+    if (parent) parent.replaceChild(newEl, this.element);
+    this.element = newEl;
+    // 리스너 재바인딩
+    this.bindEvents();
+  };
+  /* 정리 메서드 용도 */
+  Tooltip.prototype.destroy = function () {
+    var _a;
+    this.disableMouseEvents();
+    window.removeEventListener('resize', this.boundResizeScroll);
+    window.removeEventListener('scroll', this.boundResizeScroll);
+    (_a = this.panel) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.boundPanelClick);
+    if (this.panelId) {
+      this.layerManager.removePanel(this.panelId);
+    }
+    if (this.element.parentNode) this.element.parentNode.removeChild(this.element);
+  };
+  /* ========== 팩토리 메서드 ========== */
+  Tooltip.create = function (options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(options);
+  };
+  Tooltip.createShort = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'short',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createLong = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAuto = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      position: 'auto',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAutoLong = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      position: 'auto',
+      title: title,
+      content: content
+    }, options));
+  };
+  Tooltip.createAutoLongWithShadowDOM = function (title, content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return new Tooltip(__assign({
+      type: 'long',
+      position: 'auto',
+      title: title,
+      content: content,
+      useShadowDOM: true
+    }, options));
+  };
+  return Tooltip;
+}();

package/dist/cjs/assets/scripts/tooltip/TooltipLayerManager.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipLayerManager = void 0;
+var _const = require("./const");
+/**
+ * 툴팁 레이어 관리자
+ * 전역 레이어 하나를 사용하여 모든 툴팁 패널을 관리합니다.
+ */
+var TooltipLayerManager = exports.TooltipLayerManager = /** @class */function () {
+  function TooltipLayerManager() {
+    this.layer = null;
+    this.panels = new Map();
+    this.nextId = 0;
+    this.maxZIndex = _const.Z_INDEX.TOOLTIP_LAYER; // 기본 z-index (가장 높은 값 추적)
+    this.createGlobalLayer();
+  }
+  TooltipLayerManager.getInstance = function () {
+    if (!this.instance) {
+      this.instance = new TooltipLayerManager();
+    }
+    return this.instance;
+  };
+  TooltipLayerManager.prototype.createGlobalLayer = function () {
+    // 기존 레이어가 있으면 제거
+    var existingLayer = document.getElementById('tooltip-global-layer');
+    if (existingLayer) {
+      existingLayer.remove();
+    }
+    this.layer = document.createElement('div');
+    this.layer.id = 'tooltip-global-layer';
+    this.layer.className = _const.CLASS_NAMES.TOOLTIP_GLOBAL_LAYER;
+    this.layer.style.zIndex = String(this.maxZIndex);
+    document.body.appendChild(this.layer);
+  };
+  TooltipLayerManager.prototype.createPanel = function (zIndex) {
+    if (zIndex === void 0) {
+      zIndex = _const.Z_INDEX.TOOLTIP_LAYER;
+    }
+    if (!this.layer) {
+      this.createGlobalLayer();
+    }
+    // 최대 z-index 추적 및 전역 레이어 업데이트
+    // 왜 이런 구현이 필요한지..? 툴팁 레이어 매니저는 바디에 무분별하게 붙는걸 방지하기 위해 하나의 전역 레이아웃입니다. 툴팁 20개씩 붙는 페이지를 위함
+    // 전역 레이어의 z-index는 자식과 일치되면 가장 좋지만, 수시로 변하는 z-index를 추적하는 것이 디버깅측면에서 좋지않고 버그를 유발할 가능성이 높아보여
+    // 툴팁은 보통은 고정된값을 사용하기에, 변동이 없다고 가정하고, 변동되는 경우에만 가장 높은 z-index를 추적하고 업데이트하는 구현을 하였습니다.
+    if (zIndex > this.maxZIndex) {
+      this.maxZIndex = zIndex;
+      if (this.layer) {
+        this.layer.style.zIndex = String(this.maxZIndex);
+      }
+    }
+    var id = "tooltip-panel-".concat(++this.nextId);
+    var panel = document.createElement('span');
+    panel.id = id;
+    panel.className = _const.CLASS_NAMES.TOOLTIP_PANEL;
+    this.panels.set(id, panel);
+    this.layer.appendChild(panel);
+    return {
+      id: id,
+      panel: panel
+    };
+  };
+  TooltipLayerManager.prototype.removePanel = function (id) {
+    var panel = this.panels.get(id);
+    if (panel && panel.parentNode) {
+      panel.parentNode.removeChild(panel);
+      this.panels.delete(id);
+    }
+  };
+  TooltipLayerManager.prototype.getPanel = function (id) {
+    return this.panels.get(id) || null;
+  };
+  TooltipLayerManager.prototype.destroy = function () {
+    this.panels.clear();
+    if (this.layer && this.layer.parentNode) {
+      this.layer.parentNode.removeChild(this.layer);
+    }
+    this.layer = null;
+  };
+  return TooltipLayerManager;
+}();

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CLASS_NAMES = void 0;
+// Tooltip CSS 클래스명 상수들
+var CLASS_NAMES = exports.CLASS_NAMES = {
+  // 기본 클래스
+  TOOLTIP: 'ncua-tooltip',
+  TOOLTIP_ICON: 'ncua-tooltip__icon',
+  TOOLTIP_BG: 'ncua-tooltip__bg',
+  TOOLTIP_TITLE: 'ncua-tooltip__title',
+  TOOLTIP_CONTENT: 'ncua-tooltip__content',
+  TOOLTIP_CLOSE_BUTTON: 'ncua-tooltip__close-button',
+  // 수정자 클래스 (modifier classes)
+  TOOLTIP_HIDDEN_ARROW: 'ncua-tooltip--hidden-arrow',
+  TOOLTIP_STROKE: 'ncua-tooltip--stroke',
+  TOOLTIP_AUTO: 'ncua-tooltip--auto',
+  // 배경 상태 클래스
+  TOOLTIP_BG_VISIBLE: 'ncua-tooltip__bg--visible',
+  TOOLTIP_BG_MEASURING: 'ncua-tooltip__bg--measuring',
+  TOOLTIP_BG_FORCE_HIDDEN: 'ncua-tooltip__bg--force-hidden',
+  // 레이어 관련 클래스
+  TOOLTIP_GLOBAL_LAYER: 'ncua-tooltip-global-layer',
+  TOOLTIP_PANEL: 'ncua-tooltip-panel',
+  // 버튼 클래스
+  BUTTON_CLOSE_X: 'ncua-button-close-x'
+};

package/dist/cjs/assets/scripts/tooltip/const/constants.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Z_INDEX = exports.VIEWPORT_MARGIN = exports.TRANSITION_DURATION = exports.TOOLTIP_OFFSET = exports.TOOLTIP_DEFAULT_VALUE = exports.POSITION_PRIORITY = exports.POSITION = exports.OPACITY = exports.OFFSCREEN_POSITION = exports.MARGIN = exports.ICON_SIZES = exports.EVENT_OPTIONS = exports.DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_HEIGHT = void 0;
+var MARGIN = exports.MARGIN = 10;
+var DEFAULT_TOOLTIP_WIDTH = exports.DEFAULT_TOOLTIP_WIDTH = 200;
+var DEFAULT_TOOLTIP_HEIGHT = exports.DEFAULT_TOOLTIP_HEIGHT = 60;
+var POSITION_PRIORITY = exports.POSITION_PRIORITY = ['bottom', 'top', 'right', 'left'];
+// 툴팁 위치 계산 관련 상수
+var TOOLTIP_OFFSET = exports.TOOLTIP_OFFSET = 8; // 툴팁과 앵커 사이의 거리
+var VIEWPORT_MARGIN = exports.VIEWPORT_MARGIN = 8; // 뷰포트 경계와의 최소 거리
+// 아이콘 크기 상수
+var ICON_SIZES = exports.ICON_SIZES = {
+  sm: 14,
+  md: 16
+};
+// 애니메이션 관련 상수
+var TRANSITION_DURATION = exports.TRANSITION_DURATION = '0.18s';
+var OFFSCREEN_POSITION = exports.OFFSCREEN_POSITION = '-99999px';
+// 툴팁 상태 관련 상수
+var OPACITY = exports.OPACITY = {
+  HIDDEN: '0',
+  VISIBLE: '1'
+};
+var POSITION = exports.POSITION = {
+  INITIAL: '0px',
+  OFFSCREEN: OFFSCREEN_POSITION
+};
+// z-index 관련 상수
+var Z_INDEX = exports.Z_INDEX = {
+  TOOLTIP_LAYER: 2000 // 툴팁 전역 레이어 기본 z-index
+};
+// 이벤트 관련 상수
+var EVENT_OPTIONS = exports.EVENT_OPTIONS = {
+  PASSIVE: {
+    passive: true
+  },
+  ONCE: {
+    once: true
+  }
+};
+var TOOLTIP_DEFAULT_VALUE = exports.TOOLTIP_DEFAULT_VALUE = {
+  tooltipType: 'white',
+  iconType: 'stroke',
+  position: 'auto',
+  size: 'sm',
+  hideArrow: false,
+  title: '',
+  content: '',
+  type: 'short',
+  zIndex: Z_INDEX.TOOLTIP_LAYER,
+  useShadowDOM: false,
+  className: '' // 커스텀 클래스명
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SVG_ICONS = void 0;
+// SVG 아이콘들
+var SVG_ICONS = exports.SVG_ICONS = {
+  'help-circle-stroke': 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\">\n      <path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10\"></path>\n    </svg>");
+  },
+  'help-circle-fill': 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\">\n      <path fill=\"currentColor\" fill-rule=\"evenodd\" d=\"M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1m-1.093 7.271a2 2 0 0 1 3.013 1.727V10c0 .47-.365.958-1.055 1.418a6 6 0 0 1-1.262.634 1 1 0 0 0 .633 1.897l.169-.061a8.05 8.05 0 0 0 1.57-.806c.81-.54 1.944-1.55 1.945-3.081a4 4 0 0 0-7.773-1.333 1 1 0 0 0 1.886.664 2 2 0 0 1 .874-1.06M12 16a1 1 0 1 0 0 2h.01a1 1 0 0 0 0-2z\" clip-rule=\"evenodd\"></path>\n    </svg>");
+  }
+};

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CLASS_NAMES", {
+  enumerable: true,
+  get: function () {
+    return _classNames.CLASS_NAMES;
+  }
+});
+Object.defineProperty(exports, "CSS_TEMPLATES", {
+  enumerable: true,
+  get: function () {
+    return _templates.CSS_TEMPLATES;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_HEIGHT", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_TOOLTIP_HEIGHT;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_TOOLTIP_WIDTH", {
+  enumerable: true,
+  get: function () {
+    return _constants.DEFAULT_TOOLTIP_WIDTH;
+  }
+});
+Object.defineProperty(exports, "EVENT_OPTIONS", {
+  enumerable: true,
+  get: function () {
+    return _constants.EVENT_OPTIONS;
+  }
+});
+Object.defineProperty(exports, "FALLBACK_ICON_SVG", {
+  enumerable: true,
+  get: function () {
+    return _templates.FALLBACK_ICON_SVG;
+  }
+});
+Object.defineProperty(exports, "HTML_TEMPLATES", {
+  enumerable: true,
+  get: function () {
+    return _templates.HTML_TEMPLATES;
+  }
+});
+Object.defineProperty(exports, "ICON_SIZES", {
+  enumerable: true,
+  get: function () {
+    return _constants.ICON_SIZES;
+  }
+});
+Object.defineProperty(exports, "MARGIN", {
+  enumerable: true,
+  get: function () {
+    return _constants.MARGIN;
+  }
+});
+Object.defineProperty(exports, "OFFSCREEN_POSITION", {
+  enumerable: true,
+  get: function () {
+    return _constants.OFFSCREEN_POSITION;
+  }
+});
+Object.defineProperty(exports, "OPACITY", {
+  enumerable: true,
+  get: function () {
+    return _constants.OPACITY;
+  }
+});
+Object.defineProperty(exports, "POSITION", {
+  enumerable: true,
+  get: function () {
+    return _constants.POSITION;
+  }
+});
+Object.defineProperty(exports, "POSITION_PRIORITY", {
+  enumerable: true,
+  get: function () {
+    return _constants.POSITION_PRIORITY;
+  }
+});
+Object.defineProperty(exports, "SVG_ICONS", {
+  enumerable: true,
+  get: function () {
+    return _icons.SVG_ICONS;
+  }
+});
+Object.defineProperty(exports, "TOOLTIP_DEFAULT_VALUE", {
+  enumerable: true,
+  get: function () {
+    return _constants.TOOLTIP_DEFAULT_VALUE;
+  }
+});
+Object.defineProperty(exports, "TOOLTIP_OFFSET", {
+  enumerable: true,
+  get: function () {
+    return _constants.TOOLTIP_OFFSET;
+  }
+});
+Object.defineProperty(exports, "TRANSITION_DURATION", {
+  enumerable: true,
+  get: function () {
+    return _constants.TRANSITION_DURATION;
+  }
+});
+Object.defineProperty(exports, "VIEWPORT_MARGIN", {
+  enumerable: true,
+  get: function () {
+    return _constants.VIEWPORT_MARGIN;
+  }
+});
+Object.defineProperty(exports, "Z_INDEX", {
+  enumerable: true,
+  get: function () {
+    return _constants.Z_INDEX;
+  }
+});
+var _icons = require("./icons");
+var _classNames = require("./classNames");
+var _constants = require("./constants");
+var _templates = require("./templates");