From f6ff43a074bf986be9957159e90d70fe1902c9f8 Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Wed, 30 Nov 2022 17:17:56 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20#66=20online=20=EC=9C=A0=EC=A0=80?=
 =?UTF-8?q?=EB=A7=8C=20drag=20=EA=B0=80=EB=8A=A5=20=ED=95=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- online일 때만 draggable true로 설정
---
 frontend/src/component/Sidebar/Content/content.styled.ts | 3 ++-
 frontend/src/component/Sidebar/Content/index.tsx         | 2 +-
 frontend/src/component/Sidebar/Friends/friendItem.tsx    | 5 ++---
 frontend/src/component/Sidebar/Friends/friends.styled.ts | 7 ++-----
 4 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/Sidebar/Content/content.styled.ts b/frontend/src/component/Sidebar/Content/content.styled.ts
index 175f6b3..a1711d6 100644
--- 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
index 1216b44..5cb2c45 100644
--- 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
index f325ecb..0d58972 100644
--- 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
index be802c5..ce65925 100644
--- 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;