fix: home

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 {

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>