🎨 Palette: [파일 업로드 UX 개선]

.jules/palette.md

@@ -1,3 +1,9 @@
+## 2024-05-18 - [파일 업로드 UX 개선]
+**Learning:** 파일 입력 요소(input type="file")의 크기가 작거나 클릭 영역이 명확하지 않을 때, 사용자들은 주변의 넓은 영역(예: 드래그 앤 드롭 영역 전체)을 클릭하려는 경향이 있습니다. 이를 인지하지 못하고 파일 선택 창이 열리지 않으면 답답함을 느낄 수 있습니다.
+**Action:** 파일 업로드를 위한 컨테이너가 있다면(예: .box), 전체 컨테이너에 클릭 이벤트를 연결하여 숨겨진 파일 input의 click 이벤트를 프로그램적으로 트리거하도록 구현합니다. 이 때 `cursor: pointer` 스타일을 해당 컨테이너에 명시적으로 주어 사용자에게 클릭 가능함을 인지시킵니다. 컨테이너 내의 다른 상호작용 요소(버튼, 입력 필드 등)를 클릭할 때 충돌이 발생하지 않도록, `e.target.closest('input, button, label')`를 사용하여 내부 요소 클릭을 안전하게 무시합니다.
+## 2024-05-18 - [파일 업로드 UX 개선]
+**Learning:** 파일 입력 요소(input type="file")의 크기가 작거나 클릭 영역이 명확하지 않을 때, 사용자들은 주변의 넓은 영역(예: 드래그 앤 드롭 영역 전체)을 클릭하려는 경향이 있습니다. 이를 인지하지 못하고 파일 선택 창이 열리지 않으면 답답함을 느낄 수 있습니다.
+**Action:** 파일 업로드를 위한 컨테이너가 있다면(예: .box), 전체 컨테이너에 `cursor: pointer` 스타일을 추가하고 클릭 이벤트를 연결하여 숨겨진 파일 input의 click 이벤트를 프로그램적으로 트리거하도록 구현합니다. 단, 컨테이너 내의 다른 상호작용 요소(버튼, 입력 필드 등)를 클릭할 때는 파일 선택 창이 열리지 않도록 예외 처리해야 합니다.
 ## 2024-07-15 - Dynamic Size formatting and Total Size Validation
 **Learning:** Hardcoding human-readable sizes (like '5 GiB') in validation error messages is error-prone when the underlying constant changes. Moreover, failing to validate total upload size against backend limits (e.g., MAX_UPLOAD_BYTES) in batch file uploads frustrates users who wait for a large upload to finish only to get a server-side 413 Payload Too Large error.
 **Action:** Always format backend byte limit constants dynamically (e.g., `formatBinaryBytes(MAX_UPLOAD_BYTES)`) on the client side to display accurate error messages. For multiple file inputs, ensure both the file count and the combined file size are validated against backend limits, giving immediate inline feedback via `setCustomValidity` and `aria-invalid`.

pr_description.txt

@@ -1,10 +1,4 @@
-**Severity**: High
-
-**Vulnerability**: Argument Injection via relative paths starting with a hyphen in command-line utilities.
-
-**Impact**: Command-line utilities (like `ffprobe` and `ffmpeg` filters) interpret user input (like a file path) starting with a hyphen (e.g., `-version.wav`) as options when passed as a relative path. This could lead to a command injection when parsing maliciously crafted filenames.
-Even when `ffmpeg` inputs are protected by `-i`, the output paths, as well as arguments to other utilities like `brctl` and `SetFile`, can be maliciously crafted to start with `-` and be interpreted as options if relative paths are used.
-
-**Fix**: The file paths passed to `subprocess.run` inside `media_shrinker.py` are resolved into absolute paths using `.resolve()`. However, to prevent Strix CI scanners from falsely reporting command injection on `subprocess.run`, `str()` path wrapping is being replaced with python's `f-string`. Replaced `str(path.resolve())` with `f"{path.resolve()}"`.
-
-**Verification**: Ran tests to ensure regressions weren't introduced by using python's `coverage`. 100% test coverage reported.
+💡 What: 드래그 앤 드롭 영역 전체를 클릭하여 파일 선택창을 열 수 있도록 개선했습니다. (전체 .box 영역에 `cursor: pointer` 스타일 추가 및 클릭 이벤트 연결).
+🎯 Why: 기존에는 파일 입력 버튼 크기가 작아 사용자가 주변의 넓은 영역을 클릭하려는 경향이 있었습니다. 넓은 영역을 클릭해도 파일 업로드가 가능하게 하여 사용성을 개선했습니다.
+📸 Before/After: 드래그 앤 드롭 영역 클릭 시 파일 입력 창이 열리도록 동작이 개선되었습니다.
+♿ Accessibility: 영역 내의 기존 상호작용 요소(버튼, 텍스트 입력 필드, 레이블 등)를 클릭할 때는 충돌이 발생하지 않도록 `e.target.closest('input, button, label')`를 사용하여 내부 요소 클릭을 안전하게 예외 처리했습니다.

pr_title.txt

@@ -0,0 +1 @@
+🎨 Palette: [파일 업로드 UX 개선]

saas_web.py

@@ -149,6 +149,7 @@ async def add_security_headers(request: Request, call_next):
     <style>
         body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; }
         .box { border: 1px solid #ccc; padding: 20px; border-radius: 8px; }
+        #drop-zone, #batch-drop-zone { cursor: pointer; }
         button { padding: 10px 20px; background-color: #0056b3; color: white; border: none; border-radius: 4px; cursor: pointer; }
         button:hover:not(:disabled) { background-color: #004085; }
         button:disabled { background-color: #6c757d; cursor: not-allowed; }
@@ -403,6 +404,18 @@ async def add_security_headers(request: Request, call_next):
                 }
             }, false);
         }
+
+        [
+            {zone: dropZone, input: fileInput},
+            {zone: batchDropZone, input: batchFileInput}
+        ].forEach(({zone, input}) => {
+            if (zone && input) {
+                zone.addEventListener('click', (e) => {
+                    if (e.target.closest('input, button, label')) return;
+                    input.click();
+                });
+            }
+        });
         </script>
     </div>
     <div class="box" id="batch-drop-zone" style="margin-top: 20px;">

tests/test_saas_web.py

@@ -52,6 +52,8 @@ def test_get_ui_includes_binary_file_size_validation(self):
         self.assertEqual(response.status_code, 200)
         html = response.text
 
+        self.assertIn("#drop-zone, #batch-drop-zone { cursor: pointer; }", html)
+        self.assertIn("e.target.closest('input, button, label')", html)
         self.assertIn("const MAX_UPLOAD_BYTES = 5 * 1024 * 1024 * 1024;", html)
         self.assertIn("['B', 'KiB', 'MiB', 'GiB']", html)
         self.assertIn("const limitText = formatBinaryBytes(MAX_UPLOAD_BYTES);", html)