e-signature-sdk

v1.1.0

Published

7 months ago

A lightweight, client-side library for electronic signatures.

0High
0Medium
0Low

visvaden7

✍️ E-Signature SDK

React, Vue, Vanilla JS 등 어떤 프로젝트에도 손쉽게 통합할 수 있는, 의존성 없는 경량 캔버스 기반 전자서명 SDK입니다.

NPM: e-signature-sdk
라이선스: Apache 2.0
버전: 1.1.0

✨ 주요 특징

간편한 통합: 몇 줄의 코드만으로 모달 기반의 서명 기능을 추가할 수 있습니다.
UI 커스터마이징: 옵션을 통해 모달의 색상, 버튼 스타일 등을 쉽게 변경할 수 있습니다.
반응형 디자인: 데스크탑과 모바일 환경 모두에서 자연스러운 서명 경험을 제공합니다.
고해상도 지원: 레티나(HiDPI) 디스플레이에서도 선명한 서명 품질을 보장합니다.
의존성 없음: 외부 라이브러리 없이 순수 TypeScript로 작성되었습니다.

📦 설치

npm install e-signature-sdk

🚀 사용법

1단계: CSS 파일 가져오기

먼저, 프로젝트에 CSS 파일을 가져와야 합니다. 이 과정은 모달의 스타일이 올바르게 적용되기 위해 필수적입니다.

// main.js 또는 App.jsx 같은 메인 JS/TS 파일에서
import "e-signature-sdk/dist/e_signature.css";

2단계: SDK 가져와서 사용하기

✅ Vanilla JS 사용 예제

<button id="sign-button">서명 시작</button>

// main.js
import ESignature from "e-signature-sdk";
import "e-signature-sdk/dist/e_signature.css"; // CSS 파일을 잊지 마세요!

const btn = document.getElementById("sign-button");

btn.addEventListener("click", () => {
  ESignature.init({
    endpoint: "https://your-api.com/signatures", // 필수
    onComplete: (response) => {
      console.log("✅ 성공:", response);
      alert("서명이 성공적으로 제출되었습니다!");
    },
    onError: (error) => {
      console.error("🔥 에러:", error);
      alert("오류가 발생했습니다.");
    },
  });
});

✅ React (Vite) 사용 예제

// App.jsx
import ESignature from "e-signature-sdk";
import "e-signature-sdk/dist/e_signature.css"; // CSS 파일을 잊지 마세요!

function App() {
  const openSignatureModal = () => {
    ESignature.init({
      cId: "YOUR_CHANNEL_ID", // 채널 ID (선택 사항)
      endpoint: "https://your-api.com/signatures", // 서명 이미지를 POST 할 API
      onComplete: (response) => {
        console.log("📦 서버 응답:", response);
        alert("서명 완료!");
      },
    });
  };

  return (
    <div>
      <h1>e-signature-sdk 테스트</h1>
      <button onClick={openSignatureModal}>전자서명 시작</button>
    </div>
  );
}

export default App;

⚙️ 설정 옵션 (`ESignatureOptions`)

ESignature.init() 함수에 아래와 같은 옵션 객체를 전달하여 SDK를 커스터마이징할 수 있습니다.

| 파라미터 | 타입 | 필수 여부 | 설명 | | :------------- | :----------------------------- | :-------- | :----------------------------------------------------------------------- | | endpoint | string | 예 | 서명 데이터를 POST 요청으로 보낼 API 엔드포인트 주소입니다. | | cId | string | 아니요 | SDK를 사용하는 채널 ID 또는 식별자입니다. | | onComplete | (response: Response) => void | 아니요 | 서명 데이터 전송 및 API 응답(2xx) 성공 시 호출되는 콜백 함수입니다. | | onError | (error: Error) => void | 아니요 | 데이터 전송 또는 API 통신 중 에러 발생 시 호출되는 콜백 함수입니다. | | styles | object | 아니요 | UI 요소의 색상 및 스타일을 커스터마이징합니다. (아래 styles 객체 참조) | | imageOptions | object | 아니요 | 서명 이미지의 포맷과 품질을 설정합니다. (아래 imageOptions 객체 참조) |

`styles` 객체 상세

`imageOptions` 객체 상세

| 프로퍼티 | 타입 | 기본값 | 설명 | | :-------- | :------------ | :------------- | :------------------------------------------------ | | format | 'image/png' | 'image/jpeg' | 생성할 이미지 포맷 | | quality | number | undefined | image/jpeg 포맷 사용 시 이미지 품질 (0.0 ~ 1.0) |

📤 서명 데이터 페이로드 (POST)

endpoint로 전송되는 데이터는 아래와 같은 구조를 가집니다.

{
  "cid": "YOUR_CHANNEL_ID",
  "deviceInfo": "Mozilla/5.0 (Windows NT 10.0; Win64; x64)...",
  "signedData": "data:image/png;base64,iVBORw0KGgo...",
  "signTime": "2025-06-25 14:30:00"
}

🛠️ 기여자를 위한 가이드

프로젝트 빌드

이 프로젝트는 esbuild와 tsc를 사용하여 빌드됩니다.

# 의존성 설치
npm install

# 전체 빌드 실행 (클린, 타입 생성, 번들링)
npm run build

📄 라이선스

이 프로젝트는 Apache 2.0 라이선스를 따릅니다.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme