Bootstrap5에서 Fade(페이드)가 사라지지 않는 문제 해결법

# 문제 발생

Vue3 프로젝트에서 부트스트랩으로 offcanvas 기능을 구현하려 했으나 정상적으로 동작하지 않았습니다.

다른 조치를 취한 것도 없었는데, Fade가 이중으로 동작하다보니 닫기버튼을 누르지 않고 검은 영역을 클릭했을 때는 정상적으로 닫기지 않는 문제가 있었습니다.

 

Fade가 이중으로 남아있는 문제

https://getbootstrap.kr/docs/5.3/components/offcanvas/

 

 

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

 

<div class="offcanvas-backdrop fade show"></div>

 

 

 

# 해결법

 

원인은 부트스트랩이 이중으로 불러와지는 것이였습니다.

main.js에서 이중으로 불러오는 것이 원인이었으며, 중복된 import를 제거할 경우 기능이 다시 정상적으로 작동하게 됩니다.