🎨 Palette: 숫자 입력 필드 빈 문자열 상태 처리 및 접근성 최적화

.jules/palette.md

@@ -74,3 +74,6 @@
 ## 2024-07-13 - 일괄 업로드 폼에 프리셋 버튼 및 파일 크기 미리보기 추가
 **Learning:** 일괄 파일 업로드 폼에서 대상 바이트(target_bytes) 입력 필드만 제공하면 사용자가 원하는 용량을 바이트 단위로 정확히 계산하기 어려워 사용성이 떨어집니다. 사용자가 여러 파일을 업로드할 때 총 파일 크기를 파악하지 못해 업로드 제한을 초과하거나 잘못된 대상 바이트를 설정할 위험이 큽니다.
 **Action:** 일괄 파일 업로드 폼에도 단일 파일 업로드 폼과 동일하게 대상 바이트를 쉽게 선택할 수 있는 빠른 프리셋 버튼을 추가하고, `onchange` 이벤트 발생 시 선택된 모든 파일의 크기를 합산하여 사람이 읽기 쉬운 단위(MiB, GiB 등)로 미리보기를 제공하도록 JavaScript 로직을 개선했습니다.
+## 2024-07-28 - 숫자 입력 필드의 빈 문자열 상태 처리 및 이벤트 리스너 최적화
+**학습:** 숫자 입력을 위한 JavaScript 인라인 검증을 구현할 때, 빈 문자열 상태를 명시적으로 처리하지 않으면(예: `if (this.value === '')`) 시각적인 텍스트가 지워져도 브라우저 내부적으로는 이전에 입력된 잘못된 상태(예: 음수)를 유지하게 되어 접근성 및 사용성에 심각한 영향을 미칩니다. 또한, 빈번하게 발생하는 `input` 이벤트 내부에서 매번 DOM 요소를 쿼리하고 속성을 파싱하면 UI 성능이 저하됩니다.
+**실행:** 빈 문자열 입력 시 `setCustomValidity('')` 및 `removeAttribute('aria-invalid')`를 조건문 내에서 명시적으로 호출하여 사용자 정의 오류를 지우고, 잦은 이벤트 리스너 외부에서 NodeList와 파싱된 값을 미리 계산하고 캐싱하여 성능과 사용성을 동시에 최적화해야 합니다.

saas_web.py

@@ -239,19 +239,30 @@ async def add_security_headers(request: Request, call_next):
                 preview.innerText = 'Selected file size: ' + text;
             }
 
+            const targetButtons = Array.from(document.querySelectorAll('#preset_buttons_container .preset-btn')).map(btn => ({
+                el: btn,
+                val: parseInt(btn.dataset.bytes, 10)
+            }));
+
             document.getElementById('target_bytes').addEventListener('input', function(e) {
-                const val = parseInt(this.value, 10);
                 const preview = document.getElementById('target_bytes_preview');
+                if (this.value === '') {
+                    this.setCustomValidity('');
+                    this.removeAttribute('aria-invalid');
+                    preview.innerText = '';
+                    targetButtons.forEach(item => item.el.setAttribute('aria-pressed', 'false'));
+                    return;
+                }
+
+                const val = parseInt(this.value, 10);
                 this.setCustomValidity('');
                 this.removeAttribute('aria-invalid');
                 preview.style.color = '#1e7e34';
 
-                const buttons = document.querySelectorAll('#preset_buttons_container .preset-btn');
-                buttons.forEach(btn => {
-                    const presetValue = Number.parseInt(btn.dataset.bytes, 10);
-                    btn.setAttribute(
+                targetButtons.forEach(item => {
+                    item.el.setAttribute(
                         'aria-pressed',
-                        !e.isTrusted && presetValue === val ? 'true' : 'false'
+                        !e.isTrusted && item.val === val ? 'true' : 'false'
                     );
                 });
 
@@ -266,19 +277,30 @@ async def add_security_headers(request: Request, call_next):
 
             });
 
+            const batchTargetButtons = Array.from(document.querySelectorAll('#batch_preset_buttons_container .preset-btn')).map(btn => ({
+                el: btn,
+                val: parseInt(btn.dataset.bytes, 10)
+            }));
+
             document.getElementById('batch_target_bytes').addEventListener('input', function(e) {
-                const val = parseInt(this.value, 10);
                 const preview = document.getElementById('batch_target_bytes_preview');
+                if (this.value === '') {
+                    this.setCustomValidity('');
+                    this.removeAttribute('aria-invalid');
+                    preview.innerText = '';
+                    batchTargetButtons.forEach(item => item.el.setAttribute('aria-pressed', 'false'));
+                    return;
+                }
+
+                const val = parseInt(this.value, 10);
                 this.setCustomValidity('');
                 this.removeAttribute('aria-invalid');
                 preview.style.color = '#1e7e34';
 
-                const buttons = document.querySelectorAll('#batch_preset_buttons_container .preset-btn');
-                buttons.forEach(btn => {
-                    const presetValue = Number.parseInt(btn.dataset.bytes, 10);
-                    btn.setAttribute(
+                batchTargetButtons.forEach(item => {
+                    item.el.setAttribute(
                         'aria-pressed',
-                        !e.isTrusted && presetValue === val ? 'true' : 'false'
+                        !e.isTrusted && item.val === val ? 'true' : 'false'
                     );
                 });