친구 목록 drag & drop 구현

frontend/src/component/Sidebar/Content/content.styled.ts

@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
 
-export const container = (isexpand: boolean) => css`
+export const container = (draggable: boolean, isexpand: boolean) => css`
   width: 100%;
   ${isexpand && 'height: 100%;'}
   border-radius: 20px;
   background-color: rgba(255, 255, 255, 0.7);
   padding: 15px;
+  ${draggable && 'cursor: move;'}
 `;

frontend/src/component/Sidebar/Content/index.tsx

@@ -12,7 +12,7 @@ const Content = ({
   isexpand = false,
 }: contentType) => {
   return (
-    <li css={container(isexpand)} draggable={draggable}>
+    <li css={container(draggable, isexpand)} draggable={draggable}>
       {children}
     </li>
   );

frontend/src/component/Sidebar/Friends/callingList.tsx

@@ -1,11 +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');
+
+    if (target.tagName !== 'UL' || !draggingElement) return;
+
+    target.appendChild(draggingElement);
+  };
+
   return (
     <Content>
       <h2 className="srOnly">전화연결 목록</h2>
-      <div css={callingList}></div>
+      <ul css={callingList} onDragOver={handleDragOver}>
+        {friendList.map((friend: friendType) => FriendItem(friend))}
+      </ul>
     </Content>
   );
 };

frontend/src/component/Sidebar/Friends/friendItem.tsx

@@ -16,8 +16,8 @@ const FriendItem = (data: friendType) => {
   };
 
   return (
-    <Content draggable={true} key={id}>
-      <section css={friendItemWrapper}>
+    <Content draggable={isOnline} key={id}>
+      <section id={id} css={friendItemWrapper(isOnline)}>
         <div css={userName(isOnline)}>{name}</div>
         <div>
           <img src={message} alt="채팅하기" onClick={sendChatting}></img>

frontend/src/component/Sidebar/Friends/friendList.tsx

@@ -1,57 +1,29 @@
+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) => {
+    const target = e.target as HTMLElement;
+
+    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}>
-        {data.map((friend: friendType) => FriendItem(friend))}
+      <ul
+        css={friendListWrapper}
+        onDragStart={handleDrag}
+        onDragEnd={handleDrag}>
+        {friendList.map((friend: friendType) => FriendItem(friend))}
       </ul>
       <div css={findFriend}>
         <input type="text" placeholder="추가할 친구 이름" />

frontend/src/component/Sidebar/Friends/friends.styled.ts

@@ -25,23 +25,31 @@ export const friendListWrapper = css`
   ::-webkit-scrollbar {
     display: none;
   }
-
-  > li {
-    cursor: move;
-  }
 `;
 
 export const callingList = css`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 12px;
   height: 250px;
   ${backgroundImage(phoneIcon)};
+
+  overflow-y: scroll;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
 `;
 
-export const friendItemWrapper = css`
+export const friendItemWrapper = (isOnline: boolean) => css`
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 5px;
   padding: 7px 5px;
+  ${!isOnline && 'opacity: 0.5;'}
 
   div {
     display: flex;

frontend/src/component/Sidebar/Friends/friends.ts

@@ -1,5 +1,6 @@
 export type friendType = {
   id: string;
+  isCalling: boolean;
   isOnline: boolean;
   name: string;
 };

frontend/src/store/atom/friends.ts

@@ -0,0 +1,64 @@
+import { atom } from 'recoil';
+
+export interface friendsProps {
+  [key: string]: {
+    id: string;
+    name: string;
+    isOnline: boolean;
+    isCalling: boolean;
+  };
+}
+
+export const friendsState = atom<friendsProps>({
+  key: 'friendsState',
+  default: {
+    '1': {
+      id: '1',
+      isOnline: false,
+      name: '안현서',
+      isCalling: false,
+    },
+    '2': {
+      id: '2',
+      isOnline: true,
+      name: '원종빈',
+      isCalling: true,
+    },
+    '3': {
+      id: '3',
+      isOnline: true,
+      name: '강성준',
+      isCalling: true,
+    },
+    '4': {
+      id: '4',
+      isOnline: true,
+      name: '이형진',
+      isCalling: false,
+    },
+    '5': {
+      id: '5',
+      isOnline: false,
+      name: '안현서',
+      isCalling: false,
+    },
+    '6': {
+      id: '6',
+      isOnline: false,
+      name: '원종빈',
+      isCalling: false,
+    },
+    '7': {
+      id: '7',
+      isOnline: true,
+      name: '강성준',
+      isCalling: false,
+    },
+    '8': {
+      id: '8',
+      isOnline: true,
+      name: '이형진',
+      isCalling: false,
+    },
+  },
+});