CompactDateRange — onClick/onFocus 에 showPicker() 강제 호출로 입력칸 클릭 시 달력 표시

frontend/components/common/CompactFilterBar.tsx

@@ -98,21 +98,32 @@ export function CompactDateRange({
   setTo: (v: string) => void;
   disabled?: boolean;
 }) {
+  // input[type=date] 는 브라우저별로 placeholder 영역 클릭 시 picker 미노출. showPicker() 강제 호출.
+  const openPicker = (e: React.MouseEvent<HTMLInputElement> | React.FocusEvent<HTMLInputElement>) => {
+    const el = e.currentTarget as any;
+    if (typeof el.showPicker === "function") {
+      try { el.showPicker(); } catch { /* 권한/포커스 제한 시 무시 */ }
+    }
+  };
   return (
     <div className="flex items-center gap-1">
       <input
         type="date"
-        className="h-7 w-[125px] rounded-md border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        className="h-7 w-[125px] rounded-md border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
         value={from}
         onChange={(e) => setFrom(e.target.value)}
+        onClick={openPicker}
+        onFocus={openPicker}
         disabled={disabled}
       />
       <span className="text-xs text-muted-foreground">~</span>
       <input
         type="date"
-        className="h-7 w-[125px] rounded-md border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50"
+        className="h-7 w-[125px] rounded-md border bg-background px-2 text-xs disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
         value={to}
         onChange={(e) => setTo(e.target.value)}
+        onClick={openPicker}
+        onFocus={openPicker}
         disabled={disabled}
       />
     </div>