zenn
7b4badf5a4
- 메인 문의 영역을 이메일 주소와 복사 버튼으로 구성하고 복사 결과 안내를 추가 - 문의 폼 페이지를 별도로 보존하고 입력 검증, 파일 첨부 및 완료 안내 동작을 추가 - 제거된 문의 요소를 참조하던 공통 스크립트를 정리해 초기화 오류 방지 - 이메일 복사 버튼의 특수 문자 화살표를 공통 SVG로 통일 - 공유 시 특허증 대신 트론트 로고를 사용하도록 공유 메타 정보 지정 - 공통 스크립트와 포트폴리오 CSS에 버전 URL을 적용해 이전 CDN 캐시 우회 - 프로젝트 및 특허 영역의 자료 기준 안내와 소개서 보기 링크 제거 - 프로젝트 상세 페이지 8개의 상단 썸네일 화살표를 제거하고 마우스 반응 효과 유지 - 특허증 이미지 파일을 갱신하고 문의 구조와 동작 설명을 README에 반영 검증: 공통·이메일·문의 폼 JavaScript 문법 검사 및 변경 공백 검사 통과 확인: 버전이 붙은 운영 사이트 JS와 CSS가 로컬 파일과 동일함 참고: 문의 폼은 서버 전송 없이 화면 동작만 제공하며 이메일 주소는 임시 값 유지
53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
(() => {
|
|
'use strict';
|
|
const button = document.querySelector('.email-copy');
|
|
const address = document.querySelector('.email-address');
|
|
const status = document.querySelector('.email-copy-status');
|
|
if (!button || !address || !status) return;
|
|
const label = button.querySelector('.email-copy-label');
|
|
const initialStatus = status.textContent;
|
|
let resetTimer;
|
|
|
|
function copyFallback(value) {
|
|
const field = document.createElement('textarea');
|
|
field.value = value;
|
|
field.setAttribute('readonly', '');
|
|
field.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0';
|
|
document.body.append(field);
|
|
field.select();
|
|
try {
|
|
if (!document.execCommand('copy')) throw new Error('Copy failed');
|
|
} finally {
|
|
field.remove();
|
|
button.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
|
|
button.addEventListener('click', async () => {
|
|
clearTimeout(resetTimer);
|
|
const value = address.textContent.trim();
|
|
try {
|
|
try {
|
|
if (!navigator.clipboard?.writeText) throw new Error('Clipboard unavailable');
|
|
await navigator.clipboard.writeText(value);
|
|
} catch {
|
|
copyFallback(value);
|
|
}
|
|
label.textContent = '복사 완료';
|
|
button.classList.add('is-copied');
|
|
status.textContent = '이메일 주소를 복사했습니다. 메일의 받는 사람에 붙여넣어 주세요.';
|
|
} catch {
|
|
label.textContent = '다시 복사';
|
|
button.classList.remove('is-copied');
|
|
status.textContent = '복사하지 못했습니다. 이메일 주소를 선택해 직접 복사해 주세요.';
|
|
}
|
|
status.classList.add('is-feedback');
|
|
resetTimer = setTimeout(() => {
|
|
label.textContent = '주소 복사';
|
|
button.classList.remove('is-copied');
|
|
status.classList.remove('is-feedback');
|
|
status.textContent = initialStatus;
|
|
}, 6000);
|
|
});
|
|
})();
|