diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx index f30e26160617fbeb18479fcec8327522b93e548a..287f8f48619b85dbcd03a17e39139abe9de3f517 100644 --- a/src/components/Content/Content.tsx +++ b/src/components/Content/Content.tsx @@ -1,6 +1,6 @@ import FeedbackModal from 'components/Feedback/FeedbackModal' import { ScreenType } from 'enums' -import React, { useEffect } from 'react' +import React, { useEffect, useRef } from 'react' import { changeScreenType } from 'store/global/global.slice' import { useAppDispatch, useAppSelector } from 'store/hooks' import './content.scss' @@ -10,6 +10,7 @@ const Content = ({ children }: { children: React.ReactNode }) => { const { screenType, headerHeight } = useAppSelector( state => state.ecolyo.global ) + const currentScreenType = useRef(screenType) const cozyBarHeight = 48 const cozyNavHeight = 56 @@ -21,16 +22,24 @@ const Content = ({ children }: { children: React.ReactNode }) => { useEffect(() => { function handleResize() { + let newScreenType: ScreenType if (innerWidth <= 768) { - dispatch(changeScreenType(ScreenType.MOBILE)) + newScreenType = ScreenType.MOBILE } else if (innerWidth <= 1024) { - dispatch(changeScreenType(ScreenType.TABLET)) + newScreenType = ScreenType.TABLET } else { - dispatch(changeScreenType(ScreenType.DESKTOP)) + newScreenType = ScreenType.DESKTOP + } + + if (currentScreenType.current !== newScreenType) { + currentScreenType.current = newScreenType + dispatch(changeScreenType(newScreenType)) } } + handleResize() window.addEventListener('resize', handleResize) + return () => { window.removeEventListener('resize', handleResize) } 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 7d15e206c9f0fda9f792b54e66af7380b648cc22..b902e33e4c228e1434a8f1dc0b3385f160672db6 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -29,7 +29,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(() => { @@ -45,10 +47,13 @@ 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) { + dispatch(setHeaderHeight(targetHeight)) + } + }, [screenType, children, dispatch, headerHeight]) return ( <header ref={header}>