@ncds/ui-admin 1.6.4-alpha.1 → 1.7.0

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  ImageFileInput: true
+};
+Object.defineProperty(exports, "ImageFileInput", {
+  enumerable: true,
+  get: function () {
+    return _ImageFileInput.ImageFileInput;
+  }
+});
+var _ImageFileInput = require("./ImageFileInput");
+var _classNames = require("./const/classNames");
+Object.keys(_classNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _classNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _classNames[key];
+    }
+  });
+});
+var _types = require("./const/types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+// 전역 등록 (추후 index.ts와 개별동작 할 수 있게끔 대비)
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.ImageFileInput = _ImageFileInput.ImageFileInput;
+}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _comboBox = require("./comboBox");
+var _datePicker = require("./datePicker");
+var _featuredIcon = require("./featuredIcon");
+var _fileInput = require("./fileInput");
+var _imageFileInput = require("./imageFileInput");
+var _modal = require("./modal");
+var _notification = require("./notification");
+var _progressBar = require("./progress-bar");
+var _selectBox = require("./selectBox");
+var _slider = require("./slider");
+var _tab = require("./tab");
+var _tag = require("./tag");
+var _tooltip = require("./tooltip");
+window.ncua = {
+  Slider: _slider.Slider,
+  Tab: _tab.Tab,
+  Tag: _tag.Tag,
+  DatePicker: _datePicker.DatePicker,
+  SelectBox: _selectBox.SelectBox,
+  ComboBox: _comboBox.ComboBox,
+  FeaturedIcon: _featuredIcon.FeaturedIcon,
+  FileInput: _fileInput.FileInput,
+  Modal: _modal.Modal,
+  Notification: _notification.Notification,
+  ProgressBar: _progressBar.ProgressBar,
+  Tooltip: _tooltip.Tooltip,
+  ImageFileInput: _imageFileInput.ImageFileInput
+};

package/dist/cjs/assets/scripts/modal/Modal.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+var _classNames = require("./const/classNames");
+var _ModalHeader = require("./ModalHeader");
+var _ModalContent = require("./ModalContent");
+var _ModalActions = require("./ModalActions");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var Modal = exports.Modal = /** @class */function () {
+  function Modal(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var _this = this;
+    this.isOpen = false;
+    this.handleBackdropClick = function (e) {
+      if (_this.options.closeOnBackdropClick && e.target === e.currentTarget) {
+        _this.close();
+      }
+    };
+    this.handleKeyDown = function (e) {
+      if (_this.isOpen && _this.options.closeOnEsc && e.key === 'Escape') {
+        _this.close();
+      }
+    };
+    this.options = __assign({
+      size: 'md',
+      closeOnBackdropClick: false,
+      closeOnEsc: true,
+      className: '',
+      onClose: function () {}
+    }, options);
+    this.createElement();
+  }
+  Modal.prototype.createElement = function () {
+    // 백드롭 요소 생성
+    this.element = document.createElement('div');
+    this.element.className = this.getBackdropClasses();
+    this.element.addEventListener('click', this.handleBackdropClick);
+    // 모달 요소 생성
+    this.modalElement = document.createElement('div');
+    this.modalElement.className = this.getModalClasses();
+    this.element.appendChild(this.modalElement);
+  };
+  Modal.prototype.getBackdropClasses = function () {
+    return "".concat(_classNames.MODAL_CLASS_NAMES.backdrop, " ").concat(this.options.className); // ncua-modal-backdrop + className
+  };
+  Modal.prototype.getModalClasses = function () {
+    return "".concat(_classNames.MODAL_CLASS_NAMES.modal, " ").concat((0, _classNames.getModalSizeClassNames)(this.options.size)); // ncua-modal ncua-modal--${size}
+  };
+  Modal.prototype.open = function () {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    // zIndex 설정 적용 (값이 있을 때만)
+    if (this.options.zIndex !== undefined) {
+      this.element.style.zIndex = this.options.zIndex.toString();
+    }
+    document.body.appendChild(this.element);
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.body.classList.add(_classNames.MODAL_CLASS_NAMES.modalOpen);
+  };
+  Modal.prototype.close = function () {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.body.classList.remove(_classNames.MODAL_CLASS_NAMES.modalOpen);
+    if (this.options.onClose) {
+      this.options.onClose();
+    }
+  };
+  Modal.prototype.destroy = function () {
+    this.close();
+    this.element.removeEventListener('click', this.handleBackdropClick);
+  };
+  Modal.prototype.setContent = function (content) {
+    if (typeof content === 'string') {
+      this.modalElement.innerHTML = content;
+    } else {
+      this.modalElement.innerHTML = '';
+      this.modalElement.appendChild(content);
+    }
+  };
+  Modal.prototype.getElement = function () {
+    return this.element;
+  };
+  Modal.prototype.getModalElement = function () {
+    return this.modalElement;
+  };
+  Modal.prototype.isModalOpen = function () {
+    return this.isOpen;
+  };
+  // Static factory method
+  Modal.create = function (options) {
+    return new Modal(options);
+  };
+  // Static properties for HTML usage
+  Modal.Header = _ModalHeader.ModalHeader;
+  Modal.Content = _ModalContent.ModalContent;
+  Modal.Actions = _ModalActions.ModalActions;
+  return Modal;
+}();

package/dist/cjs/assets/scripts/modal/ModalActions.js

@@ -0,0 +1,128 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalActions = void 0;
+var _classNames = require("./const/classNames");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var ModalActions = exports.ModalActions = /** @class */function () {
+  function ModalActions(content, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    this.options = __assign({
+      layout: 'vertical',
+      showDivider: false,
+      align: 'stretch',
+      fullWidth: false,
+      checkboxContent: options.checkboxContent
+    }, options);
+    this.createElement();
+    if (content) {
+      this.setContent(content);
+    }
+  }
+  ModalActions.prototype.createElement = function () {
+    // Wrapper 요소 생성
+    this.wrapperElement = document.createElement('div');
+    var wrapperClasses = [_classNames.MODAL_CLASS_NAMES.actionsWrapper];
+    if (this.options.layout === 'checkbox') {
+      wrapperClasses.push(_classNames.MODAL_CLASS_NAMES.actionsWrapperCheckbox);
+    }
+    this.wrapperElement.className = wrapperClasses.join(' ');
+    // Checkbox content (checkbox 레이아웃인 경우)
+    if (this.options.layout === 'checkbox' && this.options.checkboxContent) {
+      var checkboxDiv = document.createElement('div');
+      checkboxDiv.className = _classNames.MODAL_CLASS_NAMES.actionsCheckbox;
+      var checkboxContentDiv = document.createElement('div');
+      checkboxContentDiv.className = _classNames.MODAL_CLASS_NAMES.actionsCheckboxContent;
+      if (typeof this.options.checkboxContent === 'string') {
+        checkboxContentDiv.innerHTML = this.options.checkboxContent;
+      } else {
+        checkboxContentDiv.appendChild(this.options.checkboxContent);
+      }
+      checkboxDiv.appendChild(checkboxContentDiv);
+      this.wrapperElement.appendChild(checkboxDiv);
+    }
+    // Actions 요소 생성
+    this.actionsElement = document.createElement('div');
+    var actionsClasses = [_classNames.MODAL_CLASS_NAMES.actions, (0, _classNames.getModalActionsLayoutClassNames)(this.options.layout), (0, _classNames.getModalActionsAlignClassNames)(this.options.align)];
+    if (this.options.fullWidth) {
+      actionsClasses.push("".concat(_classNames.MODAL_CLASS_NAMES.actions, "--full-width"));
+    }
+    this.actionsElement.className = actionsClasses.join(' ');
+    this.wrapperElement.appendChild(this.actionsElement);
+  };
+  ModalActions.prototype.getElement = function () {
+    return this.wrapperElement;
+  };
+  ModalActions.prototype.getActionsElement = function () {
+    return this.actionsElement;
+  };
+  ModalActions.prototype.getHTML = function () {
+    return this.wrapperElement.outerHTML;
+  };
+  ModalActions.prototype.appendTo = function (parent) {
+    parent.appendChild(this.wrapperElement);
+  };
+  ModalActions.prototype.setContent = function (content) {
+    var _this = this;
+    this.actionsElement.innerHTML = '';
+    if (typeof content === 'string') {
+      this.actionsElement.innerHTML = content;
+    } else if (Array.isArray(content)) {
+      // 배열인 경우 모든 요소를 추가
+      content.forEach(function (element) {
+        _this.actionsElement.appendChild(element);
+      });
+    } else {
+      // 단일 HTMLElement인 경우
+      this.actionsElement.appendChild(content);
+    }
+  };
+  ModalActions.prototype.addAction = function (action) {
+    if (typeof action === 'string') {
+      this.actionsElement.insertAdjacentHTML('beforeend', action);
+    } else {
+      this.actionsElement.appendChild(action);
+    }
+  };
+  ModalActions.prototype.clear = function () {
+    this.actionsElement.innerHTML = '';
+  };
+  ModalActions.prototype.setCheckboxContent = function (content) {
+    if (this.options.layout !== 'checkbox') {
+      console.warn('setCheckboxContent can only be used with checkbox layout');
+      return;
+    }
+    var checkboxContentElement = this.wrapperElement.querySelector(".".concat(_classNames.MODAL_CLASS_NAMES.actionsCheckboxContent));
+    if (checkboxContentElement) {
+      if (typeof content === 'string') {
+        checkboxContentElement.innerHTML = content;
+      } else {
+        checkboxContentElement.innerHTML = '';
+        checkboxContentElement.appendChild(content);
+      }
+    }
+  };
+  ModalActions.prototype.addDivider = function () {
+    var divider = document.createElement('div');
+    divider.className = _classNames.MODAL_CLASS_NAMES.actionsDivider;
+    return divider;
+  };
+  // Static factory method
+  ModalActions.create = function (content, options) {
+    return new ModalActions(content, options);
+  };
+  return ModalActions;
+}();

package/dist/cjs/assets/scripts/modal/ModalContent.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContent = void 0;
+var _classNames = require("./const/classNames");
+var _contentUtils = require("./utils/contentUtils");
+var ModalContent = exports.ModalContent = /** @class */function () {
+  function ModalContent(content) {
+    this.createElement();
+    if (content) {
+      this.setContent(content);
+    }
+  }
+  ModalContent.prototype.createElement = function () {
+    this.element = document.createElement('div');
+    this.element.className = _classNames.MODAL_CLASS_NAMES.content;
+  };
+  ModalContent.prototype.getElement = function () {
+    return this.element;
+  };
+  ModalContent.prototype.getHTML = function () {
+    return this.element.outerHTML;
+  };
+  ModalContent.prototype.appendTo = function (parent) {
+    parent.appendChild(this.element);
+  };
+  ModalContent.prototype.setContent = function (content) {
+    (0, _contentUtils.setElementContent)(this.element, content);
+  };
+  ModalContent.prototype.clear = function () {
+    this.element.innerHTML = '';
+  };
+  ModalContent.prototype.getText = function () {
+    return this.element.textContent || '';
+  };
+  ModalContent.prototype.getInnerHTML = function () {
+    return this.element.innerHTML;
+  };
+  // Static factory method
+  ModalContent.create = function (content) {
+    return new ModalContent(content);
+  };
+  return ModalContent;
+}();

package/dist/cjs/assets/scripts/modal/ModalHeader.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalHeader = void 0;
+var _ButtonCloseX = require("../shared/ButtonCloseX");
+var _featuredIcon = require("../featuredIcon");
+var _classNames = require("./const/classNames");
+var _contentUtils = require("./utils/contentUtils");
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var ModalHeader = exports.ModalHeader = /** @class */function () {
+  function ModalHeader(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    this.options = __assign({
+      featuredIcon: options.featuredIcon,
+      align: 'left',
+      title: '',
+      subtitle: '',
+      showDivider: false,
+      hideCloseButton: false
+    }, options);
+    this.createElement();
+  }
+  ModalHeader.prototype.createElement = function () {
+    var headerClasses = [_classNames.MODAL_CLASS_NAMES.header, (0, _classNames.getModalHeaderAlignClassNames)(this.options.align)];
+    // Header 요소 생성
+    this.element = document.createElement('header');
+    this.element.className = headerClasses.join(' ');
+    // Featured Icon
+    if (this.options.featuredIcon) {
+      var featuredIcon = new _featuredIcon.FeaturedIcon({
+        svgString: this.options.featuredIcon.svgString,
+        theme: this.options.featuredIcon.theme,
+        color: this.options.featuredIcon.color,
+        size: 'sm'
+      });
+      this.element.appendChild(featuredIcon.getElement());
+    }
+    // Title and subtitle
+    if (this.options.title || this.options.subtitle) {
+      var titleDiv = document.createElement('div');
+      titleDiv.className = _classNames.MODAL_CLASS_NAMES.title;
+      if (this.options.title) {
+        var titleText = document.createElement('div');
+        titleText.className = _classNames.MODAL_CLASS_NAMES.titleText;
+        (0, _contentUtils.setElementContent)(titleText, this.options.title);
+        titleDiv.appendChild(titleText);
+      }
+      if (this.options.subtitle) {
+        var subtitleText = document.createElement('div');
+        subtitleText.className = _classNames.MODAL_CLASS_NAMES.titleSubtitle;
+        (0, _contentUtils.setElementContent)(subtitleText, this.options.subtitle);
+        titleDiv.appendChild(subtitleText);
+      }
+      this.element.appendChild(titleDiv);
+    }
+    // Close button
+    if (!this.options.hideCloseButton) {
+      var closeButtonContainer = document.createElement('div');
+      closeButtonContainer.innerHTML = (0, _ButtonCloseX.ButtonCloseX)('sm', 'light', _classNames.MODAL_CLASS_NAMES.closeButton, '닫기');
+      this.element.appendChild(closeButtonContainer.firstElementChild);
+    }
+  };
+  ModalHeader.prototype.getElement = function () {
+    return this.element;
+  };
+  ModalHeader.prototype.getHTML = function () {
+    return this.element.outerHTML;
+  };
+  ModalHeader.prototype.appendTo = function (parent) {
+    parent.appendChild(this.element);
+  };
+  ModalHeader.prototype.setTitle = function (title) {
+    this.options.title = title;
+    var titleElement = this.element.querySelector(".".concat(_classNames.MODAL_CLASS_NAMES.titleText));
+    if (titleElement) {
+      (0, _contentUtils.setElementContent)(titleElement, title);
+    }
+  };
+  ModalHeader.prototype.setSubtitle = function (subtitle) {
+    this.options.subtitle = subtitle;
+    var subtitleElement = this.element.querySelector(".".concat(_classNames.MODAL_CLASS_NAMES.titleSubtitle));
+    if (subtitleElement) {
+      (0, _contentUtils.setElementContent)(subtitleElement, subtitle);
+    }
+  };
+  ModalHeader.prototype.setCloseHandler = function (handler) {
+    var closeButton = this.element.querySelector(".".concat(_classNames.MODAL_CLASS_NAMES.closeButton));
+    if (closeButton) {
+      closeButton.addEventListener('click', handler);
+    }
+  };
+  ModalHeader.prototype.addDivider = function () {
+    var divider = document.createElement('div');
+    divider.className = _classNames.MODAL_CLASS_NAMES.headerDivider;
+    return divider;
+  };
+  // Static factory method
+  ModalHeader.create = function (options) {
+    return new ModalHeader(options);
+  };
+  return ModalHeader;
+}();

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getModalSizeClassNames = exports.getModalHeaderAlignClassNames = exports.getModalActionsLayoutClassNames = exports.getModalActionsAlignClassNames = exports.MODAL_CLASS_NAMES = void 0;
+// Modal 관련 CSS 클래스명 상수
+var MODAL_CLASS_NAMES = exports.MODAL_CLASS_NAMES = {
+  backdrop: 'ncua-modal-backdrop',
+  modal: 'ncua-modal',
+  modalOpen: 'ncua-modal-open',
+  header: 'ncua-modal__header',
+  title: 'ncua-modal__title',
+  titleText: 'ncua-modal__title-text',
+  titleSubtitle: 'ncua-modal__title-subtitle',
+  closeButton: 'ncua-modal__close-button',
+  headerDivider: 'ncua-modal__header-divider',
+  content: 'ncua-modal__content',
+  actionsWrapper: 'ncua-modal__actions-wrapper',
+  actionsWrapperCheckbox: 'ncua-modal__actions-wrapper--checkbox',
+  actions: 'ncua-modal__actions',
+  actionsDivider: 'ncua-modal__actions-divider',
+  actionsCheckbox: 'ncua-modal__actions-checkbox',
+  actionsCheckboxContent: 'ncua-modal__actions-checkbox-content'
+};
+var getModalSizeClassNames = function (size) {
+  return "ncua-modal--".concat(size);
+};
+exports.getModalSizeClassNames = getModalSizeClassNames;
+var getModalHeaderAlignClassNames = function (align) {
+  return "ncua-modal__header--".concat(align);
+};
+exports.getModalHeaderAlignClassNames = getModalHeaderAlignClassNames;
+var getModalActionsLayoutClassNames = function (layout) {
+  return "ncua-modal__actions--".concat(layout);
+};
+exports.getModalActionsLayoutClassNames = getModalActionsLayoutClassNames;
+var getModalActionsAlignClassNames = function (align) {
+  return "ncua-modal__actions--".concat(align);
+};
+exports.getModalActionsAlignClassNames = getModalActionsAlignClassNames;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+var _classNames = require("./classNames");
+Object.keys(_classNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _classNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _classNames[key];
+    }
+  });
+});

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

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

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Modal: true,
+  ModalHeader: true,
+  ModalContent: true,
+  ModalActions: true
+};
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.Modal;
+  }
+});
+Object.defineProperty(exports, "ModalActions", {
+  enumerable: true,
+  get: function () {
+    return _ModalActions.ModalActions;
+  }
+});
+Object.defineProperty(exports, "ModalContent", {
+  enumerable: true,
+  get: function () {
+    return _ModalContent.ModalContent;
+  }
+});
+Object.defineProperty(exports, "ModalHeader", {
+  enumerable: true,
+  get: function () {
+    return _ModalHeader.ModalHeader;
+  }
+});
+var _Modal = require("./Modal");
+var _ModalHeader = require("./ModalHeader");
+var _ModalContent = require("./ModalContent");
+var _ModalActions = require("./ModalActions");
+var _const = require("./const");
+Object.keys(_const).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _const[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _const[key];
+    }
+  });
+});
+// 기존 호환성을 위한 타입들도 export
+
+// 전역 등록 ( 추후 index.ts와 개별동작 할 수 있게끔 대비 )
+if (typeof window !== 'undefined') {
+  window.ncua = window.ncua || {};
+  window.ncua.Modal = _Modal.Modal;
+  window.ncua.ModalHeader = _ModalHeader.ModalHeader;
+  window.ncua.ModalContent = _ModalContent.ModalContent;
+  window.ncua.ModalActions = _ModalActions.ModalActions;
+}

package/dist/cjs/assets/scripts/modal/utils/contentUtils.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isHTMLString = isHTMLString;
+exports.setElementContent = setElementContent;
+/**
+ * 문자열이 HTML 태그를 포함하는지 확인
+ */
+function isHTMLString(str) {
+  var htmlTagRegex = /<[^>]+>/;
+  return htmlTagRegex.test(str);
+}
+/**
+ * 요소에 콘텐츠를 안전하게 설정
+ * HTML 구조면 innerHTML, 일반 텍스트면 textContent 사용
+ * HTMLElement인 경우 outerHTML을 사용하여 string으로 변환
+ */
+function setElementContent(element, content) {
+  // HTMLElement인 경우 outerHTML로 변환
+  if (content instanceof HTMLElement) {
+    element.innerHTML = '';
+    element.appendChild(content);
+    return;
+  }
+  // string인 경우
+  if (isHTMLString(content)) {
+    // HTML 구조면 innerHTML 사용 ( script 태그도 허용해야함 )
+    element.innerHTML = content;
+  } else {
+    // 일반 텍스트면 textContent 사용
+    element.textContent = content;
+  }
+}