diff --git a/src/pages/home/index.module.css b/src/pages/home/index.module.css index 07b12d0..0e00e6c 100644 --- a/src/pages/home/index.module.css +++ b/src/pages/home/index.module.css @@ -50,7 +50,7 @@ li{ align-items: center; } -@media (min-width: 600px) { +@media (min-width: 1024px) { .go-game-pc { display: flex; justify-content: center; diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 55ed9ba..d87de2b 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,32 +1,28 @@ import { useEffect, useState } from "react"; import { DefaultButton } from "../../components/ui/Button"; import styles from "./index.module.css"; +import { device } from "../../utils/device"; function Home() { - const [isSmallScreen, setIsSmallScreen] = useState( - window.matchMedia("(max-width: 600px)").matches, - ); + const [isPcScreen, setIsPcScreen] = useState(window.matchMedia(device.pc).matches); useEffect(() => { - const mediaQuery = window.matchMedia("(max-width: 600px)"); - - const handleChange = (event: { - matches: boolean | ((prevState: boolean) => boolean); - }) => { - setIsSmallScreen(event.matches); - }; + const mediaQuery = window.matchMedia(device.pc); - mediaQuery.addEventListener("change", handleChange); + const handleChange = (event: { matches: boolean | ((prevState: boolean) => boolean); }) => { + setIsPcScreen(event.matches); + }; - // Cleanup event listener on component unmount - return () => { - mediaQuery.removeEventListener("change", handleChange); - }; - }, []); + mediaQuery.addEventListener('change', handleChange); + return () => { + mediaQuery.removeEventListener('change', handleChange); + }; + }, []); const handleClick = () => { - window.location.href = isSmallScreen ? "/shooter" : "/gallery"; - }; + window.location.href = isPcScreen ? '/gallery' : '/shooter'; + }; + return (
@@ -55,9 +51,7 @@ function Home() { height="350" />
-
+
射的へ向かう diff --git a/src/utils/device.ts b/src/utils/device.ts new file mode 100644 index 0000000..ff961a2 --- /dev/null +++ b/src/utils/device.ts @@ -0,0 +1,3 @@ +export const device = { + pc: '(min-width: 1024px)', +}; \ No newline at end of file