feat: [equipment] 사진 업로드에 Ctrl+V 클립보드 붙여넣기 기능 추가

- create/edit 페이지에서 Ctrl+V로 클립보드 이미지 즉시 업로드
- 드롭존에 붙여넣기 안내 텍스트 추가
This commit is contained in:
김보곤
2026-02-25 20:56:11 +09:00
parent 5e164b1f26
commit eca26d557f
2 changed files with 37 additions and 0 deletions

View File

@@ -161,6 +161,7 @@ class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<p class="text-gray-500">클릭하거나 파일을 드래그하세요</p>
<p class="text-xs text-gray-400 mt-1">Ctrl+V로 클립보드 이미지 붙여넣기 가능</p>
<input type="file" id="photoInput" multiple accept="image/*" class="hidden">
</div>
<div id="photoUploadProgress" class="mt-3" style="display: none;">
@@ -239,6 +240,24 @@ class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-6 py-2 rounded-lg transiti
});
photoInput.addEventListener('change', (e) => { if (e.target.files.length) uploadPhotos(e.target.files); });
// Ctrl+V 클립보드 이미지 붙여넣기
document.addEventListener('paste', (e) => {
if (!createdEquipmentId) return;
const items = e.clipboardData?.items;
if (!items) return;
const imageFiles = [];
for (const item of items) {
if (item.type.startsWith('image/')) {
const file = item.getAsFile();
if (file) imageFiles.push(file);
}
}
if (imageFiles.length > 0) {
e.preventDefault();
uploadPhotos(imageFiles);
}
});
function uploadPhotos(files) {
if (!createdEquipmentId) return;
const formData = new FormData();

View File

@@ -169,6 +169,7 @@ class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
</svg>
<p class="text-gray-500">클릭하거나 파일을 드래그하세요</p>
<p class="text-xs text-gray-400 mt-1">Ctrl+V로 클립보드 이미지 붙여넣기 가능</p>
<input type="file" id="photoInput" multiple accept="image/*" class="hidden">
</div>
<div id="photoUploadProgress" class="mt-3" style="display: none;">
@@ -274,6 +275,23 @@ function loadPhotos() {
});
photoInput.addEventListener('change', (e) => { if (e.target.files.length) uploadPhotos(e.target.files); });
// Ctrl+V 클립보드 이미지 붙여넣기
document.addEventListener('paste', (e) => {
const items = e.clipboardData?.items;
if (!items) return;
const imageFiles = [];
for (const item of items) {
if (item.type.startsWith('image/')) {
const file = item.getAsFile();
if (file) imageFiles.push(file);
}
}
if (imageFiles.length > 0) {
e.preventDefault();
uploadPhotos(imageFiles);
}
});
function uploadPhotos(files) {
const formData = new FormData();
for (let f of files) formData.append('photos[]', f);