fix: 리포트 관리 기간 검색 캘린더 팝오버 짤림 현상 수정

- absolute → fixed 포지셔닝으로 변경하여 부모 overflow 영향 제거
- 필터 버튼 중앙 기준으로 팝오버 위치 계산
- 뷰포트 경계(8px 여백) 보호 로직 추가
- datePopoverRef 추가로 캘린더 내부 클릭 시 팝오버 닫힘 방지

Made-with: Cursor
This commit is contained in:
shin
2026-03-11 13:48:07 +09:00
parent ce4aefe12e
commit 1d6b38a6a6
@@ -47,6 +47,7 @@ export default function ReportManagementPage() {
const [tempStartDate, setTempStartDate] = useState<Date | undefined>(undefined);
const [tempEndDate, setTempEndDate] = useState<Date | undefined>(undefined);
const filterRef = useRef<HTMLDivElement>(null);
const datePopoverRef = useRef<HTMLDivElement>(null);
const {
reports,
@@ -70,7 +71,10 @@ export default function ReportManagementPage() {
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (filterRef.current && !filterRef.current.contains(e.target as Node)) {
const target = e.target as Node;
const isInsideFilter = filterRef.current?.contains(target);
const isInsideDatePopover = datePopoverRef.current?.contains(target);
if (!isInsideFilter && !isInsideDatePopover) {
setFilterOpen(false);
setDatePopoverOpen(false);
}
@@ -223,8 +227,21 @@ export default function ReportManagementPage() {
{filterOpen && datePopoverOpen && (
<div
className="absolute top-full right-0 z-50 mt-1.5 rounded-lg border border-gray-200 bg-white shadow-lg"
onMouseDown={(e) => e.stopPropagation()}
ref={datePopoverRef}
className="fixed z-50 rounded-lg border border-gray-200 bg-white shadow-lg"
style={(() => {
const triggerRect = filterRef.current?.getBoundingClientRect();
if (!triggerRect) return { top: 0, left: 0 };
const popoverWidth = 620;
const triggerCenter = triggerRect.left + triggerRect.width / 2;
const top = triggerRect.bottom + 6;
let left = triggerCenter - popoverWidth / 2;
if (left < 8) left = 8;
if (left + popoverWidth > window.innerWidth - 8) {
left = window.innerWidth - popoverWidth - 8;
}
return { top, left };
})()}
>
<div className="flex items-center justify-between border-b px-4 py-3">
<button