Section Component - 확인중

컴포넌트 목록은 상황에 따라 추가, 삭제 및 디자인이 변경될 수 있습니다.

01. Timeline Section

시간의 흐름에 따른 정보를 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

01-1. Timeline Tree

처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.

타임라인 섹션 컴포넌트는 Timeline Tree, Timeline List 2 가지 타입이 존재하며, Default는 트리형이다.

01-2. Timeline List

BUG ICE4-4197 - Getting issue details... STATUS

BUG ICE4-4196 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : NEED CHECK

02. Gallery Section

이미지 정보를 강조하고자 할 때 사용 가능한 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

02-1. Swipe

처음 타임라인 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다.

갤러리 섹션 컴포넌트는 Swipe, Grid 2 가지 타입이 존재하며, Default는 스와이프형이다.

02-2. Grid

NEED CHECK ICE4-4198 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/GallerySection

03. Table Section

정보를 테이블로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

03-1. Free space no border

처음 테이블 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. 테이블 섹션 컴포넌트는 Free space no border, Classic with border 2 가지 타입이 존재하며, Default는 프리타입이다.

03-2. Classic with border

NEED CHECK ICE4-4199 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/TableSection

04. Chart Section

정보를 차트로 표현하고자 할 때 사용 가능한 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

04-1. Compare Bar Chart

처음 차트 섹션 컴포넌트를 추가한 뒤 화면은 다음과 같다. Compare Bar Chart, Circular, Side by side 3 가지 타입이 존재하며, Default는 비교형 바 타입이다.

04-2. Circular

04-3. Side by side

NEED CHECK ICE4-4200 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/ChartSection

05. Countdown Section

카운트 다운 기능이 필요할 경우 사용하는 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트를 추가한 초기 화면은 다음과 같다.

NEED CHECK ICE4-4201 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/CountdownSection

06. Step Section

스텝을 강조하는 컨텐츠를 만들고자 할 경우, 스텝 섹션 컴포넌트를 활용할 수 있다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

06-1. Card Type

스텝 섹션 컴포넌트를 추가한 화면은 다음과 같다. Card, Timeline 2 가지 타입이 존재하며, Default는 카드형이다.

06-2. Timeline Type

NEED CHECK ICE4-4202 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/StepSection

07. Upcoming Event

다가오는 이벤트를 표현하고자 할 경우, 사용 가능한 업커밍 이벤트 섹션 컴포넌트이다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트를 빌더에 처음 추가하면 다음과 같다.

NEED CHECK ICE4-4203 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/UpcomingEvent

08. SNS

SNS를 연결해야할 경우 SNS 섹션 컴포넌트를 사용할 수 있다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

컴포넌트를 추가한 초기화면은 다음과 같다.

Images 테이블에서 추가() 아이콘을 클릭하여 다음과 같이 내용을 입력하자.

NEED CHECK ICE4-4204 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : https://dev.justten.io/ice/guide/Sns

09. Contact

컨텐츠 인터렉티브가 필요한 화면에서 컨텐츠 섹션 컴포넌트를 사용 할 수 있다.

기획 이미지와 실제 Builder 컴포넌트 셋팅 화면은 상이할 수 있습니다.

09-1. Map Right

컴포넌트 추가 시 초기 화면은 다음과 같다. 타입은 Map Right, Map Left, Address Left 3가지가 있으며, 초기 Default는 지도가 오른쪽에 있는 타입이다.

09-2. Map Left

09-3. Address Left

모든 타입의 셋팅 화면은 동일하다. 주소를 직접 입력하거나, 좌표값을 넣어 셋팅 할 수 있다.

(cf. 구글 라이브러리 연결은 안되어 있는 상태임으로 작업 시 참고 하자.)

Address : 15, Teheran-ro 10-gil, Gangnam-gu, Seoul
Location : 37.498344, 127.032778

Address	Location

지도 영역은 [Design] setting을 통해 다음과 같이 설정 할 수 있다.

버튼 영역을 클릭하여 이메일 액션을 별도로 설정 할 수 있다.

▶︎ 웹가이드 바로가기 : 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

NEED CHECK ICE4-4205 - Getting issue details... STATUS

▶︎ 웹가이드 바로가기 : 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

TIP 버튼 - 다국어 처리

지구본 모양이 있는 경우, 해당 컴포넌트 Label에 멀티 랭귀지 설정을 진행 할 수 있다. 지구본(🌎) 아이콘을 클릭하면, 다음과 같이 언어 설정 Modal이 출력된다. 한국어, 영어, 일본어, 중국어 4가지 언어를 지원하며, 다국어 기능을 적용할 각각의 필드에 해당 언어로 버튼명을 입력하고 저장하면 화면에 적용된다.