diff --git a/src/layouts/MobileView.tsx b/src/layouts/MobileView.tsx index 3d7b6e10..4bc26c3c 100644 --- a/src/layouts/MobileView.tsx +++ b/src/layouts/MobileView.tsx @@ -1,47 +1,15 @@ import styled from '@emotion/styled'; -import { MutableRefObject, useEffect, useRef } from 'react'; import { Outlet, ScrollRestoration } from 'react-router-dom'; -import { MobileViewRefContext } from './contexts/MobileViewContext'; import Navbar from './Navbar'; -const innerHeight = window.innerHeight; - -const calculateKeyboardHeight = (keyboardHeightRef: MutableRefObject) => { - const visualViewHeight = window.visualViewport?.height; - - if (visualViewHeight && keyboardHeightRef.current === 0) { - keyboardHeightRef.current = innerHeight - visualViewHeight; - } -}; - const MobileView = () => { - const mobileViewRef = useRef(null); - const keyboardHeightRef = useRef(0); - - useEffect(() => { - if (!window.visualViewport) return; - const windowVisualViewPort = window.visualViewport; - - const onResizeViewPortHeight = () => { - calculateKeyboardHeight(keyboardHeightRef); - }; - - windowVisualViewPort.addEventListener('resize', onResizeViewPortHeight); - - return () => { - windowVisualViewPort.removeEventListener('resize', onResizeViewPortHeight); - }; - }, []); - return ( - - - - - - - + + + + + ); }; diff --git a/src/layouts/contexts/MobileViewContext.tsx b/src/layouts/contexts/MobileViewContext.tsx deleted file mode 100644 index 715b829e..00000000 --- a/src/layouts/contexts/MobileViewContext.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { MutableRefObject, createContext, useContext } from 'react'; - -interface MobileViewMainContextProps { - mobileViewRef: MutableRefObject; - keyboardHeightRef: MutableRefObject; -} - -export const MobileViewRefContext = createContext(null); - -const useMobileViewContext = () => { - const context = useContext(MobileViewRefContext); - if (!context) { - throw new Error('MobileView 컴포넌트 내부에서만 사용 가능합니다.'); - } - - return context; -}; - -export const useMobileViewRefContext = () => { - const context = useMobileViewContext(); - const { mobileViewRef, keyboardHeightRef } = context; - - return { mobileViewRef, keyboardHeightRef }; -}; diff --git a/src/pages/FeedDetail/contexts/CommentFocusContext.tsx b/src/pages/FeedDetail/contexts/CommentFocusContext.tsx index 3a9245ed..a212df90 100644 --- a/src/pages/FeedDetail/contexts/CommentFocusContext.tsx +++ b/src/pages/FeedDetail/contexts/CommentFocusContext.tsx @@ -1,7 +1,5 @@ import { useContext, useState, createContext, MutableRefObject, useRef, ReactNode } from 'react'; -import { useMobileViewRefContext } from '../../../layouts/contexts/MobileViewContext'; - interface CommentFocusContextType { isFocusComment: boolean; openCommentTextarea: () => void; @@ -21,53 +19,14 @@ interface Props { interface FocusUsingKeyboardHeightProps { textareaRef: MutableRefObject; - mobileViewRef: MutableRefObject; - keyboardCurrent: number; - isComment?: boolean; } const CommentFocusContext = createContext(null); -const isIphone = /ip/i.test(navigator.userAgent.toLowerCase()); -const INIT_KEYBOARD_HEIGHT = 280; -const FOCUSING_DIFFERENCE = 1.4; - -const focusUsingKeyboardHeight = ({ - textareaRef, - mobileViewRef, - keyboardCurrent, - isComment, -}: FocusUsingKeyboardHeightProps) => { - if (!textareaRef.current || !mobileViewRef.current) return; - - const textareaRefCurrent = textareaRef.current; - const mobileViewRefCurrent = mobileViewRef.current; - const textareaRect = textareaRefCurrent.getBoundingClientRect(); - const innerHeight = window.innerHeight; - const keyboardHeight = keyboardCurrent || INIT_KEYBOARD_HEIGHT; - const elementAbsolutePosition = mobileViewRefCurrent.scrollTop + textareaRect.top; - - textareaRefCurrent.focus(); - - // focus() 동작 완료 이후 포커싱 로직 동작토록 의도적으로 비동기 상황으로 수행 - const timerId = setTimeout(() => { - clearTimeout(timerId); - - // 가상 키보드 내에 댓글 및 답글 입력창이 가려질 가능성이 있는 경우에만 포커싱 로직 동작 - if (innerHeight - textareaRect.top >= keyboardHeight) return; - - // 댓글 입력창 및 IOS 디바이스는 아래 포커싱 로직으로 동작 - if (isIphone && isComment) { - mobileViewRefCurrent.scroll({ - top: elementAbsolutePosition - innerHeight + keyboardHeight * FOCUSING_DIFFERENCE, - behavior: 'smooth', - }); - return; - } - - // 답글 입력창 및 IOS 외 모든 디바이스는 아래 포커싱 로직으로 동작 - textareaRefCurrent.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); - }, 0); +const focusUsingKeyboardHeight = ({ textareaRef }: FocusUsingKeyboardHeightProps) => { + if (!textareaRef.current) return; + + textareaRef.current.focus(); }; const resetTextareaFocus = (textareaRef: MutableRefObject) => { @@ -75,7 +34,6 @@ const resetTextareaFocus = (textareaRef: MutableRefObject { - const { mobileViewRef, keyboardHeightRef } = useMobileViewRefContext(); const [isFocusComment, setIsFocusComment] = useState(false); const commentTextareaRef = useRef(null); const recommentTextareaRef = useRef(null); @@ -87,9 +45,6 @@ export const CommentFocusProvider = ({ children }: Props) => { focusUsingKeyboardHeight({ textareaRef: commentTextareaRef, - mobileViewRef, - keyboardCurrent: keyboardHeightRef.current, - isComment: true, }); return; }; @@ -102,9 +57,6 @@ export const CommentFocusProvider = ({ children }: Props) => { const focusRecommentTextarea = () => { focusUsingKeyboardHeight({ textareaRef: recommentTextareaRef, - mobileViewRef, - keyboardCurrent: keyboardHeightRef.current, - isComment: false, }); }; @@ -116,9 +68,6 @@ export const CommentFocusProvider = ({ children }: Props) => { const focusEditCommentTextarea = () => { focusUsingKeyboardHeight({ textareaRef: editCommentTextareaRef, - mobileViewRef, - keyboardCurrent: keyboardHeightRef.current, - isComment: false, }); };