From 1cf04df78c33522dcd2177006863df9fbb8d0a97 Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Sun, 4 Dec 2022 17:03:39 +0900
Subject: [PATCH] =?UTF-8?q?[fix]=20#85=20friendlist=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 함수로 잘못 불렀던 로직 수정
- friendlist 내부 id 추가
---
 .../component/Sidebar/Friends/callingList.tsx  |  4 +++-
 .../component/Sidebar/Friends/friendList.tsx   |  4 +++-
 .../src/component/Sidebar/Friends/friends.ts   |  3 ++-
 frontend/src/guard.tsx                         | 18 +++++++++++-------
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/Sidebar/Friends/callingList.tsx b/frontend/src/component/Sidebar/Friends/callingList.tsx
index f30f1ba..bbeb57a 100644
--- a/frontend/src/component/Sidebar/Friends/callingList.tsx
+++ b/frontend/src/component/Sidebar/Friends/callingList.tsx
@@ -34,7 +34,9 @@ const CallingList = () => {
     <Content>
       <h2 className="srOnly">전화연결 목록</h2>
       <ul css={callingList} onDragOver={handleDragOver}>
-        {friendList.map((friend: friendType) => FriendItem(friend))}
+        {friendList.map((friend: friendType) => (
+          <FriendItem friend={friend} key={friend.id} />
+        ))}
       </ul>
     </Content>
   );
diff --git a/frontend/src/component/Sidebar/Friends/friendList.tsx b/frontend/src/component/Sidebar/Friends/friendList.tsx
index 9f8f74e..47da1ac 100644
--- a/frontend/src/component/Sidebar/Friends/friendList.tsx
+++ b/frontend/src/component/Sidebar/Friends/friendList.tsx
@@ -25,7 +25,9 @@ const FriendList = () => {
         onDragStart={handleDrag}
         onDragEnd={handleDrag}>
         {friendList.length ? (
-          friendList.map((friend: friendType) => FriendItem(friend))
+          friendList.map((friend: friendType) => (
+            <FriendItem friend={friend} key={friend.id} />
+          ))
         ) : (
           <div>
             친구를 추가하고 <br />
diff --git a/frontend/src/component/Sidebar/Friends/friends.ts b/frontend/src/component/Sidebar/Friends/friends.ts
index ba3fb90..85e07a5 100644
--- a/frontend/src/component/Sidebar/Friends/friends.ts
+++ b/frontend/src/component/Sidebar/Friends/friends.ts
@@ -1,5 +1,6 @@
 export type friendType = {
+  id: string;
   isCalling: boolean;
   isOnline: boolean;
-  name: string;
+  nickname: string;
 };
diff --git a/frontend/src/guard.tsx b/frontend/src/guard.tsx
index 90a035e..926048c 100644
--- a/frontend/src/guard.tsx
+++ b/frontend/src/guard.tsx
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
 
 type friendList = {
+  userId: string;
   nickname: string;
   characterName: string;
 };
@@ -24,13 +25,16 @@ export const routerGuard = () => {
         const friendList: friendList[] = data;
         const initialList: friendsProps = {};
 
-        friendList.forEach(({ nickname }: { nickname: string }) => {
-          initialList[nickname] = {
-            isOnline: false,
-            name: nickname,
-            isCalling: false,
-          };
-        });
+        friendList.forEach(
+          ({ userId, nickname }: { userId: string; nickname: string }) => {
+            initialList[nickname] = {
+              id: userId,
+              isOnline: false,
+              nickname: nickname,
+              isCalling: false,
+            };
+          }
+        );
 
         setFriends(initialList);
       } catch (e) {