Attachment Input

사진, 영상, 파일 첨부를 다루는 입력으로, 선택, 업로드, 진행률, 실패, 삭제 상태를 관리합니다.

Anatomy

Attachment Input은 Trigger와 Preview로 구성되며, Preview에는 항목에 대한 액션(삭제/재시도)과 업로드 진행 상태를 표시할 수 있습니다.

Attachment Input의 Anatomy 이미지. Trigger, Delete Button, Preview, Loading State, Retry Button으로 구성됩니다.

Properties

Variant

Attachment Input은 사진/영상을 첨부하는 Media 타입과 파일을 첨부하는 File 타입으로 구성되어 있습니다.

Attachment Input의 Variant - Media, File

Preview Badge

Preview 항목에 배지를 표시할 수 있습니다. 주로 첫 번째 Preview에 대표사진 배지를 표시하는 용도로 사용합니다.

배지는 썸네일 하단에 반투명 오버레이 형태로 표시됩니다.
배지 레이블은 변경할 수 있습니다.

Attachment Input Preview Badge 예시

State

Trigger와 Preview는 각각 다른 상태를 가집니다.

Trigger: Enabled, Pressed, Disabled 상태가 있으며 값이 있는 경우 Count는 Neutral 컬러로 표시됩니다.
Preview: Enabled, Loading, Error, Disabled 상태를 가집니다.
Remove Button: Preview 우측 상단의 삭제 버튼으로, Enabled, Pressed, Disabled 상태를 개별로 가집니다.

Attachment Input Trigger의 Enabled, Has Value, Pressed, Disabled 상태 예시

Attachment Input Preview의 Enabled, Loading, Error, Disabled, Dragging 상태 예시

Attachment Input Remove Button의 Enabled, Pressed, Disabled 상태 예시

Dropzone

파일을 드래그 앤 드롭으로 업로드할 수 있는 영역입니다. 기존 Trigger 버튼과 함께 사용되며, 드롭 가능한 영역을 시각적으로 명확히 제공합니다.

버튼 클릭과 드래그 앤 드롭 두 가지 방식으로 파일을 선택할 수 있습니다.
드래그 진입 시 영역 테두리와 배경색이 변경되어 활성 상태를 표시합니다.
파일 선택 후 Preview가 Dropzone 하단에 인라인으로 표시됩니다.

Attachment Input Dropzone의 Enabled, Dragging Over, 파일 첨부 이후 예시

Reorder

Reorderable 옵션을 활성화하면 Preview 항목을 드래그하여 순서를 변경할 수 있습니다.

Attachment Input의 Reorder 예시

Specification

Attachment Input

base

상태	슬롯	속성	값
enabled	root Attachment Input Dropzone과 Items를 감싸는 컨테이너입니다.	gap	$dimension.x2
	items Attachment Input Trigger 및 Attachment Input Items를 감싸는 컨테이너입니다.	gap	$dimension.x2

Attachment Input Trigger

base

상태	슬롯	속성	값
enabled	root	size
		gap	$dimension.x1
		color	$color.bg.transparent
		cornerRadius	$radius.r3
		strokeWidth
		strokeColor	$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
	icon	size	$dimension.x6
		color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
	itemCount	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
		fontWeight	$font-weight.regular
		fontSize	$font-size.t2
		lineHeight	$line-height.t2
	maxItemCount	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		fontWeight	$font-weight.regular
		fontSize	$font-size.t2
		lineHeight	$line-height.t2
pressed	root	color	$color.bg.transparent-pressed
disabled	icon	color	$color.fg.disabled
	itemCount	color	$color.fg.disabled
	maxItemCount	color	$color.fg.disabled

Attachment Input Item

base

상태	슬롯	속성	값
enabled	root	height
		color	$color.bg.transparent
		cornerRadius	$radius.r3
		strokeWidth
		gap	$dimension.x2_5
	thumbnail	color	$color.bg.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
		size	$dimension.x12
		cornerRadius	$radius.r2
	thumbnailIcon	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		size	$dimension.x6
	name	color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
		fontSize	$font-size.t2
		lineHeight	$line-height.t2
		fontWeight	$font-weight.medium
	size	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		fontSize	$font-size.t1
		lineHeight	$line-height.t1
		fontWeight	$font-weight.regular
	removeButtonMask dragging 상태에서는 표시되지 않습니다.	offset	$dimension.x1_5
		size	$dimension.x6

type=file

상태	슬롯	속성	값
enabled	root	width
		strokeColor	$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
		paddingX	$dimension.x4
readonly	thumbnailIcon	color	$color.fg.disabled
	name	color	$color.fg.disabled
	size	color	$color.fg.disabled
dragging	thumbnailIcon	color	$color.fg.disabled
	name	color	$color.fg.disabled
	size	color	$color.fg.disabled

type=image

상태	슬롯	속성	값
enabled	root	width
		strokeColor	$color.stroke.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
	backdrop	color	$color.bg.overlay
	badge	color	$color.bg.overlay
		height	$dimension.x6
		cornerRadius	$radius.r3
		paddingX	$dimension.x1
	badgeLabel	color	$color.palette.static-white
		fontSize	$font-size.t2
		lineHeight	$line-height.t2
		fontWeight	$font-weight.medium
readonly	root	opacity
dragging	root	opacity

Attachment Input Item Action Button

base

상태	슬롯	속성	값
enabled	root	gap	$dimension.x1
	icon	size	$dimension.x6
	label	fontSize	$font-size.t2
		lineHeight	$line-height.t2
		fontWeight	$font-weight.medium

type=file

상태	슬롯	속성	값
enabled	icon	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
	label	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)

type=image

상태	슬롯	속성	값
enabled	icon	color	$color.palette.static-white
	label	color	$color.palette.static-white

Attachment Input Item Remove Button

base

상태	슬롯	속성	값
enabled	root	size	$dimension.x5
		cornerRadius	$radius.full
		color	$color.bg.layer-default basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다.
		strokeWidth
		strokeColor	$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)
		offset	$dimension.x1
	icon	size	$dimension.x2_5
		color	$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.
pressed	root	color	$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed)
disabled	icon	color	$color.fg.disabled

Attachment Input Dropzone

base

상태	슬롯	속성	값
enabled	root 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다.	height
		gap	$dimension.x2
		paddingX	$dimension.x4
		cornerRadius	$radius.r3
		strokeWidth
		strokeColor	$color.palette.gray-500
	label	color	$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)
		fontSize	$font-size.t4
		lineHeight	$font-size.t4
		fontWeight	$font-weight.medium
draggingOver	root 파일을 root 위로 dragging over 하는 동안 border style이 dashed에서 solid로 변경됩니다.	strokeColor	$color.stroke.neutral-solid 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)
disabled	label	color	$color.fg.disabled

Attachment Input

base

base

base

type=file

type=image

base

type=file

type=image

base

base

On this page