phaser refactoring

frontend/src/component/Call/callingItem.tsx

@@ -19,7 +19,7 @@ const CallingItem = ({
   const [friends, setFriends] = useRecoilState(friendsState);
 
   const handleRejectCall = () => {
-    friends.id &&
+    friends[id] &&
       setFriends({
         ...friends,
         [id]: {

frontend/src/component/Call/index.tsx

@@ -28,13 +28,18 @@ const Call = () => {
   return (
     <div css={callingWrapper}>
       {friendList.map(friend => (
-        <CallingItem id={friend.id} nickname={friend.nickname} isSend={false} />
+        <CallingItem
+          key={friend.id}
+          id={friend.id}
+          nickname={friend.nickname}
+          isSend={true}
+        />
       ))}
       {isSend.id && (
         <CallingItem
           id={isSend.id}
           nickname={isSend.nickname}
-          isSend={true}
+          isSend={false}
           setSend={setSend}
         />
       )}

frontend/src/component/Game/game.ts

@@ -98,6 +98,8 @@ export default class Game extends Phaser.Scene {
   }
 
   create() {
+    this.cameras.main.setBounds(0, 0, 2000, 2000);
+
     const map = this.make.tilemap({ key: 'map' });
     const tileset = map.addTilesetImage('town', 'tileset');
     this.townLayer = map.createLayer('town', tileset, 0, 0).setScale(2.5);

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

@@ -37,7 +37,7 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
 
         const newFriend = { ...friends };
 
-        delete newFriend[nickname];
+        delete newFriend[id];
         setFriends(newFriend);
 
         alert(`${nickname}님을 언팔로우 하였습니다.`);
@@ -50,7 +50,7 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
   return (
     <Content draggable={isOnline}>
       <section id={id} css={friendItemWrapper(isOnline)}>
-        <div css={userName(isOnline)}>{nickname}</div>
+        <div css={userName(status)}>{nickname}</div>
         <div>
           <button onClick={sendChatting}>
             <img src={message} alt="채팅하기 버튼"></img>

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

@@ -1,15 +1,31 @@
 import { MouseEvent } from 'react';
-import { useRecoilValue } from 'recoil';
+import { useRecoilState, useRecoilValue } from 'recoil';
 import Content from '../Content';
 import FriendItem from './friendItem';
 import { friendType } from './friends';
 import { friendListWrapper } from './friends.styled';
 import { friendsState } from '../../../store/atom/friends';
 import Search from './search';
+import { socketState } from '../../../store/atom/socket';
 
 const FriendList = () => {
-  const friends = useRecoilValue(friendsState);
+  const [friends, setFriends] = useRecoilState(friendsState);
   const friendList = Object.values(friends).filter(value => !value.isCalling);
+  const socket = useRecoilValue(socketState);
+
+  socket.on('userDataChanged', data => {
+    const { id, nickname } = data;
+
+    if (!friends[id]) return;
+
+    const newFriends = { ...friends };
+    newFriends[id] = {
+      ...newFriends[id],
+      nickname: nickname,
+    };
+
+    setFriends(newFriends);
+  });
 
   const handleDrag = (e: MouseEvent) => {
     const target = e.target as HTMLElement;

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

@@ -67,7 +67,7 @@ export const friendItemWrapper = (isOnline: boolean) => css`
   }
 `;
 
-export const userName = (state: boolean) => css`
+export const userName = (state: string) => css`
   font-weight: 700;
 
   ::before {
@@ -76,7 +76,11 @@ export const userName = (state: boolean) => css`
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: ${state ? theme.green : theme.red};
+    background-color: ${state === 'online'
+      ? theme.green
+      : state === 'offline'
+      ? theme.red
+      : theme.yellow};
   }
 `;
 

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

@@ -32,7 +32,7 @@ const Search = () => {
 
         setFriends({
           ...friends,
-          id: {
+          [data.userId]: {
             id: data.userId,
             status: 'offline',
             nickname: data.nickname,

frontend/src/global.ts

@@ -10,7 +10,7 @@ export const global = css`
   *::after,
   *::before {
     box-sizing: border-box;
-    font-family: 'NanumSquareRound';
+    font-family: 'NanumSquareRound', 'nanum';
   }
 
   body {

frontend/src/guard.tsx

@@ -27,7 +27,7 @@ export const routerGuard = () => {
 
         friendList.forEach(
           ({ userId, nickname }: { userId: string; nickname: string }) => {
-            initialList[nickname] = {
+            initialList[userId] = {
               id: userId,
               status: 'offline',
               nickname: nickname,
@@ -37,6 +37,7 @@ export const routerGuard = () => {
         );
 
         setFriends(initialList);
+        console.log(initialList);
       } catch (e) {
         console.log(e);
       }