Web - CommentList (Added in 1.4)

Added in 1.4

Definition

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

Principle

CommentListItem을 담고 있는 요소입니다.

구성

Spec

Guide

표시할 열의 수가 2 이상일 경우 리스트 배열 순서

Size, Property

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

구성	내용
-	-

Color 구성

(이미지)

Color Key

구성	내용
-	-

Properties

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

scrollMode

스크롤을 사용할 지에 대한 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'infinite'`

Enum Values Description
`'none'`	모든 스크롤이 불가능하고, 아이템을 단순히 나열합니다. height는 자동으로 Item의 갯수만큼 늘어나게 됩니다.
`'infinite'`	무한 스크롤을 사용합니다. height는 부모의 높이에 맞추게 됩니다.
`'page'`	페이지네이션 형식을 사용하고, 제한적으로만 스크롤을 사용합니다.

scrollVisibleType

스크롤을 표시할 지에 대한 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'moving'`

Enum Values Description

'moving'

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

'hidden'

스크롤을 아예 표시하지 않습니다.

CODE

/* 참고용 */
#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'

항상 표시합니다.

CODE

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

itemCountUnit

한번에 표시/로드 할 수 있는 아이템의 갯수를 의미합니다.
예를 들어, 15인 경우에는 한 번에 15개를 불러들일 수 있습니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	`15`

columns

표시할 열의 수를 결정합니다. 1 미만으로 입력할 수 없습니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	`1`

columnSpacing

columns가 2 이상일 경우 적용되며, 열의 간격을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'16'`

Enum Values Description
`'0'`	사이 간격 0px (간격 없음)
`'16'`	사이 간격 16px
`'24'`	사이 간격 24px

rowSpacing

행의 간격을 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'24'`

Enum Values Description
`'0'`	사이 간격 없음
`'24'`	사이 간격 24px
`'32'`	사이 간격 32px
`'48'`	사이 간격 48px
`'64'`	사이 간격 64px

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/05/25 : 'Properties항목들은 개발 코드 배포후에 확정됩니다.'설명 추가 - 안은수 2022/04/19 : 최초작성 - 김혜진