From 9cf6d49fb3f044827576f7d48379cb34411ea1f0 Mon Sep 17 00:00:00 2001 From: kimhakjun Date: Thu, 10 Dec 2020 10:05:27 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Refactor=20#212=20:=20theme=20=EC=83=89?= =?UTF-8?q?=EA=B0=88=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/theme/index.ts | 1 + 1 file changed, 1 insertion(+) 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; From c8aa8ff760bb060b186e70b819cda26328d98625 Mon Sep 17 00:00:00 2001 From: kimhakjun Date: Thu, 10 Dec 2020 10:07:12 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor=20#212=20:=20ChatLog=20=ED=94=84?= =?UTF-8?q?=EB=A1=AD=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 사용자의 type 추가 - 이전 사용자의 writer 추가 --- client/src/routes/ChatRoom/ChatRoom.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/src/routes/ChatRoom/ChatRoom.tsx b/client/src/routes/ChatRoom/ChatRoom.tsx index ae149ac8..d4b2a307 100644 --- a/client/src/routes/ChatRoom/ChatRoom.tsx +++ b/client/src/routes/ChatRoom/ChatRoom.tsx @@ -32,10 +32,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 +85,14 @@ const ChatRoom: FC = () => { {chats && chats?.length !== 0 && - chats.map((item) => ( + chats.map((item, index) => ( ))} From 791e9ecdce2ddda25b67efc93b04380661b2df77 Mon Sep 17 00:00:00 2001 From: kimhakjun Date: Thu, 10 Dec 2020 10:09:15 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Refactor=20#212=20:=20=EC=B1=84=ED=8C=85?= =?UTF-8?q?=EB=B0=A9=20=EC=9C=A0=EC=A0=80=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 채팅방의 유저 상태 U, D 로 표시 - 자신의 채팅이 연속적일 경우 U, D 표시 한번만 표시하도록 구현 --- client/src/components/ChatLog/ChatLog.tsx | 33 ++++++++++++++++++++--- 1 file changed, 29 insertions(+), 4 deletions(-) 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} ); From b876274bd8ccaf9059140e741400aa2176d1bc47 Mon Sep 17 00:00:00 2001 From: kimhakjun Date: Thu, 10 Dec 2020 11:28:07 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Refactor=20#noissue=20:=20ChatLog=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=82=A4=20=EA=B0=92=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/routes/ChatRoom/ChatRoom.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/routes/ChatRoom/ChatRoom.tsx b/client/src/routes/ChatRoom/ChatRoom.tsx index d4b2a307..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'; @@ -87,7 +88,7 @@ const ChatRoom: FC = () => { chats?.length !== 0 && chats.map((item, index) => (