[react-signature-canvas] 전자서명 구현하기

 

https://www.npmjs.com/package/react-signature-canvas?activeTab=readme

react-signature-canvas

 

과제중에 전자서명 구현이 있어서 찾아보다가 알게된 라이브러리다.

 

react-signature-canvas를 활용해서 전자서명을 간단하게 구현해보겠다. 

 

사실 정말 해당 기능을 잘 활용해서 잘 구현해놓으신 블로거분들이 많아서 

 

 

내가 뭐 추가한거는 딱히 없다.

 

나의 경우에는 react- hook -form을 사용하고 있어서 

 

그 formData안에 전자서명으로 나온 파일을 png로 변환해서 넣고싶었다.

 

 

다행히 해당 라이브러리에서 파일 변환 기능은 제공하고 있었기에 더 빨랐다. 

 

 

 

npm i -S react-signature-canvas

 

 

타입스크립트 사용하는 분들은

 

https://www.npmjs.com/package/@types/react-signature-canvas

@types/react-signature-canvas

npm install --save @types/react-signature-canvas

 

으로도 설치가 필요하다.

 

 

export function Signature(props: SignatureCanvasType): JSX.Element {

    const canvasRef = useRef<any>(null);
    const [isSigned, setIsSigned] = useState<boolean>(false);

    // 파일 이름 생성
    const generateFileName = (userName: string): string => {
        return `signature_${userName}_${Date.now()}`;
    };

    // dataURL -> File 변환
    const convertDataUrlToFile = (name: string): File => {
        const dataURL = canvasRef.current.toDataURL('image/png');
        const decodedURL = dataURL.replace(/^data:image\/\w+;base64,/, '');
        const buf = Buffer.from(decodedURL, 'base64');
        const blob = new Blob([buf], { type: 'image/png' });
        return new File([blob], `${name}.png`, { type: 'image/png' });
    };

    const onSave = (): void => {
        const dataName = generateFileName('name');
        const file = convertDataUrlToFile(dataName);
        // console.log(file);
    };

    return (
        <CanvasContainer>
            <CanvasWrapper>
                {!isSigned && (
                    <CanvasPlaceholder>
                        여기에 서명을 해주세요.
                    </CanvasPlaceholder>
                )}
                <ReactSignatureCanvas
                    ref={canvasRef}
                    canvasProps={{
                        width: 400,
                        height: 200,
                        className: 'sigCanvas',
                    }}
                    onBegin={(): void => {
                        setIsSigned(true);
                    }}
                />
            </CanvasWrapper>
            <div className="signature-btn">
                <button
                    className="add"
                    type="button"
                    onClick={(): void => {
                        canvasRef.current.clear(); // 리셋
                        setIsSigned(false);
                    }}
                >
                    서명 초기화
                </button>

                <button
                    disabled={!isSigned}
                    type="button"
                    onClick={(): void => onSave()}
                >
                    저장
                </button>
            </div>
        </CanvasContainer>
    );
}

 

 

css

export const CanvasContainer = styled.div`
    display: flex;
    flex-direction: column;
    align-items: end;

    .signature-btn {
        margin-top: 20px;
        display: flex;
        gap: 10px;

        button {
            padding: 10px 20px;
            font-size: 14px;
            color: white;
            background-color: ${colors.primary[5]};
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;

            &:hover {
                background-color: ${colors.primary[4]};
            }

            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px ${colors.primary[5]};
            }
            &:disabled {
                background-color: ${colors.neutral[4]};
            }
        }
    }
`;

export const CanvasWrapper = styled.div`
    position: relative;
`;

export const CanvasPlaceholder = styled.div`
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
`;

 

 

결과물 

 

 

 

 

 

 

 

 

만약에 실제로 사용하게된다면 

파일이름에 대해서 좀 더 고민을 해보고싶다.

 

uuid를 활용해서 유니크한 이름을 설정하는 방법도 있는데

 

다음엔 이 방법도 써봐야지 

https://www.npmjs.com/package/uuid

uuid

 

 

---

https://jiyoon-park.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-signature-pad%EB%A1%9C-%EC%84%9C%EB%AA%85%ED%95%98%EA%B8%B0-react-signature-canvas%EC%97%90-placeholder-%EB%84%A3%EA%B8%B0

 

 

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

 

감사합니다(꾸벅!)