// ==UserScript==
// @name 다모앙 소모임 목록 클릭 횟수에 따른 정렬
// @version 1.0
// @description 클릭 횟수에 따라 소모임 목록을 정렬하고, 배경색을 변경합니다.
// @author LiNE
// @match https://damoang.net/bbs/group.php?gr_id=group
// @icon https://www.google.com/s2/favicons?sz=64&domain=damoang.net
// @grant none
// ==/UserScript==

(function () {
'use strict';

const groupContainerSelector = '.row.row-cols-2.row-cols-md-5.row-cols-lg-10.g-2.pt-3';
const linksSelector = 'a.nav-link.p-1.border.rounded.text-center.d-block';

// 그룹별 클릭 횟수 로드
const loadClickCounts = () => {
const counts = JSON.parse(localStorage.getItem('groupClickCounts')) || {};
return counts;
};

// 클릭 횟수 저장
const saveClickCounts = (counts) => {
localStorage.setItem('groupClickCounts', JSON.stringify(counts));
};

// 클릭 횟수 증가
const incrementClickCount = (groupName) => {
const counts = loadClickCounts();
counts[groupName] = (counts[groupName] || 0) + 1;
saveClickCounts(counts);
};

// 클릭 이벤트 핸들러 추가
const addClickHandler = (linkElement) => {
const groupName = linkElement.textContent.trim();
linkElement.addEventListener('click', () => {
incrementClickCount(groupName);
});
};

// 배경색 설정 함수 (클릭 횟수 0인 경우 변경하지 않음)
const setBackgroundColor = (element, clickCount) => {
if (clickCount === 0) return; // 클릭 횟수가 0일 경우 색상 변경 없음

let bgColor = 'rgba(173, 216, 230, 0.5)'; // 기본 연한 파란색
let textColor = '#000'; // 기본 검은색

if (clickCount >= 10) {
// 클릭 횟수가 10 이상인 경우 일정한 진한 파란색
bgColor = 'rgba(0, 102, 204, 0.8)'; // 진한 파란색
textColor = '#fff'; // 글자색 흰색
} else {
// 클릭 횟수에 따라 점점 진한 색
const intensity = Math.min(255, 255 - clickCount * 20); // 클릭 횟수에 따라 점점 진하게
bgColor = `rgba(${intensity}, ${intensity}, 255, 0.8)`; // RGB 색상 조절
textColor = intensity < 128 ? '#fff' : '#000'; // 색상에 따라 글자색 조절
}

element.style.backgroundColor = bgColor;
element.style.color = textColor;
};

// 그룹 요소 정렬
const sortGroupsByClickCount = (groupElements) => {
const counts = loadClickCounts();

return Array.from(groupElements).sort((a, b) => {
const groupA = a.textContent.trim();
const groupB = b.textContent.trim();
const countA = counts[groupA] || 0;
const countB = counts[groupB] || 0;
return countB - countA; // 내림차순 정렬
});
};

// 초기화 함수
const initialize = () => {
const groupContainer = document.querySelector(groupContainerSelector);
if (!groupContainer) return;

const groupLinks = groupContainer.querySelectorAll(linksSelector);

// 기존 링크에 클릭 이벤트 핸들러 추가
groupLinks.forEach(addClickHandler);

// 클릭 횟수에 따라 정렬
const sortedGroups = sortGroupsByClickCount(groupLinks);

// 기존 그룹 요소 제거
groupContainer.innerHTML = '';

// 정렬된 그룹 요소 추가 및 배경색 변경
sortedGroups.forEach((group) => {
const groupName = group.textContent.trim();
const clickCount = loadClickCounts()[groupName] || 0;
setBackgroundColor(group, clickCount); // 클릭 횟수에 따른 배경색 설정 (클릭 횟수 0인 경우는 변경 없음)
groupContainer.appendChild(group);
});
};

// 페이지 로드 시 초기화 함수 실행
window.addEventListener('load', initialize);
})();

감사합니다.

오 좋네요~
이것을 소모임에 어떻게 넣을 수 있을까요?

https://github.com/damoang