Image Frame
사용자가 업로드한 이미지를 표시하기 위한 컴포넌트입니다.
컴포넌트 명세 (Component Specification)
Anatomy
imageArea
fileTypeIcon
기본 기능
업로드된 이미지, 파일의 썸네일을 제공하는 컴포넌트
시각 옵션
size
state
favorite
imageArea
상태
default
select
내부 구성
icon
image
사이즈 가이드 (Size Guide )
Image Frame의 사이즈는 사용되는 뷰와 목적에 따라 L, S 총 2가지로 제공됩니다.
분류 (Variant)
이미지의 등록 여부 및 사용자의 상호작용에 따라 다양한 상태와 속성 조합을 가집니다.
상태 (State)
사용자의 이미지 등록 여부에 따라 2가지 Type으로 나뉩니다.
사용 예시 (Use Case)
실제 서비스 화면에서 Avatar가 배치되고 활용되는 패턴입니다.
폴백 이미지 (Fallback Image)
이미지 콘텐츠가 아니거나 썸네일 미리보기를 지원하지 않는 파일(문서, 압축파일 등)일 경우, 각 파일 확장자(Format)에 맞는 아이콘을 중앙에 표시하여 파일 종류를 안내합니다.
오버레이 요소 표시 (Show Overlay)
썸네일 이미지 위에 즐겨찾 아이콘 등 보조 UI 요소를 오버레이 형태로 띄워,
이미지와 관련된 부가적인 상태를 직관적으로 제공합니다.
첨부파일 리스트 (Attachment List)
small 사이즈는 메일, 게시판 등의 미리보기 첨부 이미지의 용도로 사용됩니다.
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
