Web - CommentListItem (Added in 1.3)

Added in 1.3

Definition

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

Principle

댓글에 사용하고 있는 패턴입니다.

-

구성

닉네임과 게시 시간 사이에 bullet에 대한 건 게시 시간 내 string 키 값으로 제공한다. (descText)

Spec

Guide

Size, Property

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

구성

내용

image(profile)

Web - ImageView 참고

ratio : 1_1
size : 40px

text

Web - TextLabel 참고

nicknameText
- styleTheme : caption1Regular
descText
- styleTheme : caption1Regular
captionText
- styleTheme : caption1Regular
- 클릭 시 액션 있음 (삭제 액션)
- textAlign : right
contentText
- styleTheme : body2Regular

rBtn

Web - ReactionButton 참고

좋아요, 싫어요

Color 구성

Color Key

구성	내용
text	TextLabel nicknameText colorTheme : sysTextPrimary descText colorTheme : sysTextTertiary captionText colorTheme : sysTextSecondary contentText colorTheme : sysTextPrimary
base color	댓글 내용 영역 배경 `ui_cpnt_list_base_area_select`
ReactionButton	ReactionButton의 Color Key 참고

Properties

Properties항목들은 개발 코드 배포후에 확정됩니다.

profileImageSrc

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

기획 지시사항

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

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

nicknameText

작성자 이름 텍스트입니다.

기획 지시사항

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

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

descText

게시한 시간 및 날짜를 표시합니다.

기획 지시사항

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

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

captionText

본인이 게시한 댓글에 한 해 댓글 삭제를 표시합니다.

기획 지시사항

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

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

contentText

댓글 상세 내용 텍스트입니다.

기획 지시사항

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

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

contentShapeType

댓글 상세 내용 영역의 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'round'`

Enum Values Description
`'round'`	둥근 직사각형 형태
`'rectangle'`	직사각형 형태의 shapeType *지금 제공하지 않음

contentFontWeight

상세 설명의 폰트 굵기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'regular'`

Enum Values Description
`'bold'`	CODE `{ fontWeight: "bold" }` *지금은 제공하지 않음
`'regular'`	CODE `{ fontWeight: "regular" }`

upBtnMode

thumbs up 버튼의 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'icon_text'`

Enum Values Description

'none'

보여주지 않음

'icon_text'

아이콘과 텍스트가 같이 있는 형태

'icon_only'

아이콘만 사용

*지금은 제공하지 않음

upBtnText

버튼과 함께 사용할 텍스트 값입니다.

기획 지시사항

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

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

downBtnMode

thumbs down 버튼의 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'icon_text'`

Enum Values Description

'none'

보여주지 않음

'icon_text'

아이콘과 텍스트가 같이 있는 형태

'icon_only'

아이콘만 사용

*지금은 제공하지 않음

downBtnText

버튼과 함께 사용할 텍스트 값입니다.

기획 지시사항

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

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

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/06/08 : spec 내 이미지 수정 - 김혜진 2022/05/25 : 'Properties항목들은 개발 코드 배포후에 확정됩니다.'설명 추가 - 안은수 2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진