index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clipboard Copier</title>
    <style>
        #copyButton {
            font-size: 24px;
            /* 글자 크기 */
            padding: 15px 30px;
            /* 버튼 크기 */
            background-color: #4CAF50;
            /* 버튼 배경색 */
            color: white;
            /* 글자 색상 */
            border: none;
            /* 테두리 없음 */
            border-radius: 8px;
            /* 둥근 모서리 */
            cursor: pointer;
            /* 마우스 포인터 */
        }

        #copyButton:hover {
            background-color: #45a049;
            /* 호버 시 색상 */
        }
    </style>
</head>

<body>
    <h1>Clipboard Copier</h1>
    <p>파라미터에 있는 값이 클립보드에 복사됩니다.</p>

    <!-- 버튼 추가 -->
    <button id="copyButton">클립보드에 복사</button>

    <script>
        const copyButton = document.getElementById('copyButton');

        copyButton.addEventListener('click', () => {
            const urlParams = new URLSearchParams(window.location.search);
            let textToCopy = urlParams.get('text');

            if (textToCopy) {
                // \n 문자열을 줄바꿈 문자로 변환
                const decodedText = decodeURIComponent(textToCopy).replace(/\\n/g, '\n');

                navigator.clipboard.writeText(decodedText)
                    .then(() => {
                        alert('클립보드에 복사됨');
                    })
                    .catch(err => {
                        console.error('복사 실패: ', err);
                    });
            } else {
                alert('복사할 텍스트가 없습니다.');
            }
        });
    </script>
</body>

</html>