From c2e8ba77c8528412198a2187723ede01ecdefd8a Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Wed, 30 Nov 2022 19:12:16 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20#66=20=ED=98=84=EC=9E=AC=20=ED=86=B5?=
 =?UTF-8?q?=ED=99=94=20=EC=A4=91=EC=9D=B8=20=EC=B9=9C=EA=B5=AC=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B6=84=EB=A6=AC=ED=95=98=EC=97=AC=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전역 정보 중, isCalling 값으로 분리하여 렌더링
---
 .../component/Sidebar/Friends/callingList.tsx | 17 +++++--
 .../component/Sidebar/Friends/friendItem.tsx  |  2 +-
 .../component/Sidebar/Friends/friendList.tsx  | 50 +++----------------
 3 files changed, 21 insertions(+), 48 deletions(-)

diff --git a/frontend/src/component/Sidebar/Friends/callingList.tsx b/frontend/src/component/Sidebar/Friends/callingList.tsx
index c204b83..c7242c1 100644
--- 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
index 0d58972..81a70ea 100644
--- 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
index baadd74..a2d224d 100644
--- 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,6 +13,9 @@ 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>
@@ -61,7 +23,7 @@ const FriendList = () => {
         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="추가할 친구 이름" />