1. 컴포넌트 개발

1.1. 신규 컴포넌트 UI 선택

bootstrap theme(https://wrapbootstrap.com/) 중, 개발을 진행할 디자인을 선택하고 개발 소스를 다운 받습니다.

이 문서에서는 Assan theme 중 ELEMENTS>SHORTCODE4>Image+Text Cards를 선택하겠습니다.

다운로드 받은 소스에서 위 경로의 html 파일을 찾아서 개발할 부분을 vue 로 변환합니다.

Service-basecamp 프로젝트에 default/theme/assan/components 하위에 컴포넌트 폴더를 생성하고 파일을 추가합니다.

추가한 파일에 컴포넌트에서 사용할 UI 를 개발합니다.

Editor의 컴포넌트 메뉴에 보여지도록 하기 위해서 Core 프로젝트에 /src/main/resources/schema/core/builder/component 하위에 "serviceComponentData.json"에 추가할 컴포넌트 데이터를 넣습니다.

Editor에서 보여질 컴포넌트 이미지를 schema/core/component/componentImages 폴더에 추가하고 위와 같이 경로를 적어줍니다.

"@theme" 는 Service-basecamp 에서는 theme-테마명으로 치환되는 문자입니다.

Core에 추가한 컴포넌트 아이디와 Service-basecamp의 컴포넌트 페이지를 연결하기 위해서

Service-basecamp 의 /src/default/theme/assan/components/asyncComponents.js 파일에 다음과 같이 추가해 줍니다.

Core의 서비스컴포넌트 데이터의 "@theme-imageTextCards"는 Assan theme 에서는 "theme-assan-imageTextCards"로 변경하여 매핑했습니다.

Editor 화면에서 추가된 컴포넌트를 확인합니다.

서비스 페이지에 추가된 컴포넌트를 추가합니다.

다음과 같이 추가된 컴포넌트가 표시됩니다.

Editor에서 컴포넌트에 옵션을 설정할 수 있도록 하려면 우선 UI에 props로 옵션항목을 정의하여 개발합니다.

그리고, Core에 props들을 저장할 수 있는 NodeType을 생성하고, 컴포넌트 데이터에 componentPropsClass에 tid를 적어줍니다.