쿠팡 상품평 별점 그래프 그리기

 

물건을 사러 쿠팡에 들어갔다. 과다비교증후군으로 인한 시간낭비증이 좀 심한터라 이미 지른 사람들 뜻을 따르기로 했다. 최고 별점을 준 사람도 있고 나쁨 별점 준 사람도 있는 법..

 

별점 숫자 옆에 % 값과 그래프가 같이 표시되었으면 좋겠다는 생각이 떠올라버렸다. 쿠팡에 제안해볼까 하다가 그냥 나 혼자 만들어 쓰기로 했다.

 

MS GPU에 전기를 몇 번 흘려주면 이런 걸 아주 쉽게 할 수 있다. AI가 쓸만해져 이러한 "알쓸적짓"을 좀 더 자주하게 될 것 같다.

 

<원본 화면>

 

 

<AI가 만든 코드를 적용한 화면>

 

 

<따라 해보기>

혹시 이 '알아둬도 쓸데 적은 짓'을 따라하려는 사람은 먼저 요러한 스크립트 끼워넣기 확장 프로그램을 크롬에 설치해야한다. (크롬에서만 해봤는데 다른 브라우져도 비슷한것들이 있을것 같다.) 이 확장프로그램 자체는 쓸데가 은근 좀 있다. 특히 마우스질을 좀 귀찮아하는 나에게는 남들이 만든 화면을 조작해서 쓸 수 있어서 좋다.

https://chromewebstore.google.com/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

User JavaScript and CSS - Chrome 웹 스토어

 

이 확장 프록그램에 아래 화면처럼 새 룰을 추가한다. 룰은 웹화면을 조작하기 위한 javascript 코드이다. "Save"를 반드시 해야한다. 그리고 상품 페이지에 가서 화면을 다시 "새로 고침"하면 이제 퍼센티지와 그래프가 같이 보인다.

 

전체 코드:

function addReviewRatingPercentages() {
  const reviewList = document.querySelectorAll('.review-star-search-selector li');

  if (!reviewList || reviewList.length < 2) return;

  const totalCountText = reviewList[0].querySelector('.review-star-search-item-counts')?.textContent?.trim();
  const totalCount = parseInt(totalCountText.replace(/,/g, ''), 10); // 쉼표 제거

  if (isNaN(totalCount) || totalCount === 0) return;

  for (let i = 1; i < reviewList.length; i++) {
    const item = reviewList[i];
    const countEl = item.querySelector('.review-star-search-item-counts');
    if (!countEl) continue;

    const countText = countEl.textContent.trim();
    const count = parseInt(countText.replace(/,/g, ''), 10); // 쉼표 제거
    if (isNaN(count)) continue;

    if (countEl.querySelector('.review-percent-label')) continue;

    const percent = ((count / totalCount) * 100).toFixed(1);

    // 퍼센트 텍스트
    const percentSpan = document.createElement('span');
    percentSpan.className = 'review-percent-label';
    percentSpan.style.marginLeft = '8px';
    percentSpan.style.color = '#888';
    percentSpan.textContent = `(${percent}%)`;

    // 막대 그래프
    const barContainer = document.createElement('div');
    barContainer.style.height = '6px';
    barContainer.style.width = '100px';
    barContainer.style.backgroundColor = '#eee';
    barContainer.style.marginTop = '4px';
    barContainer.style.borderRadius = '3px';
    barContainer.style.overflow = 'hidden';

    const bar = document.createElement('div');
    bar.style.height = '100%';
    bar.style.width = `${percent}%`;
    bar.style.backgroundColor = '#4CAF50';

    barContainer.appendChild(bar);

    // 요소 추가
    countEl.appendChild(percentSpan);
    countEl.appendChild(barContainer);
  }
}

// DOM이 완전히 준비된 후 실행
window.addEventListener('load', () => {
  const targetNode = document.body;

  if (!targetNode) {
    console.warn('document.body가 아직 준비되지 않았습니다.');
    return;
  }

  const observer = new MutationObserver((mutationsList, observer) => {
    const reviewList = document.querySelectorAll('.review-star-search-selector li');
    if (reviewList.length >= 2) {
      addReviewRatingPercentages();
      observer.disconnect(); // 한 번만 실행
    }
  });

  observer.observe(targetNode, {
    childList: true,
    subtree: true
  });
});

 

 

근데 사려고 했던건 다음에 사야겠다. ㅠ.ㅠ