diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index f30e26160617fbeb18479fcec8327522b93e548a..32fa1dbc05ad5d822e0a237b3d84f2b6108ea1bc 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -21,11 +21,11 @@ const Content = ({ children }: { children: React.ReactNode }) => { useEffect(() => { function handleResize() { - if (innerWidth <= 768) { + if (innerWidth <= 768 && screenType !== ScreenType.MOBILE) { dispatch(changeScreenType(ScreenType.MOBILE)) - } else if (innerWidth <= 1024) { + } else if (innerWidth <= 1024 && screenType !== ScreenType.TABLET) { dispatch(changeScreenType(ScreenType.TABLET)) - } else { + } else if (innerWidth > 1024 && screenType !== ScreenType.DESKTOP) { dispatch(changeScreenType(ScreenType.DESKTOP)) } } @@ -34,7 +34,7 @@ const Content = ({ children }: { children: React.ReactNode }) => { return () => { window.removeEventListener('resize', handleResize) } - }, [dispatch]) + }, [dispatch, screenType]) return ( <> diff --git a/src/components/Header/CozyBar.tsx b/src/components/Header/CozyBar.tsx index d0cccb6005d43438fc1fc1541e68236440318cb5..99bd3d50bebf4f14b5d1182083a06a4184a2d9b2 100644 --- a/src/components/Header/CozyBar.tsx +++ b/src/components/Header/CozyBar.tsx @@ -68,9 +68,8 @@ const CozyBar = ({ </BarRight> </> ) - } else { - return null } + return null } export default CozyBar diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index b200f36a72621b30f136f0bc0c38706c9eb30129..7b838bdb4224a180fa753eb2da191e0e89f3852c 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -31,7 +31,9 @@ const Header = ({ const navigate = useNavigate() const header = useRef<HTMLDivElement>(null) const dispatch = useAppDispatch() - const { screenType } = useAppSelector(state => state.ecolyo.global) + const { screenType, headerHeight } = useAppSelector( + state => state.ecolyo.global + ) const cozyBarHeight = 48 const handleClickBack = useCallback(() => { @@ -47,10 +49,12 @@ const Header = ({ } useEffect(() => { - const headerHeight = header.current?.clientHeight || 0 + const refHeight = header.current?.clientHeight || 0 const adjustment = screenType === ScreenType.MOBILE ? cozyBarHeight : 0 - dispatch(setHeaderHeight(headerHeight - adjustment)) - }, [screenType, children, dispatch]) + const targetHeight = refHeight - adjustment + if (targetHeight === headerHeight) return + dispatch(setHeaderHeight(targetHeight)) + }, [screenType, children, dispatch, headerHeight]) return ( <header ref={header}> diff --git a/src/enums/screen.enum.ts b/src/enums/screen.enum.ts index cf2faa302b4f04d7665de47b85079a324b2dd5f8..c48678c4265b33ce81603baecf9ac43dc501581d 100644 --- a/src/enums/screen.enum.ts +++ b/src/enums/screen.enum.ts @@ -1,5 +1,5 @@ export enum ScreenType { - MOBILE = 0, - TABLET = 1, - DESKTOP = 2, + MOBILE = 'MOBILE', + TABLET = 'TABLET', + DESKTOP = 'DESKTOP', }