Web - Chip

정의

Chip

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

category_choice

40px

(medium)

Web - TextLabel 참고

• styleTheme : caption1Regular

• singleLineMode : use

• size : 16

• fillType : line

• iconName : ic_filter

• size : 12 (터치 영역 24x32)

• fillType : line

• iconName : ic_xmark

filter_single,

filter_multi

32px

(small)

Web - TextLabel 참고

• styleTheme : caption1Regular

• singleLineMode : use

• size : 16

N/A

removable

32px

(small)

Web - TextLabel 참고

• styleTheme : caption1Regular

• singleLineMode : use

N/A

• size : 12 (터치 영역 24x32)

• fillType : line

• iconName : ic_xmark

label, time

20px

Web - TextLabel 참고

• styleTheme : caption2Bold

• singleLineMode : use

N/A

N/A

information

24px

(xsmall)

Web - TextLabel 참고

• styleTheme : caption2Regular

• singleLineMode : use

N/A

N/A

category_choice

• text color

  • TextLabel

    • colorTheme : sysTextPrimary

• icon color(left) : ui_cpnt_chip_line_icon_01

• border color : ui_cpnt_chip_line_border_01

• base color (hover 시)
  ui_cpnt_chip_fill_base_inactive

• text color

  • TextLabel

    • colorTheme : usrTextBrandOnPrimary

• icon color(right) : ui_cpnt_chip_fill_icon_active_01

• base color : ui_cpnt_chip_fill_base_active_01

filter_single,

filter_multi

text color

• TextLabel

  • colorTheme : sysTextSecondary

• icon color(left) : ui_cpnt_chip_line_icon_02

• base color : ui_cpnt_chip_fill_base_inactive

text color

• TextLabel

  • colorTheme : usrTextBrandOnPrimary

• icon color(left) : ui_cpnt_chip_fill_icon_active_01

• base color : ui_cpnt_chip_fill_base_active_01

removable

• text color

  • TextLabel

    • colorTheme : sysTextSecondary

• icon color(right) : ui_cpnt_chip_fill_icon_inactive

• base color : ui_cpnt_chip_fill_base_inactive

label

• text color

  • TextLabel

    • colorTheme : sysTextTertiary

• border color : ui_cpnt_chip_line_border_01

time

• text color

  • TextLabel

    • colorTheme : sysTextWhite

• base color : ui_cpnt_chip_base_playtime

information

• text color

  • TextLabel

    • colorTheme : sysTextPrimary

• base color : ui_cpnt_chip_fill_base_inactive

enum

'filter_single'

'category_choice'

카테고리 등을 선택할 때 사용합니다.

'filter_single'

필터의 역할을 하며, 여러 개의 칩들 중 한개 선택 시 사용합니다.

'filter_multi'

필터의 역할을 하며, 여러 개의 칩들 중 다중 선택 시 사용합니다.

*현재는 사용하지 않습니다.

'removable'

주로 Dropdown 내 멀티 선택 시 보여지는 칩입니다.

'label'

라벨(연령, 국가, 장르)을 보여주는 칩입니다.

*현재는 클릭 액션이 없습니다.

'time'

영상의 시간을 보여주는 칩이며, 클릭 액션이 없습니다.

'information'

정보를 보여주는 칩입니다.

*현재 채널별 프로필 아이디나 결제 종류에 사용하고 있습니다.

number | string | object | Array<string | object> | undefined | null

-

enum

'none'

'none'

아이콘 없음

'left'

아이콘 좌측 위치

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

-

Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

string | number

0

string | number

-

string | number | null | boolean

-

string | number | null | boolean

-

() => void;

-

() => void;

-

김혜진, 박윤규

• 2022/08/30 : colorOverride 관련 prop 추가 - 김혜진

• 2022/07/18 : category_choice 일 때, spec 수정 - 김혜진

• 2022/04/29 : value와 id prop추가 - 안은수

• 2022/03/24 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수

• 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

• 2022/02/19 : Property 기술방법 변경 - 박윤규

• 2022/01/27 : prop 삭제 (valueArray, filterActiveNumber) - 김혜진

• 2021/11/17 : style을 styleTheme로 수정 - 김혜진

• 2021/11/16 : icon에 대한 spec 추가, prop 추가 - 김혜진

• 2021/11/11 : 행간에 대한 내용 추가 - 김혜진

• 2021/11/05 : profile_id를 information으로 수정 - 김혜진

• 2021/11/03 : profile_id 유형 추가 - 김혜진

• 2021/10/28 : chip의 전체 내용 변경 - 김혜진

• 2021/10/27 : 텍스트 사이즈 수정 - 김혜진

• 2021/10/26 : 텍스트 부분 TextLabel 값으로 수정 - 김혜진

• 2021/09/30 : Spec 내용 추가 - 김혜진

• 2021/09/13 : style 유형 추가

• 2021/09/10-11 : Property 및 Value 업데이트 - 박윤규

• 2021/09/11 : 최초작성 - 김혜진