feat: activeTodo 기준으로 BaseLine표시 추가

boostcampwm-2022 · Dec 8, 2022 · 00e431a · 00e431a
1 parent afca406
commit 00e431a
Showing 1 changed file with 19 additions and 4 deletions.
diff --git a/client/src/container/diagram/Diagram.tsx b/client/src/container/diagram/Diagram.tsx
@@ -32,13 +32,23 @@ const Detector = styled.div`
   background-color: transparent;
 `;
 
-const Line = styled.div`
+const HorizontalBaseLine = styled.div`
   position: absolute;
   height: 0;
   width: 100%;
   top: 40px;
   transform: translateY(var(--offsetY));
-  border-top: 4px solid ${green};
+  border-top: 4px dashed ${green};
+  opacity: 0.5;
+`;
+
+const VerticalBaseLine = styled.div`
+  position: absolute;
+  height: 100%;
+  width: 0;
+  left: 110px;
+  transform: translateX(var(--offsetX));
+  border-left: 4px dashed ${green};
   opacity: 0.5;
 `;
 
@@ -65,10 +75,14 @@ const Diagram = ({ showDone }: { showDone: boolean }): ReactElement => {
     '--offsetY': `${offset.y}px`,
   };
 
-  const lineStyle = {
+  const horizontalLineStyle = {
     '--offsetY': `${offset.y}px`,
   };
 
+  const verticalLineStyle = {
+    '--offsetX': `${offset.x}px`,
+  };
+
   const onWheelDown = (event: React.MouseEvent): void => {
     if (event.button === 1) {
       isWheelDown.current = true;
@@ -92,7 +106,8 @@ const Diagram = ({ showDone }: { showDone: boolean }): ReactElement => {
   return (
     <div onMouseDown={onWheelDown} onMouseUp={onWheelUp} onMouseMove={onMouseMove} onMouseLeave={onWheelLeave}>
       <Detector />
-      <Line style={lineStyle as React.CSSProperties} />
+      <HorizontalBaseLine style={horizontalLineStyle as React.CSSProperties} />
+      <VerticalBaseLine style={verticalLineStyle as React.CSSProperties} />
       <Wrapper style={diagramStyle as React.CSSProperties}>
         {diagramData !== undefined &&
           diagramVertice?.map((el) => {