From 75e775cdfa53d1d8c91b049fb92bfc95fbb5f63d Mon Sep 17 00:00:00 2001
From: Sea10wood <miyusea5@gmail.com>
Date: Sun, 11 Aug 2024 15:11:56 +0900
Subject: [PATCH] fix: home

---
 src/components/responsive/homePC/index.module.css |  6 +++---
 src/components/responsive/homePC/index.tsx        | 12 ++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/responsive/homePC/index.module.css b/src/components/responsive/homePC/index.module.css
index 4f05798..ec68ad2 100644
--- a/src/components/responsive/homePC/index.module.css
+++ b/src/components/responsive/homePC/index.module.css
@@ -120,7 +120,6 @@ li {
 }
 
 .go-game-pc {
-  margin-left: 15%;
   z-index: 10;
 }
 
@@ -129,10 +128,11 @@ li {
   position: relative;
   justify-content: center;
   align-items: center;
-  width: 70%;
-  aspect-ratio: 520 / 532;
+  width: 68%;
+  aspect-ratio: 520 / 560;
   background-color: rgba(255, 255, 255, 0.8);
   z-index: 1;
+  margin-top: 80px;
 }
 
 .qr-wrapper svg {
diff --git a/src/components/responsive/homePC/index.tsx b/src/components/responsive/homePC/index.tsx
index dc83571..7cb53cd 100644
--- a/src/components/responsive/homePC/index.tsx
+++ b/src/components/responsive/homePC/index.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRoomIdStore, useSocketRefStore } from "../../../store";
 import { copyStringToClipboard } from "../../../utils/copyClipBoard";
@@ -12,6 +13,13 @@ function HomePC() {
 	const setRef = useSocketRefStore((state) => state.setRef);
 	const roomId = useRoomIdStore((state) => state.uuid);
 	const url = `${window.location.href}?room_id=${roomId}`;
+	const [buttonText, setButtonText] = useState("共有リンクをコピー");
+
+	const handleCopyClick = () => {
+		copyStringToClipboard(url);
+		setButtonText("コピーしました");
+		setTimeout(() => setButtonText("共有リンクをコピー"), 2000);
+	};
 
 	const handleClick = () => {
 		requestPermission();
@@ -86,11 +94,11 @@ function HomePC() {
 					</div>
 					<div className={styles["link-copy"]}>
 						<TextButton
-							text="共有リンクをコピー"
+							text={buttonText}
 							color="black"
 							size="md"
 							type="button"
-							onClick={() => copyStringToClipboard(url)}
+							onClick={handleCopyClick}
 							underline={true}
 						/>
 					</div>