AURA Modal 생성 및 불러오기

000 잘못 만듬 - 다시 수정 예정 closeModal부터
1. 모달을 생성하기 전에 html 상단에 필수 코드를 추가한다.

<lightning:overlayLibrary aura:id="modal" />
<aura:attribute name="modalPromise" type="Aura.Component" />

<lightning:button name="modal" label="모달" onclick="{!c.modalOpen}" />

2. Controller에 마찬가지로 추가한다.

{(
    //오픈할 컴포넌트를 연결한다.
    modalOpen : function(component, event, helper){
        const recordId = component.get("v.recordId");

        var modalBody;
        $A.createComponent("c:DE_Public_SampleAllPanel", {
            "recordId" : component.get("v.recordId")
        }, function(content, status) {
               if (status === "SUCCESS") {
                   modalBody = content;
                   component.find('modal').showCustomModal({
                       body: modalBody,
                       cssClass: "my-modal,my-custom-class,my-other-class,cModalOpener"
                   })
               }
           });
    },
)}

3. Helper에 closeModal이라는 기능을 추가해준다.

    closeModal : function(component, event) {
        let layerContent = component.find('sideLayerContent').getElement();
        $A.util.removeClass(layerContent, 'active');
        
         setTimeout(function(){
             component.set('v.body', '');
             component.set("v.isSideOpen", false);
         },300);
    },