♻️ refactor:navbar 크기 유짐 및 위치 유지

Issue Resolved: #

Author: qkdl60

front/src/components/Navbar/index.tsx

@@ -54,7 +54,7 @@ export default function Navbar() {
   const handleLogOut = () => {
     requestLogout();
   };
-  //TODO 예약 내역
+
   const isReservation = reservations && reservations.length > 0;
   const widthClass = `w-[${POPOVER_WIDTH}px]`;
   return (
@@ -77,7 +77,10 @@ export default function Navbar() {
           <Popover.Overlay>
             <Popover.Content>
               <div
-                className={cx(widthClass, `flex flex-col gap-6 rounded-xl border bg-white p-6 shadow-2xl`)}>
+                className={cx(
+                  widthClass,
+                  `flex max-h-[80vh] min-h-[300px] flex-col gap-6 rounded-xl border bg-white p-6 shadow-2xl`,
+                )}>
                 <h3 className="px-4 text-left text-heading3">예매 현황</h3>
                 <Separator direction="row" />
                 <div className="flex max-h-[800px] flex-col gap-6 overflow-y-scroll pr-4">

front/src/components/common/Popover.tsx

@@ -4,7 +4,9 @@ import {
   ReactElement,
   ReactNode,
   createContext,
+  useCallback,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from 'react';
@@ -87,10 +89,26 @@ interface IContent {
 }
 const Content = ({ children }: IContent) => {
   const { isOpen, triggerRef } = usePopoverContext();
+  const [position, setPosition] = useState({ x: 0, y: 0 });
   const hasButtonRef = triggerRef && triggerRef.current;
   const canOpen = isOpen && hasButtonRef;
   //TODO 타입 정리필요, 상수 정리
-  const { top, height } = triggerRef!.current!.getBoundingClientRect();
+  const updatePosition = useCallback(() => {
+    if (triggerRef && triggerRef.current) {
+      const trigger = triggerRef.current!;
+      const { top, height } = trigger.getBoundingClientRect();
+      setPosition({ x: top, y: height });
+    }
+  }, [triggerRef]);
+
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener('scroll', updatePosition);
+    }
+    return () => {
+      window.removeEventListener('scroll', updatePosition);
+    };
+  }, [isOpen, updatePosition]);
 
   return (
     <>
@@ -99,7 +117,7 @@ const Content = ({ children }: IContent) => {
           <div
             className="fixed z-[999] cursor-default"
             style={{
-              top: top + height + 24,
+              top: position.x + position.y + 24,
               right: 32,
             }}>
             {children}