Merge pull request #16 from claustra01/home_page

Add: スマホ版ののHomeのUI（メディアクエリは夜眠くなってからに回す）

src/App.tsx

@@ -4,8 +4,7 @@ const AppRoutes = () => {
 	return (
 		<>
 			<Routes>
-				<Route path="/" />
-				<Route path="/home" element={<Home />} />
+				<Route path="/" element={<Home />} />
 			</Routes>
 		</>
 	);

src/components/ui/Button/index.module.css

@@ -0,0 +1,55 @@
+.button-style {
+    border-width: 0;
+
+    &:hover {
+      &:not([disabled]) {
+        scale: 1.2;
+      }
+    }
+
+    &[data-size="sm"] {
+      padding: 4px 8px;
+      font-size: 12px;
+      border-radius: 4px;
+    }
+
+    &[data-size="md"] {
+      padding: 4px 32px;
+      font-size: 24px;
+      font-weight: bold;
+      border-radius: 4px;
+    }
+
+    &[data-size="lg"] {
+      padding: 8px 48px;
+      font-size: 24px;
+      font-weight: bold;
+      border-radius: 4px;
+      white-space: nowrap;
+    }
+
+    &[data-variant="contained"] {
+      color: var(--white);
+
+
+      &[data-color="red"] {
+        background-color: var(--red);
+      }
+
+      &[data-color="black"] {
+        background-color: var(--black);
+      }
+    }
+
+    &[data-variant="outlined"] {
+      background-color: var(--white);
+      color: var(--black);
+      border-width: 2px;
+      border-style: solid;
+
+      &[data-color="red"] {
+        border-color: var(--red);
+      }
+
+    }
+  }

src/components/ui/Button/index.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import styles from "./index.module.css";
+
+type ButtonProps = {
+	children: ReactNode;
+	variant?: "contained" | "outlined";
+	size?: "sm" | "md" | "lg";
+	color?: "red" | "black";
+} & ComponentPropsWithoutRef<"button">;
+
+export const DefaultButton = ({
+	children,
+	variant = "outlined",
+	size = "md",
+	color = "red",
+	...props
+}: ButtonProps) => {
+	return (
+		<button
+			className={styles["button-style"]}
+			data-variant={variant}
+			data-size={size}
+			data-color={color}
+			{...props}
+		>
+			{children}
+		</button>
+	);
+};

src/index.css

@@ -24,6 +24,7 @@ body {
   display: flex;
   min-width: 320px;
   min-height: 100vh;
+  background-color: #FFF2F2;
 }
 
 h1 {

src/pages/home/index.module.css

@@ -24,4 +24,36 @@
     }
     .scroll-infinity__item>img {
       width: 100%;
-    }
+    }
+
+.background-logo{
+    opacity: 0.8;
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+}
+
+li{
+    font-size: 20px;
+    padding: 0 24px;
+}
+
+.go-game{
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    justify-content: center;
+    align-items: center;
+}
+
+@media (min-width: 1024px) {
+    .go-game-pc {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/pages/home/index.tsx

@@ -1,22 +1,65 @@
+import { useEffect, useState } from "react";
+import { DefaultButton } from "../../components/ui/Button";
+import { device } from "../../utils/device";
 import styles from "./index.module.css";
 
 function Home() {
+	const [isPcScreen, setIsPcScreen] = useState(
+		window.matchMedia(device.pc).matches,
+	);
+
+	useEffect(() => {
+		const mediaQuery = window.matchMedia(device.pc);
+
+		const handleChange = (event: {
+			matches: boolean | ((prevState: boolean) => boolean);
+		}) => {
+			setIsPcScreen(event.matches);
+		};
+
+		mediaQuery.addEventListener("change", handleChange);
+		return () => {
+			mediaQuery.removeEventListener("change", handleChange);
+		};
+	}, []);
+
+	const handleClick = () => {
+		window.location.href = isPcScreen ? "/gallery" : "/shooter";
+	};
+
 	return (
-		<div className={styles["scroll-infinity"]}>
-			<div className={styles["scroll-infinity__wrap"]}>
-				<ul
-					className={`${styles["scroll-infinity__list"]} ${styles["scroll-infinity__list--left"]}`}
-				>
-					<li className={styles["scroll-infinity__item"]}>
-						VIRTUAL_NATSUMATSURI
-					</li>
-					<li className={styles["scroll-infinity__item"]}>
-						VIRTUAL_NATSUMATSURI
-					</li>
-					<li className={styles["scroll-infinity__item"]}>
-						VIRTUAL_NATSUMATSURI
-					</li>
-				</ul>
+		<div>
+			<div className={styles["scroll-infinity"]}>
+				<div className={styles["scroll-infinity__wrap"]}>
+					<ul
+						className={`${styles["scroll-infinity__list"]} ${styles["scroll-infinity__list--left"]}`}
+					>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+						<li className={styles["scroll-infinity__item"]}>
+							VIRTUAL_NATSUMATSURI
+						</li>
+					</ul>
+				</div>
+			</div>
+			<div className={styles["background-logo"]}>
+				<img
+					src="/logo.webp"
+					alt="背景にばーちゃるなつまつりのロゴ"
+					width="350"
+					height="350"
+				/>
+			</div>
+			<div
+				className={`${styles["go-game"]} ${isPcScreen ? styles["go-game-pc"] : ""}`}
+			>
+				<DefaultButton color="red" size="lg" onClick={handleClick}>
+					射的へ向かう
+				</DefaultButton>
 			</div>
 		</div>
 	);

src/utils/device.ts

@@ -0,0 +1,3 @@
+export const device = {
+	pc: "(min-width: 1024px)",
+};