AURA Side-Layer 사용법

O Side Layer Panel은 우선 컴포넌트 하단에 전체 wrapper를 추가해줍니다.

• 사이드 레이어 공통 HTML

<aura:component>
  <aura:attribute name="icons" type="Object" />
  <aura:attribute name="isSideOpen" type="Boolean" default="false" />
  <aura:attribute name="isRRCancelPanel" type="Boolean" default="false" />

  <!-- 사이드 레이어 -->
  <aura:if isTrue="{!v.isSideOpen}">
      <aside class="side-layer" aura:id="sideLayerContent">
          <aside class="dimmer"></aside>
          <div class="content">
              <div class="content-body" onscroll="{!c.sideScroll}">
                  <div class="top">
                    <button class="back-btn only-pc" onclick="{!c.closeSideLayer}">
                          <c:de_Public_Svg tag="{!v.icons.panelBack}" />
                    </button>
                  </div>
                  {!v.body}
              </div>
              <div class="{!v.isRRCancelPanel ? 'bottom cancel-bottom' : 'bottom'}">
                      <button type="button" class="close" onclick="{!c.closeSideLayer}">
                          <c:de_Public_Svg tag="{!v.icons.back}" />돌아가기
                      </button>
              </div>
          </div>
      </aside>
  </aura:if>
</aura:component>

• 사이드 레이어 공통 Controller

({
  init : function(component, event, helper) {
      let icons = {
          panelBack : ['<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14">','<path id="ico_back" d="M1043.705,767.227h-13.569l4.33-4.289a1,1,0,0,0-1.408-1.422l-6.058,6,0,0a1,1,0,0,0-.216.321,1,1,0,0,0,0,.774.994.994,0,0,0,.216.321l0,0,6.058,6a1,1,0,0,0,1.408-1.422l-4.33-4.289h13.569a1,1,0,0,0,0-2Z" transform="translate(-1026.705 -761.227)" fill="#959595"/>','</svg>'].join('')
          ,back : ['<svg xmlns="http://www.w3.org/2000/svg" width="17.734" height="14.742" viewBox="0 0 17.734 14.742">','<g id="그룹_11562" data-name="그룹 11562" transform="translate(1 -3.863)">','<path id="패스_1747" data-name="패스 1747" d="M1525.841,1061.2l-5.957,5.957,5.957,5.957" transform="translate(-1519.884 -1055.922)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>','<path id="패스_1748" data-name="패스 1748" d="M1519.884,1072.077h15.734" transform="translate(-1519.884 -1060.843)" fill="none" stroke="#fff" stroke-linecap="round" stroke-width="2"/>','</g>','</svg>'].join('') 
      };
      component.set("v.icons",icons);
  },
  //사이드 판넬 닫기
  closeSideLayer : function(component, event, helper){
      let layerContent = component.find('sideLayerContent').getElement();
      $A.util.removeClass(layerContent, 'active');

      setTimeout(function(){
          component.set('v.body', '');
          component.set("v.isSideOpen", false);
      },300);

  },
)}

• 사이드 레이어 공통 Helper

createSideLayer : function(component, helper, content, params) {
    return new Promise(function(resolve, reject){
        component.set('v.isSideOpen', true);

        $A.createComponent(
            content,
            params,
            function(panel, status, errorMsg) {
                if(status === 'SUCCESS') {
                    let body = component.get('v.body');
                    body.push(panel);
                    component.set('v.body', body);

                    setTimeout(function(){
                        let layerContent = component.find('sideLayerContent').getElement();
                        $A.util.addClass(layerContent, 'active');
                        resolve(layerContent);
                    },300);
                } else {
                    console.log("Error: " + errorMsg);
                }
            }
        );
    });
    
},

• 사이드 레이어 공통 CSS

/********************************** side layer **********************************/
.THIS .side-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.THIS .side-layer .dimmer {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.35s;
    opacity: 0;
}

.THIS .side-layer .content {
    background-color: white;
    position: absolute;
    top: 0;
    right: 0;
    transition: transform 0.35s;
    height: 100%;
    transform: translateX(100%);
    padding-bottom: 56px;
    overflow: hidden;
    z-index: 1;
}

.THIS .side-layer.active .content {
    transform: translateX(0);
}

.THIS .side-layer.active .dimmer {
    opacity: 1;
}

.THIS .side-layer .content-body>.top {
    padding: 48px 80px 27px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 1;
    transition:position .3s;
}

.THIS .side-layer .content-body>.top .back-btn,
.THIS .side-layer .content-body>.top .back-btn svg {
    display: block;
}

.THIS .side-layer .content-body>.top .back-btn.only-mobile {
    display: none;
}
.THIS .side-layer .content-body>.top.is-scroll{
    height: 56px;
    padding: 16px 80px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 8%);
}
.THIS .side-layer .content-body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.THIS .side-layer .content-body::-webkit-scrollbar {
    width: 10px;
}
.THIS .side-layer .content-body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
    background-color: var(--dimmed-select);
}
.THIS .side-layer .content-bodyt::-webkit-scrollbar-track {
    background-color: transparent;
}
.THIS .side-layer .content-body>* {
    padding: 0 80px 56px;
}

.THIS .side-layer .content-body .layer-title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 29px;
    margin-bottom: 23px;
    position: sticky;
    top: 101px;
    background-color: #fff;
    z-index: 1;
    transition:position .3s;
}

.THIS .side-layer .bottom {
    width: 100%;
    height: 56px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.THIS .side-layer .content .bottom>button.close {
    width: 100%;
    height: 100%;
    background-color: #DB4A98;
    color: white;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: -0.02em;
}

.THIS .side-layer .content .bottom>button.close svg {
    margin-right: 12px;
}
.THIS .side-layer .content .bottom>button.close:hover{
    background-color: #C33873;
}
.THIS .side-layer .cancel-bottom{
    display:flex;
}
.THIS .side-layer .cancel-bottom > button{
    height: 100%;
    width:50%!important;
    color: white;
    font-size: 15px;
    font-weight: normal;
    letter-spacing: -.02em;
}
.THIS .side-layer .cancel-bottom > button.close{
    background-color:#F5F5F5!important;
    color:#616366!important;
}

.THIS .side-layer .cancel-bottom > button.cancel{
    background-color: #DB4A98!important;
    color: white!important;
}
.THIS .side-layer .cancel-bottom > button.close:hover{
    background-color:#F5F5F5!important;
}
.THIS .side-layer .cancel-bottom > button.cancel:hover{
    background-color: #C33873!important;
}

※ 공통 영역까지 추가를 완료했으면 사이드 패널을 열어줄 코드 추가!

• 사이드 레이어 HTML

<aura:component>
  <aura:attribute name="recordId" type="String" />
  
  <div class="slds-grid slds-is-relative">
      <button type="button" class="more-btn" onclick="{!c.openDetail}"></button>
  </div>
</aura:component>

• 사이드 레이어 Controller

//디테일 페이지 사이드 패널
openDetail : function(component, event, helper){
    const recordId = component.get("v.recordId");
    let params = {
        recordId : recordId
    };
    helper.createSideLayer(component, helper, 'c:detailPage', params);
    // helper, 뒤에 'c:자신이 만든 컴포넌트명을 기입', params로 recordId 값 전달
},