Merge pull request #213 from boostcamp-2020/Refactor/chat-user-type

[HJ] 채팅방 유저 표시
boostcamp-2020 · Dec 10, 2020 · b26c8dc · b26c8dc
2 parents 52018b4 + b876274
commit b26c8dc
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/client/src/components/ChatLog/ChatLog.tsx b/client/src/components/ChatLog/ChatLog.tsx
@@ -1,21 +1,24 @@
 import React, { FC } from 'react';
-
 import styled from '@theme/styled';
 
 interface Props {
   writer?: string;
   content?: string;
   type: string;
+  avartar: string;
+  preWriter?: string;
 }
 
 interface Type {
   type: string;
   writer: string | undefined;
+  preWriter: string | undefined;
 }
 
 const StyledChatLogWrapper = styled.div<Type>`
   display: flex;
-  justify-content: ${({ type, writer }) => (type === writer ? 'flex-end' : 'flex-start')};
+  flex-direction: ${({ type, writer }) => type === writer && 'row-reverse'};
+  align-items: center;
   padding: 0.5rem;
 
   & > .chat-content {
@@ -24,12 +27,34 @@ const StyledChatLogWrapper = styled.div<Type>`
       type === writer ? theme.PRIMARY : theme.BORDER};
     color: ${({ theme }) => theme.LIGHT};
     border-radius: 0.4rem;
+    margin-left: ${({ writer, preWriter }) => writer === preWriter && '2.1rem'};
+  }
+
+  & > .chat-avartar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    padding: 0.6rem;
+    margin-right: 0.1rem;
+    background: ${({ theme }) => theme.LIGHT_BLUE};
+    color: ${({ theme }) => theme.LIGHT};
+    font-weight: 700px;
   }
 `;
 
-const ChatLog: FC<Props> = ({ content, writer, type }) => {
+const avartarMapper = (avartar: string): string => {
+  return avartar === 'user' ? 'D' : 'U';
+};
+
+const ChatLog: FC<Props> = ({ content, writer, type, avartar, preWriter }) => {
   return (
-    <StyledChatLogWrapper type={type} writer={writer}>
+    <StyledChatLogWrapper type={type} writer={writer} preWriter={preWriter}>
+      {type !== writer && preWriter !== writer && (
+        <span className="chat-avartar">{avartarMapper(avartar)}</span>
+      )}
       <span className="chat-content">{content}</span>
     </StyledChatLogWrapper>
   );

diff --git a/client/src/routes/ChatRoom/ChatRoom.tsx b/client/src/routes/ChatRoom/ChatRoom.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-array-index-key */
 import React, { FC, useEffect, useRef, useState, useCallback } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
@@ -32,10 +33,11 @@ const ChatRoom: FC = () => {
   const history = useHistory();
   const { chatId } = useParams<ChatID>();
   const chatRef = useRef<HTMLDivElement>(null);
-  const { _id: userId } = useSelector((state: InitialState) => state?.user || ({} as User));
+  const { _id: userId, type } = useSelector((state: InitialState) => state?.user || ({} as User));
   const [chatContent, setChatContent, onChangeChatContent] = useChange('');
   const [chats, setChats] = useState<(ChatType | null)[]>([]);
   const [CreateChat] = useCustomMutation(CREATE_CHAT);
+
   useSubscription(SUB_CHAT, {
     variables: {
       chatId,
@@ -84,12 +86,14 @@ const ChatRoom: FC = () => {
       <StyledChatMain ref={chatRef}>
         {chats &&
           chats?.length !== 0 &&
-          chats.map((item) => (
+          chats.map((item, index) => (
             <ChatLog
-              key={`chat_${item}`}
+              key={index}
               content={item?.content}
               writer={item?.writer}
               type={userId}
+              avartar={type}
+              preWriter={chats[index - 1]?.writer}
             />
           ))}
       </StyledChatMain>

diff --git a/client/src/theme/index.ts b/client/src/theme/index.ts
@@ -7,6 +7,7 @@ export const theme = {
   MODAL_BACKGROUND: 'rgba(90,153,115,0.75)',
   MODAL_OVERLAY: 'rgba(0,0,0,0.3)',
   LIGHT_GRAY: '#eaeaea',
+  LIGHT_BLUE: '#add8e6',
 };
 
 export type Theme = typeof theme;