[refactor] boostcampwm-2022#66 boostcampwm-2022#85 닉네임 바꾼 친구 존재 시, 전역…

… 변수에 반영해주기

- 전역 key를 nickname에서 id로 변경
- 해당되는 id를 찾아 nickname 변경해주기

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}님을 언팔로우 하였습니다.`);

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/search.tsx

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

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);
       }