From a0aa42d2ad45cd9fd15902ae4a6ea3e7ac31f17d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=84=B8=EB=AF=BC?= <89172499+semnil5202@users.noreply.github.com> Date: Tue, 30 Apr 2024 02:27:35 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20MobileView=20height=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EB=B0=8F=20=EB=8C=80=EB=8C=93=EA=B8=80=20=ED=8F=AC?= =?UTF-8?q?=EC=BB=A4=EC=8B=B1=20=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?(#131)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/MobileView.tsx | 42 ++----------- src/layouts/contexts/MobileViewContext.tsx | 24 -------- .../contexts/CommentFocusContext.tsx | 59 ++----------------- 3 files changed, 9 insertions(+), 116 deletions(-) delete mode 100644 src/layouts/contexts/MobileViewContext.tsx 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, }); };