[feat] boostcampwm-2022#66 현재 통화 중인 친구 목록 분리하여 렌더링

- 전역 정보 중, isCalling 값으로 분리하여 렌더링
ktmihs · Nov 30, 2022 · c2e8ba7 · c2e8ba7
1 parent c516aca
commit c2e8ba7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 48 deletions.
diff --git a/frontend/src/component/Sidebar/Friends/callingList.tsx b/frontend/src/component/Sidebar/Friends/callingList.tsx
@@ -1,22 +1,33 @@
 import { MouseEvent } from 'react';
+import { useRecoilValue } from 'recoil';
+import { friendsState } from '../../../store/atom/friends';
 import Content from '../Content';
+import FriendItem from './friendItem';
+import { friendType } from './friends';
 import { callingList } from './friends.styled';
 
 const CallingList = () => {
+  const friends = useRecoilValue(friendsState);
+  const friendList = Object.values(friends).filter(value => value.isCalling);
+
   const handleDragOver = (e: MouseEvent) => {
     // dragenter 이벤트와 동작이 겹칠수 있기 때문에 e.preventDefault() 로 제한하며 둘이 결합하여 사용함
     e.preventDefault();
 
     const target = e.target as HTMLElement;
-
     const draggingElement = document.querySelector('.dragging');
-    draggingElement && target.appendChild(draggingElement);
+
+    if (target.tagName !== 'UL' || !draggingElement) return;
+
+    target.appendChild(draggingElement);
   };
 
   return (
     <Content>
       <h2 className="srOnly">전화연결 목록</h2>
-      <ul css={callingList} onDragOver={handleDragOver}></ul>
+      <ul css={callingList} onDragOver={handleDragOver}>
+        {friendList.map((friend: friendType) => FriendItem(friend))}
+      </ul>
     </Content>
   );
 };

diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
@@ -17,7 +17,7 @@ const FriendItem = (data: friendType) => {
 
   return (
     <Content draggable={isOnline} key={id}>
-      <section css={friendItemWrapper(isOnline)}>
+      <section id={id} css={friendItemWrapper(isOnline)}>
         <div css={userName(isOnline)}>{name}</div>
         <div>
           <img src={message} alt="채팅하기" onClick={sendChatting}></img>

diff --git a/frontend/src/component/Sidebar/Friends/friendList.tsx b/frontend/src/component/Sidebar/Friends/friendList.tsx
@@ -1,51 +1,10 @@
 import { MouseEvent } from 'react';
+import { useRecoilValue } from 'recoil';
 import Content from '../Content';
 import FriendItem from './friendItem';
 import { friendType } from './friends';
 import { findFriend, friendListWrapper } from './friends.styled';
-
-const data = [
-  {
-    id: '1',
-    isOnline: false,
-    name: '안현서',
-  },
-  {
-    id: '2',
-    isOnline: true,
-    name: '원종빈',
-  },
-  {
-    id: '3',
-    isOnline: true,
-    name: '강성준',
-  },
-  {
-    id: '4',
-    isOnline: true,
-    name: '이형진',
-  },
-  {
-    id: '5',
-    isOnline: false,
-    name: '안현서',
-  },
-  {
-    id: '6',
-    isOnline: false,
-    name: '원종빈',
-  },
-  {
-    id: '7',
-    isOnline: true,
-    name: '강성준',
-  },
-  {
-    id: '8',
-    isOnline: true,
-    name: '이형진',
-  },
-];
+import { friendsState } from '../../../store/atom/friends';
 
 const FriendList = () => {
   const handleDrag = (e: MouseEvent) => {
@@ -54,14 +13,17 @@ const FriendList = () => {
     target.classList.toggle('dragging');
   };
 
+  const friends = useRecoilValue(friendsState);
+  const friendList = Object.values(friends).filter(value => !value.isCalling);
+
   return (
     <Content>
       <h2 className="srOnly">친구 목록</h2>
       <ul
         css={friendListWrapper}
         onDragStart={handleDrag}
         onDragEnd={handleDrag}>
-        {data.map((friend: friendType) => FriendItem(friend))}
+        {friendList.map((friend: friendType) => FriendItem(friend))}
       </ul>
       <div css={findFriend}>
         <input type="text" placeholder="추가할 친구 이름" />