feat: add github icon

client/src/App.js

@@ -29,6 +29,7 @@ import TutorialModal from "./components/common/TutorialModal";
 import SvgIcon from "./components/common/SvgIcon";
 import MusicOnSrc from "./assets/images/music_on.png";
 import MusicOffSrc from "./assets/images/music_off.png";
+import Github from "./components/Github";
 const Background = styled.div`
   width: 100%;
   height: 100vh;
@@ -84,7 +85,7 @@ function App() {
     top: "3%",
     left: "8%",
   };
-  console.log(mode);
+
   return (
     <LanguageContext.Provider value={mode}>
       <WebsocketProvider>
@@ -124,6 +125,7 @@ function App() {
             ) : (
               <></>
             )}
+
             {pathname == "/" && (
               <TutorialBtn
                 setTutorialModalVisible={setTutorialModalVisible}
@@ -204,6 +206,7 @@ function App() {
             ) : (
               <></>
             )}
+
             {pathname === "/" && (
               <TutorialBtn
                 setTutorialModalVisible={setTutorialModalVisible}
@@ -215,7 +218,6 @@ function App() {
               setModalVisible={setTutorialModalVisible}
             />
             {pathname === "/" && <Toggle mode={mode} setMode={setMode} />}
-
             <Routes>
               <Route path="/" element={<MobileLandingScreen />} />
 
@@ -247,21 +249,5 @@ function App() {
     </LanguageContext.Provider>
   );
 }
-const LeftTop = styled.div`
-  position: absolute;
-  left: 3%;
-  top: 3%;
-  z-index: 10;
-`;
-
-const Bottom = styled.div`
-  position: absolute;
-  width: 100%;
 
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  bottom: 1%;
-  z-index: 1;
-`;
 export default App;

client/src/components/Github.js

@@ -0,0 +1,25 @@
+import React from "react";
+import SvgIcon from "./common/SvgIcon";
+import GithubSrc from "../assets/images/github-mark.svg";
+import styled from "styled-components";
+function Github() {
+  return (
+    <IconContainer>
+      <SvgIcon
+        src={GithubSrc}
+        size="40px"
+        onClick={() => window.open("https://github.com/salt26/rpsbrawl")}
+      />
+    </IconContainer>
+  );
+}
+
+const IconContainer = styled.a`
+  border-radius: 50px;
+  width: 30px;
+  height: 40px;
+  background-color: white;
+  position: absolute;
+`;
+
+export default Github;

client/src/components/common/Button.js

@@ -20,6 +20,7 @@ const Btn = styled.button`
       : "linear-gradient(180deg, #3ab6bc 0%, #3a66bc 100%, #2f508e 100%)"};
   &:hover {
     background-color: var(--light-mint);
+    transform: scale(1.1);
   }
 `;
 export default function Button({ text, onClick, width, height, bg }) {

client/src/components/common/TutorialBtn.js

@@ -20,7 +20,7 @@ export default function TutorialBtn({
 
 const IconContainer = styled.div`
   position: absolute;
-  right: calc(3% + 40px);
+  right: calc(4% + 50px);
   top: 3%;
   cursor: pointer;
 `;

client/src/pages/LandingPage.js

@@ -18,7 +18,7 @@ import { useRef, createContext, useEffect } from "react";
 import { LanguageContext } from "../utils/LanguageProvider";
 import { getUserName, setUserName } from "../utils/User";
 import { Language } from "../db/Language";
-
+import Github from "../components/Github";
 import { WebsocketContext } from "../utils/WebSocketProvider";
 import { useMediaQuery } from "react-responsive";
 
@@ -175,6 +175,9 @@ export default function LandingPage() {
 
         <LoginBox />
       </Row>
+      <GithubBox>
+        <Github />
+      </GithubBox>
     </Container>
   );
 }
@@ -183,7 +186,14 @@ export default function LandingPage() {
 https://apes0113.postype.com/post/2620
 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)
 */
-
+const GithubBox = styled.div`
+  width: 100%;
+  position: relative;
+  display: flex;
+  padding-right: 3%;
+  flex-direction: row;
+  justify-content: flex-end;
+`;
 const Anim = styled.div`
   animation: anim1 5s infinite ease-in-out;
   animation-delay: ${({ delay }) => delay}s;
@@ -229,7 +239,7 @@ const Container = styled.div`
 
   width: 100%;
   height: 100%;
-  padding-bottom: 50px;
+  padding-bottom: 3%;
 
   align-items: center;
 

client/src/pages/MobileIngameScreen.js

@@ -137,14 +137,12 @@ export default function MobileInGameScreen() {
       if (ready) {
         if (res?.response === "error") {
           if (
-            res.message === "Cannot play the same hand in a row (limited mode)."
+            res.message === "Cannot play the same hand in a row. (limited mode)"
           ) {
             setMsg(Language[mode].limited_text);
             setShowTime(true);
             return;
           }
-          alert(res.message);
-          return;
         }
         if (res?.request === "disconnected") {
           //기존 인원과 새인원 비교

client/src/pages/MobileLandingScreen.js

@@ -3,13 +3,12 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import Logo from "../components/common/Logo";
-
 import RockSrc from "../assets/images/rock.png";
 import ScissorSrc from "../assets/images/scissor.png";
 import PaperSrc from "../assets/images/paper.png";
 import SvgIcon from "../components/common/SvgIcon";
 import SizedBox from "../components/common/SizedBox";
-
+import Github from "../components/Github";
 import Button from "../components/common/Button";
 import { useContext } from "react";
 import { Medium, MediumOutline } from "../styles/font";
@@ -232,6 +231,9 @@ export default function MobileLandingScreen() {
 
         {currentTab === 0 ? <RuleBox /> : <LoginBox />}
       </div>
+      <GithubBox>
+        <Github />
+      </GithubBox>
     </Container>
   );
 }
@@ -240,6 +242,13 @@ export default function MobileLandingScreen() {
 https://apes0113.postype.com/post/2620
 linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n)
 */
+const GithubBox = styled.div`
+  position: absolute;
+  right: 4%;
+  top: 3%;
+  width: 40px;
+  height: 40px;
+`;
 
 const Anim = styled.div`
   animation: anim1 5s infinite ease-in-out;