From e819e9725376d29cb89d2a26cf33e81f1bc9620c Mon Sep 17 00:00:00 2001
From: Ryoma <119156952+RRRyoma@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:24:20 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=82=92=E3=81=A8?=
 =?UTF-8?q?=E3=82=8A=E3=82=84=E3=82=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/Card.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Card.tsx b/web/src/components/Card.tsx
index 6df18ad8..c01f670b 100644
--- a/web/src/components/Card.tsx
+++ b/web/src/components/Card.tsx
@@ -70,7 +70,7 @@ const CardFront = ({ displayedUser }: CardProps) => {
         border: "2px solid #3596C6",
         padding: "10px",
         height: "100%",
-        overflow: "scroll",
+        overflow: "hidden",
       }}
     >
       <div
@@ -116,7 +116,7 @@ const CardBack = ({ displayedUser }: CardProps) => {
         border: "2px solid #3596C6",
         padding: "10px",
         height: "100%",
-        overflow: "scroll",
+        overflow: "hidden",
       }}
     >
       <div style={{ display: "flex", justifyContent: "center" }}>

From 4cf68f1f1ef7b71a49de012ae46d0b7df6fb263f Mon Sep 17 00:00:00 2001
From: Ryoma <119156952+RRRyoma@users.noreply.github.com>
Date: Tue, 24 Sep 2024 19:24:42 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF?=
 =?UTF-8?q?=E6=99=82=E3=81=AB=E3=82=AB=E3=83=BC=E3=83=89=E3=81=8C=E5=B0=91?=
 =?UTF-8?q?=E3=81=97=E5=B0=8F=E3=81=95=E3=81=8F=E3=81=AA=E3=82=8B(UX?=
 =?UTF-8?q?=E6=94=B9=E5=96=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/DraggableCard.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web/src/components/DraggableCard.tsx b/web/src/components/DraggableCard.tsx
index 604f381f..dc8d4e7c 100644
--- a/web/src/components/DraggableCard.tsx
+++ b/web/src/components/DraggableCard.tsx
@@ -69,6 +69,7 @@ export const DraggableCard = ({
           handleDragEnd();
         }}
         style={{ x: dragX, y: dragY, padding: "10px" }}
+        whileTap={{ scale: 0.95 }}
       >
         <Card displayedUser={displayedUser} />
       </motion.div>

From 0bfcae50a82b147be57d6cf9c2e46bb00686da62 Mon Sep 17 00:00:00 2001
From: Ryoma <119156952+RRRyoma@users.noreply.github.com>
Date: Tue, 24 Sep 2024 20:14:32 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB?=
 =?UTF-8?q?=E3=81=8B=E3=81=A4=E6=A8=AA=E7=94=BB=E9=9D=A2=E3=81=AE=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E8=AD=A6=E5=91=8A(=E5=BF=9C=E6=80=A5=E5=87=A6?=
 =?UTF-8?q?=E7=BD=AE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/BanLandscape.tsx | 60 +++++++++++++++++++++++++++++
 web/src/main.tsx                    |  2 +
 2 files changed, 62 insertions(+)
 create mode 100644 web/src/components/BanLandscape.tsx

diff --git a/web/src/components/BanLandscape.tsx b/web/src/components/BanLandscape.tsx
new file mode 100644
index 00000000..1bec3db5
--- /dev/null
+++ b/web/src/components/BanLandscape.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+
+const BanLandscape = () => {
+  const [isLandscape, setIsLandscape] = useState(false);
+
+  const checkOrientation = useCallback(() => {
+    const userAgent = navigator.userAgent;
+    const isMobile = /iPhone|Android|Mobile/i.test(userAgent);
+    if (isMobile) {
+      setIsLandscape(window.innerHeight < window.innerWidth);
+    } else {
+      setIsLandscape(false); // モバイルデバイスでない場合は常に縦画面扱い
+    }
+  }, []);
+
+  useEffect(() => {
+    checkOrientation();
+    window.addEventListener("resize", checkOrientation);
+    return () => {
+      window.removeEventListener("resize", checkOrientation);
+    };
+  }, [checkOrientation]);
+
+  return (
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
+      {isLandscape && (
+        <div
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 1000,
+          }}
+        >
+          <div
+            style={{
+              backgroundColor: "white",
+              padding: "20px",
+              borderRadius: "10px",
+              boxShadow: "0 2px 10px rgba(0, 0, 0, 0.5)",
+              textAlign: "center",
+              fontSize: "20px",
+              color: "#333",
+            }}
+          >
+            このアプリは縦画面で使用してください
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BanLandscape;
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 7c60b77c..56bfdaf8 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -7,6 +7,7 @@ import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 import { CssBaseline } from "@mui/material";
 import App from "./App";
+import BanLandscape from "./components/BanLandscape";
 import { AlertProvider } from "./components/common/alert/AlertProvider";
 import { ModalProvider } from "./components/common/modal/ModalProvider";
 import AuthProvider from "./firebase/auth/AuthProvider";
@@ -19,6 +20,7 @@ ReactDOM.createRoot(root).render(
       <CssBaseline />
       <AlertProvider>
         <ModalProvider>
+          <BanLandscape />
           <App />
         </ModalProvider>
       </AlertProvider>