[fix] boostcampwm-2022#85 friendlist 수정 및 컴포넌트 호출 수정

- 함수로 잘못 불렀던 로직 수정 - friendlist 내부 id 추가
ktmihs · Dec 4, 2022 · 1cf04df · 1cf04df
1 parent a862da5
commit 1cf04df
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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) {