Application 정보

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 파일도 추가합니다. 템플릿에서 사용할 데이터인 경우에는 site를 "default"로 저장합니다.

서비스에서 사용할 api 설정도 추가합니다.

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

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

4. 컴포넌트 데이터 관리 추가

컴포넌트의 데이터를 Service Editor에서도 관리 할 수 있도록 설정을 추가할 수 있습니다.

Service Editor에 컴포넌트 영역을 선택한 후 표시되는 "컴포넌트 스키마 설정" 버튼을 클릭 합니다.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. 서비스 템플릿 개발

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

4.1. Service Editor로 페이지 작성

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

Service Editor로 작성된 서비스 페이지가 없는 경우에는 신규로 생성되어 Core 프로젝트의 svcPage NodeType 에 데이터가 저장됩니다.

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

서비스 페이지 작성은 SERVICE PAGE USER GUIDE 를 참고해서 작성하면 됩니다.

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

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

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

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

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

4.3. Admin에서 확인

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

위에서 작성한 서비스 페이지가 페이지 관리 목록에 표시되는 것을 확인 할 수 있습니다.