Add share button

MycroftKang · Feb 25, 2024 · 1f260d0 · 1f260d0
1 parent 169cd42
commit 1f260d0
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 1 deletion.
diff --git a/public/share.svg b/public/share.svg
diff --git a/src/lib/suikaGame/index.module.scss b/src/lib/suikaGame/index.module.scss
@@ -42,3 +42,9 @@
     cursor: pointer;
   }
 }
+
+// @media screen and (max-height: 739px) and (max-width: 484px) {
+//   .shareButton {
+//     display: none;
+//   }
+// }
diff --git a/src/lib/suikaGame/index.tsx b/src/lib/suikaGame/index.tsx
@@ -116,8 +116,39 @@ const SuikaGame = () => {
     return score > bestScore ? score : bestScore;
   }
 
+  const share = () => {
+    if (navigator.share) {
+      navigator.share({
+        title: '수박 만들기 게임',
+        text: '폭탄과 과일들을 모아 수박을 만들어보세요.',
+        url: 'https://game.mulgyeol.com/',
+      })
+        .then(() => console.log('done'))
+        .catch((error) => console.log(error));
+    } else {
+      const urlToCopy = window.location.href;
+
+      // Clipboard API를 지원하는지 확인
+      if (document.queryCommandSupported("copy")) {
+        const input = document.createElement("input");
+        input.value = urlToCopy;
+        document.body.appendChild(input);
+        input.select();
+        document.execCommand("copy");
+        document.body.removeChild(input);
+      } else {
+        navigator.clipboard.writeText(urlToCopy)
+      }
+    }
+  }
+
   return (
     <div className={cx('gameArea')}>
+      <div className={`${cx('shareButton')} top-0 end-0 p-3`} style={{position: "absolute", zIndex: 1, pointerEvents: "auto", display: !isStart ? "block" : "none"}}>
+        <button type="button" className='btn' onClick={share} style={{width: "1.8em", height: "1.8em", padding: 0, opacity: "0.85"}}>
+        <img src="/share.svg" className="" alt="" style={{width: "1.8em"}}/>
+        </button>
+      </div>
       <div className={cx('gameWrap')} style={{ visibility: isStart ? 'visible' : 'hidden'}}>
         <div className={cx('canvasArea')}>
           <Header bestScore={bestScore} score={score} bombItemCount={bombItemCount} nextItem={nextItem} onClick={handleBombItem} isStart={isStart} />

diff --git a/src/lib/suikaGame/intro/index.tsx b/src/lib/suikaGame/intro/index.tsx
@@ -181,7 +181,7 @@ const Intro = ({isVisible, loadUserInfo,handleGameStart, handleShowRankModal}: I
               홈 또는 앱스 화면에 바로가기를 추가하려면 크롬에서 계속하세요.
               </Card.Text>
             {/* <Button variant="primary" style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} onClick={handleInstall}>크롬에서 열기</Button> */}
-            <a className='btn btn-primary' style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} href="intent://game.mulgyeol.com#Intent;scheme=https;package=com.android.chrome;end">크롬에서 열기</a>
+            <a className='btn btn-secondary' style={{paddingLeft: "1.5rem", paddingRight: "1.5rem"}} href="intent://game.mulgyeol.com#Intent;scheme=https;package=com.android.chrome;end">크롬에서 열기</a>
           </Card.Body>
         </Card>
       </ToastContainer>