클립보드 복사
(Clipboard Copy)

const btn  = document.querySelector('#copyBtn');
const text = '복사할 텍스트를 여기에';

btn.addEventListener('click', async () => {
  await navigator.clipboard.writeText(text);

  // 복사 완료 피드백
  btn.textContent = '복사됨! ✓';
  btn.style.background = '#16a34a';   // 초록색으로 변경

  // 2초 후 원래대로
  setTimeout(() => {
    btn.textContent = '📋 복사';
    btn.style.background = '';
  }, 2000);
});

const input = document.querySelector('#myInput');
const btn   = document.querySelector('#copyBtn');

btn.addEventListener('click', async () => {
  const text = input.value.trim();

  if (!text) {
    alert('복사할 내용이 없어요!');
    return;
  }

  try {
    await navigator.clipboard.writeText(text);
    showFeedback(btn, '복사됨! ✓');
  } catch (err) {
    console.error('복사 실패:', err);
    fallbackCopy(text);   // execCommand 폴백
  }
});

function showFeedback(btn, msg) {
  const original = btn.textContent;
  btn.textContent = msg;
  btn.disabled = true;
  setTimeout(() => {
    btn.textContent = original;
    btn.disabled = false;
  }, 2000);
}

<!-- HTML -->
<div class="code-area" style="position:relative">
  <pre id="myCode">const x = 42;</pre>
  <button class="copy-code-btn"
          style="position:absolute;top:10px;right:10px"
          onclick="copyCode(this,'myCode')">copy</button>
</div>

// JavaScript
async function copyCode(btn, preId) {
  const code = document.getElementById(preId).innerText;
  await navigator.clipboard.writeText(code);
  btn.textContent = 'copied! ✓';
  btn.style.color = '#a6e3a1';
  setTimeout(() => {
    btn.textContent = 'copy';
    btn.style.color = '';
  }, 2000);
}

/**
 * 텍스트를 클립보드에 복사 (폴백 포함)
 * @param {string} text - 복사할 텍스트
 * @returns {Promise<boolean>} 성공 여부
 */
async function copyToClipboard(text) {
  // 최신 브라우저: navigator.clipboard API
  if (navigator.clipboard && window.isSecureContext) {
    try {
      await navigator.clipboard.writeText(text);
      return true;
    } catch (err) {
      console.warn('Clipboard API 실패, 폴백 시도:', err);
    }
  }

  // 폴백: execCommand (구형 브라우저 / HTTP)
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.cssText = 'position:fixed;opacity:0;top:-9999px';
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.select();

  try {
    document.execCommand('copy');
    return true;
  } catch (err) {
    console.error('복사 실패:', err);
    return false;
  } finally {
    document.body.removeChild(textarea);
  }
}

// 사용 예시
btn.addEventListener('click', async () => {
  const ok = await copyToClipboard('복사할 텍스트');
  if (ok) {
    showSuccess('복사됐어요! ✓');
  } else {
    showError('복사에 실패했어요. 직접 선택 후 Ctrl+C를 눌러주세요.');
  }
});