Web - ChatBubbleListItem (Added in 1.4)

Added in 1.4

Definition

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

Principle

채팅에 사용하는 말풍선 형태의 리스트 아이템입니다.

ChatBubbleListItem을 호버했을 시, 더 보기 아이콘 버튼이 뜨고 해당 아이콘을 클릭하면 ContextMenu로 채팅 메세지나 메세지 전송자에 대한 역할을 추가할 수 있습니다. ContextMenu가 떴을 때 화면 스크롤이 되지 않습니다.

기획의도

채팅 메세지 종류
- (styleTheme 참고)
채팅 메세지 구성
- 프로필 이미지, 프로필 닉네임(#distinctId), 내용(텍스트, 이미지, 동영상), 채팅 메세지 전송 시간
  - 프로필 이미지와 닉네임은 다른 구독자나 셀러가 작성한 채팅 메세지일 경우 해당
말풍선의 꼬리
- ‘같은 시간’ 내에 ‘연속적’으로 메세지를 전송했을 시, 첫 말풍선엔 꼬리가 존재 하나 그 다음 말풍선부터는 꼬리가 존재하지 않음
  - 우선 '분' 단위
- (채팅 날짜는 따로 가저갈 예정)
말풍선의 min-width : 32px
- 1자부터 전송됨 - 이를 고려한 min-width 정해주기 (보장하는 모양)
- max-width는 960px > SW, UW 화면에서 채팅 영역이 넓기 때문
  - 단지, hover 시 더보기 아이콘이 뜰 수 있으므로 전송시간 옆 padding 48px는 보장되어야 함! → 작은 화면에서 특히 더보기가 잘 표현되어야하니까
말풍선 안에 들어갈 수 있는 이미지/영상의 경우 width 240px로 표현
- 이거는 기획서상 표현하면 됨 / 해당 컴포넌트에서 지정하는 건 아니다.
커스텀 컬러 적용 범위
- primary : 셀러 프로필 이미지 border, 셀러 닉네임, 본인 말풍선
- secondary : 본인 말풍선의 텍스트
말풍선 안에 들어가는 메세지 종류 prop → children prop을 사용
- text
  - 1. 우선 말풍선 안에 구멍을 뚫고 그 안에 무엇이든 넣을 수 있게 제공 + TextLabel을 쓰지 않는다. (Editor에서 작성된 텍스트는 TextLabel이 아닌 것 처럼) → 2. 추후에 새로운 TextLabel 제작!
    - link(밑줄, 클릭액션 존재, 추후 미리보기도 있을 수 있음)
      - 텍스트와 링크가 공존하는 경우가 있을텐데 현재의 TextLabel은 이를 제공해주고 있지 않음 → 새로운 TextLabel을 추후 제작해야 한다.
        TextLabel~~~~
        <a>~~~</a>
        TextLabel~~~
- media (image, video)

구성

Spec

Guide

ContextMenu 떴을 시

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

Size, Property

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

구성	내용
말풍선	min-width : 32px max-width : 960px *hover 시 더보기 아이콘이 뜰 수 있으므로 전송시간(timeMode) 옆 padding 48px는 항상 보장되어야 합니다.
말풍선	radius : 8px
profile Image	Web - ImageView 참고 shapeType : circular ratio : 1_1 scaleType : cover size : 40px
titleText (전송 대상 표시)	Web - TextLabel 참고 styleTheme : caption1Bold
children	말풍선 안에 들어가는 여러가지 요소들 (텍스트, 링크, 이미지 및 영상 썸네일 등)
timeMode	전송시간 정보 styleTheme : caption2Regular
countMode	Added in 2.2 메세지 남은 조회수 정보 styleTheme : caption2Regular
iconButton	더보기 아이콘 hover시에만 뜸 셀러와 다른 구독자가 전송한 말풍선에만 존재 클릭 했을 시 ContextMenu 포함 Web - IconButton fillType : fill baseSize : xsmall baseColorKey : `ui_cpnt_button_fill_base_transparent` iconFillType : fill iconSize : 20 iconName : ic_more Added in 2.2 다운로드 아이콘 downloadIBtnMode가 use일 때 뜸 Web - IconButton shapeType : circular baseColorKey : ui_cpnt_list_chatbubble_download_button_base iconFillType : line iconSize : 16 iconName : ic_download iconColorKey : ui_cpnt_button_icon_white
contextMenu	contextMenu가 뜨면 ChatList의 스크롤이 멈춥니다. Web - ContextMenu autoWidthMode : use children : contextMenuItem

Color Key

구성	내용
말풍선	배경 Added in 1.8 brand_primary ui_cpnt_list_chatbubble_base_brand_primary grey ui_cpnt_list_chatbubble_base_grey translucent_white ui_cpnt_list_chatbubble_base_translucent_white translucent_black ui_cpnt_list_chatbubble_base_translucent_black Added in 2.2 transparent ui_cpnt_list_chatbubble_base_transparent Deprecated in 1.8 ~~본인 전송~~ ~~basic : ui_cpnt_list_chatbubble_base_area_my~~ ~~셀러 전송~~ ~~basic : ui_cpnt_list_chatbubble_base_area_seller~~ ~~다른 구독자 전송~~ ~~basic : ui_cpnt_list_chatbubble_base_area_subscriber~~
말풍선	텍스트 (배경 위에 올라가는 색상) Added in 1.8 brand_primary usrTextBrandOnPrimary grey sysTextPrimary translucent_white sysTextBlack translucent_black sysTextWhite Deprecated in 1.8 ~~본인 전송~~ ~~sysTextPrimary~~ ~~셀러 전송~~ ~~ui_cpnt_list_chatbubble_text_seller~~ ~~다른 구독자 전송~~ ~~ui_cpnt_list_chatbubble_text_subscriber~~ 링크 본인 및 다른 구독자 전송 : ui_papp_livechat_link 셀러 전송 : ui_cpnt_textlabel_sys_white underline 적용 필요
profile Image (avatar)	Border (프로필 이미지를 두르고 있는 라인) 2px / 1px Added in 1.8 brand_primary : ui_avatar_border_brandprimary grey : ui_avatar_border translucent_white : ui_avatar_border_translucent_white translucent_black : ui_avatar_border_translucent_black Deprecated in 1.8 ~~셀러 : ui_avatar_border_brandprimary~~ ~~다른 구독자 : ui_avatar_border~~
titleText (전송 대상 표시)	colorTheme Added in 1.8 brand_primary : usrTextBrandPrimary grey : sysTextPrimary translucent_white sysTextBlack translucent_black sysTextWhite Deprecated in 1.8 ~~셀러 : usrTextBrandPrimary~~ ~~다른 구독자 : sysTextPrimary~~
timeMode	전송시간 정보 colorTheme : sysTextTertiary
countMode	Added in 2.2 메세지 남은 조회수 정보 (colorTheme에 따라 다름) brand_primary : sysTextPrimary grey : sysTextPrimary translucent_white : sysTextPrimary translucent_black : sysTextPrimary
iconButton	iconColorKey : `ui_cpnt_button_icon_enabled`

Properties

titleText

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

기획 지시사항

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

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

children

말풍선 메세지의 내용을 표시하는 용도로 사용됩니다.

기획 지시사항

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

Type	`React.ReactNode`
Default	-

imageMode

이미지 사용 여부를 결정합니다. (프로필 이미지에 대한 사용 여부)

기획 지시사항

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

Type	`enum`
Default	`'use'`

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

imageSrc

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

기획 지시사항

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

Type	`string`
Default	-

timeMode

메세지 전송 시간을 보여줍니다.

기획 지시사항

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

Type	`enum`
Default	`'use'`

Enum Values Description
`'none'`	아무 것도 표시하지 않습니다.
`'use'`	전송 시간을 표시합니다.

timeText

메세지 전송시간에 대한 텍스트입니다.

기획 지시사항

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

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

countMode

Added 2.2

채팅방의 인원들중 메세지를 읽지 않은 인원 숫자를 표시합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	아무 것도 표시하지 않습니다.
`'use'`	읽지 않은 인원의 숫자를 표시합니다.

countText

Added 2.2

채팅방의 인원들중 메세지를 읽지 않은 인원 숫자에 대한 텍스트입니다.

기획 지시사항

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

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

hoverMode

호버 시, 더 보기 아이콘 버튼 노출 여부를 결정합니다. (셀러나 다른 구독자가 전송한 경우에만 표시)

기획 지시사항

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

Type	`enum`
Default	`'use'`

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

downloadIBtnMode

Added 2.2

미디어(이미지, 비디오)를 올렸을 때, 다운로드 버튼의 표시 유무를 결정합니다.

*이미지나 비디오 메시지일 때만 사용해야합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	아무 것도 표시하지 않습니다.
`'use'`	읽지 않은 인원의 숫자를 표시합니다.

styleTheme*

아이템의 외관 형태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함
기획서 작성할때, 아래 두 대상에 대해 괄호를 이용하여 명시해주세요.
- 예.)
  - other_avatar_impact : (채널의 셀러가 보낸 메세지일 경우)
  - other_avatar : (다른 구독자가 보낸 메세지일 경우)
  - me : (본인이 보낸 메세지일 경우)
“sub”이 붙은 value은 붙지 않은 value들과 함께 쓰이는것임으로, 함께 명시해주세요.
- 예.)
  - other_avatar_impact : (채널의 셀러가 보낸 메세지일 경우)
  - other_avatar_sub : (채널의 셀러가 보낸 메세지일 경우)

Type	`enum`
Default	`-`

Enum Values Description
`'other_avatar_impact'`	Added in 1.8 상대방이 보내는 유형의 아이템입니다. 왼쪽/사진유/왼쪽간격유/사진보더2/꼬리유 채팅방에서 특별히 차별되어야 하는 사용자에게 적용하는것을 권장합니다.
`'other_avatar'`	Added in 1.8 상대방이 보내는 유형의 아이템입니다. 왼쪽/사진유/왼쪽간격유/사진보더1/꼬리유
`'other_avatar_sub'`	Added in 1.8 상대방이 보내는 유형의 아이템입니다. 왼쪽/사진무/왼쪽간격유/사진보더1/꼬리무 other_avatar와 같이 사용하는것을 권장합니다.
`'other'`	Added in 1.8 상대방이 보내는 유형의 아이템입니다. 왼쪽/사진무/왼쪽간격무/사진보더0/꼬리유
`'other_sub'`	Added in 1.8 상대방이 보내는 유형의 아이템입니다. 왼쪽/사진무/왼쪽간격무/사진보더0/꼬리무 other와 같이 사용하는것을 권장합니다.
`'me'`	Added in 1.8 본인이 보내는 유형의 아이템입니다. 오른쪽/사진무/오른쪽간격무/사진보더0/꼬리유
`'me_sub'`	Added in 1.8 본인이 보내는 유형의 아이템입니다. 오른쪽/사진무/오른쪽간격무/사진보더0/꼬리무 me와 같이 사용하는것을 권장합니다.
`'seller'`	Deprecated in 1.8 메세지 보내는 대상이 셀러일 경우
`'seller_tail'`	Deprecated in 1.8 셀러가 전송한 메세지 말풍선에 꼬리가 있는 경우
`'subscriber'`	Deprecated in 1.8 메세지 보내는 대상이 다른 구독자일 경우
`'subscriber_tail'`	Deprecated in 1.8 다른 구독자가 전송한 메세지 말풍선에 꼬리가 있는 경우
`'my'`	Deprecated in 1.8 메세지 보내는 대상이 본인일 경우
`'my_tail'`	Deprecated in 1.8 본인이 전송한 메세지 말풍선에 꼬리가 있는 경우
`'other'`	Deprecated in 1.8 메세지 보내는 대상이 상대방일 경우
`'other_tail'`	Deprecated in 1.8 상대방이 전송한 메세지 말풍선에 꼬리가 있는 경우

styleTheme	위치	Image 유무	간격 유뮤	Image Border	메세지 꼬리 유무	titleText 유무
`other_avatar_impact`	왼쪽	유	왼쪽 간격 유	2	유	유
`other_avatar`	왼쪽	유	왼쪽 간격 유	1	유	유
`other_avatar_sub`	왼쪽	무	왼쪽 간격 유	1	무	무
`other`	왼쪽	무	왼쪽 간격 무	0	유	유
`other_sub`	왼쪽	무	왼쪽 간격 무	0	무	무
`me`	오른쪽	무	오른쪽 간격 무	0	유	무
`me_sub`	오른쪽	무	오른쪽 간격 무	0	무	무

colorTheme

Added in 1.8

아이템의 색상 테마를 결정합니다.

Type	`enum`
Default	`'grey'`

Enum Values Description
`'brand_primary'`	채널의 brand color로 표시됩니다.
`'grey'`	기본 grey색으로 표시됩니다.
`'translucent_white'`	반투명 흰색으로 표시됩니다. 채널의 톤을 타지 않아야 할 때 사용하는 것을 권장합니다.
`'translucent_black'`	반투명 검정색으로 표시됩니다. 채널의 톤을 타지 않아야 할 때 사용하는 것을 권장합니다.
`'transparent'`	Added in 2.2 투명한 배경으로 표시됩니다.

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'`	비활성화 상태입니다.

onClickContextMenuItem

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

기획 지시사항

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

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

onClickDownloadIBtn

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

기획 지시사항

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

Type	CODE `() => void;`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2024/03/12 : onClickDownloadIBtn 추가 - 안은수
2024/01/17 : 미디어 다운로드에 대한 가이드 및 Prop(downloadIBtnMode) 추가 - 김혜진
2024/01/03 : colorTheme에 transparent 추가 - 김혜진
2023/11/15 : countMode 모든 colorTheme에 적용되는 컬러를 sysTextPrimary로 수정 - 김혜원
2023/11/14 : countMode의 brandPrimary & grey colorTheme 값 수정 - 김혜원
2023/10/30 : countMode & countText Prop 검토 및 내용 수정 - 안은수
2023/10/30 : countMode & countText 스펙 및 Prop 추가 - 김혜원
2023/01/16 : styleTheme 기획 및 스펙 변경 및 colorTheme prop 추가 및 스펙 변경 - 김혜원
2022/08/08 : spec 내 컬러 기술 수정 - 김혜진
2022/08/03 : 전반적인 문서 내용 수정 - 김혜진
2022/07/26 : 문서 최초 작성(BasicChatListItem 복제) - 김혜진