Html에 복사하기 버튼 추가하기


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>SQL 문장 보기</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 40px; }
        .search-box { margin-bottom: 20px; }
        input[type="text"] {
            width: 300px;
            padding: 8px;
            font-size: 16px;
        }
        .sql-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            position: relative;
        }
        .description {
            font-weight: bold;
            margin-bottom: 5px;
        }
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            white-space: pre-wrap;
        }
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>SQL 문장 리스트</h1>

    <div class="search-box">
        <input type="text" id="search-input" placeholder="SQL 또는 설명으로 검색...">
    </div>

    <div id="sql-container">로딩 중...</div>

    <script>
        let allQueries = [];

        // SQL 렌더링 함수
        function renderQueries(queries) {
            const container = document.getElementById('sql-container');
            container.innerHTML = '';

            if (queries.length === 0) {
                container.innerHTML = '<p>검색 결과가 없습니다.</p>';
                return;
            }

            queries.forEach(query => {
                const box = document.createElement('div');
                box.className = 'sql-box';

                const desc = document.createElement('div');
                desc.className = 'description';
                desc.textContent = query.description;

                const pre = document.createElement('pre');
                pre.textContent = query.sql;

                const copyBtn = document.createElement('button');
                copyBtn.className = 'copy-btn';
                copyBtn.textContent = '복사';
                copyBtn.onclick = () => {
                    navigator.clipboard.writeText(query.sql)
                        .then(() => alert('복사되었습니다!'))
                        .catch(() => alert('복사 실패'));
                };

                box.appendChild(desc);
                box.appendChild(pre);
                box.appendChild(copyBtn);
                container.appendChild(box);
            });
        }

        // 검색 기능
        document.getElementById('search-input').addEventListener('input', function () {
            const keyword = this.value.toLowerCase();
            const filtered = allQueries.filter(q =>
                q.description.toLowerCase().includes(keyword) ||
                q.sql.toLowerCase().includes(keyword)
            );
            renderQueries(filtered);
        });

        // JSON 로딩
        fetch('sqls.json')
            .then(response => response.json())
            .then(data => {
                allQueries = data.queries;
                renderQueries(allQueries);
            })
            .catch(error => {
                document.getElementById('sql-container').textContent = 'SQL 로딩 실패: ' + error;
            });
    </script>
</body>
</html>
Comments
