From 325e3ce7414ec463b4a2114043ff7fd3a996524a Mon Sep 17 00:00:00 2001
From: n-ryu <ababc100564@gmail.com>
Date: Fri, 9 Dec 2022 01:19:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=97=90=EB=9F=AC,=20=EA=B2=BD?=
 =?UTF-8?q?=EA=B3=A0=20vertext=EC=97=90=20=ED=98=B8=EB=B2=84=ED=95=98?=
 =?UTF-8?q?=EB=A9=B4=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/components/{todos => }/Bubble.tsx  |  1 +
 client/src/components/diagram/ErrorBubble.tsx | 11 ++++--
 client/src/components/diagram/TodoVertex.tsx  | 38 +++++++++++++++----
 .../src/components/diagram/WarningBubble.tsx  | 11 ++++--
 4 files changed, 47 insertions(+), 14 deletions(-)
 rename client/src/components/{todos => }/Bubble.tsx (97%)

diff --git a/client/src/components/todos/Bubble.tsx b/client/src/components/Bubble.tsx
similarity index 97%
rename from client/src/components/todos/Bubble.tsx
rename to client/src/components/Bubble.tsx
index afa82c5..f605faf 100644
--- a/client/src/components/todos/Bubble.tsx
+++ b/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
index 7258b37..3bf6417 100644
--- 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
index ed21f95..02abf90 100644
--- 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,15 +52,29 @@ 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}
@@ -66,16 +82,22 @@ const TodoVertex = ({
         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
index 942c090..32384e5 100644
--- 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>
   );
 };