Merge pull request #125 from boostcamp-2020/dev

Dev -> master 맥북 버그 해결버전
boostcamp-2020 · Dec 15, 2020 · 6ef3fc6 · 6ef3fc6
2 parents 51d816e + d9730b4
commit 6ef3fc6
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 58 deletions.
diff --git a/client/src/components/common/EmojiListModal/EmojiListModal.tsx b/client/src/components/common/EmojiListModal/EmojiListModal.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Thread } from '@/types/thread';
-import { flex } from '@/styles/mixin';
 import { useChannelState, useEmojiState, useUserState } from '@/hooks';
 import { useDispatch } from 'react-redux';
 import { sendMessageRequest } from '@/store/modules/socket.slice';
 import { SOCKET_MESSAGE_TYPE } from '@/utils/constants';
 
 const Container = styled.div`
-  ${flex('center', 'flex-start', 'row')};
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+`;
+
+const EmojiBox = styled.div`
+  cursor: pointer;
+  transition: 0.3;
+  &:hover {
+    transition: 0.3;
+    background-color: #b5e0fe;
+  }
+  border-radius: 5px;
 `;
 
 const Emoji = styled.img`
   width: 22px;
   height: 22px;
+  margin: 0.2rem;
+  border-radius: 5px;
   user-select: none;
   cursor: pointer;
 `;
@@ -46,12 +58,9 @@ const EmojiListModal: React.FC<EmojiListModalProps> = ({ thread }: EmojiListModa
     <Container>
       {emojiList?.map((emoji) => {
         return (
-          <Emoji
-            key={emoji.id}
-            src={emoji.url}
-            alt="emoji url"
-            onClick={() => clickEmojiHandler(Number(emoji.id))}
-          />
+          <EmojiBox key={emoji.id}>
+            <Emoji src={emoji.url} onClick={() => clickEmojiHandler(Number(emoji.id))} />
+          </EmojiBox>
         );
       })}
     </Container>

diff --git a/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx b/client/src/components/common/ThreadInputBox/ThreadInputBox.tsx
@@ -202,7 +202,7 @@ const ThreadInputBox: React.FC<ThreadInputBoxProps> = ({ inputBoxType }: ThreadI
 
           <TextArea
             onChange={handleChange}
-            onKeyDown={handleKey}
+            onKeyPress={handleKey}
             placeholder={parentId ? 'Reply...' : `Send a message ${current?.name}`}
             ref={commentRef}
             value={comment}

diff --git a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/EmojiBoxItem.tsx
@@ -1,43 +1,62 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { EmojiOfThread, Thread } from '@/types/thread';
 import { flex } from '@/styles/mixin';
 import { useChannelState, useEmojiState, useUserState } from '@/hooks';
 import { useDispatch } from 'react-redux';
 import { SOCKET_MESSAGE_TYPE } from '@/utils/constants';
 import { sendMessageRequest } from '@/store/modules/socket.slice';
-import { JoinedUser } from '@/types';
+import TooltipPopup from './TooltipPopup/TooltipPopup';
 
-const Container = styled.div`
-  background-color: ${(props) => props.color};
-  box-shadow: inset 0 0 0 1px rgba(29, 155, 209);
-  ${flex('center', 'flex-start', 'row')};
+interface ContainerProps {
+  isMine: boolean;
+}
+
+const Container = styled.div<ContainerProps>`
+  background-color: ${(props) => (props.isMine ? '#E2EFF4' : '#EFEFEF')};
+  box-shadow: inset 0 0 0 1px ${(props) => (props.isMine ? '#1D9BD1' : '#EFEFEF')};
+  ${flex()};
   position: relative;
   cursor: pointer;
-  padding: 0.15rem 0.4rem;
+  width: 2.6rem;
+  height: 1.6rem;
   border-radius: 999em;
   margin-right: 0.2rem;
 `;
-// EFEFEF
 
 const EmojiToolTip = styled.div`
+  width: 12rem;
+  ${flex('center', 'center', 'column')};
+  padding: 0.8rem;
   background-color: black;
-  /* color: #505050; */
   color: white;
   border: 1px solid black;
-  visibility: hidden;
-  position: absolute;
-  z-index: 1;
-  bottom: 2rem;
-  width: 10rem;
-  ${Container}:hover & {
-    visibility: visible;
-  }
+  border-radius: 8px;
 `;
 
-const EmojiItem = styled.div``;
+const EmojiItem = styled.div`
+  ${flex()};
+`;
+const TooltipImg = styled.img`
+  width: 36px;
+  height: 36px;
+  margin-bottom: 0.4rem;
+  background-color: white;
+  border-radius: 8px;
+  padding: 4px;
+`;
 
-const ToolTipDescribe = styled.div``;
+const ToolTipDescribe = styled.div`
+  font-size: 0.9rem;
+  word-break: break-all;
+`;
+
+const EmojiCount = styled.span`
+  font-size: 0.8rem;
+  font-weight: 800;
+  margin: 0 3px;
+  color: ${(props) => props.theme.color.blue1};
+`;
 
 interface EmojiBoxItemProps {
   emoji: EmojiOfThread;
@@ -49,13 +68,15 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
   const { users, current } = useChannelState();
   const { emojiList } = useEmojiState();
   const dispatch = useDispatch();
-  const [backgroundColor, setbackgroundColor] = useState('#EFEFEF');
+  const [isMine, setIsMine] = useState(false);
 
   useEffect(() => {
     if (userInfo && emoji.userList.includes(userInfo.id)) {
-      setbackgroundColor('#E2EFF4');
+      setIsMine(true);
+    } else {
+      setIsMine(false);
     }
-  }, []);
+  }, [emoji]);
 
   const getUserListNameInEmoji = (emojiProp: EmojiOfThread) => {
     return emojiProp.userList.reduce((acc, userIdInEmojiOfThread, idx, arr) => {
@@ -83,7 +104,7 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
   };
 
   const getToolTipDescribe = (emojiId: number) => {
-    return `reacted width ${getEmojiName(emojiId)}`;
+    return `${getEmojiName(emojiId)}`;
   };
 
   const getEmojiUrl = (emojiId: number) => {
@@ -104,36 +125,34 @@ const EmojiBoxItem: React.FC<EmojiBoxItemProps> = ({ emoji, thread }: EmojiBoxIt
         }),
       );
     }
-    if (backgroundColor === '#EFEFEF') {
-      return setbackgroundColor('#E2EFF4');
-    }
-    return setbackgroundColor('#EFEFEF');
+    setIsMine((mine) => !mine);
   };
 
+  const ref = useRef<HTMLDivElement>(null);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
+
   return (
-    <Container color={backgroundColor} onClick={clickEmojiHandler}>
-      <EmojiToolTip>
-        <img
-          key={`${emoji.id}ToolTip`}
-          src={getEmojiUrl(emoji.id)}
-          alt="emoji url"
-          width="36px"
-          height="36px"
-        />
-        <ToolTipDescribe>
-          {getUserListNameInEmoji(emoji)}
-          {getToolTipDescribe(emoji.id)}
-        </ToolTipDescribe>
-      </EmojiToolTip>
+    <Container
+      isMine={isMine}
+      onClick={clickEmojiHandler}
+      ref={ref}
+      onMouseEnter={() => setTooltipVisible(true)}
+      onMouseLeave={() => setTooltipVisible(false)}
+    >
+      {ref.current && tooltipVisible && (
+        <TooltipPopup anchorEl={ref.current} top={-10} left={-30}>
+          <EmojiToolTip>
+            <TooltipImg src={getEmojiUrl(emoji.id)} />
+            <ToolTipDescribe>
+              {getUserListNameInEmoji(emoji)}
+              {`reacted with :${getToolTipDescribe(emoji.id)}:`}
+            </ToolTipDescribe>
+          </EmojiToolTip>
+        </TooltipPopup>
+      )}
       <EmojiItem>
-        <img
-          key={emoji.id}
-          src={getEmojiUrl(emoji.id)}
-          alt="emoji url"
-          width="16px"
-          height="16px"
-        />
-        {emoji.userList && <span key={`${emoji.id}length`}>{emoji.userList.length}</span>}
+        <img src={getEmojiUrl(emoji.id)} alt="emoji url" width="16px" height="16px" />
+        {emoji.userList && <EmojiCount>{emoji.userList.length}</EmojiCount>}
       </EmojiItem>
     </Container>
   );

diff --git a/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/TooltipPopup/TooltipPopup.tsx b/client/src/components/common/ThreadItem/EmojiBox/EmojiBoxItem/TooltipPopup/TooltipPopup.tsx
@@ -0,0 +1,43 @@
+import React, { FC, PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+interface ContainerProps {
+  top?: string;
+  left?: string;
+}
+
+const Container = styled.div<ContainerProps>`
+  position: fixed;
+  top: ${(props) => props.top ?? 0};
+  left: ${(props) => props.left ?? 0};
+  border-radius: 5px;
+  outline: 0;
+  z-index: 15;
+  transform: translateY(-100%);
+`;
+
+interface TooltipProps {
+  anchorEl: HTMLElement;
+  top?: number;
+  left?: number;
+}
+
+const TooltipPopup: FC<PropsWithChildren<TooltipProps>> = ({
+  children,
+  anchorEl,
+  top = 0,
+  left = 0,
+}: PropsWithChildren<TooltipProps>) => {
+  const parentBox = anchorEl.getBoundingClientRect();
+
+  const TOP = top + parentBox.top;
+  const LEFT = left + parentBox.left;
+
+  return (
+    <Container top={`${TOP}px`} left={`${LEFT}px`}>
+      {children}
+    </Container>
+  );
+};
+
+export default TooltipPopup;