🎨 Palette: [UX improvement] 대상 파일 크기 입력 폼에 최대 크기 초과 방지 피드백 추가

CHANGELOG.md

@@ -4,3 +4,6 @@
 ### Added
 - 다중 파일 업로드 선택 시 즉각적인 파일 개수 피드백 및 제한 초과 경고 메시지 추가
 - 일괄 업로드 폼에 대상 바이트 프리셋 버튼과 총 파일 크기 미리보기를 추가하여 사용성을 개선했습니다.
+
+## [Unreleased]
+- 🎨 Palette: `saas_web.py`의 `target_bytes` 입력 필드에 5GiB 최대 크기 제한(`max` 속성)과 즉각적인 클라이언트 측 인라인 유효성 검사 및 `aria-invalid` 상태 업데이트를 추가하여 사용자 경험을 개선했습니다.

saas_web.py

@@ -178,7 +178,7 @@ async def add_security_headers(request: Request, call_next):
             </p>
             <p>
                 <label for="target_bytes">Target Bytes: <span class="required-star" aria-hidden="true">*</span></label><br>
-                <input type="number" id="target_bytes" name="target_bytes" value="2000000000" min="1" aria-describedby="target_bytes_help target_bytes_preview" required>
+                <input type="number" id="target_bytes" name="target_bytes" value="2000000000" min="1" max="5368709120" aria-describedby="target_bytes_help target_bytes_preview" required>
                 <br><span id="target_bytes_help" class="help-text">Maximum allowed file size in bytes (e.g., 2000000000 for ~1.86 GiB)</span>
                 <br><span id="target_bytes_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #1e7e34;">1.86 GiB</span>
                 <div id="preset_buttons_container" class="preset-container" role="group" aria-label="Preset target sizes">
@@ -192,6 +192,7 @@ async def add_security_headers(request: Request, call_next):
         </form>
         <script>
             const MAX_UPLOAD_BYTES = 5 * 1024 * 1024 * 1024;
+            const MAX_TARGET_BYTES = 5 * 1024 * 1024 * 1024;
             function formatBinaryBytes(value) {
                 const units = ['B', 'KiB', 'MiB', 'GiB'];
                 let size = value;
@@ -260,6 +261,11 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     this.setCustomValidity('Must be greater than 0.');
                     this.setAttribute('aria-invalid', 'true');
+                } else if (val > MAX_TARGET_BYTES) {
+                    preview.innerText = 'Exceeds the maximum allowed size (5 GiB).';
+                    preview.style.color = '#dc3545';
+                    this.setCustomValidity('Exceeds the maximum allowed size (5 GiB).');
+                    this.setAttribute('aria-invalid', 'true');
                 } else {
                     preview.innerText = formatBinaryBytes(val);
                 }
@@ -287,6 +293,11 @@ async def add_security_headers(request: Request, call_next):
                     preview.style.color = '#dc3545';
                     this.setCustomValidity('Must be greater than 0.');
                     this.setAttribute('aria-invalid', 'true');
+                } else if (val > MAX_TARGET_BYTES) {
+                    preview.innerText = 'Exceeds the maximum allowed size (5 GiB).';
+                    preview.style.color = '#dc3545';
+                    this.setCustomValidity('Exceeds the maximum allowed size (5 GiB).');
+                    this.setAttribute('aria-invalid', 'true');
                 } else {
                     preview.innerText = formatBinaryBytes(val);
                 }
@@ -392,7 +403,7 @@ async def add_security_headers(request: Request, call_next):
             </p>
             <p>
                 <label for="batch_target_bytes">Target Bytes (per file): <span class="required-star" aria-hidden="true">*</span></label><br>
-                <input type="number" id="batch_target_bytes" name="target_bytes" value="2000000000" min="1" aria-describedby="batch_target_bytes_help batch_target_bytes_preview" required>
+                <input type="number" id="batch_target_bytes" name="target_bytes" value="2000000000" min="1" max="5368709120" aria-describedby="batch_target_bytes_help batch_target_bytes_preview" required>
                 <br><span id="batch_target_bytes_help" class="help-text">Maximum allowed size in bytes for each output file</span>
                 <br><span id="batch_target_bytes_preview" class="help-text" aria-live="polite" style="font-weight: bold; color: #1e7e34;">1.86 GiB</span>
                 <div id="batch_preset_buttons_container" class="preset-container" role="group" aria-label="Preset target sizes for batch">