스크립트 지식 1도없이 챗지피티로 만들었습니다~ 문제시 글삭함

오류 생기면 스크립트 삭제 추천드려요

원래 이렇게 붙어있던 개념글/전체글 버튼을

이렇게 분리했습니다. 왼쪽은 전체글 모드, 오른쪽은 개념글 모드

그리고 중요한건 전체글일때 전체글 버튼 누르면 전체글 새로고침됨

마찬가지로 개념글일때 개념글 버튼 누르면 개념글 새로고침됨

새로고침 할려고 버튼 나눈거임

하 근데 최신순(시계모양) 버튼이 버튼 오른쪽에서 왼쪽으로 가버림.. 이건 못고치겟서

게시판 하단에 있던 버튼도 바뀝니다

확장프로그램 템퍼몽키 설치하시고 새 스크립트 만들기 > 안에 내용 지우고 스크립트 복붙 > 저장

아래는 스크립트 코드

// ==UserScript==
// @name         kone.gg 개념글/전체글 버튼 삽입(수정판)
// @namespace    http://tampermonkey.net/
// @version      2.4
// @description  게시판 개념글/전체글 버튼 삽입 수정
// @match        https://kone.gg/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    let lastUrl = location.href;

    const createButton = (text, onClick, isActive) => {
        const button = document.createElement('button');
        button.textContent = text;
        button.style.cssText = `
            margin-right: 8px;
            padding: 6px 12px;
            border: none;
            border-radius: 9999px;
            font-size: 14px;
            cursor: pointer;
            background-color: ${isActive ? '#dc2626' : '#e4e4e7'};
            color: ${isActive ? 'white' : '#27272a'};
        `;
        button.addEventListener('click', onClick);
        return button;
    };

    const insertButtons = () => {
        const url = location.href;
        const isHot = url.includes('mode=hot');
        const basePath = location.pathname;

        const boardWrapper = document.querySelector('div.grow.flex.flex-col.rounded-b-lg');
        if (!boardWrapper) return;

        const buttonRows = boardWrapper.querySelectorAll('div.flex.items-center.gap-2');
        if (!buttonRows.length) return;

        buttonRows.forEach((targetRow) => {
            if (targetRow.querySelector('a[href*="write"]')) return;
            if (targetRow.querySelector('#custom-btn-hot') || targetRow.querySelector('#custom-btn-all')) return;

            // 기존 개념글/전체글 a 링크 삭제
            targetRow.querySelectorAll('a[href]').forEach(link => {
                const href = link.getAttribute('href');
                if (href.includes('mode=hot') || href === basePath) {
                    link.remove();
                }
            });

            const hotBtn = createButton('개념글', () => {
                window.location.href = basePath + '?mode=hot';
            }, isHot);
            hotBtn.id = 'custom-btn-hot';

            const allBtn = createButton('전체글', () => {
                window.location.href = basePath;
            }, !isHot);
            allBtn.id = 'custom-btn-all';

            targetRow.appendChild(allBtn);
            targetRow.appendChild(hotBtn);
        });
    };

    // 버튼 삽입 및 재삽입 시도
    const tryInsertButtons = () => {
        insertButtons();
    };

    // history API 훅 감싸기
    const hookHistoryMethod = (method) => {
        const original = history[method];
        return function () {
            const result = original.apply(this, arguments);
            window.dispatchEvent(new Event('locationchange'));
            return result;
        };
    };
    history.pushState = hookHistoryMethod('pushState');
    history.replaceState = hookHistoryMethod('replaceState');

    window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange')));
    window.addEventListener('locationchange', () => {
        if (lastUrl !== location.href) {
            lastUrl = location.href;
            tryInsertButtons();
        }
    });

    // DOM 변경 감지해서도 버튼 갱신 (최상위 body 감시)
    const observer = new MutationObserver(() => {
        tryInsertButtons();
    });
    observer.observe(document.body, { childList: true, subtree: true });

    // 최초 실행 딜레이 줘서 기다렸다 삽입
    setTimeout(() => {
        tryInsertButtons();
    }, 1000);

})();