Web - StatusBlock

Definition

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

Principle

현재 상태를 보여줘야할 때 사용합니다.

크게 기본, 대기, 진행, 취소, 종료, 오류 상태가 있습니다.

Spec

Size, Property

Large

Medium

Small

radius

14px

10px

Height

48px

40px

32px

text

Web - TextLabel 참고

styleTheme : body1Bold
colorTheme : sysTextWhite
textAlign : center
singleLineMode : use (textLineType : single일 때 적용)

Web - TextLabel 참고

styleTheme : body1Bold
colorTheme : sysTextWhite
textAlign : center
singleLineMode : use (textLineType : single일 때 적용)

Web - TextLabel 참고

styleTheme : body2Bold
colorTheme : sysTextWhite
textAlign : center
singleLineMode : use (textLineType : single일 때 적용)

Color 값

base

기본 : ui_cpnt_statusblock_basic
대기 : ui_cpnt_statusblock_standby
진행중 : ui_cpnt_statusblock_proceeding
취소 : ui_cpnt_statusblock_cancel
종료 : ui_cpnt_statusblock_end
오류 : ui_cpnt_statusblock_error

Properties

text

표시할 텍스트 값입니다.

기획 지시사항

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

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

size

크기를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`	기본 상태 입니다.
`'medium'`	비활성화 상태입니다.
`'small'`

state

상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'basic'`

Enum Values Description
`'basic'`	기본
`'standby'`	대기
`'proceeding'`	진행중
`'cancel'`	취소
`'end'`	종료
`'error'`	오류

width

너비를 결정합니다.

반응형으로 부여 할 때는 'responsive' 를 사용하고, 정해진 값을 부여할때는 숫자만 기술합니다. (단위는 px로 고정되어있습니다.)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함 / 숫자만 기술

Type	`enum \| number`
Default	`'responsive'`

Enum Values Description
`'responsive'`	너비를 반응형으로 맞출 때

문서 작성 정보

소유자 / 관리자	김혜진, 박윤규
변경 이력	2022/06/14 : Spec 내 radius 값 수정 - 김혜진 2022/04/01 : Property 기술방법 변경 - 안은수 2022/02/25 : 개발 코드 배포여부 추가 - 안은수 2021/12/16 : spec 내 텍스트 컬러 추가, width 값 삭제 - 김혜진 2021/12/10 : spec 내용 추가 - 김혜진 2021/12/09 : 최초 작성 - 김혜진