1. 컴포넌트 개발
1.1. 신규 컴포넌트 UI 선택
bootstrap theme(https://wrapbootstrap.com/) 중, 개발을 진행할 디자인을 선택하고 개발 소스를 다운 받습니다.
이 문서에서는 Assan theme 중 ELEMENTS>SHORTCODE4>Image+Text Cards를 선택하겠습니다.
다운로드 받은 소스에서 위 경로의 html 파일을 찾아서 개발할 부분을 vue 로 변환합니다.
1.2. 컴포넌트 UI 추가
Service-basecamp 프로젝트에 default/theme/assan/components 하위에 컴포넌트 폴더를 생성하고 파일을 추가합니다.
1.3. CORE에 컴포넌트 데이터 추가
Core 프로젝트에 /src/main/resources/schema/core/builder/component 하위에 "serviceComponentData.json"에 추가할 컴포넌트 데이터를 넣습니다.
Editor에서 보여질 컴포넌트 이미지를 schema/core/component/componentImages 폴더에 추가하고 위와 같이 경로를 적어줍니다.
"@theme" 는 Service-basecamp 에서는 theme-테마명으로 치환되는 문자입니다.
1.4 컴포넌트 아이디와 UI 모듈 연결
Core에 추가한 컴포넌트 아이디와 Service-basecamp의 컴포넌트 페이지를 연결하기 위해서
Service-basecamp 의 /src/default/theme/assan/components/asyncComponents.js 파일에 다음과 같이 추가해 줍니다.
Core의 서비스컴포넌트 데이터의 "@theme-imageTextCards"는 Assan theme 에서는 "theme-assan-imageTextCards"로 변경하여 매핑했습니다.
1.5. Editor 에서 컴포넌트 확인
Editor 화면에서 추가된 컴포넌트를 확인합니다.
서비스 페이지에 추가된 컴포넌트를 추가합니다.
다음과 같이 추가된 컴포넌트가 표시됩니다.
