Application 정보
| CORE | ICE3-CORE | FrontBuilder,Service-basecamp에서 사용되는core schema | NodeType, PropertyType, Event, Api, Default Data, Editor에서 사용되는 Data 등이 관리됨 |
| FrontBuilder | ICE3-FRONTBUILDER | 관리 사이트, Admin, Manager가 사용 | 관리 사이트의 Editor, admin page, Component(admin Editor)가 관리됨 |
| Service-basecamp | ICE3-SERVICEBASECAMP | 서비스 사이트 | 서비스 사이트의 Page, Component(service Editor)가 테마별로 관리됨 |
1. 컴포넌트 개발
1.1. 신규 컴포넌트 UI 선택
bootstrap theme(https://wrapbootstrap.com/) 중, 개발을 진행할 디자인을 선택하고 개발 소스를 다운 받습니다.
이 문서에서는 Assan theme 중 ELEMENTS>SHORTCODE4>Image+Text Cards를 선택하겠습니다.
다운로드 받은 소스에서 위 경로의 html 파일을 찾아서 개발할 부분을 vue 로 변환합니다.
1.2. 컴포넌트 UI 추가
Service-basecamp 프로젝트에 src/default/theme/assan/components 하위에 컴포넌트 폴더를 생성하고 파일을 추가합니다.
추가한 파일에 컴포넌트에서 사용할 UI 를 style을 포함하여 개발합니다.
1.3. CORE에 컴포넌트 데이터 추가
Service Editor의 컴포넌트 메뉴에 보여지도록 하기 위해서 Core 프로젝트에 /src/main/resources/schema/core/builder/component 하위에 "serviceComponentData.json"에 추가할 컴포넌트 데이터를 넣습니다.
Service Editor에서 보여질 컴포넌트 이미지를 Core 프로젝트의 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 에서 컴포넌트 확인
Service Editor 화면에서 추가된 컴포넌트를 확인합니다.
추가된 컴포넌트를 다음과 같이 추가합니다.
다음과 같이 추가된 컴포넌트가 표시됩니다.
2. 컴포넌트 옵션 추가
Service Editor에서 컴포넌트에 옵션을 설정할 수 있도록 하려면 우선 UI에 props로 옵션항목을 정의하여 개발합니다.
Service-basecamp 프로젝트에 src/default/theme/assan/components/card/imageTextCards.vue 에 Style을 변경할 수 있는 noSpace, 데이터를 변경할 수 있는 apiUrl을 옵션항목으로 정의하였습니다.
그리고, Core 프로젝트에 src/main/resources/schema/core/builder/prop/serviceProp 폴더 하위에 props들을 저장할 수 있는 NodeType을 생성합니다.
Core 프로젝트의 src/main/resources/schema/core/builder/component/serviceComponentData.json 컴포넌트 데이터에 componentPropsClass에 위에서 추가한 tid를 적어줍니다.
componentPropsClass를 적용하고 Service Editor를 보면 "컴포넌트 설정" 버튼이 표시됩니다.
스타일 변경을 위해 "noSpace" 옵션을 "true"로 변경합니다.
다음과 같이 스타일이 변경되어 Service Editor에 표시됩니다.
컴포넌트에 사용되는 데이터는 api를 지정하여 개발할 수도 있고 Service Editor에서 apiUrl을 전달받아서 처리하는 방식도 있습니다.
3. 컴포넌트 데이터 적용
apiUrl을 지정하지 않았을 경우에 기본으로 적용할 데이터 NodeType을 추가하여 연결해 보겠습니다.
Core 프로젝트에 src/main/resources/schema/services/content 하위에 NodeType을 추가합니다.
동일한 위치에 Default 데이터 json 파일도 추가합니다.
서비스에서 사용할 api 설정도 추가합니다.
Service-basecamp 프로젝트에 src/default/theme/assan/components/card/imageTextCards.vue 에 apiUrl의 default 설정을 합니다.
Service Editor에 다음과 같이 데이터가 변경되어 표시됩니다.
4. 서비스 템플릿 개발
Admin 사이트에서 테마별 서비스 템플릿을 관리 할 수 있습니다.
