[#25] 브라우저 창 크기를 변경할 때 dropdown 및 modal layout 갱신

src/components/modal/modal.jsx

@@ -168,7 +168,7 @@ const StyledModal = styled.div`
 /* Container */
 
 const ModalContainer = styled.div`
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;

src/hooks/use-dropdown.jsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import DropdownContext from "../components/text-field/dropdown-input/dropdown-context";
 
 function makeRect({ x, y, width } = { x: 0, y: 0, width: 0 }) {
@@ -36,12 +36,27 @@ function useDropdown({ id, type }) {
     setDropdownState((prev) => ({ ...prev, [key]: shows }));
   };
 
+  const updateDropdownLayout = (target) => {
+    const rect = calculateDropdownRect(target);
+    setDropdownRect(rect);
+  };
+
   const handleTargetClick = (shows) => {
-    const rect = calculateDropdownRect(targetRef.current);
+    updateDropdownLayout(targetRef.current);
     setShowsDropdown(shows);
-    setDropdownRect(rect);
   };
 
+  useEffect(() => {
+    if (!showsDropdown) return;
+
+    function handleWindowResize() {
+      updateDropdownLayout(targetRef.current);
+    }
+
+    window.addEventListener("resize", handleWindowResize);
+    return () => window.removeEventListener("resize", handleWindowResize);
+  }, [showsDropdown, targetRef]);
+
   return {
     targetRef,
     dropdownRect,

src/pages/test-page.jsx

@@ -44,18 +44,18 @@ function TestPage() {
 
   const handleToastClick = () => setShowsToast(true);
   const handleToastDismiss = () => setShowsToast(false);
-  
+
   /* Modal */
   const { showsModal, setShowsModal } = useModal();
   const handleModalClick = () => setShowsModal(true);
-  
+
   return (
     <div
       style={{
         display: "flex",
         flexDirection: "column",
+        alignItems: "center",
         gap: "16px",
-        margin: 16,
       }}
     >
       <h1>🤯</h1>