From 93b5934c528bcf6236e63498169c38e30e354a91 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 9 Oct 2026 17:25:09 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=93=9C?= =?UTF-8?q?=EB=9E=98=EA=B7=B8=20=EC=95=A4=20=EB=93=9C=EB=A1=AD=20=EC=8B=9C?= =?UTF-8?q?=EA=B0=81=EC=A0=81=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/palette.md | 3 +++ saas_web.py | 7 ++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/.jules/palette.md b/.jules/palette.md index 2dcd639e..df3c4bca 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -81,3 +81,6 @@ ## 2024-08-04 - 숫자 입력 필드 빈 문자열 상태 초기화 처리 **학습:** 숫자 입력 필드에서 빈 문자열('')을 입력할 때 브라우저는 이전의 유효하지 않은 상태를 암시적으로 유지하므로, 사용자 정의 검증을 명시적으로 초기화하지 않으면 네이티브 HTML5 유효성 검사가 정상 작동하지 않을 수 있음을 확인했습니다. **실행:** 인라인 검증 스크립트 작성 시 빈 문자열 상태를 별도로 확인하여 this.setCustomValidity('') 및 this.removeAttribute('aria-invalid')를 명시적으로 호출하는 로직을 추가해야 합니다. +## 2024-10-09 - 드래그 앤 드롭 시각적 피드백을 위한 dropEffect 추가 +**Learning:** 브라우저는 dragover 및 dragenter 이벤트 중 명시적으로 dropEffect = 'copy'를 설정하지 않으면 드래그 앤 드롭 대상 영역에 대해 강력한 커서 시각적 단서를 자동으로 제공하지 않음을 확인했습니다. +**Action:** 항상 dropEffect를 설정하여 상호작용 가능한 드래그 앤 드롭 영역의 시각적 피드백을 강화하십시오. diff --git a/saas_web.py b/saas_web.py index 63265e94..6de5a0fc 100644 --- a/saas_web.py +++ b/saas_web.py @@ -372,7 +372,12 @@ async def add_security_headers(request: Request, call_next): zone.addEventListener(eventName, preventDefaults, false); }); ['dragenter', 'dragover'].forEach(eventName => { - zone.addEventListener(eventName, () => zone.classList.add('dragover'), false); + zone.addEventListener(eventName, (e) => { + zone.classList.add('dragover'); + if (e.dataTransfer) { + e.dataTransfer.dropEffect = 'copy'; + } + }, false); }); ['dragleave', 'drop'].forEach(eventName => { zone.addEventListener(eventName, () => zone.classList.remove('dragover'), false); From 9a1c3b97e1c6f77978e180a7b75d54d97c85e5e2 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 9 Oct 2026 17:27:09 +0000 Subject: [PATCH 2/2] Add dropEffect = 'copy' to drag and drop zones for visual feedback --- .jules/palette.md | 3 --- saas_web.py | 7 +------ 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/.jules/palette.md b/.jules/palette.md index df3c4bca..2dcd639e 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -81,6 +81,3 @@ ## 2024-08-04 - 숫자 입력 필드 빈 문자열 상태 초기화 처리 **학습:** 숫자 입력 필드에서 빈 문자열('')을 입력할 때 브라우저는 이전의 유효하지 않은 상태를 암시적으로 유지하므로, 사용자 정의 검증을 명시적으로 초기화하지 않으면 네이티브 HTML5 유효성 검사가 정상 작동하지 않을 수 있음을 확인했습니다. **실행:** 인라인 검증 스크립트 작성 시 빈 문자열 상태를 별도로 확인하여 this.setCustomValidity('') 및 this.removeAttribute('aria-invalid')를 명시적으로 호출하는 로직을 추가해야 합니다. -## 2024-10-09 - 드래그 앤 드롭 시각적 피드백을 위한 dropEffect 추가 -**Learning:** 브라우저는 dragover 및 dragenter 이벤트 중 명시적으로 dropEffect = 'copy'를 설정하지 않으면 드래그 앤 드롭 대상 영역에 대해 강력한 커서 시각적 단서를 자동으로 제공하지 않음을 확인했습니다. -**Action:** 항상 dropEffect를 설정하여 상호작용 가능한 드래그 앤 드롭 영역의 시각적 피드백을 강화하십시오. diff --git a/saas_web.py b/saas_web.py index 6de5a0fc..63265e94 100644 --- a/saas_web.py +++ b/saas_web.py @@ -372,12 +372,7 @@ async def add_security_headers(request: Request, call_next): zone.addEventListener(eventName, preventDefaults, false); }); ['dragenter', 'dragover'].forEach(eventName => { - zone.addEventListener(eventName, (e) => { - zone.classList.add('dragover'); - if (e.dataTransfer) { - e.dataTransfer.dropEffect = 'copy'; - } - }, false); + zone.addEventListener(eventName, () => zone.classList.add('dragover'), false); }); ['dragleave', 'drop'].forEach(eventName => { zone.addEventListener(eventName, () => zone.classList.remove('dragover'), false);