개요

회사 시스템을 개발하면서 서명이 필요한 경우가 생겼습니다.
서명 시스템을 만들면서 경험한 상황들을 적어보겠습니다

Canvas 라이브러리

react-signature-canvas를 채택하였습니다

이유

• 작은 용량의 library -> 다른 라이브러리 :signature_pad.js(240kb)
• 서명 관련 기본적인 기능
• 서명 파일 관련 png 내보내기 기능 존재

서명패드 뒷 부분 백그라운드 이미지 넣기

성공한 방식: svg를 직접 그려주기

const svg = `
<svg style='position:relative' xmlns='http://www.w3.org/2000/svg' version='1.1' height='119px' width='227px'>
	<text x='0' y='75%' textLength='100%' lengthAdjust='spacingAndGlyphs' style='font-size:95px;fill:grey;fill-opacity:0.5'>
    	${name}
    </text>
</svg>`;

<div style={{
backgroundImage:`url("data:image/svg+xml;utf8,${svg}");` }}>
	<ReactSignatureCanvas  {...options}/>
</div>

실패한 방식: img 태그를 통해 백그라운드에 넣어주기(z-index)

img 태그를 canvas보다 z-index 높게 주면 canvas를 터치하지 못하고 img 태그만 눌려지는 현상이 생김

z-index를 낮게 잡을 경우 canvas에 가려져 나오지 않는 현상이 발생