estet.md

interface Factory {
  Component?: any;
  onClosed?: () => void;
  onAfterClosed?: () => void;
  [x: string]: any;
}

export const factory = ({ Component, ...config }: Factory) => {
  const div = document.createElement("div");
  document.body.appendChild(div);
  let currentConfig: Factory = {
    ...config,
    isVisible: true,
    afterClose: () => {
      if (typeof currentConfig.onAfterClose === "function") {
        currentConfig.onAfterClose();
      }
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      destroy(config);
    }
  };

  const destroy = ({ ...config }: Factory) => {
    const unmountResult = ReactDOM.unmountComponentAtNode(div);
    if (unmountResult && div.parentNode) {
      div.parentNode.removeChild(div);
    }

    if (typeof config.onClosed === "function") {
      config.onClosed();
    }

    for (let i = 0; i < destroyFns.length; i += 1) {
      const fn = destroyFns[i];
      // eslint-disable-next-line @typescript-eslint/no-use-before-define
      if (fn === close) {
        destroyFns.splice(i, 1);
        break;
      }
    }
  };

  const render = ({ ...config }: Factory) => {
    setTimeout(() => {
      return Component
        ? ReactDOM.render(<Component {...config} />, div)
        : new Error("컴포넌트가 없습니다.");
    });
  };

  const update = (newConfig: Factory) => {
    config = {
      ...currentConfig,
      ...newConfig
    };
    render(config);
  };

  const close = () => {
    const config = {
      ...currentConfig,
      isVisible: false,
      afterClose: () => {
        if (typeof currentConfig.onAfterClose === "function") {
          currentConfig.onAfterClose();
        }
        // eslint-disable-next-line @typescript-eslint/no-use-before-define
        destroy(config);
      }
    };
    render(config);
  };

  render(currentConfig);

  destroyFns.push(close);

  return {
    destroy: close,
    update
  };
};