// ==UserScript==
// @name         Kone 사이트 콘 시스템 (이미지 삽입 + 콘 목록)
// @namespace    http://tampermonkey.net/
// @version      3.0
// @description  ~콘 이미지 삽입 및 댓글창 옆 콘 목록 표시
// @author       You
// @match        https://kone.gg/*
// @match        https://*.kone.gg/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // API 설정
    const API_BASE_URL = 'https://kon-image-api.pages.dev/api';
    const KON_API_URL = `${API_BASE_URL}/kon`;
    const KON_LIST_API_URL = `${API_BASE_URL}/kon/list`;

    // 기본 이미지 URL (API 실패시 사용)
    const FALLBACK_IMAGE_URL = 'https://static.wtable.co.kr/image/production/service/recipe/1500/adf710c9-e45c-4782-a07a-4fec0ed86e5b.jpg?size=800x800';

    // ~콘으로 끝나는 텍스트를 찾는 정규식
    const KON_REGEX = /(?:\()?(.+?)\s*콘(?:\))?$/;

    // 이미 처리된 요소들을 추적하기 위한 Set
    const processedElements = new WeakSet();

    // API 응답 캐시
    const apiCache = new Map();
    const konListCache = new Map();

    // 댓글창 셀렉터
    const COMMENT_TEXTAREA_SELECTOR = 'body > div.flex-1 > div > main > div > div > div > div.flex.flex-col.border-zinc-300.md\\:rounded-lg.md\\:border.lg\\:w-3\\/4.dark\\:border-zinc-700 > div.overflow-hidden.border-t.border-zinc-300.bg-white.pb-2.dark\\:border-zinc-700.dark\\:bg-zinc-800 > div.p-4.py-2 > div > div > textarea';

    // 콘 목록 UI 상태
    let konListPanel = null;
    let isKonListVisible = false;
    let currentKonList = [];

    // === 기존 콘 이미지 삽입 기능 ===

    // API 호출 함수
    async function fetchKonData(konName) {
        if (apiCache.has(konName)) {
            return apiCache.get(konName);
        }

        try {
            const response = await fetch(`${KON_API_URL}/${encodeURIComponent(konName)}`, {
                method: 'GET',
                mode: 'cors',
                credentials: 'omit',
                referrerPolicy: 'no-referrer',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log('API 응답:', data);

            apiCache.set(konName, data);
            setTimeout(() => apiCache.delete(konName), 5 * 60 * 1000);

            return data;
        } catch (error) {
            console.error('API 호출 실패:', error);
            const fallbackData = {
                success: false,
                exists: false,
                message: 'API 호출 실패: ' + error.message
            };

            apiCache.set(konName, fallbackData);
            setTimeout(() => apiCache.delete(konName), 30 * 1000);

            return fallbackData;
        }
    }

    async function insertImageForKonElements() {
        const pElements = document.querySelectorAll('p');

        for (const pElement of pElements) {
            if (processedElements.has(pElement)) {
                continue;
            }

            const textContent = pElement.textContent.trim();
            const match = textContent.match(KON_REGEX);

            if (match) {
                const fullText = match[0];
                const konName = match[1] + '콘';

                console.log('~콘으로 끝나는 p 태그 발견:', konName);
                processedElements.add(pElement);

                try {
                    const apiResponse = await fetchKonData(konName);
                    const newDiv = document.createElement('div');

                    Array.from(pElement.attributes).forEach(attr => {
                        newDiv.setAttribute(attr.name, attr.value);
                    });

                    newDiv.innerHTML = pElement.innerHTML;

                    if (apiResponse.success && apiResponse.exists && apiResponse.data) {
                        const img = document.createElement('img');
                        img.src = apiResponse.data.imageUrl;
                        img.alt = `${konName} 이미지`;
                        img.title = apiResponse.data.description || konName;
                        img.style.cssText = `
                            width: 100px;
                            height: 100px;
                            object-fit: contain;
                            display: block;
                            margin: 10px 0;
                            border-radius: 8px;
                            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                        `;

                        img.onerror = function() {
                            console.warn(`이미지 로드 실패: ${apiResponse.data.imageUrl}`);
                            this.src = FALLBACK_IMAGE_URL;
                        };

                        newDiv.appendChild(img);
                        console.log(`${konName} 이미지 추가 완료 (서버에서 가져옴)`);
                    } else {
                        const img = document.createElement('img');
                        img.src = FALLBACK_IMAGE_URL;
                        img.alt = `${konName} 이미지 (기본)`;
                        img.title = `${konName} (기본 이미지)`;
                        img.style.cssText = `
                            width: 100px;
                            height: 100px;
                            object-fit: contain;
                            display: block;
                            margin: 10px 0;
                            border-radius: 8px;
                            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                            opacity: 0.7;
                        `;

                        newDiv.appendChild(img);
                        console.log(`${konName} 기본 이미지 추가 완료 (서버에 없음)`);
                    }

                    pElement.parentNode.replaceChild(newDiv, pElement);

                } catch (error) {
                    console.error('이미지 처리 중 오류:', error);
                    processedElements.delete(pElement);
                }
            }
        }
    }

    // === 콘 목록 UI 기능 ===

    // 콘 목록 조회
    async function fetchKonList(search = '', limit = 20, offset = 0) {
        const cacheKey = `${search}_${limit}_${offset}`;
        
        if (konListCache.has(cacheKey)) {
            return konListCache.get(cacheKey);
        }

        try {
            const params = new URLSearchParams({
                limit: limit.toString(),
                offset: offset.toString()
            });

            if (search.trim()) {
                params.append('search', search.trim());
            }

            const response = await fetch(`${KON_LIST_API_URL}?${params}`, {
                method: 'GET',
                mode: 'cors',
                credentials: 'omit',
                referrerPolicy: 'no-referrer',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log('콘 목록 API 응답:', data);

            konListCache.set(cacheKey, data);
            setTimeout(() => konListCache.delete(cacheKey), 2 * 60 * 1000); // 2분 캐시

            return data;
        } catch (error) {
            console.error('콘 목록 API 호출 실패:', error);
            return {
                success: false,
                message: '콘 목록을 불러오는 중 오류가 발생했습니다: ' + error.message
            };
        }
    }

    // 콘 목록 UI 생성
    function createKonListUI() {
        // 콘 목록 패널 생성
        konListPanel = document.createElement('div');
        konListPanel.id = 'kon-list-panel';
        konListPanel.style.cssText = `
            position: fixed;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            width: 300px;
            max-height: 500px;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            z-index: 9999;
            display: none;
            font-family: 'Pretendard', sans-serif;
        `;

        // 다크 모드 스타일 추가
        if (document.documentElement.classList.contains('dark')) {
            konListPanel.style.background = '#27272a';
            konListPanel.style.borderColor = '#3f3f46';
            konListPanel.style.color = '#e4e4e7';
        }

        konListPanel.innerHTML = `
            <div style="padding: 16px; border-bottom: 1px solid #e5e7eb; ${document.documentElement.classList.contains('dark') ? 'border-color: #3f3f46;' : ''}">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
                    <h3 style="margin: 0; font-size: 16px; font-weight: 600;">콘 목록</h3>
                    <button id="kon-list-close" style="
                        background: none;
                        border: none;
                        cursor: pointer;
                        padding: 4px;
                        border-radius: 4px;
                        color: #6b7280;
                        hover: #374151;
                    ">✕</button>
                </div>
                <input type="text" id="kon-search-input" placeholder="콘 검색..." style="
                    width: 100%;
                    padding: 8px 12px;
                    border: 1px solid #d1d5db;
                    border-radius: 6px;
                    font-size: 14px;
                    outline: none;
                    ${document.documentElement.classList.contains('dark') ? 'background-color: #3f3f46; border-color: #52525b; color: #e4e4e7;' : ''}
                ">
            </div>
            <div id="kon-list-content" style="
                max-height: 400px;
                overflow-y: auto;
                padding: 8px;
            ">
                <div id="kon-list-loading" style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 40px;
                    color: #6b7280;
                ">
                    로딩 중...
                </div>
                <div id="kon-list-items" style="display: none;">
                </div>
                <div id="kon-list-error" style="
                    display: none;
                    padding: 20px;
                    text-align: center;
                    color: #ef4444;
                    font-size: 14px;
                ">
                    콘 목록을 불러올 수 없습니다.
                </div>
            </div>
        `;

        document.body.appendChild(konListPanel);

        // 이벤트 리스너 추가
        setupKonListEvents();
    }

    // 콘 목록 이벤트 설정
    function setupKonListEvents() {
        const closeBtn = document.getElementById('kon-list-close');
        const searchInput = document.getElementById('kon-search-input');

        // 닫기 버튼
        closeBtn.addEventListener('click', hideKonList);

        // 검색 입력
        let searchTimeout;
        searchInput.addEventListener('input', (e) => {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
                loadKonList(e.target.value);
            }, 300);
        });

        // 패널 외부 클릭시 닫기
        document.addEventListener('click', (e) => {
            if (konListPanel && isKonListVisible && !konListPanel.contains(e.target) && !e.target.closest('#kon-list-toggle')) {
                hideKonList();
            }
        });
    }

    // 콘 목록 로드
    async function loadKonList(search = '') {
        const loadingEl = document.getElementById('kon-list-loading');
        const itemsEl = document.getElementById('kon-list-items');
        const errorEl = document.getElementById('kon-list-error');

        // 로딩 상태 표시
        loadingEl.style.display = 'flex';
        itemsEl.style.display = 'none';
        errorEl.style.display = 'none';

        try {
            const response = await fetchKonList(search, 50, 0); // 최대 50개

            if (response.success) {
                currentKonList = response.data.kons;
                renderKonList(currentKonList);
            } else {
                throw new Error(response.message || '콘 목록을 불러올 수 없습니다.');
            }
        } catch (error) {
            console.error('콘 목록 로드 오류:', error);
            loadingEl.style.display = 'none';
            errorEl.style.display = 'block';
            errorEl.textContent = error.message;
        }
    }

    // 콘 목록 렌더링
    function renderKonList(kons) {
        const loadingEl = document.getElementById('kon-list-loading');
        const itemsEl = document.getElementById('kon-list-items');
        const errorEl = document.getElementById('kon-list-error');

        loadingEl.style.display = 'none';
        errorEl.style.display = 'none';

        if (kons.length === 0) {
            itemsEl.innerHTML = '<div style="padding: 20px; text-align: center; color: #6b7280; font-size: 14px;">콘이 없습니다.</div>';
        } else {
            itemsEl.innerHTML = kons.map(kon => `
                <div class="kon-item" data-kon-name="${kon.name}" style="
                    display: flex;
                    align-items: center;
                    padding: 12px;
                    margin-bottom: 4px;
                    border-radius: 6px;
                    cursor: pointer;
                    transition: background-color 0.2s;
                " onmouseover="this.style.backgroundColor='${document.documentElement.classList.contains('dark') ? '#3f3f46' : '#f9fafb'}'" 
                   onmouseout="this.style.backgroundColor='transparent'">
                    <img src="${kon.imageUrl}" alt="${kon.name}" style="
                        width: 40px;
                        height: 40px;
                        object-fit: cover;
                        border-radius: 6px;
                        margin-right: 12px;
                        border: 1px solid #e5e7eb;
                    " onerror="this.src='${FALLBACK_IMAGE_URL}'">
                    <div style="flex: 1; min-width: 0;">
                        <div style="font-weight: 500; font-size: 14px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                            ${kon.name}
                        </div>
                        ${kon.description ? `<div style="font-size: 12px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${kon.description}</div>` : ''}
                    </div>
                </div>
            `).join('');
        }

        itemsEl.style.display = 'block';

        // 콘 클릭 이벤트 추가
        itemsEl.querySelectorAll('.kon-item').forEach(item => {
            item.addEventListener('click', () => {
                const konName = item.dataset.konName;
                insertKonToComment(konName);
                hideKonList();
            });
        });
    }

    // 댓글창에 콘 텍스트 삽입
    function insertKonToComment(konName) {
        const textarea = document.querySelector(COMMENT_TEXTAREA_SELECTOR);
        
        if (textarea) {
            const currentValue = textarea.value;
            const newValue = currentValue + (currentValue ? ' ' : '') + konName;
            
            textarea.value = newValue;
            textarea.focus();
            
            // 커서를 끝으로 이동
            textarea.setSelectionRange(newValue.length, newValue.length);
            
            // 이벤트 발생 (React 등에서 감지할 수 있도록)
            textarea.dispatchEvent(new Event('input', { bubbles: true }));
            textarea.dispatchEvent(new Event('change', { bubbles: true }));
            
            console.log(`댓글창에 "${konName}" 삽입 완료`);
        } else {
            console.warn('댓글창을 찾을 수 없습니다.');
        }
    }

    // 콘 목록 토글 버튼 생성
    function createKonToggleButton() {
        // 기존 버튼이 있으면 제거
        const existingBtn = document.getElementById('kon-list-toggle');
        if (existingBtn) {
            existingBtn.remove();
        }

        const commentArea = document.querySelector(COMMENT_TEXTAREA_SELECTOR);
        if (!commentArea) {
            return;
        }

        const commentContainer = commentArea.closest('.flex.items-start.gap-3');
        if (!commentContainer) {
            return;
        }

        const toggleBtn = document.createElement('button');
        toggleBtn.id = 'kon-list-toggle';
        toggleBtn.innerHTML = '🥤';
        toggleBtn.title = '콘 목록 보기';
        toggleBtn.style.cssText = `
            position: absolute;
            right: -40px;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 32px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 100;
            ${document.documentElement.classList.contains('dark') ? 'background: #3f3f46; border-color: #52525b;' : ''}
        `;

        toggleBtn.addEventListener('click', (e) => {
            e.preventDefault();
            e.stopPropagation();
            toggleKonList();
        });

        toggleBtn.addEventListener('mouseenter', () => {
            toggleBtn.style.backgroundColor = document.documentElement.classList.contains('dark') ? '#4b5563' : '#f3f4f6';
        });

        toggleBtn.addEventListener('mouseleave', () => {
            toggleBtn.style.backgroundColor = document.documentElement.classList.contains('dark') ? '#3f3f46' : 'white';
        });

        // 댓글 입력 영역을 relative로 설정
        const textareaContainer = commentArea.parentElement;
        if (textareaContainer) {
            textareaContainer.style.position = 'relative';
            textareaContainer.appendChild(toggleBtn);
        }
    }

    // 콘 목록 표시/숨김 토글
    function toggleKonList() {
        if (isKonListVisible) {
            hideKonList();
        } else {
            showKonList();
        }
    }

    // 콘 목록 표시
    function showKonList() {
        if (!konListPanel) {
            createKonListUI();
        }
        
        konListPanel.style.display = 'block';
        isKonListVisible = true;
        
        // 처음 열 때만 콘 목록 로드
        if (currentKonList.length === 0) {
            loadKonList();
        }
    }

    // 콘 목록 숨김
    function hideKonList() {
        if (konListPanel) {
            konListPanel.style.display = 'none';
        }
        isKonListVisible = false;
    }

    // === 초기화 및 DOM 감지 ===

    function initializeKonSystem() {
        // 콘 이미지 삽입 실행
        insertImageForKonElements();
        
        // 콘 목록 버튼 생성
        createKonToggleButton();
    }

    // DOM 변화 감지
    function observeChanges() {
        const observer = new MutationObserver(function(mutations) {
            let shouldCheck = false;

            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === Node.ELEMENT_NODE) {
                            shouldCheck = true;
                        }
                    });
                }
            });

            if (shouldCheck) {
                setTimeout(() => {
                    insertImageForKonElements();
                    createKonToggleButton();
                }, 100);
            }
        });

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

    // 페이지 로드 완료 후 실행
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                initializeKonSystem();
                observeChanges();
            }, 500);
        });
    } else {
        setTimeout(() => {
            initializeKonSystem();
            observeChanges();
        }, 500);
    }

    // 페이지 로드 이벤트
    window.addEventListener('load', function() {
        setTimeout(initializeKonSystem, 1000);
    });

    // URL 변경 감지 (SPA 대응)
    let currentUrl = location.href;
    new MutationObserver(() => {
        if (location.href !== currentUrl) {
            currentUrl = location.href;
            apiCache.clear();
            konListCache.clear();
            currentKonList = [];
            
            if (konListPanel) {
                konListPanel.remove();
                konListPanel = null;
                isKonListVisible = false;
            }
            
            setTimeout(initializeKonSystem, 1000);
        }
    }).observe(document, { subtree: true, childList: true });

})();

~콘으로 끝나는 것들을 이미지를 가져와서 보여주도록 함.
없는 콘이면 토스트 이미지가 표시될거임

콘 추가 요청(콘명, 이미지 주소)하면 콘 추가 진행하겠음
대충 만들어서 버그 있을 수 있음

2025-05-22 21:37 정규식 수정(포괄적으로)