[React] 서명 패드 만들기 (react-signature-canvas)

🎈 react-signature-canvas 패키지 설치

yarn add react-signature-canvas

 

🎈 서명 컴포넌트 구현

import {useRef} from 'react';
import SignatureCanvas from 'react-signature-canvas';

const SignaturePad = () => {
	const canvas = useRef<SignatureCanvas>(null);
	
	const handleCanvasClear = () => {
	  canvas.current?.clear();
	};
	  
	<SignatureCanvas
	  ref={canvas}
	  penColor="black"
	  canvasProps={{
	    height: 300,
	    className: 'bg-gray-100 rounded-md mt-2 w-full',
	  }}
	/>
	
export default SignaturePad;

 

🎈 활용편

🔨 화면 사이즈 변화하면 입력값이 리셋되는 경우

• SignatureCanvas props에 추가
  • clearOnResize={false}

 

🔨 서명한 거 이미지로 저장하기

const handleSignatureComplete = () => {
  if (canvas.current) {
    const imageData = canvas.current.toDataURL('image/png');
    onClick(imageData);
    handleModalClose();
  }
};

 

🔨 서명 비어있으면 완료 X

const handleSignatureComplete = () => {
  if (canvas.current) {
    if (canvas.current.isEmpty()) { // 비어있는지 확인
      toast.error('서명이 비어 있습니다.');
    } else {
      const imageData = canvas.current.toDataURL('image/png');
      onClick(imageData);
      handleModalClose();
    }
  }
};

 

🎈 구현 화면

유치원 통합 관리 서비스를 개발할 때, 귀가동의서 기능에서 쓰였다.

학부모가 귀가동의서를 작성하고 서명할 수 있도록 서명 패드를 구현하였다.

 

---

 

[참고]

react-signature-canvas

리액트에서 signature-pad로 서명하기, react-signature-canvas에 placeholder 넣기