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

이전 글에서 티스토리 게시글에만 등장하는 플로팅 UI 를 만들어봤습니다.

이번에는 여기에 티스토리 게시글 공감 버튼을 기능을 유지한채로 그대로 옮겨보도록 하겠습니다 !

 

티스토리 게시글 본문에만 등장하는 플로팅 div 만들어보기

티스토리의 공감 버튼은 어떻게 작동할까?

티스토리 블로그에서 공감 버튼은 클릭 시 /reaction 으로 POST 와 DELETE 요청을 보내고

서버 응답 전 UI에 즉시 반영되는 낙관적 업데이트(Optimistic Update) 방식을 사용하고 있습니다.

그리고 버튼은 티스토리 내부에서 동적으로 삽입되므로 스킨 편집에서 수정하기 어렵습니다.

 

즉, 공감 버튼은 기능을 직접 구현하거나 스킨 편집에서 수정하기 어렵기 때문에

우리는 기존의 버튼 요소 자체를 옮겨서 사용하는 방식으로 연동을 진행해보려고 합니다.

 

1. 개발자도구로 공감 버튼 DOM 요소 찾기

 

개발자도구를 이용해서 기존 게시글 화면에서 공감 버튼을 찾아보니

버튼 전체를 감싸는 요소는 [data-tistory-react-app="Reaction"] 이라는 속성을 가지고 있었습니다.

우리는 이 div 전체를 가져와 플로팅 div 안에 넣는 것이 목표가 되겠습니다.

 

2. 자바스크립트 코드로 버튼 이동하기

window.addEventListener('load', () => {
  const likeWrapper = document.querySelector('[data-tistory-react-app="Reaction"]');

  insertFloatingBar(likeWrapper);
});

 

페이지 로딩이 끝난 뒤 querySelector로 공감 버튼이 포함된 div를 선택합니다.

이 요소를 insertFloatingBar() 함수의 인자로 넘깁니다.

function insertFloatingBar(likeEl) {
  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');
  
  // ..플로팅 div 와 내부 div 스타일 추가 (이전 글 참고)
  
  if (likeEl) inner.appendChild(likeEl);
}

 

그리고 appendChild() 을 통해 기존 버튼을 만들었던 플로팅 div 내부로 이동시켜줍니다.

새로운 버튼을 만드는 것이 아닌 DOM 상의 위치만 바뀌는 것이므로 기존 기능이 그대로 유지가 됩니다.

 

 

적용 후 다시 확인하면 위 사진처럼 부모 요소가 만들었던 플로팅 div 로 바뀐 것을 확인 할 수 있습니다 !

 

3. CSS 추가로 기존 스타일 복구하기

버튼은 옮겼지만 부모 요소가 바뀌어 기존에 적용되던 스타일 중 일부가 정상적으로 적용되지 않게 됩니다.

즉, 기존에 적용되던 CSS 를 참고하거나 직접 커스텀을 통해 필요한 부분을 CSS 에 추가해줘야 합니다.

기존 CSS 는 postBtn.css 라는 외부에서 삽입되는 파일을 개발자도구를 통해 확인하실 수 있습니다.

 

#floating-toolbar-inner .ico_postbtn.ico_like {
  height: 14px;
  margin: 3px 4px 0 0;
  width: 15px;
}

#floating-toolbar-inner .uoc-icon .ico_postbtn.ico_like {
  background-position: -100px -20px;
}

#floating-toolbar-inner .uoc-icon.like_on .ico_postbtn.ico_like {
  background-position: -120px -20px;
}

 

제가 작성한 기준으로 베이스가 되는 코드 추가는 이 정도인 것 같습니다. (참고용)

특히 .like_on 클래스를 통해 하트 채워짐 / 비어있음 상태 전환이 동작하므로 반드시 추가가 필요합니다.

 

 

이제 플로팅 div 안에 티스토리 기본 공감 버튼이 제대로 작동합니다 !

위치만 옮긴 것이기 때문에 기존 기능은 그대로 유지되고, 스타일도 원래처럼 보이게 됩니다.