From fe6ec267f5733645baf78f6f38432db0f4fbda65 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Wed, 13 Aug 2025 17:53:24 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor=20[]=20Test=20page=20=EC=A0=84?= =?UTF-8?q?=EC=B2=B4=20=EA=B0=80=EC=9A=B4=EB=8D=B0=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Window size가 줄어들 때 dropdown type의 `TextField` component가 이동하는 경우 dropdown 위치가 갱신되지 않는 문제를 재현하기 위해 test page 수정 --- src/pages/test-page.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/test-page.jsx b/src/pages/test-page.jsx index c254524..6bc3594 100644 --- a/src/pages/test-page.jsx +++ b/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 (

🤯

From 49e7756cbb2a298eb345d1df4586ad01ecc1bcf6 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Wed, 13 Aug 2025 18:02:15 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix=20[#25]=20Window=20size=EA=B0=80=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=A0=20=EB=95=8C=20dropdown=20layout?= =?UTF-8?q?=EC=9D=84=20=EC=83=88=EB=A1=9C=EC=9A=B4=20target=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EA=B0=B1=EC=8B=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/use-dropdown.jsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/hooks/use-dropdown.jsx b/src/hooks/use-dropdown.jsx index 16f1601..5a25cb6 100644 --- a/src/hooks/use-dropdown.jsx +++ b/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, From 0df381e4268a9cfe9355261362b4bc9ab8e06871 Mon Sep 17 00:00:00 2001 From: Chamsol Kim Date: Thu, 14 Aug 2025 09:03:57 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat=20[#25]=20Modal=20container=EB=A5=BC?= =?UTF-8?q?=20fixed=20position=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Scroll이 발생하더라도 fixed position이므로, scroll 하더라도 최초 화면 전체에 띄워진 위치가 고정된다. --- src/components/modal/modal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx index d8b4aa2..6bedd32 100644 --- a/src/components/modal/modal.jsx +++ b/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;