// ==UserScript==
// @name 다모앙 이미지 클립보드 붙여넣기 및 드래그드롭, 미리보기 기능
// @namespace http://tampermonkey.net/
// @version 1.0
// @description damoang.net의 이미지 업로드 페이지에서 클립보드 붙여넣기 및 드래그드롭과 이미지 미리보기 기능을 생성합니다.
// @author LiNE
// @match *://*.damoang.net/*
// @grant none
// ==/UserScript==

(function() {
'use strict';

const uploadForm = document.getElementById('na_upload_form');
const fileInput = document.getElementById('na_upload_file');
if (!uploadForm || !fileInput) {
return; // 폼이나 파일 입력 필드가 없으면 스크립트를 중단
}

// 미리보기 설명 텍스트 추가
const previewText = document.createElement('div');
previewText.className = 'form-text';
previewText.innerHTML = ' 이미지 미리보기:';
uploadForm.appendChild(previewText);

// 미리보기 영역 추가 (배경색 포함)
const previewContainer = document.createElement('div');
previewContainer.id = 'clipboard-image-preview';
previewContainer.style.marginTop = '10px';
previewContainer.style.padding = '10px';
previewContainer.style.border = '1px solid #ddd';
previewContainer.style.backgroundColor = '#f9f9f9';
previewContainer.style.width = '100%';
previewContainer.style.height = '250px'; // 기본 높이를 250px로 설정
previewContainer.style.display = 'flex';
previewContainer.style.alignItems = 'center';
previewContainer.style.justifyContent = 'center';
previewContainer.style.color = '#ccc';
previewContainer.style.overflow = 'hidden'; // 스크롤바 표시를 위한 초기 설정
previewContainer.style.maxHeight = '80vh'; // 페이지의 80% 높이를 최대 높이로 설정
previewContainer.innerHTML = '여기에 이미지를 붙여넣기 (영역 클릭 후 Ctrl + V) 또는 드래그 앤 드롭하세요';
uploadForm.appendChild(previewContainer);

function displayImagePreview(blob) {
const img = document.createElement('img');
img.style.maxWidth = '100%'; // 좌우 여백을 확보하기 위해 이미지 폭을 줄임
img.style.height = 'auto'; // 이미지 높이를 자동 조정

const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
previewContainer.innerHTML = ''; // 이전 텍스트를 지웁니다.
previewContainer.appendChild(img);

img.onload = function() {
const imgHeight = img.height;
const maxHeight = window.innerHeight * 0.8;

if (imgHeight > 250) {
// 이미지 높이가 250px을 초과하면 컨테이너 높이를 이미지에 맞춰 조정
previewContainer.style.height = imgHeight + 'px';
previewContainer.style.overflow = 'hidden';
} else {
// 이미지 높이가 250px 이하인 경우, 컨테이너 높이를 250px로 유지
previewContainer.style.height = '250px';
}

// 만약 이미지가 너무 커서 컨테이너 높이가 페이지의 80%를 초과하면 스크롤바 표시
if (imgHeight > maxHeight) {
previewContainer.style.height = maxHeight + 'px';
previewContainer.style.overflow = 'auto';
}
};
};
reader.readAsDataURL(blob);
}

// 클립보드에서 이미지 붙여넣기 이벤트
document.addEventListener('paste', function(event) {
const items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (let index in items) {
const item = items[index];
if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
const blob = item.getAsFile();
displayImagePreview(blob);

const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([blob], 'clipboard-image.' + blob.type.split('/')[1], { type: blob.type }));
fileInput.files = dataTransfer.files;

break; // 하나의 이미지만 처리하도록 중지
}
}
});

// 파일 선택 시 이미지 미리보기
fileInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file && file.type.indexOf('image') !== -1) {
displayImagePreview(file);
}
});

// 드래그 앤 드롭으로 이미지 미리보기 제공
previewContainer.addEventListener('dragover', function(event) {
event.preventDefault(); // 기본 드래그 동작을 방지
previewContainer.style.border = '2px solid #007bff'; // 드래그 중 부드러운 파란색 실선으로 표시
previewContainer.style.backgroundColor = '#e9f7ff'; // 드래그 중 부드러운 배경색 추가
});

previewContainer.addEventListener('dragleave', function(event) {
previewContainer.style.border = '1px solid #ddd'; // 드래그 종료 시 원래 스타일로 복구
previewContainer.style.backgroundColor = '#f9f9f9'; // 드래그 종료 시 원래 배경색으로 복구
});

previewContainer.addEventListener('drop', function(event) {
event.preventDefault(); // 기본 드롭 동작을 방지
previewContainer.style.border = '1px solid #ddd'; // 드롭 시 원래 스타일로 복구
previewContainer.style.backgroundColor = '#f9f9f9'; // 드롭 시 원래 배경색으로 복구

const files = event.dataTransfer.files;
if (files.length > 0 && files[0].type.indexOf('image') !== -1) {
const file = files[0];
displayImagePreview(file);

const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File([file], file.name, { type: file.type }));
fileInput.files = dataTransfer.files;
}
});

})();

스크립트 감사합니다.