Web - AdminListHeader (Deprecated in 2.2)

Deprecated in 2.2

Added in 1.3

HeaderBar, FilterBar, TextLabel이 포함된 AdminList의 Header 패턴입니다.

Definition

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

Principle

List Pattern은 ListItem을 담는 요소입니다.

HeaderBar, FilterBar, TextLabel이 포함된 AdminList의 Header 패턴입니다.

HeaderBar는 타이틀이 되는 영역이고 제목과 pagination이 함께 존재합니다. 제목은 주 목적을 설명하는 이름이여야하고 pagination은 ListItem의 개수를 조정합니다.
FilterBar는 게시글을 필터링 할 수 있는 역할을 수행합니다.
TextLabel 영역은 해당 리스트에 대한 설명문구를 넣을 수 있습니다.

HeaderBar

size	Regular 한 페이지 전체를 사용할때 사용합니다. 주로 사용됩니다. Small 페이지 한 부분만 차지할 때 사용합니다.
title	주요 타이틀입니다. *tooltipText가 존재할 수 있습니다.
List count	select의 역할을 설명합니다. (목록 개수)
Dropdown	Row의 개수를 설정합니다.
Page#:	default 숫자: 전체 페이지에서 현재 조회하고 있는 페이지를 표시합니다. disabled 숫자: 목록의 전체 페이지 수를 표시합니다.
Arrow	페이지를 navigate하게 해줍니다.

구성

Web - FilterBar (Deprecated in 2.2)와 Web - TextLabel 은 각 컴포넌트 참고

Spec

Guide

Size, Property

간격 가이드

전체가 다 조합되었을 때 배치 순서 : Header Bar - [TextLabel - FilterBar] - Bulk Action Bar - Header Row

HeaderBar에 포함된 하단 16px은 설명문구가 있을 때는 숨김 처리 됩니다. 그 외에는 16px을 사용합니다.
(하단 이미지 참고)
ListItem들 사이 간격 : 0px
columnHeader 영역은 AdminListItem의 columnText 영역과 너비가 같아야 합니다. (서로 같은 열에 놓여져 보이게)

Header Bar

	Regular	Small
Height	40px	40px
text	Web - TextLabel 참고 titleText styleTheme : headingBold contentText styleTheme : caption1Regular list count styleTheme : caption1Regular page# styleTheme : caption1Regular	Web - TextLabel 참고 titleText styleTheme : body1Bold contentText styleTheme : caption1Regular list count styleTheme : caption1Regular page# styleTheme : caption1Regular
Dropdown	Web - Dropdown (Added in 1.3) 참고 valueArray: (한 페이지의 목록 수) size : small customWidth : 88px	Web - Dropdown (Added in 1.3) 참고 valueArray: (한 페이지의 목록 수) size : small customWidth : 88px
Arrow icon	Web - IconButton 참고 icon A(좌측 - 이전) fillType : fill baseSize : small iconSize : 24 shapeType : rectangle iconName : ic_arrow_left iconFillType : line icon B(우측 - 다음) fillType : fill baseSize : small iconSize : 24 shapeType : rectangle iconName : ic_arrow_right iconFillType : line	Web - IconButton 참고 icon A(좌측 - 이전) fillType : fill baseSize : small iconSize : 24 shapeType : rectangle iconName : ic_arrow_left iconFillType : line icon B(우측 - 다음) fillType : fill baseSize : small iconSize : 24 shapeType : rectangle iconName : ic_arrow_right iconFillType : line

Color 구성

Color Key

Header Bar

구성	내용
text	TextLabel titleText colorTheme : sysTextPrimary contentText colorTheme : sysTextSecondary list count colorTheme : sysTextPrimary page# current colorTheme : sysTextPrimary total colorTheme : sysTextTertiary
IconButton	iconColorKey : `ui_cpnt_list_icon_01` baseColorKey : `ui_cpnt_button_fill_base_transparent`
base	`ui_cpnt_list_base_area`

Properties

headerBarSize

Added in 1.3

HeaderBar의 크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'regular'`

Enum Values Description
`'regular'`	페이지 전체를 차지할 때 사용합니다.
`'small'`	페이지 한 부분만을 차지할 때 사용합니다.

headerBarTitleText

HeaderBar의 제목을 표시할 텍스트 값입니다.
(regular일 땐 최대 50자까지 권장하고, small일 땐 최대 60자까지 권장합니다.)

기획 지시사항

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

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

contentText

해당 AdminList에 대한 설명 문구를 표시할 텍스트 값입니다.

기획 지시사항

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

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

itemCountUnit (Deprecated in 1.5)

Deprecated in 1.5

Added in 1.3

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

~~기획 지시사항~~

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

Type	`number`
Default	`15`

currentPage

Added in 1.4

현재 페이지 번호입니다.

기획 지시사항

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

Type	`number`
Default	`1`

totalPage

Added in 1.4

전체 페이지 번호입니다.

기획 지시사항

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

Type	`number`
Default	`1`

filterBar

Added in 1.4

필터바를 표시합니다.
FilterBar 컴포넌트를 직접 넣어줍니다.

기획 지시사항

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

Type	`React.ReactNode`
Default	-

dropdownTextArray

Added in 1.4

페이지네이션 드롭다운에 표시될 리스트입니다.

기본값으로 15, 30, 50, 100개 중 선택할 수 있습니다.

기획 지시사항

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

Type

CODE

{
  text: number | string | object | Array<string | object> | undefined | null;
  value: string | number | null | boolean;
}[]

Default

CODE

[
  {
    text: '15',
    value: 15
  },
  {
    text: '30',
    value: 30
  },
  {
    text: '50',
    value: 50
  },
  {
    text: '100',
    value: 100
  }
]

dropdownDefaultValue

Added in 1.4

페이지네이션 드롭다운의 초기값을 지정해 줄 수 있습니다.

기획 지시사항

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

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

onChangeCount

Added in 1.4

페이지네이션의 아이템 개수를 변경합니다. (드롭다운)

기획 지시사항

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

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

onClickNextButton

Added in 1.4

다음 페이지로 페이지네이션 할 때의 콜백입니다.

기획 지시사항

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

Type	`() => void`
Default	-

onClickPrevButton

Added in 1.4

이전 페이지로 페이지네이션 할 때의 콜백입니다.

기획 지시사항

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

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/07/08 : spec 내 dropdown customWidth에 대한 정보 추가 - 김혜진 2022/06/08 : spec 내 이미지 수정 - 김혜진 2022/05/31 : contentText의 spec 기술 추가 - 김혜진 2022/05/24 : 코드에만 있던 prop추가 - 안은수 2022/04/15 : Property 기술방법 변경 - 김혜진 2022/04/11 : 최초작성(기존 패턴을 컴포넌트화 하면서 복제) - 김혜진