// ==UserScript==
// @name         Advanced Multi-Engine Web Crawler
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  여러 검색 엔진을 지원하는 고급 웹 크롤링 및 데이터 수집 도구 (개선 버전)
// @author       Your Name
// @match        *://www.google.com/search*
// @match        *://www.bing.com/search*
// @match        *://duckduckgo.com/*
// @match        *://search.yahoo.com/*
// @grant        GM_download
// @grant        GM_setValue
// @grant        GM_getValue
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js
// ==/UserScript==

(function() {
    'use strict';

    // 기본 설정
    const defaultSettings = {
        delay: 2000, // 요청 간 딜레이 (밀리초)
        maxPages: 5, // 최대 페이지 수
        blacklist: ['ads', 'sponsor', 'advertisement'], // 블랙리스트 도메인
        whitelist: [], // 화이트리스트 도메인
    };

    // 설정 불러오기 또는 기본 설정 저장
    const settings = GM_getValue('crawlerSettings', defaultSettings);

    // 상태 변수 불러오기
    let currentPage = GM_getValue('currentPage', 1);
    let results = GM_getValue('results', []);
    let visited = new Set(GM_getValue('visited', []));

    // 검색 엔진 식별
    const searchEngine = identifySearchEngine();

    // UI 생성
    function createUI() {
        if ($('#crawler-ui').length) return; // UI가 이미 존재하면 생성하지 않음

        const ui = $(`
            <div id="crawler-ui" style="position: fixed; top: 10px; right: 10px; width: 420px; background: #ffffff; border: 2px solid #333333; border-radius: 10px; z-index: 10000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.2);">
                <!-- 탭 메뉴 -->
                <div style="display: flex; border-bottom: 1px solid #333333; background: #f7f7f7; border-top-left-radius: 10px; border-top-right-radius: 10px;">
                    <div class="tab active" data-tab="log" style="flex: 1; padding: 12px; cursor: pointer; text-align: center; font-weight: 600; color: #333333;">📜 로그</div>
                    <div class="tab" data-tab="data" style="flex: 1; padding: 12px; cursor: pointer; text-align: center; font-weight: 600; color: #333333;">📊 데이터</div>
                    <div class="tab" data-tab="settings" style="flex: 1; padding: 12px; cursor: pointer; text-align: center; font-weight: 600; color: #333333;">⚙️ 설정</div>
                </div>

                <!-- 로그 탭 콘텐츠 -->
                <div class="tab-content" id="log" style="padding: 10px; display: block; max-height: 200px; overflow-y: auto; font-size: 12px; background: #ffffff;">
                    <h3 style="margin-top: 0; font-size: 16px; color: #333333;">로그</h3>
                    <div id="log-content" style="max-height: 160px; overflow-y: auto; font-size: 12px; color: #555555;"></div>
                </div>

                <!-- 데이터 탭 콘텐츠 -->
                <div class="tab-content" id="data" style="padding: 10px; display: none; background: #ffffff;">
                    <h3 style="margin-top: 0; font-size: 16px; color: #333333;">데이터</h3>
                    <input type="text" id="search-filter" placeholder="실시간 검색..." style="width: 100%; padding: 8px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    <div style="overflow-x: auto; max-height: 300px;">
                        <table id="data-table" border="1" width="100%" style="border-collapse: collapse; font-size: 14px; width: 100%;">
                            <thead style="background: #333333; color: #ffffff; position: sticky; top: 0;">
                                <tr>
                                    <th style="padding: 10px; cursor: pointer; text-align: left;" data-sort="name">사이트 이름 ▲▼</th>
                                    <th style="padding: 10px; cursor: pointer; text-align: left;" data-sort="url">주소 ▲▼</th>
                                    <th style="padding: 10px; cursor: pointer; text-align: left;" data-sort="description">설명 ▲▼</th>
                                    <th style="padding: 10px; cursor: pointer; text-align: left;" data-sort="category">분류 ▲▼</th>
                                    <th style="padding: 10px; cursor: pointer; text-align: left;" data-sort="quality">품질 점수 ▲▼</th>
                                    <th style="padding: 10px; text-align: center;">HTML 보기</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="pagination" style="margin-top: 10px; text-align: center;">
                        <button id="prev-page" style="padding: 6px 12px; margin-right: 5px; background: #007bff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer;">이전</button>
                        <span id="page-info" style="margin: 0 10px; color: #333333;">1 / 1</span>
                        <button id="next-page" style="padding: 6px 12px; margin-left: 5px; background: #007bff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer;">다음</button>
                    </div>
                </div>

                <!-- 설정 탭 콘텐츠 -->
                <div class="tab-content" id="settings" style="padding: 10px; display: none; background: #ffffff;">
                    <h3 style="margin-top: 0; font-size: 16px; color: #333333;">설정</h3>
                    <label style="display: block; margin-bottom: 10px; color: #333333;">
                        딜레이 (ms):
                        <input type="number" id="delay" value="${settings.delay}" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    </label>
                    <label style="display: block; margin-bottom: 10px; color: #333333;">
                        최대 페이지:
                        <input type="number" id="maxPages" value="${settings.maxPages}" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    </label>
                    <label style="display: block; margin-bottom: 10px; color: #333333;">
                        블랙리스트 (콤마로 구분):
                        <input type="text" id="blacklist" value="${settings.blacklist.join(', ')}" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    </label>
                    <label style="display: block; margin-bottom: 10px; color: #333333;">
                        화이트리스트 (콤마로 구분):
                        <input type="text" id="whitelist" value="${settings.whitelist.join(', ')}" style="width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; font-size: 14px;">
                    </label>
                    <button id="save-settings" style="width: 100%; padding: 10px; background: #28a745; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">저장</button>
                </div>

                <!-- 크롤링 컨트롤 및 다운로드 버튼 -->
                <div style="padding: 12px; border-top: 1px solid #333333; background: #f7f7f7; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <button id="start-crawl" style="flex: 1; padding: 8px; margin-right: 5px; background: #28a745; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">크롤링 시작</button>
                        <button id="stop-crawl" style="flex: 1; padding: 8px; margin-left: 5px; background: #dc3545; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">크롤링 중지</button>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <button id="download-csv" style="flex: 1; padding: 8px; margin-right: 5px; background: #007bff; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">CSV 다운로드</button>
                        <button id="download-json" style="flex: 1; padding: 8px; margin-left: 5px; background: #17a2b8; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">JSON 다운로드</button>
                    </div>
                    <div style="text-align: center; color: #333333; font-weight: 600;">
                        진행률: <span id="progress">0%</span>
                        <div id="loading-indicator" style="display: none; margin-top: 5px;">
                            <div class="spinner" style="border: 4px solid #f3f3f3; border-top: 4px solid #333333; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; display: inline-block;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal 창 -->
            <div id="html-modal" style="display:none; position: fixed; top: 0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.5); z-index:10001;">
                <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: #ffffff; padding: 20px; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
                    <h3 style="margin-top: 0; color: #333333;">HTML 내용</h3>
                    <pre id="modal-content" style="white-space: pre-wrap; word-wrap: break-word; max-height: 60%; overflow-y: auto; background: #f8f9fa; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; color: #333333;"></pre>
                    <button id="close-modal" style="padding: 8px 16px; background: #dc3545; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; font-size: 14px;">닫기</button>
                </div>
            </div>

            <!-- 스피너 애니메이션 -->
            <style>
                @keyframes spin {
                    0% { transform: rotate(0deg); }
                    100% { transform: rotate(360deg); }
                }
            </style>
        `);

        $('body').append(ui);

        // 탭 전환 이벤트
        $('.tab').on('click', function() {
            const tab = $(this).data('tab');
            $('.tab').removeClass('active').css('background', '#f7f7f7').css('color', '#333333');
            $(this).addClass('active').css('background', '#e9ecef').css('color', '#333333');
            $('.tab-content').hide();
            $(`#${tab}`).fadeIn(200);
        });

        // 설정 저장 이벤트
        $('#save-settings').on('click', function() {
            settings.delay = parseInt($('#delay').val()) || defaultSettings.delay;
            settings.maxPages = parseInt($('#maxPages').val()) || defaultSettings.maxPages;
            settings.blacklist = $('#blacklist').val().split(',').map(s => s.trim()).filter(s => s);
            settings.whitelist = $('#whitelist').val().split(',').map(s => s.trim()).filter(s => s);
            GM_setValue('crawlerSettings', settings);
            log('설정이 저장되었습니다.');
        });

        // 크롤링 시작 버튼
        $('#start-crawl').on('click', startCrawling);

        // 크롤링 중지 버튼
        $('#stop-crawl').on('click', stopCrawling);

        // CSV 다운로드 버튼
        $('#download-csv').on('click', downloadCSV);

        // JSON 다운로드 버튼
        $('#download-json').on('click', downloadJSON);

        // HTML 모달 닫기
        $('#close-modal').on('click', function() {
            $('#html-modal').fadeOut(200);
        });

        // HTML 내용 보기 이벤트
        $('body').on('click', '.view-html', function() {
            const htmlContent = $(this).data('html');
            $('#modal-content').text(htmlContent);
            $('#html-modal').fadeIn(200);
        });

        // 데이터 검색 필터링
        $('#search-filter').on('input', function() {
            currentDataPage = 1;
            renderTable();
        });

        // 테이블 헤더 클릭 시 정렬
        $('#data-table thead th[data-sort]').on('click', function() {
            const sortKey = $(this).data('sort');
            if (currentSort.key === sortKey) {
                currentSort.order = currentSort.order === 'asc' ? 'desc' : 'asc';
            } else {
                currentSort.key = sortKey;
                currentSort.order = 'asc';
            }
            sortResults();
            renderTable();
        });

        // 페이징 버튼 이벤트
        $('#prev-page').on('click', function() {
            if (currentDataPage > 1) {
                currentDataPage--;
                renderTable();
            }
        });

        $('#next-page').on('click', function() {
            if (currentDataPage < totalDataPages) {
                currentDataPage++;
                renderTable();
            }
        });
    }

    // 로그 추가 함수
    function log(message) {
        const timestamp = new Date().toLocaleTimeString();
        $('#log-content').append(`<div>[${timestamp}] ${message}</div>`);
        $('#log-content').scrollTop($('#log-content')[0].scrollHeight);
        console.log(`[Crawler] ${message}`);
    }

    // 크롤링 제어 변수
    let crawling = false;

    // 크롤링 시작
    async function startCrawling() {
        if (crawling) {
            log('이미 크롤링이 진행 중입니다.');
            return;
        }
        if (results.length > 0) {
            const confirmation = confirm('이전에 수집된 데이터가 있습니다. 계속 진행하시겠습니까?');
            if (!confirmation) return;
            // 초기화
            currentPage = 1;
            results = [];
            visited = new Set();
            GM_setValue('currentPage', currentPage);
            GM_setValue('results', results);
            GM_setValue('visited', Array.from(visited));
            renderTable();
            $('#progress').text('0%');
        }

        crawling = true;
        log('크롤링을 시작합니다.');
        $('#loading-indicator').show();
        await crawlPage();
    }

    // 크롤링 중지
    function stopCrawling() {
        if (!crawling) {
            log('크롤링이 진행 중이지 않습니다.');
            return;
        }
        crawling = false;
        log('크롤링이 중지되었습니다.');
        $('#loading-indicator').hide();
    }

    // 페이지 크롤링 함수
    async function crawlPage() {
        try {
            while (crawling && currentPage <= settings.maxPages) {
                log(`페이지 ${currentPage} 크롤링 중...`);
                const items = extractSearchResults();

                for (let item of items) {
                    if (!crawling) break;

                    const { name, url, description, html } = item;

                    // 중복 검사
                    if (visited.has(url)) {
                        log(`이미 방문한 사이트: ${url}`);
                        continue;
                    }

                    // 화이트리스트/블랙리스트 검사
                    if (settings.whitelist.length > 0) {
                        const isWhitelisted = settings.whitelist.some(domain => url.includes(domain));
                        if (!isWhitelisted) {
                            log(`화이트리스트에 없는 사이트: ${url}`);
                            continue;
                        }
                    }
                    if (settings.blacklist.some(domain => url.includes(domain))) {
                        log(`블랙리스트에 있는 사이트: ${url}`);
                        continue;
                    }

                    visited.add(url);
                    GM_setValue('visited', Array.from(visited));

                    // 콘텐츠 품질 평가 (단어 수 기준)
                    const wordCount = description.split(/\s+/).length;
                    const qualityScore = wordCount > 100 ? '높음' : '낮음';

                    // 키워드 분류
                    const categories = classifyKeywords(description);

                    // 결과 저장
                    results.push({
                        name,
                        url,
                        description,
                        category: categories.join(', '),
                        quality: qualityScore,
                        html
                    });

                    GM_setValue('results', results);
                    renderTable();
                    log(`수집 완료: ${name} (${url})`);

                    // 진행률 업데이트
                    const progress = Math.min((results.length / (settings.maxPages * items.length)) * 100, 100);
                    $('#progress').text(`${progress.toFixed(2)}%`);

                    await delay(settings.delay);
                }

                // 다음 페이지로 이동
                if (crawling && currentPage < settings.maxPages) {
                    const nextButton = getNextButton();
                    if (nextButton) {
                        nextButton.click();
                        currentPage++;
                        GM_setValue('currentPage', currentPage);
                        log(`다음 페이지로 이동: 페이지 ${currentPage}`);
                        await delay(settings.delay * 2);
                    } else {
                        log('더 이상 페이지가 없습니다.');
                        break;
                    }
                } else {
                    log('크롤링을 종료합니다.');
                    break;
                }
            }
        } catch (error) {
            log(`에러 발생: ${error.message}`);
        } finally {
            crawling = false;
            $('#loading-indicator').hide();
            log('크롤링이 완료되었습니다.');
        }
    }

    // 검색 결과 추출 함수
    function extractSearchResults() {
        let items = [];
        try {
            switch(searchEngine) {
                case 'Google':
                    $('.g').each(function() {
                        const name = $(this).find('h3').text() || 'No Title';
                        let url = $(this).find('a').attr('href') || 'No URL';
                        // 구글의 경우 URL이 `/url?q=...` 형식일 수 있으므로 정제
                        if (url.startsWith('/url?q=')) {
                            url = decodeURIComponent(url.split('/url?q=')[1].split('&')[0]);
                        }
                        const description = $(this).find('.VwiC3b').text() || 'No Description';
                        const html = $('<div>').append($(this).clone()).html();
                        items.push({ name, url, description, html });
                    });
                    break;
                case 'Bing':
                    $('.b_algo').each(function() {
                        const name = $(this).find('h2').text() || 'No Title';
                        const url = $(this).find('a').attr('href') || 'No URL';
                        const description = $(this).find('.b_caption p').text() || 'No Description';
                        const html = $('<div>').append($(this).clone()).html();
                        items.push({ name, url, description, html });
                    });
                    break;
                case 'DuckDuckGo':
                    $('.result').each(function() {
                        const name = $(this).find('.result__title').text() || 'No Title';
                        let url = $(this).find('a.result__a').attr('href') || 'No URL';
                        // DuckDuckGo의 경우 중간 리디렉션 URL일 수 있으므로 정제 필요
                        if (url.includes('/l/?kh=-1&uddg=')) {
                            const urlParam = new URLSearchParams(url.split('?')[1]);
                            url = urlParam.get('uddg') || url;
                        }
                        const description = $(this).find('.result__snippet').text() || 'No Description';
                        const html = $('<div>').append($(this).clone()).html();
                        items.push({ name, url, description, html });
                    });
                    break;
                case 'Yahoo':
                    $('.dd.algo').each(function() {
                        const name = $(this).find('h3').text() || 'No Title';
                        const url = $(this).find('a').attr('href') || 'No URL';
                        const description = $(this).find('.compText p').text() || 'No Description';
                        const html = $('<div>').append($(this).clone()).html();
                        items.push({ name, url, description, html });
                    });
                    break;
                default:
                    log('지원하지 않는 검색 엔진입니다.');
            }
        } catch (error) {
            log(`검색 결과 추출 중 에러 발생: ${error.message}`);
        }
        return items;
    }

    // 다음 페이지 버튼 가져오기
    function getNextButton() {
        switch(searchEngine) {
            case 'Google':
                return document.querySelector('#pnnext');
            case 'Bing':
                return document.querySelector('a.sb_pagN');
            case 'DuckDuckGo':
                return document.querySelector('a.result--more__btn');
            case 'Yahoo':
                return document.querySelector('a.next');
            default:
                return null;
        }
    }

    // HTML 이스케이프 함수
    function escapeHtml(text) {
        return text.replace(/&/g, "&amp;")
                   .replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;")
                   .replace(/"/g, "&quot;")
                   .replace(/'/g, "&#039;");
    }

    // 키워드 분류 함수 (예시)
    function classifyKeywords(text) {
        const categories = [];
        const keywords = {
            '교육': ['학교', '교육', '강의', '학습'],
            '테크': ['기술', '소프트웨어', '프로그래밍', '개발'],
            '비즈니스': ['비즈니스', '마케팅', '스타트업', '기업'],
            '엔터테인먼트': ['영화', '음악', '게임', '연예'],
            '건강': ['건강', '병원', '의료', '운동']
        };
        for (let [category, keys] of Object.entries(keywords)) {
            if (keys.some(key => text.includes(key))) {
                categories.push(category);
            }
        }
        return categories.length > 0 ? categories : ['기타'];
    }

    // 검색 엔진 식별 함수
    function identifySearchEngine() {
        const url = window.location.hostname;
        if (url.includes('google.com')) return 'Google';
        if (url.includes('bing.com')) return 'Bing';
        if (url.includes('duckduckgo.com')) return 'DuckDuckGo';
        if (url.includes('yahoo.com')) return 'Yahoo';
        return 'Unknown';
    }

    // 초기 UI 생성 및 데이터 로드
    $(document).ready(function() {
        createUI();
        renderTable();
        updateProgress();
    });

    // 단축키 지원
    $(document).on('keydown', function(e) {
        if (e.ctrlKey) {
            switch (e.key.toLowerCase()) {
                case '1':
                    $('.tab[data-tab="log"]').click();
                    break;
                case '2':
                    $('.tab[data-tab="data"]').click();
                    break;
                case '3':
                    $('.tab[data-tab="settings"]').click();
                    break;
                case 's':
                    $('#save-settings').click();
                    break;
                case 'p':
                    $('#start-crawl').click();
                    break;
                case 'q':
                    $('#stop-crawl').click();
                    break;
                case 'd':
                    if (e.shiftKey) {
                        downloadJSON();
                    } else {
                        downloadCSV();
                    }
                    break;
            }
        }
    });

    // 데이터 정렬 상태
    let currentSort = { key: null, order: 'asc' };

    // 데이터 페이지 상태
    let currentDataPage = 1;
    const itemsPerPage = 10;
    let totalDataPages = 1;

    // 테이블 렌더링 함수
    function renderTable() {
        const tbody = $('#data-table tbody');
        tbody.empty();

        let filteredResults = results.filter(item => {
            const filter = $('#search-filter').val().toLowerCase();
            return item.name.toLowerCase().includes(filter) ||
                   item.url.toLowerCase().includes(filter) ||
                   item.description.toLowerCase().includes(filter) ||
                   item.category.toLowerCase().includes(filter) ||
                   item.quality.toLowerCase().includes(filter);
        });

        totalDataPages = Math.ceil(filteredResults.length / itemsPerPage) || 1;
        if (currentDataPage > totalDataPages) currentDataPage = totalDataPages;

        const start = (currentDataPage - 1) * itemsPerPage;
        const end = start + itemsPerPage;
        const pageItems = filteredResults.slice(start, end);

        for (let item of pageItems) {
            tbody.append(`
                <tr>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #333333;">${escapeHtml(item.name)}</td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #007bff; text-decoration: underline;"><a href="${item.url}" target="_blank" style="color: #007bff; text-decoration: none;">${escapeHtml(item.url)}</a></td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #555555;">${escapeHtml(item.description)}</td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: #333333;">${escapeHtml(item.category)}</td>
                    <td style="padding: 10px; border: 1px solid #ddd; color: ${item.quality === '높음' ? '#28a745' : '#dc3545'}; font-weight: 600;">${escapeHtml(item.quality)}</td>
                    <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">
                        <button class="view-html" data-html="${escapeHtml(item.html)}" style="padding: 6px 12px; background: #17a2b8; color: #ffffff; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">보기</button>
                    </td>
                </tr>
            `);
        }

        $('#page-info').text(`${currentDataPage} / ${totalDataPages}`);
    }

    // 데이터 정렬 함수
    function sortResults() {
        if (!currentSort.key) return;
        results.sort((a, b) => {
            let valA = a[currentSort.key].toLowerCase();
            let valB = b[currentSort.key].toLowerCase();
            if (valA < valB) return currentSort.order === 'asc' ? -1 : 1;
            if (valA > valB) return currentSort.order === 'asc' ? 1 : -1;
            return 0;
        });
    }

    // 진행률 업데이트
    function updateProgress() {
        const totalItems = settings.maxPages * 10; // 각 페이지당 10개 결과 가정
        const progress = Math.min((results.length / totalItems) * 100, 100);
        $('#progress').text(`${progress.toFixed(2)}%`);
    }

    // CSV 다운로드
    function downloadCSV() {
        if (results.length === 0) {
            log('다운로드할 데이터가 없습니다.');
            return;
        }
        const ws = XLSX.utils.json_to_sheet(results);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Results');
        const csvData = XLSX.write(wb, {bookType: 'csv', type: 'array'});
        const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'results.csv';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        log('CSV 파일이 다운로드되었습니다.');
    }

    // JSON 다운로드
    function downloadJSON() {
        if (results.length === 0) {
            log('다운로드할 데이터가 없습니다.');
            return;
        }
        const blob = new Blob([JSON.stringify(results, null, 2)], {type: 'application/json'});
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'results.json';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
        log('JSON 파일이 다운로드되었습니다.');
    }

    // 지연 함수
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

})();

데이터 칸을 더 효율성 좋게 그리고 가독성 좋게 그리고 디자인 좋게 다시 해줘.알겟찌? 그리고 가독성 좋게 스크롤바나 그런 것들을 추가해! 그리고 다음 페이지를 넘어갔을 때 초기화가 되는 문제점이 있어. 그냥 다음 페이지를 넘어갔을 때에도 자동으로 마지막 페이지까지 크롤링 해야 된다니깐??? 그리고   HTML  이게 안 됨...