Merge npm 통합을 사용하면 npm 패키지를 사용하여 UXPin 계정의 라이브러리에 컴포넌트를 추가할 수 있습니다. npm 통합 방법의 가장 좋은 점은 모든 단계를 UXPin에서 수행한다는 것입니다. 여기에서 간단한 가이드 영상을 보실 수 있습니다. 단계별 도입방법 설명은 아래를 확인하세요.

1단계: npm 통합을 사용하여 라이브러리 추가

이것은 에디터 모드에 있는 동안 또는 UXPin 대시보드의 Merge 탭에서 다른 라이브러리를 추가하는 것과 똑같은 방식으로 수행합니다. Ant Design을 사용하여 라이브러리를 생성하는 예는 다음과 같습니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/4b0a5dd9-fe77-4230-969e-1eca5970bbed_01+Add+library+from+app.mp4

위는 에디터를 통해 npm 통합 모달에서 라이브러리를 추가하는 영상입니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity/050eb2f3-bdab-4e9f-a05b-c840ef92dc14_02+Add+from+Merge+tab.mp4

위는 대시보드의 Merge 탭을 통해 npm 통합 모달에 접근하여 라이브러리를 추가하는 모습입니다.

라이브러리 이름 지정

이것은 가져오려는 npm 패키지의 이름이 아니라 UXPin의 라이브러리 목록에 어떤 이름으로 표시되는지 설정하기 위함합니다.

https://images.prismic.io/uxpincommunity/eef80109-fc4b-4f66-81c5-35262f376465_static_01.png?auto=compress,format&rect=0,0,1504,645&w=1504&h=645

컴포넌트 라이브러리 npm 패키지

컴포넌트 라이브러리의 npm 패키지 이름과 사용하려는 버전을 제공하기만 하면 됩니다. 예를 들어 아래와 같이 입력합니다.

https://images.prismic.io/uxpincommunity/aad7da60-00e1-419b-95cb-dde782189ba9_static_02.png?auto=compress,format&rect=0,0,1504,645&w=1504&h=645

추가 지원 패키지 또는 자산

컴포넌트 라이브러리에 글꼴, 아이콘 등에 대한 추가 패키지 또는 자산이 필요한 경우에는 add more dependency package (종속성 패키지 추가)를 클릭하고 메인 npm 패키지 이름에 대해 표시된 대로 정확한 정보를 입력합니다.

https://images.prismic.io/uxpincommunity/5cf5086f-5e4c-4b7d-8ab8-a268ace7728b_static_03.png?auto=compress,format&rect=0,0,1504,645&w=1504&h=645