diff --git a/package.json b/package.json index 9d7a552..fba887a 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "prettier": "^3.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-responsive": "^9.0.2", "react-scroll": "^1.9.0", + "react-use": "^17.4.0", "styled-components": "^6.1.1" }, "devDependencies": { diff --git a/src/App.tsx b/src/App.tsx index 784e7b7..b440516 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import { ConfigProvider } from 'antd' import { NavigationBar } from './components/NavigationBar' +import { Housing } from './pages/Housing' import { Place } from './pages/Place' import { Welcome } from './pages/Welcome' import { Colors } from './styles/color' @@ -21,6 +22,7 @@ export const App = () => ( + ) diff --git a/src/components/NavigationBar.tsx b/src/components/NavigationBar.tsx index 2571ca3..c11c986 100644 --- a/src/components/NavigationBar.tsx +++ b/src/components/NavigationBar.tsx @@ -2,7 +2,7 @@ import { MenuOutlined } from '@ant-design/icons' import { Button, Drawer, Layout } from 'antd' import { Header as BaseHeader } from 'antd/es/layout/layout' import { useState } from 'react' -import { useMediaQuery } from 'react-responsive' +import { useMedia } from 'react-use' import styled from 'styled-components' import { Menu } from './Menu' @@ -13,7 +13,7 @@ export const NavigationBar = () => { const showDrawer = () => { setOpen(!open) } - const isTabletOrMobile = useMediaQuery({ maxWidth: 800 }) + const isTabletOrMobile = useMedia(`screen and (max-width: 1024px)`) return (