1. 점을 그린다. : svg > circle

<svg width="100%">
	<circle
	  cx={circle.cx}
	  cy={circle.cy}
	  r="0.5rem"
	/>
</svg>

• cx : 원 중심의 x축 좌표
• cy : 원 중심의 y축 좌표
• r : 원의 반지름

2. 점과 선에 대한 상태를 관리한다.

1. startPoint : 시작점

   const [startPoint, setStartPoint] = React.useState('');
   

2. lineList : 선

   interface Point {
     startPoint: string;
     endPoint: string;
   }
   const [lineList, setLineList] = React.useState<Point[]>([]);
   

3. 점을 클릭하면, 업데이트한다.

1. 이미 선으로 연결된 점이다, 혹은 점으로 이미 찍은 점이다 → 점을 취소한다 = setStartPoint(’’)
2. 1번에 해당하지 않는다 → 선으로 연결한다 = setLineList(startPoint, endPoint)

const handlePointClick = (e: DataMouseEvent<SVGCircleElement>) => {
  const { id, type } = e.target.dataset;
  if (type === 'top') {
    if (lineList.every(line => line.startPoint !== id) && startPoint !== id) {
      setStartPoint(id);
      return;
    }
    setStartPoint('');
  }

  if (startPoint && type === 'bottom') {
    if (lineList.every(line => line.endPoint !== id)) {
      setLineList([...lineList, { startPoint, endPoint: id }]);
    }
    setStartPoint('');
  }
};

// ..

return (
	<svg>
		<circle 
			// ..
			onClick={handlePointClick} 
		/>
	</svg>
)

4. 선을 그린다.

3-2번에서 연결한 lineList를 바탕으로 선을 그린다.

<line
  x1={startPoint?.cx}
  y1={startPoint?.cy}
  x2={endPoint?.cx}
  y2={endPoint?.cy}
  stroke={theme.palette.primary.main}
  strokeWidth="0.1rem"
/>