feat: 에러, 경고 vertext에 호버하면 메시지 확인 가능

boostcampwm-2022 · Dec 8, 2022 · 325e3ce · 325e3ce
1 parent 393edbf
commit 325e3ce
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 14 deletions.
diff --git a/client/src/components/todos/Bubble.tsx → client/src/components/Bubble.tsx b/client/src/components/todos/Bubble.tsx → client/src/components/Bubble.tsx
@@ -18,6 +18,7 @@ const Wrapper = styled.div<{ color?: string; backgroundColor?: string }>`
   background-color: ${(props) => props.backgroundColor ?? gray};
   gap: 10px;
   filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+  transform: translate(20px, -50%);
 
   &::after {
     content: '';

diff --git a/client/src/components/diagram/ErrorBubble.tsx b/client/src/components/diagram/ErrorBubble.tsx
@@ -1,4 +1,4 @@
-import Bubble from '@components/todos/Bubble';
+import Bubble from '@components/Bubble';
 import { ReactElement } from 'react';
 import Text from '@components/Text';
 import Image from '@components/Image';
@@ -7,11 +7,16 @@ import { PRIMARY_COLORS } from '@util/Constants';
 
 const { red } = PRIMARY_COLORS;
 
-const ErrorBubble = ({ text }: { text: string }): ReactElement => {
+const ErrorBubble = (): ReactElement => {
   return (
     <Bubble backgroundColor={red}>
       <Image src={Error} />
-      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+      <Text
+        text={'이어할 일의 마감일이 먼저할 일보다 빠릅니다!'}
+        fontWeight={'500'}
+        fontFamily={'Nanum Myeongjo'}
+        fontSize={'14px'}
+      />
     </Bubble>
   );
 };

diff --git a/client/src/components/diagram/TodoVertex.tsx b/client/src/components/diagram/TodoVertex.tsx
@@ -1,6 +1,8 @@
-import { ReactElement, useState } from 'react';
+import { ReactElement, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { PRIMARY_COLORS } from '@util/Constants';
+import WarningBubble from './WarningBubble';
+import ErrorBubble from './ErrorBubble';
 
 const { yellow, red, gray } = PRIMARY_COLORS;
 
@@ -50,32 +52,52 @@ const TodoVertex = ({
     '--x': `${x}px`,
     '--y': `${y}px`,
   };
-  const [strokeWidth, setStrokeWidth] = useState(2);
-  const onMouseLeave = (): void => {
-    setStrokeWidth(2);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const [mousePos, setMousePos] = useState<{ x: number; y: number }>({ x: NaN, y: NaN });
+  const domRef = useRef<HTMLDivElement>(null);
+  const onMouseLeave = (event: React.MouseEvent): void => {
+    setIsHovered(false);
   };
-  const onMouseEnter = (): void => {
-    setStrokeWidth(4);
+  const onMouseEnter = (event: React.MouseEvent): void => {
+    setMousePos(() => ({
+      x: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
+      y: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
+    }));
+    setIsHovered(true);
+  };
+  const onMouseMove = (event: React.MouseEvent): void => {
+    if (isHovered) {
+      setMousePos(() => ({
+        x: event.clientX - (domRef.current?.getBoundingClientRect().left as number),
+        y: event.clientY - (domRef.current?.getBoundingClientRect().top as number),
+      }));
+    }
   };
   return (
-    <Wrapper style={style as React.CSSProperties}>
+    <Wrapper style={style as React.CSSProperties} ref={domRef}>
       <svg
         width={Math.abs(width)}
         height={height}
         viewBox={`0 0 ${Math.abs(width)} ${height}`}
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <path d={toPathString(width, height)} stroke={getColor(type)} strokeWidth={strokeWidth} />
+        <path d={toPathString(width, height)} stroke={getColor(type)} strokeWidth={isHovered ? 4 : 2} />
         <path
           d={toPathString(width, height)}
           stroke="#00000000"
           strokeWidth={25}
           onMouseEnter={onMouseEnter}
           onMouseLeave={onMouseLeave}
+          onMouseMove={onMouseMove}
           onClick={onPopUp}
         />
       </svg>
+      {isHovered && (
+        <div style={{ position: 'absolute', left: `${mousePos.x}px`, top: `${mousePos.y}px` }}>
+          {type === 'WARNING' ? <WarningBubble /> : type === 'ERROR' ? <ErrorBubble /> : ''}
+        </div>
+      )}
     </Wrapper>
   );
 };

diff --git a/client/src/components/diagram/WarningBubble.tsx b/client/src/components/diagram/WarningBubble.tsx
@@ -1,4 +1,4 @@
-import Bubble from '@components/todos/Bubble';
+import Bubble from '@components/Bubble';
 import { ReactElement } from 'react';
 import Text from '@components/Text';
 import Image from '@components/Image';
@@ -7,11 +7,16 @@ import { PRIMARY_COLORS } from '@util/Constants';
 
 const { yellow } = PRIMARY_COLORS;
 
-const WarningBubble = ({ text }: { text: string }): ReactElement => {
+const WarningBubble = (): ReactElement => {
   return (
     <Bubble backgroundColor={yellow}>
       <Image src={Warning} />
-      <Text text={text} fontWeight={'500'} fontFamily={'Nanum Myeongjo'} fontSize={'14px'} />
+      <Text
+        text={'이어할 일의 우선순위가 먼저할 일보다 높습니다!'}
+        fontWeight={'500'}
+        fontFamily={'Nanum Myeongjo'}
+        fontSize={'14px'}
+      />
     </Bubble>
   );
 };