🎨 Palette: [일괄 업로드 시 총 파일 용량에 대한 인라인 유효성 검사 추가]

.jules/palette.md

@@ -74,3 +74,7 @@
 ## 2024-07-13 - 일괄 업로드 폼에 프리셋 버튼 및 파일 크기 미리보기 추가
 **Learning:** 일괄 파일 업로드 폼에서 대상 바이트(target_bytes) 입력 필드만 제공하면 사용자가 원하는 용량을 바이트 단위로 정확히 계산하기 어려워 사용성이 떨어집니다. 사용자가 여러 파일을 업로드할 때 총 파일 크기를 파악하지 못해 업로드 제한을 초과하거나 잘못된 대상 바이트를 설정할 위험이 큽니다.
 **Action:** 일괄 파일 업로드 폼에도 단일 파일 업로드 폼과 동일하게 대상 바이트를 쉽게 선택할 수 있는 빠른 프리셋 버튼을 추가하고, `onchange` 이벤트 발생 시 선택된 모든 파일의 크기를 합산하여 사람이 읽기 쉬운 단위(MiB, GiB 등)로 미리보기를 제공하도록 JavaScript 로직을 개선했습니다.
+
+## 2024-07-17 - 일괄 업로드 폼 총 파일 용량 클라이언트 측 유효성 검사
+**Learning:** 일괄 파일 업로드 시 총 용량이 서버의 허용 제한(5 GiB)을 초과하는 경우, 사용자가 폼을 제출하고 서버의 오류 응답을 받을 때까지 기다려야 하므로 시간과 대역폭이 낭비되고 사용자 경험이 저하되었습니다.
+**Action:** 일괄 파일 업로드 폼의 파일 선택 이벤트 핸들러(`onchange`)에 총 파일 용량을 계산하고 제한을 초과할 경우 즉각적으로 `setCustomValidity`와 `aria-invalid`를 설정하여 빨간색 에러 메시지를 표시하는 클라이언트 측 유효성 검사 로직을 추가해야 합니다.

CHANGELOG.md

@@ -4,3 +4,7 @@
 ### Added
 - 다중 파일 업로드 선택 시 즉각적인 파일 개수 피드백 및 제한 초과 경고 메시지 추가
 - 일괄 업로드 폼에 대상 바이트 프리셋 버튼과 총 파일 크기 미리보기를 추가하여 사용성을 개선했습니다.
+
+## [Unreleased]
+### Added
+- 일괄 파일 업로드 폼에서 여러 파일 선택 시 총 용량이 제한을 초과할 경우 즉각적인 시각적 경고와 접근성 피드백을 제공하도록 클라이언트 측 유효성 검사를 추가했습니다.

saas_web.py

@@ -325,6 +325,14 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     return;
                 }
+
+                if (totalSize > MAX_UPLOAD_BYTES) {
+                    input.setCustomValidity('Total batch size exceeds 5 GiB limit.');
+                    input.setAttribute('aria-invalid', 'true');
+                    preview.innerText = 'Selected ' + files.length + ' file(s) (' + formatBinaryBytes(totalSize) + ', exceeds 5 GiB limit)';
+                    preview.style.color = '#dc3545';
+                    return;
+                }
                 preview.innerText = 'Selected ' + files.length + ' file(s) (' + formatBinaryBytes(totalSize) + ')';
             }