// ==UserScript==
// @name         코네 댓글 시스템 개선
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  코네(kone.gg) 사이트의 댓글 시스템을 개선
// @author       Your name
// @match        https://kone.gg/s/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // CSS 스타일 주입
    const injectCSS = () => {
        // 이미 스타일이 주입되었는지 확인
        if (document.getElementById('kone-comment-style')) return;

        const style = document.createElement('style');
        style.id = 'kone-comment-style';
        style.textContent = `
            /* 전체 댓글 컨테이너 스타일 */
            .comment-wrapper {
                margin-bottom: 8px !important;
                border: none !important;
            }

            /* 댓글 아이템 스타일 */
            .comment-item {
                position: relative;
                border: 1px solid #e0e0e0;
                border-radius: 4px;
                padding: 10px;
                margin-bottom: 8px;
                background-color: #ffffff;
            }

            /* 댓글 메타 정보 (작성자, 시간) */
            .info-row {
                display: flex;
                align-items: center;
                margin-bottom: 8px;
                font-size: 13px;
            }

            /* 댓글 작성자 정보 */
            .user-info {
                font-weight: bold;
                display: flex;
                align-items: center;
                margin-right: 8px;
            }

            /* 아바타 이미지 */
            .avatar {
                width: 24px;
                height: 24px;
                margin-right: 8px;
                border-radius: 50%;
                overflow: hidden;
            }

            /* 댓글 내용 */
            .message {
                word-break: break-word;
            }

            /* 댓글 텍스트 */
            .text {
                padding: 8px 0;
            }

            /* 대댓글 스타일 */
            .comment-reply {
                margin-left: 20px !important;
                position: relative;
            }

            /* 대댓글 연결선 */
            .comment-reply::before {
                content: '';
                position: absolute;
                left: -10px;
                top: 0;
                height: 100%;
                border-left: 1px solid #e0e0e0;
            }

            /* 대댓글 화살표 */
            .reply-arrow {
                position: absolute;
                left: -10px;
                top: 15px;
                color: #999;
                transform: rotate(180deg);
                font-size: 12px;
            }

            /* 댓글 작성 시간 */
            .comment-time {
                color: #999;
                margin-left: auto;
            }
        `;
        document.head.appendChild(style);
    };

    function improveCommentSystem() {
        console.log('코네 댓글 개선 실행 중...');

        // 1. 모든 확장 버튼 클릭 (재귀적 접근)
        function clickAllExpandButtons() {
            const expandButtons = document.querySelectorAll('button.group.pointer-events-auto');
            let clickedAny = false;

            expandButtons.forEach(button => {
                try {
                    // 버튼 내부에 circle-plus SVG가 있는지 확인
                    const hasPlusIcon = button.querySelector('.lucide-circle-plus');
                    if (hasPlusIcon) {
                        button.click();
                        clickedAny = true;
                        console.log("버튼 클릭됨");
                    }
                } catch (e) {
                    console.log('버튼 클릭 오류:', e);
                }
            });

            // 버튼을 클릭했다면, 새로운 버튼이 로드될 시간을 주고 다시 함수 실행
            if (clickedAny) {
                setTimeout(clickAllExpandButtons, 500);
            }
        }

        // 재귀적으로 모든 버튼 클릭 시작
        clickAllExpandButtons();

        // 2. "X개의 댓글" 버튼 숨기기
        const replyCountButtons = document.querySelectorAll('.absolute.flex.cursor-pointer.items-center');
        replyCountButtons.forEach(button => {
            if (button.textContent.includes('개의 댓글')) {
                button.style.display = 'none';
            }
        });

        // 3. 댓글 구조 개선 - 모든 댓글 불투명도 정상화
        const commentItems = document.querySelectorAll('.group.overflow-hidden.opacity-50');
        commentItems.forEach(item => {
            item.classList.remove('opacity-50');
        });

        console.log('코네 댓글 개선 스크립트가 실행되었습니다');
    }

    // 초기화 함수
    function initScript() {
        // CSS 스타일 주입 (페이지마다 한 번만 실행)
        injectCSS();

        // 댓글 시스템 개선 실행
        improveCommentSystem();

        // 댓글 영역 관찰 설정
        setupCommentObserver();
    }

    // 댓글 영역 관찰 함수
    function setupCommentObserver() {
        // 이전 관찰자 제거 (있다면)
        if (window.koneCommentObserver) {
            window.koneCommentObserver.disconnect();
        }

        // 새 관찰자 생성
        window.koneCommentObserver = new MutationObserver(function(mutations) {
            setTimeout(improveCommentSystem, 500);
        });

        // 댓글 영역 찾기 및 관찰 시작
        const commentsContainer = document.getElementById('comment');
        if (commentsContainer) {
            window.koneCommentObserver.observe(commentsContainer.parentElement, {
                childList: true,
                subtree: true
            });
            console.log('댓글 영역 관찰 시작');
        } else {
            // 댓글 영역이 아직 로드되지 않았다면 나중에 다시 시도
            setTimeout(setupCommentObserver, 1000);
        }
    }

    // URL 변경 감지 함수
    function setupURLChangeDetection() {
        // 현재 URL 저장
        let lastUrl = location.href;

        // URL 변경 감지를 위한 observer
        const bodyObserver = new MutationObserver(() => {
            if (lastUrl !== location.href && location.href.includes('/s/')) {
                console.log('URL 변경 감지:', lastUrl, '->', location.href);
                lastUrl = location.href;
                setTimeout(initScript, 1000);
            }
        });

        // 문서 변경 관찰 시작
        bodyObserver.observe(document.body, {
            childList: true,
            subtree: true
        });

        // History API 오버라이드
        const originalPushState = history.pushState;
        history.pushState = function() {
            originalPushState.apply(this, arguments);
            if (location.href.includes('/s/')) {
                console.log('pushState 감지');
                setTimeout(initScript, 1000);
            }
        };

        // popstate 이벤트 리스너 (뒤로가기/앞으로가기)
        window.addEventListener('popstate', function() {
            if (location.href.includes('/s/')) {
                console.log('popstate 이벤트 감지');
                setTimeout(initScript, 1000);
            }
        });
    }

    // 초기 실행 (지연시간 추가)
    setTimeout(function() {
        // URL 변경 감지 설정
        setupURLChangeDetection();

        // 초기 스크립트 실행
        initScript();

        console.log('코네 댓글 개선 스크립트 초기화 완료');
    }, 1500);
})();

자꾸 1개의 댓글 모시깽이 나와서 만듦.

2025-05-19
재귀처리 개선