Merge pull request #76 from SWM-FIRE/FIRE-329-fe-소켓으로-채팅-주고받음

FIRE-329 fix time, nickname, avatar ui
SWM-FIRE · Jul 27, 2022 · dcf5571 · dcf5571 · vercel · Jul 27, 2022
2 parents da41e22 + 5529f51
commit dcf5571
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 22 deletions.
diff --git a/src/components/room/Chatting.tsx b/src/components/room/Chatting.tsx
@@ -22,7 +22,7 @@ export function Chat({ messages }) {
       room: roomId,
       sender: localStorage.getItem('uid'),
       message: newMessage,
-      createdAt: new Date(),
+      createdAt: moment(new Date()).format('LT'),
     });
     setNewMessage('');
   };
@@ -54,8 +54,10 @@ export function Chat({ messages }) {
               uid: message.uid,
             }}
             msg={message.message}
-            time={moment(message.createdAt).format('LT')}
-            prev={message.prev}
+            time={message.createdAt}
+            type={message.type}
+            isHideTime={message.isHideTime}
+            isHideNicknameAndAvatar={message.isHideNicknameAndAvatar}
           />
         ))}
       </ChattingList>

diff --git a/src/components/room/ChattingItem.tsx b/src/components/room/ChattingItem.tsx
@@ -7,11 +7,13 @@ export default function ChattingItem({
   user,
   msg,
   time,
-  prev,
+  type,
+  isHideTime,
+  isHideNicknameAndAvatar,
 }: messageInterface) {
   const uid = localStorage.getItem('uid');
   const isMe = user.uid === uid;
-  const entrance = prev === '0';
+  const entrance = type === 'join';
 
   return (
     <div>
@@ -20,17 +22,21 @@ export default function ChattingItem({
           <Entrance>{user.nickname} 님이 입장했습니다.</Entrance>
         </EntranceComponent>
       ) : (
-        <Component isMe={isMe}>
+        <Component isMe={isMe} isHide={isHideNicknameAndAvatar}>
           {!isMe && (
-            <AvatarComponent>
+            <AvatarComponent isHide={isHideNicknameAndAvatar}>
               <MyAvatar num={Number(user.avatar)} />
             </AvatarComponent>
           )}
           <MessageComponent isMe={isMe}>
-            <Nickname isMe={isMe}>{isMe ? '나' : `${user.nickname}`}</Nickname>
+            {!isHideNicknameAndAvatar && (
+              <Nickname isMe={isMe}>
+                {isMe ? '나' : `${user.nickname}`}
+              </Nickname>
+            )}
             <MessageBox isMe={isMe}>
               <Message isMe={isMe}>{msg}</Message>
-              <Time>{time}</Time>
+              {!isHideTime && <Time>{time}</Time>}
             </MessageBox>
           </MessageComponent>
         </Component>
@@ -43,6 +49,15 @@ interface userInterface {
   isMe: boolean;
 }
 
+interface hideInterface {
+  isHide: boolean;
+}
+
+interface componentInterface {
+  isMe: boolean;
+  isHide: boolean;
+}
+
 const EntranceComponent = styled.div<userInterface>`
   display: ${({ isMe }) => (isMe ? 'none' : 'flex')};
   align-items: center;
@@ -58,16 +73,18 @@ const Entrance = styled.div`
   color: #bbbaba;
 `;
 
-const Component = styled.li<userInterface>`
+const Component = styled.li<componentInterface>`
   display: flex;
   flex-direction: ${({ isMe }) => (isMe ? 'row-reverse' : 'row')};
   width: 100%;
   gap: 1.6rem;
-  margin-top: 2.4rem;
+  margin-top: ${({ isHide }) => (isHide ? '1rem' : '2rem')};
 `;
 
-const AvatarComponent = styled.div`
+const AvatarComponent = styled.div<hideInterface>`
+  margin-left: ${({ isHide }) => (isHide ? '4.8rem' : '0')};
   svg {
+    display: ${({ isHide }) => (isHide ? 'none' : 'block')};
     width: 4.8rem;
     height: 4.8rem;
   }

diff --git a/src/interface/message.interface.ts b/src/interface/message.interface.ts
@@ -4,5 +4,7 @@ export default interface messageInterface {
   user: User;
   msg: string;
   time: string;
-  prev: string;
+  type: string;
+  isHideTime: boolean;
+  isHideNicknameAndAvatar: boolean;
 }
diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
@@ -22,7 +22,6 @@ import {
 export default function Room() {
   const [userList, setUserList] = useState({});
   const [messages, setMessages] = useState([]);
-  const [prev, setPrev] = useState('');
   const { isOpen } = controlModal();
   const { roomId } = useParams();
   const { enablePrevent, disablePrevent } = usePreventLeave();
@@ -95,10 +94,22 @@ export default function Room() {
     axios.get(API_URL + uid).then((res) => {
       setMessages([
         ...messages,
-        { prev: '0', uid, nickname: res.data.nickname },
+        { type: 'join', uid, nickname: res.data.nickname },
       ]);
     });
-    setPrev(Date.now().toString());
+  };
+
+  const isHide = (messages, receiveMsg) => {
+    let isHideNicknameAndAvatar = true;
+
+    if (messages.length !== 0) {
+      if (messages[messages.length - 1].createdAt !== receiveMsg.createdAt) {
+        isHideNicknameAndAvatar = false;
+      } else if (messages[messages.length - 1].uid !== receiveMsg.sender) {
+        isHideNicknameAndAvatar = false;
+      }
+    } else isHideNicknameAndAvatar = false;
+    return isHideNicknameAndAvatar;
   };
 
   const receiveMessage = useCallback((receiveMsg) => {
@@ -109,16 +120,34 @@ export default function Room() {
           setUserList((users) => {
             return { ...users, [receiveMsg.sender]: res.data };
           });
-
           setMessages((message) => [
-            ...message,
+            ...message.map((m) => {
+              if (
+                m.uid === receiveMsg.sender &&
+                m.createdAt === receiveMsg.createdAt
+              ) {
+                return {
+                  uid: m.uid,
+                  nickname: m.nickname,
+                  avatar: m.avatar,
+                  message: m.message,
+                  createdAt: m.createdAt,
+                  type: 'message',
+                  isHideTime: true,
+                  isHideNicknameAndAvatar: m.isHideNicknameAndAvatar,
+                };
+              }
+              return m;
+            }),
             {
               uid: receiveMsg.sender,
               nickname: res.data.nickname,
               avatar: res.data.avatar,
               message: receiveMsg.message,
               createdAt: receiveMsg.createdAt,
-              prev,
+              type: 'message',
+              isHideTime: false,
+              isHideNicknameAndAvatar: isHide(message, receiveMsg),
             },
           ]);
         });
@@ -127,18 +156,36 @@ export default function Room() {
       }
     } else {
       setMessages((message) => [
-        ...message,
+        ...message.map((m) => {
+          if (
+            m.uid === receiveMsg.sender &&
+            m.createdAt === receiveMsg.createdAt
+          ) {
+            return {
+              uid: m.uid,
+              nickname: m.nickname,
+              avatar: m.avatar,
+              message: m.message,
+              createdAt: m.createdAt,
+              type: 'message',
+              isHideTime: true,
+              isHideNicknameAndAvatar: m.isHideNicknameAndAvatar,
+            };
+          }
+          return m;
+        }),
         {
           uid: receiveMsg.sender,
           nickname: userList[receiveMsg.sender].nickname,
           avatar: userList[receiveMsg.sender].avatar,
           message: receiveMsg.message,
           createdAt: receiveMsg.createdAt,
-          prev,
+          type: 'message',
+          isHideTime: false,
+          isHideNicknameAndAvatar: isHide(message, receiveMsg),
         },
       ]);
     }
-    setPrev(receiveMsg.createdAt);
   }, []);
 
   return (