Web - BasicChatListItem (Added in 1.4)

Added in 1.4

Definition

정의	ChatListItem
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

채팅에 사용하는 리스트 아이템입니다.

ChatListItem을 호버했을 시, 더 보기 아이콘 버튼이 뜨고, 아이콘을 클릭 시 ContextMenu로 채팅 메세지나 메세지 전송자에 대한 역할을 추가할 수 있습니다. Context 메뉴가 떴을때에 ChatListItem에 스크롤이 멈춥니다.

구성

Spec

Guide

*ChatListItem 끼리 사이 간격 없습니다.

ContextMenu 떴을 시

*BasicChatListItem에서 뜨는 ContextMenu가 이 가장 ChatList의 Footer 영역에 닿을경우, 해당 BasicChatListItem의 위에서 뜨게 합니다.

Size, Property

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

구성	내용
height	전체 구성요소 기준 상하단 4px (가이드 이미지 참고)
image	Web - ImageView 참고 shapeType : circular ratio : 1_1 scaleType : cover size : 24px
text	Web - TextLabel 참고 titleText styleTheme : caption1Bold min-width : 56px max-width : 120px contentText styleTheme : caption1Regular wordbreak : break-all
iconButton	hover시에만 뜸 클릭 했을 시 ContextMenu 포함 Web - IconButton fillType : fill baseSize : xsmall baseColorKey : `ui_cpnt_button_fill_base_transparent` iconFillType : fill iconSize : 20 iconName : ic_more
contextMenu	contextMenu가 뜨면 ChatList의 스크롤이 멈춥니다. Web - ContextMenu autoWidthMode : use children : contextMenuItem

Color Key

구성	내용
text	TextLabel titleText (닉네임) `brand_primary_solid` 일 때 colorTheme : usrTextBrandPrimary `brand_primary_translucent` 일 때 colorTheme : usrTextBrandPrimary `secondary_transparent` 일 때 colorTheme : sysTextSecondary `white_transparent` 일 때 colorTheme : sysTextWhite `secondary_transparent_grey` 일 때 colorTheme : sysTextSecondary `white_transparent_grey` 일 때 colorTheme : sysTextWhite contentText (채팅 내용) `brand_primary_solid` 일 때 colorTheme : sysTextPrimary `brand_primary_translucent` 일 때 colorTheme : sysTextPrimary `secondary_transparent` 일 때 colorTheme : sysTextPrimary `white_transparent` 일 때 colorTheme : sysTextWhite `secondary_transparent_grey` 일 때 colorTheme : sysTextSecondary `white_transparent_grey` 일 때 colorTheme : `ui_cpnt_textlabel_sys_white_02`
base color (채팅 영역)	`brand_primary_solid` 일 때 colorTheme : `ui_cpnt_list_base_area_seller` `brand_primary_translucent` 일 때 colorTheme : `ui_cpnt_list_base_area_transparent_seller` `secondary_transparent` 일 때 colorTheme : `ui_cpnt_list_base_area` `white_transparent` 일 때 colorTheme : `ui_cpnt_list_base_area_transparent` `secondary_transparent_grey` 일 때 colorTheme : `ui_cpnt_list_base_area` `white_transparent_grey` 일 때 colorTheme : `ui_cpnt_list_base_area_transparent`
iconButton	Icon `brand_primary_solid`, `brand_primary_translucent`, `secondary_transparent`, `secondary_transparent_grey` 일 때 iconColorKey : `ui_cpnt_button_icon_enabled` `white_transparent`, `white_transparent_grey` 일 때 iconColorKey : `ui_cpnt_button_icon_white`

Properties

titleText

주요 텍스트입니다. 주로 Chat을 보내는 대상을 표시하는 역할을 합니다.

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

contentText

상세 설명 텍스트입니다. 주로 Chat 메세지의 내용을 표시하는 용도로 사용됩니다.

기획 지시사항

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

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

leftImageMode

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

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	아무 것도 표시하지 않습니다.
`'use'`	이미지를 표시합니다.

imageSrc

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

기획 지시사항

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

Type	`string`
Default	-

hoverMode

호버 시, 더 보기 아이콘 버튼 노출 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'use'`	호버 시, 더 보기 아이콘을 표시합니다.
`'none'`	호버 시, 더 보기 아이콘을 표시하지 않습니다.

colorTheme

메세지를 전송하는 대상을 표시합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함
기획서 작성할때, 아래 두 대상에 대해 괄호를 이용하여 명시해주세요.
- 예.)
  - seller : (채널의 셀러가 보낸 메세지일 경우)
  - subscriber : (구독자가 보낸 메세지일 경우)

Type	`enum`
Default	`'subscriber'`

Enum Values Description
`'seller'`	Deprecated in 2.2 메세지 보내는 대상이 셀러일 경우, 구분하여 표시됩니다.
`'subscriber'`	Deprecated in 2.2 메세지 보내는 대상이 구독자일 경우, 구분되지 않은 형식으로 표시됩니다.
`'seller_transparent'`	Deprecated in 2.2 Added in 1.4 메세지 보내는 대상이 셀러일 경우, 구분하여 표시됩니다. (ChatList에서 colorTheme : transparent를 사용할 경우, 사용하는것을 권장합니다.)
`'subscriber_transparent'`	Deprecated in 2.2 Added in 1.4 메세지 보내는 대상이 구독자일 경우, 구분되지 않은 형식으로 표시됩니다. (ChatList에서 colorTheme : transparent를 사용할 경우, 사용하는것을 권장합니다.)
`'brand_primary_solid'`	Added in 2.2 타이틀(닉네임)이 브랜드 컬러를 가지고 있고, 배경 영역이 존재하는 경우입니다. *현재는 메세지 보내는 대상이 셀러일 경우 사용합니다. (`'seller'`와 동일한 스펙)
`'brand_primary_translucent'`	Added in 2.2 타이틀(닉네임)이 브랜드 컬러를 가지고 있고, 배경 영역이 반투명하게 존재하는 경우입니다. *현재는 메세지 보내는 대상이 셀러일 경우 사용합니다. (`'seller_transparent'`와 동일한 스펙)
`'secondary_transparent'`	Added in 2.2 타이틀(닉네임)이 secondary 컬러를 가지고 있고, 배경 영역이 투명하게 존재하는 경우입니다. *메세지 보내는 대상이 사용자일 경우 사용합니다.(`'subscriber'`와 동일한 스펙)
`'white_transparent'`	Added in 2.2 타이틀(닉네임)이 white 컬러를 가지고 있고, 배경 영역이 투명하게 존재하는 경우입니다. 메세지 보내는 대상이 사용자이고, 톤을 타지 않는 경우에 사용합니다. (`'subscriber_transparent'`와 동일한 스펙) ChatList에서 colorTheme : transparent를 사용할 경우, 사용하는 것을 권장합니다.
`'secondary_transparent_grey'`	Added in 2.2 타이틀(닉네임)이 secondary 컬러를 가지고 있고, 배경 영역이 투명하게 존재하는 경우입니다. 여기에 contentText(채팅 내용)이 secondary 컬러입니다. *메세지 보내는 대상이 사용자일 경우 사용합니다.
`'white_transparent_grey'`	Added in 2.2 타이틀(닉네임)이 white 컬러를 가지고 있고, 배경 영역이 투명하게 존재하는 경우입니다. 여기에 contentText(채팅 내용)이 투명도를 가진 white 컬러입니다. 메세지 보내는 대상이 사용자이고, 톤을 타지 않는 경우에 사용합니다. ChatList에서 colorTheme : transparent를 사용할 경우, 사용하는 것을 권장합니다.

contextMenuOptionArray

iBtn 클릭 시, 표시되는 ContextMenu 속 텍스트와 고유값 객체입니다.

기획 지시사항

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

Type	CODE `{ text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; }[]`
Default	`-`

contextMenuState

ContextMenu의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

onClickContextMenu

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

기획 지시사항

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

Type	CODE `(option: { text: number \| string \| object \| Array<string \| object> \| undefined \| null; value: string \| number \| null \| boolean; }) => void;`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2023/09/12 : colorTheme prop에서 기존 value값 deprecated 처리 및 대체될 value 추가 - 김혜진
2023/09/11 : colorTheme prop에 grey value 추가 - 김혜진
2022/12/29 : titleText min-width, max-width 수정 - 김혜원
2022/09/28 : seller & subscriber_transparent 컬러키 추가 colorTheme에 seller & subscriber_transparent value 추가 및 확정 - 김혜원
22/07/13 : ContextMenu가 뜨는 위치에 대한 기획 추가 - 김혜원
22/07/11 : prop부분 코드와 싱크 맞춤 - 안은수
22/07/08 : 더 보기 아이콘 컬러키 수정, colorTheme prop 설명 보충 - 김혜원
22/07/07 : spec 수정 (contentText에 wordBreak : break-all 추가), prop 수정 및 추가 (contextMenuOptionArray & onClickContextMenu 수정 \ colorTheme 추가) - 김혜원
2022/06/24 : timeMode 삭제 - 김혜원
2022/06/22 : iBtn, ContextMenu 및 관련 기획 추가 - 김혜원
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/04/20 : colorTheme prop deprecated 표시(해당 부분은 spec에 기술예정) - 김혜진
2022/04/19 : Property 기술방법 변경 - 김혜지
2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진