Web - UploadMainButton

업로드용 버튼입니다. 제출용 버튼은 Web - MainButton 문서 참고

*현재 MainButton 문서 복제한 상태이며, 추후 자세한 내용 정리 들어갈 예정 (Properties정리는 완료)

Definition

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

Principle

버튼은 이용자들이 원하는 기능을 실행하거나 선택을 할 수 있게 해주는 요소입니다. 그 중 메인 버튼은 화면 내 상호 작용이 필요할 때 사용하는 버튼입니다.

또한 버튼은 fixed width 가 존재하지 않습니다. TextLabel과의 padding 간격으로 너비가 결정되고, 반응형일 경우에는 Content width (부모)의 넓이를 따라갑니다.

종류

화면 내 중요도에 따라 styleTheme에서 primary와 secondary를 선택하여 사용할 수 있습니다.
fillType은 외적인 형태를 결정짓는 요소입니다.

Primary / Fill fillType

Secondary / Fill fillType

Purpose

가장 중요도가 높은 곳에 쓰이며, 사용자의 액션을 적극적으로 유도하는데 사용하는 버튼입니다.

publ에서는 브랜드 컬러를 적용하여 강조하고 있습니다.

일반적으로 사용하는 기본 버튼입니다.

Fill 버튼 보다 낮은 주목성을 갖습니다. (중간 강조)

페이지 내 Fill 버튼이 있는 경우 보조 버튼으로 함께 사용할 수 있고, 한 페이지에 여러 개가 존재할 수 있습니다.

Variation

텍스트나 아이콘을 포함하고 있으며 아이콘은 옵션입니다.

아이콘을 사용할 경우 텍스트의 왼쪽에 배치해야하고, 우측에 배치할 수 있는 아이콘이 정해져 있습니다. (오른쪽 화살표, 외부링크 아이콘)
Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

텍스트나 아이콘을 포함하고 있으며 아이콘은 옵션입니다.

아이콘을 사용할 경우 텍스트의 왼쪽에 배치해야하고, 우측에 배치할 수 있는 아이콘이 정해져 있습니다. (오른쪽 화살표, 외부링크 아이콘)
Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

사이즈별 용법

버튼은 사이즈별로 중요도와 용법이 다릅니다.

	Primary / Fill fillType	Secondary / Fill fillType
Large (48px)	페이지 전체 영역에 영향을 주는 버튼입니다. 사용자의 행동을 유도하는 버튼(CTA 버튼)이므로 한 페이지에 하나만 존재해야 하고, 주로 콘텐츠 하단에 배치되어 있습니다. lineType와 함께 나란히 배치 될 수 있습니다. 이 때 우측에 놓여진 버튼이 가장 중요한 버튼이므로 fillType이 우측에, lineType이 좌측에 배치 됩니다. 높은 주목성을 가져야하기 때문에, publ에서는 브랜드 컬러를 적용하여 강조하고 있습니다. 특수한 경우가 아니라면, full-width(rlarge)로 배치하지 않습니다.	페이지 전체 영역에 영향을 주는 버튼입니다. 페이지 내 Fill 버튼이 있는 경우 보조 버튼으로 함께 사용할 수 있습니다. 원칙적으로 한 페이지에 여러 개가 존재할 수 있으나, 되도록 한 개만 배치할 것을 권장합니다. 특수한 경우가 아니라면, full-width(rlarge)로 배치하지 않습니다.
Medium (40px)	모달 버튼으로 가장 중요한 액션일 경우에 사용합니다. Fill fillType는 중요도가 높을 때 사용하는 것이므로 여러 개 사용하지 않습니다.	모달 버튼으로 나머지 액션들에 사용합니다.
Small (32px)	섹션 내 해당 섹션에 어떠한 액션을 제공할 때 사용합니다. 섹션마다 버튼이 다 제공될 수 있지만 Fill fillType는 중요도가 높을 때 사용하는 것이므로 한 페이지에 여러 개 사용하지 않습니다.	섹션 내 해당 섹션에 어떠한 액션을 제공할 때 사용합니다. 섹션마다 버튼이 다 제공될 수 있고, 한 페이지에 여러 개 사용할 수 있습니다. TextField 옆에 나란히 두거나 이미지나 영상을 업로드 하는 경우에 주로 쓰입니다.
XSmall (24px)

Spec

Guide

Size, Property

	Large	Medium	Small	XSmall
Height	48px	40px	32px	24px
Width	min-width : 96px	min-width : 64px	min-width : 48px	min-width : 48px
radius	14px	12px	10px	8px
text	font size : body1 font weight : bold textLineType : single일 경우, 행간 singleLine 적용 그 외 body1에 적용한 행간 적용	font size : body2 font weight : bold textLineType : single일 경우, 행간 singleLine 적용 그 외 body2에 적용한 행간 적용	font size : caption1 font weight : bold textLineType : single일 경우, 행간 singleLine 적용 그 외 caption1에 적용한 행간 적용	font size : caption1 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 caption1에 적용한 행간 적용
icon	size : 20	size : 16	size : 16	N/A

Color 구성

Color Key

버튼에는 다양한 상태들이 존재합니다. 버튼을 구성하는 요소들의 컬러 변화로 상태들을 표현합니다.

Primary

	textColor	iconColor	baseColor
enabled	Web - TextLabel 참고 colorTheme : usrTextBrandOnPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_base_primary`
hover	Web - TextLabel 참고 colorTheme : usrTextBrandOnPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_hover` (`ui_cpnt_button_fill_base_primary` 위에 겹쳐짐)
pressed	Web - TextLabel 참고 colorTheme : usrTextBrandOnPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_pressed` (`ui_cpnt_button_fill_base_primary` 위에 겹쳐짐)
disabled	Web - TextLabel 참고 colorTheme : sysTextTertiary	`ui_cpnt_button_icon_disabled`	`ui_cpnt_button_fill_base_disabled` *hover, pressed 액션 없음

Secondary

	textColor	iconColor	baseColor
enabled	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_base_default`
hover	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_hover` (`ui_cpnt_button_fill_base_default` 위에 겹쳐짐)
pressed	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_fill_on_base_pressed` (`ui_cpnt_button_fill_base_default` 위에 겹쳐짐)
disabled	Web - TextLabel 참고 colorTheme : sysTextTertiary	`ui_cpnt_button_icon_disabled`	`ui_cpnt_button_fill_base_default` *hover, pressed 액션 없음

fillType : Line (deprecated 예정)

	textColor	iconColor	borderColor	baseColor
enabled	`ui_cpnt_button_text_enabled`	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_default`
hover	`ui_cpnt_button_text_enabled`	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_hover`
pressed	`ui_cpnt_button_text_enabled`	`ui_cpnt_button_icon_enabled`	`ui_cpnt_button_line_border_enabled`	`ui_cpnt_button_line_base_pressed`
disabled	`ui_cpnt_button_text_disabled`	`ui_cpnt_button_icon_disalbed`	`ui_cpnt_button_line_border_disabled`	`ui_cpnt_button_line_base_default`

colorTheme : line3 (deprecated 예정)

	textColor	iconColor	borderColor	baseColor
enabled	`ui_cpnt_button_text_darktheme_enabled`	`ui_cpnt_button_icon_darktheme_enabled`	`ui_cpnt_button_line_border_darktheme_enabled`	`ui_cpnt_button_line_base_darktheme_default`
hover	`ui_cpnt_button_text_darktheme_enabled`	`ui_cpnt_button_icon_darktheme_enabled`	`ui_cpnt_button_line_border_darktheme_enabled`	`ui_cpnt_button_line_base_darktheme_hover`
pressed	`ui_cpnt_button_text_darktheme_enabled`	`ui_cpnt_button_icon_darktheme_enabled`	`ui_cpnt_button_line_border_darktheme_enabled`	`ui_cpnt_button_line_base_darktheme_pressed`
disabled	`ui_cpnt_button_text_darktheme_disabled`	`ui_cpnt_button_icon_darktheme_disabled`	`ui_cpnt_button_line_border_darktheme_disabled`	`ui_cpnt_button_line_base_darktheme_default`

colorTheme : primary1 (styleTheme의 primary를 참고한다.)

	textColor	iconColor	baseColor
enabled	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_primary`	`ui_cpnt_button_primary_variation_base_enabled`
hover	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_primary`	`ui_cpnt_button_fill_on_base_hover` (`ui_cpnt_button_primary_variation_base_enabled` 위에 겹쳐짐)
pressed	Web - TextLabel 참고 colorTheme : usrTextBrandPrimary	`ui_cpnt_button_icon_primary`	`ui_cpnt_button_fill_on_base_pressed` (`ui_cpnt_button_primary_variation_base_enabled` 위에 겹쳐짐)
disabled	Web - TextLabel 참고 colorTheme : sysTextTertiary	`ui_cpnt_button_icon_disabled`	`ui_cpnt_button_fill_base_disabled` *hover, pressed 액션 없음

colorTheme : secondary1 (styleTheme의 secondary를 참고한다.)

	textColor	iconColor	baseColor
enabled	Web - TextLabel 참고 colorTheme : sysTextWhite	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_secondary_variation_base_default`
hover	Web - TextLabel 참고 colorTheme : sysTextWhite	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_secondary_variation_base_hover`
pressed	Web - TextLabel 참고 colorTheme : sysTextWhite	`ui_cpnt_button_icon_on_primary`	`ui_cpnt_button_secondary_variation_base_pressed`
disabled	`ui_cpnt_button_text_secondary_variation_disabled`	`ui_cpnt_button_icon_secondary_variation_disabled`	`ui_cpnt_button_secondary_variation_base_default` *hover, pressed 액션 없음

Properties

responsiveMode

Added in 1.2

화면에 맞춰 늘릴 것인지 결정합니다. (반응형)

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

text

표시할 텍스트 값입니다.

기획 지시사항

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

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

shapeType

Added in 1.4

버튼의 외관 형태를 결정합니다.

Type	`enum`
Default	`'round'`

Enum Values Description
`'round'`	둥근 직사각형 형태의 shapeType
`'rectangle'`	직사각형 형태의 shapeType

fillType

디자인 표현이 선형인지, 면인지를 의미합니다.
*styleTheme은 중요도에 따른 선택이고, fillType은 외적인 형태를 결정짓는 요소입니다. 현재는 사용을 권장하지 않습니다.

기획 지시사항

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

Type	`enum`
Default	`'fill'`

Enum Values Description
`'fill'`	면형으로 표현되는 버튼 fillType
`'line'`	선형으로 표현되는 버튼 fillType

styleTheme

Added in 1.4

외형의 프리셋 테마입니다.

Type	`enum`
Default	`'primary'`

Enum Values Description
`'primary'`	주요로 사용하는 버튼입니다. 화면 내에 전환이 있을 때 사용하고 가장 중요도가 높습니다.
`'secondary'`	Primary 버튼과 함께 쓰는 것을 권장합니다. 화면 내 중요도가 높지 않을 때 단독으로도 사용할 수 있습니다.

size

크기를 결정합니다. 단순히 요소의 width, height 뿐만 아니라 텍스트 크기, 아이콘 크기 등이 다 포함됩니다.

기획 지시사항

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

Type	`enum`
Default	`'large'`

Enum Values Description
`'large'`	높이 48px
`'medium'`	높이 40px
`'small'`	높이 32px
`'xsmall'`	높이 24px
`'rlarge'`	responsive - large (full-width)

fontWeight

텍스트의 굵기를 의미합니다.

기획 지시사항

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

Type	`enum`
Default	`'bold'`

Enum Values Description
`'bold'`	텍스트 사용 규칙의 ‘bold’를 따릅니다.
`'regular'`	텍스트 사용 규칙의 ‘regular’를 따릅니다.

textColorKey

현재는 사용하지 않습니다.

텍스트 컬러입니다.

Type	-
Default	-

baseColorKey

현재는 사용하지 않습니다.

배경 컬러입니다. *fillType이 fill일 경우에만 적용 (fillType이 line일 땐 무시)

Type	-
Default	-

borderColorKey

현재는 사용하지 않습니다.

라인의 컬러입니다. *fillType이 line일 경우에만 적용 (fillType이 fill일 땐 무시)

Type	-
Default	-

iconMode

아이콘 유무와 위치를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	아이콘을 사용하지 않습니다.
`'left'`	아이콘을 왼쪽에 사용합니다.
`'right'`	아이콘을 오른쪽에 사용합니다.

iconFillType

아이콘의 형태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

iconName

아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

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

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

state

Added in 1.2

버튼의 상태를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'disabled'`	비활성화 상태입니다.

shadow

현재는 사용하지 않습니다.

버튼의 외관 형태를 결정합니다.

Type	`enum`
Default	`'hidden'`

Enum Values Description
`'hidden'`	그림자 없음
`'visible'`	그림자 표시

colorTheme

컬러의 프리셋 테마입니다.

*현재는 fillType이 line일 경우에만 적용 (fillType이 fill일 땐 무시)추후 fill1이라는 value가 나온다면 이건 fillType이 fill일 때만 적용한다.

*colorTheme에서 text 컬러는 textLabel에 부여되어 있는 컬러를 사용 하는 것이 아니라, ui_형식의 컬러를 textLabel의 colorOverride를 활용하여 부여한다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	기본값 사용
`'line1'`	*base color는 spec 참고 (deprecated 예정) CODE `{ border-color: ui_cpnt_button_line_border_error; text-color: ui_cpnt_button_text_error; icon-color: ui_cpnt_button_icon_error; }`
`'line2'`	*base color는 spec 참고 (deprecated 예정) CODE `{ border-color: ui_cpnt_button_line_border_primary; text-color: ui_cpnt_button_text_primary; icon-color: ui_cpnt_button_icon_primary; }`
`'line3'`	톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다. (spec 기술 참고) fillType : line을 사용했을 때 적용이 됩니다. (deprecated 예정)
`'primary1'`	Added in 1.8 주로 대화형 레이아웃 화면일 때 사용하는 버튼입니다.
`'secondary1'`	Added in 1.8 주로 대화형 레이아웃 화면일 때 사용하는 버튼입니다.

accept

Added in 1.2

특정 확장자 혹은 타입의 파일만 선택할 수 있게 합니다.

기획 지시사항

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

Type	`string`
Default	`'*'`

multipleMode

Added in 1.2

복수 혹은 단수의 파일 선택 여부를 결정합니다.

기획 지시사항

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

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	단일 파일만 선택이 가능합니다.
`'use'`	복수개의 파일 선택이 가능합니다.

isLoading

Added in 1.6

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

기획 지시사항

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

Type	`boolean`
Default	-

isSubmitting

Added in 1.6

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

기획 지시사항

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

Type	`boolean`
Default	-

onClick

Added in 1.2

파일 탐색기에서 파일을 선택을 결정한 시점에 이벤트를 부여합니다.

기획 지시사항

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

Type	`(e: React.ChangeEvent<HTMLInputElement>) => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2023/01/17 : colorTheme 추가(primary1, secondary1) - 김혜진
2022/11/11 : isLoading과 isSubmitting prop 추가 - 안은수
2022/11/07 : onClick 설명글 변경 - 안은수
2022/06/23 : 버튼의 사이즈별 min-width 기술 - 김혜진
2022/06/08 : spec 내 이미지 수정 - 김혜진
2022/06/08 : styleTheme prop추가, fillType prop의 default값 제거 - 안은수
2022/05/25 : shapeType사항 MainButton과 같게 업데이트 - 김혜진
2022/04/04 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/01/27 : 문서 복제 - 김혜진