| Table of Contents |
|---|
Application 정보
...
Service Editor 화면에서 추가된 컴포넌트를 확인합니다.
추가된 컴포넌트를 다음과 같이 추가합니다.
다음과 같이 추가된 컴포넌트가 표시됩니다.
2. 컴포넌트 옵션 추가
Service Editor에서 컴포넌트에 옵션을 설정할 수 있도록 하려면 우선 UI에 props로 옵션항목을 정의하여 개발합니다.
...
componentPropsClass를 적용하고 Service Editor를 보면 Editor에서 컴포넌트 영역을 선택하면 "컴포넌트 설정" 버튼이 표시됩니다.
스타일 변경을 위해 "noSpace" 옵션을 "true"로 변경합니다.
...
다음과 같이 스타일이 변경되어 Service Editor에 표시됩니다.
컴포넌트에 사용되는 데이터는 api를 지정하여 개발할 수도 있고 Service Editor에서 apiUrl을 전달받아서 처리하는 방식도 있습니다.
...
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 사이트에서 테마별 서비스 템플릿을 관리 할 수 있습니다.
...
작성된 서비스 페이지의 데이터 json 파일을 Core 프로젝트의 src/main/resources/schema/temp/svcPage 하위에서 src/main/resources/schema/page/service/template/theme/assan 폴더로 옮겨줍니다.
구분을 위해서 json 파일명은 변경해 주는 것이 좋습니다페이지가 구분되어 좋을 것 같습니다.
4.3. Admin에서 확인
...