Section Component - 확인중

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

01. Timeline Section

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

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

01-1. Timeline Tree

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

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

Open

01-2. Timeline List

bughttps://ionsdp.atlassian.net/browse/ICE4-4197

bug https://ionsdp.atlassian.net/browse/ICE4-4196

▶︎ 웹가이드 바로가기 : Need check

02. Gallery Section

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

02-1. Swipe

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

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

이미지를 추가해보자.

업로드 이미지가 5개 초과라면, 스와이프 페이지네이션이 출력된다.

헤딩과 텍스트를 추가로 설정 할 수 있다.

02-2. Grid

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

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

이미지 6개를 업로드한 화면은 다음과 같다.

이미지 8개를 업로드한 화면은 다음과 같다. 이미지를 신규로 추가하면 마지막 그리드에 추가로 출력된다.

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

03. Table Section

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

03-1. Free space no border

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

03-2. Classic with border

need check https://ionsdp.atlassian.net/browse/ICE4-4199

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

04. Chart Section

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

04-1. Compare Bar Chart

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

04-2. Circular

04-3. Side by side

need checkhttps://ionsdp.atlassian.net/browse/ICE4-4200

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

05. Countdown Section

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

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

need checkhttps://ionsdp.atlassian.net/browse/ICE4-4201

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

06. Step Section

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

06-1. Card Type

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

06-2. Timeline Type

NEED CHECK https://ionsdp.atlassian.net/browse/ICE4-4202

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

07. Upcoming Event

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

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

NEED CHECKhttps://ionsdp.atlassian.net/browse/ICE4-4203

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

08. SNS

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

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

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

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

09. Contact

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

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

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

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

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

10. Call To Action

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

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

타입은 Centered Form, Side by side 2가지가 있으며, 디폴트로 센터폼 타입이 출력 된다.

10-1. Centered Form

10-2. Side by side

NEED CHECK https://ionsdp.atlassian.net/browse/ICE4-4205

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

11. Subscription

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

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

Button Set

셋팅 옵션은 구독 신청 기능(Button) 영역과 그외( Image / SNS ) 영역, 크게 2가지로 구분 할 수 있다.

구독 신청 기능은 [Button] 설정을 통해 셋팅하며, Button 설정은 구독 컴포넌트 타입에 상관 없이 공통으로 출력되는 옵션이다. 버튼 설정 옵션은 크게 6가지로 구분하여 살펴 볼 수 있다.

1. Type : 버튼 타입{ Text, Image, Icon Only } 선택 후, 하위 옵션 설정

2. Disabled : 버튼을 비활성화 여부를 ON/OFF로 설정

3. Action Type : 액션 타입{ Default, Call API, Refresh Data, Close Modal} 선택 후, 하위 옵션 설정

4. Related Store : 제출 할 데이터를 가져올 Store를 선택

5. Use Callback : API 호출 완료 후, 다른 페이지로 Redirect callback 하는 기능

6. Design : 가로 기준으로 버튼 위치{Left, Cneter, Right}를 설정하는 기능

버튼 타입은 Text, Image, Icon Only 3가지 타입이 존재하며, 각각의 상세 설정 옵션은 다음과 같다.

• Type{Text} : 텍스트 버튼 타입

  • Label : 텍스트 레이블을 다국어로 설정 가능

  • Icon : 텍스트와 함께 아이콘을 추가 삽입 가능

• Type{Image} : 이미지 버튼 타입

  • Image : 버튼으로 사용할 이미지 업로드 가능

• Type{Icon Only} : 아이콘 버튼 타입

  • Icon : 아이콘 선택 가능

TIP 버튼 - 다국어 처리

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

액션 타입은 Default, Call API, Refresh Data, Close Modal 4가지 타입이 존재한다.

• Default : Link를 활용한 기본 액션

• Call API : Api를 활용한 액션 설정

• Refresh Data : 새로고침 액션

• Close Modal : 모달 닫힘 액션

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

tip Related Store(Store ID) & Container

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

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

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

• Prevent Multi-click : 다중 클릭을 방지하는 기능

• Callback Action Type : 콜백 액션 타입{Redirect}을 선택

• Callback Redirect Page : 콜백 Redirect 페이지를 선택

11-1. Simple Image

설정 영역은 크게 Button, Image 2개 영역으로 나뉜다.

( 버튼 설정 참고 : Section Component - 확인중 | Button Set)

이미지 설정은 Subscription 컴포넌트 설정에 출력되는 Image 를 셋팅하거나, 화면에서 이미지를 바로 클릭하여 설정을 진행 할 수 있다. ( 이미지 설정 참고 : Element Components [19] | 06. Image )

11-2. Social Network

설정 영역은 크게 Button, XXXXXXX 2개 영역으로 나뉜다.

( 버튼 설정 참고 : Section Component - 확인중 | Button Set)

need check https://ionsdp.atlassian.net/browse/ICE4-4206

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

12. Card Section

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

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

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

카드 섹션 유형{Swipe, List, Tab}을 선택 할 경우, 카드타입{ Product Detail, Product Simple, Image on Top, Background Image }을 하위 옵션으로 선택 할 수 있다. 카드 섹션 유형{Column}을 선택할 경우, 카드타입이 아닌, 컬럼타입을 하위 옵션으로 제공한다. ( 컬럼 타입 참고 Section Component - 확인중 | 12 4. Column Type )

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

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

데이터 유형별 데이터 설정

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

데이터 유형{Data Selection}의 경우, 대상 노드 유형을 선택하고 해당 노드 유형에 있는 Item을 다중 선택하여 출력할 데이터를 셋팅한다. 데이터 유형{Use API}의 경우, API 바인딩을 선택하여 셋팅한다.

12-1. Swipe Type

카드 섹션 컴포넌트를 추가한 첫 화면은 다음과 같다. Default로 Swipe 카드 섹션 유형이 출력된다. 스와이프타입은 데이터 목록을 스와이프로 표현 하고자 하는 경우 사용하는 타입이다.

예를 들어, 스와이프가 가능한 상품 목록 화면을 만들고자 한다면, 다음과 같이 설정해보자.

• Card Type{Product Detail} : 디테일 정보가 있는 상품 카드 타입을 원할 경우 선택

• 데이터 유형{Data Selection} : 등록된 데이터 목록 중, 노출 시킬 데이터를 직접 선택하는 방법

  • 대상 노드 유형{사이트 상품} : 상품 목록임으로 사이트 상품 노드를 선택

  • Items : 해당 노드에 등록된 상품 목록 중, 노출 시킬 데이터 다중 선택

• Show Title : 카드 상단 타이틀의 노출여부 ON/OFF 설정

• Show Button : 카드 하단에 버튼 노출여부 ON/OFF 설정

  • Button(Table) : 추가 버튼이 필요 할 경우 버튼 추가 가능 (ex. 버튼 클릭시 'A' 페이지로 이동)

• Show Like Button : 좋아요() 아이콘 사용여부 ON/OFF 설정

• Background Color : 컴포넌트 배경 화면 칼라 지정 가능

미리보기를 클릭하여, 설정 적용을 확인하자. 좌우 스와이프 기능이 정상 작동되는 것을 확인 할 수 있다.

12-2. List Type

리스트 타입으로 데이터 목록을 표현 하고자 하는 경우 사용하는 타입이다. 위 카드타입 설정을 그대로 유지하고 카드 섹션 유형만 List Type으로 변경해보자. 아래와 같이 3가지 옵션이 추가로 출력된다.

• Show Card Number : 카드 상단에 넘버링을 표기하는 기능

• Show Card Number(input) : 기본으로 출력 할 카드 개수를 설정하는 기능, 주로 더보기 버튼과 함께 설정

• Show Load More Button : 더보기(현재 페이지 유지하고 데이터 추가 출력) 버튼 사용 여부 설정

예를 들어, 순위 넘버링이 있는 리스트 형태의 상품 목록 화면을 만들고자 하는 경우 다음과 같이 옵션 설정을 변경해 볼 수 있다. (1)타이틀을 MD PICK BEST로 변경하고, (2)Items > 데이터를 좀 더 추가하자. 그리고 (3)카드 넘버링과 더보기 버튼 사용(데이터 추가 로딩)을 ON으로 설정하자. 기존에 셋팅했던 Show Button은 OFF로 변경하자.

• Show Title : 카드 상단 타이틀의 노출여부 ON/OFF 설정

• Show Button : 카드 하단에 버튼 노출여부 ON/ OFF 설정

• Show Card Number : 카드 상단에 넘버링 표기 ON/OFF 설정

• Show Card Number(input) : 기본으로 출력 할 카드 개수 8로 입력

• Show Load More Button : 더보기(현재 페이지 유지하고 데이터 추가 출력) 버튼 사용 여부 ON/OFF 설정

• Show Like Button : 좋아요() 아이콘 사용여부 ON/OFF 설정

• Background Color : 컴포넌트 배경 화면 칼라 지정 가능

미리보기를 클릭하여, 설정 적용을 확인하자. 목록 넘버링 정상 출력과 더보기 버튼 정상 작동을 확인 할 수 있다.

need check https://ionsdp.atlassian.net/browse/ICE4-4213

12-3. Tab Type

탭 타입으로 데이터 목록을 표현 하고자 하는 경우 사용하는 타입이다. 위 설정을 그대로 유지하고 카드 섹션 유형만 Tab Type으로 변경해보자. 카드 타입 옵션을 기준으로 아래와 같이 2개 옵션이 추가로 출력되는 것을 확인 할 수 있다.

• Use Items As Tab : 아이템을 탭메뉴로 사용하는 기능, Default{ OFF}

• Selected Category : 탭에 출력할 카테고리 선택 기능

CASE 1. 카테고리 탭메뉴

Use Item As Tab을 OFF로 유지하고, Selected Category에서 원하는 카테고리를 다중 선택하자.

저장하면, 다음 화면과 가이 선택한 카테고리가 탭메뉴로 출력된다. Default는 전체이며, 두번째 탭부터 선택 순으로 탭메뉴가 출력된다. 탭메뉴 클릭 시, 해당 카테고리에 속한 상품이 출력된다.

CASE 2. 아이템 탭메뉴

Use Item As Tab을 ON 으로 변경하고 저장하자. 다음과 같이 선택해놓은 Items가 탭메뉴로 출력되는 것을 볼 수 있다.

12-4. Column Type

이미지 카드 타입으로 데이터 목록을 표현 하는 타입이다. 위 설정을 그대로 유지하고 카드 섹션 유형만 Column Type으로 변경해보자. 카드 타입 옵션을 기준으로 아래와 같이 1개 옵션이 추가로 출력되는 것을 확인 할 수 있다.

• Column Type : 이미지 카드 콜롬 종류 선택 가능, Default{ Default}

컬럼 타입은 아래와 같이 Default, Masonary, Three column, Three column with 7 items 4가지가 있다.

❖ 각 타입별 UI는 아래 캡쳐 이미지를 참고하자.

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

13. Banner Section

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

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

데이터 유형별 데이터 설정

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

데이터 유형{Banner Selection}의 경우, 배너 카테고리를 선택하고 해당 배너 카테고리에 있는 배너 데이터를 다중 선택하여 출력할 데이터를 셋팅한다. 데이터 유형{Use API}의 경우, API 바인딩을 선택하여 셋팅한다.

13-1. Swiper Type

스와이프 타입으로 배너를 나열하고자 하는 경우 사용하는 타입이다. 다음과 같이 셋팅 해보자.

• 데이터 유형{Banner Selection} : 등록된 데이터 목록 중, 노출 시킬 데이터를 직접 선택하는 방법

  • 배너 카테고리{슬라이드배너} : 상품 목록임으로 사이트 상품 노드를 선택

  • 배너 선택 : 해당 배너 카테고리에 등록된 배너 목록 중, 노출 시킬 데이터 다중 선택

• Use Full Size : 화면 가로 사이즈 Full 사용여부 ON/OFF 설정

• Auto Play : 자동 재생 기능 사용여부 ON/OFF 설정

• Hide Pagination : 페이지네이션 숨김여부 ON/OFF 설정

  • Pagination : 페이지네이션 타입{Dot, Number, Number with Navigation} 선택

• Top Space : 배너 상단 공간 10 설정

13-2. Columns Type

컬럼 타입으로 배너를 나열하고자 하는 경우 사용하는 타입이다. 다음과 같이 셋팅 해보자.

• 데이터 유형{Banner Selection} : 등록된 데이터 목록 중, 노출 시킬 데이터를 직접 선택하는 방법

  • 배너 카테고리{슬라이드배너} : 상품 목록임으로 사이트 상품 노드를 선택

  • 배너 선택 : 해당 배너 카테고리에 등록된 배너 목록 중, 노출 시킬 데이터 다중 선택

• Use Full Size : 화면 가로 사이즈 Full 사용여부 ON/OFF 설정

• Top Space : 배너 상단 공간 50 설정

13-3. Random Type

랜덤 타입으로 배너를 출력하고자 하는 경우 사용하는 타입이다. 다음과 같이 셋팅 해보자.

• 데이터 유형{Banner Selection} : 등록된 데이터 목록 중, 노출 시킬 데이터를 직접 선택하는 방법

  • 배너 카테고리{띠배너} : 상품 목록임으로 사이트 상품 노드를 선택

  • 배너 선택 : 해당 배너 카테고리에 등록된 배너 목록 중, 노출 시킬 데이터 다중 선택

• Use Full Size : 화면 가로 사이즈 Full 사용여부 ON/OFF 설정

• Top Space : 배너 상단 공간 50 설정

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

14. Board new

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

아래 그림과 같이 백오피스 플랫폼 콘솔에서 Board Config 를 미리 만들도록 하자.

생성한 Board Config는 다음과 같이 Board Config 옵션으로 출력된다.

Board의 구성 옵션은 Banner Section 및 Survey Form과 동일하다. 관리자에 의한 구성 및 데이터 관리를 위한 관리 페이지가 있다. 사용자가 데이터를 생성하므로 이 구성 요소에는 초기 시간에 데이터가 없고, 컴포넌트 설정 옵션도 없다.

보드 컴포넌트의 주요 목적은 사용자의 컨텐츠 관리(리스트 페이지, 상세보기, 투고 작성, 갱신, 삭제 포함)이다.

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

14-1. Gallery Board

14-2. Blog Grid Board

14-3. Blog Board

14-4. QA Board

14-5. FAQ Board

14-6. General Board

▶︎ 웹가이드 바로가기 : Need check

15. Survey Form new

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

아래 그림과 같이 백오피스 플랫폼 콘솔에서 Survey Config 를 미리 만들도록 하자.

미리 만들어 놓은 Survey Config를 선택하면, 다음과 같이 화면을 확인 할 수 있다.

[Example] 신규 추가() 하기는 아래 비디오를 참고하자.

▶︎ 웹가이드 바로가기 : Need check

16. Board Summary

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

Board에서 많은 데이터를 가져와 목록으로 표시하며, Board 페이지로 이동하기 위한 링크를 설정 할 수 있다.

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

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

/demotest3 : 보드 요약 사용

▶︎ 웹가이드 바로가기 : Need check