diff --git a/.jules/palette.md b/.jules/palette.md index a1cf208b..c89eaf0f 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -74,3 +74,7 @@ ## 2024-07-13 - 일괄 업로드 폼에 프리셋 버튼 및 파일 크기 미리보기 추가 **Learning:** 일괄 파일 업로드 폼에서 대상 바이트(target_bytes) 입력 필드만 제공하면 사용자가 원하는 용량을 바이트 단위로 정확히 계산하기 어려워 사용성이 떨어집니다. 사용자가 여러 파일을 업로드할 때 총 파일 크기를 파악하지 못해 업로드 제한을 초과하거나 잘못된 대상 바이트를 설정할 위험이 큽니다. **Action:** 일괄 파일 업로드 폼에도 단일 파일 업로드 폼과 동일하게 대상 바이트를 쉽게 선택할 수 있는 빠른 프리셋 버튼을 추가하고, `onchange` 이벤트 발생 시 선택된 모든 파일의 크기를 합산하여 사람이 읽기 쉬운 단위(MiB, GiB 등)로 미리보기를 제공하도록 JavaScript 로직을 개선했습니다. + +## 2024-08-02 - 숫자 입력 필드의 빈 문자열 상태 처리 시 커스텀 유효성 검사 초기화 +**학습:** 숫자 입력 필드에 대한 JavaScript 인라인 유효성 검사 구현 시, 사용자가 필드 값을 지워 빈 문자열('')이 되었을 때 사용자 지정 오류를 명시적으로 지우지 않으면 브라우저는 내부적으로 이전의 유효하지 않은 상태를 유지하게 됩니다. 시각적으로 텍스트가 지워지더라도 required와 같은 기본 HTML5 제약 조건이 작동하기 전에 오류 상태가 남아 사용자에게 혼란을 줄 수 있습니다. +**실행:** 숫자 입력 필드의 유효성을 검사할 때는 항상 if (this.value === '') 조건 블록을 추가하고, 해당 블록 내에서 this.setCustomValidity('')와 this.removeAttribute('aria-invalid')를 호출하여 시각적 초기화뿐만 아니라 브라우저의 내부 오류 상태도 명확히 리셋해야 합니다. diff --git a/saas_web.py b/saas_web.py index 3a7b0352..1368a7d2 100644 --- a/saas_web.py +++ b/saas_web.py @@ -255,7 +255,11 @@ async def add_security_headers(request: Request, call_next): ); }); - if (isNaN(val) || val <= 0) { + if (this.value === '') { + preview.innerText = ''; + this.setCustomValidity(''); + this.removeAttribute('aria-invalid'); + } else if (isNaN(val) || val <= 0) { preview.innerText = 'Must be greater than 0.'; preview.style.color = '#dc3545'; this.setCustomValidity('Must be greater than 0.'); @@ -282,7 +286,11 @@ async def add_security_headers(request: Request, call_next): ); }); - if (isNaN(val) || val <= 0) { + if (this.value === '') { + preview.innerText = ''; + this.setCustomValidity(''); + this.removeAttribute('aria-invalid'); + } else if (isNaN(val) || val <= 0) { preview.innerText = 'Must be greater than 0.'; preview.style.color = '#dc3545'; this.setCustomValidity('Must be greater than 0.');