JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<button id="alert">
  기본팝업
</button>
<button id="sto">
  엑스버튼 제거 및 자동 닫힘
</button>
<button id="confirm">
  버튼
</button>

SCSS

.ccccc {
  color: #fff;
  background: red;
}

JavaScript

var Popup = (function(Popup, i) {
  'use strict';

  var popupId = id();


  function opt(argument, _opt) {
    var type = {
      width: [ 'number', 'string' ],
      height: [ 'number', 'string' ],
      header: [ 'string' ],
      container: [ 'string' ],
      close: [ 'boolean' ],
      cancel: [ 'string', 'boolean' ],
      fnCancel: [ 'function' ],
      confirm: [ 'string', 'boolean' ],
      fnConfirm: [ 'function' ],
      sto: [ 'boolean', 'number' ],
    };
    var opt = {
      width: 'auto',
      height: 'auto',
      header: '알림',
      container: '알림 내용을 입력해 주세요.',
      close: true,
      cancel: false,
      confirm: false,
      sto: false,
    };
    if (argument) {
      if (argument.isTrusted) {
        throw 'open시 옵션을 넣어주세요. 없으면 빈값{}을 넣어주세요';
      }
      $.map(argument, function(value, key) {
        var _type = type[ key ];
        if (!_type) {
          throw key + '은 없는 속성입니다. 다시 확인해주세요.\n https://wisebirds.atlassian.net/wiki/spaces/snsad/pages/804814849/Popup';
        }
        if (_type.indexOf(typeof value) === -1) {
          throw `${key} 의 타입이 잘못되었습니다. 타입은 ${_type} 를 지원합니다.`;
        }
      });
    }
    return $.extend(true, _opt ? _opt : opt, argument);
  }

  function id() {
    return '_' + Math.random().toString(36).substr(2, 9);
  };

  function Popup(argument) {
    this.id = id();
    this.idHeader = id();
    this.idProgress = id();
    this.idContainer = id();
    this.idClose = id();
    this.idFooter = id();
    this.idCancel = id();
    this.idConfirm = id();
    if (argument) {
      this.templete(argument);
    }
    this.element = document.querySelector(`[data-id="${this.id}"]`);
    this.idStyle = document.querySelector(`[data-id="${popupId}"]`);

  }

  Popup.prototype.templete = function(argument) {
    var options;
    if (!this.options) {
      this.options = opt(argument);
      options = opt(argument);
    } else {
      options = opt(argument, $.extend({}, this.options));
    }
    if (!this.element)...