컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.
...
시간의 흐름에 따른 정보를 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
01-1. Timeline Tree
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
...
이미지 정보를 강조하고자 할 때 사용 가능한 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
02-1. Swipe
처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.
...
정보를 테이블로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
03-1. Free space no border
...
정보를 차트로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
04-1. Compare Bar Chart
처음 차트 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. Compare Bar Chart, Circular, Side by side 3 가지 타입이 존재하며, Default는 비교형 바 타입이다.
...
카운트 다운 기능이 필요할 경우 사용하는 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기 화면은 다음과 같다.
...
스텝을 강조하는 컨텐츠를 만들고자 할 경우, 스텝 섹션 컴포넌트를 활용할 수 있다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
06-1. Card Type
스텝 섹션 컴포넌트를 추가한 화면은 다음과 같다. Card, Timeline 2 가지 타입이 존재하며, Default는 카드형이다.
...
다가오는 이벤트를 표현하고자 할 경우, 사용 가능한 업커밍 이벤트 섹션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 빌더에 처음 추가하면 다음과 같다.
...
SNS를 연결해야할 경우 SNS 섹션 컴포넌트를 사용할 수 있다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 추가한 초기화면은 다음과 같다.
...
Images 테이블에서 추가(
) 아이콘을 클릭하여 다음과 같이 내용을 입력하자.
...
컨텐츠 인터렉티브가 필요한 화면에서 컨텐츠 섹션 컴포넌트를 사용 할 수 있다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
09-1. Map Right
컴포넌트 추가 시 초기 화면은 다음과 같다. 타입은 Map Right, Map Left, Address Left 3가지가 있으며, 초기 Default는 지도가 오른쪽에 있는 타입이다.
...
모든 타입의 셋팅 화면은 동일하다. 주소를 직접 입력하거나, 좌표값을 넣어 셋팅 할 수 있다.
(❖ 현재 cf. 구글 라이브러리 연결은 안되어 있는 상태 입니다상태임으로 작업 시 참고 하자.)
Address :
15, Teheran-ro 10-gil, Gangnam-gu, SeoulLocation :
37.498344,127.032778
...
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Contact
...
10. Call To Action
액션 호출이 필요할 경우, 콜투액션 섹션 컴포넌트를 사용할 수 있다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
컴포넌트를 화면에 추가한 초기 화면은 다음과 같다.
타입은 Centered Form, Side by side 2가지가 있으며, 디폴트로 센터폼 타입이 출력 된다.
10-1. Centered Form
...
10-2. Side by side
...
| Status | ||||
|---|---|---|---|---|
|
| Jira Legacy | ||||||
|---|---|---|---|---|---|---|
|
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CallToAction
...
11. Subscription - 작성중
구독 신청이 필요한 영역에서 주로 사용하는 색션 컴포넌트이다.
 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
구독 컴포넌트는 Simple Image(Default)와 Social Network 2가지 타입이 있다. 아래 그림과 같이 구독 신청 영역과 Image / SNS 영역 크게 2가지로 영역을 구분 할 수 있다.
Simple Image |  |
|---|---|
Social Network |  |
구독 신청 기능은 [Button] 설정을 통해 셋팅 한다. Button 설정 영역은 구독 컴포넌트 타입에 상관 없이 공통으로 출력되는 옵션 영역이다. 버튼 설정 영역은 크게 5가지 옵션으로 구분 할 수 있다.
Type : 버튼 타입{
Text,Image,Icon Only} 선택 후, 하위 옵션 설정Disabled : 버튼을 비활성화 여부를 ON/OFF로 설정
Action Type : 액션 타입{
Default,Call API,Refresh Data,Close Modal} 선택 후, 하위 옵션 설정Related Store :
Use Callback :
버튼 타입은 Text, Image, Icon Only 3가지 타입이 존재하며, 각각의 상세 설정 옵션은 다음과 같다.
Type{
Text} : 텍스트 버튼 타입Label : 텍스트 레이블을 다국어로 설정 가능
Icon : 텍스트와 함께 아이콘을 추가 삽입 가능
Type{
Image} : 이미지 버튼 타입Image : 버튼으로 사용할 이미지 업로드 가능
Type{
Icon Only} : 아이콘 버튼 타입Icon : 아이콘 선택 가능
Text | Image | Icon Only |
|---|---|---|
 |  |  |
| Status | ||||
|---|---|---|---|---|
|
지구본 모양이 있는 경우, 해당 컴포넌트 Label에 멀티 랭귀지 설정을 진행 할 수 있다. 지구본(🌎) 아이콘을 클릭하면, 다음과 같이 언어 설정 Modal이 출력된다. 한국어, 영어, 일본어, 중국어 4가지 언어를 지원하며, 다국어 기능을 적용할 각각의 필드에 해당 언어로 버튼명을 입력하고 저장하면 화면에 적용된다.
...
버튼 타입별 옵션 외, 공통으로 출력되는 버튼 설정 옵션은 다음과 같다.
Disabled : 버튼을 비활성화 여부를 ON/OFF로 설정
Action Type : 액션 종류 선택 (
Default,Call API,Refresh Data,Close Modal) 후, 하위 옵션 설정
...
Default | Call API | Refresh Data | Close Modal |
|---|---|---|---|
 |  |  |  |
 |
11-1. Simple Image
설정 영역은 크게 Button, Image 2개 영역으로 나뉜다.
11-2. Social Network
설정 영역은 크게 Button, XXXXXXX 2개 영역으로 나뉜다.
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Subscription
...
12. Card Section
  기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CardSection
...
Swiper, Columns, Random 유형의 배너 섹션 사용 가능   기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/BannerSection
...
상품리뷰, 갤러리, 블로그, Q&A, FAQ, 일반 게시판 Config 사용 가능  기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 :
| Status | ||||
|---|---|---|---|---|
|
...
15. Survey Form
| Status | ||||
|---|---|---|---|---|
|
설문조사 Config 사용 가능  기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
▶︎ 웹가이드 바로가기 :
| Status | ||||
|---|---|---|---|---|
|
...
대시보드에서 볼 수 있는 Board 요약 리스트 기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다. |
| Status | ||||
|---|---|---|---|---|
|
...