탭 화면(iframe) 패키지 설치 방식 개발 가이드

시작하기

1. 샘플코드

• TypeScript 플러그인 샘플코드
• JavaScript 플러그인 샘플코드

2. 프로젝트 설정

• 압축 해제 후 프로젝트 디렉토리에서 다음 명령어 실행:

npm install

• SDK 라이브러리 버전 최신화:

npm install @tossplace/pos-plugin-sdk@latest

개발 가이드

1. 코드 작성

• src/App.tsx or src/App.jsx 파일을 수정하여 플러그인 기능 구현
• TypeScript 타입 지원으로 안정적인 개발 가능

2. 탭 화면 정보 작성하기

• public/iframe-manifest.json 파일에서 토스 POS에 표시할 탭 화면 정보를 설정해요.
  • tab.title: 탭 화면 이름
  • tab.description: 탭 화면 설명 (짧은 문구 권장)

배포 가이드

1. 패키지 생성

배포를 위해 다음 명령어 실행:

npm run build

2. 배포

1. 생성된 dist 파일을 zip 파일로 압축
2. zip 파일을 개발자센터에 업로드
3. 플러그인 검수 및 배포 진행

3. 적용 플러그인 확인

탭 화면(iframe) 플러그인은 토스 POS의 기타 메뉴에서 실행해요.

1. 토스 POS 왼쪽 상단의 메뉴 버튼을 눌러요.
2. 기타를 선택해요.
3. 외부 서비스 설정 영역에서 적용된 플러그인 메뉴를 확인해요.
4. 플러그인 메뉴를 선택하면 탭 화면이 열려요.

탭 화면 플러그인만 표시돼요

외부 서비스 설정 영역에는 탭 화면(iframe) 플러그인만 표시돼요. 웹 워커 플러그인은 백그라운드에서 실행되므로 메뉴에 표시되지 않아요.