Web - ChatBubbleListItem (Added in 1.4)

Added in 1.4

Definition

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

Principle

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

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

기획의도

채팅 메세지 종류
- 셀러
- 다른 구독자
- 본인
채팅 메세지 구성
- 프로필 이미지, 프로필 닉네임(#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
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

구성	내용
말풍선	배경 본인 전송 ui_cpnt_list_chatbubble_base_area_my 셀러 전송 ui_cpnt_list_chatbubble_base_area_seller 다른 구독자 전송 ui_cpnt_list_chatbubble_base_area_subscriber
말풍선	텍스트 (배경 위에 올라가는 색상) 본인 전송 ui_cpnt_list_chatbubble_text_my 셀러 전송 ui_cpnt_list_chatbubble_text_seller 다른 구독자 전송 ui_cpnt_list_chatbubble_text_subscriber 링크 본인 및 다른 구독자 전송 : ui_papp_livechat_link 셀러 전송 : ui_cpnt_textlabel_sys_white underline 적용 필요
profile Image	Border (프로필 이미지를 두르고 있는 라인) 2px 셀러 : ui_profile_image_border_brandprimary 다른 구독자 : ui_profile_image_border
titleText (전송 대상 표시)	colorTheme 셀러 : usrTextBrandPrimary 다른 구독자 : sysTextPrimary
timeMode	전송시간 정보 colorTheme : sysTextTertiary
iconButton	iconColorKey : `ui_cpnt_button_icon_enabled`

Properties

titleText

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

기획 지시사항

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

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

children

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

기획 지시사항

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

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	-

hoverMode

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

기획 지시사항

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

Type	`enum`
Default	`'use'`

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

styleTheme

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

기획 지시사항

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

Type	`enum`
Default	`'subscriber'`

Enum Values Description
`'seller'`	메세지 보내는 대상이 셀러일 경우
`'seller_tail'`	셀러가 전송한 메세지 말풍선에 꼬리가 있는 경우
`'subscriber'`	메세지 보내는 대상이 다른 구독자일 경우
`'subscriber_tail'`	다른 구독자가 전송한 메세지 말풍선에 꼬리가 있는 경우
`'my'`	메세지 보내는 대상이 본인일 경우
`'my_tail'`	본인이 전송한 메세지 말풍선에 꼬리가 있는 경우

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	-

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/08/08 : spec 내 컬러 기술 수정 - 김혜진 2022/08/03 : 전반적인 문서 내용 수정 - 김혜진 2022/07/26 : 문서 최초 작성(BasicChatListItem 복제) - 김혜진