Skip to main content
Skip table of contents

Web - BasicListItem (Added in 1.3)

Added in 1.3.0

Definition

정의

BasicListItem

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Principle

가장 기본적인 리스트 아이템 형태입니다.

구성

기획 가이드

공통

전체 클릭 사용 여부

Do

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

    • 그러나 모두 사용하는 것은 지양합니다.

  • 우측 구성은 4가지 중 1가지 종류로만 사용할 수 있습니다.

    • 예외적으로 IconButton 1개와 descText는 함께 사용할 수 있습니다.

    • Property에서 ‘displayType’ 참고

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

    • none

    • ibtn_amount1

    • ibtn_text

    • checkbox (selectionMode)

    • radio (selectionMode)

  • 페이지 전환이 일어나는 경우는 필히 ibtn_text 혹은 ibtn_amount1을 사용해야 합니다.

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

Don’t

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

    • badge가 selection 앞으로 이동 불가

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

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

참고 사항

selection 영역, badge 영역, image or icon 영역, descText가 없을 경우 높이값 56px로 고정합니다.

Spec

Guide

image-20240312-050722.png

Size, Property

(color와 관련한 사항은 하단에 기술)

구성

내용

height

  • titleText, descText 모두 있을 때, height 80px

  • selection 영역, badge 영역, image or icon 영역, descText가 없을 때, height 56px

badge

8px

Icon

image or icon 영역

  • size : 24

image

Web - ImageView 참고

  • ratio : 1_1

  • scaleType : cover

  • size : 40px

text

Web - TextLabel 참고

  • titleText

    • styleTheme : body2Regular, body2Bold

      • Property 내 titleFontWeight

    • singleLineMode : use

  • descText

    • styleTheme : caption1Regular

    • singleLineMode : use

  • captionText

    • styleTheme : caption1Regular

    • textAlign : right

    • singleLineMode : use

  • 공통사항

    • ellipsisMode : use

    • lineLimit : 1

iBtn

Web - IconButton 참고

  • fillType : fill

  • baseSize : medium

  • iconSize : 20

  • shapeType : rectangle

selection 영역

  • Unselected

    • iconSize : 16

    • iconFillType : line

    • iconName : ic_checkbox_off

    • iconColorKey : ui_cpnt_selcontrols_icon_default

  • Selected

    • iconSize : 16

    • iconFillType : fill

    • iconName : ic_checkbox_on

    • iconColorKey : ui_cpnt_selcontrols_icon_primary

mBtn

Web - MainButton 참고

  • size : small

divider

  • direction : horizontal

*displayType 영역이 전체 ListItem의 30% 할당함

Color 구성

Color Key

구성

내용

text

TextLabel

  • titleText

    • colorTheme

      • 기본 : sysTextPrimary

      • 로그아웃 : sysTextError

  • descText

    • colorTheme : sysTextSecondary

  • captionText

    • colorTheme : sysTextTertiary

badge color

비활성 : ui_cpnt_list_badge_disabled

활성 : ui_cpnt_list_badge_active_primary

취소 : ui_cpnt_list_badge_cancle

icon color

ui_cpnt_list_icon_02

IconButton

iconColorKey : ui_cpnt_button_icon_default (selection을 제외한 나머지 아이콘)

baseColorKey : ui_cpnt_button_fill_base_transparent

MainButton

MainButton의 Color Key 참고

base color

기본 : ui_cpnt_list_base_area

선택 : ui_cpnt_list_base_area_select

divider color

Divider 내 Color Key 참고

우측 구성 참고 : MainButton, IconButton, Switch

Properties

selectionMode

Added in 1.3

좌측 선택 영역의 사용 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

선택 기능이 동작하지 않습니다.

'check'

체크 기능을 사용할 수 있습니다.

  • 복수개 선택 가능

'radio'

라디오 기능을 사용할 수 있습니다.

  • 1개만 선택 가능

'order'

Deprecated in 1.4

순서 배열 기능을 사용할 수 있습니다.

 

titleText*

Added in 1.3

주요 텍스트 값입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

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

Default

-

 

titleTextColorTheme

Added in 1.3

주요 텍스트의 컬러 테마를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

 기본 값을 사용합니다.

'logout'

로그아웃일 때 사용합니다. 

 

descText

Added in 1.3

우측의 글씨 값을 입력합니다.
*문장 보다는 간단한 상태값을 표시하는 정도로 사용할 것을 권장합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

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

Default

-

 

badgeMode

Added in 1.3

뱃지의 사용 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

뱃지를 사용하지 않습니다.

'left'

좌측에 뱃지를 사용합니다. 

 

badgeStatus

Added in 1.3

뱃지의 상태를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'inactive'

Enum Values Description

'cancel'

취소 상태

'active'

활성화 상태 

'inactive'

비활성화 상태 

 

imageIconMode

Added in 1.3

좌측의 이미지 또는 아이콘의 사용 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

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

'image'

이미지를 표시합니다. 

'icon'

아이콘을 표시합니다. 

 

imageShapeType

Added in 1.3

이미지의 형태를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'round'

Enum Values Description

'round'

 둥근 직사각형 형태의 shapeType

'circular'

 원형 형태의 shapeType

'rectangle'

 직사각형 형태의 shapeType

 

imageSrc

Added in 1.3

이미지 사용 시 이미지의 주소 값입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

string

Default

-

 

iconName

Added in 1.3

아이콘 사용 시 아이콘의 이름을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

-

Enum Values Description

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

 

iconFillType

Added in 1.3

아이콘의 형태를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'line'

Enum Values Description

'line'

 

'fill'

 

 

displayType

Added in 1.3

우측 영역의 표시 방법을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

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

'text'

텍스트를 표시합니다. *captionText

'ibtn_text'

Added in 1.4

우측 버튼 1개와 텍스트를 함께 사용할 수 있습니다.

'ibtn_amount1'

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

'ibtn_amount2'

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

'mbtn'

메인 버튼을 사용하는 유형입니다. 1개만 사용할 수 있습니다.

'switch'

스위치를 사용할 수 있는 화면입니다. 1개만 사용할 수 있습니다.

'selected_status'

Deprecated in 1.3

선택

 

captionText

Added in 1.3

부가 설명 텍스트 값입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

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

Default

-

 

iBtn1IconName

Added in 1.3

가장 우측 영역 아이콘 버튼의 아이콘 이름을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

-

Enum Values Description

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

 

iBtn1IconFillType

Added in 1.3

가장 우측 영역 아이콘 버튼의 아이콘 유형을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'line'

Enum Values Description

'line'

 

'fill'

 

 

iBtn2IconName

Added in 1.3

우측에서 2번째 영역 아이콘 버튼의 아이콘 이름을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

-

Enum Values Description

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

 

iBtn2IconFillType

Added in 1.3

우측에서 2번째 영역 아이콘 버튼의 아이콘 유형을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'line'

Enum Values Description

'line'

 

'fill'

 

 

mBtnFillType

Added in 1.3

메인 버튼의 fillType을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'fill'

Enum Values Description

'fill'

 

'line'

 

 

mBtnText

Added in 1.3

메인 버튼의 텍스트 값을 입력합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 텍스트만 기술

Type

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

Default

-

 

mBtnState

Added in 2.2

메인 버튼의 상태를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'normal'

Enum Values Description

'normal'

 

'disabled'

 

dividerType

Added in 1.3

아이템 하단의 Divider 표시 유형을 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'none'

Enum Values Description

'none'

사용하지 않습니다.

'solid'

solid 형태의 line을 사용합니다. 

 

titleFontWeight

Added in 1.3

타이틀의 폰트 굵기를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'regular'

Enum Values Description

'bold'

CODE 
TextLabel {
fontWeight: "bold",
style : "body2Bold"
}

'regular'

CODE 
TextLabel {
fontWeight: "regular",
style : "body2Regular"
}

 

checkboxId

Added in 1.4

체크박스에 사용되는 id입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

string | number

Default

-

 

radioId

Added in 1.4

라디오버튼의 고유한 이름입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

string

Default

-

 

radioValue

Added in 1.4

라디오버튼에 사용되는 value입니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

string

Default

-

spacingMode

Added in 1.4

좌우 간격을 사용 여부를 결정합니다.

기획 지시사항

  • 기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type

enum

Default

'use'

Enum Values Description

'none'

 

'use'

 

 

onClick

Added in 1.4

하나의 ListItem이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

() => void

Default

-

onClickIBtn1

Added in 1.4

IBtn1이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

() => void

Default

-

onClickIBtn2

Added in 1.4

IBtn2이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

() => void

Default

-

onClickMBtn

Added in 1.4

MBtn이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

() => void

Default

-

onClickRadio

Added in 1.4

라디오버튼이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

(value: string) => void

Default

-

onClickSwitch

Added in 1.4

Switch가 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

  • 기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type

() => void

Default

-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

  • 2024/03/12 : mbtn, switch 우측 간격 삭제 - 김혜진

  • 2024/02/13 : mBtnState prop 추가 - 김혜진

  • 2022/06/23 descText, captionText의 내용 설명 수정 / spacingMode prop 추가 - 김혜진

  • 2022/06/09 : spec 내 descText와 captionText의 색상 수정 - 김혜진

  • 2022/06/08 : spec 내 이미지 수정 - 김혜진

  • 2022/05/24 : 코드에만 있던 prop추가 - 안은수

  • 2022/05/24 : Principle에 기획 가이드 설명 추가, selectionMode에 order value deprecated, displayType에 ibtn_text value added - 김혜진

  • 2022/04/20 : descText와 captionText의 지위 바꿈(클릭 이벤트에 대한 정확한 설명 기술 추가), displayType 중 selected_status 값 deprecated 처리 - 김혜진

  • 2022/04/18 : Property 기술방법 변경 - 김혜진

  • 2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close