@wegooli/paper-editor

계약서를 읽고, 그 위에 서명란·글자칸·날짜칸·도장을 찍는 화면입니다.

파트너의 페이지가 이 화면을 직접 그립니다. Paper 사이트를 창 안에 끼워 넣지 않습니다. 임대인 브라우저는 Paper 주소를 보지 않습니다.

계산(칸의 위치, 글자 폭, 이름표)은 @wegooli/paper-core만 합니다. 서버와 열쇠는 @wegooli/paper-client만 압니다. 이 화면은 그 메서드를 부를 뿐, 주소나 열쇠 헤더를 만들지 않습니다.

넣는 법

import { createPaperClient } from '@wegooli/paper-client';
import { TemplateEditor, TemplatePreview } from '@wegooli/paper-editor';
import '@wegooli/paper-editor/styles.css';

const paper = createPaperClient({
  baseUrl: 'https://paper.example',
  credential: { type: 'delegation', token },
});

<TemplateEditor client={paper} templateId={id} onSaved={(nextId) => { /* 저장된 양식 번호 */ }} />
<TemplatePreview client={paper} templateId={id} />

스타일 파일은 선택입니다. 안 가져와도 칸의 위치는 맞습니다. 가져오면 종이 위에 칸을 둔 것처럼 보입니다. 클래스 이름으로 파트너 디자인을 덮을 수 있습니다.

서비스 열쇠는 이 화면에 넣지 않습니다. 열쇠는 파트너 서버에 두고, 브라우저에는 위임 토큰을 주거나 서버가 같은 메서드 모양으로 중계합니다.

이름·설명과 칸 알림

• title은 저장할 때 읽습니다. 바뀌어도 계약서를 다시 읽지 않으므로, 이름 입력칸을 편집기 옆에 두어도 찍어 둔 칸이 사라지지 않습니다. 주지 않으면 불러온 양식의 이름을 그대로 둡니다.
• description을 주면 저장할 때 같이 보냅니다. 주지 않으면 서버의 설명을 건드리지 않습니다.
• onFieldsChange(fields)는 칸이 바뀔 때마다 불립니다. 받는 분 화면 미리보기처럼 앱이 칸을 따로 보여 줄 때 씁니다.

도장·그림

그림을 올리는 일은 앱이 uploadImage로 넘깁니다. 넘기지 않으면 「도장·그림 놓기」 단추가 나오지 않습니다. 이미 있는 그림은 넘기지 않아도 보이고, 저장할 때 빠지지 않습니다.

<TemplateEditor
  client={paper}
  templateId={id}
  uploadImage={async (file) => {
    // 앱 서버가 Paper `POST /api/upload/image`로 중계한다. 열쇠는 앱 서버에만 둔다.
    const body = new FormData();
    body.append('file', file);
    const res = await fetch('/api/paper/upload-image', { method: 'POST', body });
    if (!res.ok) throw new Error('upload failed');
    return res.json(); // { imageFileKey, imageMime, previewUrl }
  }}
/>

• PNG 또는 JPEG, 2MB 이하만 올립니다. 그 밖의 파일은 편집기가 올리기 전에 막습니다.
• 계약서에는 그림이 칸 크기대로 늘어나 찍힙니다. 새 칸은 그림 비율대로 만들어지고, 미리보기도 칸 크기대로 늘려 보여 줍니다.

날짜칸

「날짜칸 놓기」로 놓습니다. 칸의 종류가 새로 생기는 것이 아니라, 글자칸을 날짜로 채우게 한 것입니다(type: 'TEXT', inputType: 'DATE'). 기본 양식의 근로개시일과 같은 칸입니다.

• 계약서를 보내는 분이 새 계약서 화면에서 달력으로 고르고, 계약서에는 2026-10-01 같은 글자가 찍힙니다. 서명하는 분이 고르는 칸이 아닙니다.
• 놓으면 보낼 때 채울 이름(date_1, date_2 …)이 붙습니다. 이름표(예: 시작일)를 적어야 저장됩니다.

저장할 때

• 글자칸에 박아 둔 문구도 없고, 보낼 때 채울 이름도 없으면 저장되지 않습니다. 공백만 있어도 같습니다.
• 보낼 때 채우는 날짜칸에 이름표가 없으면 저장되지 않습니다.
• 보낼 때 채울 이름이 이 회사에서 아직 쓴 적이 없으면, 사람이 확인하기 전에는 저장하지 않습니다. 이름 목록을 가져오지 못해도 저장하지 않습니다.
• 같은 이름이 두 칸에 있으면 알려 주기만 합니다. 두 칸에 같은 값이 들어갑니다.
• 기본으로 들어 있는 양식은 고칠 수 없습니다. 우리 양식으로 복사한 뒤에 고칩니다.

이미 있는 그림 칸과, 글자칸을 날짜·금액·체크로 채우게 한 설정은 저장할 때 빠지지 않습니다. 서명 자리의 역할 이름은 이 화면이 지우지 않습니다.

Node 22 이상. React 18 또는 19.