From c61cf8af99e1e485e10133c492b8312eb36f5c52 Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Fri, 15 May 2026 13:52:21 +0900
Subject: [PATCH] =?UTF-8?q?CompactDateRange=20=E2=80=94=20onClick/onFocus?=
 =?UTF-8?q?=20=EC=97=90=20showPicker()=20=EA=B0=95=EC=A0=9C=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=EB=A1=9C=20=EC=9E=85=EB=A0=A5=EC=B9=B8=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=EC=8B=9C=20=EB=8B=AC=EB=A0=A5=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/common/CompactFilterBar.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/components/common/CompactFilterBar.tsx b/frontend/components/common/CompactFilterBar.tsx
index 3419d51c..cee55dd4 100644
--- a/frontend/components/common/CompactFilterBar.tsx
+++ b/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>