Web - ChatList (Added in 1.4)

정의

ChatList

최적화 대상

Desktop

Mobile

기획 배포

검토

디자인 가이드 배포

검토

개발 코드 배포

완료

Header

text

TextLabel 참고

• titleText

  • styleTheme : Property 참고

  • colorTheme : sysTextPrimary

• descText

  • styleTheme : body2Regular

  • colorTheme : sysTextSecondary

• captionText

  • styleTheme : caption1Regular

  • colorTheme : sysTextTertiary

IconButton 1, 2, 3

IconButton 참고 (우측 아이콘 버튼)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey : ui_cpnt_button_icon_enabled

• iconSize : 24

Divider

기본값 따름

Footer

Textfield

TextField 참고

• size : rlarge

• textLineType : single

• inputType : text

우측 전송 버튼 (submit)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • 입력 전 : ui_cpnt_button_icon_disabled

  • 입력 후 : ui_cpnt_button_icon_primary

• iconSize : 24

IconButton 1~3

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • ui_cpnt_button_icon_enabled

• iconSize : 24

Divider

기본값 따름

Body

(새 메세지 읽기 버튼)

MainButton

MainButton 참고

• text : str_1557

• size : small

Base

전체 배경 : ui_cpnt_list_base_area_solid

Header

text

TextLabel 참고

• titleText

  • styleTheme : Property 참고

  • colorTheme : sysTextWhite

• descText

  • styleTheme : body2Regular

  • colorOverride : ui_cpnt_list_text_caption_02

• captionText

  • styleTheme : caption1Regular

  • colorOverride : ui_cpnt_list_text_caption_03

IconButton 1

IconButton 참고 (우측 아이콘 버튼)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey : ui_cpnt_button_icon_white

• iconSize : 24

Divider

기본값 따름

Footer

Textfield

TextField 참고

• size : rlarge

• textLineType : single

• inputType : text

우측 전송 버튼 (submit)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • 입력 전 : ui_cpnt_button_icon_disabled

  • 입력 후 : ui_cpnt_button_icon_primary

• iconSize : 24

IconButton 1~3

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • ui_cpnt_button_icon_enabled

• iconSize : 24

Divider

기본값 따름

Body

(새 메세지 읽기 버튼)

MainButton

MainButton 참고

• text : str_1557

• size : small

Base

전체 배경 : ui_cpnt_list_base_area_translucent

Header

text

TextLabel 참고

• titleText

  • styleTheme : Property 참고

  • colorOverride : sysTextWhite

• descText

  • styleTheme : body2Regular

  • colorOverride : sysTextWhite

• captionText

  • styleTheme : caption1Regular

  • colorOverride : sysTextWhite

IconButton 1

IconButton 참고 (우측 아이콘 버튼)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey : ui_cpnt_button_icon_white

• iconSize : 24

Divider

Divider

• colorTheme : divider2

Footer

Textfield

TextField 참고

• size : rlarge

• textLineType : single

• inputType : text

• colorTheme : -

우측 전송 버튼 (submit)

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • 입력 전 : ui_cpnt_button_icon_disabled

  • 입력 후 : ui_cpnt_button_icon_primary

• iconSize : 24

IconButton 1~3

• baseSize : large

• baseColorKey : ui_cpnt_button_fill_base_transparent

• iconColorKey

  • ui_cpnt_button_icon_enabled

• iconSize : 24

Divider

기본값 따름

Body

(새 메세지 읽기 버튼)

MainButton

MainButton 참고

• text : str_1557

• size : small

Base

전체 배경 : ui_cpnt_list_base_area_transparent

enum

'solid'

'solid'

배경 부분의 투명도가 없는 상태입니다.

'translucent'

배경 부분의 투명도가 반투명 상태입니다.

'transparent'

배경 부분의 투명도가 투명 상태입니다.

*현재 사용하지 않음

enum

'solid'

'solid'

배경 부분의 투명도가 없는 상태입니다.

'translucent'

배경 부분의 투명도가 반투명 상태입니다.

'transparent'

배경 부분의 투명도가 투명 상태입니다.

*현재 사용하지 않음

enum

'use'

'none'

사용하지 않음

'use'

타이틀 영역 사용함

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

-

enum

'subTitleBold'

'subTitleBold'

• styleTheme : subTitleBold

'headingBold'

• styleTheme : headingBold

현재 실시간 채팅 pApp SW, UW에 사용

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

-

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

-

enum

'none'

'none'

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

'ibtn1'

버튼 1개를 표시합니다.

'ibtn2'

Added in 2.2

버튼 2개를 표시합니다.

'ibtn3'

Added in 2.2

버튼 3개를 표시합니다.

enum

'ic_xmark'

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

enum

'ic_xmark'

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

enum

'ic_xmark'

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

React.ReactNode

-

React.ReactNode

-

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

-

enum

'none'

'none'

사용하지 않음

'use'

양 옆 간격(spacing-e) 사용함

*현재 ChatBubbleListItem일 때 사용

enum

'normal'

'normal'

기본 상태 입니다.

'read_only'

읽기 전용입니다. (입력창 수정 불가)

'disabled'

비활성화 상태입니다.

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

-

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

-

number

-

enum

'normal'

'normal'

기본 상태 입니다. 클릭 시, 메세지 전송을 할 수 있습니다.

'disabled'

버튼이 비활성화 상태입니다. 클릭 시, 아무 액션도 발생하지 않습니다.

enum

'ic_paper_plane'

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'fill'

'line'

'fill'

enum

'normal'

'normal'

기본 상태 입니다. 클릭 시, 메세지 전송을 할 수 있습니다.

'disabled'

버튼이 비활성화 상태입니다. 클릭 시, 아무 액션도 발생하지 않습니다.

enum

-

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

enum

'button'

'button'

일반 버튼을 사용합니다.

'upload'

파일 업로드 버튼을 사용합니다.

enum

'normal'

'normal'

기본 상태 입니다. 클릭 시, 메세지 전송을 할 수 있습니다.

'disabled'

버튼이 비활성화 상태입니다. 클릭 시, 아무 액션도 발생하지 않습니다.

enum

-

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

enum

'button'

'button'

일반 버튼을 사용합니다.

'upload'

파일 업로드 버튼을 사용합니다.

enum

'normal'

'normal'

기본 상태 입니다. 클릭 시, 메세지 전송을 할 수 있습니다.

'disabled'

버튼이 비활성화 상태입니다. 클릭 시, 아무 액션도 발생하지 않습니다.

enum

-

'ic_xxx'

Icon의 Value입니다. ic_xxx의 형식입니다.

enum

'line'

'line'

'fill'

enum

'button'

'button'

일반 버튼을 사용합니다.

'upload'

파일 업로드 버튼을 사용합니다.

string

-

enum

'moving'

'moving'

움직일때에만 표시하고 더이상 표시하지 않습니다.

{
}

'hidden'

아예 표시하지 않습니다.

/* 참고용 */
#element{
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
#element::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/* 참고
* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hide_scrollbar_keep_func
*/

'visible'

항상 표시합니다.

/* hidden과 비슷한 방식으로 수치를 결정 */
{
}

React.ReactNode

-

(value: string) => void;

-

() => void;

-

() => void;

-

() => void;

-

-

-

-

() => void;

-

김혜진, 박윤규

• 2024/03/12 : onClickHeaderIBtn2, onClickHeaderIBtn3 prop 추가 - 안은수

• 2024/01/25 : onClickCaptionText prop 추가, 아이콘 버튼 관련 prop, value 추가 - 김혜진

• 2022/09/28 : colorTheme 추가 (styleTheme → colorTheme 내용 복제). bodyChildren prop 추가, transparent 옵션 컬러키 추가 및 확정 - 김혜원

• 2022/08/24 : submitIBtnIconName, submitIBtnIconFillType, footerIBtn1State, footerIBtn1Type, onClickFooterIBtn1, footerIBtn2State, footerIBtn2Type, onClickFooterIBtn2, footerIBtn3State, footerIBtn3Type, onClickFooterIBtn3, footerIBtn3Accept prop 추가 - 안은수

• 2022/08/05 : bodySpacingMode prop 추가 - 김혜진

• 2022/08/03 : titleStyleTheme, descText, footerIBtn1~3IconName, footerIBtn1~3IconFillType prop 추가 및 관련 spec 수정 및 추가 - 김혜진

• 2022/07/14 : 전송버튼 컬러키 sys컬러에서 usr컬러 적용되게 변경 - 김혜원

• 2022/07/11 : prop부분 코드와 싱크 맞춤 - 안은수

• 2022/07/08 : 헤더 영역에 표시되는 버튼을 iBtn1 → headerIBtn1으로 명칭 수정 - 김혜원

• 2022/07/07 : prop 수정 및 추가 (textFieldState, textFieldMaxLength, submitBtnState 추가 \ titleText optional 로 변경 - 김혜원

• 2022/06/23 : headerDisplayType prop 이름 수정 - 김혜원

• 2022/06/22 : children & footerChildren prop 추가, 필요없는 prop 제거 - 김혜원

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

• 2022/04/20 : itemType deprecated 표시 - 김혜진

• 2022/04/19 : Property 기술방법 변경 - 김혜지

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