Fire 311 fe be에 user 정보 요청 보내기

src/components/login/UserInput.tsx

@@ -1,12 +1,19 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+import { useMutation } from 'react-query';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import UserStore from '../../stores/userStore';
 import Avater from './Avater';
 import Nickname from './Nickname';
 
+interface UserType {
+  uid: string;
+  nickname: string;
+  avatar: string;
+}
+
 let type: string;
 
 export default function UserInput({
@@ -32,44 +39,38 @@ export default function UserInput({
       setUid(newUID);
       localStorage.setItem('uid', newUID);
       type = 'post';
-    } else {
-      type = 'put';
-    }
+    } else type = 'put';
   }, []);
 
-  const sendData = async () => {
+  const userRequest = async (newUser: UserType) => {
     const API_URL: string = process.env
       .REACT_APP_SEND_USER_INFORMATION_URL as string;
-    await axios({
+    const { data } = await axios({
       method: type,
       url: API_URL,
-      data: {
-        uid,
-        nickname: newNickname,
-        avatar: newAvatar,
-      },
-    })
-      .then((res) => {
-        console.log(res.data);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
+      data: newUser,
+    });
+    return data;
   };
 
+  const { mutate } = useMutation(userRequest, {
+    onSuccess: () => {
+      modalHandler();
+      navigate('/main');
+    },
+  });
+
   const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (newNickname === null) {
       return false;
     }
-    // socket connection
     setNickname(newNickname);
     setAvatar(newAvatar);
     localStorage.setItem('nickname', newNickname);
     localStorage.setItem('avatar', newAvatar);
-    sendData();
-    modalHandler();
-    navigate(`/main`);
+    mutate({ uid, nickname: newNickname, avatar: newAvatar });
+
     return true;
   };
 

src/components/rtc/components/PeerConnectionSession.ts

@@ -152,6 +152,6 @@ class PeerConnectionSession {
 
 export const createPeerConnectionContext = () => {
   const socket = io(process.env.REACT_APP_SOCKET_URL as string);
-  console.log(socket);
+  console.log('socket: ', socket);
   return new PeerConnectionSession(socket);
 };

src/components/rtc/hooks/useCreateMediaStream.ts

@@ -5,30 +5,27 @@ export const useCreateMediaStream = (
   localVideoRef: RefObject<HTMLVideoElement>,
 ) => {
   const [userMediaStream, setUserMediaStream] = useState<MediaStream>();
+  useEffect(() => {
+    createMediaStream();
+  }, [localVideoRef]);
+
   /**
    * @stream getUserMedia - webCam
    * @stream getDisplayMedia - screen
    */
-  useEffect(() => {
-    const createMediaStream = async () => {
-      let stream: MediaStream = null;
-      try {
-        stream = await navigator.mediaDevices.getDisplayMedia({
-          video: true,
-          audio: true,
-        });
-      } catch (e) {
-        console.log('cannot get display');
-      }
-
-      if (localVideoRef.current) {
-        localVideoRef.current.srcObject = stream;
-      }
-
+  const createMediaStream = async () => {
+    console.log('Requesting local stream');
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: true,
+        audio: true,
+      });
+      localVideoRef.current.srcObject = stream;
       setUserMediaStream(stream);
-    };
-    createMediaStream();
-  }, [localVideoRef]);
+    } catch (e) {
+      console.log('cannot get display');
+    }
+  };
 
   return userMediaStream;
 };