Web - UploadMainButton

정의

MainButton

최적화 대상

Desktop

Mobile

기획 배포

검토

디자인 가이드 배포

완료

개발 코드 배포

완료

Purpose

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

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

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

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

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

Variation

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

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

• Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

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

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

• Xmall 사이즈는 아이콘 옵션이 제공되지 않습니다.

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)

Height

48px

40px

32px

24px

Width

min-width : 96px

-

-

-

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

enabled

ui_cpnt_button_text_on_primary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_base_primary

hover

ui_cpnt_button_text_on_primary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_hover (ui_cpnt_button_fill_base_primary 위에 겹쳐짐)

pressed

ui_cpnt_button_text_on_primary

ui_cpnt_button_icon_on_primary

ui_cpnt_button_fill_on_base_pressed (ui_cpnt_button_fill_base_primary 위에 겹쳐짐)

disabled

ui_cpnt_button_text_disabled

ui_cpnt_button_icon_disabled

ui_cpnt_button_fill_base_disabled

*hover, pressed 액션 없음

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

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

enum

'none'

'none'

사용하지 않음

'use'

사용함

number | string | object | Array<string | object> | undefined | null

-

enum

'round'

'round'

둥근 직사각형 형태의 shapeType

'circular'

원형 형태의 shapeType (지금 사용하지 않습니다.)

'rectangle'

직사각형 형태의 shapeType (지금 사용하지 않습니다.)

enum

'fill'

'fill'

면형으로 표현되는 버튼 fillType

'line'

선형으로 표현되는 버튼 fillType

enum

'large'

'large'

'medium'

'small'

'xsmall'

'rlarge'

responsive - large (full-width)

enum

-

'bold'

텍스트 사용 규칙의 ‘bold’를 따릅니다.

'regular'

텍스트 사용 규칙의 ‘regular’를 따릅니다.

-

-

-

-

-

-

enum

'none'

'none'

아이콘 없음

'left'

아이콘 좌측 위치

'right'

아이콘 우측 위치

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

-

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

enum

'normal'

'normal'

기본 상태 입니다.

'disabled'

비활성화 상태입니다.

enum

'hidden'

'hidden'

그림자 없음

'visible'

그림자 표시

enum

'none'

'none'

기본값 사용

'line1'

*base color는 spec 참고

{
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 참고

{
border-color: ui_cpnt_button_line_border_primary;
text-color: ui_cpnt_button_text_primary;
icon-color: ui_cpnt_button_icon_primary;
}

'line3'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다. (spec 기술 참고)

string

'*'

enum

'none'

'none'

단일 파일만 선택이 가능합니다.

'use'

복수개의 파일 선택이 가능합니다.

(e: React.ChangeEvent<HTMLInputElement>) => void

-

김혜진, 박윤규

• 2022/04/04 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수

• 2022/02/25 : 개발 코드 배포여부 추가 - 안은수

• 2022/01/27 : 문서 복제 - 김혜진