dialog 띄우기

최대한 재사용성을 고려해서 만들긴 했는데 고쳐야할 점이 너무 많아서 어떻게 고쳐야 재사용성을 극대화시키면서 편의성도 살릴지 감도 안잡히지만

일단 만들어본 오버레이형 dialog 

const createDialog = (type) => {
    let newDialogOverlay = document.createElement('div');
    if(!setDialogContent(type)) return true;
    
    let newDialogData = dialog[type];

    // new popup overlay
    newDialogOverlay.classList.add('dialog-overlay');

    // new popup
    let newDialogElement = document.createElement('div');
    newDialogElement.classList.add('dialog-container');

    // close
    let dialogClose = document.createElement('span');
    dialogClose.classList.add('dialog-close');
    dialogClose.classList.add('dialog-close-plag');
    dialogClose.innerHTML = 'X';

    // title
    let dialogTitle = document.createElement('span');
    dialogTitle.classList.add('dialog-title');
    dialogTitle.innerHTML = newDialogData.title;

    // content
    let dialogContent = document.createElement('div');
    dialogContent.classList.add('dialog-content');
    dialogContent.innerHTML = newDialogData.body;

    // button
    let btnArea = document.createElement('div');
    let btnArray = [];
    btnArea.classList.add('dialog-button-area');

    for(let i=0;i<newDialogData.button.length;i++){
        let obj = document.createElement('span');
        obj.classList.add('dialog-button');
        obj.innerHTML = newDialogData.button[i];
        btnArray.push(obj);
        btnArea.appendChild(obj);
    }

    // add Element in Dialog
    newDialogElement.appendChild(dialogClose);
    newDialogElement.appendChild(dialogTitle);
    newDialogElement.appendChild(dialogContent);
    newDialogElement.appendChild(btnArea);
    newDialogOverlay.appendChild(newDialogElement);

    // create popup layer
    let inputLocation = document.querySelector('body').firstElementChild;
    inputLocation.parentElement.insertBefore(newDialogOverlay, inputLocation);

    // set event
    setEventCloseDialog(newDialogOverlay);
    setEventCloseDialog(dialogClose);
    for(let i=0;i<btnArray.length;i++){
        let obj = btnArray[i];
        setEventButton(type, obj, newDialogData.action[i]);
    }
}

개인 메모 : 나머지 소스는 membership-login에 존재.