부트스트랩5(Bootstrap5) 현재 주소 복사 버튼 만들기

현재 보고 있는 페이지의 주소를 복사하는 버튼으로 데스크탑과 모바일 전부 적용할 수 있습니다.
부트스트랩5(Bootstrap5) 파일(js, css)가 이미 포함되어 있을때는 'Bootstrap 5 / 아이콘' 아래의  링크 부분을 생략하면 됩니다.
버튼으로 되어있지만 버튼 이외에 쓰고 싶을때는 속성에 id="copyBtn"만 붙여주면 됩니다.
 

<!-- Bootstrap 5 / 아이콘 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- 복사 버튼 -->
<button id="copyBtn" class="btn btn-outline-primary btn-sm">
  <i class="bi bi-clipboard"></i> 주소 복사
</button>

<!-- 토스트 메시지 -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1055;">
  <div id="copyToast" class="toast align-items-center text-bg-success border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        복사되었습니다.
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
</div>

<!-- 복사 기능 스크립트 -->
<script>
document.getElementById('copyBtn').addEventListener('click', function() {
  const textToCopy = window.location.href; // 현재 페이지 주소 복사

  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(textToCopy).then(showToast);
  } else {
    const tempInput = document.createElement('textarea');
    tempInput.value = textToCopy;
    document.body.appendChild(tempInput);
    tempInput.select();
    try {
      document.execCommand('copy');
      showToast();
    } catch (err) {
      alert('복사 실패: ' + err);
    }
    document.body.removeChild(tempInput);
  }

  function showToast() {
    const toastEl = document.getElementById('copyToast');
    const toast = new bootstrap.Toast(toastEl, { delay: 2000 });
    toast.show();
  }
});
</script>