Page Comparison

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

...

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

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

01-1. Timeline Tree

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

...

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

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

02-1. Swipe

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

...

그리드 타입의 갤러리의 설정 화면은 다음과 같다.

...

이미지를 추가하고, 이미지와 버튼을 추가로 설정 할 수 있다. 이미지 4개를 업로드한 화면은 다음과 같다.

...

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

기획 이미지와 실제 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는 지도가 오른쪽에 있는 타입이다.

...

액션 호출이 필요할 경우, 콜투액션 섹션 컴포넌트를 사용할 수 있다.

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

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

...

구독 신청이 필요한 영역에서 주로 사용하는 색션 컴포넌트이다.

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

구독 컴포넌트는 Simple Image(Default)와 Social Network 2가지 타입이 있다.

...

Text	Image	Icon Only

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

...

Default	Call API	Refresh Data	Close Modal
< URL 옵션 선택 >	<Api Category 선택> <Custom Api 사용>	(하위 옵션 없음)	(하위 옵션 없음)

액션 타입{Default}에서 선택 가능한 Link 옵션은 {URL, Page, Anchor, Document, Email, Phone Number, Modal, None}으로 총 8가지가 있다. 각각의 Link 타입 선택시 출력되는 하위 옵션은 다음과 같다.

URL	Page	Anchor	Document
Email	Phone Number	Modal	None

FO-Builder > Layout > Container 컴포넌트가 있다. 이 Container를 화면에 추가하여 Store를 설정 할 수 있다. 입력 구성 요소와 버튼을 Container에 넣으면 관련 Store를 로드하여 선택 할 수 있다.

❖ Subscription 컴포넌트의 Related Store(store id)는 현재 사용할 수 없다. 상세 설정법은 개발팀에 문의하자.

...

콜백 사용{ON}을 설정하면 다음과 같이 상세 옵션이 출력된다.

...

카드타입 섹션 컴포넌트이다. API를 활용하여 상품목록, 블로글 목록, 이벤트/기획전 목록 등에 활용 할 수 있다.

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

카드 섹션 유형은 Swipe, List, Tab, Column 으로 총 4가지 타입이 있다.

Swipe	List	Tab	Column

카드 섹션 유형과 카드 타입 설정

카드 섹션 유형{Swipe, List, Tab}을 선택 할 경우, 카드타입{ Product Detail, Product Simple, Image on Top, Background Image }을 하위 옵션으로 선택 할 수 있다. 카드 섹션 유형{Column}을 선택할 경우, 카드타입이 아닌, 컬럼타입을 하위 옵션으로 제공한다. ( 컬럼 타입 참고 https://ionsdp.atlassian.net/wiki/spaces/ICE4P/pages/2205155351/Section+Component+-#12-4.-Column-Type )

...

좋아요, 리뷰, 가격 등의 상세 정보가 각각의 카드에 비노출 되는 것을 확인 할 수 있다.

...

데이터 유형별 데이터 설정

데이터 유형은 Data Selection, Use API 2가지가 존재하며, 유형 선택에 따라 하위 설정이 각각 상이하다.

...

배너 컴포넌트이다. 홈메인, 카테고리 페이지, 상품 목록 페이지 등에 해당 컴포넌트를 활용 할 수 있다.

배너 섹션 컴포넌트의 배너 유형은 Swiper, Columns, Random 3가지 타입이다. 타입별 설정 옵션은 다음과 같다.

Swiper	Columns	Random

데이터 유형별 데이터 설정

데이터 유형은 Banner Selection, Use API 2가지가 존재하며, 유형 선택에 따라 하위 설정이 각각 상이하다.

...

자주 사용하는 보드를 타입별로 사용 할 수 있다. (ex. 상품리뷰, 갤러리, 블로그, Q&A, FAQ, 일반 게시판 등등)

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

...

[Example] General Board, 가장 보편적으로 사용하는 게시판 기본 형태이다.

...

[Example] Board 사용 예시예시는 아래 영상을 참고 하자.

...

▶︎ 웹가이드 바로가기 :

...

설문조사 폼이 필요하다면 Survey Form 컴포넌트를 이용할 수 있다.

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

...

▶︎ 웹가이드 바로가기 :

...

16. Board Summary

Board Summary는 Board 컴포넌트 페이지에 대한 바로 가기 링크이다.

[Example] 컴포넌트를 설정은 다음 영상을 참고 하자.

...

/demotest2 : 보드 컴포넌트가 내장된 페이지

/demotest3 : 보드 요약 사용

▶︎ 웹가이드 바로가기 :

...