From 249cef2ba2203c8d90668d3794cac82154095f5c Mon Sep 17 00:00:00 2001
From: Sea10wood <miyusea5@gmail.com>
Date: Sat, 10 Aug 2024 15:52:43 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20home=E3=81=AEdevice.ts=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=E3=81=A8=E3=81=9D=E3=82=8C=E3=81=AB=E4=BC=B4=E3=81=A3?=
 =?UTF-8?q?=E3=81=9F=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/index.module.css |  2 +-
 src/pages/home/index.tsx        | 36 ++++++++++++++-------------------
 src/utils/device.ts             |  3 +++
 3 files changed, 19 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/device.ts

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 (
 		<div>
@@ -55,9 +51,7 @@ function Home() {
 					height="350"
 				/>
 			</div>
-			<div
-				className={`${styles["go-game"]} ${isSmallScreen ? styles["go-game-pc"] : ""}`}
-			>
+			<div className={`${styles["go-game"]} ${isPcScreen ? styles["go-game-pc"] : ''}`}>
 				<DefaultButton color="red" size="lg" onClick={handleClick}>
 					射的へ向かう
 				</DefaultButton>
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