Application 정보

1. 컴포넌트 개발

1.1. 신규 컴포넌트 UI 선택

어드민 컴포넌트는 Ant Design(https://ant.design/docs/react/introduce), Ant Design Pro(https://pro.ant.design/docs/getting-started)를 사용합니다.

개발을 진행할 컴포넌트를 찾아서 해당 소스를 적용하면 됩니다.

이 문서에서는 Ant Design 의 "Components>Data Display>Timeline"을 선택하겠습니다.

1.2. 컴포넌트 UI 추가

FrontBuilder 프로젝트에 "src/components/common/container"하위에 컴포넌트 파일을 추가합니다.

추가한 파일에 컴포넌트에서 사용할 UI 를 소스를 개발합니다.

Admin Editor에 컴포넌트를 만들때는 Instance를 상속받고 Instance에서는 renderComponent()로 랜더링을 구현합니다.

1.3. CORE에 컴포넌트 데이터 추가

Admin Editor의 컴포넌트 메뉴에 보여지도록 하기 위해서 Core 프로젝트에 "src/main/resources/schema/core/builder/component" 하위에 "managerComponentData.json"에 추가할 컴포넌트 데이터를 넣습니다.

Admin Editor에서 보여질 컴포넌트명을 "componentId"에는 FrontBuilder 프로젝트에 "src/components" 하위 경로를 적어 줍니다.

1.4. Editor 에서 컴포넌트 확인

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

Url 규칙은 "도메인/admin/editor?type=instancePage&instancePath=생성할페이지" 입니다.

ex) http://local.i-on.net:3000/admin/editor?type=instancePage&instancePath=/admin/just10/admAccountMng2

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

추가된 컴포넌트를 다음과 같이 추가합니다.

다음과 같이 추가된 컴포넌트가 표시됩니다.

컴포넌트가 정상적으로 작성되었다면 컴포넌트 부분을 클릭하면 "컴포넌트 삭제" 와 컴포넌트명이 표시되어야 합니다.

2. 컴포넌트 옵션 추가

Admin Editor에서 컴포넌트에 옵션을 설정할 수 있도록 하려면 우선 Core 프로젝트에 "src/main/resources/schema/core/builder/prop/adminProp" 폴더 하위에 props들을 저장할 수 있는 NodeType을 생성합니다.

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

"initProps"에 "true"로 적어서 컴포넌트를 추가했을 때 props를 입력하도록 설정합니다.

FrontBuilder 프로젝트에 "src/components/common/container/Timeline.js" 에 Timeline의 "mode", Timeline.Item의 "color", "dot"을 옵션항목으로 정의하였습니다.

UI 소스를 옵션항목을 props로 받아서 처리되도록 수정합니다.

위 작업 후에, Admin Editor에서 컴포넌트 영역을 선택하면 "컴포넌트 설정" 버튼이 표시됩니다.

스타일 변경을 위해 "Mode" 옵션을 "Left", "Item Color"를 "red", "Item Dot Icon"을 "calendar"로 변경합니다.

다음과 같이 스타일이 변경되어 Admin Editor에 표시됩니다.

3. Editor 없이 Admin Page 개발

3.1. SignIn 페이지 추가

FrontBuilder에 "pages/admin" 하위에 추가할 페이지와 CSS파일을 less로 작성합니다.

3.2. server.js 설정

"/admin"을 호출하는 경우, "/admin/aaa"와 같이 특정 페이지를 호출하는 경우에 로그인정보가 없으면 SignIn 페이지가 표시되도록 설정하려고 합니다.

"/server/server.js" 파일에 로그인여부를 확인하는 부분에 다음과 같이 설정하면 됩니다.

4. 개발 참고 사항

4.1. Request props 정보

"/server/server.js" 파일에 request props 설정을 보고 request에서 사용할 수 있는 값을 확인할 수 있습니다.

"apiContext"는 호출된 url의 path로 호출될 api context를 분기할 수 있도록 값이 설정되어 있습니다.

그리고, "signed", "session"은 Core의 auth api를 호출하여 세션 정보를 조회하고 props에 넣어줍니다.

4.2. 세션데이터 조회

request에 저장되어 있는 props를 조회하기 위해서 "getRequestStore()"를 정의하고, props의 특정항목을 조회하는 경우에는 "_.get()"으로 조회하면 됩니다.