[js] tab menu 만들기

위와 같은 탭메뉴를 만들어보았다.

전체적으로 tab-item을 클릭했을 때,
컨텐츠가 바뀌는 부분은 jquery로 작성하였다.

그러나 tab-item을 때 자연스러운 fadeIn효과주는 방법은
두 가지 방법를 알아보자!
(css로 효과주는 방법, js로 효과주는 방법🤔)

🍀 html

 <div id="tab-container">
    <div class="tabs">
      <button data-tab="tab-1" class="tab-item active" onclick="frontTabs('tab-1')">옴니채널 경험</button>
      <button data-tab="tab-2" class="tab-item" onclick="frontTabs('tab-2')">Contact Lens 대시보드</button>
      <button data-tab="tab-3" class="tab-item" onclick="frontTabs('tab-3')">AI 상담</button>
    </div>
    <div id="tab-1" class="tab-feature active">
      <div class="box-wrap">
        <div class="img-box"><img src="https://imgnew.megazone.com/2021/04/ac_key-img01.png" alt=""></div>
        <div class="text-box">
          <h3>채널이 바뀌어도 일관적인 고객경험 제공</h3>
          <p>Amazon Connect 는 음성과 채팅에 맞게 통합된 단일 콜 센터를 통해 완벽한 옴니채널 경험을 제공합니다. Contact Flow를 통해 동일한 시나리오를 IVR(Voice)과 챗봇(Text)에 적용하여 관리함으로써 모든 채널에서 일관적인 고객 경험을 제공할 수 있습니다.</p>
        </div>
      </div>
    </div>
    <div id="tab-2" class="tab-feature">
      <div class="box-wrap">
        <div class="img-box"><img src="https://imgnew.megazone.com/2021/04/ac_key-img02.png" alt=""></div>
        <div class="text-box">
          <h3>고객의 기분까지 들여다 보는 <br>Contact Lens 대시보드</h3>
          <p>Amazon Connect는 기계 학습을 사용해 자연어 처리(NLP) 및 음성 텍스트 변환 분석을 수행합니다. Contact Lens 대시보드를 통해 감정 및 대화 특징을 분석하여 고객의 문제를 더욱 쉽고 빠르게 파악할 수 있게되며 관리자는 분석 결과를 기반으로 상담사 코칭과 교육까지 해결함으로써 고객 상담의 품질을 높일 수 있습니다.</p>
        </div>
      </div>
    </div>
    <div id="tab-3" class="tab-feature">
      <div class="box-wrap">
        <div class="img-box"><img src="https://imgnew.megazone.com/2021/04/ac_key-img03.png" alt=""></div>
        <div class="text-box">
          <h3>모듈로 구성하는 AI 상담</h3>
          <p>Amazon의 인공지능 Lex는 음성 및 텍스트 변환(STT, TTS), 자연어 처리(NLU)를 기반으로 고객과의 대화를 이해하고 가장 적절한 답변을 생각해냅니다. Amazon Lex를 통해 Amazon Connect는 고객과의 상호작용을 자동화하고 더욱 개선된 고객 경험을 제공합니다.</p>
        </div>
      </div>
    </div>
  </div>

🍀 scss

#tab-container {
	position: relative;
  width: 1200px;
  margin: 0 auto;
  .tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .tab-item {
      flex: 33.33%;
      max-width: calc(100% / 3);
      height: 64px;
      background-color: #e7e7e7;
      font-size: 18px;
      font-weight: 200;
      color: #555;
      letter-spacing: -.025em;
      border-right: .5px solid #fff;
      border-left: .5px solid #fff;
      box-sizing: border-box;
      &.active {
        background-color: #2c2c2c;
        color: #fff;
      }
    }
  }
  .tab-feature {
    display: none;
    &.active {  
      display: block; 
    }
    .box-wrap {
      display: flex;
      justify-content: space-between;
      .img-box {
        flex: 50%;
        max-width: 50%;
        img {
          display: block;
        }
      }
      .text-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 50%;
        max-width: 50%;
      }
    }
  }
}

🍀 jquery

$(function (){

    $('.tab-item').click(function(){
        const tab_id = $(this).attr('data-tab');
    
        $('.tab-item').removeClass('active');
        $('.tab-feature').removeClass('active');
    
        $(this).addClass('active');
        $("#"+tab_id).addClass('active');
    })

})

먼저 tab-item을 클릭했을 때,

js로 fadein 효과 주는 방법이다.

📕 js

function frontTabs(tabIndex) {
    $('.tab-feature').hide();
    $('#' + tabIndex).fadeIn();    
}

문제는 여기였는데,
발견된 issue는 아래에서 따로 정리하였다..!

📕 css
display none & block이 아닌 opacity 로 컨트롤 하였다.

  .tab-feature {
    position: absolute;
    top: 94px;
    opacity: 0;
    transition: opacity .3s;
    &.active {  
      opacity: 1;    
    }
  }

🧐 발견된 issue

display:block과 none으로는 transition 효과가 먹히지않았다..

opacity로 transition을 해결하였으나,
이유가 궁금해서 구글링한 결과, 아래와 같은 이유로 transition이 먹히지 않는 다는 것을 알았다..!!

"
요소가 화면에 출력되기 위해 무슨 과정을 거치는지부터 생각을 해보자. 일단 HTML과 CSS를 파싱후에 각각 DOM, CSSOM이 생성될 것이다. DOM과 CSSOM을 결합하여 렌더링 트리를 형성한다. 이 렌더링 트리는 화면에 출력될 요소들의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다.

이때, 렌더링 트리는 화면에 출력되지 않아도 될 일부 노드(meta, script 등)와 CSS를 통해 숨겨지는 노드가 렌더링 트리에서 생략된다.

transition은 두 상태에서 속성의 변화가 일정 기간에 걸쳐 일어나도록 하지만 display: none 상태에서 동적으로 클래스를 추가하여 display: block을 추가한다고 하면 렌더 트리에 없다가 추가되는 것이기 때문에 transition의 처음 시작점이 없다. 그래서 시각적으로 transition이 동작되지 않는 것처럼 보이는 것이다.
"
위 이유는 아래 1번 참고사이트에서 확인하였다.
(transition이 먹힐 수 있는 해결방법 또한 아래사이트에서 확인 가능하다!!)

<<참고 사이트>>
🍑 1. display none이 transition이 안먹히는 이유
https://velog.io/@dev-tinkerbell/display-none%EC%9D%B4-transition%EC%9D%B4-%EC%95%88%EB%A8%B9%ED%9E%88%EB%8A%94-%EC%9D%B4%EC%9C%A0

🍑 2. [javascript] 간단한 탭메뉴 구현하기
https://imivory.tistory.com/8