Jira 공지 배너에 '닫기' 기능을 적용하기(announce banner closed button)

문제

Jira의 공지 배너에 HTML, JavaScript 코드를 적용하여, 배너 닫기를 구현할 수 있습니다.

페이지 이동 후에도 닫힘 상태는 유지되며, 필요에 따라 배너가 보이지 않는 기간을 구현할 수 있습니다.

2024-03-2111.30.46-ezgif.com-video-to-gif-converter.gif

해결책

Jira 관리(⚙️) > 시스템 > 좌측 메뉴의 '공지 배너'를 클릭해 주세요.
‘알림 배너 수정’의 입력 란에 아래의 코드를 입력해 주세요.

아래는 ‘더 이상 보지 않기’ 버튼을 클릭하면, 배너를 더 이상 화면에 표시하지 않는 코드입니다.
쿠키를 삭제하면 배너는 다시 나타나므로, 테스트시 참고 부탁드립니다.

<div>
[작업 공지] 12월 01일 20:00 - 21:00 서버 점검 작업이 예정되어 있습니다.
해당 시간에는 서비스의 정상적인 이용이 불가하오니 이용에 참고 바랍니다.
  <button onclick="closeBanner()" style="margin-left: 20px;">
    더 이상 보지 않기 X
  </button>
</div>
<style>
#announcement-banner { background-color: #cceaff;font-weight:bolder;}
</style>
<script>

  if (localStorage.getItem('bannerClosed') === 'true') {
    AJS.$('#announcement-banner').remove(); 
  }

  function closeBanner() {
    AJS.$('#announcement-banner').remove(); 
    localStorage.setItem('bannerClosed', 'true');
  }
</script>

아래는 ‘하루 동안 보지 않기' 버튼을 누르면, 배너를 하루 동안 표시하지 않는 코드입니다.
ex) 3월 1일에 닫으면, 3월 2일에 배너를 다시 표시.

<div>
[작업 공지] 12월 01일 20:00 - 21:00 서버 점검 작업이 예정되어 있습니다.
해당 시간에는 서비스의 정상적인 이용이 불가하오니 이용에 참고 바랍니다.
  <button onclick="closeBanner()" style="margin-left: 20px;">
    하루 동안 보지 않기 X
  </button>
</div>
<style>
#announcement-banner { background-color: #cceaff;font-weight:bolder;}
</style>
<script>
  // 배너 상태 확인 및 날짜 검사
  document.addEventListener('DOMContentLoaded', function() {
    const closedDate = localStorage.getItem('bannerClosedDate');
    const today = new Date().toDateString(); // 오늘 날짜 (시간 제외)

    if (closedDate === today) {
      // 오늘 이미 닫았다면 배너 숨김
      document.getElementById('announcement-banner').style.display = 'none';
    } else {
      // 오늘이 아니라면 localStorage에서 삭제하고 배너 보임
      localStorage.removeItem('bannerClosedDate');
      document.getElementById('announcement-banner').style.display = '';
    }
  });

  function closeBanner() {
    const today = new Date().toDateString(); // 오늘 날짜 (시간 제외)
    localStorage.setItem('bannerClosedDate', today); // 오늘 날짜 저장
    document.getElementById('announcement-banner').style.display = 'none';
  }
</script>

Jira 공지 배너에 '닫기' 기능을 적용하기(announce banner closed button)

문제

해결책

관련 문서

Related content