diff --git a/src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnActInfo/crdnActInfoRegistPopup.jsp b/src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnActInfo/crdnActInfoRegistPopup.jsp index 476fbc9..5a32b42 100644 --- a/src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnActInfo/crdnActInfoRegistPopup.jsp +++ b/src/main/webapp/WEB-INF/views/crdn/crndRegistAndView/crdnActInfo/crdnActInfoRegistPopup.jsp @@ -495,13 +495,40 @@ /** * 파일 업로드 초기화 - * 중요한 로직 주석: 파일 선택 이벤트와 파일 유효성 검증을 초기화한다. + * 중요한 로직 주석: 파일 선택 이벤트와 드래그앤드롭 이벤트를 추가하고 파일 유효성 검증을 초기화한다. */ function initFileUpload() { + var dropZone = $('#photoPreviewContainer'); + // 파일 선택 이벤트 $('#photoFiles').on('change', function(e) { handleFileSelect(e.target.files); }); + + // 중요로직: 드래그앤드롭으로 파일 업로드 처리 + dropZone.on('dragover', function(e) { + e.preventDefault(); + e.stopPropagation(); + dropZone.addClass('drag-over'); + }); + + dropZone.on('dragleave', function(e) { + e.preventDefault(); + e.stopPropagation(); + dropZone.removeClass('drag-over'); + }); + + dropZone.on('drop', function(e) { + e.preventDefault(); + e.stopPropagation(); + dropZone.removeClass('drag-over'); + + var files = e.originalEvent.dataTransfer.files; + if (files.length > 0) { + // 기존 파일 선택 로직 재사용 + handleFileSelect(files); + } + }); } /** diff --git a/src/main/webapp/resources/xit/xit-fileupload.css b/src/main/webapp/resources/xit/xit-fileupload.css index 13268c4..d5aaca9 100644 --- a/src/main/webapp/resources/xit/xit-fileupload.css +++ b/src/main/webapp/resources/xit/xit-fileupload.css @@ -8,6 +8,12 @@ margin-top: 10px; } +/* 드래그앤드롭 영역 스타일 */ +.photo-preview-container.drag-over { + border: 2px dashed #007bff; + background-color: #f8f9fa; +} + /* 파일 업로드 컨트롤 영역 */ .file-upload-controls { display: flex;