diff --git a/src/app/(input)/ticker/_components/ticker-content.tsx b/src/app/(input)/ticker/_components/ticker-content.tsx index 4b4474d..05d514c 100644 --- a/src/app/(input)/ticker/_components/ticker-content.tsx +++ b/src/app/(input)/ticker/_components/ticker-content.tsx @@ -79,7 +79,10 @@ const TickerContent = React.memo(() => { return setTickerCount(0); }, []); - const handleNameFocus = React.useCallback(() => { + const handleNameFocus = React.useCallback((e: React.FocusEvent) => { + e.preventDefault(); + + e.target.focus({ preventScroll: true }); setDrawerType("name"); }, []); diff --git a/src/app/(input)/ticker/_components/ticker-drawer.tsx b/src/app/(input)/ticker/_components/ticker-drawer.tsx index d119e39..22abede 100644 --- a/src/app/(input)/ticker/_components/ticker-drawer.tsx +++ b/src/app/(input)/ticker/_components/ticker-drawer.tsx @@ -19,12 +19,11 @@ interface TickerDrawerProps { handleCountChange: (e: React.ChangeEvent) => void; handleSubmitClick: () => void; handleInputClear: (type: DrawerType) => void; - handleNameFocus: () => void; + handleNameFocus: (e: React.FocusEvent) => void; handleDeleteClick: () => void; handleConfirmClick: () => void; } -const DRAWER_OFFSET = 96; export const TickerDrawer = React.memo( ({ drawerType, @@ -41,7 +40,6 @@ 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]); @@ -63,30 +61,8 @@ 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 - DRAWER_OFFSET}px`; - drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`; - } - - window.visualViewport?.addEventListener("resize", onVisualViewportChange); - - return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange); - }, []); - return ( - + {title}