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