Web - ImageView

Definition

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

Principle

화면 내 이미지를 적용할 때 해당 유형을 사용합니다.

Spec

Color Key

border(1px) : ui_profile_image_border

Properties

src

표시할 이미지의 주소 값입니다.

기획 지시사항

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

Type	`string`
Default	-

shapeType

외관 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'round'`

Enum Values Description
`'round'`	둥근 직사각형 형태
`'circular'`	원형 형태
`'rectangle'`	직사각형 형태

radius

모서리 값을 결정합니다. *shapeType : round일 때만 적용

기획 지시사항

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

Type	`enum`
Default	`8`

Enum Values Description
`8`
`16`
`24`

width

너비를 결정합니다.

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

기획 지시사항

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

Type	`enum \| number`
Default	-

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

height

높이를 결정합니다. *특별한 경우가 아니라면 사용하지 않습니다.

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

기획 지시사항

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

Type	`enum \| number`
Default	-

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

noImageHeight

Added in 1.2

이미지 src(주소값)이 없을 때 나타나는 회색 배경의 높이 값을 지정합니다.

기획 지시사항

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

Type	`number`
Default	-

noImageWidth

Added in 1.2

이미지 src(주소값)이 없을 때 나타나는 회색 배경의 너비 값을 지정합니다.

기획 지시사항

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

Type	`number`
Default	-

ratio

*width 값이 있다면, width에 의한 height 값을 구하기 위한 비율입니다.
*height 값이 있다면, height에 의한 width 값을 구하기 위한 비율입니다.
*width, height, ratio 값을 다 적었다면 height 값은 무시됩니다.

기획 지시사항

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

Type	`enum`
Default	`'auto'`

Enum Values Description
`'auto'`	원본 이미지와 width 또는 height에 맞춰 자동으로 늘어남
`'16_9'`	16:9 (영상 비율에 주로 쓰입니다.)
`'9_16'`	9:16
`'16_10'`	16:10
`'10_16'`	10:16
`'4_3'`	4:3
`'3_4'`	3:4
`'1_1'`	1:1
`'2_3'`	Added in 1.4 2:3
`'3_2'`	Added in 1.4 3:2

scaleType

이미지를 채우는 방법을 결정합니다. CSS의 object-fit이나 안드로이드의 scaleType과 유사합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	원본 그대로 표시하며, 아무런 조치도 취하지 않음
`'fill'`	object-fit의 fill (fitXY)
`'contain'`	object-fit의 contain (center)
`'cover'`	object-fit의 cover (centerCrop)

borderMode

이미지에 1px의 border 사용을 결정합니다. *주로 프로필 이미지, 채널 커버에 사용합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	border 사용 안함
`'use'`	사용함

backgroundFillMode

Added in 1.2

이미지의 주소값이 있어도 뒤에 회색 배경을 사용할 것인지에 대한 유무를 결정합니다.
ui_temp_grey_04

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	회색 배경 사용 안함
`'use'`	사용함

isLoading

Added in 1.6

로딩 상태 ui 노출 여부를 결정합니다.

기획 지시사항

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

Type	`boolean`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/11/11 : isLoading prop 추가 - 안은수
2022/09/29 : ratio의 enum 추가(2_3, 3_2) - 김혜진
2022/03/25 : Property 기술방법 변경 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/02/25 : Property 기술방법 변경 - 김혜진
2022/02/08 : prop, value값 추가 - 김혜진
2022/01/03 : noImageHeight에 대한 prop 추가 - 김혜진
2021/12/23 : ratio에 대한 설명 수정, radius prop 추가 - 김혜진
2021/11/26 : borderMode의 prop 추가 - 김혜진
2021/11/16 : status에 대한 prop 삭제 - 김혜진
2021/11/05 : height에 대한 prop 추가 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규
2021/09/07 : 최초 작성 - 김혜원