Web - BoxItem (Added in 2.2)

정의

BoxItem

최적화 대상

Desktop

Mobile

기획 배포

진행 중

디자인 가이드 배포

진행 중

개발 코드 배포

진행 중

Do

• 좌측 구성(selection, image or icon 영역)은 함께 존재할 수 있습니다.

• 우측 구성은 IconButton이 3개까지 올 수 있습니다.

  • 수정, 삭제, 상세와 같은 표현 가능

• 면적은 선택 상태가 존재합니다.

  • 정해진 border가 표현됩니다.

• displayType의 해당 value일 때 전체 클릭을 사용할 수 있습니다.

  • none

  • ibtn_amount1

  • checkbox

  • radio → 현재 제공 x

• 전환(상세)이 일어나는 경우는 필히 ibtn_amount1을 사용해야 합니다.

  • 해당 value에서 사용되는 아이콘은 ic_arrow_right (우측 화살표)입니다.

Don’t

• 좌측 구성(selection, image or icon 영역)은 서로 순서를 바꿀 수 없습니다.

  • badge가 selection 앞으로 이동 불가

• displayType의 value가 ibtn_amount2, ibtn_amount3일 때는 전체 클릭을 사용해서는 안됩니다.

  • 해당 컴포넌트가 클릭 액션을 담당하게 됩니다.

base

Web - ContentSheet Panel 참고

• height : 내부 내용에 따라서 높이 변동

• width : 외부 값에 따라 변동 (기획에 따라)

• shapeType : round

• radius : 16

image

Web - ImageView 참고

• image imageRatio prop으로 제공

text

Web - TextLabel 참고

• titleText

  • styleTheme : subTitleBold, leadParaBold

    • Property 내 titleFontSize

  • lineLimit : 2 (기본값)

  • ellipsisMode : use

• descText

  • styleTheme : caption1Regular

  • lineLimit : 2 (기본값)

  • ellipsisMode : use

iBtn

Web - IconButton 참고

• fillType : fill

• baseSize : medium

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconSize : 20

• iconColor는 prop 참고

• shapeType : rectangle

indicator

Web - Icon 참고

• iconName : ic_arrow_right

• fillType : line

• size : 20

• colorKey : ui_cpnt_icon_sys_grey_01

checkbox

• Unselected

  • iconSize : 20

  • iconFillType : line

  • iconName : ic_checkbox_off

  • iconColorKey : ui_cpnt_selcontrols_icon_default

• Selected

  • iconSize : 20

  • iconFillType : fill

  • iconName : ic_checkbox_on

  • iconColorKey : ui_cpnt_selcontrols_icon_primary

• Indeterminate

  • iconSize : 20

  • iconFillType : fill

  • iconName : ic_checkbox_indeterminate

  • iconColorKey : ui_cpnt_selcontrols_icon_primary

chip

Web - Chip 참고

구성

내용

base

ContentSheet Panel

• selectionMode : use일 때, borderColor

  • borderColorTheme : blue (기본값)

  • borderWidth : 2px

• backgroundColor prop으로 제공

text

TextLabel

• titleText

  • colorTheme prop 제공

• descText

  • colorTheme prop 제공

icon color

• iconColorKey prop 제공

IconButton

iconColorKey prop 제공

baseColorKey : ui_cpnt_button_fill_base_transparent

enum

'none'

'none'

박스 면적의 선택 기능이 동작하지 않습니다.

'use'

박스 면적의 선택 기능이 동작합니다.

enum

ui_cpnt_sheet_border_02

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

enum

'normal'

'normal'

기본값

'disabled'

비활성화

enum

'none'

'none'

사용 안함

'check'

선택

'indeterminate'

부분 선택

enum

'unselected'

'unchecked'

선택 안 됨

'checked'

선택됨

• 하위 항목이 있을 경우, 모든 하위 항목이 선택된 상태

'indeterminate'

일부 선택됨

• 하위 항목이 있을 경우, 하위 항목 일부가 선택된 상태

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

-

enum

ui_cpnt_textlabel_sys_primary

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

enum

subTitleBold

'body2Bold'

body2Bold (16px)

'subTitleBold'

subTitleBold (18px)

'leadParaBold'

leadParaBold (20px)

'headingBold'

headingBold (24px)

number

2

숫자를 작성합니다. / 제약을 주고 싶지 않다면 큰 수 (ex. 99)를 입력합니다.

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

-

enum

ui_cpnt_textlabel_sys_secondary

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

number

2

숫자를 작성합니다. / 제약을 주고 싶지 않다면 큰 수 (ex. 99)를 입력합니다.

enum

'none'

'none'

아무것도 표시하지 않습니다.

'use'

썸네일 이미지를 표시합니다. 

enum

'round'

'round'

 둥근 직사각형 형태의 shapeType

'circular'

 원형 형태의 shapeType

'rectangle'

 직사각형 형태의 shapeType

string

-

enum | number

-

enum

'1_1'

'16_9'

16:9 (영상 비율에 주로 쓰입니다.)

'4_3'

4:3

'1_1'

1:1

enum

'cover'

'none'

원본 그대로 표시하며, 아무런 조치도 취하지 않음

'fill'

object-fit의 fill (fitXY)

'contain'

object-fit의 contain (center)

'cover'

object-fit의 cover (centerCrop)

enum

'none'

'none'

아무것도 표시하지 않습니다.

'use'

chip을 표시합니다. 

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

-

enum

'none'

'none'

아무것도 표시하지 않습니다.

'ibtn_amount1'

우측 버튼 1개를 표시합니다.

'ibtn_amount2'

우측 버튼 2개를 표시합니다.

'ibtn_amount3'

우측 버튼 3개를 표시합니다.

enum

-

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

enum

'line'

'line'

'fill'

enum

-

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

enum

-

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

enum

'line'

'line'

'fill'

enum

-

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

enum

-

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

enum

'line'

'line'

'fill'

enum

-

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

enum

'none'

'none'

사용하지 않음

'use'

사용함

enum

'spacing_d'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_d'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_d'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_d'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

string | number

-

() => void

-

() => void

-

() => void

-

() => void

-

enum

'keep_all'

'normal'

기본 줄 바꿈 규칙을 사용합니다.

'break_all'

오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)

'keep_all'

한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다.

'break_word'

실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다. (사용을 지양하길 권장합니다.)

enum

'keep_all'

'normal'

기본 줄 바꿈 규칙을 사용합니다.

'break_all'

오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)

'keep_all'

한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다.

'break_word'

실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다. (사용을 지양하길 권장합니다.)

김혜진

• 2025/07/28 : checkBoxState 추가 - 곽은선

• 2025/07/01 : borderColorKey Prop 추가 - 김혜진

• 2025/06/25 : wordBreak property 추가 및 섹션 표시 비율 수정 - 곽은선

• 2025/06/17 : 문서 최초 작성 - 김혜진