[refactor] #66 친구 상태에 busy를 추가하여 활성 상태 색상 표시

- busy일 때는 노란색으로 표시
boostcampwm-2022 · Dec 8, 2022 · 27e8a5f · 27e8a5f
1 parent c684751
commit 27e8a5f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
@@ -50,7 +50,7 @@ const FriendItem = ({ friend }: { friend: friendType }) => {
   return (
     <Content draggable={isOnline}>
       <section id={id} css={friendItemWrapper(isOnline)}>
-        <div css={userName(isOnline)}>{nickname}</div>
+        <div css={userName(status)}>{nickname}</div>
         <div>
           <button onClick={sendChatting}>
             <img src={message} alt="채팅하기 버튼"></img>

diff --git a/frontend/src/component/Sidebar/Friends/friends.styled.ts b/frontend/src/component/Sidebar/Friends/friends.styled.ts
@@ -67,7 +67,7 @@ export const friendItemWrapper = (isOnline: boolean) => css`
   }
 `;
 
-export const userName = (state: boolean) => css`
+export const userName = (state: string) => css`
   font-weight: 700;
 
   ::before {
@@ -76,7 +76,11 @@ export const userName = (state: boolean) => css`
     width: 10px;
     height: 10px;
     border-radius: 5px;
-    background-color: ${state ? theme.green : theme.red};
+    background-color: ${state === 'online'
+      ? theme.green
+      : state === 'offline'
+      ? theme.red
+      : theme.yellow};
   }
 `;