Merge pull request #182 from ktmihs/develop

통화 socket 연결

frontend/src/Router.tsx

@@ -3,18 +3,20 @@ import Town from './page/Town';
 import Main from './page/Main';
 import Signin from './page/Signin';
 import Signup from './page/Signup';
-import { routerGuard } from './guard';
+import { useRouterGuard } from './guard';
 
 const Router = () => {
-  routerGuard();
+  const ready = useRouterGuard();
 
   return (
-    <Routes>
-      <Route index element={<Main />} />
-      <Route path="/signin" element={<Signin />} />
-      <Route path="/signup" element={<Signup />} />
-      <Route path="/town" element={<Town />} />
-    </Routes>
+    ready && (
+      <Routes>
+        <Route index element={<Main />} />
+        <Route path="/signin" element={<Signin />} />
+        <Route path="/signup" element={<Signup />} />
+        <Route path="/town" element={<Town />} />
+      </Routes>
+    )
   );
 };
 

frontend/src/component/Call/callingItem.tsx

@@ -1,6 +1,8 @@
 import { Dispatch, SetStateAction } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { callingListState } from '../../store/atom/callingList';
 import { friendsState } from '../../store/atom/friends';
+import { socketState } from '../../store/atom/socket';
 import { callingItem } from './call.styled';
 
 type callingItemType = {
@@ -17,36 +19,49 @@ const CallingItem = ({
   setSend = undefined,
 }: callingItemType) => {
   const [friends, setFriends] = useRecoilState(friendsState);
+  const [callingList, setCallingList] = useRecoilState(callingListState);
+  const socket = useRecoilValue(socketState);
 
   const handleRejectCall = () => {
     friends[id] &&
       setFriends({
         ...friends,
         [id]: {
           ...friends[id],
-          status: 'online',
+          status: 'on',
           isCalling: false,
         },
       });
 
+    delete callingList.list[id];
+
     setSend &&
       setSend({
         id: '',
         nickname: '',
       });
-    // socket: 해당 친구 online으로 변경
+
+    if (isSend) {
+      console.log('통화 취소하기!!!!');
+      socket.emit('callCanceled', {
+        calleeUserId: id,
+      });
+    } else {
+      console.log('통화 거절하기!!!!');
+      socket.emit('callRejected', {
+        callerUserId: id,
+      });
+    }
+
+    socket.emit('callLeaved');
   };
 
   const handleAcceptCall = () => {
-    // 해당 webRTC 연결 및 연결 중은 false로 변경
-    friends.id &&
-      setFriends({
-        ...friends,
-        [id]: {
-          ...friends[id],
-          isCalling: false,
-        },
-      });
+    socket.emit('callEntered', {
+      callerUserId: id,
+    });
+
+    // webRTC 연결
   };
 
   return (

frontend/src/component/Call/index.tsx

@@ -1,28 +1,87 @@
-import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useEffect, useState } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import { friendsState } from '../../store/atom/friends';
+import { socketState } from '../../store/atom/socket';
 import { callingWrapper } from './call.styled';
 import CallingItem from './callingItem';
 
 const Call = () => {
-  const friends = useRecoilValue(friendsState);
-  const friendList = Object.values(friends).filter(value => value.isCalling);
+  const [friends, setFriends] = useRecoilState(friendsState);
+  const socket = useRecoilValue(socketState);
+  let friendList = Object.values(friends).filter(value => value.isCalling);
 
   const [isSend, setSend] = useState({
     id: '',
     nickname: '',
   });
 
-  /* 소켓으로 나에게 통화가 오는 것을 감지해서
-  해당 유저 id, nickname 받아오기
-  해당 유저의 정보를 isSend에 넣어주기
-  
-  setSend({
-    id: ;
-    nickname: ;
-  })
-  
-  */
+  useEffect(() => {
+    // 해당 id의 유저로부터 전화 걸려옴
+    socket.on('callRequested', data => {
+      const { callerUserId: id, callerNickname: nickname } = data;
+
+      friends[id] &&
+        setFriends({
+          ...friends,
+          [id]: {
+            ...friends[id],
+            status: 'busy',
+            isCalling: false,
+          },
+        });
+
+      setSend({
+        id: id,
+        nickname: nickname,
+      });
+    });
+  }, [isSend]);
+
+  useEffect(() => {
+    socket.on('callCanceled', data => {
+      console.log('통화취소당함!!!');
+      const { callerUserId: id } = data;
+
+      friends[id] &&
+        setFriends({
+          ...friends,
+          [id]: {
+            ...friends[id],
+            status: 'on',
+            isCalling: false,
+          },
+        });
+
+      setSend({
+        id: '',
+        nickname: '',
+      });
+    });
+
+    // 거절이 안 됨
+    socket.on('callDenied', data => {
+      console.log('통화거절당함!!!');
+      const { calleeUserId: id, calleeNickname: nickname } = data;
+
+      friends[id] &&
+        setFriends({
+          ...friends,
+          [id]: {
+            ...friends[id],
+            status: 'on',
+            isCalling: false,
+          },
+        });
+
+      alert(`${nickname}님이 통화를 거절하셨습니다.`);
+    });
+
+    socket.on('callEntered', data => {
+      const { calleeUserId: id } = data;
+
+      console.log(`${id}님이 통화를 수락하셨습니다.`);
+    });
+  }, []);
 
   // 연결 수락이나 끊기 눌렀을 때, 통화 창 안 보이도록 해주기
   return (

frontend/src/component/Sidebar/Friends/callingList.tsx

@@ -1,14 +1,54 @@
 import { MouseEvent } from 'react';
-import { useRecoilState } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { callingListState } from '../../../store/atom/callingList';
 import { friendsState } from '../../../store/atom/friends';
 import Content from '../Content';
-import FriendItem from './friendItem';
-import { friendType } from './friends';
 import { callingList } from './friends.styled';
+import UserItem from './userItem';
+import { v1 } from 'uuid';
+import { socketState } from '../../../store/atom/socket';
+import { userState } from '../../../store/atom/user';
 
 const CallingList = () => {
+  const [callingfriendList, setCallingList] = useRecoilState(callingListState);
   const [friends, setFriends] = useRecoilState(friendsState);
-  const friendList = Object.values(friends).filter(value => value.isCalling);
+  const myValue = useRecoilValue(userState);
+
+  const socket = useRecoilValue(socketState);
+
+  const friendList = Object.values(callingfriendList.list);
+
+  // callingRoom의 멤버가 바뀔 때마다 갱신
+  socket.on('callingRoomUserStateChanged', data => {
+    const { callingRoomUserData } = data;
+
+    const tempList: any = {};
+    callingRoomUserData.forEach((user: { [key: string]: string }) => {
+      if (user.id === myValue.id) return;
+
+      tempList[user.id] = {
+        id: user.id,
+        nickname: user.nickname,
+        status: user.userState,
+      };
+    });
+
+    const len = Object.values(tempList).length;
+    if (len) {
+      setCallingList({
+        ...callingfriendList,
+        list: tempList,
+      });
+    } else {
+      setCallingList({
+        id: '',
+        list: {},
+      });
+
+      // 아무도 없으면 방 터뜨리기
+      socket.emit('callLeaved');
+    }
+  });
 
   const handleDragOver = (e: MouseEvent) => {
     // dragenter 이벤트와 동작이 겹칠수 있기 때문에 e.preventDefault() 로 제한하며 둘이 결합하여 사용함
@@ -30,15 +70,34 @@ const CallingList = () => {
       },
     });
 
-    // socket: 해당 친구 busy로 변경
+    const callingRoomId = callingfriendList.id || v1();
+    setCallingList({
+      id: callingRoomId,
+      list: {
+        ...callingfriendList.list,
+        [id]: {
+          id: id,
+          nickname: friends[id].nickname,
+          status: 'busy',
+        },
+      },
+    });
+
+    console.log(callingfriendList);
+
+    // 해당 id의 유저에게 통화 요청
+    socket.emit('callRequested', {
+      calleeUserId: id,
+      callingRoom: callingRoomId,
+    });
   };
 
   return (
     <Content>
       <h2 className="srOnly">전화연결 목록</h2>
       <ul css={callingList} onDragOver={handleDragOver}>
-        {friendList.map((friend: friendType) => (
-          <FriendItem friend={friend} key={friend.id} />
+        {friendList.map(friend => (
+          <UserItem friend={friend} key={friend.id} />
         ))}
       </ul>
     </Content>

frontend/src/component/Sidebar/Friends/friendItem.tsx

@@ -9,15 +9,15 @@ import { friendsState } from '../../../store/atom/friends';
 import { sidebarState } from '../../../store/atom/sidebar';
 import { chattingState } from '../../../store/atom/chatting';
 import { socketState } from '../../../store/atom/socket';
+import UserItem from './userItem';
 
 const FriendItem = ({ friend }: { friend: friendType }) => {
   const socket = useRecoilValue(socketState);
   const [friends, setFriends] = useRecoilState(friendsState);
   const setChatTarget = useSetRecoilState(chattingState);
   const setCurrentTab = useSetRecoilState(sidebarState);
 
-  const { id, status, isCalling, nickname } = friend;
-  const isOnline = status === 'online';
+  const { id, nickname } = friend;
 
   const sendChatting = () => {
     socket.emit('chatRoomEntered', { targetUserId: id });
@@ -48,20 +48,16 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
   };
 
   return (
-    <Content draggable={isOnline}>
-      <section id={id} css={friendItemWrapper(isOnline)}>
-        <div css={userName(status)}>{nickname}</div>
-        <div>
-          <button onClick={sendChatting}>
-            <img src={message} alt="채팅하기 버튼"></img>
-          </button>
-          <button onClick={unfollowing}>
-            <img src={unfollow} alt="친구 끊기 버튼"></img>
-          </button>
-          {isCalling && <div></div>}
-        </div>
-      </section>
-    </Content>
+    <UserItem friend={friend}>
+      <div>
+        <button onClick={sendChatting}>
+          <img src={message} alt="채팅하기 버튼"></img>
+        </button>
+        <button onClick={unfollowing}>
+          <img src={unfollow} alt="친구 끊기 버튼"></img>
+        </button>
+      </div>
+    </UserItem>
   );
 };
 

frontend/src/component/Sidebar/Friends/friendList.tsx

@@ -10,7 +10,7 @@ import { socketState } from '../../../store/atom/socket';
 
 const FriendList = () => {
   const [friends, setFriends] = useRecoilState(friendsState);
-  const friendList = Object.values(friends).filter(value => !value.isCalling);
+  const friendList = Object.values(friends).filter(value => true);
   const socket = useRecoilValue(socketState);
 
   socket.on('userDataChanged', data => {

frontend/src/component/Sidebar/Friends/friends.styled.ts

@@ -76,9 +76,9 @@ export const userName = (state: string) => css`
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: ${state === 'online'
+    background-color: ${state === 'on'
       ? theme.green
-      : state === 'offline'
+      : state === 'off'
       ? theme.red
       : theme.yellow};
   }

frontend/src/component/Sidebar/Friends/friends.ts

@@ -1,6 +1,6 @@
 export type friendType = {
   id: string;
-  isCalling: boolean;
+  isCalling?: boolean;
   status: string;
   nickname: string;
 };

frontend/src/component/Sidebar/Friends/search.tsx

@@ -34,7 +34,7 @@ const Search = () => {
           ...friends,
           [data.userId]: {
             id: data.userId,
-            status: 'offline',
+            status: 'off',
             nickname: data.nickname,
             isCalling: false,
           },