Web - AdminListItem (Added in 2.0)

정의

AdminListItem

최적화 대상

Desktop

기획 배포

검토

디자인 가이드 배포

검토

개발 코드 배포

완료

구성

내용

size(height)

• high : 200px

• medium : 100px

• low : 64px

상하단 Padding을 포함한 값입니다.

image 영역

이미지 형태가 circular일 때 사이즈 64px

selection 영역

(column 1)

Web - IconButton 참고

• baseSize : medium

• iconSize : 16

• shapeType : rectangle

• Unselected

  • iconFillType : line

  • iconName : ic_checkbox_off

• Selected

  • iconFillType : fill

  • iconName : ic_checkbox_on

column text

Web - TextLabel 참고

• column 2

  • styleTheme : body2Bold

  • size가 medium, low 일 때

    • ellipsisMode : use

    • lineLimit : 2

  • size가 high 일 때

    • ellipsisMode : none

    • 스크롤

• column 3~10

  • styleTheme : body2Regular

columnTextStyleTheme

• column 3~10

  • styleTheme : body2Bold

padding

padding-bottom : 88px;

• 스크롤 한 후 마지막 아이템리스트 밑에 88px 붙는 것 (FAB 고려)

구성

내용

width

• column 1(selection 영역)

  • 40px

• column 2(타이틀 또는 주요 내용 영역)

  • 반응형

• column 3~10(나머지 정보 영역)

  • small : 56px

  • medium : 80px

  • large : 144px

• 좌우 Padding을 포함하지 않은 값입니다.

구성

내용

보여지는 형태

fix (항상 고정된 영역을 가짐)

hover (버튼의 영역을 고정하기 어려운 좁은 영역에서 사용할 때 위로 띄움)

• 우측 간격 spacing_f

touch area

56x56

text

TextLabel 참고

• styleTheme : body2Regular

• textAlign : center

구성

내용

selection 영역

(column 1)

IconButton 참고

• iconColorKey

  • unselected : ui_cpnt_selcontrols_icon_default

  • selected : ui_cpnt_selcontrols_icon_primary

• baseColorKey : ui_cpnt_button_fill_base_transparent

column text

TextLabel 참고

• column 2

  • colorTheme : sysTextPrimary

• column 3~10

  • colorTheme : sysTextSecondary

columnTextStyleTheme

• column 3~10

  • active : sysTextBrandSeconVariant

  • active2 : sysTextBrandPrimary

  • inactive : sysTextTertiary

  • report : sysTextError

  • report2 : sysTextWarning

base

• default : ui_cpnt_datatable_base_default

• hover : ui_cpnt_datatable_base_hover

• selected : ui_cpnt_datatable_base_selected

구성

내용

text

TextLabel

• colorTheme

  • 기본 : sysTextBrandPrimary

  • disalbed : ui_cpnt_textlabel_sys_brand_primary_opacity50

base

quickActionBtnType

• fixed :ui_cpnt_datatable_text_button_base_01

• floating : ui_cpnt_datatable_text_button_base_02

enum

'medium'

'high'

column2 영역에 이미지가 있을 수도 없을 수도 있지만,
많은 정보를 보여주는 경우에 사용합니다.

'medium'

column2 영역에 이미지가 있는 일반적인 경우에 사용합니다.

'low'

column2 영역에 이미지가 없고 간단한 정보를 보여주는 경우에 사용합니다.

enum

'multi'

'none'

selection 영역(column 1)이 표시되지 않습니다.
체크박스가 사라집니다. 아이템을 클릭 했을 시 아무런 표시를 하지 않습니다.

'one'

아이템을 클릭 했을 시 선택된 아이템의 background-color만 줍니다.
하나만 선택해야할 때 (single select) 사용합니다.

'multi'

여러 개의 아이템을 선택할 수 있습니다. 체크박스를 사용합니다.

enum

'image_text'

'image_text'

이미지와 텍스트가 같이 표시됩니다.

'text_only'

텍스트만 표시합니다.

string

-

enum

'rectangle'

'round'

모서리가 둥근 직사각형 형태입니다.

'circular'

원형 형태입니다.

'rectangle'

직사각형 형태입니다.

enum

'cover'

'none'

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

'fill'

object-fit의 fill (fitXY)

'contain'

object-fit의 contain (center)

'cover'

object-fit의 cover (centerCrop)

enum

8

8

모서리 radius 8px

16

모서리 radius 16px

24

모서리 radius 24px

enum

'16_9'

'16_9'

16:9 비율

'4_3'

4:3 비율

'1_1'

1:1 비율

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

-

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

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

-

enum

'small'

'small'

56px

'medium'

80px

'large'

144px

'xlarge'

enum

'normal'

'normal'

기본 상태

'active'

활성화 상태 (녹색+bold)

'active2'

(blue + bold)

'inactive'

비활성화 상태 (비활성화 색+bold)

'report'

빨간색+bold

'report2'

주황색+bold

enum

'btn_amount2'

'none'

버튼이 표시되지 않습니다. (퀵 액션 버튼이 없습니다.)

'btn_amount1'

1개

'btn_amount2'

2개

'btn_amount3'

3개

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

-

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

-

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

-

enum

'fix'

'fix'

우측 액션 버튼이 고정 영역을 가지고 있습니다.

'hover'

우측 액션 버튼을 리스트 아이템 위에 띄웁니다.

enum

'normal'

'normal'

기본 상태

'disabled'

비활성화 상태

enum

'normal'

'normal'

기본 상태

'disabled'

비활성화 상태

enum

'normal'

'normal'

기본 상태

'disabled'

비활성화 상태

enum

'basic'

'basic'

선택 후 어떤 다른 액션을 취하면 선택된 상태가 해제됩니다. (일반적인 형태)

'maintain'

선택된 상태를 유지합니다.
*C00002SlideBannerElements 화면이 대표적

number

-

enum

'use'

'none'

모든 화면 사이즈에서 모든 정보가 보여집니다.

'use'

1400px기준으로, 전체 화면 사이즈가 해당 너비 이하가 되면 column3부터 column10까지가 숨겨집니다.

(id: number) => void

-

(id: number) => void

-

(id: number) => void

-

(id: number) => void

-

김혜진, 박윤규, 안은수

• 2023/03/24 : text 관련 prop들 타입 변경 - 안은수

• 2023/03/10 : AdminListItem 문서 복제, 버전 정보 수정 - 안은수