[feat] boostcampwm-2022#66 online 유저만 drag 가능 하도록 변경

- online일 때만 draggable true로 설정
ktmihs · Nov 30, 2022 · f6ff43a · f6ff43a
1 parent 9e13cfc
commit f6ff43a
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 10 deletions.
diff --git a/frontend/src/component/Sidebar/Content/content.styled.ts b/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;'}
 `;
diff --git a/frontend/src/component/Sidebar/Content/index.tsx b/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>
   );

diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
@@ -3,7 +3,6 @@ import { friendType } from './friends';
 import { friendItemWrapper, userName } from './friends.styled';
 import message from '../../../assets/icon/messageIcon.svg';
 import unfollow from '../../../assets/icon/unfollowIcon.svg';
-import { MouseEvent } from 'react';
 
 const FriendItem = (data: friendType) => {
   const { id, isOnline, name } = data;
@@ -17,8 +16,8 @@ const FriendItem = (data: friendType) => {
   };
 
   return (
-    <Content draggable={true} key={id}>
-      <section css={friendItemWrapper}>
+    <Content draggable={isOnline} key={id}>
+      <section 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/friends.styled.ts b/frontend/src/component/Sidebar/Friends/friends.styled.ts
@@ -25,10 +25,6 @@ export const friendListWrapper = css`
   ::-webkit-scrollbar {
     display: none;
   }
-
-  > li {
-    cursor: move;
-  }
 `;
 
 export const callingList = css`
@@ -47,12 +43,13 @@ export const callingList = css`
   }
 `;
 
-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;