@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/assets/scripts/table/Table.js

@@ -1,370 +0,0 @@
-import { TABLE_CLASS_NAMES } from './const/classNames';
-const TABLE_DIMENSIONS = {
-  CHECKBOX_CELL_WIDTH: '56px',
-  HEADER_HEIGHT: 40,
-  ROW_MIN_HEIGHT: 48,
-  CHECKBOX_PADDING: '16px'
-};
-const SORT_SVG = {
-  none: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 6L8 2.5L11.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.5 10L8 13.5L11.5 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
-  asc: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 9.5L8 6L11.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
-  desc: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 6.5L8 10L11.5 6.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
-};
-const ARIA_SORT_VALUES = {
-  asc: 'ascending',
-  desc: 'descending',
-  none: 'none'
-};
-export class Table {
-  constructor(options) {
-    this.theadElement = null;
-    this.sortState = new Map();
-    this.selectedIndices = new Set();
-    this.abortController = new AbortController();
-    this.options = {
-      type: 'horizontal',
-      hoverable: true,
-      selectable: false,
-      fixedHeader: false,
-      emptyText: '등록된 게시물이 없습니다.',
-      ...options
-    };
-    this.createElement();
-  }
-  createElement() {
-    this.createOuterElement();
-    this.createTableElement();
-    this.renderBody();
-    this.wrapWithScrollContainer();
-  }
-  createOuterElement() {
-    this.element = document.createElement('div');
-    this.updateOuterClasses();
-  }
-  createTableElement() {
-    this.tableElement = document.createElement('table');
-    this.tableElement.className = TABLE_CLASS_NAMES.tableElement;
-    this.tableElement.setAttribute('role', 'table');
-    if (this.options.columns) {
-      this.createColGroup();
-      if (this.options.type === 'horizontal') {
-        this.createHeader();
-      }
-    }
-    this.tbodyElement = document.createElement('tbody');
-    this.tbodyElement.className = TABLE_CLASS_NAMES.body;
-    this.tableElement.appendChild(this.tbodyElement);
-  }
-  wrapWithScrollContainer() {
-    if (this.options.fixedHeader && this.options.maxHeight) {
-      const scrollContainer = document.createElement('div');
-      scrollContainer.className = TABLE_CLASS_NAMES.scrollContainer;
-      scrollContainer.style.maxHeight = this.options.maxHeight;
-      scrollContainer.appendChild(this.tableElement);
-      this.element.appendChild(scrollContainer);
-    } else {
-      this.element.appendChild(this.tableElement);
-    }
-  }
-  updateOuterClasses() {
-    const classes = [TABLE_CLASS_NAMES.table];
-    if (this.options.type === 'horizontal') {
-      classes.push(TABLE_CLASS_NAMES.horizontal);
-    } else {
-      classes.push(TABLE_CLASS_NAMES.vertical);
-    }
-    if (this.options.hoverable && this.options.type === 'horizontal') {
-      classes.push(TABLE_CLASS_NAMES.hoverable);
-    }
-    if (this.options.fixedHeader) {
-      classes.push(TABLE_CLASS_NAMES.fixedHeader);
-    }
-    this.element.className = classes.join(' ');
-  }
-  createColGroup() {
-    const colgroup = document.createElement('colgroup');
-    if (this.options.selectable) {
-      const column = document.createElement('col');
-      column.style.width = TABLE_DIMENSIONS.CHECKBOX_CELL_WIDTH;
-      colgroup.appendChild(column);
-    }
-    for (const columnConfig of this.options.columns ?? []) {
-      const column = document.createElement('col');
-      if (columnConfig.width) {
-        column.style.width = columnConfig.width;
-      }
-      colgroup.appendChild(column);
-    }
-    this.tableElement.appendChild(colgroup);
-  }
-  createHeader() {
-    this.theadElement = document.createElement('thead');
-    this.theadElement.className = TABLE_CLASS_NAMES.header;
-    const tableRow = document.createElement('tr');
-    if (this.options.selectable) {
-      tableRow.appendChild(this.createHeaderCheckboxCell());
-    }
-    for (const column of this.options.columns ?? []) {
-      tableRow.appendChild(this.createHeaderDataCell(column));
-    }
-    this.theadElement.appendChild(tableRow);
-    this.tableElement.appendChild(this.theadElement);
-  }
-  createHeaderCheckboxCell() {
-    const headerCell = document.createElement('th');
-    headerCell.className = `${TABLE_CLASS_NAMES.checkboxCell} ${TABLE_CLASS_NAMES.checkboxCellHeader}`;
-    const wrapper = document.createElement('span');
-    wrapper.className = 'ncua-checkbox-input ncua-checkbox-input--sm';
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.setAttribute('aria-label', '전체 선택');
-    checkbox.addEventListener('change', () => this.handleSelectAll(checkbox.checked), {
-      signal: this.abortController.signal
-    });
-    wrapper.appendChild(checkbox);
-    headerCell.appendChild(wrapper);
-    return headerCell;
-  }
-  createHeaderDataCell(column) {
-    const headerCell = document.createElement('th');
-    headerCell.className = TABLE_CLASS_NAMES.headerCell;
-    if (column.width) {
-      headerCell.style.width = column.width;
-    }
-    const innerContainer = document.createElement('span');
-    innerContainer.className = 'ncua-table__header-cell-inner';
-    const textSpan = document.createElement('span');
-    textSpan.className = 'ncua-table__header-cell-text';
-    textSpan.textContent = column.label;
-    innerContainer.appendChild(textSpan);
-    if (column.sortable) {
-      headerCell.classList.add(TABLE_CLASS_NAMES.headerCellSortable);
-      this.sortState.set(column.key, 'none');
-      const sortIcon = document.createElement('span');
-      sortIcon.className = TABLE_CLASS_NAMES.sortIcon;
-      sortIcon.innerHTML = SORT_SVG.none;
-      innerContainer.appendChild(sortIcon);
-      headerCell.addEventListener('click', () => this.handleSort(column.key, headerCell), {
-        signal: this.abortController.signal
-      });
-    }
-    headerCell.appendChild(innerContainer);
-    return headerCell;
-  }
-  renderBody() {
-    this.tbodyElement.innerHTML = '';
-    const data = this.options.data || [];
-    if (data.length === 0) {
-      this.renderEmptyState();
-      return;
-    }
-    if (this.options.type === 'vertical') {
-      this.renderVerticalBody(data);
-      return;
-    }
-    this.renderHorizontalBody(data);
-  }
-  renderEmptyState() {
-    const columnCount = (this.options.columns?.length || 1) + (this.options.selectable ? 1 : 0);
-    const tableRow = document.createElement('tr');
-    const tableCell = document.createElement('td');
-    tableCell.colSpan = columnCount;
-    tableCell.className = TABLE_CLASS_NAMES.empty;
-    tableCell.setAttribute('role', 'status');
-    tableCell.setAttribute('aria-live', 'polite');
-    tableCell.textContent = this.options.emptyText;
-    tableRow.appendChild(tableCell);
-    this.tbodyElement.appendChild(tableRow);
-  }
-  renderHorizontalBody(data) {
-    for (let rowIndex = 0; rowIndex < data.length; rowIndex++) {
-      const tableRow = this.createHorizontalRow(data[rowIndex], rowIndex);
-      this.tbodyElement.appendChild(tableRow);
-    }
-  }
-  createRowCheckboxCell(rowIndex) {
-    const tableCell = document.createElement('td');
-    tableCell.className = `${TABLE_CLASS_NAMES.checkboxCell} ${TABLE_CLASS_NAMES.checkboxCellBody}`;
-    const wrapper = document.createElement('span');
-    wrapper.className = 'ncua-checkbox-input ncua-checkbox-input--sm';
-    const checkbox = document.createElement('input');
-    checkbox.type = 'checkbox';
-    checkbox.checked = this.selectedIndices.has(rowIndex);
-    checkbox.setAttribute('aria-label', '행 선택');
-    checkbox.addEventListener('change', () => this.handleRowSelect(rowIndex, checkbox.checked), {
-      signal: this.abortController.signal
-    });
-    if (this.selectedIndices.has(rowIndex)) {
-      wrapper.classList.add('has-checked');
-    }
-    wrapper.appendChild(checkbox);
-    tableCell.appendChild(wrapper);
-    return tableCell;
-  }
-  createHorizontalRow(row, rowIndex) {
-    const tableRow = document.createElement('tr');
-    tableRow.className = TABLE_CLASS_NAMES.row;
-    if (this.selectedIndices.has(rowIndex)) {
-      tableRow.classList.add(TABLE_CLASS_NAMES.rowSelected);
-    }
-    if (this.options.selectable) {
-      tableRow.appendChild(this.createRowCheckboxCell(rowIndex));
-    }
-    for (const column of this.options.columns ?? []) {
-      const tableCell = document.createElement('td');
-      tableCell.className = TABLE_CLASS_NAMES.cell;
-      if (column.align) {
-        tableCell.style.textAlign = column.align;
-      }
-      if (column.render) {
-        const rendered = column.render(row[column.key], row, rowIndex);
-        if (typeof rendered === 'string') {
-          tableCell.textContent = rendered;
-        } else {
-          tableCell.appendChild(rendered);
-        }
-      } else {
-        const value = row[column.key];
-        tableCell.textContent = value != null ? String(value) : '-';
-      }
-      tableRow.appendChild(tableCell);
-    }
-    return tableRow;
-  }
-  renderVerticalBody(data) {
-    const row = data[0] || {};
-    for (const column of this.options.columns ?? []) {
-      const tableRow = this.createVerticalRow(column, row);
-      this.tbodyElement.appendChild(tableRow);
-    }
-  }
-  createVerticalRow(column, row) {
-    const tableRow = document.createElement('tr');
-    tableRow.className = TABLE_CLASS_NAMES.row;
-    const labelCell = document.createElement('td');
-    labelCell.className = TABLE_CLASS_NAMES.cell;
-    labelCell.textContent = column.label;
-    tableRow.appendChild(labelCell);
-    const valueCell = this.createVerticalValueCell(column, row);
-    tableRow.appendChild(valueCell);
-    return tableRow;
-  }
-  createVerticalValueCell(column, row) {
-    const valueCell = document.createElement('td');
-    valueCell.className = TABLE_CLASS_NAMES.cell;
-    if (column.render) {
-      const rendered = column.render(row[column.key], row, 0);
-      if (typeof rendered === 'string') {
-        valueCell.textContent = rendered;
-      } else {
-        valueCell.appendChild(rendered);
-      }
-    } else {
-      const value = row[column.key];
-      valueCell.textContent = value != null ? String(value) : '-';
-    }
-    return valueCell;
-  }
-  handleSort(key, thElement) {
-    const nextDirection = this.getNextSortDirection(key);
-    for (const [sortKey] of this.sortState) {
-      this.sortState.set(sortKey, 'none');
-    }
-    this.sortState.set(key, nextDirection);
-    this.updateSortIcons(thElement, nextDirection);
-    thElement.setAttribute('aria-sort', this.getAriaSortValue(nextDirection));
-    this.options.onSort?.(key, nextDirection);
-  }
-  getNextSortDirection(key) {
-    const currentDirection = this.sortState.get(key) || 'none';
-    if (currentDirection === 'none') {
-      return 'asc';
-    }
-    if (currentDirection === 'asc') {
-      return 'desc';
-    }
-    return 'none';
-  }
-  updateSortIcons(thElement, direction) {
-    const allHeaders = this.theadElement?.querySelectorAll(`.${TABLE_CLASS_NAMES.headerCell}`);
-    allHeaders?.forEach(header => {
-      const icon = header.querySelector(`.${TABLE_CLASS_NAMES.sortIcon}`);
-      if (icon) {
-        icon.innerHTML = SORT_SVG.none;
-      }
-    });
-    const sortIcon = thElement.querySelector(`.${TABLE_CLASS_NAMES.sortIcon}`);
-    if (sortIcon) {
-      sortIcon.innerHTML = SORT_SVG[direction];
-    }
-  }
-  getAriaSortValue(direction) {
-    return ARIA_SORT_VALUES[direction];
-  }
-  handleSelectAll(checked) {
-    this.selectedIndices.clear();
-    if (checked && this.options.data) {
-      for (let index = 0; index < this.options.data.length; index++) {
-        this.selectedIndices.add(index);
-      }
-    }
-    this.updateRowSelectionStyles();
-    this.updateHeaderCheckbox();
-    this.options.onSelect?.([...this.selectedIndices]);
-  }
-  handleRowSelect(index, checked) {
-    if (checked) {
-      this.selectedIndices.add(index);
-    } else {
-      this.selectedIndices.delete(index);
-    }
-    this.updateRowSelectionStyles();
-    this.updateHeaderCheckbox();
-    this.options.onSelect?.([...this.selectedIndices]);
-  }
-  updateRowSelectionStyles() {
-    const rows = this.tbodyElement.querySelectorAll(`.${TABLE_CLASS_NAMES.row}`);
-    rows.forEach((row, index) => {
-      const isSelected = this.selectedIndices.has(index);
-      row.classList.toggle(TABLE_CLASS_NAMES.rowSelected, isSelected);
-      const checkbox = row.querySelector('input[type="checkbox"]');
-      if (checkbox) {
-        checkbox.checked = isSelected;
-      }
-      const wrapper = row.querySelector('.ncua-checkbox-input');
-      if (wrapper) {
-        wrapper.classList.toggle('has-checked', isSelected);
-      }
-    });
-  }
-  updateHeaderCheckbox() {
-    const headerWrapper = this.theadElement?.querySelector('.ncua-checkbox-input');
-    const headerCheckbox = headerWrapper?.querySelector('input[type="checkbox"]');
-    if (!headerWrapper || !headerCheckbox || !this.options.data) return;
-    const total = this.options.data.length;
-    const selectedCount = this.selectedIndices.size;
-    const isAllSelected = selectedCount === total && total > 0;
-    const isIndeterminate = selectedCount > 0 && selectedCount < total;
-    headerCheckbox.checked = isAllSelected;
-    headerCheckbox.indeterminate = isIndeterminate;
-    headerWrapper.classList.toggle('has-checked', isAllSelected);
-    headerWrapper.classList.toggle('has-indeterminate', isIndeterminate);
-  }
-  // ──────── Public API ────────
-  getElement() {
-    return this.element;
-  }
-  setData(data) {
-    this.options.data = data;
-    this.selectedIndices.clear();
-    this.renderBody();
-    this.updateHeaderCheckbox();
-  }
-  getSelectedIndices() {
-    return [...this.selectedIndices];
-  }
-  destroy() {
-    this.abortController.abort();
-    this.element.remove();
-  }
-}

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

@@ -1,27 +0,0 @@
-export const TABLE_CLASS_NAMES = {
-  table: 'ncua-table',
-  horizontal: 'ncua-table--horizontal',
-  vertical: 'ncua-table--vertical',
-  hoverable: 'ncua-table--hoverable',
-  fixedHeader: 'ncua-table--fixed-header',
-  scrollContainer: 'ncua-table__scroll-container',
-  tableElement: 'ncua-table__table',
-  header: 'ncua-table__header',
-  headerCell: 'ncua-table__header-cell',
-  headerCellSortable: 'ncua-table__header-cell--sortable',
-  sortIcon: 'ncua-table__sort-icon',
-  body: 'ncua-table__body',
-  row: 'ncua-table__row',
-  rowSelected: 'ncua-table__row--selected',
-  rowWarning: 'ncua-table__row--warning',
-  rowError: 'ncua-table__row--error',
-  cell: 'ncua-table__cell',
-  checkboxCell: 'ncua-table__checkbox-cell',
-  checkboxCellHeader: 'ncua-table__checkbox-cell--header',
-  checkboxCellBody: 'ncua-table__checkbox-cell--body',
-  footer: 'ncua-table__footer',
-  footerRow: 'ncua-table__footer-row',
-  pagination: 'ncua-table__pagination',
-  empty: 'ncua-table__empty',
-  required: 'ncua-table__required'
-};

package/dist/esm/assets/scripts/table/const/index.js

@@ -1,2 +0,0 @@
-export * from './classNames';
-export * from './types';

package/dist/esm/assets/scripts/table/index.js

@@ -1,8 +0,0 @@
-import { Table } from './Table';
-if (typeof window !== 'undefined') {
-  window.ncua = window.ncua || {};
-  window.ncua.Table = Table;
-}
-export * from './const/classNames';
-export * from './const/types';
-export { Table } from './Table';

package/dist/esm/assets/scripts/tag/Tag.js

@@ -1,254 +0,0 @@
-import { TAG_CLASS_NAMES, getTagSizeClassName, getTooltipPositionClassName } from './const/classNames';
-import { iconSize, DEFAULT_TOOLTIP_WIDTH, DEFAULT_TOOLTIP_HEIGHT, MARGIN } from './const/sizes';
-// CSS 변수 값을 가져오는 유틸리티 함수
-const getCSSVariable = function (variableName) {
-  let fallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim() || fallback;
-};
-// 위치 계산 로직
-const calculateOptimalPosition = (triggerElement, tooltipElement) => {
-  const triggerRect = triggerElement.getBoundingClientRect();
-  const tooltipRect = tooltipElement.getBoundingClientRect();
-  const {
-    innerWidth: viewportWidth,
-    innerHeight: viewportHeight
-  } = window;
-  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  const spaces = {
-    top: triggerRect.top,
-    bottom: viewportHeight - triggerRect.bottom,
-    left: triggerRect.left,
-    right: viewportWidth - triggerRect.right
-  };
-  // 위/아래 공간을 먼저 확인하고 우선순위 결정
-  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
-  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-  const positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-  for (const position of positions) {
-    const isTop = position.includes('top');
-    const isRight = position.includes('right');
-    const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-    const hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
-    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
-    if (hasVerticalSpace && hasHorizontalSpace) {
-      return position;
-    }
-  }
-  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
-  return fallbackPosition;
-};
-export class Tag {
-  constructor(options) {
-    this.isTooltipVisible = false;
-    this.calculatedPosition = 'top-right';
-    this.tooltipElement = null;
-    this.handleMouseEnter = () => {
-      if (!this.shouldTruncate()) return;
-      this.isTooltipVisible = true;
-      // 위치 계산
-      if (this.tooltipElement) {
-        const optimalPosition = calculateOptimalPosition(this.element, this.tooltipElement);
-        this.calculatedPosition = optimalPosition;
-      } else {
-        // 툴팁이 없으면 더미 요소로 계산
-        const dummyTooltipElement = document.createElement('div');
-        dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
-        dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
-        const optimalPosition = calculateOptimalPosition(this.element, dummyTooltipElement);
-        this.calculatedPosition = optimalPosition;
-      }
-      this.createTooltip();
-    };
-    this.handleMouseLeave = () => {
-      this.removeTooltip(); // removeTooltip에서 isTooltipVisible을 false로 설정
-    };
-    this.options = {
-      size: 'sm',
-      maxLength: 20,
-      ...options
-    };
-    this.createElement();
-  }
-  createElement() {
-    // 메인 태그 요소 생성
-    this.element = document.createElement('span');
-    this.element.className = this.getTagClasses();
-    // 텍스트 길이 체크 및 말줄임 처리
-    const shouldTruncate = this.shouldTruncate();
-    const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
-    // 아이콘 추가
-    if (this.options.icon) {
-      const iconElement = this.createSideSlot(this.options.icon);
-      if (iconElement) {
-        this.element.appendChild(iconElement);
-      }
-    }
-    // 텍스트 요소 생성
-    const textElement = document.createElement('span');
-    textElement.className = TAG_CLASS_NAMES.text;
-    textElement.textContent = displayText;
-    this.element.appendChild(textElement);
-    // 카운트 추가
-    if (this.options.count) {
-      const countElement = document.createElement('span');
-      countElement.className = TAG_CLASS_NAMES.count;
-      countElement.textContent = this.options.count;
-      this.element.appendChild(countElement);
-    }
-    // 닫기 버튼 추가
-    if (this.options.close) {
-      const closeButton = this.createCloseButton();
-      this.element.appendChild(closeButton);
-    }
-    // 툴팁 이벤트 리스너 추가 (텍스트가 잘린 경우에만)
-    if (shouldTruncate) {
-      this.element.addEventListener('mouseenter', this.handleMouseEnter);
-      this.element.addEventListener('mouseleave', this.handleMouseLeave);
-    }
-  }
-  getTagClasses() {
-    const classes = [TAG_CLASS_NAMES.tag, getTagSizeClassName(this.options.size)];
-    if (this.shouldTruncate()) {
-      classes.push(TAG_CLASS_NAMES.truncated);
-    }
-    return classes.join(' ');
-  }
-  shouldTruncate() {
-    return this.options.text.length > this.options.maxLength;
-  }
-  getTruncatedText() {
-    return `${this.options.text.slice(0, this.options.maxLength - 2)}...`;
-  }
-  createSideSlot(slot) {
-    if (slot.type === 'icon') {
-      // 아이콘 SVG 문자열을 DOM 요소로 변환 (DOMParser 사용)
-      const iconSVG = this.createIconSVG(slot.icon, iconSize[this.options.size], slot.color);
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(iconSVG, 'image/svg+xml');
-      return doc.documentElement;
-    }
-    if (slot.type === 'dot') {
-      const dotElement = document.createElement('span');
-      dotElement.className = `ncua-dot ncua-dot--neutral ncua-dot--${slot.size || 'sm'}`;
-      if (slot.color) {
-        dotElement.style.backgroundColor = slot.color;
-      }
-      return dotElement;
-    }
-    // 커스텀 요소는 그대로 반환
-    return slot.children;
-  }
-  createIconSVG(iconName, size, color) {
-    const colorStyle = color ? ` style="color: ${color}"` : '';
-    // 현재는 arrow-left 아이콘만 지원
-    if (iconName === 'arrow-left') {
-      return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}>
-        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 12H5m0 0 7 7m-7-7 7-7" />
-      </svg>`;
-    }
-    // 기본 빈 SVG
-    return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="none"${colorStyle}></svg>`;
-  }
-  createCloseButton() {
-    // react와 동일한 구조로 직접 구현
-    const button = document.createElement('button');
-    button.type = 'button';
-    button.className = TAG_CLASS_NAMES.close;
-    // React 버전과 동일한 SVG 생성 (문자열 방식)
-    const grayColor = getCSSVariable('--gray-300', '#a4a5a8');
-    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize[this.options.size]}" height="${iconSize[this.options.size]}" fill="none" viewBox="0 0 24 24" stroke="none" style="color: ${grayColor}">
-      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6 6 18M6 6l12 12" />
-    </svg>`;
-    // DOMParser로 SVG 문자열을 DOM 요소로 변환
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString, 'image/svg+xml');
-    const svg = doc.documentElement;
-    button.appendChild(svg);
-    // 이벤트 리스너 추가
-    if (this.options.onButtonClick) {
-      button.addEventListener('click', this.options.onButtonClick);
-    }
-    return button;
-  }
-  createTooltip() {
-    if (this.tooltipElement || !this.isTooltipVisible) {
-      return; // 이미 생성됨 또는 표시하지 않음
-    }
-    this.tooltipElement = document.createElement('span');
-    this.tooltipElement.className = `${TAG_CLASS_NAMES.tooltip} ${getTooltipPositionClassName(this.calculatedPosition)}`;
-    const tooltipContent = document.createElement('span');
-    tooltipContent.className = TAG_CLASS_NAMES.tooltipContent;
-    tooltipContent.textContent = this.options.text;
-    this.tooltipElement.appendChild(tooltipContent);
-    this.element.appendChild(this.tooltipElement);
-  }
-  removeTooltip() {
-    if (this.tooltipElement) {
-      this.element.removeChild(this.tooltipElement);
-      this.tooltipElement = null;
-    }
-    this.isTooltipVisible = false;
-  }
-  getElement() {
-    return this.element;
-  }
-  isTooltipShown() {
-    return this.isTooltipVisible;
-  }
-  setText(text) {
-    this.options.text = text;
-    this.updateTextElement();
-  }
-  setCount(count) {
-    this.options.count = count;
-    this.updateCountElement();
-  }
-  updateTextElement() {
-    const textElement = this.element.querySelector(`.${TAG_CLASS_NAMES.text}`);
-    if (textElement) {
-      const shouldTruncate = this.shouldTruncate();
-      const displayText = shouldTruncate ? this.getTruncatedText() : this.options.text;
-      textElement.textContent = displayText;
-      // 클래스 업데이트
-      if (shouldTruncate) {
-        this.element.classList.add(TAG_CLASS_NAMES.truncated);
-      } else {
-        this.element.classList.remove(TAG_CLASS_NAMES.truncated);
-      }
-    }
-  }
-  updateCountElement() {
-    const existingCount = this.element.querySelector(`.${TAG_CLASS_NAMES.count}`);
-    if (this.options.count) {
-      if (existingCount) {
-        existingCount.textContent = this.options.count;
-      } else {
-        // 카운트 요소 새로 생성
-        const countElement = document.createElement('span');
-        countElement.className = TAG_CLASS_NAMES.count;
-        countElement.textContent = this.options.count;
-        // 닫기 버튼 앞에 삽입
-        const closeButton = this.element.querySelector(`.${TAG_CLASS_NAMES.close}`);
-        if (closeButton) {
-          this.element.insertBefore(countElement, closeButton);
-        } else {
-          this.element.appendChild(countElement);
-        }
-      }
-    } else {
-      // 카운트 제거
-      if (existingCount) {
-        this.element.removeChild(existingCount);
-      }
-    }
-  }
-  destroy() {
-    this.element.removeEventListener('mouseenter', this.handleMouseEnter);
-    this.element.removeEventListener('mouseleave', this.handleMouseLeave);
-    if (this.tooltipElement) {
-      this.removeTooltip();
-    }
-  }
-}

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

@@ -1,12 +0,0 @@
-// Tag 관련 CSS 클래스명 상수
-export const TAG_CLASS_NAMES = {
-  tag: 'ncua-tag',
-  text: 'ncua-tag__text',
-  count: 'ncua-tag__count',
-  close: 'ncua-tag__close',
-  tooltip: 'ncua-tag__tooltip',
-  tooltipContent: 'ncua-tag__tooltip-content',
-  truncated: 'ncua-tag--truncated'
-};
-export const getTagSizeClassName = size => `ncua-tag--${size}`;
-export const getTooltipPositionClassName = position => `ncua-tag__tooltip--${position}`;

package/dist/esm/assets/scripts/tag/const/index.js

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './classNames';
-export * from './sizes';

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

@@ -1,7 +0,0 @@
-export const iconSize = {
-  sm: 14,
-  md: 16
-};
-export const MARGIN = 10;
-export const DEFAULT_TOOLTIP_WIDTH = 200;
-export const DEFAULT_TOOLTIP_HEIGHT = 60;