[#13] ✨헤더 수정

src/pages/SetLocation/SetLocation.tsx

@@ -20,20 +20,31 @@ const SetLocation: React.FC = () => {
   const [isNotificationModalOpen, setIsNotificationModalOpen] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
   const [hasNotifications, setHasNotifications] = useState(false);
+  const [profileCoords, setProfileCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+  const [notificationCoords, setNotificationCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
   const profileRef = useRef<HTMLImageElement>(null);
 
-  const toggleProfileModal = () => {
+  const toggleProfileModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setProfileCoords({ top: rect.bottom, left: rect.left });
+    }
     setIsProfileModalOpen(!isProfileModalOpen);
   };
 
-  const toggleNotificationModal = () => {
+  const toggleNotificationModal = (e?: React.MouseEvent) => {
+    if (e) {
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+      setNotificationCoords({ top: rect.bottom, left: rect.left });
+    }
     setIsNotificationModalOpen(!isNotificationModalOpen);
   };
 
   const handleLogout = () => {
     setIsLoggedIn(false);
     setIsProfileModalOpen(false);
   };
+
   return (
     <div>
       <Header
@@ -85,13 +96,14 @@ const SetLocation: React.FC = () => {
           <ProfileModal
             toggleProfileModal={toggleProfileModal}
             handleLogout={handleLogout}
-            profileRef={profileRef}
+            coords={profileCoords}
           />
         )}
         {isNotificationModalOpen && (
           <NotificationModal
             toggleNotificationModal={toggleNotificationModal}
             setHasNotifications={setHasNotifications}
+            coords={notificationCoords}
           />
         )}
       </div>