1. 스팩 정의

기능 스팩

1. 그림을 그릴 수 있다.
2. 검은색, 빨간색, 노란색 등 팔레트가 있어서 클릭하면 펜의 색이 바뀐다.
3. 캔버스에 마우스가 올라가면 커서가 펜으로 바뀐다.
   • 현재 선택 중인 색으로 커서가 바뀌어, 내가 지금 어떤 색을 선택했는 지 보여준다.

개발 스팩

1. HTML의 canvas API를 이용한다.

2. 개발

개발 구상

1. canvas태그에 canvasRef를 넘겨 React에서 canvas 돔을 조작한다.
2. canvas를 눌렀을 때에 대한 이벤트는 onMouseDown 이벤트 함수로 컨트롤한다.
3. submit버튼을 클릭 시 canvas 상태를 저장하고, 다시 접속 시 canvas 상태를 불러온다.

개발

1. canvas돔을 조작하기 위해 ref를 넘겨준다.

<aside> 💡 돔을 조작하기 위해 ref를 넘기는 이유

요소에 ref를 넘기면, ref.current값을 얻을 수 있으며 이 값을 통해 해당 DOM API에서 제공하는 메서드, 프로퍼티를 사용할 수 있다.

</aside>

const canvasRef = React.useRef<HTMLCanvasElement>(null);
// ..
return (
	<canvas ref={canvasRef} />
)