From c684751021bd2490e7f8428401d262043d591773 Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Fri, 9 Dec 2022 00:23:50 +0900
Subject: [PATCH] =?UTF-8?q?[refactor]=20#66=20#85=20=EB=8B=89=EB=84=A4?=
 =?UTF-8?q?=EC=9E=84=20=EB=B0=94=EA=BE=BC=20=EC=B9=9C=EA=B5=AC=20=EC=A1=B4?=
 =?UTF-8?q?=EC=9E=AC=20=EC=8B=9C,=20=EC=A0=84=EC=97=AD=20=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=EC=97=90=20=EB=B0=98=EC=98=81=ED=95=B4=EC=A3=BC?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전역 key를 nickname에서 id로 변경
- 해당되는 id를 찾아 nickname 변경해주기
---
 .../component/Sidebar/Friends/friendItem.tsx  |  2 +-
 .../component/Sidebar/Friends/friendList.tsx  | 20 +++++++++++++++++--
 .../src/component/Sidebar/Friends/search.tsx  |  2 +-
 frontend/src/guard.tsx                        |  3 ++-
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
index e3f4113..3b2a179 100644
--- a/frontend/src/component/Sidebar/Friends/friendItem.tsx
+++ b/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}님을 언팔로우 하였습니다.`);
diff --git a/frontend/src/component/Sidebar/Friends/friendList.tsx b/frontend/src/component/Sidebar/Friends/friendList.tsx
index 47da1ac..87b8c04 100644
--- a/frontend/src/component/Sidebar/Friends/friendList.tsx
+++ b/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;
diff --git a/frontend/src/component/Sidebar/Friends/search.tsx b/frontend/src/component/Sidebar/Friends/search.tsx
index 76c353b..f747154 100644
--- a/frontend/src/component/Sidebar/Friends/search.tsx
+++ b/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,
diff --git a/frontend/src/guard.tsx b/frontend/src/guard.tsx
index bdcd49e..7ef6359 100644
--- a/frontend/src/guard.tsx
+++ b/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);
       }