...

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

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

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

...

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에서도 데이터의 순서가 변경된 것을 확인 할 수 있습니다.

...