...

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

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

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

...

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

1.5. Editor 에서 컴포넌트 확인

Service Editor는 manager 관리 사이트의 사이트 메뉴 관리 메뉴에서 빌더 버튼을 클릭해서 이동하거나, 직접 Url 를 입력해서 이동 할 수 있습니다.

Url 규칙은 "도메인/manager/사이트아이디/editor?editPath=생성할페이지&type=svcPage" 입니다.

ex) https://dev-builder.justten.io/manager/just10/editor?editPath=/&siteId=ionRestaurant&type=svcPage

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

...

Service-basecamp 프로젝트에 src/default/theme/assan/components/card/imageTextCards.vue 에 Style을 변경할 수 있는 "noSpace", 데이터를 변경할 수 있는 apiUrl을 "apiUrl"을 옵션항목으로 정의하였습니다.

그리고, Core 프로젝트에 src/main/resources/schema/core/builder/prop/serviceProp 폴더 하위에 props들을 저장할 수 있는 NodeType을 생성합니다.

...

Core 프로젝트의 src/main/resources/schema/core/builder/component/serviceComponentData.json 컴포넌트 데이터에 componentPropsClass에 "componentPropsClass"에 위에서 추가한 tid를 적어줍니다.

componentPropsClass를 "componentPropsClass"를 적용하고 Service Editor에서 컴포넌트 영역을 선택하면 "컴포넌트 설정" 버튼이 표시됩니다.

...

컴포넌트에 사용되는 데이터는 api를 지정하여 개발할 수도 있고 Service Editor에서 apiUrl을 "apiUrl"을 전달받아서 처리하는 방식도 있습니다.

3. 컴포넌트 데이터 적용

apiUrl을 "apiUrl"을 지정하지 않았을 경우에 기본으로 적용할 데이터 NodeType을 추가하여 연결해 보겠습니다.

...

Service-basecamp 프로젝트에 src/default/theme/assan/components/card/imageTextCards.vue 에 apiUrl의 "apiUrl"의 "default" 설정을 합니다.

Service Editor에 다음과 같이 데이터가 변경되어 표시됩니다.

...

컴포넌트 설정 화면에서 "데이터 관리 페이지" 영역의 "+" 버튼을 클릭 합니다.

"명칭" 부분에 입력된 텍스트가 컴포넌트 버튼 영역에 버튼명으로 노출됩니다.

"InstancePage" 부분에서는 빌더로 이미 작성되어 있는 페이지 경로를 입력하면 해당페이지가 모달창으로 표시됩니다.

새로 페이지를 작성해야 하는 경우에는 생성될 페이지 경로를 입력하고 "빌더" 버튼을 클릭하면 데이터관리페이지를 페이지를 만들 수 있습니다.

"이미지 텍스트 카드의 카드"의 데이터를 관리하는 페이지를 생성해 보겠습니다.

다음과 같이 명칭, InstancePage를 "InstancePage"를 입력하고 "빌더" 버튼을 클릭하여 Admin Editor를 열고 컴포넌트 설정 창의 "Update" 버튼을 클릭해 "데이터 관리 페이지" 정보를 저장합니다.

...

Admin Editor는 다음과 같이 경로가 표시됩니다.

왼쪽 메뉴에서 컴포넌트를 "컴포넌트"를 선택하고 컨테이너 > Sortable Card List 를 선택합니다.

"Sortable Card List" 를 다음과 같이 페이지에 추가합니다.

그리고, 열리는 "컴포넌트 설정" 창에서 "Target NodeType"을 "이미지 텍스트 카드"로 검색하여 선택합니다.

컴포넌트 설정은 "컴포넌트 설정"은 다음과 같이 추가적인 설정을 할 수 있지만, 여기서는 기본 설정으로 저장하겠습니다.

다음과 같이 페이지가 생성되었습니다.

...

다시 Service Editor에서 컴포넌트 영역을 선택하면 위에서 추가한 "이미지 텍스트 카드 데이터 관리" 버튼이 보입니다.(혹시 바로 반영이 되지 않는다면 화면을 "새로고침" 하시면 됩니다.)

"이미지 텍스트 카드 데이터 관리" 버튼을 클릭하면 등록되어 있는 "이미지 텍스트 카드의 카드"의 데이터가 "Sortable Card List" 형식으로 보여집니다.

첫번째로 표시되는 데이터는 두번째로 드래그앤드롭 하게 되면 정렬 순서가 변경되었다는 메세지가 왼쪽 상단에 표시되는 것을 확인 할 수 있습니다.

다음과 같이 Service Editor에서도 데이터의 순서가 변경된 것을 확인 할 수 있습니다.

...

Admin 사이트에서 테마별 서비스 템플릿을 관리 할 수 있습니다.

...

5.1. Service Editor로 페이지 작성

Manager 사이트의 사이트메뉴관리 메뉴를 통해서 Service Editor 로 이동합니다.

...

그리고, Core 프로젝트의 src/main/resources/schema/temp/svcPage 하위에 저장된 데이터가 json 파일 형태로 생성 됩니다.

서비스 페이지 작성은 SERVICE PAGE USER GUIDE/wiki/spaces/ICE3/pages/262307861 를 참고해서 작성하면 됩니다.

...

5.2. 작성된 페이지를 template으로 관리

Editor를 통해서 페이지 생성, 수정 등의 작업을 하면 해당 서버에 캐시데이터로 바로 저장이 됩니다.

하지만, 다른 서버에도 동일한 페이지를 적용해야 하는 경우에는 다음과 같이 작업한 페이지를 특정 위치로 이동시켜서 적용하는 서버에 schema 를 반영해주어야 합니다.

작성된 서비스 페이지의 데이터 json 파일을 Core 프로젝트의 src/main/resources/schema/temp/svcPage 하위에서 src/main/resources/schema/page/service/template/assan 폴더로 옮겨줍니다.

구분을 위해서 json 파일명은 변경해 주는 것이 페이지가 구분되어 좋을 것 같습니다.

...

5.3. Admin에서 확인

Manager 사이트의 사이트메뉴관리 메뉴에서 assan Restaurant theme 의 "관리" 버튼을 클릭하여 작성된 페이지 목록을 확인합니다.

...