feat : join validation

salt26 · May 8, 2023 · 8388148 · salt26 · May 8, 2023 · flowersayo
1 parent 810e43c
commit 8388148
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 112 deletions.
diff --git a/client/src/pages/LandingPage.js b/client/src/pages/LandingPage.js
@@ -49,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;
@@ -60,35 +61,39 @@ function LoginBox() {
       return;
     }
 
-    var body = {
-      grant_type: "",
-      username: "rpsbro",
-      password: "rpsDance",
-      scope: "",
-      client_id: "",
-      client_secret: "",
-    };
+    if (!isLoading) {
+      setIsLoading(true);
+      console.log("요청!");
+      var body = {
+        grant_type: "",
+        username: "rpsbro",
+        password: "rpsDance",
+        scope: "",
+        client_id: "",
+        client_secret: "",
+      };
 
-    axios
-      .post(
-        `${BASE_SERVER_URL}/token`,
-        /*json을 queryString 타입의 text로 변환*/
-        qs.stringify(body),
-        {
-          headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-            Accept: "application/json",
-          },
-        }
-      )
-      .then(function (response) {
+      try {
+        /*비동기 요청*/
+        const response = await axios.post(
+          `${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);
-        createWebSocketConnection(name); // Socket Connection 생성
-      })
-      .catch(function (error) {
+
+        await createWebSocketConnection(name, setIsLoading); // Socket Connection 생성
+      } catch (error) {
         console.log(error);
-      });
+      } finally {
+      }
+    }
   };
   return (
     <BgBox width="250px" height="300px" color="white">
@@ -130,6 +135,7 @@ function LoginBox() {
           height="40px"
           text={Language[mode].join}
           onClick={_joinGame}
+          disabled={isLoading}
         />
       </Col>
     </BgBox>

diff --git a/client/src/pages/MobileLandingScreen.js b/client/src/pages/MobileLandingScreen.js
@@ -115,8 +115,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;
@@ -125,35 +126,40 @@ function LoginBox() {
       alert(Language[mode].name_long);
       return;
     }
-    var body = {
-      grant_type: "",
-      username: "rpsbro",
-      password: "rpsDance",
-      scope: "",
-      client_id: "",
-      client_secret: "",
-    };
-
-    axios
-      .post(
-        `${BASE_SERVER_URL}/token`,
-        /*json을 queryString 타입의 text로 변환*/
-        qs.stringify(body),
-        {
-          headers: {
-            "Content-Type": "application/x-www-form-urlencoded",
-            Accept: "application/json",
-          },
-        }
-      )
-      .then(function (response) {
+    if (!isLoading) {
+      setIsLoading(true);
+      console.log("요청!");
+      var body = {
+        grant_type: "",
+        username: "rpsbro",
+        password: "rpsDance",
+        scope: "",
+        client_id: "",
+        client_secret: "",
+      };
+
+      try {
+        /*비동기 요청*/
+        const response = await axios.post(
+          `${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);
-        createWebSocketConnection(name); // Socket Connection 생성
-      })
-      .catch(function (error) {
+
+        await createWebSocketConnection(name, setIsLoading); // Socket Connection 생성
+      } catch (error) {
         console.log(error);
-      });
+      } finally {
+        setIsLoading(false);
+      }
+    }
   };
   return (
     <BgBox width="80%" height="30vh" color="white">

diff --git a/client/src/pages/RoomListPage.js b/client/src/pages/RoomListPage.js
@@ -22,7 +22,6 @@ function RoomListPage() {
       };
       ws.send(JSON.stringify(request));
       console.log(request);
-      navigate("/");
     }
   };
   useEffect(

diff --git a/client/src/utils/WebSocketProvider.js b/client/src/utils/WebSocketProvider.js
@@ -7,6 +7,7 @@ import { Language } from "../db/Language";
 import { LanguageContext } from "./LanguageProvider";
 import { useContext } from "react";
 import { BASE_WEBSOCKET_URL } from "../Config";
+
 export const WebsocketContext = createContext([
   () => {},
   false,
@@ -29,64 +30,81 @@ export const WebsocketProvider = ({ children }) => {
   const ws = useRef(null);
   // 웹소켓 연결
 
-  function createWebSocketConnection(name) {
-    const token = localStorage.getItem("access_token");
-
-    console.log(token);
-    const socket = new WebSocket(
-      `${BASE_WEBSOCKET_URL}/signin?name=${name}&token=${token}`
-    );
-
-    socket.onopen = (event) => {
-      console.log("Socket open", event);
-      setIsReady(true);
-    };
-
-    socket.onclose = (event) => {
-      console.log("onclose!", event);
-
-      // 방목록에서 <- 버튼 눌렀을때는 제외하구
-
-      alert(Language[mode].reconnection_request);
-      setIsReady(false);
-      navigate("/");
-    };
-
-    socket.onmessage = function (event) {
-      const res = JSON.parse(event.data);
-      // 전달된 json string을 object로 변환
-      console.log("onmessage", res.type, res);
-      console.log(res);
-      if (res?.response === "error") {
-        alert(res.message);
-        return;
-      }
-
-      switch (res?.type) {
-        case "profile_and_room_list":
-          const { data } = res;
-
-          setUserName(data.name);
-
-          setUserId(data.person_id);
-          setIsLogin(true);
-          navigate(`/rooms`, { state: data.rooms });
-          break;
-        case "recon_data": //재접속시
-          setUserName(res.data.name);
-
-          setUserId(res.data.person_id);
-          // 재접속 분기
-          if (res.response === "reconnected_game") {
-            navigate(`/rooms/${res.data.room.id}/game`, { state: res.data });
-          }
-
-          if (res.response === "reconnected_result") {
-            navigate(`/rooms/${res.data.room.id}/result`, { state: res.data });
-          }
-      }
-    };
-    ws.current = socket;
+  function createWebSocketConnection(name, setIsLoading) {
+    return new Promise((resolve, reject) => {
+      const token = localStorage.getItem("access_token");
+
+      console.log(token);
+
+      const socket = new WebSocket(
+        `${BASE_WEBSOCKET_URL}/signin?name=${name}&token=${token}`
+      );
+
+      socket.onopen = (event) => {
+        console.log("Socket open", event);
+        setIsReady(true);
+        resolve(socket);
+      };
+
+      socket.onclose = (event) => {
+        console.log("onclose!", event);
+        const currentPath = window.location.href.replace(
+          window.location.origin,
+          ""
+        );
+        console.log("경로명", currentPath);
+        // 방목록에서 <- 버튼 눌렀을때는 제외하구
+
+        if (currentPath === "/rooms") {
+          navigate("/");
+          return;
+        }
+
+        alert(Language[mode].reconnection_request);
+        setIsReady(false);
+        navigate("/");
+        reject();
+      };
+
+      socket.onmessage = function (event) {
+        const res = JSON.parse(event.data);
+        // 전달된 json string을 object로 변환
+        console.log("onmessage", res.type, res);
+        console.log(res);
+        if (res?.response === "error") {
+          alert(res.message);
+          return;
+        }
+
+        switch (res?.type) {
+          case "profile_and_room_list":
+            const { data } = res;
+
+            setUserName(data.name);
+
+            setUserId(data.person_id);
+            setIsLogin(true);
+            navigate(`/rooms`, { state: data.rooms });
+            break;
+          case "recon_data": //재접속시
+            setIsLoading(false);
+            setUserName(res.data.name);
+
+            setUserId(res.data.person_id);
+            // 재접속 분기
+            if (res.response === "reconnected_game") {
+              navigate(`/rooms/${res.data.room.id}/game`, { state: res.data });
+            }
+
+            if (res.response === "reconnected_result") {
+              navigate(`/rooms/${res.data.room.id}/result`, {
+                state: res.data,
+              });
+            }
+        }
+      };
+      ws.current = socket;
+    });
   }
 
   const ret = [createWebSocketConnection, isReady, ws.current];