Header Component - 버그 수정중

Owned by DXP Angela (Unlicensed)
Last updated: Mar 14, 2022
6 min read

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

 

 

 

 

01. With Background

백그라운드와 함께 사용할 수 있는 헤더 컴포넌트이다. 백그라운드 헤더는 Text, Swipe Cards 2가지 타입이 있다.

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

 

01-01. Text Type

Default는 Text 타입으로, 백그라운드 헤더 컴포넌트 추가 시 다음과 같이 텍스트와 버튼이 화면에 출력된다.

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

텍스트(“Enter text here") 영역을 마우스로 클릭하면, 다음과 같이 텍스트 셋팅 영역이 우측에 출력된다.

원하는 텍스트를 HTML로 입력하고 저장하자.

버튼을 클릭하면, 버튼 컴포넌트의 셋팅 옵션이 우측에 출력된다. 원하는 설정을 진행하고 저장하자.

버튼의 디자인을 설정 할 수도 있다.

 

설정 완료 후 미리보기 아이콘을 클릭하여 셋팅 결과를 미리 확인 할 수 있다.


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

 

 

 

01-02. Card Type

Swipe card 타입으로, 백그라운드 헤더 컴포넌트를 설정 하면, 다음과 같이 텍스트와 Swipe가 화면에 출력된다.

배경 이미지를 추가하면 다음과 같이 백그라운드로 추가한 이미지가 삽입된다.

Card영역에서 추가( ) 아이콘을 클릭하자. 다음과 같이 카드 이미지 셋팅 옵션이 Modal로 출력된다.

카드 이미지와 함께 버튼을 추가하면, 다음과 같이 화면에 반영된다.


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

 

 

 

02. with Countdown

카운트다운과 함께 사용하는 헤더 컴포넌트이다.

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

 

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

 

카운트다운 헤더는 Text, Circular, Icon Countdown 3가지 타입이 있다.

모든 카운트다운 헤더에 공통으로 들어가는 카운트다운 UI 타입은 End Date와 D-day 2가지가 있다.

  • End date : 카운트다운 종료일시를 직접 지정하여 셋팅

  • D-day : 카운트다운을 시작할 Base Date를 지정하고, 카운트할 D-day 일수를 지정하여 셋팅

End date

D-day

 

Icon Countdown의 경우에만, 아이콘 설정 관련 옵션이 추가로 출력된다.

 

카운트다운 헤더 종류와 카운트 UI타입별 결과물은 다음과 같다.

 

카운트 타입{End date}

카운트 타입{D-day}

Text

Circular

Icon


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

 

 

 

03. with Video

비디오와 함께 사용되는 헤더 컴포넌트이다.

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

 

컴포넌트 추가 후, 다음과 같이 영상과 버튼, 2개의 셋팅 옵션 영역을 확인할 수 있다.

 

비디오는 Upload, Url 2가지 방법으로 셋팅 할 수 있다. 유투브 URL을 삽입하고 저장하면, 아래와 같이 영상이 화면내에서 Play된다. (ex. 아이온커뮤니케이션즈 유투브 영상 : https://www.youtube.com/watch?v=fq6kI35Kfmg)

 

추가로 설정 가능한 옵션은 다음과 같다. 모두 ON으로 설정 후 확인해보자.

  • Display Controls : 동영상 재생 관련 컨트롤러 출력 여부 설정

  • Auto Play : 동영상이 자동으로 바로 시작되는 기능 사용 여부 설정

  • Loop : 동영상 종료 후, 루프로 반복 재생되는 기능 사용 여부 설정

  • Muted : 무음처리 기능 사용 여부 설정

 

설정이 완료되었다면, 화면 상단 중앙에 있는 Preview를 클릭하여, 미리보기를 진행하자.

Header with Video가 아래와 같이 출력된다. 화면에 마우스 오버시 Display Controls가 출력되고, Auto Play로 영상은 화면 진입시 바로 자동 재생된다. Loop가 ON이기 때문에 영상 종료 후에도 계속 반복 재생되고, Muted 처리되어 음소거 상태로 영상이 재생된다. Muted를 화면에서 해제하여 소리나게 변경할 수 있다.

 


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

 

 

 

04. with Chart

챠트를 함께 사용하는 헤더 컴포넌트이다.

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

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

 

 

버그 https://ionsdp.atlassian.net/browse/ICE4-4174


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

 

 

 

05. with Device

디바이스 이미지를 삽입하여 활용할 수 있는 헤더 컴포넌트이다.

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

 

컴포넌트를 추가시 Default 화면은 다음과 같다.

 

디바이스 이미지 삽입을 원치 않는다면 Hide Image 옵션을 ON으로 설정하면 된다.

Heading과 Text는 해당 영역을 클릭하여 설정할 수 있다.

  • Type : 헤딩의 크기 선택

  • Text : 헤딩에 입력될 문자 설정

  • Background : 헤딩 BG 칼라 설정

  • Setting : 기본으로 제공하는 preset과 Customized 로 선택 가능

    • Font Family : 폰트 설정

    • Size(px) : 헤딩 사이즈 값 직접 입력

    • Line Spacing : 헤딩 위 아래 라인 간격 설정

    • Character : 노출 문자 개수 설정 가능

    • Color : 헤딩 문자 칼라 설정

    • Align : 헤딩 정렬 설정

    • Option : 볼드(헤딩의 경우, 이미 볼드 처리가 되어 있음), 기울기, 밑줄, 취소선 선택 가능

 

 

버튼을 추가, 삭제, 수정 할 수 있다.

설정() 아이콘을 클릭하면 버튼 상세 설정 화면이 Modal로 출력 된다.

버튼에 앱스토어, 구글 플레이 다운로드 링크를 설정한뒤 저장하자.

 

 

 

 

bug 타입별 결과화면 확인 불가

https://ionsdp.atlassian.net/browse/ICE4-4148

 


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