티스토리 플로팅 댓글 버튼 만들기 (댓글 수 표시 + 스크롤 이동)

이번에는 티스토리 블로그에서 방문자가 댓글이 얼마나 달렸는지 한눈에 파악하고,

바로 댓글을 확인하러 스크롤 이동할 수 있는 버튼을 만들어서 이전 글에 플로팅 div 에 적용해보려고 합니다.

 

아래는 이전 글 입니다.

티스토리 플로팅 div 에 좋아요(공감) 버튼 연동해보기

 

먼저 개발자 도구를 이용해 티스토리의 댓글 구조를 확인해봤습니다.

<div data-tistory-react-app="Comment">
  <div class="tt-comment-cont">
    <div class="tt-box-total">
      <span class="tt_txt_g">댓글</span>
      <span class="tt_num_g">0</span>
    </div>

• data-tistory-react-app="Comment" : 댓글 전체 영역
• .tt_num_g : 댓글 수가 표시되는 숫자 요소

이렇게 DOM 구조에서 요소와 요소가 같는 클래스명을 확인해볼 수 있었습니다.

 

1. 댓글 수가 보이는 커스텀 버튼 만들기

const commentBtn = document.createElement('button');
commentBtn.id = 'comment-button';
commentBtn.textContent = '💬 댓글';

 

우선 createElement 를 통해 버튼을 만들고, id 값과 버튼에 들어갈 텍스트를 지정해줍니다.

기본 텍스트를 미리 설정해주는 이유는 댓글 수와 함께 텍스트를 정해줘도 되지만

아주 짧지만 지연시간이 필요하기 때문에 사용자 UX 를 위해서 미리 넣어봤습니다.

 

const commentWrapper = document.createElement('div');
commentWrapper.className = 'wrap_btn';
commentWrapper.appendChild(commentBtn)

 

이후 버튼에 스타일과 기능을 편하게 적용하기 위해 div 로 감싸줍니다.

className 은 자유롭게 설정할 수 있습니다.

(저는 티스토리 외부 css 를 그대로 사용하기 위해 wrap_btn 을 사용했습니다)

 

setTimeout(() => {
const numEl = document.querySelector('[data-tistory-react-app="Comment"] .tt_num_g');
const commentCount = numEl ? numEl.textContent.trim() : '0';
commentBtn.textContent = `💬 댓글 ${commentCount}`;
}, 200);

 

이제 querySelector() 로 .tt_num_g 를 찾아 댓글 수를 가져옵니다.

숫자가 늦게 로딩될 수 있어 setTimeout() 으로 아주 짧은 대기 시간을 주어 안정성을 높혔습니다. 

댓글 수 조회에 실패하면 기본값으로 0 을 표시하게 됩니다.

 

2. 버튼 클릭 시 댓글 영역으로 스크롤 이동

commentBtn.addEventListener('click', () => {
  const commentArea = document.querySelector('[data-tistory-react-app="Comment"]');
  if (commentArea) {
    commentArea.scrollIntoView({ behavior: 'smooth' });
  }
});

 

querySelector 로 댓글 영역 요소를 지정해준 후 클릭 시 scrollIntoView() 를 이용해 해당 위치로 이동합니다

저는 behavior: 'smooth' 를 추가해줘서 부드럽게 스크롤 이동하는 느낌을 추가해줬습니다.

 

3. 커스텀 버튼을 플로팅 div 에 삽입하기

window.addEventListener('load', () => {
  const commentWrapper = document.createElement('div');

  // 작성했던 코드
  
  insertFloatingBar(likeWrapper, commentWrapper);
});

 

페이지 전체 로딩 후 실행되도록, 'load' 이벤트 내부에 작성했던 코드들을 삽입해줍니다

function insertFloatingBar(likeEl, commentEl) {
  if (document.getElementById('floating-toolbar')) return;

  const bar = document.createElement('div');
  bar.id = 'floating-toolbar';
  bar.innerHTML = `<div id="floating-toolbar-inner"></div>`;
  document.body.appendChild(bar);

  const inner = document.getElementById('floating-toolbar-inner');

  // 스타일 추가.. (이전 글 참고)
  // bar.style.position = 'fixed' 등..

  if (likeEl) inner.appendChild(likeEl);
  if (commentEl) inner.appendChild(commentEl); // 댓글 버튼 삽입
}

 

그 후 파라미터로 댓글 버튼을 받아 appendChild 로 기존 플로팅 div 내부에 삽입해주면 됩니다.

저는 이전 글에서 만든 플로팅 바에서 공감 버튼 옆에 배치할 목적으로 구조를 작성했습니다.

 

 

이렇게 현재 댓글 수가 표시되고 클릭하면 댓글 영역으로 이동하는 버튼을 완성해봤습니다 !