마우스 이벤트리스너 및 그림 그리기 기능 추가

 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Vector } from './types';
 import { Vector } from './types';
 
 
+// 참고 : https://basketdeveloper.tistory.com/79
+
 export const Canvas: React.FC = () => {
 export const Canvas: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   
   
+  const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
+  const [isPainting, setIsPainting] = useState(false);
+
   const getCoordinates = useCallback((event: MouseEvent): Vector | undefined => {
   const getCoordinates = useCallback((event: MouseEvent): Vector | undefined => {
     if (!canvasRef.current) {
     if (!canvasRef.current) {
       return;
       return;
@@ -33,6 +38,53 @@ export const Canvas: React.FC = () => {
     }
     }
   }, []);
   }, []);
 
 
+  const startPaint = useCallback((event: MouseEvent) => {
+    const coordinates = getCoordinates(event);
+    if (coordinates) {
+      setIsPainting(true);
+      setMousePosition(coordinates);
+    }
+  }, []);
+
+  const paint = useCallback(
+    (event: MouseEvent) => {
+      // 드래그 방지
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (isPainting) {
+        const newMousePosition = getCoordinates(event);
+        if (mousePosition && newMousePosition) {
+          drawLine(mousePosition, newMousePosition);
+          setMousePosition(newMousePosition);
+        }
+      }
+    },
+    [isPainting, mousePosition]
+  );
+
+  const exitPaint = useCallback(() => {
+    setIsPainting(false);
+  }, []);
+
+  useEffect(() => {
+    if (canvasRef.current) {
+      const canvas: HTMLCanvasElement = canvasRef.current;
+
+      canvas.addEventListener('mousedown', startPaint);
+      canvas.addEventListener('mousemove', paint);
+      canvas.addEventListener('mouseup', exitPaint);
+      canvas.addEventListener('mouseleave', exitPaint);
+  
+      return () => {
+        canvas.removeEventListener('mousedown', startPaint);
+        canvas.removeEventListener('mousemove', paint);
+        canvas.removeEventListener('mouseup', exitPaint);
+        canvas.removeEventListener('mouseleave', exitPaint);
+      };
+    }
+  }, [startPaint, paint, exitPaint]);
+
   return (
   return (
     <div className='mx-3 px-2 py-1 rounded shadow'>
     <div className='mx-3 px-2 py-1 rounded shadow'>
       <canvas ref={canvasRef} width='512' height='384' />
       <canvas ref={canvasRef} width='512' height='384' />