Merge branch 'dev' into seo

client/.gitignore

@@ -19,6 +19,7 @@ alembic.ini
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -27,3 +28,5 @@ alembic.ini
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+./src/Config.js

client/package.json

@@ -11,6 +11,7 @@
     "axios": "^1.2.1",
     "gsap": "^2.1.1",
     "history": "^5.3.0",
+    "qs": "^6.11.1",
     "react": "^18.2.0",
     "react-csv": "^2.2.2",
     "react-device-detect": "^2.2.3",

client/src/App.js

@@ -10,7 +10,6 @@ import {
   MobileRoomListScreen,
 } from "./pages";
 import { Route, Routes } from "react-router-dom";
-import { BASE_WEBSOCKET_URL } from "./Config";
 import styled from "styled-components";
 import "./App.css";
 import { useState, useRef, useEffect, createContext } from "react";

client/src/Config.js → client/src/Constants.js

@@ -1,9 +1,5 @@
-export const BASE_SERVER_URL = "http://127.0.0.1:8000";
-export const BASE_WEBSOCKET_URL = "ws://127.0.0.1:8000";
-
 /*세팅 값*/
 export const COOL_TIME = 1;
 export const TIME_DURATION = 60; // 게임 시간
 export const TIME_OFFSET = 5; //
 export const RESULT_TIME = 20; // 결과창 보는시간
-export const PASSWORD = "unijam2023";

client/src/components/gameroom/FirstPlace.js

@@ -40,14 +40,14 @@ export default function FirstPlace({ place }) {
       height={isMobile ? "10vh" : "100px"}
     >
       <Row>
-        <SvgIcon src={TrophySrc} size={isMobile ? "50px" : "80px"} />
+        <SvgIcon src={TrophySrc} size={isMobile ? "30px" : "60px"} />
         <Col>
           <Medium size={`var(--font-size-md)`}>{team_color[team]}</Medium>
 
           <Medium
             size={
               isMobile
-                ? String(10 - 4 * (name.length / 5)) + "vw"
+                ? String(8 - name.length / 5) + "vw"
                 : String(30 - 6 * (name.length / 7)) + "px"
             }
           >

client/src/components/gameroom/MyPlace.js

@@ -18,31 +18,6 @@ export default function MyPlace({ place }) {
     "purple",
   ];
   const isMobile = useMediaQuery({ query: "(max-width:768px)" });
-  const getNameSize = (name) => {
-    console.log(name);
-
-    if (isMobile) {
-      if (name.length <= 5) {
-        return "35px";
-      } else if (name.length <= 10) {
-        return "20px";
-      } else if (name.length <= 20) {
-        return "15px";
-      } else {
-        return "8px";
-      }
-    } else {
-      if (name.length <= 5) {
-        return "40px";
-      } else if (name.length <= 10) {
-        return "25px";
-      } else if (name.length <= 20) {
-        return "20px";
-      } else {
-        return "10px";
-      }
-    }
-  };
 
   return (
     <BgBox
@@ -57,7 +32,7 @@ export default function MyPlace({ place }) {
           <Medium
             size={
               isMobile
-                ? String(10 - 4 * (name.length / 5)) + "vw"
+                ? String(8 - name.length / 5) + "vw"
                 : String(30 - 6 * (name.length / 7)) + "px"
             }
           >
@@ -119,6 +94,6 @@ const Col = styled.div`
   display: flex;
 
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: space-around;
   align-items: flex-start;
 `;

client/src/components/gameroom/NetworkLogs.js

@@ -6,7 +6,7 @@ import { Rock, Paper, Scissor } from "./RPS.js";
 import SizedBox from "../common/SizedBox";
 import useInterval from "../../utils/useInterval";
 import { useParams } from "react-router-dom";
-import HTTP from "../../utils/HTTP";
+
 import { WebsocketContext } from "../../utils/WebSocketProvider";
 import { useContext, useEffect } from "react";
 import "./networklog.css";
@@ -136,16 +136,12 @@ const ScrollView = styled.div`
   overflow-x: hidden;
   overflow-y: scroll;
   flex-wrap: wrap;
-  @media (min-width: 1200px) {
-    // 데스크탑 일반
-    height: 500px;
-  }
 `;
 const Row = styled.tr`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  margin-bottom: 1.5vh;
+  margin-bottom: 10px;
 `;

client/src/components/gameroom/RPSSelection.js

@@ -3,12 +3,12 @@ import styled, { css } from "styled-components";
 import RockSrc from "../../assets/images/rock.png";
 import ScissorSrc from "../../assets/images/scissor.png";
 import PaperSrc from "../../assets/images/paper.png";
-import HTTP from "../../utils/HTTP";
+
 import { useParams } from "react-router-dom";
 import { useContext } from "react";
 import { WebsocketContext } from "../../utils/WebSocketProvider";
 import useInterval from "../../utils/useInterval";
-import { COOL_TIME } from "../../Config";
+import { COOL_TIME } from "../../Constants";
 import { GradientText } from "../../styles/font";
 import { isMobile } from "react-device-detect";
 

client/src/components/gameroom/ResultBoard.js

@@ -164,7 +164,7 @@ const Title = styled.div`
   width: 100%;
   gap: 20px;
   position: absolute;
-  top: -5%;
+  top: -7%;
 `;
 
 const Row = styled.div`

client/src/db/Language.js

@@ -23,7 +23,7 @@ export const Language = [
     cancel: "Cancel",
     update: "Update",
     settings: "Settings",
-
+    reconnection_request: "Please reconnect with the same username.",
     ingame_title_text: "Thinking about which hand to play...",
     ingame_describe_text: (num) => {
       return `The game starts soon ( connected : ${num} ) `;
@@ -114,7 +114,7 @@ Get the most points in 60 seconds! 🤩`,
     update: "변경",
     settings: "설정",
     limited_explain_text: " ",
-
+    reconnection_request: "같은 이름으로 재접속해주시기 바랍니다.",
     ingame_title_text: "무엇을 낼지 고민하는 중..",
     ingame_describe_text: (num) => {
       return `난투가 곧 시작됩니다. ( 현재 : ${num}명 ) `;

client/src/index.css

@@ -44,9 +44,9 @@ body {
   --font-size-xl: clamp(1rem, 7vw, 2.5rem); /*35px*/
   --font-size-lg: clamp(1rem, 6vw, 2.5rem); /*30px*/
   --font-size-ml: clamp(1rem, 5vw, 2rem); /*25px*/
-  --font-size-md: clamp(1rem, 4vw, 2rem); /*20px*/
+  --font-size-md: clamp(1.5rem, 4vw, 1.75rem); /*20px*/
   --font-size-ms: clamp(1.2rem, 3vw, 1.5rem); /*15px*/
-  --font-size-sm: clamp(1rem, 2vw, 1.5rem); /*10px*/
+  --font-size-sm: clamp(1rem, 1vw, 1.5rem); /*10px*/
 }
 
 code {

client/src/pages/GameResultPage.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import ResultBoard from "../components/gameroom/ResultBoard";
 import Button from "../components/common/Button";
 import styled from "styled-components";
-import HTTP from "../utils/HTTP";
+import { RESULT_TIME } from "../Constants";
 import { useParams } from "react-router-dom";
 import { useNavigate, useLocation } from "react-router-dom";
 import { getUserId } from "../utils/User";
@@ -15,7 +15,6 @@ import { Medium } from "../styles/font";
 import { useMediaQuery } from "react-responsive";
 import SizedBox from "../components/common/SizedBox";
 import useInterval from "../utils/useInterval";
-import { RESULT_TIME } from "../Config";
 
 export default function GameResultPage() {
   const mode = useContext(LanguageContext);

client/src/pages/LandingPage.js

@@ -9,19 +9,20 @@ 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 axios from "axios";
 import Button from "../components/common/Button";
 import { useContext } from "react";
 import { Medium, MediumOutline } from "../styles/font";
 import { useNavigate } from "react-router-dom";
 import { useRef, createContext, useEffect } from "react";
 import { LanguageContext } from "../utils/LanguageProvider";
-import HTTP from "../utils/HTTP";
 import { getUserName, setUserName } from "../utils/User";
 import { Language } from "../db/Language";
-import { BASE_WEBSOCKET_URL } from "../Config";
+
 import { WebsocketContext } from "../utils/WebSocketProvider";
 import { useMediaQuery } from "react-responsive";
+
+import qs from "qs";
 function RuleBox() {
   const mode = useContext(LanguageContext);
   return (
@@ -48,8 +49,9 @@ function LoginBox() {
   var navigate = useNavigate();
   const mode = useContext(LanguageContext);
   const [createWebSocketConnection, ready, ws] = useContext(WebsocketContext); //전역 소켓 사용
+  const [isLoading, setIsLoading] = useState(false); // 버튼 클릭 후 처리 중인지
 
-  const _joinGame = () => {
+  const _joinGame = async () => {
     if (name === "") {
       alert(Language[mode].name_blank);
       return;
@@ -59,7 +61,41 @@ function LoginBox() {
       return;
     }
 
-    createWebSocketConnection(name); // Socket Connection 생성
+    if (!isLoading) {
+      setIsLoading(true);
+      console.log("요청!");
+
+      var body = {
+        grant_type: "",
+        username: process.env.REACT_APP_RPS_USERNAME,
+        password: process.env.REACT_APP_RPS_PASSWORD,
+        scope: "",
+        client_id: "",
+        client_secret: "",
+      };
+
+      try {
+        /*비동기 요청*/
+        const response = await axios.post(
+          `${process.env.REACT_APP_RPS_BASE_SERVER_URL}/token`,
+          qs.stringify(body),
+          {
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+              Accept: "application/json",
+            },
+          }
+        );
+        console.log(response);
+        localStorage.setItem("access_token", response.data.access_token);
+
+        await createWebSocketConnection(name, setIsLoading); // Socket Connection 생성
+      } catch (error) {
+        console.log(error);
+      } finally {
+        setIsLoading(false); // 소켓 연결 실패했을 때에도
+      }
+    }
   };
   return (
     <BgBox width="250px" height="300px" color="white">

client/src/pages/MobileGameResultScreen.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import ResultBoard from "../components/gameroom/ResultBoard";
 import Button from "../components/common/Button";
 import styled from "styled-components";
-import HTTP from "../utils/HTTP";
+
 import { useParams } from "react-router-dom";
 import { useNavigate, useLocation } from "react-router-dom";
 import { getUserId } from "../utils/User";
@@ -14,7 +14,7 @@ import { LanguageContext } from "../utils/LanguageProvider";
 import { Medium } from "../styles/font";
 import { useMediaQuery } from "react-responsive";
 import SizedBox from "../components/common/SizedBox";
-import { RESULT_TIME } from "../Config";
+import { RESULT_TIME } from "../Constants";
 import useInterval from "../utils/useInterval";
 
 export default function MobileGameResultScreen() {