fix: 리포트 관리 기간 검색 캘린더 팝오버 짤림 현상 수정
- absolute → fixed 포지셔닝으로 변경하여 부모 overflow 영향 제거 - 필터 버튼 중앙 기준으로 팝오버 위치 계산 - 뷰포트 경계(8px 여백) 보호 로직 추가 - datePopoverRef 추가로 캘린더 내부 클릭 시 팝오버 닫힘 방지 Made-with: Cursor
This commit is contained in:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user