diff --git a/client/src/components/ChatLog/ChatLog.tsx b/client/src/components/ChatLog/ChatLog.tsx index e679c587..9a0f26c1 100644 --- 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` 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 === 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 = ({ content, writer, type }) => { +const avartarMapper = (avartar: string): string => { + return avartar === 'user' ? 'D' : 'U'; +}; + +const ChatLog: FC = ({ content, writer, type, avartar, preWriter }) => { return ( - + + {type !== writer && preWriter !== writer && ( + {avartarMapper(avartar)} + )} {content} ); diff --git a/client/src/routes/ChatRoom/ChatRoom.tsx b/client/src/routes/ChatRoom/ChatRoom.tsx index ae149ac8..3db0d18e 100644 --- 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(); const chatRef = useRef(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 = () => { {chats && chats?.length !== 0 && - chats.map((item) => ( + chats.map((item, index) => ( ))} diff --git a/client/src/theme/index.ts b/client/src/theme/index.ts index 5dffe5fd..56a768a5 100644 --- 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;