diff --git a/src/app/(input)/ticker/_components/ticker-drawer.tsx b/src/app/(input)/ticker/_components/ticker-drawer.tsx index 1a23c21..1df603e 100644 --- a/src/app/(input)/ticker/_components/ticker-drawer.tsx +++ b/src/app/(input)/ticker/_components/ticker-drawer.tsx @@ -40,6 +40,7 @@ export const TickerDrawer = React.memo( }: TickerDrawerProps) => { const debouncedTickerName = useDebounce(tickerName, 400); // 디바운스 적용 const { data, isLoading } = useFilteredStocksQuery(debouncedTickerName); + const drawerRef = React.useRef(null); const hasTicker = React.useMemo(() => { return tickerCount > 0; }, [tickerCount]); @@ -61,8 +62,30 @@ export const TickerDrawer = React.memo( } }, [drawerType]); + // This code is simplified for the sake of this article + React.useEffect(() => { + function onVisualViewportChange() { + if (drawerRef.current === null) return; + + const visualViewportHeight = window.visualViewport?.height ?? 0; + // const keyboardHeight = window.innerHeight - visualViewportHeight; + + // Difference between window height and height excluding the keyboard + const diffFromInitial = window.innerHeight - visualViewportHeight; + + // const drawerHeight = drawerRef.current?.getBoundingClientRect().height || 0; + + drawerRef.current.style.height = `${visualViewportHeight - (window.innerHeight - 100)}px`; + drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`; + } + + window.visualViewport?.addEventListener("resize", onVisualViewportChange); + + return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange); + }, []); + return ( - + {title}