Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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

기획 이미지와 실제 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는 비교형 바 타입이다.

...

04-2. Circular

...

04-3. Side by side

...

Status
colourRed
titleneed check
Jira Legacy
serverSystem Jira
serverId843baac6-3178-3477-a407-550e40078e77
keyICE4-4200

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

...

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

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

 

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

...

Status
colourRed
titleneed check
Jira Legacy
serverSystem Jira
serverId843baac6-3178-3477-a407-550e40078e77
keyICE4-4201

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

...

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

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

 

06-1. Card Type

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

...

06-2. Timeline Type

...

Status
colourRed
titlebugNEED CHECK
Jira Legacy
serverSystem Jira
serverId843baac6-3178-3477-a407-550e40078e77
keyICE4-4202

...

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

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

 

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

...

Status
colourRed
titlebugNEED CHECK
Jira Legacy
serverSystem Jira
serverId843baac6-3178-3477-a407-550e40078e77
keyICE4-4203

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

 

...

08. SNS

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

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

 

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

...

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

...

Status
colourRed
titleNEED CHECK
Jira Legacy
serverSystem Jira
serverId843baac6-3178-3477-a407-550e40078e77
keyICE4-4204

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

...

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

(❖ 현재 구글 라이브러리 연결은 안되어 있는 상태 입니다.)

  • Address : 15, Teheran-ro 10-gil, Gangnam-gu, Seoul

  • Location : 37.498344, 127.032778

Address

Location

Image AddedImage Added

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

...

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

...

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

 

...

10. Call To Action

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

 

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

 

...

11. Subscription

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

 

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

...

15. Survey Form
Status
colourYellow
titlenew

설문조사 Config 사용 가능

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

 

▶︎ 웹가이드 바로가기 :

Status
colourRed
titleNeed check

...

대시보드에서 볼 수 있는 Board 요약 리스트

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

 

Status
colourYellow
titleBuilder check
컴포넌트 누락됨(삭제?)

...